From cba6d62323eba2286f78e8aea12a5ecd26903728 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Mon, 12 Oct 2015 14:49:23 +0200 Subject: Move CI styles to pages dir Signed-off-by: Dmitriy Zaporozhets --- app/assets/stylesheets/ci/builds.scss | 75 --- app/assets/stylesheets/ci/lint.scss | 10 - app/assets/stylesheets/ci/projects.scss | 59 -- app/assets/stylesheets/ci/runners.scss | 36 - app/assets/stylesheets/ci/status.scss | 37 -- app/assets/stylesheets/ci/xterm.scss | 906 -------------------------- app/assets/stylesheets/pages/builds.scss | 75 +++ app/assets/stylesheets/pages/ci_projects.scss | 59 ++ app/assets/stylesheets/pages/lint.scss | 10 + app/assets/stylesheets/pages/runners.scss | 36 + app/assets/stylesheets/pages/status.scss | 37 ++ app/assets/stylesheets/pages/xterm.scss | 906 ++++++++++++++++++++++++++ 12 files changed, 1123 insertions(+), 1123 deletions(-) delete mode 100644 app/assets/stylesheets/ci/builds.scss delete mode 100644 app/assets/stylesheets/ci/lint.scss delete mode 100644 app/assets/stylesheets/ci/projects.scss delete mode 100644 app/assets/stylesheets/ci/runners.scss delete mode 100644 app/assets/stylesheets/ci/status.scss delete mode 100644 app/assets/stylesheets/ci/xterm.scss create mode 100644 app/assets/stylesheets/pages/builds.scss create mode 100644 app/assets/stylesheets/pages/ci_projects.scss create mode 100644 app/assets/stylesheets/pages/lint.scss create mode 100644 app/assets/stylesheets/pages/runners.scss create mode 100644 app/assets/stylesheets/pages/status.scss create mode 100644 app/assets/stylesheets/pages/xterm.scss diff --git a/app/assets/stylesheets/ci/builds.scss b/app/assets/stylesheets/ci/builds.scss deleted file mode 100644 index 74dc3e321c1..00000000000 --- a/app/assets/stylesheets/ci/builds.scss +++ /dev/null @@ -1,75 +0,0 @@ -.build-page { - pre.trace { - background: #111111; - color: #fff; - font-family: $monospace_font; - white-space: pre; - white-space: pre-wrap; /* css-3 */ - white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ - white-space: -pre-wrap; /* Opera 4-6 */ - white-space: -o-pre-wrap; /* Opera 7 */ - word-wrap: break-word; /* Internet Explorer 5.5+ */ - overflow: auto; - overflow-y: hidden; - font-size: 12px; - - .fa-refresh { - font-size: 24px; - margin-left: 20px; - } - } - - .autoscroll-container { - position: fixed; - bottom: 10px; - right: 20px; - z-index: 100; - } - - .scroll-controls { - position: fixed; - bottom: 10px; - left: 250px; - z-index: 100; - - a { - display: block; - margin-bottom: 5px; - } - } - - .page-sidebar-collapsed { - .scroll-controls { - left: 70px; - } - } - - .build-widget { - padding: 10px; - background: $background-color; - margin-bottom: 20px; - border-radius: 4px; - - .title { - margin-top: 0; - color: #666; - line-height: 1.5; - } - .attr-name { - color: #777; - } - } - - .alert-disabled { - background: $background-color; - - a { - color: #3084bb !important; - } - } - - .build-top-menu { - margin-top: 0; - margin-bottom: 2px; - } -} diff --git a/app/assets/stylesheets/ci/lint.scss b/app/assets/stylesheets/ci/lint.scss deleted file mode 100644 index 6d2bd33b28b..00000000000 --- a/app/assets/stylesheets/ci/lint.scss +++ /dev/null @@ -1,10 +0,0 @@ -.ci-body { - .incorrect-syntax{ - font-size: 19px; - color: red; - } - .correct-syntax{ - font-size: 19px; - color: #47a447; - } -} diff --git a/app/assets/stylesheets/ci/projects.scss b/app/assets/stylesheets/ci/projects.scss deleted file mode 100644 index 8c5273abcda..00000000000 --- a/app/assets/stylesheets/ci/projects.scss +++ /dev/null @@ -1,59 +0,0 @@ -.ci-body { - .project-title { - margin: 0; - color: #444; - font-size: 20px; - line-height: 1.5; - } - - .wide-table-holder { - margin-left: -$gl-padding; - margin-right: -$gl-padding; - } - - .builds, - .projects-table { - .light { - border-color: $border-color; - } - - th, td { - padding: 10px $gl-padding; - } - - td { - color: $gl-gray; - vertical-align: middle !important; - - a { - font-weight: normal; - text-decoration: none; - } - } - } - - .commit-info { - .attr-name { - margin-right: 5px; - } - - pre.commit-message { - background: none; - padding: 0; - margin: 0; - border: none; - margin: 20px 0; - border-radius: 0; - } - } - - .loading{ - font-size: 20px; - } - - .ci-charts { - fieldset { - margin-bottom: 16px; - } - } -} diff --git a/app/assets/stylesheets/ci/runners.scss b/app/assets/stylesheets/ci/runners.scss deleted file mode 100644 index 2b15ab83129..00000000000 --- a/app/assets/stylesheets/ci/runners.scss +++ /dev/null @@ -1,36 +0,0 @@ -.ci-body { - .runner-state { - padding: 6px 12px; - margin-right: 10px; - color: #FFF; - - &.runner-state-shared { - background: #32b186; - } - &.runner-state-specific { - background: #3498db; - } - } - - .runner-status-online { - color: green; - } - - .runner-status-offline { - color: gray; - } - - .runner-status-paused { - color: red; - } - - .runner { - .btn { - padding: 1px 6px; - } - - h4 { - font-weight: normal; - } - } -} diff --git a/app/assets/stylesheets/ci/status.scss b/app/assets/stylesheets/ci/status.scss deleted file mode 100644 index a7d3b2197f1..00000000000 --- a/app/assets/stylesheets/ci/status.scss +++ /dev/null @@ -1,37 +0,0 @@ -.ci-status { - padding: 2px 7px; - margin-right: 5px; - border: 1px solid #EEE; - white-space: nowrap; - @include border-radius(4px); - - &:hover { - text-decoration: none; - } - - &.ci-failed { - color: $gl-danger; - border-color: $gl-danger; - } - - &.ci-success { - color: $gl-success; - border-color: $gl-success; - } - - &.ci-info { - color: $gl-info; - border-color: $gl-info; - } - - &.ci-disabled { - color: $gl-gray; - border-color: $gl-gray; - } - - &.ci-pending, - &.ci-running { - color: $gl-warning; - border-color: $gl-warning; - } -} diff --git a/app/assets/stylesheets/ci/xterm.scss b/app/assets/stylesheets/ci/xterm.scss deleted file mode 100644 index 9a50096c0d0..00000000000 --- a/app/assets/stylesheets/ci/xterm.scss +++ /dev/null @@ -1,906 +0,0 @@ -.build-page { - // color codes are based on http://en.wikipedia.org/wiki/File:Xterm_256color_chart.svg - // see also: https://gist.github.com/jasonm23/2868981 - - $black: #000000; - $red: #cd0000; - $green: #00cd00; - $yellow: #cdcd00; - $blue: #0000ee; // according to wikipedia, this is the xterm standard - //$blue: #1e90ff; // this is used by all the terminals I tried (when configured with the xterm color profile) - $magenta: #cd00cd; - $cyan: #00cdcd; - $white: #e5e5e5; - $l-black: #7f7f7f; - $l-red: #ff0000; - $l-green: #00ff00; - $l-yellow: #ffff00; - $l-blue: #5c5cff; - $l-magenta: #ff00ff; - $l-cyan: #00ffff; - $l-white: #ffffff; - - .term-bold { - font-weight: bold; - } - .term-italic { - font-style: italic; - } - .term-conceal { - visibility: hidden; - } - .term-underline { - text-decoration: underline; - } - .term-cross { - text-decoration: line-through; - } - - .term-fg-black { - color: $black; - } - .term-fg-red { - color: $red; - } - .term-fg-green { - color: $green; - } - .term-fg-yellow { - color: $yellow; - } - .term-fg-blue { - color: $blue; - } - .term-fg-magenta { - color: $magenta; - } - .term-fg-cyan { - color: $cyan; - } - .term-fg-white { - color: $white; - } - .term-fg-l-black { - color: $l-black; - } - .term-fg-l-red { - color: $l-red; - } - .term-fg-l-green { - color: $l-green; - } - .term-fg-l-yellow { - color: $l-yellow; - } - .term-fg-l-blue { - color: $l-blue; - } - .term-fg-l-magenta { - color: $l-magenta; - } - .term-fg-l-cyan { - color: $l-cyan; - } - .term-fg-l-white { - color: $l-white; - } - - .term-bg-black { - background-color: $black; - } - .term-bg-red { - background-color: $red; - } - .term-bg-green { - background-color: $green; - } - .term-bg-yellow { - background-color: $yellow; - } - .term-bg-blue { - background-color: $blue; - } - .term-bg-magenta { - background-color: $magenta; - } - .term-bg-cyan { - background-color: $cyan; - } - .term-bg-white { - background-color: $white; - } - .term-bg-l-black { - background-color: $l-black; - } - .term-bg-l-red { - background-color: $l-red; - } - .term-bg-l-green { - background-color: $l-green; - } - .term-bg-l-yellow { - background-color: $l-yellow; - } - .term-bg-l-blue { - background-color: $l-blue; - } - .term-bg-l-magenta { - background-color: $l-magenta; - } - .term-bg-l-cyan { - background-color: $l-cyan; - } - .term-bg-l-white { - background-color: $l-white; - } - - - .xterm-fg-0 { - color: #000000; - } - .xterm-fg-1 { - color: #800000; - } - .xterm-fg-2 { - color: #008000; - } - .xterm-fg-3 { - color: #808000; - } - .xterm-fg-4 { - color: #000080; - } - .xterm-fg-5 { - color: #800080; - } - .xterm-fg-6 { - color: #008080; - } - .xterm-fg-7 { - color: #c0c0c0; - } - .xterm-fg-8 { - color: #808080; - } - .xterm-fg-9 { - color: #ff0000; - } - .xterm-fg-10 { - color: #00ff00; - } - .xterm-fg-11 { - color: #ffff00; - } - .xterm-fg-12 { - color: #0000ff; - } - .xterm-fg-13 { - color: #ff00ff; - } - .xterm-fg-14 { - color: #00ffff; - } - .xterm-fg-15 { - color: #ffffff; - } - .xterm-fg-16 { - color: #000000; - } - .xterm-fg-17 { - color: #00005f; - } - .xterm-fg-18 { - color: #000087; - } - .xterm-fg-19 { - color: #0000af; - } - .xterm-fg-20 { - color: #0000d7; - } - .xterm-fg-21 { - color: #0000ff; - } - .xterm-fg-22 { - color: #005f00; - } - .xterm-fg-23 { - color: #005f5f; - } - .xterm-fg-24 { - color: #005f87; - } - .xterm-fg-25 { - color: #005faf; - } - .xterm-fg-26 { - color: #005fd7; - } - .xterm-fg-27 { - color: #005fff; - } - .xterm-fg-28 { - color: #008700; - } - .xterm-fg-29 { - color: #00875f; - } - .xterm-fg-30 { - color: #008787; - } - .xterm-fg-31 { - color: #0087af; - } - .xterm-fg-32 { - color: #0087d7; - } - .xterm-fg-33 { - color: #0087ff; - } - .xterm-fg-34 { - color: #00af00; - } - .xterm-fg-35 { - color: #00af5f; - } - .xterm-fg-36 { - color: #00af87; - } - .xterm-fg-37 { - color: #00afaf; - } - .xterm-fg-38 { - color: #00afd7; - } - .xterm-fg-39 { - color: #00afff; - } - .xterm-fg-40 { - color: #00d700; - } - .xterm-fg-41 { - color: #00d75f; - } - .xterm-fg-42 { - color: #00d787; - } - .xterm-fg-43 { - color: #00d7af; - } - .xterm-fg-44 { - color: #00d7d7; - } - .xterm-fg-45 { - color: #00d7ff; - } - .xterm-fg-46 { - color: #00ff00; - } - .xterm-fg-47 { - color: #00ff5f; - } - .xterm-fg-48 { - color: #00ff87; - } - .xterm-fg-49 { - color: #00ffaf; - } - .xterm-fg-50 { - color: #00ffd7; - } - .xterm-fg-51 { - color: #00ffff; - } - .xterm-fg-52 { - color: #5f0000; - } - .xterm-fg-53 { - color: #5f005f; - } - .xterm-fg-54 { - color: #5f0087; - } - .xterm-fg-55 { - color: #5f00af; - } - .xterm-fg-56 { - color: #5f00d7; - } - .xterm-fg-57 { - color: #5f00ff; - } - .xterm-fg-58 { - color: #5f5f00; - } - .xterm-fg-59 { - color: #5f5f5f; - } - .xterm-fg-60 { - color: #5f5f87; - } - .xterm-fg-61 { - color: #5f5faf; - } - .xterm-fg-62 { - color: #5f5fd7; - } - .xterm-fg-63 { - color: #5f5fff; - } - .xterm-fg-64 { - color: #5f8700; - } - .xterm-fg-65 { - color: #5f875f; - } - .xterm-fg-66 { - color: #5f8787; - } - .xterm-fg-67 { - color: #5f87af; - } - .xterm-fg-68 { - color: #5f87d7; - } - .xterm-fg-69 { - color: #5f87ff; - } - .xterm-fg-70 { - color: #5faf00; - } - .xterm-fg-71 { - color: #5faf5f; - } - .xterm-fg-72 { - color: #5faf87; - } - .xterm-fg-73 { - color: #5fafaf; - } - .xterm-fg-74 { - color: #5fafd7; - } - .xterm-fg-75 { - color: #5fafff; - } - .xterm-fg-76 { - color: #5fd700; - } - .xterm-fg-77 { - color: #5fd75f; - } - .xterm-fg-78 { - color: #5fd787; - } - .xterm-fg-79 { - color: #5fd7af; - } - .xterm-fg-80 { - color: #5fd7d7; - } - .xterm-fg-81 { - color: #5fd7ff; - } - .xterm-fg-82 { - color: #5fff00; - } - .xterm-fg-83 { - color: #5fff5f; - } - .xterm-fg-84 { - color: #5fff87; - } - .xterm-fg-85 { - color: #5fffaf; - } - .xterm-fg-86 { - color: #5fffd7; - } - .xterm-fg-87 { - color: #5fffff; - } - .xterm-fg-88 { - color: #870000; - } - .xterm-fg-89 { - color: #87005f; - } - .xterm-fg-90 { - color: #870087; - } - .xterm-fg-91 { - color: #8700af; - } - .xterm-fg-92 { - color: #8700d7; - } - .xterm-fg-93 { - color: #8700ff; - } - .xterm-fg-94 { - color: #875f00; - } - .xterm-fg-95 { - color: #875f5f; - } - .xterm-fg-96 { - color: #875f87; - } - .xterm-fg-97 { - color: #875faf; - } - .xterm-fg-98 { - color: #875fd7; - } - .xterm-fg-99 { - color: #875fff; - } - .xterm-fg-100 { - color: #878700; - } - .xterm-fg-101 { - color: #87875f; - } - .xterm-fg-102 { - color: #878787; - } - .xterm-fg-103 { - color: #8787af; - } - .xterm-fg-104 { - color: #8787d7; - } - .xterm-fg-105 { - color: #8787ff; - } - .xterm-fg-106 { - color: #87af00; - } - .xterm-fg-107 { - color: #87af5f; - } - .xterm-fg-108 { - color: #87af87; - } - .xterm-fg-109 { - color: #87afaf; - } - .xterm-fg-110 { - color: #87afd7; - } - .xterm-fg-111 { - color: #87afff; - } - .xterm-fg-112 { - color: #87d700; - } - .xterm-fg-113 { - color: #87d75f; - } - .xterm-fg-114 { - color: #87d787; - } - .xterm-fg-115 { - color: #87d7af; - } - .xterm-fg-116 { - color: #87d7d7; - } - .xterm-fg-117 { - color: #87d7ff; - } - .xterm-fg-118 { - color: #87ff00; - } - .xterm-fg-119 { - color: #87ff5f; - } - .xterm-fg-120 { - color: #87ff87; - } - .xterm-fg-121 { - color: #87ffaf; - } - .xterm-fg-122 { - color: #87ffd7; - } - .xterm-fg-123 { - color: #87ffff; - } - .xterm-fg-124 { - color: #af0000; - } - .xterm-fg-125 { - color: #af005f; - } - .xterm-fg-126 { - color: #af0087; - } - .xterm-fg-127 { - color: #af00af; - } - .xterm-fg-128 { - color: #af00d7; - } - .xterm-fg-129 { - color: #af00ff; - } - .xterm-fg-130 { - color: #af5f00; - } - .xterm-fg-131 { - color: #af5f5f; - } - .xterm-fg-132 { - color: #af5f87; - } - .xterm-fg-133 { - color: #af5faf; - } - .xterm-fg-134 { - color: #af5fd7; - } - .xterm-fg-135 { - color: #af5fff; - } - .xterm-fg-136 { - color: #af8700; - } - .xterm-fg-137 { - color: #af875f; - } - .xterm-fg-138 { - color: #af8787; - } - .xterm-fg-139 { - color: #af87af; - } - .xterm-fg-140 { - color: #af87d7; - } - .xterm-fg-141 { - color: #af87ff; - } - .xterm-fg-142 { - color: #afaf00; - } - .xterm-fg-143 { - color: #afaf5f; - } - .xterm-fg-144 { - color: #afaf87; - } - .xterm-fg-145 { - color: #afafaf; - } - .xterm-fg-146 { - color: #afafd7; - } - .xterm-fg-147 { - color: #afafff; - } - .xterm-fg-148 { - color: #afd700; - } - .xterm-fg-149 { - color: #afd75f; - } - .xterm-fg-150 { - color: #afd787; - } - .xterm-fg-151 { - color: #afd7af; - } - .xterm-fg-152 { - color: #afd7d7; - } - .xterm-fg-153 { - color: #afd7ff; - } - .xterm-fg-154 { - color: #afff00; - } - .xterm-fg-155 { - color: #afff5f; - } - .xterm-fg-156 { - color: #afff87; - } - .xterm-fg-157 { - color: #afffaf; - } - .xterm-fg-158 { - color: #afffd7; - } - .xterm-fg-159 { - color: #afffff; - } - .xterm-fg-160 { - color: #d70000; - } - .xterm-fg-161 { - color: #d7005f; - } - .xterm-fg-162 { - color: #d70087; - } - .xterm-fg-163 { - color: #d700af; - } - .xterm-fg-164 { - color: #d700d7; - } - .xterm-fg-165 { - color: #d700ff; - } - .xterm-fg-166 { - color: #d75f00; - } - .xterm-fg-167 { - color: #d75f5f; - } - .xterm-fg-168 { - color: #d75f87; - } - .xterm-fg-169 { - color: #d75faf; - } - .xterm-fg-170 { - color: #d75fd7; - } - .xterm-fg-171 { - color: #d75fff; - } - .xterm-fg-172 { - color: #d78700; - } - .xterm-fg-173 { - color: #d7875f; - } - .xterm-fg-174 { - color: #d78787; - } - .xterm-fg-175 { - color: #d787af; - } - .xterm-fg-176 { - color: #d787d7; - } - .xterm-fg-177 { - color: #d787ff; - } - .xterm-fg-178 { - color: #d7af00; - } - .xterm-fg-179 { - color: #d7af5f; - } - .xterm-fg-180 { - color: #d7af87; - } - .xterm-fg-181 { - color: #d7afaf; - } - .xterm-fg-182 { - color: #d7afd7; - } - .xterm-fg-183 { - color: #d7afff; - } - .xterm-fg-184 { - color: #d7d700; - } - .xterm-fg-185 { - color: #d7d75f; - } - .xterm-fg-186 { - color: #d7d787; - } - .xterm-fg-187 { - color: #d7d7af; - } - .xterm-fg-188 { - color: #d7d7d7; - } - .xterm-fg-189 { - color: #d7d7ff; - } - .xterm-fg-190 { - color: #d7ff00; - } - .xterm-fg-191 { - color: #d7ff5f; - } - .xterm-fg-192 { - color: #d7ff87; - } - .xterm-fg-193 { - color: #d7ffaf; - } - .xterm-fg-194 { - color: #d7ffd7; - } - .xterm-fg-195 { - color: #d7ffff; - } - .xterm-fg-196 { - color: #ff0000; - } - .xterm-fg-197 { - color: #ff005f; - } - .xterm-fg-198 { - color: #ff0087; - } - .xterm-fg-199 { - color: #ff00af; - } - .xterm-fg-200 { - color: #ff00d7; - } - .xterm-fg-201 { - color: #ff00ff; - } - .xterm-fg-202 { - color: #ff5f00; - } - .xterm-fg-203 { - color: #ff5f5f; - } - .xterm-fg-204 { - color: #ff5f87; - } - .xterm-fg-205 { - color: #ff5faf; - } - .xterm-fg-206 { - color: #ff5fd7; - } - .xterm-fg-207 { - color: #ff5fff; - } - .xterm-fg-208 { - color: #ff8700; - } - .xterm-fg-209 { - color: #ff875f; - } - .xterm-fg-210 { - color: #ff8787; - } - .xterm-fg-211 { - color: #ff87af; - } - .xterm-fg-212 { - color: #ff87d7; - } - .xterm-fg-213 { - color: #ff87ff; - } - .xterm-fg-214 { - color: #ffaf00; - } - .xterm-fg-215 { - color: #ffaf5f; - } - .xterm-fg-216 { - color: #ffaf87; - } - .xterm-fg-217 { - color: #ffafaf; - } - .xterm-fg-218 { - color: #ffafd7; - } - .xterm-fg-219 { - color: #ffafff; - } - .xterm-fg-220 { - color: #ffd700; - } - .xterm-fg-221 { - color: #ffd75f; - } - .xterm-fg-222 { - color: #ffd787; - } - .xterm-fg-223 { - color: #ffd7af; - } - .xterm-fg-224 { - color: #ffd7d7; - } - .xterm-fg-225 { - color: #ffd7ff; - } - .xterm-fg-226 { - color: #ffff00; - } - .xterm-fg-227 { - color: #ffff5f; - } - .xterm-fg-228 { - color: #ffff87; - } - .xterm-fg-229 { - color: #ffffaf; - } - .xterm-fg-230 { - color: #ffffd7; - } - .xterm-fg-231 { - color: #ffffff; - } - .xterm-fg-232 { - color: #080808; - } - .xterm-fg-233 { - color: #121212; - } - .xterm-fg-234 { - color: #1c1c1c; - } - .xterm-fg-235 { - color: #262626; - } - .xterm-fg-236 { - color: #303030; - } - .xterm-fg-237 { - color: #3a3a3a; - } - .xterm-fg-238 { - color: #444444; - } - .xterm-fg-239 { - color: #4e4e4e; - } - .xterm-fg-240 { - color: #585858; - } - .xterm-fg-241 { - color: #626262; - } - .xterm-fg-242 { - color: #6c6c6c; - } - .xterm-fg-243 { - color: #767676; - } - .xterm-fg-244 { - color: #808080; - } - .xterm-fg-245 { - color: #8a8a8a; - } - .xterm-fg-246 { - color: #949494; - } - .xterm-fg-247 { - color: #9e9e9e; - } - .xterm-fg-248 { - color: #a8a8a8; - } - .xterm-fg-249 { - color: #b2b2b2; - } - .xterm-fg-250 { - color: #bcbcbc; - } - .xterm-fg-251 { - color: #c6c6c6; - } - .xterm-fg-252 { - color: #d0d0d0; - } - .xterm-fg-253 { - color: #dadada; - } - .xterm-fg-254 { - color: #e4e4e4; - } - .xterm-fg-255 { - color: #eeeeee; - } -} diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss new file mode 100644 index 00000000000..74dc3e321c1 --- /dev/null +++ b/app/assets/stylesheets/pages/builds.scss @@ -0,0 +1,75 @@ +.build-page { + pre.trace { + background: #111111; + color: #fff; + font-family: $monospace_font; + white-space: pre; + white-space: pre-wrap; /* css-3 */ + white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ + white-space: -pre-wrap; /* Opera 4-6 */ + white-space: -o-pre-wrap; /* Opera 7 */ + word-wrap: break-word; /* Internet Explorer 5.5+ */ + overflow: auto; + overflow-y: hidden; + font-size: 12px; + + .fa-refresh { + font-size: 24px; + margin-left: 20px; + } + } + + .autoscroll-container { + position: fixed; + bottom: 10px; + right: 20px; + z-index: 100; + } + + .scroll-controls { + position: fixed; + bottom: 10px; + left: 250px; + z-index: 100; + + a { + display: block; + margin-bottom: 5px; + } + } + + .page-sidebar-collapsed { + .scroll-controls { + left: 70px; + } + } + + .build-widget { + padding: 10px; + background: $background-color; + margin-bottom: 20px; + border-radius: 4px; + + .title { + margin-top: 0; + color: #666; + line-height: 1.5; + } + .attr-name { + color: #777; + } + } + + .alert-disabled { + background: $background-color; + + a { + color: #3084bb !important; + } + } + + .build-top-menu { + margin-top: 0; + margin-bottom: 2px; + } +} diff --git a/app/assets/stylesheets/pages/ci_projects.scss b/app/assets/stylesheets/pages/ci_projects.scss new file mode 100644 index 00000000000..8c5273abcda --- /dev/null +++ b/app/assets/stylesheets/pages/ci_projects.scss @@ -0,0 +1,59 @@ +.ci-body { + .project-title { + margin: 0; + color: #444; + font-size: 20px; + line-height: 1.5; + } + + .wide-table-holder { + margin-left: -$gl-padding; + margin-right: -$gl-padding; + } + + .builds, + .projects-table { + .light { + border-color: $border-color; + } + + th, td { + padding: 10px $gl-padding; + } + + td { + color: $gl-gray; + vertical-align: middle !important; + + a { + font-weight: normal; + text-decoration: none; + } + } + } + + .commit-info { + .attr-name { + margin-right: 5px; + } + + pre.commit-message { + background: none; + padding: 0; + margin: 0; + border: none; + margin: 20px 0; + border-radius: 0; + } + } + + .loading{ + font-size: 20px; + } + + .ci-charts { + fieldset { + margin-bottom: 16px; + } + } +} diff --git a/app/assets/stylesheets/pages/lint.scss b/app/assets/stylesheets/pages/lint.scss new file mode 100644 index 00000000000..6d2bd33b28b --- /dev/null +++ b/app/assets/stylesheets/pages/lint.scss @@ -0,0 +1,10 @@ +.ci-body { + .incorrect-syntax{ + font-size: 19px; + color: red; + } + .correct-syntax{ + font-size: 19px; + color: #47a447; + } +} diff --git a/app/assets/stylesheets/pages/runners.scss b/app/assets/stylesheets/pages/runners.scss new file mode 100644 index 00000000000..2b15ab83129 --- /dev/null +++ b/app/assets/stylesheets/pages/runners.scss @@ -0,0 +1,36 @@ +.ci-body { + .runner-state { + padding: 6px 12px; + margin-right: 10px; + color: #FFF; + + &.runner-state-shared { + background: #32b186; + } + &.runner-state-specific { + background: #3498db; + } + } + + .runner-status-online { + color: green; + } + + .runner-status-offline { + color: gray; + } + + .runner-status-paused { + color: red; + } + + .runner { + .btn { + padding: 1px 6px; + } + + h4 { + font-weight: normal; + } + } +} diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss new file mode 100644 index 00000000000..a7d3b2197f1 --- /dev/null +++ b/app/assets/stylesheets/pages/status.scss @@ -0,0 +1,37 @@ +.ci-status { + padding: 2px 7px; + margin-right: 5px; + border: 1px solid #EEE; + white-space: nowrap; + @include border-radius(4px); + + &:hover { + text-decoration: none; + } + + &.ci-failed { + color: $gl-danger; + border-color: $gl-danger; + } + + &.ci-success { + color: $gl-success; + border-color: $gl-success; + } + + &.ci-info { + color: $gl-info; + border-color: $gl-info; + } + + &.ci-disabled { + color: $gl-gray; + border-color: $gl-gray; + } + + &.ci-pending, + &.ci-running { + color: $gl-warning; + border-color: $gl-warning; + } +} diff --git a/app/assets/stylesheets/pages/xterm.scss b/app/assets/stylesheets/pages/xterm.scss new file mode 100644 index 00000000000..9a50096c0d0 --- /dev/null +++ b/app/assets/stylesheets/pages/xterm.scss @@ -0,0 +1,906 @@ +.build-page { + // color codes are based on http://en.wikipedia.org/wiki/File:Xterm_256color_chart.svg + // see also: https://gist.github.com/jasonm23/2868981 + + $black: #000000; + $red: #cd0000; + $green: #00cd00; + $yellow: #cdcd00; + $blue: #0000ee; // according to wikipedia, this is the xterm standard + //$blue: #1e90ff; // this is used by all the terminals I tried (when configured with the xterm color profile) + $magenta: #cd00cd; + $cyan: #00cdcd; + $white: #e5e5e5; + $l-black: #7f7f7f; + $l-red: #ff0000; + $l-green: #00ff00; + $l-yellow: #ffff00; + $l-blue: #5c5cff; + $l-magenta: #ff00ff; + $l-cyan: #00ffff; + $l-white: #ffffff; + + .term-bold { + font-weight: bold; + } + .term-italic { + font-style: italic; + } + .term-conceal { + visibility: hidden; + } + .term-underline { + text-decoration: underline; + } + .term-cross { + text-decoration: line-through; + } + + .term-fg-black { + color: $black; + } + .term-fg-red { + color: $red; + } + .term-fg-green { + color: $green; + } + .term-fg-yellow { + color: $yellow; + } + .term-fg-blue { + color: $blue; + } + .term-fg-magenta { + color: $magenta; + } + .term-fg-cyan { + color: $cyan; + } + .term-fg-white { + color: $white; + } + .term-fg-l-black { + color: $l-black; + } + .term-fg-l-red { + color: $l-red; + } + .term-fg-l-green { + color: $l-green; + } + .term-fg-l-yellow { + color: $l-yellow; + } + .term-fg-l-blue { + color: $l-blue; + } + .term-fg-l-magenta { + color: $l-magenta; + } + .term-fg-l-cyan { + color: $l-cyan; + } + .term-fg-l-white { + color: $l-white; + } + + .term-bg-black { + background-color: $black; + } + .term-bg-red { + background-color: $red; + } + .term-bg-green { + background-color: $green; + } + .term-bg-yellow { + background-color: $yellow; + } + .term-bg-blue { + background-color: $blue; + } + .term-bg-magenta { + background-color: $magenta; + } + .term-bg-cyan { + background-color: $cyan; + } + .term-bg-white { + background-color: $white; + } + .term-bg-l-black { + background-color: $l-black; + } + .term-bg-l-red { + background-color: $l-red; + } + .term-bg-l-green { + background-color: $l-green; + } + .term-bg-l-yellow { + background-color: $l-yellow; + } + .term-bg-l-blue { + background-color: $l-blue; + } + .term-bg-l-magenta { + background-color: $l-magenta; + } + .term-bg-l-cyan { + background-color: $l-cyan; + } + .term-bg-l-white { + background-color: $l-white; + } + + + .xterm-fg-0 { + color: #000000; + } + .xterm-fg-1 { + color: #800000; + } + .xterm-fg-2 { + color: #008000; + } + .xterm-fg-3 { + color: #808000; + } + .xterm-fg-4 { + color: #000080; + } + .xterm-fg-5 { + color: #800080; + } + .xterm-fg-6 { + color: #008080; + } + .xterm-fg-7 { + color: #c0c0c0; + } + .xterm-fg-8 { + color: #808080; + } + .xterm-fg-9 { + color: #ff0000; + } + .xterm-fg-10 { + color: #00ff00; + } + .xterm-fg-11 { + color: #ffff00; + } + .xterm-fg-12 { + color: #0000ff; + } + .xterm-fg-13 { + color: #ff00ff; + } + .xterm-fg-14 { + color: #00ffff; + } + .xterm-fg-15 { + color: #ffffff; + } + .xterm-fg-16 { + color: #000000; + } + .xterm-fg-17 { + color: #00005f; + } + .xterm-fg-18 { + color: #000087; + } + .xterm-fg-19 { + color: #0000af; + } + .xterm-fg-20 { + color: #0000d7; + } + .xterm-fg-21 { + color: #0000ff; + } + .xterm-fg-22 { + color: #005f00; + } + .xterm-fg-23 { + color: #005f5f; + } + .xterm-fg-24 { + color: #005f87; + } + .xterm-fg-25 { + color: #005faf; + } + .xterm-fg-26 { + color: #005fd7; + } + .xterm-fg-27 { + color: #005fff; + } + .xterm-fg-28 { + color: #008700; + } + .xterm-fg-29 { + color: #00875f; + } + .xterm-fg-30 { + color: #008787; + } + .xterm-fg-31 { + color: #0087af; + } + .xterm-fg-32 { + color: #0087d7; + } + .xterm-fg-33 { + color: #0087ff; + } + .xterm-fg-34 { + color: #00af00; + } + .xterm-fg-35 { + color: #00af5f; + } + .xterm-fg-36 { + color: #00af87; + } + .xterm-fg-37 { + color: #00afaf; + } + .xterm-fg-38 { + color: #00afd7; + } + .xterm-fg-39 { + color: #00afff; + } + .xterm-fg-40 { + color: #00d700; + } + .xterm-fg-41 { + color: #00d75f; + } + .xterm-fg-42 { + color: #00d787; + } + .xterm-fg-43 { + color: #00d7af; + } + .xterm-fg-44 { + color: #00d7d7; + } + .xterm-fg-45 { + color: #00d7ff; + } + .xterm-fg-46 { + color: #00ff00; + } + .xterm-fg-47 { + color: #00ff5f; + } + .xterm-fg-48 { + color: #00ff87; + } + .xterm-fg-49 { + color: #00ffaf; + } + .xterm-fg-50 { + color: #00ffd7; + } + .xterm-fg-51 { + color: #00ffff; + } + .xterm-fg-52 { + color: #5f0000; + } + .xterm-fg-53 { + color: #5f005f; + } + .xterm-fg-54 { + color: #5f0087; + } + .xterm-fg-55 { + color: #5f00af; + } + .xterm-fg-56 { + color: #5f00d7; + } + .xterm-fg-57 { + color: #5f00ff; + } + .xterm-fg-58 { + color: #5f5f00; + } + .xterm-fg-59 { + color: #5f5f5f; + } + .xterm-fg-60 { + color: #5f5f87; + } + .xterm-fg-61 { + color: #5f5faf; + } + .xterm-fg-62 { + color: #5f5fd7; + } + .xterm-fg-63 { + color: #5f5fff; + } + .xterm-fg-64 { + color: #5f8700; + } + .xterm-fg-65 { + color: #5f875f; + } + .xterm-fg-66 { + color: #5f8787; + } + .xterm-fg-67 { + color: #5f87af; + } + .xterm-fg-68 { + color: #5f87d7; + } + .xterm-fg-69 { + color: #5f87ff; + } + .xterm-fg-70 { + color: #5faf00; + } + .xterm-fg-71 { + color: #5faf5f; + } + .xterm-fg-72 { + color: #5faf87; + } + .xterm-fg-73 { + color: #5fafaf; + } + .xterm-fg-74 { + color: #5fafd7; + } + .xterm-fg-75 { + color: #5fafff; + } + .xterm-fg-76 { + color: #5fd700; + } + .xterm-fg-77 { + color: #5fd75f; + } + .xterm-fg-78 { + color: #5fd787; + } + .xterm-fg-79 { + color: #5fd7af; + } + .xterm-fg-80 { + color: #5fd7d7; + } + .xterm-fg-81 { + color: #5fd7ff; + } + .xterm-fg-82 { + color: #5fff00; + } + .xterm-fg-83 { + color: #5fff5f; + } + .xterm-fg-84 { + color: #5fff87; + } + .xterm-fg-85 { + color: #5fffaf; + } + .xterm-fg-86 { + color: #5fffd7; + } + .xterm-fg-87 { + color: #5fffff; + } + .xterm-fg-88 { + color: #870000; + } + .xterm-fg-89 { + color: #87005f; + } + .xterm-fg-90 { + color: #870087; + } + .xterm-fg-91 { + color: #8700af; + } + .xterm-fg-92 { + color: #8700d7; + } + .xterm-fg-93 { + color: #8700ff; + } + .xterm-fg-94 { + color: #875f00; + } + .xterm-fg-95 { + color: #875f5f; + } + .xterm-fg-96 { + color: #875f87; + } + .xterm-fg-97 { + color: #875faf; + } + .xterm-fg-98 { + color: #875fd7; + } + .xterm-fg-99 { + color: #875fff; + } + .xterm-fg-100 { + color: #878700; + } + .xterm-fg-101 { + color: #87875f; + } + .xterm-fg-102 { + color: #878787; + } + .xterm-fg-103 { + color: #8787af; + } + .xterm-fg-104 { + color: #8787d7; + } + .xterm-fg-105 { + color: #8787ff; + } + .xterm-fg-106 { + color: #87af00; + } + .xterm-fg-107 { + color: #87af5f; + } + .xterm-fg-108 { + color: #87af87; + } + .xterm-fg-109 { + color: #87afaf; + } + .xterm-fg-110 { + color: #87afd7; + } + .xterm-fg-111 { + color: #87afff; + } + .xterm-fg-112 { + color: #87d700; + } + .xterm-fg-113 { + color: #87d75f; + } + .xterm-fg-114 { + color: #87d787; + } + .xterm-fg-115 { + color: #87d7af; + } + .xterm-fg-116 { + color: #87d7d7; + } + .xterm-fg-117 { + color: #87d7ff; + } + .xterm-fg-118 { + color: #87ff00; + } + .xterm-fg-119 { + color: #87ff5f; + } + .xterm-fg-120 { + color: #87ff87; + } + .xterm-fg-121 { + color: #87ffaf; + } + .xterm-fg-122 { + color: #87ffd7; + } + .xterm-fg-123 { + color: #87ffff; + } + .xterm-fg-124 { + color: #af0000; + } + .xterm-fg-125 { + color: #af005f; + } + .xterm-fg-126 { + color: #af0087; + } + .xterm-fg-127 { + color: #af00af; + } + .xterm-fg-128 { + color: #af00d7; + } + .xterm-fg-129 { + color: #af00ff; + } + .xterm-fg-130 { + color: #af5f00; + } + .xterm-fg-131 { + color: #af5f5f; + } + .xterm-fg-132 { + color: #af5f87; + } + .xterm-fg-133 { + color: #af5faf; + } + .xterm-fg-134 { + color: #af5fd7; + } + .xterm-fg-135 { + color: #af5fff; + } + .xterm-fg-136 { + color: #af8700; + } + .xterm-fg-137 { + color: #af875f; + } + .xterm-fg-138 { + color: #af8787; + } + .xterm-fg-139 { + color: #af87af; + } + .xterm-fg-140 { + color: #af87d7; + } + .xterm-fg-141 { + color: #af87ff; + } + .xterm-fg-142 { + color: #afaf00; + } + .xterm-fg-143 { + color: #afaf5f; + } + .xterm-fg-144 { + color: #afaf87; + } + .xterm-fg-145 { + color: #afafaf; + } + .xterm-fg-146 { + color: #afafd7; + } + .xterm-fg-147 { + color: #afafff; + } + .xterm-fg-148 { + color: #afd700; + } + .xterm-fg-149 { + color: #afd75f; + } + .xterm-fg-150 { + color: #afd787; + } + .xterm-fg-151 { + color: #afd7af; + } + .xterm-fg-152 { + color: #afd7d7; + } + .xterm-fg-153 { + color: #afd7ff; + } + .xterm-fg-154 { + color: #afff00; + } + .xterm-fg-155 { + color: #afff5f; + } + .xterm-fg-156 { + color: #afff87; + } + .xterm-fg-157 { + color: #afffaf; + } + .xterm-fg-158 { + color: #afffd7; + } + .xterm-fg-159 { + color: #afffff; + } + .xterm-fg-160 { + color: #d70000; + } + .xterm-fg-161 { + color: #d7005f; + } + .xterm-fg-162 { + color: #d70087; + } + .xterm-fg-163 { + color: #d700af; + } + .xterm-fg-164 { + color: #d700d7; + } + .xterm-fg-165 { + color: #d700ff; + } + .xterm-fg-166 { + color: #d75f00; + } + .xterm-fg-167 { + color: #d75f5f; + } + .xterm-fg-168 { + color: #d75f87; + } + .xterm-fg-169 { + color: #d75faf; + } + .xterm-fg-170 { + color: #d75fd7; + } + .xterm-fg-171 { + color: #d75fff; + } + .xterm-fg-172 { + color: #d78700; + } + .xterm-fg-173 { + color: #d7875f; + } + .xterm-fg-174 { + color: #d78787; + } + .xterm-fg-175 { + color: #d787af; + } + .xterm-fg-176 { + color: #d787d7; + } + .xterm-fg-177 { + color: #d787ff; + } + .xterm-fg-178 { + color: #d7af00; + } + .xterm-fg-179 { + color: #d7af5f; + } + .xterm-fg-180 { + color: #d7af87; + } + .xterm-fg-181 { + color: #d7afaf; + } + .xterm-fg-182 { + color: #d7afd7; + } + .xterm-fg-183 { + color: #d7afff; + } + .xterm-fg-184 { + color: #d7d700; + } + .xterm-fg-185 { + color: #d7d75f; + } + .xterm-fg-186 { + color: #d7d787; + } + .xterm-fg-187 { + color: #d7d7af; + } + .xterm-fg-188 { + color: #d7d7d7; + } + .xterm-fg-189 { + color: #d7d7ff; + } + .xterm-fg-190 { + color: #d7ff00; + } + .xterm-fg-191 { + color: #d7ff5f; + } + .xterm-fg-192 { + color: #d7ff87; + } + .xterm-fg-193 { + color: #d7ffaf; + } + .xterm-fg-194 { + color: #d7ffd7; + } + .xterm-fg-195 { + color: #d7ffff; + } + .xterm-fg-196 { + color: #ff0000; + } + .xterm-fg-197 { + color: #ff005f; + } + .xterm-fg-198 { + color: #ff0087; + } + .xterm-fg-199 { + color: #ff00af; + } + .xterm-fg-200 { + color: #ff00d7; + } + .xterm-fg-201 { + color: #ff00ff; + } + .xterm-fg-202 { + color: #ff5f00; + } + .xterm-fg-203 { + color: #ff5f5f; + } + .xterm-fg-204 { + color: #ff5f87; + } + .xterm-fg-205 { + color: #ff5faf; + } + .xterm-fg-206 { + color: #ff5fd7; + } + .xterm-fg-207 { + color: #ff5fff; + } + .xterm-fg-208 { + color: #ff8700; + } + .xterm-fg-209 { + color: #ff875f; + } + .xterm-fg-210 { + color: #ff8787; + } + .xterm-fg-211 { + color: #ff87af; + } + .xterm-fg-212 { + color: #ff87d7; + } + .xterm-fg-213 { + color: #ff87ff; + } + .xterm-fg-214 { + color: #ffaf00; + } + .xterm-fg-215 { + color: #ffaf5f; + } + .xterm-fg-216 { + color: #ffaf87; + } + .xterm-fg-217 { + color: #ffafaf; + } + .xterm-fg-218 { + color: #ffafd7; + } + .xterm-fg-219 { + color: #ffafff; + } + .xterm-fg-220 { + color: #ffd700; + } + .xterm-fg-221 { + color: #ffd75f; + } + .xterm-fg-222 { + color: #ffd787; + } + .xterm-fg-223 { + color: #ffd7af; + } + .xterm-fg-224 { + color: #ffd7d7; + } + .xterm-fg-225 { + color: #ffd7ff; + } + .xterm-fg-226 { + color: #ffff00; + } + .xterm-fg-227 { + color: #ffff5f; + } + .xterm-fg-228 { + color: #ffff87; + } + .xterm-fg-229 { + color: #ffffaf; + } + .xterm-fg-230 { + color: #ffffd7; + } + .xterm-fg-231 { + color: #ffffff; + } + .xterm-fg-232 { + color: #080808; + } + .xterm-fg-233 { + color: #121212; + } + .xterm-fg-234 { + color: #1c1c1c; + } + .xterm-fg-235 { + color: #262626; + } + .xterm-fg-236 { + color: #303030; + } + .xterm-fg-237 { + color: #3a3a3a; + } + .xterm-fg-238 { + color: #444444; + } + .xterm-fg-239 { + color: #4e4e4e; + } + .xterm-fg-240 { + color: #585858; + } + .xterm-fg-241 { + color: #626262; + } + .xterm-fg-242 { + color: #6c6c6c; + } + .xterm-fg-243 { + color: #767676; + } + .xterm-fg-244 { + color: #808080; + } + .xterm-fg-245 { + color: #8a8a8a; + } + .xterm-fg-246 { + color: #949494; + } + .xterm-fg-247 { + color: #9e9e9e; + } + .xterm-fg-248 { + color: #a8a8a8; + } + .xterm-fg-249 { + color: #b2b2b2; + } + .xterm-fg-250 { + color: #bcbcbc; + } + .xterm-fg-251 { + color: #c6c6c6; + } + .xterm-fg-252 { + color: #d0d0d0; + } + .xterm-fg-253 { + color: #dadada; + } + .xterm-fg-254 { + color: #e4e4e4; + } + .xterm-fg-255 { + color: #eeeeee; + } +} -- cgit v1.2.1 From bdd477a0f800328a527f2fad92d1303441689341 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Mon, 12 Oct 2015 15:00:04 +0200 Subject: Re-organize GitLab css into 2 directories: framework and page specific css Signed-off-by: Dmitriy Zaporozhets --- app/assets/stylesheets/application.scss | 30 +- app/assets/stylesheets/base/fonts.scss | 25 -- app/assets/stylesheets/base/gl_bootstrap.scss | 273 -------------- app/assets/stylesheets/base/gl_variables.scss | 158 -------- app/assets/stylesheets/base/layout.scss | 27 -- app/assets/stylesheets/base/mixins.scss | 301 --------------- app/assets/stylesheets/base/variables.scss | 98 ----- app/assets/stylesheets/framework.scss | 32 ++ app/assets/stylesheets/framework/avatar.scss | 49 +++ app/assets/stylesheets/framework/blocks.scss | 62 ++++ app/assets/stylesheets/framework/buttons.scss | 163 +++++++++ app/assets/stylesheets/framework/calendar.scss | 90 +++++ app/assets/stylesheets/framework/callout.scss | 45 +++ app/assets/stylesheets/framework/common.scss | 404 +++++++++++++++++++++ app/assets/stylesheets/framework/files.scss | 171 +++++++++ app/assets/stylesheets/framework/filters.scss | 30 ++ app/assets/stylesheets/framework/flash.scss | 17 + app/assets/stylesheets/framework/fonts.scss | 25 ++ app/assets/stylesheets/framework/forms.scss | 94 +++++ app/assets/stylesheets/framework/gfm.scss | 25 ++ app/assets/stylesheets/framework/gitlab-theme.scss | 120 ++++++ app/assets/stylesheets/framework/gl_bootstrap.scss | 273 ++++++++++++++ app/assets/stylesheets/framework/gl_variables.scss | 158 ++++++++ app/assets/stylesheets/framework/header.scss | 169 +++++++++ app/assets/stylesheets/framework/highlight.scss | 70 ++++ app/assets/stylesheets/framework/issue_box.scss | 35 ++ app/assets/stylesheets/framework/jquery.scss | 55 +++ app/assets/stylesheets/framework/layout.scss | 27 ++ app/assets/stylesheets/framework/lists.scss | 125 +++++++ .../stylesheets/framework/markdown_area.scss | 115 ++++++ app/assets/stylesheets/framework/mixins.scss | 301 +++++++++++++++ app/assets/stylesheets/framework/mobile.scss | 139 +++++++ app/assets/stylesheets/framework/pagination.scss | 34 ++ app/assets/stylesheets/framework/selects.scss | 146 ++++++++ app/assets/stylesheets/framework/sidebar.scss | 267 ++++++++++++++ app/assets/stylesheets/framework/tables.scss | 20 + app/assets/stylesheets/framework/timeline.scss | 70 ++++ app/assets/stylesheets/framework/typography.scss | 130 +++++++ app/assets/stylesheets/framework/variables.scss | 98 +++++ app/assets/stylesheets/framework/zen.scss | 86 +++++ app/assets/stylesheets/generic/avatar.scss | 49 --- app/assets/stylesheets/generic/blocks.scss | 62 ---- app/assets/stylesheets/generic/buttons.scss | 163 --------- app/assets/stylesheets/generic/calendar.scss | 90 ----- app/assets/stylesheets/generic/callout.scss | 45 --- app/assets/stylesheets/generic/common.scss | 404 --------------------- app/assets/stylesheets/generic/files.scss | 171 --------- app/assets/stylesheets/generic/filters.scss | 30 -- app/assets/stylesheets/generic/flash.scss | 17 - app/assets/stylesheets/generic/forms.scss | 94 ----- app/assets/stylesheets/generic/gfm.scss | 25 -- app/assets/stylesheets/generic/header.scss | 169 --------- app/assets/stylesheets/generic/highlight.scss | 70 ---- app/assets/stylesheets/generic/issue_box.scss | 35 -- app/assets/stylesheets/generic/jquery.scss | 55 --- app/assets/stylesheets/generic/lists.scss | 125 ------- app/assets/stylesheets/generic/markdown_area.scss | 115 ------ app/assets/stylesheets/generic/mobile.scss | 139 ------- app/assets/stylesheets/generic/pagination.scss | 34 -- app/assets/stylesheets/generic/selects.scss | 146 -------- app/assets/stylesheets/generic/sidebar.scss | 267 -------------- app/assets/stylesheets/generic/tables.scss | 20 - app/assets/stylesheets/generic/timeline.scss | 70 ---- app/assets/stylesheets/generic/typography.scss | 130 ------- app/assets/stylesheets/generic/zen.scss | 86 ----- app/assets/stylesheets/themes/gitlab-theme.scss | 120 ------ 66 files changed, 3647 insertions(+), 3641 deletions(-) delete mode 100644 app/assets/stylesheets/base/fonts.scss delete mode 100644 app/assets/stylesheets/base/gl_bootstrap.scss delete mode 100644 app/assets/stylesheets/base/gl_variables.scss delete mode 100644 app/assets/stylesheets/base/layout.scss delete mode 100644 app/assets/stylesheets/base/mixins.scss delete mode 100644 app/assets/stylesheets/base/variables.scss create mode 100644 app/assets/stylesheets/framework.scss create mode 100644 app/assets/stylesheets/framework/avatar.scss create mode 100644 app/assets/stylesheets/framework/blocks.scss create mode 100644 app/assets/stylesheets/framework/buttons.scss create mode 100644 app/assets/stylesheets/framework/calendar.scss create mode 100644 app/assets/stylesheets/framework/callout.scss create mode 100644 app/assets/stylesheets/framework/common.scss create mode 100644 app/assets/stylesheets/framework/files.scss create mode 100644 app/assets/stylesheets/framework/filters.scss create mode 100644 app/assets/stylesheets/framework/flash.scss create mode 100644 app/assets/stylesheets/framework/fonts.scss create mode 100644 app/assets/stylesheets/framework/forms.scss create mode 100644 app/assets/stylesheets/framework/gfm.scss create mode 100644 app/assets/stylesheets/framework/gitlab-theme.scss create mode 100644 app/assets/stylesheets/framework/gl_bootstrap.scss create mode 100644 app/assets/stylesheets/framework/gl_variables.scss create mode 100644 app/assets/stylesheets/framework/header.scss create mode 100644 app/assets/stylesheets/framework/highlight.scss create mode 100644 app/assets/stylesheets/framework/issue_box.scss create mode 100644 app/assets/stylesheets/framework/jquery.scss create mode 100644 app/assets/stylesheets/framework/layout.scss create mode 100644 app/assets/stylesheets/framework/lists.scss create mode 100644 app/assets/stylesheets/framework/markdown_area.scss create mode 100644 app/assets/stylesheets/framework/mixins.scss create mode 100644 app/assets/stylesheets/framework/mobile.scss create mode 100644 app/assets/stylesheets/framework/pagination.scss create mode 100644 app/assets/stylesheets/framework/selects.scss create mode 100644 app/assets/stylesheets/framework/sidebar.scss create mode 100644 app/assets/stylesheets/framework/tables.scss create mode 100644 app/assets/stylesheets/framework/timeline.scss create mode 100644 app/assets/stylesheets/framework/typography.scss create mode 100644 app/assets/stylesheets/framework/variables.scss create mode 100644 app/assets/stylesheets/framework/zen.scss delete mode 100644 app/assets/stylesheets/generic/avatar.scss delete mode 100644 app/assets/stylesheets/generic/blocks.scss delete mode 100644 app/assets/stylesheets/generic/buttons.scss delete mode 100644 app/assets/stylesheets/generic/calendar.scss delete mode 100644 app/assets/stylesheets/generic/callout.scss delete mode 100644 app/assets/stylesheets/generic/common.scss delete mode 100644 app/assets/stylesheets/generic/files.scss delete mode 100644 app/assets/stylesheets/generic/filters.scss delete mode 100644 app/assets/stylesheets/generic/flash.scss delete mode 100644 app/assets/stylesheets/generic/forms.scss delete mode 100644 app/assets/stylesheets/generic/gfm.scss delete mode 100644 app/assets/stylesheets/generic/header.scss delete mode 100644 app/assets/stylesheets/generic/highlight.scss delete mode 100644 app/assets/stylesheets/generic/issue_box.scss delete mode 100644 app/assets/stylesheets/generic/jquery.scss delete mode 100644 app/assets/stylesheets/generic/lists.scss delete mode 100644 app/assets/stylesheets/generic/markdown_area.scss delete mode 100644 app/assets/stylesheets/generic/mobile.scss delete mode 100644 app/assets/stylesheets/generic/pagination.scss delete mode 100644 app/assets/stylesheets/generic/selects.scss delete mode 100644 app/assets/stylesheets/generic/sidebar.scss delete mode 100644 app/assets/stylesheets/generic/tables.scss delete mode 100644 app/assets/stylesheets/generic/timeline.scss delete mode 100644 app/assets/stylesheets/generic/typography.scss delete mode 100644 app/assets/stylesheets/generic/zen.scss delete mode 100644 app/assets/stylesheets/themes/gitlab-theme.scss diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index d9ede637944..233e01cc06b 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -11,18 +11,10 @@ *= require cal-heatmap */ - -@import "base/fonts"; -@import "base/variables"; -@import "base/mixins"; -@import "base/layout"; - - /** - * Customized Twitter bootstrap + * GitLab UI framework */ -@import 'base/gl_variables'; -@import 'base/gl_bootstrap'; +@import "framework"; /** * NProgress load bar css @@ -32,24 +24,12 @@ /** * Font icons - * */ @import "font-awesome"; -/** - * UI themes: - */ -@import "themes/**/*"; - -/** - * Generic css (forms, nav etc): - */ -@import "generic/**/*"; - /** * Page specific styles (issues, projects etc): */ - @import "pages/**/*"; /** @@ -61,9 +41,3 @@ * Styles for JS behaviors. */ @import "behaviors.scss"; - -/** - * CI specific styles: - */ -@import "ci/**/*"; - diff --git a/app/assets/stylesheets/base/fonts.scss b/app/assets/stylesheets/base/fonts.scss deleted file mode 100644 index e214567eca1..00000000000 --- a/app/assets/stylesheets/base/fonts.scss +++ /dev/null @@ -1,25 +0,0 @@ -/* latin-ext */ -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 300; - src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), font-url('SourceSansPro-Light.ttf'); -} -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 400; - src: local('Source Sans Pro'), local('SourceSansPro-Regular'), font-url('SourceSansPro-Regular.ttf'); -} -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 600; - src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), font-url('SourceSansPro-Semibold.ttf'); -} -@font-face { - font-family: 'Source Sans Pro'; - font-style: normal; - font-weight: 700; - src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), font-url('SourceSansPro-Bold.ttf'); -} diff --git a/app/assets/stylesheets/base/gl_bootstrap.scss b/app/assets/stylesheets/base/gl_bootstrap.scss deleted file mode 100644 index eb8d23d6453..00000000000 --- a/app/assets/stylesheets/base/gl_bootstrap.scss +++ /dev/null @@ -1,273 +0,0 @@ -/* - * Twitter bootstrap with GitLab customizations/additions - * - */ - -// Core variables and mixins -@import "bootstrap/variables"; -@import "bootstrap/mixins"; - -// Reset -@import "bootstrap/normalize"; -@import "bootstrap/print"; - -// Core CSS -@import "bootstrap/scaffolding"; -@import "bootstrap/type"; -@import "bootstrap/code"; -@import "bootstrap/grid"; -@import "bootstrap/tables"; -@import "bootstrap/forms"; -@import "bootstrap/buttons"; - -// Components -@import "bootstrap/component-animations"; -@import "bootstrap/dropdowns"; -@import "bootstrap/button-groups"; -@import "bootstrap/input-groups"; -@import "bootstrap/navs"; -@import "bootstrap/navbar"; -@import "bootstrap/breadcrumbs"; -@import "bootstrap/pagination"; -@import "bootstrap/pager"; -@import "bootstrap/labels"; -@import "bootstrap/badges"; -@import "bootstrap/jumbotron"; -@import "bootstrap/thumbnails"; -@import "bootstrap/alerts"; -@import "bootstrap/progress-bars"; -@import "bootstrap/list-group"; -@import "bootstrap/wells"; -@import "bootstrap/close"; -@import "bootstrap/panels"; - -// Components w/ JavaScript -@import "bootstrap/modals"; -@import "bootstrap/tooltip"; -@import "bootstrap/popovers"; -@import "bootstrap/carousel"; - -// Utility classes -.clearfix { - @include clearfix(); -} -.center-block { - @include center-block(); -} -.pull-right { - float: right !important; -} -.pull-left { - float: left !important; -} -.hide { - display: none; -} -.show { - display: block !important; -} -.invisible { - visibility: hidden; -} -.text-hide { - @include text-hide(); -} -.hidden { - display: none !important; - visibility: hidden !important; -} -.affix { - position: fixed; -} - -@import "bootstrap/responsive-utilities"; - -// Labels -.label { - padding: 2px 4px; - font-size: 13px; - font-style: normal; - font-weight: normal; - display: inline-block; - - &.label-gray { - background-color: #f8fafc; - color: $gl-gray; - text-shadow: none; - } - - &.label-inverse { - background-color: #333333; - } -} - -// Nav tabs -.nav.nav-tabs { - margin-bottom: 15px; - - li { - > a { - margin-right: 5px; - line-height: 20px; - border-color: #EEE; - color: #888; - border-bottom: 1px solid #ddd; - .badge { - background-color: #eee; - color: #888; - text-shadow: 0 1px 1px #fff; - } - i.fa { - line-height: 14px; - } - } - &.active { - > a { - border-color: #CCC; - border-bottom: 1px solid #fff; - color: #333; - font-weight: bold; - } - } - } -} - -.nav-tabs > li > a, -.nav-pills > li > a { - color: #666; -} - -.nav-pills > .active > a > span > .badge { - background-color: #fff; - color: $gl-primary; -} - - -/** - * fix to keep tooltips position in top navigation bar - * - */ -.navbar .nav > li { - position: relative; - white-space: nowrap; -} - -/** - * Add some extra stuff to panels - * - */ - -.container-blank .panel .panel-heading { - font-size: 17px; - line-height: 38px; -} - -.panel { - box-shadow: none; - - .panel-heading { - .panel-head-actions { - position: relative; - top: -5px; - float: right; - } - } - - .panel-body { - form { - margin: 0; - } - - .form-actions { - margin: -15px; - margin-top: 18px; - } - } - - .panel-footer { - .pagination { - margin: 0; - } - - .btn { - min-width: 124px; - } - } - - &.panel-small { - .panel-heading { - padding: 6px 15px; - font-size: 13px; - font-weight: normal; - a { - color: #777; - } - } - } -} - -.panel-succes .panel-heading, -.panel-info .panel-heading, -.panel-danger .panel-heading, -.panel-warning .panel-heading, -.panel-primary .panel-heading, -.alert { - a:not(.btn) { - @extend .alert-link; - color: #fff; - text-decoration: underline; - } -} - -.alert-help { - background-color: $background-color; - border: 1px solid $border-color; - color: $gl-gray; -} - -// Typography ================================================================= - -.text-primary, -.text-primary:hover { - color: $brand-primary; -} - -.text-success, -.text-success:hover { - color: $brand-success; -} - -.text-danger, -.text-danger:hover { - color: $brand-danger; -} - -.text-warning, -.text-warning:hover { - color: $brand-warning; -} - -.text-info, -.text-info:hover { - color: $brand-info; -} - -// Tables ===================================================================== - -table.table { - .dropdown-menu a { - text-decoration: none; - } - - .success, - .warning, - .danger, - .info { - color: #fff; - - a:not(.btn) { - text-decoration: underline; - color: #fff; - } - } -} diff --git a/app/assets/stylesheets/base/gl_variables.scss b/app/assets/stylesheets/base/gl_variables.scss deleted file mode 100644 index 18632da4f2a..00000000000 --- a/app/assets/stylesheets/base/gl_variables.scss +++ /dev/null @@ -1,158 +0,0 @@ -// Override Bootstrap variables here (defaults from bootstrap-sass v3.3.3): -// For all variables see https://github.com/twbs/bootstrap-sass/blob/master/templates/project/_bootstrap-variables.sass -// -// Variables -// -------------------------------------------------- - - -//== Colors -// -//## Gray and brand colors for use across Bootstrap. - -// $gray-base: #000 -// $gray-darker: lighten($gray-base, 13.5%) // #222 -// $gray-dark: lighten($gray-base, 20%) // #333 -// $gray: lighten($gray-base, 33.5%) // #555 -// $gray-light: lighten($gray-base, 46.7%) // #777 -// $gray-lighter: lighten($gray-base, 93.5%) // #eee - -$brand-primary: $gl-primary; -$brand-success: $gl-success; -$brand-info: $gl-info; -$brand-warning: $gl-warning; -$brand-danger: $gl-danger; - -$border-radius-base: 2px !default; -$border-radius-large: 2px !default; -$border-radius-small: 2px !default; - - -//== Scaffolding -// -$text-color: $gl-text-color; -$link-color: $gl-link-color; - - -//== Typography -// -//## Font, line-height, and color for body text, headings, and more. - -$font-family-sans-serif: $regular_font; -$font-family-monospace: $monospace_font; -$font-size-base: $gl-font-size; - - -//== Components -// -//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). - -$padding-base-vertical: 9px; -$padding-base-horizontal: $gl-padding; -$component-active-color: #fff; -$component-active-bg: $brand-info; - -//== Forms -// -//## - -$input-color: $text-color; -$input-border: #e7e9ed; -$input-border-focus: #7F8FA4; -$legend-color: $text-color; - - -//== Pagination -// -//## - -$pagination-color: $gl-gray; -$pagination-bg: $background-color; -$pagination-border: transparent; - -$pagination-hover-color: #fff; -$pagination-hover-bg: $brand-info; -$pagination-hover-border: transparent; - -$pagination-active-color: #fff; -$pagination-active-bg: $brand-info; -$pagination-active-border: transparent; - -$pagination-disabled-color: #fff; -$pagination-disabled-bg: lighten($brand-info, 15%); -$pagination-disabled-border: transparent; - - -//== Form states and alerts -// -//## Define colors for form feedback states and, by default, alerts. - -$state-success-text: #fff; -$state-success-bg: $brand-success; -$state-success-border: $brand-success; - -$state-info-text: #fff; -$state-info-bg: $brand-info; -$state-info-border: $brand-info; - -$state-warning-text: #fff; -$state-warning-bg: $brand-warning; -$state-warning-border: $brand-warning; - -$state-danger-text: #fff; -$state-danger-bg: $brand-danger; -$state-danger-border: $brand-danger; - - -//== Alerts -// -//## Define alert colors, border radius, and padding. - -$alert-border-radius: 0; - - -//== Panels -// -//## - -$panel-border-radius: 2px; -$panel-default-text: $text-color; -$panel-default-border: $border-color; -$panel-default-heading-bg: $background-color; -$panel-footer-bg: $background-color; -$panel-inner-border: $border-color; - -//== Wells -// -//## - -$well-bg: #F9F9F9; -$well-border: #EEE; - -//== Code -// -//## - -$code-color: #c7254e; -$code-bg: #f9f2f4; - -$kbd-color: #fff; -$kbd-bg: #333; - -//== Buttons -// -//## -$btn-default-color: $gl-text-color; -$btn-default-bg: #fff; -$btn-default-border: #e7e9ed; - -//== Nav -// -//## -$nav-link-padding: 13px $gl-padding; - -//== Code -// -//## -$pre-bg: #f8fafc !default; -$pre-color: $gl-gray !default; -$pre-border-color: #e7e9ed; diff --git a/app/assets/stylesheets/base/layout.scss b/app/assets/stylesheets/base/layout.scss deleted file mode 100644 index c7b3b60e769..00000000000 --- a/app/assets/stylesheets/base/layout.scss +++ /dev/null @@ -1,27 +0,0 @@ -html { - overflow-y: scroll; - - &.touch .tooltip { display: none !important; } - - body { - padding-top: $header-height; - text-rendering: geometricPrecision; - } -} - -.container { - padding-top: 0; - z-index: 5; -} - -.container .content { - margin: 0 0; -} - -.navless-container { - margin-top: 30px; -} - -.container-limited { - max-width: $fixed-layout-width; -} diff --git a/app/assets/stylesheets/base/mixins.scss b/app/assets/stylesheets/base/mixins.scss deleted file mode 100644 index c74a6d39824..00000000000 --- a/app/assets/stylesheets/base/mixins.scss +++ /dev/null @@ -1,301 +0,0 @@ -/** - * Generic mixins - */ - @mixin box-shadow($shadow) { - -webkit-box-shadow: $shadow; - -moz-box-shadow: $shadow; - -ms-box-shadow: $shadow; - -o-box-shadow: $shadow; - box-shadow: $shadow; -} - -@mixin border-radius($radius) { - -webkit-border-radius: $radius; - -moz-border-radius: $radius; - -ms-border-radius: $radius; - -o-border-radius: $radius; - border-radius: $radius; -} - -@mixin border-radius-left($radius) { - @include border-radius($radius 0 0 $radius) -} - -@mixin border-radius-right($radius) { - @include border-radius(0 0 $radius $radius) -} - -@mixin linear-gradient($from, $to) { - background-image: -webkit-gradient(linear, 0 0, 0 100%, from($from), to($to)); - background-image: -webkit-linear-gradient($from, $to); - background-image: -moz-linear-gradient($from, $to); - background-image: -ms-linear-gradient($from, $to); - background-image: -o-linear-gradient($from, $to); -} - -@mixin transition($transition) { - -webkit-transition: $transition; - -moz-transition: $transition; - -ms-transition: $transition; - -o-transition: $transition; - transition: $transition; -} - -/** - * Prefilled mixins - * Mixins with fixed values - */ - -@mixin shade { - @include box-shadow(0 0 3px #ddd); -} - -@mixin solid-shade { - @include box-shadow(0 0 0 3px #f1f1f1); -} - -@mixin md-typography { - color: $md-text-color; - - a { - color: $md-link-color; - } - - img { - max-width: 100%; - } - - *:first-child { - margin-top: 0; - } - - code { - font-family: $monospace_font; - white-space: pre; - word-wrap: normal; - padding: 1px 2px; - } - - kbd { - display: inline-block; - padding: 3px 5px; - font-size: 11px; - line-height: 10px; - color: #555; - vertical-align: middle; - background-color: #FCFCFC; - border-width: 1px; - border-style: solid; - border-color: #CCC #CCC #BBB; - border-image: none; - border-radius: 3px; - box-shadow: 0px -1px 0px #BBB inset; - } - - h1 { - font-size: 1.3em; - font-weight: 600; - margin: 24px 0 12px 0; - padding: 0 0 10px 0; - border-bottom: 1px solid #e7e9ed; - color: #313236; - } - - h2 { - font-size: 1.2em; - font-weight: 600; - margin: 24px 0 12px 0; - color: #313236; - } - - h3 { - margin: 24px 0 12px 0; - font-size: 1.25em; - } - - h4 { - margin: 24px 0 12px 0; - font-size: 1.1em; - } - - h5 { - margin: 24px 0 12px 0; - font-size: 1em; - } - - h6 { - margin: 24px 0 12px 0; - font-size: 0.90em; - } - - blockquote { - padding: 8px 21px; - margin: 12px 0 12px; - border-left: 3px solid #e7e9ed; - } - - blockquote p { - color: #7f8fa4 !important; - font-size: 15px; - line-height: 1.5; - } - - p { - color:#5c5d5e; - margin:6px 0 0 0; - } - - table { - @extend .table; - @extend .table-bordered; - margin: 12px 0 12px 0; - color: #5c5d5e; - th { - background: #f8fafc; - } - } - - pre { - margin: 12px 0 12px 0 !important; - background-color: #f8fafc !important; - font-size: 13px !important; - color: #5b6169 !important; - line-height: 1.6em !important; - @include border-radius(2px); - } - - p > code { - font-weight: inherit; - } - - - ul { - color: #5c5d5e; - } - - li { - line-height: 1.6em; - } - - a[href*="/uploads/"], a[href*="storage.googleapis.com/google-code-attachments/"] { - &:before { - margin-right: 4px; - - font: normal normal normal 14px/1 FontAwesome; - font-size: inherit; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - content: "\f0c6"; - } - - &:hover:before { - text-decoration: none; - } - } -} - - -@mixin str-truncated($max_width: 82%) { - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; - vertical-align: top; - white-space: nowrap; - max-width: $max_width; -} - -/* - * Base mixin for lists in GitLab - */ -@mixin basic-list { - margin: 5px 0px; - padding: 0px; - list-style: none; - - > li { - padding: 10px 0; - border-bottom: 1px solid #EEE; - overflow: hidden; - display: block; - margin: 0px; - - &:last-child { - border-bottom: none; - } - - &.active { - background: #f9f9f9; - a { - font-weight: 600; - } - } - - &.hide { - display: none; - } - - &.light { - a { - color: $gl-gray; - } - } - } -} - -@mixin input-big { - height: 36px; - padding: 5px 10px; - font-size: 16px; - line-height: 24px; - color: #7f8fa4; - background-color: #fff; - border-color: #e7e9ed; -} - -@mixin btn-big { - height: 36px; - padding: 5px 10px; - font-size: 16px; - line-height: 24px; -} - -@mixin nav-menu { - padding: 0; - margin: 0; - list-style: none; - margin-top: 5px; - height: 56px; - - li { - display: inline-block; - - a { - padding: 14px; - font-size: 17px; - line-height: 28px; - color: #7f8fa4; - border-bottom: 2px solid transparent; - - &:hover, &:active, &:focus { - text-decoration: none; - } - } - - &.active a { - color: #4c4e54; - border-bottom: 2px solid #1cacfc; - } - - .badge { - font-weight: normal; - background-color: #fff; - background-color: #eee; - color: #78a; - } - } -} - -.fa-align { - top: 20px; - position: relative; -} diff --git a/app/assets/stylesheets/base/variables.scss b/app/assets/stylesheets/base/variables.scss deleted file mode 100644 index eb9a2966389..00000000000 --- a/app/assets/stylesheets/base/variables.scss +++ /dev/null @@ -1,98 +0,0 @@ -$hover: #FFFAF1; -$gl-text-color: #54565B; -$gl-text-green: #4A2; -$gl-text-red: #D12F19; -$gl-text-orange: #D90; -$gl-header-color: #4c4e54; -$gl-link-color: #333c48; -$md-text-color: #444; -$md-link-color: #3084bb; -$nprogress-color: #c0392b; -$gl-font-size: 15px; -$list-font-size: 15px; -$sidebar_collapsed_width: 62px; -$sidebar_width: 230px; -$avatar_radius: 50%; -$code_font_size: 13px; -$code_line_height: 1.5; -$border-color: #dce0e6; -$background-color: #F7F8FA; -$header-height: 58px; -$fixed-layout-width: 1200px; -$gl-gray: #7f8fa4; -$gl-padding: 16px; -$gl-avatar-size: 46px; - -/* - * Color schema - */ - -$white-light: #FFFFFF; -$white-normal: #DCE0E5; -$white-dark: #E4E7ED; - -$gray-light: #F0F2F5; -$gray-normal: #DCE0E5; -$gray-dark: #E4E7ED; - -$green-light: #31AF64; -$green-normal: #2FAA60; -$green-dark: #2CA05B; - -$blue-light: #2EA8E5; -$blue-normal: #2D9FD8; -$blue-dark: #2897CE; - -$orange-light: #FC6443; -$orange-normal: #E75E40; -$orange-dark: #CE5237; - -$red-light: #F43263; -$red-normal: #E52C5A; -$red-dark: #D22852; - -$border-white-light: #E3E7EC; -$border-white-normal: #D6DAE2; -$border-white-dark: #C6CACF; - -$border-gray-light: #DCE0E5; -$border-gray-normal: #D6DAE2; -$border-gray-dark: #C6CACF; - -$border-green-light: #2FAA60; -$border-green-normal: #2CA05B; -$border-green-dark: #279654; - -$border-blue-light: #2D9FD8; -$border-blue-normal: #2897CE; -$border-blue-dark: #258DC1; - -$border-orange-light: #ED5C3D; -$border-orange-normal: #CE5237; -$border-orange-dark: #C14E35; - -$border-red-light: #E52C5A; -$border-red-normal: #D22852; -$border-red-dark: #CA264F; - - -/* - * State colors: - */ -$gl-primary: $blue-normal; -$gl-success: $green-normal; -$gl-info: $blue-normal; -$gl-warning: $orange-normal; -$gl-danger: $red-normal; - -/* - * Commit Diff Colors - */ -$added: #63c363; -$deleted: #f77; - -/* - * Fonts - */ -$monospace_font: 'Menlo', 'Liberation Mono', 'Consolas', 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace; -$regular_font: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif; diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss new file mode 100644 index 00000000000..c5e23c1c328 --- /dev/null +++ b/app/assets/stylesheets/framework.scss @@ -0,0 +1,32 @@ +@import "framework/fonts"; +@import "framework/variables"; +@import "framework/mixins"; +@import "framework/layout"; +@import 'framework/gl_variables'; +@import 'framework/gl_bootstrap'; +@import "framework/avatar.scss"; +@import "framework/blocks.scss"; +@import "framework/buttons.scss"; +@import "framework/calendar.scss"; +@import "framework/callout.scss"; +@import "framework/common.scss"; +@import "framework/files.scss"; +@import "framework/filters.scss"; +@import "framework/flash.scss"; +@import "framework/forms.scss"; +@import "framework/gfm.scss"; +@import "framework/gitlab-theme.scss"; +@import "framework/header.scss"; +@import "framework/highlight.scss"; +@import "framework/issue_box.scss"; +@import "framework/jquery.scss"; +@import "framework/lists.scss"; +@import "framework/markdown_area.scss"; +@import "framework/mobile.scss"; +@import "framework/pagination.scss"; +@import "framework/selects.scss"; +@import "framework/sidebar.scss"; +@import "framework/tables.scss"; +@import "framework/timeline.scss"; +@import "framework/typography.scss"; +@import "framework/zen.scss"; diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss new file mode 100644 index 00000000000..36e582d4854 --- /dev/null +++ b/app/assets/stylesheets/framework/avatar.scss @@ -0,0 +1,49 @@ +.avatar { + float: left; + margin-right: 12px; + width: 40px; + height: 40px; + padding: 0; + @include border-radius($avatar_radius); + + &.avatar-inline { + float: none; + margin-left: 4px; + margin-bottom: 2px; + + &.s16 { margin-right: 4px; } + &.s24 { margin-right: 4px; } + } + + &.group-avatar, &.project-avatar, &.avatar-tile { + @include border-radius(0px); + } + + &.s16 { width: 16px; height: 16px; margin-right: 6px; } + &.s24 { width: 24px; height: 24px; margin-right: 8px; } + &.s26 { width: 26px; height: 26px; margin-right: 8px; } + &.s32 { width: 32px; height: 32px; margin-right: 10px; } + &.s36 { width: 36px; height: 36px; margin-right: 10px; } + &.s46 { width: 46px; height: 46px; margin-right: 15px; } + &.s48 { width: 48px; height: 48px; margin-right: 10px; } + &.s60 { width: 60px; height: 60px; margin-right: 12px; } + &.s90 { width: 90px; height: 90px; margin-right: 15px; } + &.s110 { width: 110px; height: 110px; margin-right: 15px; } + &.s140 { width: 140px; height: 140px; margin-right: 20px; } + &.s160 { width: 160px; height: 160px; margin-right: 20px; } +} + +.identicon { + text-align: center; + vertical-align: top; + + &.s16 { font-size: 12px; line-height: 1.33; } + &.s24 { font-size: 14px; line-height: 1.8; } + &.s26 { font-size: 20px; line-height: 1.33; } + &.s32 { font-size: 22px; line-height: 32px; } + &.s60 { font-size: 32px; line-height: 60px; } + &.s90 { font-size: 36px; line-height: 90px; } + &.s110 { font-size: 40px; line-height: 112px; font-weight: 300; } + &.s140 { font-size: 72px; line-height: 140px; } + &.s160 { font-size: 96px; line-height: 160px; } +} diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss new file mode 100644 index 00000000000..6ce34b5c3e8 --- /dev/null +++ b/app/assets/stylesheets/framework/blocks.scss @@ -0,0 +1,62 @@ +.light-well { + background-color: #f8fafc; + padding: 15px; +} + +.centered-light-block { + text-align: center; + color: $gl-gray; + margin: 20px; +} + +.nothing-here-block { + text-align: center; + padding: 20px; + color: $gl-gray; + font-weight: normal; + font-size: 16px; + line-height: 36px; +} + +.gray-content-block { + margin: -$gl-padding; + background-color: $background-color; + padding: $gl-padding; + margin-bottom: 0px; + border-top: 1px solid $border-color; + border-bottom: 1px solid $border-color; + color: $gl-gray; + + &.top-block { + border-top: none; + } + + &.middle-block { + margin-top: 0; + margin-bottom: 0; + } + + &.clear-block { + margin-bottom: $gl-padding - 1px; + padding-bottom: $gl-padding; + } + + &.second-block { + margin-top: -1px; + margin-bottom: 0; + } + + &.footer-block { + margin-top: 0; + border-bottom: none; + margin-bottom: -$gl-padding; + } + + .title { + color: $gl-text-color; + } + + .oneline { + line-height: 42px; + } +} diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss new file mode 100644 index 00000000000..11acbe3adfa --- /dev/null +++ b/app/assets/stylesheets/framework/buttons.scss @@ -0,0 +1,163 @@ +@mixin btn-default { + @include border-radius(2px); + border-width: 1px; + border-style: solid; + text-transform: uppercase; + font-size: 13px; + font-weight: 600; + line-height: 18px; + padding: 11px 16px; + letter-spacing: .4px; + + &:focus, + &:active { + outline: none; + @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); + } +} + +@mixin btn-middle { + @include btn-default; + @include border-radius(2px); + padding: 11px 24px; +} + +@mixin btn-color($light, $border-light, $normal, $border-normal, $dark, $border-dark, $color) { + background-color: $light; + border-color: $border-light; + color: $color; + + &:hover, + &:focus { + background-color: $normal; + border-color: $border-normal; + color: $color; + } + + &:active { + @include box-shadow (inset 0 0 4px rgba(0, 0, 0, 0.12)); + + background-color: $dark; + border-color: $border-dark; + color: $color; + } +} + +@mixin btn-green { + @include btn-color($green-light, $border-green-light, $green-normal, $border-green-normal, $green-dark, $border-green-dark, #FFFFFF); +} + +@mixin btn-blue { + @include btn-color($blue-light, $border-blue-light, $blue-normal, $border-blue-normal, $blue-dark, $border-blue-dark, #FFFFFF); +} + +@mixin btn-orange { + @include btn-color($orange-light, $border-orange-light, $orange-normal, $border-orange-normal, $orange-dark, $border-orange-dark, #FFFFFF); +} + +@mixin btn-red { + @include btn-color($red-light, $border-red-light, $red-normal, $border-red-normal, $red-dark, $border-red-dark, #FFFFFF); +} + +@mixin btn-gray { + @include btn-color($gray-light, $border-gray-light, $gray-normal, $border-gray-normal, $gray-dark, $border-gray-dark, #313236); +} + +@mixin btn-white { + @include btn-color($white-light, $border-white-light, $white-normal, $border-white-normal, $white-dark, $border-white-dark, #313236); +} + +.btn { + @include btn-default; + @include btn-white; + + &.btn-success, + &.btn-new, + &.btn-create, + &.btn-save, + &.btn-green { + @include btn-green; + } + + &.btn-gray { + @include btn-gray; + } + + &.btn-primary, + &.btn-info { + @include btn-blue; + } + + &.btn-warning { + @include btn-orange; + } + + &.btn-danger, + &.btn-remove, + &.btn-red { + @include btn-red; + } + + &.btn-cancel { + float: right; + } + + &.btn-close { + color: $gl-danger; + border-color: $gl-danger; + &:hover { + color: #B94A48; + } + } + + &.btn-reopen { + color: $gl-success; + border-color: $gl-success; + &:hover { + color: #468847; + } + } + + &.btn-grouped { + margin-right: 7px; + float: left; + &:last-child { + margin-right: 0px; + } + } +} + +.btn-block { + width: 100%; + margin: 0; + margin-bottom: 15px; + &.btn { + padding: 6px 0; + } +} + +.btn-group { + &.btn-grouped { + margin-right: 7px; + float: left; + &:last-child { + margin-right: 0px; + } + } +} + +.btn-group-next { + .btn { + padding: 9px 0px; + font-size: 15px; + color: #7f8fa4; + border-color: #e7e9ed; + width: 140px; + + &.active { + border-color: $gl-info; + background: $gl-info; + color: #fff; + } + } +} diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss new file mode 100644 index 00000000000..a36fefe22c5 --- /dev/null +++ b/app/assets/stylesheets/framework/calendar.scss @@ -0,0 +1,90 @@ +.user-calendar-activities { + .calendar_onclick_hr { + padding: 0; + margin: 10px 0; + } + + .str-truncated { + max-width: 70%; + } + + .text-expander { + background: #eee; + color: #555; + padding: 0 5px; + cursor: pointer; + margin-left: 4px; + &:hover { + background-color: #ddd; + } + } +} +/** +* This overwrites the default values of the cal-heatmap gem +*/ +.calendar { + .qi { + background-color: #999; + fill: #fff; + } + + .q1 { + background-color: #dae289; + fill: #ededed; + } + + .q2 { + background-color: #cedb9c; + fill: #ACD5F2; + } + + .q3 { + background-color: #b5cf6b; + fill: #7FA8D1; + } + + .q4 { + background-color: #637939; + fill: #49729B; + } + + .q5 { + background-color: #3b6427; + fill: #254E77; + } + + .domain-background { + fill: none; + shape-rendering: crispedges; + } + + .ch-tooltip { + position: absolute; + display: none; + margin-top: 22px; + margin-left: 1px; + font-size: 13px; + padding: 3px; + font-weight: 550; + background-color: #222; + span { + position: absolute; + width: 200px; + text-align: center; + visibility: hidden; + border-radius: 10px; + &:after { + content: ''; + position: absolute; + top: 100%; + left: 50%; + margin-left: -8px; + width: 0; + height: 0; + border-top: 8px solid #000000; + border-right: 8px solid transparent; + border-left: 8px solid transparent; + } + } + } +} diff --git a/app/assets/stylesheets/framework/callout.scss b/app/assets/stylesheets/framework/callout.scss new file mode 100644 index 00000000000..f1699d21c9b --- /dev/null +++ b/app/assets/stylesheets/framework/callout.scss @@ -0,0 +1,45 @@ +/* + * Callouts from Bootstrap3 docs + * + * Not quite alerts, but custom and helpful notes for folks reading the docs. + * Requires a base and modifier class. + */ + +/* Common styles for all types */ +.bs-callout { + margin: 20px 0; + padding: 20px; + border-left: 3px solid #eee; + color: #666; + background: #f9f9f9; +} +.bs-callout h4 { + margin-top: 0; + margin-bottom: 5px; +} +.bs-callout p:last-child { + margin-bottom: 0; +} + +/* Variations */ +.bs-callout-danger { + background-color: #fdf7f7; + border-color: #eed3d7; + color: #b94a48; +} +.bs-callout-warning { + background-color: #faf8f0; + border-color: #faebcc; + color: #8a6d3b; +} +.bs-callout-info { + background-color: #f4f8fa; + border-color: #bce8f1; + color: #34789a; +} +.bs-callout-success { + background-color: #dff0d8; + border-color: #5cA64d; + color: #3c763d; +} + diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss new file mode 100644 index 00000000000..03919f15f1f --- /dev/null +++ b/app/assets/stylesheets/framework/common.scss @@ -0,0 +1,404 @@ +/** COLORS **/ +.cgray { color: $gl-gray; } +.clgray { color: #BBB } +.cred { color: $gl-text-red; } +.cgreen { color: $gl-text-green; } +.cdark { color: #444 } + +/** COMMON CLASSES **/ +.prepend-top-10 { margin-top:10px } +.prepend-top-default { margin-top: $gl-padding; } +.prepend-top-20 { margin-top:20px } +.prepend-left-10 { margin-left:10px } +.prepend-left-20 { margin-left:20px } +.append-right-10 { margin-right:10px } +.append-right-20 { margin-right:20px } +.append-bottom-10 { margin-bottom:10px } +.append-bottom-15 { margin-bottom:15px } +.append-bottom-20 { margin-bottom:20px } +.inline { display: inline-block } +.center { text-align: center } + +.underlined-link { text-decoration: underline; } +.hint { font-style: italic; color: #999; } +.light { color: $gl-gray; } + +.slead { + color: $gl-gray; + font-size: 15px; + margin-bottom: 12px; + font-weight: normal; + line-height: 24px; +} + +.tab-content { + overflow: visible; +} + +pre { + &.clean { + background: none; + border: none; + margin: 0; + padding: 0; + } + + &.well-pre { + border: 1px solid #EEE; + background: #f9f9f9; + border-radius: 0; + color: #555; + } +} + +.dropdown-menu > li > a { + text-shadow: none; +} + +.dropdown-menu-align-right { + left: auto; + right: 0px; +} + +.dropdown-menu > li > a:hover, +.dropdown-menu > li > a:focus { + background: $gl-primary; + color: #FFF +} + +.str-truncated { + @include str-truncated; +} + +/** FLASH message **/ +.author_link { + color: $gl-link-color; +} + +.back-link { + font-size: 14px; +} + +table a code { + position: relative; + top: -2px; + margin-right: 3px; +} + +.loading { + margin: 20px auto; + height: 40px; + color: #555; + font-size: 32px; + text-align: center; +} + +span.update-author { + display: block; + color: #999; + font-weight: normal; + font-style: italic; + strong { + font-weight: bold; + font-style: normal; + } +} + +.user-mention { + color: #2FA0BB; + font-weight: bold; +} + +.field_with_errors { + display: inline; +} + +.line_holder { + &:hover { + td { + background: #FFFFCF !important; + } + } +} + +p.time { + color: #999; + font-size: 90%; + margin: 30px 3px 3px 2px; +} + +.highlight { + text-shadow: none; +} + +.thin_area{ + height: 150px; +} + +// Fixes alignment on notes. +.new_note { + label { + text-align: left; + } +} + +// Fix issue with notes & lists creating a bunch of bottom borders. +li.note { + img { max-width:100% } + .note-title { + li { + border-bottom:none !important; + } + } +} + +.markdown { + img { + max-width: 100%; + } +} + +.wiki_content code, .readme code{ + background-color: inherit; +} + +.project_member_show { + td:first-child { + color: #aaa; + } +} + +.rss-icon { + img { + width: 24px; + vertical-align: top; + } + + strong { + line-height: 24px; + } +} + +.show-suppressed-diff, +.show-all-commits { + cursor: pointer; +} + +.git_error_tips { + @extend .col-md-6; + text-align: left; + margin-top: 40px; + pre { + background: white; + border: none; + font-size: 12px; + } +} + +.error-message { + padding: 10px; + background: #C67; + margin: 0; + color: #FFF; + + a { + color: #fff; + text-decoration: underline; + } +} + +.browser-alert { + padding: 10px; + text-align: center; + background: #C67; + color: #fff; + font-weight: bold; + a { + color: #fff; + text-decoration: underline; + } +} + +.warning_message { + border-left: 4px solid #ed9; + color: #b90; + padding: 10px; + margin-bottom: 10px; + background: #ffffe6; + padding-left: 20px; + + &.centered { + text-align: center; + } +} + +.gitlab-promo { + a { + color: #aaa; + margin-right: 30px; + } +} + +.milestone { + &.milestone-closed { + background: #f9f9f9; + } + .progress { + margin-bottom: 0; + margin-top: 4px; + } +} + +.control-group { + .controls { + span { + &.descr { + position: relative; + top: 2px; + left: 5px; + color: #666; + } + } + } +} + +img.emoji { + height: 20px; + vertical-align: middle; + width: 20px; +} + +.chart { + overflow: hidden; + height: 220px; +} + +.description-block { + @extend .light-well; + @extend .light; + margin-bottom: 10px; +} + +table { + td.permission-x { + background: #D9EDF7 !important; + text-align: center; + } +} + +.dashboard-intro-icon { + float: left; + text-align: center; + font-size: 32px; + color: #AAA; + width: 60px; +} + +.dashboard-intro-text { + display: inline-block; + margin-left: -60px; + padding-left: 60px; + width: 100%; +} + +.btn-sign-in { + margin-top: 8px; + text-shadow: none; +} + +.side-filters { + fieldset { + margin-bottom: 15px; + } +} + +.wiki .highlight, .note-body .highlight { + margin: 12px 0 12px 0; +} + +.wiki .code { + overflow-x: auto; +} + +.footer-links { + margin-bottom: 20px; + a { + margin-right: 15px; + } +} + +.search_box { + @extend .well; + text-align: center; +} + +.task-status { + margin-left: 10px; +} + +#nprogress .spinner { + top: 15px !important; + right: 10px !important; +} + +.header-with-avatar { + h3 { + margin: 0; + font-weight: bold; + } + + .username { + font-size: 18px; + color: #666; + margin-top: 8px; + } + + .description { + font-size: $gl-font-size; + color: #666; + margin-top: 8px; + } +} + +.profiler-results { + top: 73px !important; + + .profiler-button, + .profiler-controls { + border-color: #EEE !important; + } +} + +.center-top-menu { + @include nav-menu; + text-align: center; + margin-top: 5px; + margin-bottom: $gl-padding; + height: 56px; + margin-top: -$gl-padding; + padding-top: $gl-padding; + + &.no-bottom { + margin-bottom: 0; + } + + &.no-top { + margin-top: 0; + } +} + +.dropzone .dz-preview .dz-progress { + border-color: $border-color !important; +} + +.dropzone .dz-preview .dz-progress .dz-upload { + background: $gl-success !important; +} + +.space-right { + margin-right: 10px; +} + +.in-line { + display: inline-block; +} diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss new file mode 100644 index 00000000000..9dd77747884 --- /dev/null +++ b/app/assets/stylesheets/framework/files.scss @@ -0,0 +1,171 @@ +/** + * File content holder + * + */ +.file-holder { + margin-left: -$gl-padding; + margin-right: -$gl-padding; + border: none; + border-top: 1px solid #E7E9EE; + border-bottom: 1px solid #E7E9EE; + margin-bottom: 1em; + + table { + @extend .table; + } + + .file-title { + position: relative; + background: $background-color; + border-bottom: 1px solid $border-color; + text-shadow: 0 1px 1px #fff; + margin: 0; + text-align: left; + padding: 10px 15px; + + .file-actions { + float: right; + position: absolute; + top: 5px; + right: 15px; + + .btn { + padding: 0px 10px; + font-size: 13px; + line-height: 28px; + } + } + + .left-options { + margin-top: -3px; + } + } + .file-content { + background: #fff; + + &.image_file { + background: #eee; + text-align: center; + img { + padding: 100px; + max-width: 50%; + } + } + + &.wiki { + padding: $gl-padding; + + .highlight { + margin-bottom: 9px; + + > pre { + margin: 0; + } + } + } + + &.blob_file { + + } + + &.blob-no-preview { + background: #eee; + text-shadow: 0 1px 2px #FFF; + padding: 100px 0; + } + + /** + * Blame file + */ + &.blame { + table { + border: none; + box-shadow: none; + margin: 0; + } + tr { + border-bottom: 1px solid #eee; + } + td { + &:first-child { + border-left: none; + } + &:last-child { + border-right: none; + } + background: #fff; + padding: 10px $gl-padding; + } + .lines { + pre { + padding: 0; + margin: 0; + background: none; + border: none; + } + } + img.avatar { + border: 0 none; + float: none; + margin: 0; + padding: 0; + } + td.blame-commit { + background: #f9f9f9; + min-width: 350px; + + .commit-author-link { + color: #888; + } + } + td.blame-numbers { + pre { + color: #AAA; + white-space: pre; + } + background: #f1f1f1; + border-left: 1px solid #DDD; + } + td.lines { + code { + font-family: $monospace_font; + } + } + } + + &.logs { + background: #eee; + max-height: 700px; + overflow-y: auto; + + ol { + margin-left: 40px; + padding: 10px 0; + border-left: 1px solid $border-color; + margin-bottom: 0; + background: white; + li { + color: #888; + p { + margin: 0; + color: #333; + line-height: 24px; + padding-left: 10px; + } + + &:hover { + background: $hover; + } + } + } + } + + /** + * Code file + */ + &.code { + padding: 0; + } + } +} + diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss new file mode 100644 index 00000000000..8e6922c9231 --- /dev/null +++ b/app/assets/stylesheets/framework/filters.scss @@ -0,0 +1,30 @@ +.filter-item { + margin-right: 15px; +} + +@media (min-width: 800px) { + .issues-filters, + .issues_bulk_update { + select, .select2-container { + width: 120px !important; + display: inline-block; + } + } +} + +@media (min-width: 1200px) { + .issues-filters, + .issues_bulk_update { + select, .select2-container { + width: 150px !important; + display: inline-block; + } + } +} + +.issues-filters, +.issues_bulk_update { + .select2-container .select2-choice { + color: #444 !important; + } +} diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss new file mode 100644 index 00000000000..82eb50ad4be --- /dev/null +++ b/app/assets/stylesheets/framework/flash.scss @@ -0,0 +1,17 @@ +.flash-container { + cursor: pointer; + margin: 0; + font-size: 14px; + width: 100%; + z-index: 100; + + .flash-notice { + @extend .alert; + @extend .alert-info; + } + + .flash-alert { + @extend .alert; + @extend .alert-danger; + } +} diff --git a/app/assets/stylesheets/framework/fonts.scss b/app/assets/stylesheets/framework/fonts.scss new file mode 100644 index 00000000000..e214567eca1 --- /dev/null +++ b/app/assets/stylesheets/framework/fonts.scss @@ -0,0 +1,25 @@ +/* latin-ext */ +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 300; + src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), font-url('SourceSansPro-Light.ttf'); +} +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 400; + src: local('Source Sans Pro'), local('SourceSansPro-Regular'), font-url('SourceSansPro-Regular.ttf'); +} +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 600; + src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), font-url('SourceSansPro-Semibold.ttf'); +} +@font-face { + font-family: 'Source Sans Pro'; + font-style: normal; + font-weight: 700; + src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), font-url('SourceSansPro-Bold.ttf'); +} diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss new file mode 100644 index 00000000000..0edfe24f195 --- /dev/null +++ b/app/assets/stylesheets/framework/forms.scss @@ -0,0 +1,94 @@ +textarea { + resize: vertical; +} + +input[type='search'].search-text-input { + background-image: image-url("icon-search.png"); + background-repeat: no-repeat; + background-position: 10px; + padding-left: 25px; +} + +input[type='text'].danger { + background: #F2DEDE!important; + border-color: #D66; + text-shadow: 0 1px 1px #fff +} + +.datetime-controls { + select { + width: 100px; + } +} + +.form-actions { + padding: 17px 20px 18px; + margin-top: 18px; + margin-bottom: 18px; + background-color: $background-color; + border-top: 1px solid $border-color; +} + +label { + &.control-label { + @extend .col-sm-2; + } + + &.inline-label { + margin: 0; + } +} + +.inline-input-group { + width: 250px; +} + +.custom-form-control { + width: 150px; +} + +@media (min-width: $screen-sm-min) { + .custom-form-control { + width: 150px; + } +} + +/* Medium devices (desktops, 992px and up) */ +@media (min-width: $screen-md-min) { + .custom-form-control { + width: 170px; + } +} + +/* Large devices (large desktops, 1200px and up) */ +@media (min-width: $screen-lg-min) { + .custom-form-control { + width: 200px; + } +} + +.fieldset-form fieldset { + margin-bottom: 20px; +} + +.form-control { + @include box-shadow(none); +} + +.wiki-content { + margin-top: 35px; +} + +.form-group .control-label { + font-weight: normal; +} + +.form-control::-webkit-input-placeholder { + color: #7f8fa4; +} + +.input-group { + .input-group-addon { + background-color: #f7f8fa; + } +} diff --git a/app/assets/stylesheets/framework/gfm.scss b/app/assets/stylesheets/framework/gfm.scss new file mode 100644 index 00000000000..bd9200ace23 --- /dev/null +++ b/app/assets/stylesheets/framework/gfm.scss @@ -0,0 +1,25 @@ +/** + * Styles that apply to all GFM related forms. + */ +.issue-form, .merge-request-form, .wiki-form { + .description { + height: 16em; + border-top-left-radius: 0; + } +} + +.wiki-form { + .description { + height: 26em; + } +} + +.milestone-form { + .description { + height: 14em; + } +} + +.gfm-commit, .gfm-commit_range { + font-family: $monospace_font; +} diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss new file mode 100644 index 00000000000..8d9a0aae568 --- /dev/null +++ b/app/assets/stylesheets/framework/gitlab-theme.scss @@ -0,0 +1,120 @@ +/** + * Styles the GitLab application with a specific color theme + * + * $color-light - + * $color - + * $color-darker - + * $color-dark - + */ +@mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) { + .page-with-sidebar { + .header-logo { + background-color: $color; + border-color: $color; + + a { + color: $color-light; + + h3 { + color: $color-light; + } + } + + &:hover { + background-color: $color-darker; + a { + color: #FFF; + } + } + } + + .collapse-nav a { + color: #FFF; + background: $color; + } + + .sidebar-wrapper { + background: $color-darker; + + .sidebar-user { + background: $color-darker; + color: $color-light; + + &:hover { + background-color: $color-dark; + color: #FFF; + text-decoration: none; + } + } + } + + .nav-sidebar li { + a { + color: $color-light; + + &:hover, &:focus, &:active { + background: $color-dark; + } + + i { + color: $color-light; + } + + .count { + color: $color-light; + background: $color-dark; + } + } + + &.separate-item { + border-top: 1px solid $color; + } + + &.active a { + color: #FFF; + background: $color-dark; + + &.no-highlight { + border: none; + } + + i { + color: #FFF + } + } + } + } +} + +$theme-blue: #2980B9; +$theme-charcoal: #333c47; +$theme-graphite: #888888; +$theme-gray: #373737; +$theme-green: #019875; +$theme-violet: #554488; + +body { + &.ui_blue { + @include gitlab-theme(#BECDE9, $theme-blue, #1970A9, #096099); + } + + &.ui_charcoal { + @include gitlab-theme(#c5d0de, $theme-charcoal, #2b333d, #24272D); + } + + &.ui_graphite { + @include gitlab-theme(#CCCCCC, $theme-graphite, #777777, #666666); + } + + &.ui_gray { + @include gitlab-theme(#979797, $theme-gray, #272727, #222222); + } + + &.ui_green { + @include gitlab-theme(#AADDCC, $theme-green, #018865, #017855); + } + + &.ui_violet { + @include gitlab-theme(#9988CC, $theme-violet, #443366, #332255); + } +} diff --git a/app/assets/stylesheets/framework/gl_bootstrap.scss b/app/assets/stylesheets/framework/gl_bootstrap.scss new file mode 100644 index 00000000000..eb8d23d6453 --- /dev/null +++ b/app/assets/stylesheets/framework/gl_bootstrap.scss @@ -0,0 +1,273 @@ +/* + * Twitter bootstrap with GitLab customizations/additions + * + */ + +// Core variables and mixins +@import "bootstrap/variables"; +@import "bootstrap/mixins"; + +// Reset +@import "bootstrap/normalize"; +@import "bootstrap/print"; + +// Core CSS +@import "bootstrap/scaffolding"; +@import "bootstrap/type"; +@import "bootstrap/code"; +@import "bootstrap/grid"; +@import "bootstrap/tables"; +@import "bootstrap/forms"; +@import "bootstrap/buttons"; + +// Components +@import "bootstrap/component-animations"; +@import "bootstrap/dropdowns"; +@import "bootstrap/button-groups"; +@import "bootstrap/input-groups"; +@import "bootstrap/navs"; +@import "bootstrap/navbar"; +@import "bootstrap/breadcrumbs"; +@import "bootstrap/pagination"; +@import "bootstrap/pager"; +@import "bootstrap/labels"; +@import "bootstrap/badges"; +@import "bootstrap/jumbotron"; +@import "bootstrap/thumbnails"; +@import "bootstrap/alerts"; +@import "bootstrap/progress-bars"; +@import "bootstrap/list-group"; +@import "bootstrap/wells"; +@import "bootstrap/close"; +@import "bootstrap/panels"; + +// Components w/ JavaScript +@import "bootstrap/modals"; +@import "bootstrap/tooltip"; +@import "bootstrap/popovers"; +@import "bootstrap/carousel"; + +// Utility classes +.clearfix { + @include clearfix(); +} +.center-block { + @include center-block(); +} +.pull-right { + float: right !important; +} +.pull-left { + float: left !important; +} +.hide { + display: none; +} +.show { + display: block !important; +} +.invisible { + visibility: hidden; +} +.text-hide { + @include text-hide(); +} +.hidden { + display: none !important; + visibility: hidden !important; +} +.affix { + position: fixed; +} + +@import "bootstrap/responsive-utilities"; + +// Labels +.label { + padding: 2px 4px; + font-size: 13px; + font-style: normal; + font-weight: normal; + display: inline-block; + + &.label-gray { + background-color: #f8fafc; + color: $gl-gray; + text-shadow: none; + } + + &.label-inverse { + background-color: #333333; + } +} + +// Nav tabs +.nav.nav-tabs { + margin-bottom: 15px; + + li { + > a { + margin-right: 5px; + line-height: 20px; + border-color: #EEE; + color: #888; + border-bottom: 1px solid #ddd; + .badge { + background-color: #eee; + color: #888; + text-shadow: 0 1px 1px #fff; + } + i.fa { + line-height: 14px; + } + } + &.active { + > a { + border-color: #CCC; + border-bottom: 1px solid #fff; + color: #333; + font-weight: bold; + } + } + } +} + +.nav-tabs > li > a, +.nav-pills > li > a { + color: #666; +} + +.nav-pills > .active > a > span > .badge { + background-color: #fff; + color: $gl-primary; +} + + +/** + * fix to keep tooltips position in top navigation bar + * + */ +.navbar .nav > li { + position: relative; + white-space: nowrap; +} + +/** + * Add some extra stuff to panels + * + */ + +.container-blank .panel .panel-heading { + font-size: 17px; + line-height: 38px; +} + +.panel { + box-shadow: none; + + .panel-heading { + .panel-head-actions { + position: relative; + top: -5px; + float: right; + } + } + + .panel-body { + form { + margin: 0; + } + + .form-actions { + margin: -15px; + margin-top: 18px; + } + } + + .panel-footer { + .pagination { + margin: 0; + } + + .btn { + min-width: 124px; + } + } + + &.panel-small { + .panel-heading { + padding: 6px 15px; + font-size: 13px; + font-weight: normal; + a { + color: #777; + } + } + } +} + +.panel-succes .panel-heading, +.panel-info .panel-heading, +.panel-danger .panel-heading, +.panel-warning .panel-heading, +.panel-primary .panel-heading, +.alert { + a:not(.btn) { + @extend .alert-link; + color: #fff; + text-decoration: underline; + } +} + +.alert-help { + background-color: $background-color; + border: 1px solid $border-color; + color: $gl-gray; +} + +// Typography ================================================================= + +.text-primary, +.text-primary:hover { + color: $brand-primary; +} + +.text-success, +.text-success:hover { + color: $brand-success; +} + +.text-danger, +.text-danger:hover { + color: $brand-danger; +} + +.text-warning, +.text-warning:hover { + color: $brand-warning; +} + +.text-info, +.text-info:hover { + color: $brand-info; +} + +// Tables ===================================================================== + +table.table { + .dropdown-menu a { + text-decoration: none; + } + + .success, + .warning, + .danger, + .info { + color: #fff; + + a:not(.btn) { + text-decoration: underline; + color: #fff; + } + } +} diff --git a/app/assets/stylesheets/framework/gl_variables.scss b/app/assets/stylesheets/framework/gl_variables.scss new file mode 100644 index 00000000000..18632da4f2a --- /dev/null +++ b/app/assets/stylesheets/framework/gl_variables.scss @@ -0,0 +1,158 @@ +// Override Bootstrap variables here (defaults from bootstrap-sass v3.3.3): +// For all variables see https://github.com/twbs/bootstrap-sass/blob/master/templates/project/_bootstrap-variables.sass +// +// Variables +// -------------------------------------------------- + + +//== Colors +// +//## Gray and brand colors for use across Bootstrap. + +// $gray-base: #000 +// $gray-darker: lighten($gray-base, 13.5%) // #222 +// $gray-dark: lighten($gray-base, 20%) // #333 +// $gray: lighten($gray-base, 33.5%) // #555 +// $gray-light: lighten($gray-base, 46.7%) // #777 +// $gray-lighter: lighten($gray-base, 93.5%) // #eee + +$brand-primary: $gl-primary; +$brand-success: $gl-success; +$brand-info: $gl-info; +$brand-warning: $gl-warning; +$brand-danger: $gl-danger; + +$border-radius-base: 2px !default; +$border-radius-large: 2px !default; +$border-radius-small: 2px !default; + + +//== Scaffolding +// +$text-color: $gl-text-color; +$link-color: $gl-link-color; + + +//== Typography +// +//## Font, line-height, and color for body text, headings, and more. + +$font-family-sans-serif: $regular_font; +$font-family-monospace: $monospace_font; +$font-size-base: $gl-font-size; + + +//== Components +// +//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). + +$padding-base-vertical: 9px; +$padding-base-horizontal: $gl-padding; +$component-active-color: #fff; +$component-active-bg: $brand-info; + +//== Forms +// +//## + +$input-color: $text-color; +$input-border: #e7e9ed; +$input-border-focus: #7F8FA4; +$legend-color: $text-color; + + +//== Pagination +// +//## + +$pagination-color: $gl-gray; +$pagination-bg: $background-color; +$pagination-border: transparent; + +$pagination-hover-color: #fff; +$pagination-hover-bg: $brand-info; +$pagination-hover-border: transparent; + +$pagination-active-color: #fff; +$pagination-active-bg: $brand-info; +$pagination-active-border: transparent; + +$pagination-disabled-color: #fff; +$pagination-disabled-bg: lighten($brand-info, 15%); +$pagination-disabled-border: transparent; + + +//== Form states and alerts +// +//## Define colors for form feedback states and, by default, alerts. + +$state-success-text: #fff; +$state-success-bg: $brand-success; +$state-success-border: $brand-success; + +$state-info-text: #fff; +$state-info-bg: $brand-info; +$state-info-border: $brand-info; + +$state-warning-text: #fff; +$state-warning-bg: $brand-warning; +$state-warning-border: $brand-warning; + +$state-danger-text: #fff; +$state-danger-bg: $brand-danger; +$state-danger-border: $brand-danger; + + +//== Alerts +// +//## Define alert colors, border radius, and padding. + +$alert-border-radius: 0; + + +//== Panels +// +//## + +$panel-border-radius: 2px; +$panel-default-text: $text-color; +$panel-default-border: $border-color; +$panel-default-heading-bg: $background-color; +$panel-footer-bg: $background-color; +$panel-inner-border: $border-color; + +//== Wells +// +//## + +$well-bg: #F9F9F9; +$well-border: #EEE; + +//== Code +// +//## + +$code-color: #c7254e; +$code-bg: #f9f2f4; + +$kbd-color: #fff; +$kbd-bg: #333; + +//== Buttons +// +//## +$btn-default-color: $gl-text-color; +$btn-default-bg: #fff; +$btn-default-border: #e7e9ed; + +//== Nav +// +//## +$nav-link-padding: 13px $gl-padding; + +//== Code +// +//## +$pre-bg: #f8fafc !default; +$pre-color: $gl-gray !default; +$pre-border-color: #e7e9ed; diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss new file mode 100644 index 00000000000..91e6975e269 --- /dev/null +++ b/app/assets/stylesheets/framework/header.scss @@ -0,0 +1,169 @@ +/* + * Application Header + * + */ +header { + transition-duration: .3s; + + &.navbar-empty { + background: #FFF; + border-bottom: 1px solid #EEE; + + .center-logo { + margin: 8px 0; + text-align: center; + + img { + height: 32px; + } + } + } + + &.navbar-gitlab { + padding: 0 20px; + z-index: 100; + margin-bottom: 0; + min-height: $header-height; + background-color: #fff; + border: none; + + .container-fluid { + width: 100% !important; + filter: none; + padding: 0; + + .nav > li > a { + color: #7f8fa4; + font-size: 18px; + padding: 0; + margin: ($header-height - 28) / 2 0; + margin-left: 10px; + height: 28px; + width: 28px; + line-height: 28px; + text-align: center; + + &:hover, &:focus, &:active { + background-color: #FFF; + } + } + + .navbar-toggle { + color: #666; + margin: 6px 0; + border-radius: 0; + position: absolute; + right: 2px; + + &:hover { + background-color: #EEE; + } + &.active { + color: #7f8fa4; + } + } + } + } + + .header-content { + height: $header-height; + + .title { + margin: 0; + overflow: hidden; + font-size: 19px; + line-height: $header-height; + font-weight: normal; + color: #4c4e54; + text-overflow: ellipsis; + vertical-align: top; + white-space: nowrap; + + a { + color: #4c4e54; + &:hover { + text-decoration: underline; + } + } + } + + .navbar-collapse { + float: right; + border-top: none; + } + } + + .search { + margin-right: 10px; + margin-left: 10px; + margin-top: ($header-height - 36) / 2; + + form { + margin: 0; + padding: 0; + } + + .search-input { + width: 220px; + background-image: image-url("icon-search.png"); + background-repeat: no-repeat; + background-position: 195px; + @include input-big; + + &:focus { + @include box-shadow(none); + outline: none; + border-color: #DDD; + background-color: #FFF; + } + } + } +} + +@mixin collapsed-header { + margin-left: $sidebar_collapsed_width; +} + +@media (max-width: $screen-md-max) { + .header-collapsed, .header-expanded { + @include collapsed-header; + } +} + +@media(min-width: $screen-md-max) { + .header-collapsed { + @include collapsed-header; + } + + .header-expanded { + margin-left: $sidebar_width; + } +} + +@media (max-width: $screen-xs-max) { + header .container-fluid { + font-size: 18px; + + .navbar-nav { + margin: 0px; + float: none !important; + + .visible-xs, .visable-sm { + display: table-cell !important; + } + } + + .navbar-collapse { + padding-left: 5px; + + li { + display: table-cell; + width: 1%; + + a { + margin-left: 8px !important; + } + } + } + } +} diff --git a/app/assets/stylesheets/framework/highlight.scss b/app/assets/stylesheets/framework/highlight.scss new file mode 100644 index 00000000000..2e13ee842e0 --- /dev/null +++ b/app/assets/stylesheets/framework/highlight.scss @@ -0,0 +1,70 @@ +.file-content.code { + border: none; + box-shadow: none; + margin: 0px; + padding: 0px; + table-layout: fixed; + + pre { + padding: 10px; + border: none; + border-radius: 0; + font-family: $monospace_font; + font-size: $code_font_size !important; + line-height: $code_line_height !important; + margin: 0; + overflow: auto; + overflow-y: hidden; + white-space: pre; + word-wrap: normal; + + code { + font-family: $monospace_font; + white-space: pre; + word-wrap: normal; + padding: 0; + + .line { + display: inline; + } + } + } + + .line-numbers { + padding: 10px; + text-align: right; + float: left; + + a { + font-family: $monospace_font; + display: block; + font-size: $code_font_size !important; + line-height: $code_line_height !important; + white-space: nowrap; + + i { + visibility: hidden; + @extend .pull-left; + } + + &:hover i { + visibility: visible; + } + } + } +} + +.note-text .code { + border: none; + box-shadow: none; + background: $background-color; + padding: 1em; + overflow-x: auto; + + code { + font-family: $monospace_font; + white-space: pre; + word-wrap: normal; + padding: 0; + } +} diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss new file mode 100644 index 00000000000..93377e45e70 --- /dev/null +++ b/app/assets/stylesheets/framework/issue_box.scss @@ -0,0 +1,35 @@ +/** + * Issue box for showing Open/Closed state: + * Used for Issue#show page, MergeRequest#show page etc + * + */ + +.issue-box { + @include border-radius(2px); + + display: inline-block; + padding: 10px $gl-padding; + font-weight: normal; + margin-right: 10px; + font-size: $gl-font-size; + + &.issue-box-closed { + background-color: $gl-danger; + color: #FFF; + } + + &.issue-box-merged { + background-color: $gl-primary; + color: #FFF; + } + + &.issue-box-open { + background-color: #019875; + color: #FFF; + } + + &.issue-box-expired { + background: #cea61b; + color: #FFF; + } +} diff --git a/app/assets/stylesheets/framework/jquery.scss b/app/assets/stylesheets/framework/jquery.scss new file mode 100644 index 00000000000..871b808bad4 --- /dev/null +++ b/app/assets/stylesheets/framework/jquery.scss @@ -0,0 +1,55 @@ +.ui-widget { + font-family: $regular_font; + font-size: $font-size-base; + + &.ui-datepicker-inline { + border: 1px solid #DDD; + padding: 10px; + width: 270px; + + .ui-datepicker-header { + background: #FFF; + border-color: #DDD; + } + + .ui-datepicker-calendar td a { + padding: 5px; + text-align: center; + } + } + + &.ui-autocomplete { + border-color: #DDD; + padding: 0; + margin-top: 2px; + z-index: 1001; + + .ui-menu-item a { + padding: 4px 10px; + } + } + + .ui-state-default { + border: 1px solid #FFF; + background: #FFF; + color: #777; + } + + .ui-state-highlight { + border: 1px solid #EEE; + background: #EEE; + } + + .ui-state-active { + border: 1px solid $gl-primary; + background: $gl-primary; + color: #FFF; + } + + .ui-state-hover, + .ui-state-focus { + border: 1px solid $hover; + background: $hover; + color: #333; + } +} diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss new file mode 100644 index 00000000000..c7b3b60e769 --- /dev/null +++ b/app/assets/stylesheets/framework/layout.scss @@ -0,0 +1,27 @@ +html { + overflow-y: scroll; + + &.touch .tooltip { display: none !important; } + + body { + padding-top: $header-height; + text-rendering: geometricPrecision; + } +} + +.container { + padding-top: 0; + z-index: 5; +} + +.container .content { + margin: 0 0; +} + +.navless-container { + margin-top: 30px; +} + +.container-limited { + max-width: $fixed-layout-width; +} diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss new file mode 100644 index 00000000000..3bfed8de772 --- /dev/null +++ b/app/assets/stylesheets/framework/lists.scss @@ -0,0 +1,125 @@ +/** + * Well styled list + * + */ +.well-list { + margin: 0; + padding: 0; + list-style: none; + + li { + padding: 10px 15px; + min-height: 20px; + border-bottom: 1px solid #eee; + border-bottom: 1px solid rgba(0, 0, 0, 0.05); + + &:after { + content: " "; + display: table; + clear: both; + } + + &.disabled { + color: #888; + } + + &.unstyled { + &:hover { + background: none; + } + } + + &.warning-row { + background-color: #fcf8e3; + border-color: #faebcc; + color: #8a6d3b; + } + + &.smoke { background-color: $background-color; } + + &:hover { + background: $hover; + } + + &:last-child { + border-bottom: none; + + &.bottom { + background: $background-color; + } + } + + .list-item-name { + float: left; + position: relative; + top: 3px; + } + + p { + padding-top: 1px; + margin: 0; + color: $gray-dark; + img { + position: relative; + top: 3px; + } + } + + .well-title { + font-size: $list-font-size; + line-height: 18px; + } + } +} + +ol, ul { + &.styled { + li { + padding: 2px; + } + } +} + +/** light list with border-bottom between li **/ +ul.bordered-list { + @include basic-list; + + &.top-list { + li:first-child { + padding-top: 0; + + h4, h5 { + margin-top: 0; + } + } + } +} + +li.task-list-item { + list-style-type: none; +} + +ul.content-list { + @include basic-list; + + margin: 0; + padding: 0; + + > li { + padding: $gl-padding; + border-color: #f1f2f4; + margin-left: -$gl-padding; + margin-right: -$gl-padding; + color: $gl-gray; + + .avatar { + margin-right: 15px; + } + + .controls { + padding-top: 10px; + float: right; + } + } +} + diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss new file mode 100644 index 00000000000..ed0333d2336 --- /dev/null +++ b/app/assets/stylesheets/framework/markdown_area.scss @@ -0,0 +1,115 @@ +.div-dropzone-wrapper { + .div-dropzone { + position: relative; + padding: 0; + border: 0; + margin-bottom: 5px; + + .div-dropzone-focus { + border-color: #66afe9 !important; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6) !important; + outline: 0 !important; + } + + .div-dropzone-hover { + position: absolute; + top: 50%; + left: 50%; + margin-top: -0.5em; + margin-left: -0.6em; + opacity: 0; + font-size: 50px; + transition: opacity 200ms ease-in-out; + pointer-events: none; + } + + .div-dropzone-spinner { + position: absolute; + top: 100%; + left: 100%; + margin-top: -1.1em; + margin-left: -1.1em; + opacity: 0; + font-size: 30px; + transition: opacity 200ms ease-in-out; + } + + .div-dropzone-icon { + display: block; + text-align: center; + font-size: inherit; + } + + .div-dropzone-progress { + position: absolute; + top: 7px; + left: -40px; + width: 35px; + font-size: 13px; + text-align: right; + } + + .dz-preview { + display: none; + } + } +} + +.div-dropzone-alert { + margin-top: 5px; + margin-bottom: 0; + transition: opacity 200ms ease-in-out; +} + +.md-area { + position: relative; +} + +.md-header { + ul { + float: left; + margin-bottom: 1px; + } +} + +.referenced-users { + padding: 10px 0; + color: #999; + margin-left: 10px; + margin-top: 1px; + margin-right: 130px; +} + +.md-preview-holder { + background: #FFF; + border: 1px solid #ddd; + min-height: 169px; + padding: 5px; + box-shadow: none; +} + +.new_note, +.edit_note, +.issuable-description, +.milestone-description, +.wiki-content, +.merge-request-form { + .nav-tabs { + margin-bottom: 0; + border: none; + + li a, + li.active a { + border: 1px solid #DDD; + } + } +} + +.markdown-area { + background: #FFF; + border: 1px solid #ddd; + min-height: 140px; + padding: 5px; + box-shadow: none; + width: 100%; +} diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss new file mode 100644 index 00000000000..c74a6d39824 --- /dev/null +++ b/app/assets/stylesheets/framework/mixins.scss @@ -0,0 +1,301 @@ +/** + * Generic mixins + */ + @mixin box-shadow($shadow) { + -webkit-box-shadow: $shadow; + -moz-box-shadow: $shadow; + -ms-box-shadow: $shadow; + -o-box-shadow: $shadow; + box-shadow: $shadow; +} + +@mixin border-radius($radius) { + -webkit-border-radius: $radius; + -moz-border-radius: $radius; + -ms-border-radius: $radius; + -o-border-radius: $radius; + border-radius: $radius; +} + +@mixin border-radius-left($radius) { + @include border-radius($radius 0 0 $radius) +} + +@mixin border-radius-right($radius) { + @include border-radius(0 0 $radius $radius) +} + +@mixin linear-gradient($from, $to) { + background-image: -webkit-gradient(linear, 0 0, 0 100%, from($from), to($to)); + background-image: -webkit-linear-gradient($from, $to); + background-image: -moz-linear-gradient($from, $to); + background-image: -ms-linear-gradient($from, $to); + background-image: -o-linear-gradient($from, $to); +} + +@mixin transition($transition) { + -webkit-transition: $transition; + -moz-transition: $transition; + -ms-transition: $transition; + -o-transition: $transition; + transition: $transition; +} + +/** + * Prefilled mixins + * Mixins with fixed values + */ + +@mixin shade { + @include box-shadow(0 0 3px #ddd); +} + +@mixin solid-shade { + @include box-shadow(0 0 0 3px #f1f1f1); +} + +@mixin md-typography { + color: $md-text-color; + + a { + color: $md-link-color; + } + + img { + max-width: 100%; + } + + *:first-child { + margin-top: 0; + } + + code { + font-family: $monospace_font; + white-space: pre; + word-wrap: normal; + padding: 1px 2px; + } + + kbd { + display: inline-block; + padding: 3px 5px; + font-size: 11px; + line-height: 10px; + color: #555; + vertical-align: middle; + background-color: #FCFCFC; + border-width: 1px; + border-style: solid; + border-color: #CCC #CCC #BBB; + border-image: none; + border-radius: 3px; + box-shadow: 0px -1px 0px #BBB inset; + } + + h1 { + font-size: 1.3em; + font-weight: 600; + margin: 24px 0 12px 0; + padding: 0 0 10px 0; + border-bottom: 1px solid #e7e9ed; + color: #313236; + } + + h2 { + font-size: 1.2em; + font-weight: 600; + margin: 24px 0 12px 0; + color: #313236; + } + + h3 { + margin: 24px 0 12px 0; + font-size: 1.25em; + } + + h4 { + margin: 24px 0 12px 0; + font-size: 1.1em; + } + + h5 { + margin: 24px 0 12px 0; + font-size: 1em; + } + + h6 { + margin: 24px 0 12px 0; + font-size: 0.90em; + } + + blockquote { + padding: 8px 21px; + margin: 12px 0 12px; + border-left: 3px solid #e7e9ed; + } + + blockquote p { + color: #7f8fa4 !important; + font-size: 15px; + line-height: 1.5; + } + + p { + color:#5c5d5e; + margin:6px 0 0 0; + } + + table { + @extend .table; + @extend .table-bordered; + margin: 12px 0 12px 0; + color: #5c5d5e; + th { + background: #f8fafc; + } + } + + pre { + margin: 12px 0 12px 0 !important; + background-color: #f8fafc !important; + font-size: 13px !important; + color: #5b6169 !important; + line-height: 1.6em !important; + @include border-radius(2px); + } + + p > code { + font-weight: inherit; + } + + + ul { + color: #5c5d5e; + } + + li { + line-height: 1.6em; + } + + a[href*="/uploads/"], a[href*="storage.googleapis.com/google-code-attachments/"] { + &:before { + margin-right: 4px; + + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + content: "\f0c6"; + } + + &:hover:before { + text-decoration: none; + } + } +} + + +@mixin str-truncated($max_width: 82%) { + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: top; + white-space: nowrap; + max-width: $max_width; +} + +/* + * Base mixin for lists in GitLab + */ +@mixin basic-list { + margin: 5px 0px; + padding: 0px; + list-style: none; + + > li { + padding: 10px 0; + border-bottom: 1px solid #EEE; + overflow: hidden; + display: block; + margin: 0px; + + &:last-child { + border-bottom: none; + } + + &.active { + background: #f9f9f9; + a { + font-weight: 600; + } + } + + &.hide { + display: none; + } + + &.light { + a { + color: $gl-gray; + } + } + } +} + +@mixin input-big { + height: 36px; + padding: 5px 10px; + font-size: 16px; + line-height: 24px; + color: #7f8fa4; + background-color: #fff; + border-color: #e7e9ed; +} + +@mixin btn-big { + height: 36px; + padding: 5px 10px; + font-size: 16px; + line-height: 24px; +} + +@mixin nav-menu { + padding: 0; + margin: 0; + list-style: none; + margin-top: 5px; + height: 56px; + + li { + display: inline-block; + + a { + padding: 14px; + font-size: 17px; + line-height: 28px; + color: #7f8fa4; + border-bottom: 2px solid transparent; + + &:hover, &:active, &:focus { + text-decoration: none; + } + } + + &.active a { + color: #4c4e54; + border-bottom: 2px solid #1cacfc; + } + + .badge { + font-weight: normal; + background-color: #fff; + background-color: #eee; + color: #78a; + } + } +} + +.fa-align { + top: 20px; + position: relative; +} diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss new file mode 100644 index 00000000000..36ae126f865 --- /dev/null +++ b/app/assets/stylesheets/framework/mobile.scss @@ -0,0 +1,139 @@ +/** Common mobile (screen XS, SM) styles **/ +@media (max-width: $screen-xs-max) { + .container .content { + margin-top: 20px; + } + + .container-fluid { + padding-left: 5px; + padding-right: 5px; + } + + .nav.nav-tabs > li > a { + padding: 10px; + font-size: 12px; + margin-right: 3px; + + .badge { + display: none; + } + } + + .referenced-users { + margin-right: 0; + } + + .issues-filters, + .dash-projects-filters, + .check-all-holder { + display: none; + } + + .rss-btn { + display: none !important; + } + + .project-home-links { + display: none; + } + + .project-avatar { + display: none; + } + + .project-home-panel { + padding-left: 0 !important; + + .project-avatar { + display: block; + } + + .project-home-desc { + font-size: 21px; + } + + .project-repo-buttons, + .git-clone-holder { + display: none; + } + } + + .project-stats { + display: none; + } + + .container .title { + padding-left: 15px !important; + } + + .issue-info, .merge-request-info { + display: none; + } + + .issue-details { + .creator, + .page-title .btn-close { + display: none; + } + } + + %ul.notes .note-role, .note-actions { + display: none; + } + + .center-top-menu { + height: 45px; + + li a { + font-size: 14px; + padding: 19px 10px; + } + } + + .projects-search-form { + margin: 0 -5px !important; + + .btn { + display: none; + } + } +} + +@media (max-width: $screen-sm-max) { + .issues-filters { + .milestone-filter, .labels-filter { + display: none; + } + } + + .page-title { + .note_created_ago, .new-issue-link { + display: none; + } + } + + .issue_edited_ago, .note_edited_ago { + display: none; + } + + aside { + display: none; + } + + .show-aside { + display: block !important; + } +} + +.show-aside { + display: none; + position: fixed; + right: 0px; + top: 30%; + padding: 5px 15px; + background: #EEE; + font-size: 20px; + color: #777; + z-index: 100; + @include box-shadow(0 1px 2px #DDD); +} diff --git a/app/assets/stylesheets/framework/pagination.scss b/app/assets/stylesheets/framework/pagination.scss new file mode 100644 index 00000000000..6677f94dafd --- /dev/null +++ b/app/assets/stylesheets/framework/pagination.scss @@ -0,0 +1,34 @@ +.gl-pagination { + border-top: 1px solid $border-color; + background-color: $background-color; + margin: -$gl-padding; + margin-top: 0; + + .pagination { + padding: 0; + margin: 0; + display: block; + + li.first, + li.last, + li.next, + li.prev { + > a { + color: $link-color; + + &:hover { + color: #fff; + } + } + } + + li > a, + li > span { + border: none; + margin: 0; + @include border-radius(0 !important); + padding: 13px 19px; + border-right: 1px solid $border-color; + } + } +} diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss new file mode 100644 index 00000000000..cba621635b6 --- /dev/null +++ b/app/assets/stylesheets/framework/selects.scss @@ -0,0 +1,146 @@ +/** Select2 selectbox style override **/ +.select2-container, .select2-container.select2-drop-above { + .select2-choice { + background: #FFF; + border-color: #DDD; + height: 42px; + padding: 8px $gl-padding; + font-size: $gl-font-size; + line-height: 1.42857143; + + @include border-radius(2px); + + .select2-arrow { + background: #FFF; + border-left: none; + padding-top: 5px; + } + } +} + +.select2-container .select2-choice, .select2-container.select2-drop-above .select2-choice{ + color: #7f8fa4; + border: 1px solid #e7e9ed; +} + +.select2-drop { + @include box-shadow(rgba(76, 86, 103, 0.247059) 0px 0px 1px 0px, rgba(31, 37, 50, 0.317647) 0px 2px 18px 0px); + @include border-radius (0px); + + padding: 16px; + border: none !important; +} + +.select2-results .select2-result-label { + padding: 16px; +} + +.select2-drop{ + color: #7f8fa4; +} + +.select2-highlighted { + background: #3084bb !important; +} + +.select2-results li.select2-result-with-children > .select2-result-label { + font-weight: 600; + color: #313236; +} + + +.select2-container-multi .select2-choices { + @include border-radius(2px); + border-color: #CCC; +} + +.select2-container-multi .select2-choices .select2-search-field input { + padding: 8px 14px; + font-size: 13px; + line-height: 18px; + height: auto; +} + +.select2-drop-active { + border: 1px solid #BBB !important; + margin-top: 4px; + font-size: 13px; + + &.select2-drop-above { + margin-bottom: 8px; + } + + .select2-search input { + background: #fafafa; + border-color: #DDD; + } + + .select2-results { + max-height: 350px; + .select2-highlighted { + background: $gl-primary; + } + } +} + +.select2-container { + width: 100% !important; +} + +/** Branch/tag selector **/ +.project-refs-form .select2-container { + width: 160px !important; +} + +.ajax-users-dropdown, .ajax-project-users-dropdown { + .select2-search { + padding-top: 2px; + } +} + +.ajax-users-select { + width: 400px; + + &.input-large { + width: 210px; + } + + &.input-clamp { + max-width: 100%; + } +} + +.group-result { + .group-image { + float: left; + } + .group-name { + font-weight: bold; + } + .group-path { + color: #999; + } +} + +.user-result { + .user-image { + float: left; + } + .user-name { + } +} + +.namespace-result { + .namespace-kind { + color: #AAA; + font-weight: normal; + } + .namespace-path { + margin-left: 10px; + font-weight: bolder; + } +} + +.ajax-users-dropdown { + min-width: 250px !important; +} diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss new file mode 100644 index 00000000000..c5ea3aca7ca --- /dev/null +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -0,0 +1,267 @@ +.page-with-sidebar { + .sidebar-wrapper { + position: fixed; + top: 0; + bottom: 0; + overflow-y: auto; + overflow-x: hidden; + left: 0; + height: 100%; + transition-duration: .3s; + } +} + +.sidebar-wrapper { + z-index: 99; + background: $background-color; + transition-duration: .3s; +} + +.content-wrapper { + min-height: 100vh; + width: 100%; + padding: 20px; + background: #EAEBEC; + + .container-fluid { + background: #FFF; + padding: $gl-padding; + min-height: 90vh; + + &.container-blank { + background: none; + padding: 0; + border: none; + } + } +} + +.nav-sidebar { + margin-top: 14 + $header-height; + margin-bottom: 100px; + transition-duration: .3s; + list-style: none; + overflow: hidden; + + &.navbar-collapse { + padding: 0px !important; + } + + li { + width: $sidebar_width; + + &.separate-item { + padding-top: 10px; + margin-top: 10px; + } + + a { + padding: 7px 15px; + font-size: $gl-font-size; + line-height: 24px; + color: $gray; + display: block; + text-decoration: none; + padding-left: 22px; + font-weight: normal; + + &:hover { + text-decoration: none; + } + + &:active, &:focus { + text-decoration: none; + } + + i { + width: 16px; + color: $gray-light; + margin-right: 13px; + } + + .count { + float: right; + background: #eee; + padding: 0px 8px; + @include border-radius(6px); + } + } + } +} + +.sidebar-subnav { + margin-left: 0px; + padding-left: 0px; + + li { + list-style: none; + } +} + +@mixin expanded-sidebar { + padding-left: $sidebar_width; + transition-duration: .3s; + + .sidebar-wrapper { + width: $sidebar_width; + + .nav-sidebar { + width: $sidebar_width; + } + + .nav-sidebar li a{ + width: 230px; + + &.back-link { + i { + visibility: hidden; + } + } + } + } +} + +@mixin folded-sidebar { + padding-left: 60px; + transition-duration: .3s; + + .sidebar-wrapper { + width: $sidebar_collapsed_width; + + .header-logo { + width: $sidebar_collapsed_width; + + a { + padding-left: 12px; + + .gitlab-text-container { + display: none; + } + } + } + + .nav-sidebar { + width: $sidebar_collapsed_width; + + li a { + span { + display: none; + } + } + } + + .collapse-nav a { + width: $sidebar_collapsed_width; + } + + .sidebar-user { + padding-left: 12px; + width: $sidebar_collapsed_width; + + .username { + display: none; + } + } + } +} + +.collapse-nav a { + width: $sidebar_width; + position: fixed; + bottom: 0; + left: 0; + font-size: 13px; + background: transparent; + height: 40px; + text-align: center; + line-height: 40px; + transition-duration: .3s; +} + +.collapse-nav a:hover { + text-decoration: none; + background: #f2f6f7; +} + +@media (max-width: $screen-md-max) { + .page-sidebar-collapsed { + @include folded-sidebar; + } + + .page-sidebar-expanded { + @include folded-sidebar; + } + + .collapse-nav { + display: none; + } +} + +@media(min-width: $screen-md-max) { + .page-sidebar-collapsed { + @include folded-sidebar; + } + + .page-sidebar-expanded { + @include expanded-sidebar; + } +} + +.sidebar-user { + padding: 9px 22px; + position: fixed; + bottom: 40px; + width: $sidebar_width; + overflow: hidden; + transition-duration: .3s; + + .username { + margin-left: 10px; + width: $sidebar_width - 2 * 10px; + font-size: 16px; + line-height: 34px; + } +} + +.sidebar-wrapper { + .header-logo { + border-bottom: 1px solid transparent; + float: left; + height: $header-height; + width: $sidebar_width; + overflow: hidden; + transition-duration: .3s; + + a { + float: left; + height: $header-height; + width: 100%; + padding: 10px 22px; + overflow: hidden; + + img { + width: 36px; + height: 36px; + float: left; + } + + .gitlab-text-container { + width: 230px; + + h3 { + width: 158px; + float: left; + margin: 0; + margin-left: 14px; + font-size: 19px; + line-height: 41px; + font-weight: normal; + } + } + } + + &:hover { + background-color: #EEE; + } + } +} diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss new file mode 100644 index 00000000000..a66e45577de --- /dev/null +++ b/app/assets/stylesheets/framework/tables.scss @@ -0,0 +1,20 @@ +table { + &.table { + tr { + td, th { + padding: 8px 10px; + line-height: 20px; + vertical-align: middle; + } + th { + font-weight: normal; + font-size: 15px; + border-bottom: 1px solid $border-color !important; + } + td { + border-color: #F1F1F1 !important; + border-bottom: 1px solid; + } + } + } +} diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss new file mode 100644 index 00000000000..bf21d7fce76 --- /dev/null +++ b/app/assets/stylesheets/framework/timeline.scss @@ -0,0 +1,70 @@ +.timeline { + @include basic-list; + + margin: 0; + padding: 0; + + .timeline-entry { + padding: $gl-padding; + border-color: #f1f2f4; + margin-left: -$gl-padding; + margin-right: -$gl-padding; + color: $gl-gray; + border-bottom: 1px solid #ECEEF1; + border-right: 1px solid #ECEEF1; + + &:last-child { + border-bottom: none; + } + + .avatar { + margin-right: 15px; + } + + .controls { + padding-top: 10px; + float: right; + } + } + + .note-text { + p:last-child { + margin-bottom: 0; + } + } + + .system-note { + .note-text { + color: $gl-gray !important; + } + } + + .diff-file { + border: 1px solid $border-color; + border-bottom: none; + margin-left: 0; + margin-right: 0; + } +} + +@media (max-width: $screen-xs-max) { + .timeline { + &:before { + background: none; + } + .timeline-entry .timeline-entry-inner { + .timeline-icon { + display: none; + } + + .timeline-content { + margin-left: 0; + } + } + } +} + +.discussion .timeline-entry { + margin: 0; + border-right: none; +} diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss new file mode 100644 index 00000000000..6a3cb49baae --- /dev/null +++ b/app/assets/stylesheets/framework/typography.scss @@ -0,0 +1,130 @@ +/** + * Headers + * + */ +body { + text-rendering:optimizeLegibility; + -webkit-text-shadow: rgba(255,255,255,0.01) 0 0 1px; +} + +.page-title { + margin-top: 0px; + line-height: 1.3; + font-size: 1.25em; + font-weight: 600; +} + +.page-title-empty { + margin-top: 0px; + line-height: 1.3; + font-size: 1.25em; + font-weight: 600; + margin: 12px 7px 12px 7px; +} + +h1, h2, h3, h4, h5, h6 { + color: $gl-header-color; + font-weight: 500; +} + +/** CODE **/ +pre { + font-family: $monospace_font; + + &.dark { + background: #333; + color: $background-color; + } + + &.plain-readme { + background: none; + border: none; + padding: 0; + margin: 0; + font-size: 14px; + } +} + +.monospace { + font-family: $monospace_font; +} + +code { + &.key-fingerprint { + background: $body-bg; + color: $text-color; + } +} + +a > code { + color: $link-color; +} + +/** + * Wiki typography + * + */ +.wiki { + @include md-typography; + + word-wrap: break-word; + padding: 7px; + + /* Link to current header. */ + h1, h2, h3, h4, h5, h6 { + position: relative; + + a.anchor { + // Setting `display: none` would prevent the anchor being scrolled to, so + // instead we set the height to 0 and it gets updated on hover. + height: 0; + } + + &:hover > a.anchor { + $size: 16px; + position: absolute; + right: 100%; + top: 50%; + margin-top: -$size/2; + margin-right: 0px; + padding-right: 20px; + display: inline-block; + width: $size; + height: $size; + background-image: image-url("icon-link.png"); + background-size: contain; + background-repeat: no-repeat; + } + } + + ul,ol { + padding: 0; + margin: 6px 0 6px 18px !important; + } + ol { + color: #5c5d5e; + } +} + +.md-area { + @include md-typography; +} + +.md { + @include md-typography; +} + +/** + * Textareas intended for GFM + * + */ +textarea.js-gfm-input { + font-family: $monospace_font; +} + +.md-preview { +} + +.strikethrough { + text-decoration: line-through; +} \ No newline at end of file diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss new file mode 100644 index 00000000000..eb9a2966389 --- /dev/null +++ b/app/assets/stylesheets/framework/variables.scss @@ -0,0 +1,98 @@ +$hover: #FFFAF1; +$gl-text-color: #54565B; +$gl-text-green: #4A2; +$gl-text-red: #D12F19; +$gl-text-orange: #D90; +$gl-header-color: #4c4e54; +$gl-link-color: #333c48; +$md-text-color: #444; +$md-link-color: #3084bb; +$nprogress-color: #c0392b; +$gl-font-size: 15px; +$list-font-size: 15px; +$sidebar_collapsed_width: 62px; +$sidebar_width: 230px; +$avatar_radius: 50%; +$code_font_size: 13px; +$code_line_height: 1.5; +$border-color: #dce0e6; +$background-color: #F7F8FA; +$header-height: 58px; +$fixed-layout-width: 1200px; +$gl-gray: #7f8fa4; +$gl-padding: 16px; +$gl-avatar-size: 46px; + +/* + * Color schema + */ + +$white-light: #FFFFFF; +$white-normal: #DCE0E5; +$white-dark: #E4E7ED; + +$gray-light: #F0F2F5; +$gray-normal: #DCE0E5; +$gray-dark: #E4E7ED; + +$green-light: #31AF64; +$green-normal: #2FAA60; +$green-dark: #2CA05B; + +$blue-light: #2EA8E5; +$blue-normal: #2D9FD8; +$blue-dark: #2897CE; + +$orange-light: #FC6443; +$orange-normal: #E75E40; +$orange-dark: #CE5237; + +$red-light: #F43263; +$red-normal: #E52C5A; +$red-dark: #D22852; + +$border-white-light: #E3E7EC; +$border-white-normal: #D6DAE2; +$border-white-dark: #C6CACF; + +$border-gray-light: #DCE0E5; +$border-gray-normal: #D6DAE2; +$border-gray-dark: #C6CACF; + +$border-green-light: #2FAA60; +$border-green-normal: #2CA05B; +$border-green-dark: #279654; + +$border-blue-light: #2D9FD8; +$border-blue-normal: #2897CE; +$border-blue-dark: #258DC1; + +$border-orange-light: #ED5C3D; +$border-orange-normal: #CE5237; +$border-orange-dark: #C14E35; + +$border-red-light: #E52C5A; +$border-red-normal: #D22852; +$border-red-dark: #CA264F; + + +/* + * State colors: + */ +$gl-primary: $blue-normal; +$gl-success: $green-normal; +$gl-info: $blue-normal; +$gl-warning: $orange-normal; +$gl-danger: $red-normal; + +/* + * Commit Diff Colors + */ +$added: #63c363; +$deleted: #f77; + +/* + * Fonts + */ +$monospace_font: 'Menlo', 'Liberation Mono', 'Consolas', 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace; +$regular_font: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif; diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss new file mode 100644 index 00000000000..32e2c020e06 --- /dev/null +++ b/app/assets/stylesheets/framework/zen.scss @@ -0,0 +1,86 @@ +.zennable { + .zen-toggle-comment { + display: none; + } + + .zen-enter-link { + color: $gl-gray; + position: absolute; + top: 0px; + right: 4px; + line-height: 40px; + } + + .zen-leave-link { + display: none; + color: $gl-text-color; + position: absolute; + top: 10px; + right: 10px; + padding: 5px; + font-size: 36px; + + &:hover { + color: #111; + } + } + + // Hide the Enter link when we're in Zen mode + input:checked ~ .zen-backdrop .zen-enter-link { + display: none; + } + + // Show the Leave link when we're in Zen mode + input:checked ~ .zen-backdrop .zen-leave-link { + display: block; + position: absolute; + top: 0; + } + + input:checked ~ .zen-backdrop { + background-color: white; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 1031; + + textarea { + border: none; + box-shadow: none; + border-radius: 0; + color: #000; + font-size: 20px; + line-height: 26px; + padding: 30px; + display: block; + outline: none; + resize: none; + height: 100vh; + max-width: 900px; + margin: 0 auto; + } + } + + // Make the color of the placeholder text in the Zenned-out textarea darker, + // so it becomes visible + + input:checked ~ .zen-backdrop textarea::-webkit-input-placeholder { + color: #A8A8A8; + } + + input:checked ~ .zen-backdrop textarea:-moz-placeholder { + color: #A8A8A8; + opacity: 1; + } + + input:checked ~ .zen-backdrop textarea::-moz-placeholder { + color: #A8A8A8; + opacity: 1; + } + + input:checked ~ .zen-backdrop textarea:-ms-input-placeholder { + color: #A8A8A8; + } +} diff --git a/app/assets/stylesheets/generic/avatar.scss b/app/assets/stylesheets/generic/avatar.scss deleted file mode 100644 index 36e582d4854..00000000000 --- a/app/assets/stylesheets/generic/avatar.scss +++ /dev/null @@ -1,49 +0,0 @@ -.avatar { - float: left; - margin-right: 12px; - width: 40px; - height: 40px; - padding: 0; - @include border-radius($avatar_radius); - - &.avatar-inline { - float: none; - margin-left: 4px; - margin-bottom: 2px; - - &.s16 { margin-right: 4px; } - &.s24 { margin-right: 4px; } - } - - &.group-avatar, &.project-avatar, &.avatar-tile { - @include border-radius(0px); - } - - &.s16 { width: 16px; height: 16px; margin-right: 6px; } - &.s24 { width: 24px; height: 24px; margin-right: 8px; } - &.s26 { width: 26px; height: 26px; margin-right: 8px; } - &.s32 { width: 32px; height: 32px; margin-right: 10px; } - &.s36 { width: 36px; height: 36px; margin-right: 10px; } - &.s46 { width: 46px; height: 46px; margin-right: 15px; } - &.s48 { width: 48px; height: 48px; margin-right: 10px; } - &.s60 { width: 60px; height: 60px; margin-right: 12px; } - &.s90 { width: 90px; height: 90px; margin-right: 15px; } - &.s110 { width: 110px; height: 110px; margin-right: 15px; } - &.s140 { width: 140px; height: 140px; margin-right: 20px; } - &.s160 { width: 160px; height: 160px; margin-right: 20px; } -} - -.identicon { - text-align: center; - vertical-align: top; - - &.s16 { font-size: 12px; line-height: 1.33; } - &.s24 { font-size: 14px; line-height: 1.8; } - &.s26 { font-size: 20px; line-height: 1.33; } - &.s32 { font-size: 22px; line-height: 32px; } - &.s60 { font-size: 32px; line-height: 60px; } - &.s90 { font-size: 36px; line-height: 90px; } - &.s110 { font-size: 40px; line-height: 112px; font-weight: 300; } - &.s140 { font-size: 72px; line-height: 140px; } - &.s160 { font-size: 96px; line-height: 160px; } -} diff --git a/app/assets/stylesheets/generic/blocks.scss b/app/assets/stylesheets/generic/blocks.scss deleted file mode 100644 index 6ce34b5c3e8..00000000000 --- a/app/assets/stylesheets/generic/blocks.scss +++ /dev/null @@ -1,62 +0,0 @@ -.light-well { - background-color: #f8fafc; - padding: 15px; -} - -.centered-light-block { - text-align: center; - color: $gl-gray; - margin: 20px; -} - -.nothing-here-block { - text-align: center; - padding: 20px; - color: $gl-gray; - font-weight: normal; - font-size: 16px; - line-height: 36px; -} - -.gray-content-block { - margin: -$gl-padding; - background-color: $background-color; - padding: $gl-padding; - margin-bottom: 0px; - border-top: 1px solid $border-color; - border-bottom: 1px solid $border-color; - color: $gl-gray; - - &.top-block { - border-top: none; - } - - &.middle-block { - margin-top: 0; - margin-bottom: 0; - } - - &.clear-block { - margin-bottom: $gl-padding - 1px; - padding-bottom: $gl-padding; - } - - &.second-block { - margin-top: -1px; - margin-bottom: 0; - } - - &.footer-block { - margin-top: 0; - border-bottom: none; - margin-bottom: -$gl-padding; - } - - .title { - color: $gl-text-color; - } - - .oneline { - line-height: 42px; - } -} diff --git a/app/assets/stylesheets/generic/buttons.scss b/app/assets/stylesheets/generic/buttons.scss deleted file mode 100644 index 11acbe3adfa..00000000000 --- a/app/assets/stylesheets/generic/buttons.scss +++ /dev/null @@ -1,163 +0,0 @@ -@mixin btn-default { - @include border-radius(2px); - border-width: 1px; - border-style: solid; - text-transform: uppercase; - font-size: 13px; - font-weight: 600; - line-height: 18px; - padding: 11px 16px; - letter-spacing: .4px; - - &:focus, - &:active { - outline: none; - @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); - } -} - -@mixin btn-middle { - @include btn-default; - @include border-radius(2px); - padding: 11px 24px; -} - -@mixin btn-color($light, $border-light, $normal, $border-normal, $dark, $border-dark, $color) { - background-color: $light; - border-color: $border-light; - color: $color; - - &:hover, - &:focus { - background-color: $normal; - border-color: $border-normal; - color: $color; - } - - &:active { - @include box-shadow (inset 0 0 4px rgba(0, 0, 0, 0.12)); - - background-color: $dark; - border-color: $border-dark; - color: $color; - } -} - -@mixin btn-green { - @include btn-color($green-light, $border-green-light, $green-normal, $border-green-normal, $green-dark, $border-green-dark, #FFFFFF); -} - -@mixin btn-blue { - @include btn-color($blue-light, $border-blue-light, $blue-normal, $border-blue-normal, $blue-dark, $border-blue-dark, #FFFFFF); -} - -@mixin btn-orange { - @include btn-color($orange-light, $border-orange-light, $orange-normal, $border-orange-normal, $orange-dark, $border-orange-dark, #FFFFFF); -} - -@mixin btn-red { - @include btn-color($red-light, $border-red-light, $red-normal, $border-red-normal, $red-dark, $border-red-dark, #FFFFFF); -} - -@mixin btn-gray { - @include btn-color($gray-light, $border-gray-light, $gray-normal, $border-gray-normal, $gray-dark, $border-gray-dark, #313236); -} - -@mixin btn-white { - @include btn-color($white-light, $border-white-light, $white-normal, $border-white-normal, $white-dark, $border-white-dark, #313236); -} - -.btn { - @include btn-default; - @include btn-white; - - &.btn-success, - &.btn-new, - &.btn-create, - &.btn-save, - &.btn-green { - @include btn-green; - } - - &.btn-gray { - @include btn-gray; - } - - &.btn-primary, - &.btn-info { - @include btn-blue; - } - - &.btn-warning { - @include btn-orange; - } - - &.btn-danger, - &.btn-remove, - &.btn-red { - @include btn-red; - } - - &.btn-cancel { - float: right; - } - - &.btn-close { - color: $gl-danger; - border-color: $gl-danger; - &:hover { - color: #B94A48; - } - } - - &.btn-reopen { - color: $gl-success; - border-color: $gl-success; - &:hover { - color: #468847; - } - } - - &.btn-grouped { - margin-right: 7px; - float: left; - &:last-child { - margin-right: 0px; - } - } -} - -.btn-block { - width: 100%; - margin: 0; - margin-bottom: 15px; - &.btn { - padding: 6px 0; - } -} - -.btn-group { - &.btn-grouped { - margin-right: 7px; - float: left; - &:last-child { - margin-right: 0px; - } - } -} - -.btn-group-next { - .btn { - padding: 9px 0px; - font-size: 15px; - color: #7f8fa4; - border-color: #e7e9ed; - width: 140px; - - &.active { - border-color: $gl-info; - background: $gl-info; - color: #fff; - } - } -} diff --git a/app/assets/stylesheets/generic/calendar.scss b/app/assets/stylesheets/generic/calendar.scss deleted file mode 100644 index a36fefe22c5..00000000000 --- a/app/assets/stylesheets/generic/calendar.scss +++ /dev/null @@ -1,90 +0,0 @@ -.user-calendar-activities { - .calendar_onclick_hr { - padding: 0; - margin: 10px 0; - } - - .str-truncated { - max-width: 70%; - } - - .text-expander { - background: #eee; - color: #555; - padding: 0 5px; - cursor: pointer; - margin-left: 4px; - &:hover { - background-color: #ddd; - } - } -} -/** -* This overwrites the default values of the cal-heatmap gem -*/ -.calendar { - .qi { - background-color: #999; - fill: #fff; - } - - .q1 { - background-color: #dae289; - fill: #ededed; - } - - .q2 { - background-color: #cedb9c; - fill: #ACD5F2; - } - - .q3 { - background-color: #b5cf6b; - fill: #7FA8D1; - } - - .q4 { - background-color: #637939; - fill: #49729B; - } - - .q5 { - background-color: #3b6427; - fill: #254E77; - } - - .domain-background { - fill: none; - shape-rendering: crispedges; - } - - .ch-tooltip { - position: absolute; - display: none; - margin-top: 22px; - margin-left: 1px; - font-size: 13px; - padding: 3px; - font-weight: 550; - background-color: #222; - span { - position: absolute; - width: 200px; - text-align: center; - visibility: hidden; - border-radius: 10px; - &:after { - content: ''; - position: absolute; - top: 100%; - left: 50%; - margin-left: -8px; - width: 0; - height: 0; - border-top: 8px solid #000000; - border-right: 8px solid transparent; - border-left: 8px solid transparent; - } - } - } -} diff --git a/app/assets/stylesheets/generic/callout.scss b/app/assets/stylesheets/generic/callout.scss deleted file mode 100644 index f1699d21c9b..00000000000 --- a/app/assets/stylesheets/generic/callout.scss +++ /dev/null @@ -1,45 +0,0 @@ -/* - * Callouts from Bootstrap3 docs - * - * Not quite alerts, but custom and helpful notes for folks reading the docs. - * Requires a base and modifier class. - */ - -/* Common styles for all types */ -.bs-callout { - margin: 20px 0; - padding: 20px; - border-left: 3px solid #eee; - color: #666; - background: #f9f9f9; -} -.bs-callout h4 { - margin-top: 0; - margin-bottom: 5px; -} -.bs-callout p:last-child { - margin-bottom: 0; -} - -/* Variations */ -.bs-callout-danger { - background-color: #fdf7f7; - border-color: #eed3d7; - color: #b94a48; -} -.bs-callout-warning { - background-color: #faf8f0; - border-color: #faebcc; - color: #8a6d3b; -} -.bs-callout-info { - background-color: #f4f8fa; - border-color: #bce8f1; - color: #34789a; -} -.bs-callout-success { - background-color: #dff0d8; - border-color: #5cA64d; - color: #3c763d; -} - diff --git a/app/assets/stylesheets/generic/common.scss b/app/assets/stylesheets/generic/common.scss deleted file mode 100644 index 03919f15f1f..00000000000 --- a/app/assets/stylesheets/generic/common.scss +++ /dev/null @@ -1,404 +0,0 @@ -/** COLORS **/ -.cgray { color: $gl-gray; } -.clgray { color: #BBB } -.cred { color: $gl-text-red; } -.cgreen { color: $gl-text-green; } -.cdark { color: #444 } - -/** COMMON CLASSES **/ -.prepend-top-10 { margin-top:10px } -.prepend-top-default { margin-top: $gl-padding; } -.prepend-top-20 { margin-top:20px } -.prepend-left-10 { margin-left:10px } -.prepend-left-20 { margin-left:20px } -.append-right-10 { margin-right:10px } -.append-right-20 { margin-right:20px } -.append-bottom-10 { margin-bottom:10px } -.append-bottom-15 { margin-bottom:15px } -.append-bottom-20 { margin-bottom:20px } -.inline { display: inline-block } -.center { text-align: center } - -.underlined-link { text-decoration: underline; } -.hint { font-style: italic; color: #999; } -.light { color: $gl-gray; } - -.slead { - color: $gl-gray; - font-size: 15px; - margin-bottom: 12px; - font-weight: normal; - line-height: 24px; -} - -.tab-content { - overflow: visible; -} - -pre { - &.clean { - background: none; - border: none; - margin: 0; - padding: 0; - } - - &.well-pre { - border: 1px solid #EEE; - background: #f9f9f9; - border-radius: 0; - color: #555; - } -} - -.dropdown-menu > li > a { - text-shadow: none; -} - -.dropdown-menu-align-right { - left: auto; - right: 0px; -} - -.dropdown-menu > li > a:hover, -.dropdown-menu > li > a:focus { - background: $gl-primary; - color: #FFF -} - -.str-truncated { - @include str-truncated; -} - -/** FLASH message **/ -.author_link { - color: $gl-link-color; -} - -.back-link { - font-size: 14px; -} - -table a code { - position: relative; - top: -2px; - margin-right: 3px; -} - -.loading { - margin: 20px auto; - height: 40px; - color: #555; - font-size: 32px; - text-align: center; -} - -span.update-author { - display: block; - color: #999; - font-weight: normal; - font-style: italic; - strong { - font-weight: bold; - font-style: normal; - } -} - -.user-mention { - color: #2FA0BB; - font-weight: bold; -} - -.field_with_errors { - display: inline; -} - -.line_holder { - &:hover { - td { - background: #FFFFCF !important; - } - } -} - -p.time { - color: #999; - font-size: 90%; - margin: 30px 3px 3px 2px; -} - -.highlight { - text-shadow: none; -} - -.thin_area{ - height: 150px; -} - -// Fixes alignment on notes. -.new_note { - label { - text-align: left; - } -} - -// Fix issue with notes & lists creating a bunch of bottom borders. -li.note { - img { max-width:100% } - .note-title { - li { - border-bottom:none !important; - } - } -} - -.markdown { - img { - max-width: 100%; - } -} - -.wiki_content code, .readme code{ - background-color: inherit; -} - -.project_member_show { - td:first-child { - color: #aaa; - } -} - -.rss-icon { - img { - width: 24px; - vertical-align: top; - } - - strong { - line-height: 24px; - } -} - -.show-suppressed-diff, -.show-all-commits { - cursor: pointer; -} - -.git_error_tips { - @extend .col-md-6; - text-align: left; - margin-top: 40px; - pre { - background: white; - border: none; - font-size: 12px; - } -} - -.error-message { - padding: 10px; - background: #C67; - margin: 0; - color: #FFF; - - a { - color: #fff; - text-decoration: underline; - } -} - -.browser-alert { - padding: 10px; - text-align: center; - background: #C67; - color: #fff; - font-weight: bold; - a { - color: #fff; - text-decoration: underline; - } -} - -.warning_message { - border-left: 4px solid #ed9; - color: #b90; - padding: 10px; - margin-bottom: 10px; - background: #ffffe6; - padding-left: 20px; - - &.centered { - text-align: center; - } -} - -.gitlab-promo { - a { - color: #aaa; - margin-right: 30px; - } -} - -.milestone { - &.milestone-closed { - background: #f9f9f9; - } - .progress { - margin-bottom: 0; - margin-top: 4px; - } -} - -.control-group { - .controls { - span { - &.descr { - position: relative; - top: 2px; - left: 5px; - color: #666; - } - } - } -} - -img.emoji { - height: 20px; - vertical-align: middle; - width: 20px; -} - -.chart { - overflow: hidden; - height: 220px; -} - -.description-block { - @extend .light-well; - @extend .light; - margin-bottom: 10px; -} - -table { - td.permission-x { - background: #D9EDF7 !important; - text-align: center; - } -} - -.dashboard-intro-icon { - float: left; - text-align: center; - font-size: 32px; - color: #AAA; - width: 60px; -} - -.dashboard-intro-text { - display: inline-block; - margin-left: -60px; - padding-left: 60px; - width: 100%; -} - -.btn-sign-in { - margin-top: 8px; - text-shadow: none; -} - -.side-filters { - fieldset { - margin-bottom: 15px; - } -} - -.wiki .highlight, .note-body .highlight { - margin: 12px 0 12px 0; -} - -.wiki .code { - overflow-x: auto; -} - -.footer-links { - margin-bottom: 20px; - a { - margin-right: 15px; - } -} - -.search_box { - @extend .well; - text-align: center; -} - -.task-status { - margin-left: 10px; -} - -#nprogress .spinner { - top: 15px !important; - right: 10px !important; -} - -.header-with-avatar { - h3 { - margin: 0; - font-weight: bold; - } - - .username { - font-size: 18px; - color: #666; - margin-top: 8px; - } - - .description { - font-size: $gl-font-size; - color: #666; - margin-top: 8px; - } -} - -.profiler-results { - top: 73px !important; - - .profiler-button, - .profiler-controls { - border-color: #EEE !important; - } -} - -.center-top-menu { - @include nav-menu; - text-align: center; - margin-top: 5px; - margin-bottom: $gl-padding; - height: 56px; - margin-top: -$gl-padding; - padding-top: $gl-padding; - - &.no-bottom { - margin-bottom: 0; - } - - &.no-top { - margin-top: 0; - } -} - -.dropzone .dz-preview .dz-progress { - border-color: $border-color !important; -} - -.dropzone .dz-preview .dz-progress .dz-upload { - background: $gl-success !important; -} - -.space-right { - margin-right: 10px; -} - -.in-line { - display: inline-block; -} diff --git a/app/assets/stylesheets/generic/files.scss b/app/assets/stylesheets/generic/files.scss deleted file mode 100644 index 9dd77747884..00000000000 --- a/app/assets/stylesheets/generic/files.scss +++ /dev/null @@ -1,171 +0,0 @@ -/** - * File content holder - * - */ -.file-holder { - margin-left: -$gl-padding; - margin-right: -$gl-padding; - border: none; - border-top: 1px solid #E7E9EE; - border-bottom: 1px solid #E7E9EE; - margin-bottom: 1em; - - table { - @extend .table; - } - - .file-title { - position: relative; - background: $background-color; - border-bottom: 1px solid $border-color; - text-shadow: 0 1px 1px #fff; - margin: 0; - text-align: left; - padding: 10px 15px; - - .file-actions { - float: right; - position: absolute; - top: 5px; - right: 15px; - - .btn { - padding: 0px 10px; - font-size: 13px; - line-height: 28px; - } - } - - .left-options { - margin-top: -3px; - } - } - .file-content { - background: #fff; - - &.image_file { - background: #eee; - text-align: center; - img { - padding: 100px; - max-width: 50%; - } - } - - &.wiki { - padding: $gl-padding; - - .highlight { - margin-bottom: 9px; - - > pre { - margin: 0; - } - } - } - - &.blob_file { - - } - - &.blob-no-preview { - background: #eee; - text-shadow: 0 1px 2px #FFF; - padding: 100px 0; - } - - /** - * Blame file - */ - &.blame { - table { - border: none; - box-shadow: none; - margin: 0; - } - tr { - border-bottom: 1px solid #eee; - } - td { - &:first-child { - border-left: none; - } - &:last-child { - border-right: none; - } - background: #fff; - padding: 10px $gl-padding; - } - .lines { - pre { - padding: 0; - margin: 0; - background: none; - border: none; - } - } - img.avatar { - border: 0 none; - float: none; - margin: 0; - padding: 0; - } - td.blame-commit { - background: #f9f9f9; - min-width: 350px; - - .commit-author-link { - color: #888; - } - } - td.blame-numbers { - pre { - color: #AAA; - white-space: pre; - } - background: #f1f1f1; - border-left: 1px solid #DDD; - } - td.lines { - code { - font-family: $monospace_font; - } - } - } - - &.logs { - background: #eee; - max-height: 700px; - overflow-y: auto; - - ol { - margin-left: 40px; - padding: 10px 0; - border-left: 1px solid $border-color; - margin-bottom: 0; - background: white; - li { - color: #888; - p { - margin: 0; - color: #333; - line-height: 24px; - padding-left: 10px; - } - - &:hover { - background: $hover; - } - } - } - } - - /** - * Code file - */ - &.code { - padding: 0; - } - } -} - diff --git a/app/assets/stylesheets/generic/filters.scss b/app/assets/stylesheets/generic/filters.scss deleted file mode 100644 index 8e6922c9231..00000000000 --- a/app/assets/stylesheets/generic/filters.scss +++ /dev/null @@ -1,30 +0,0 @@ -.filter-item { - margin-right: 15px; -} - -@media (min-width: 800px) { - .issues-filters, - .issues_bulk_update { - select, .select2-container { - width: 120px !important; - display: inline-block; - } - } -} - -@media (min-width: 1200px) { - .issues-filters, - .issues_bulk_update { - select, .select2-container { - width: 150px !important; - display: inline-block; - } - } -} - -.issues-filters, -.issues_bulk_update { - .select2-container .select2-choice { - color: #444 !important; - } -} diff --git a/app/assets/stylesheets/generic/flash.scss b/app/assets/stylesheets/generic/flash.scss deleted file mode 100644 index 82eb50ad4be..00000000000 --- a/app/assets/stylesheets/generic/flash.scss +++ /dev/null @@ -1,17 +0,0 @@ -.flash-container { - cursor: pointer; - margin: 0; - font-size: 14px; - width: 100%; - z-index: 100; - - .flash-notice { - @extend .alert; - @extend .alert-info; - } - - .flash-alert { - @extend .alert; - @extend .alert-danger; - } -} diff --git a/app/assets/stylesheets/generic/forms.scss b/app/assets/stylesheets/generic/forms.scss deleted file mode 100644 index 0edfe24f195..00000000000 --- a/app/assets/stylesheets/generic/forms.scss +++ /dev/null @@ -1,94 +0,0 @@ -textarea { - resize: vertical; -} - -input[type='search'].search-text-input { - background-image: image-url("icon-search.png"); - background-repeat: no-repeat; - background-position: 10px; - padding-left: 25px; -} - -input[type='text'].danger { - background: #F2DEDE!important; - border-color: #D66; - text-shadow: 0 1px 1px #fff -} - -.datetime-controls { - select { - width: 100px; - } -} - -.form-actions { - padding: 17px 20px 18px; - margin-top: 18px; - margin-bottom: 18px; - background-color: $background-color; - border-top: 1px solid $border-color; -} - -label { - &.control-label { - @extend .col-sm-2; - } - - &.inline-label { - margin: 0; - } -} - -.inline-input-group { - width: 250px; -} - -.custom-form-control { - width: 150px; -} - -@media (min-width: $screen-sm-min) { - .custom-form-control { - width: 150px; - } -} - -/* Medium devices (desktops, 992px and up) */ -@media (min-width: $screen-md-min) { - .custom-form-control { - width: 170px; - } -} - -/* Large devices (large desktops, 1200px and up) */ -@media (min-width: $screen-lg-min) { - .custom-form-control { - width: 200px; - } -} - -.fieldset-form fieldset { - margin-bottom: 20px; -} - -.form-control { - @include box-shadow(none); -} - -.wiki-content { - margin-top: 35px; -} - -.form-group .control-label { - font-weight: normal; -} - -.form-control::-webkit-input-placeholder { - color: #7f8fa4; -} - -.input-group { - .input-group-addon { - background-color: #f7f8fa; - } -} diff --git a/app/assets/stylesheets/generic/gfm.scss b/app/assets/stylesheets/generic/gfm.scss deleted file mode 100644 index bd9200ace23..00000000000 --- a/app/assets/stylesheets/generic/gfm.scss +++ /dev/null @@ -1,25 +0,0 @@ -/** - * Styles that apply to all GFM related forms. - */ -.issue-form, .merge-request-form, .wiki-form { - .description { - height: 16em; - border-top-left-radius: 0; - } -} - -.wiki-form { - .description { - height: 26em; - } -} - -.milestone-form { - .description { - height: 14em; - } -} - -.gfm-commit, .gfm-commit_range { - font-family: $monospace_font; -} diff --git a/app/assets/stylesheets/generic/header.scss b/app/assets/stylesheets/generic/header.scss deleted file mode 100644 index 91e6975e269..00000000000 --- a/app/assets/stylesheets/generic/header.scss +++ /dev/null @@ -1,169 +0,0 @@ -/* - * Application Header - * - */ -header { - transition-duration: .3s; - - &.navbar-empty { - background: #FFF; - border-bottom: 1px solid #EEE; - - .center-logo { - margin: 8px 0; - text-align: center; - - img { - height: 32px; - } - } - } - - &.navbar-gitlab { - padding: 0 20px; - z-index: 100; - margin-bottom: 0; - min-height: $header-height; - background-color: #fff; - border: none; - - .container-fluid { - width: 100% !important; - filter: none; - padding: 0; - - .nav > li > a { - color: #7f8fa4; - font-size: 18px; - padding: 0; - margin: ($header-height - 28) / 2 0; - margin-left: 10px; - height: 28px; - width: 28px; - line-height: 28px; - text-align: center; - - &:hover, &:focus, &:active { - background-color: #FFF; - } - } - - .navbar-toggle { - color: #666; - margin: 6px 0; - border-radius: 0; - position: absolute; - right: 2px; - - &:hover { - background-color: #EEE; - } - &.active { - color: #7f8fa4; - } - } - } - } - - .header-content { - height: $header-height; - - .title { - margin: 0; - overflow: hidden; - font-size: 19px; - line-height: $header-height; - font-weight: normal; - color: #4c4e54; - text-overflow: ellipsis; - vertical-align: top; - white-space: nowrap; - - a { - color: #4c4e54; - &:hover { - text-decoration: underline; - } - } - } - - .navbar-collapse { - float: right; - border-top: none; - } - } - - .search { - margin-right: 10px; - margin-left: 10px; - margin-top: ($header-height - 36) / 2; - - form { - margin: 0; - padding: 0; - } - - .search-input { - width: 220px; - background-image: image-url("icon-search.png"); - background-repeat: no-repeat; - background-position: 195px; - @include input-big; - - &:focus { - @include box-shadow(none); - outline: none; - border-color: #DDD; - background-color: #FFF; - } - } - } -} - -@mixin collapsed-header { - margin-left: $sidebar_collapsed_width; -} - -@media (max-width: $screen-md-max) { - .header-collapsed, .header-expanded { - @include collapsed-header; - } -} - -@media(min-width: $screen-md-max) { - .header-collapsed { - @include collapsed-header; - } - - .header-expanded { - margin-left: $sidebar_width; - } -} - -@media (max-width: $screen-xs-max) { - header .container-fluid { - font-size: 18px; - - .navbar-nav { - margin: 0px; - float: none !important; - - .visible-xs, .visable-sm { - display: table-cell !important; - } - } - - .navbar-collapse { - padding-left: 5px; - - li { - display: table-cell; - width: 1%; - - a { - margin-left: 8px !important; - } - } - } - } -} diff --git a/app/assets/stylesheets/generic/highlight.scss b/app/assets/stylesheets/generic/highlight.scss deleted file mode 100644 index 2e13ee842e0..00000000000 --- a/app/assets/stylesheets/generic/highlight.scss +++ /dev/null @@ -1,70 +0,0 @@ -.file-content.code { - border: none; - box-shadow: none; - margin: 0px; - padding: 0px; - table-layout: fixed; - - pre { - padding: 10px; - border: none; - border-radius: 0; - font-family: $monospace_font; - font-size: $code_font_size !important; - line-height: $code_line_height !important; - margin: 0; - overflow: auto; - overflow-y: hidden; - white-space: pre; - word-wrap: normal; - - code { - font-family: $monospace_font; - white-space: pre; - word-wrap: normal; - padding: 0; - - .line { - display: inline; - } - } - } - - .line-numbers { - padding: 10px; - text-align: right; - float: left; - - a { - font-family: $monospace_font; - display: block; - font-size: $code_font_size !important; - line-height: $code_line_height !important; - white-space: nowrap; - - i { - visibility: hidden; - @extend .pull-left; - } - - &:hover i { - visibility: visible; - } - } - } -} - -.note-text .code { - border: none; - box-shadow: none; - background: $background-color; - padding: 1em; - overflow-x: auto; - - code { - font-family: $monospace_font; - white-space: pre; - word-wrap: normal; - padding: 0; - } -} diff --git a/app/assets/stylesheets/generic/issue_box.scss b/app/assets/stylesheets/generic/issue_box.scss deleted file mode 100644 index 93377e45e70..00000000000 --- a/app/assets/stylesheets/generic/issue_box.scss +++ /dev/null @@ -1,35 +0,0 @@ -/** - * Issue box for showing Open/Closed state: - * Used for Issue#show page, MergeRequest#show page etc - * - */ - -.issue-box { - @include border-radius(2px); - - display: inline-block; - padding: 10px $gl-padding; - font-weight: normal; - margin-right: 10px; - font-size: $gl-font-size; - - &.issue-box-closed { - background-color: $gl-danger; - color: #FFF; - } - - &.issue-box-merged { - background-color: $gl-primary; - color: #FFF; - } - - &.issue-box-open { - background-color: #019875; - color: #FFF; - } - - &.issue-box-expired { - background: #cea61b; - color: #FFF; - } -} diff --git a/app/assets/stylesheets/generic/jquery.scss b/app/assets/stylesheets/generic/jquery.scss deleted file mode 100644 index 871b808bad4..00000000000 --- a/app/assets/stylesheets/generic/jquery.scss +++ /dev/null @@ -1,55 +0,0 @@ -.ui-widget { - font-family: $regular_font; - font-size: $font-size-base; - - &.ui-datepicker-inline { - border: 1px solid #DDD; - padding: 10px; - width: 270px; - - .ui-datepicker-header { - background: #FFF; - border-color: #DDD; - } - - .ui-datepicker-calendar td a { - padding: 5px; - text-align: center; - } - } - - &.ui-autocomplete { - border-color: #DDD; - padding: 0; - margin-top: 2px; - z-index: 1001; - - .ui-menu-item a { - padding: 4px 10px; - } - } - - .ui-state-default { - border: 1px solid #FFF; - background: #FFF; - color: #777; - } - - .ui-state-highlight { - border: 1px solid #EEE; - background: #EEE; - } - - .ui-state-active { - border: 1px solid $gl-primary; - background: $gl-primary; - color: #FFF; - } - - .ui-state-hover, - .ui-state-focus { - border: 1px solid $hover; - background: $hover; - color: #333; - } -} diff --git a/app/assets/stylesheets/generic/lists.scss b/app/assets/stylesheets/generic/lists.scss deleted file mode 100644 index 3bfed8de772..00000000000 --- a/app/assets/stylesheets/generic/lists.scss +++ /dev/null @@ -1,125 +0,0 @@ -/** - * Well styled list - * - */ -.well-list { - margin: 0; - padding: 0; - list-style: none; - - li { - padding: 10px 15px; - min-height: 20px; - border-bottom: 1px solid #eee; - border-bottom: 1px solid rgba(0, 0, 0, 0.05); - - &:after { - content: " "; - display: table; - clear: both; - } - - &.disabled { - color: #888; - } - - &.unstyled { - &:hover { - background: none; - } - } - - &.warning-row { - background-color: #fcf8e3; - border-color: #faebcc; - color: #8a6d3b; - } - - &.smoke { background-color: $background-color; } - - &:hover { - background: $hover; - } - - &:last-child { - border-bottom: none; - - &.bottom { - background: $background-color; - } - } - - .list-item-name { - float: left; - position: relative; - top: 3px; - } - - p { - padding-top: 1px; - margin: 0; - color: $gray-dark; - img { - position: relative; - top: 3px; - } - } - - .well-title { - font-size: $list-font-size; - line-height: 18px; - } - } -} - -ol, ul { - &.styled { - li { - padding: 2px; - } - } -} - -/** light list with border-bottom between li **/ -ul.bordered-list { - @include basic-list; - - &.top-list { - li:first-child { - padding-top: 0; - - h4, h5 { - margin-top: 0; - } - } - } -} - -li.task-list-item { - list-style-type: none; -} - -ul.content-list { - @include basic-list; - - margin: 0; - padding: 0; - - > li { - padding: $gl-padding; - border-color: #f1f2f4; - margin-left: -$gl-padding; - margin-right: -$gl-padding; - color: $gl-gray; - - .avatar { - margin-right: 15px; - } - - .controls { - padding-top: 10px; - float: right; - } - } -} - diff --git a/app/assets/stylesheets/generic/markdown_area.scss b/app/assets/stylesheets/generic/markdown_area.scss deleted file mode 100644 index ed0333d2336..00000000000 --- a/app/assets/stylesheets/generic/markdown_area.scss +++ /dev/null @@ -1,115 +0,0 @@ -.div-dropzone-wrapper { - .div-dropzone { - position: relative; - padding: 0; - border: 0; - margin-bottom: 5px; - - .div-dropzone-focus { - border-color: #66afe9 !important; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6) !important; - outline: 0 !important; - } - - .div-dropzone-hover { - position: absolute; - top: 50%; - left: 50%; - margin-top: -0.5em; - margin-left: -0.6em; - opacity: 0; - font-size: 50px; - transition: opacity 200ms ease-in-out; - pointer-events: none; - } - - .div-dropzone-spinner { - position: absolute; - top: 100%; - left: 100%; - margin-top: -1.1em; - margin-left: -1.1em; - opacity: 0; - font-size: 30px; - transition: opacity 200ms ease-in-out; - } - - .div-dropzone-icon { - display: block; - text-align: center; - font-size: inherit; - } - - .div-dropzone-progress { - position: absolute; - top: 7px; - left: -40px; - width: 35px; - font-size: 13px; - text-align: right; - } - - .dz-preview { - display: none; - } - } -} - -.div-dropzone-alert { - margin-top: 5px; - margin-bottom: 0; - transition: opacity 200ms ease-in-out; -} - -.md-area { - position: relative; -} - -.md-header { - ul { - float: left; - margin-bottom: 1px; - } -} - -.referenced-users { - padding: 10px 0; - color: #999; - margin-left: 10px; - margin-top: 1px; - margin-right: 130px; -} - -.md-preview-holder { - background: #FFF; - border: 1px solid #ddd; - min-height: 169px; - padding: 5px; - box-shadow: none; -} - -.new_note, -.edit_note, -.issuable-description, -.milestone-description, -.wiki-content, -.merge-request-form { - .nav-tabs { - margin-bottom: 0; - border: none; - - li a, - li.active a { - border: 1px solid #DDD; - } - } -} - -.markdown-area { - background: #FFF; - border: 1px solid #ddd; - min-height: 140px; - padding: 5px; - box-shadow: none; - width: 100%; -} diff --git a/app/assets/stylesheets/generic/mobile.scss b/app/assets/stylesheets/generic/mobile.scss deleted file mode 100644 index 36ae126f865..00000000000 --- a/app/assets/stylesheets/generic/mobile.scss +++ /dev/null @@ -1,139 +0,0 @@ -/** Common mobile (screen XS, SM) styles **/ -@media (max-width: $screen-xs-max) { - .container .content { - margin-top: 20px; - } - - .container-fluid { - padding-left: 5px; - padding-right: 5px; - } - - .nav.nav-tabs > li > a { - padding: 10px; - font-size: 12px; - margin-right: 3px; - - .badge { - display: none; - } - } - - .referenced-users { - margin-right: 0; - } - - .issues-filters, - .dash-projects-filters, - .check-all-holder { - display: none; - } - - .rss-btn { - display: none !important; - } - - .project-home-links { - display: none; - } - - .project-avatar { - display: none; - } - - .project-home-panel { - padding-left: 0 !important; - - .project-avatar { - display: block; - } - - .project-home-desc { - font-size: 21px; - } - - .project-repo-buttons, - .git-clone-holder { - display: none; - } - } - - .project-stats { - display: none; - } - - .container .title { - padding-left: 15px !important; - } - - .issue-info, .merge-request-info { - display: none; - } - - .issue-details { - .creator, - .page-title .btn-close { - display: none; - } - } - - %ul.notes .note-role, .note-actions { - display: none; - } - - .center-top-menu { - height: 45px; - - li a { - font-size: 14px; - padding: 19px 10px; - } - } - - .projects-search-form { - margin: 0 -5px !important; - - .btn { - display: none; - } - } -} - -@media (max-width: $screen-sm-max) { - .issues-filters { - .milestone-filter, .labels-filter { - display: none; - } - } - - .page-title { - .note_created_ago, .new-issue-link { - display: none; - } - } - - .issue_edited_ago, .note_edited_ago { - display: none; - } - - aside { - display: none; - } - - .show-aside { - display: block !important; - } -} - -.show-aside { - display: none; - position: fixed; - right: 0px; - top: 30%; - padding: 5px 15px; - background: #EEE; - font-size: 20px; - color: #777; - z-index: 100; - @include box-shadow(0 1px 2px #DDD); -} diff --git a/app/assets/stylesheets/generic/pagination.scss b/app/assets/stylesheets/generic/pagination.scss deleted file mode 100644 index 6677f94dafd..00000000000 --- a/app/assets/stylesheets/generic/pagination.scss +++ /dev/null @@ -1,34 +0,0 @@ -.gl-pagination { - border-top: 1px solid $border-color; - background-color: $background-color; - margin: -$gl-padding; - margin-top: 0; - - .pagination { - padding: 0; - margin: 0; - display: block; - - li.first, - li.last, - li.next, - li.prev { - > a { - color: $link-color; - - &:hover { - color: #fff; - } - } - } - - li > a, - li > span { - border: none; - margin: 0; - @include border-radius(0 !important); - padding: 13px 19px; - border-right: 1px solid $border-color; - } - } -} diff --git a/app/assets/stylesheets/generic/selects.scss b/app/assets/stylesheets/generic/selects.scss deleted file mode 100644 index cba621635b6..00000000000 --- a/app/assets/stylesheets/generic/selects.scss +++ /dev/null @@ -1,146 +0,0 @@ -/** Select2 selectbox style override **/ -.select2-container, .select2-container.select2-drop-above { - .select2-choice { - background: #FFF; - border-color: #DDD; - height: 42px; - padding: 8px $gl-padding; - font-size: $gl-font-size; - line-height: 1.42857143; - - @include border-radius(2px); - - .select2-arrow { - background: #FFF; - border-left: none; - padding-top: 5px; - } - } -} - -.select2-container .select2-choice, .select2-container.select2-drop-above .select2-choice{ - color: #7f8fa4; - border: 1px solid #e7e9ed; -} - -.select2-drop { - @include box-shadow(rgba(76, 86, 103, 0.247059) 0px 0px 1px 0px, rgba(31, 37, 50, 0.317647) 0px 2px 18px 0px); - @include border-radius (0px); - - padding: 16px; - border: none !important; -} - -.select2-results .select2-result-label { - padding: 16px; -} - -.select2-drop{ - color: #7f8fa4; -} - -.select2-highlighted { - background: #3084bb !important; -} - -.select2-results li.select2-result-with-children > .select2-result-label { - font-weight: 600; - color: #313236; -} - - -.select2-container-multi .select2-choices { - @include border-radius(2px); - border-color: #CCC; -} - -.select2-container-multi .select2-choices .select2-search-field input { - padding: 8px 14px; - font-size: 13px; - line-height: 18px; - height: auto; -} - -.select2-drop-active { - border: 1px solid #BBB !important; - margin-top: 4px; - font-size: 13px; - - &.select2-drop-above { - margin-bottom: 8px; - } - - .select2-search input { - background: #fafafa; - border-color: #DDD; - } - - .select2-results { - max-height: 350px; - .select2-highlighted { - background: $gl-primary; - } - } -} - -.select2-container { - width: 100% !important; -} - -/** Branch/tag selector **/ -.project-refs-form .select2-container { - width: 160px !important; -} - -.ajax-users-dropdown, .ajax-project-users-dropdown { - .select2-search { - padding-top: 2px; - } -} - -.ajax-users-select { - width: 400px; - - &.input-large { - width: 210px; - } - - &.input-clamp { - max-width: 100%; - } -} - -.group-result { - .group-image { - float: left; - } - .group-name { - font-weight: bold; - } - .group-path { - color: #999; - } -} - -.user-result { - .user-image { - float: left; - } - .user-name { - } -} - -.namespace-result { - .namespace-kind { - color: #AAA; - font-weight: normal; - } - .namespace-path { - margin-left: 10px; - font-weight: bolder; - } -} - -.ajax-users-dropdown { - min-width: 250px !important; -} diff --git a/app/assets/stylesheets/generic/sidebar.scss b/app/assets/stylesheets/generic/sidebar.scss deleted file mode 100644 index c5ea3aca7ca..00000000000 --- a/app/assets/stylesheets/generic/sidebar.scss +++ /dev/null @@ -1,267 +0,0 @@ -.page-with-sidebar { - .sidebar-wrapper { - position: fixed; - top: 0; - bottom: 0; - overflow-y: auto; - overflow-x: hidden; - left: 0; - height: 100%; - transition-duration: .3s; - } -} - -.sidebar-wrapper { - z-index: 99; - background: $background-color; - transition-duration: .3s; -} - -.content-wrapper { - min-height: 100vh; - width: 100%; - padding: 20px; - background: #EAEBEC; - - .container-fluid { - background: #FFF; - padding: $gl-padding; - min-height: 90vh; - - &.container-blank { - background: none; - padding: 0; - border: none; - } - } -} - -.nav-sidebar { - margin-top: 14 + $header-height; - margin-bottom: 100px; - transition-duration: .3s; - list-style: none; - overflow: hidden; - - &.navbar-collapse { - padding: 0px !important; - } - - li { - width: $sidebar_width; - - &.separate-item { - padding-top: 10px; - margin-top: 10px; - } - - a { - padding: 7px 15px; - font-size: $gl-font-size; - line-height: 24px; - color: $gray; - display: block; - text-decoration: none; - padding-left: 22px; - font-weight: normal; - - &:hover { - text-decoration: none; - } - - &:active, &:focus { - text-decoration: none; - } - - i { - width: 16px; - color: $gray-light; - margin-right: 13px; - } - - .count { - float: right; - background: #eee; - padding: 0px 8px; - @include border-radius(6px); - } - } - } -} - -.sidebar-subnav { - margin-left: 0px; - padding-left: 0px; - - li { - list-style: none; - } -} - -@mixin expanded-sidebar { - padding-left: $sidebar_width; - transition-duration: .3s; - - .sidebar-wrapper { - width: $sidebar_width; - - .nav-sidebar { - width: $sidebar_width; - } - - .nav-sidebar li a{ - width: 230px; - - &.back-link { - i { - visibility: hidden; - } - } - } - } -} - -@mixin folded-sidebar { - padding-left: 60px; - transition-duration: .3s; - - .sidebar-wrapper { - width: $sidebar_collapsed_width; - - .header-logo { - width: $sidebar_collapsed_width; - - a { - padding-left: 12px; - - .gitlab-text-container { - display: none; - } - } - } - - .nav-sidebar { - width: $sidebar_collapsed_width; - - li a { - span { - display: none; - } - } - } - - .collapse-nav a { - width: $sidebar_collapsed_width; - } - - .sidebar-user { - padding-left: 12px; - width: $sidebar_collapsed_width; - - .username { - display: none; - } - } - } -} - -.collapse-nav a { - width: $sidebar_width; - position: fixed; - bottom: 0; - left: 0; - font-size: 13px; - background: transparent; - height: 40px; - text-align: center; - line-height: 40px; - transition-duration: .3s; -} - -.collapse-nav a:hover { - text-decoration: none; - background: #f2f6f7; -} - -@media (max-width: $screen-md-max) { - .page-sidebar-collapsed { - @include folded-sidebar; - } - - .page-sidebar-expanded { - @include folded-sidebar; - } - - .collapse-nav { - display: none; - } -} - -@media(min-width: $screen-md-max) { - .page-sidebar-collapsed { - @include folded-sidebar; - } - - .page-sidebar-expanded { - @include expanded-sidebar; - } -} - -.sidebar-user { - padding: 9px 22px; - position: fixed; - bottom: 40px; - width: $sidebar_width; - overflow: hidden; - transition-duration: .3s; - - .username { - margin-left: 10px; - width: $sidebar_width - 2 * 10px; - font-size: 16px; - line-height: 34px; - } -} - -.sidebar-wrapper { - .header-logo { - border-bottom: 1px solid transparent; - float: left; - height: $header-height; - width: $sidebar_width; - overflow: hidden; - transition-duration: .3s; - - a { - float: left; - height: $header-height; - width: 100%; - padding: 10px 22px; - overflow: hidden; - - img { - width: 36px; - height: 36px; - float: left; - } - - .gitlab-text-container { - width: 230px; - - h3 { - width: 158px; - float: left; - margin: 0; - margin-left: 14px; - font-size: 19px; - line-height: 41px; - font-weight: normal; - } - } - } - - &:hover { - background-color: #EEE; - } - } -} diff --git a/app/assets/stylesheets/generic/tables.scss b/app/assets/stylesheets/generic/tables.scss deleted file mode 100644 index a66e45577de..00000000000 --- a/app/assets/stylesheets/generic/tables.scss +++ /dev/null @@ -1,20 +0,0 @@ -table { - &.table { - tr { - td, th { - padding: 8px 10px; - line-height: 20px; - vertical-align: middle; - } - th { - font-weight: normal; - font-size: 15px; - border-bottom: 1px solid $border-color !important; - } - td { - border-color: #F1F1F1 !important; - border-bottom: 1px solid; - } - } - } -} diff --git a/app/assets/stylesheets/generic/timeline.scss b/app/assets/stylesheets/generic/timeline.scss deleted file mode 100644 index bf21d7fce76..00000000000 --- a/app/assets/stylesheets/generic/timeline.scss +++ /dev/null @@ -1,70 +0,0 @@ -.timeline { - @include basic-list; - - margin: 0; - padding: 0; - - .timeline-entry { - padding: $gl-padding; - border-color: #f1f2f4; - margin-left: -$gl-padding; - margin-right: -$gl-padding; - color: $gl-gray; - border-bottom: 1px solid #ECEEF1; - border-right: 1px solid #ECEEF1; - - &:last-child { - border-bottom: none; - } - - .avatar { - margin-right: 15px; - } - - .controls { - padding-top: 10px; - float: right; - } - } - - .note-text { - p:last-child { - margin-bottom: 0; - } - } - - .system-note { - .note-text { - color: $gl-gray !important; - } - } - - .diff-file { - border: 1px solid $border-color; - border-bottom: none; - margin-left: 0; - margin-right: 0; - } -} - -@media (max-width: $screen-xs-max) { - .timeline { - &:before { - background: none; - } - .timeline-entry .timeline-entry-inner { - .timeline-icon { - display: none; - } - - .timeline-content { - margin-left: 0; - } - } - } -} - -.discussion .timeline-entry { - margin: 0; - border-right: none; -} diff --git a/app/assets/stylesheets/generic/typography.scss b/app/assets/stylesheets/generic/typography.scss deleted file mode 100644 index 6a3cb49baae..00000000000 --- a/app/assets/stylesheets/generic/typography.scss +++ /dev/null @@ -1,130 +0,0 @@ -/** - * Headers - * - */ -body { - text-rendering:optimizeLegibility; - -webkit-text-shadow: rgba(255,255,255,0.01) 0 0 1px; -} - -.page-title { - margin-top: 0px; - line-height: 1.3; - font-size: 1.25em; - font-weight: 600; -} - -.page-title-empty { - margin-top: 0px; - line-height: 1.3; - font-size: 1.25em; - font-weight: 600; - margin: 12px 7px 12px 7px; -} - -h1, h2, h3, h4, h5, h6 { - color: $gl-header-color; - font-weight: 500; -} - -/** CODE **/ -pre { - font-family: $monospace_font; - - &.dark { - background: #333; - color: $background-color; - } - - &.plain-readme { - background: none; - border: none; - padding: 0; - margin: 0; - font-size: 14px; - } -} - -.monospace { - font-family: $monospace_font; -} - -code { - &.key-fingerprint { - background: $body-bg; - color: $text-color; - } -} - -a > code { - color: $link-color; -} - -/** - * Wiki typography - * - */ -.wiki { - @include md-typography; - - word-wrap: break-word; - padding: 7px; - - /* Link to current header. */ - h1, h2, h3, h4, h5, h6 { - position: relative; - - a.anchor { - // Setting `display: none` would prevent the anchor being scrolled to, so - // instead we set the height to 0 and it gets updated on hover. - height: 0; - } - - &:hover > a.anchor { - $size: 16px; - position: absolute; - right: 100%; - top: 50%; - margin-top: -$size/2; - margin-right: 0px; - padding-right: 20px; - display: inline-block; - width: $size; - height: $size; - background-image: image-url("icon-link.png"); - background-size: contain; - background-repeat: no-repeat; - } - } - - ul,ol { - padding: 0; - margin: 6px 0 6px 18px !important; - } - ol { - color: #5c5d5e; - } -} - -.md-area { - @include md-typography; -} - -.md { - @include md-typography; -} - -/** - * Textareas intended for GFM - * - */ -textarea.js-gfm-input { - font-family: $monospace_font; -} - -.md-preview { -} - -.strikethrough { - text-decoration: line-through; -} \ No newline at end of file diff --git a/app/assets/stylesheets/generic/zen.scss b/app/assets/stylesheets/generic/zen.scss deleted file mode 100644 index 32e2c020e06..00000000000 --- a/app/assets/stylesheets/generic/zen.scss +++ /dev/null @@ -1,86 +0,0 @@ -.zennable { - .zen-toggle-comment { - display: none; - } - - .zen-enter-link { - color: $gl-gray; - position: absolute; - top: 0px; - right: 4px; - line-height: 40px; - } - - .zen-leave-link { - display: none; - color: $gl-text-color; - position: absolute; - top: 10px; - right: 10px; - padding: 5px; - font-size: 36px; - - &:hover { - color: #111; - } - } - - // Hide the Enter link when we're in Zen mode - input:checked ~ .zen-backdrop .zen-enter-link { - display: none; - } - - // Show the Leave link when we're in Zen mode - input:checked ~ .zen-backdrop .zen-leave-link { - display: block; - position: absolute; - top: 0; - } - - input:checked ~ .zen-backdrop { - background-color: white; - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - z-index: 1031; - - textarea { - border: none; - box-shadow: none; - border-radius: 0; - color: #000; - font-size: 20px; - line-height: 26px; - padding: 30px; - display: block; - outline: none; - resize: none; - height: 100vh; - max-width: 900px; - margin: 0 auto; - } - } - - // Make the color of the placeholder text in the Zenned-out textarea darker, - // so it becomes visible - - input:checked ~ .zen-backdrop textarea::-webkit-input-placeholder { - color: #A8A8A8; - } - - input:checked ~ .zen-backdrop textarea:-moz-placeholder { - color: #A8A8A8; - opacity: 1; - } - - input:checked ~ .zen-backdrop textarea::-moz-placeholder { - color: #A8A8A8; - opacity: 1; - } - - input:checked ~ .zen-backdrop textarea:-ms-input-placeholder { - color: #A8A8A8; - } -} diff --git a/app/assets/stylesheets/themes/gitlab-theme.scss b/app/assets/stylesheets/themes/gitlab-theme.scss deleted file mode 100644 index 8d9a0aae568..00000000000 --- a/app/assets/stylesheets/themes/gitlab-theme.scss +++ /dev/null @@ -1,120 +0,0 @@ -/** - * Styles the GitLab application with a specific color theme - * - * $color-light - - * $color - - * $color-darker - - * $color-dark - - */ -@mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) { - .page-with-sidebar { - .header-logo { - background-color: $color; - border-color: $color; - - a { - color: $color-light; - - h3 { - color: $color-light; - } - } - - &:hover { - background-color: $color-darker; - a { - color: #FFF; - } - } - } - - .collapse-nav a { - color: #FFF; - background: $color; - } - - .sidebar-wrapper { - background: $color-darker; - - .sidebar-user { - background: $color-darker; - color: $color-light; - - &:hover { - background-color: $color-dark; - color: #FFF; - text-decoration: none; - } - } - } - - .nav-sidebar li { - a { - color: $color-light; - - &:hover, &:focus, &:active { - background: $color-dark; - } - - i { - color: $color-light; - } - - .count { - color: $color-light; - background: $color-dark; - } - } - - &.separate-item { - border-top: 1px solid $color; - } - - &.active a { - color: #FFF; - background: $color-dark; - - &.no-highlight { - border: none; - } - - i { - color: #FFF - } - } - } - } -} - -$theme-blue: #2980B9; -$theme-charcoal: #333c47; -$theme-graphite: #888888; -$theme-gray: #373737; -$theme-green: #019875; -$theme-violet: #554488; - -body { - &.ui_blue { - @include gitlab-theme(#BECDE9, $theme-blue, #1970A9, #096099); - } - - &.ui_charcoal { - @include gitlab-theme(#c5d0de, $theme-charcoal, #2b333d, #24272D); - } - - &.ui_graphite { - @include gitlab-theme(#CCCCCC, $theme-graphite, #777777, #666666); - } - - &.ui_gray { - @include gitlab-theme(#979797, $theme-gray, #272727, #222222); - } - - &.ui_green { - @include gitlab-theme(#AADDCC, $theme-green, #018865, #017855); - } - - &.ui_violet { - @include gitlab-theme(#9988CC, $theme-violet, #443366, #332255); - } -} -- cgit v1.2.1 From c42d35b7214348e5c31014b3d3d54e59f6030ddc Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Mon, 12 Oct 2015 15:08:33 +0200 Subject: Add css welcome notice Signed-off-by: Dmitriy Zaporozhets --- app/assets/stylesheets/application.scss | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 233e01cc06b..65f775ca3f3 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -11,33 +11,41 @@ *= require cal-heatmap */ -/** +/* + * Welcome to GitLab css! + * If you need to add or modify UI component that is commont for many pages + * like table or typography then make changes in framework/ directory. + * If you need to add uniq style that should affect only one page - use pages/ + * directory. + */ + +/* * GitLab UI framework */ @import "framework"; -/** +/* * NProgress load bar css */ @import 'nprogress'; @import 'nprogress-bootstrap'; -/** +/* * Font icons */ @import "font-awesome"; -/** +/* * Page specific styles (issues, projects etc): */ @import "pages/**/*"; -/** +/* * Code highlight */ @import "highlight/**/*"; -/** +/* * Styles for JS behaviors. */ @import "behaviors.scss"; -- cgit v1.2.1 From 1af4fcfa123370ab6dcf38a424c54029d7734032 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Mon, 12 Oct 2015 19:00:21 +0000 Subject: Fix typos in application.scss --- app/assets/stylesheets/application.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 65f775ca3f3..7b060ce4853 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -13,9 +13,9 @@ /* * Welcome to GitLab css! - * If you need to add or modify UI component that is commont for many pages - * like table or typography then make changes in framework/ directory. - * If you need to add uniq style that should affect only one page - use pages/ + * If you need to add or modify UI component that is common for many pages + * like a table or typography then make changes in the framework/ directory. + * If you need to add unique style that should affect only one page - use pages/ * directory. */ @@ -48,4 +48,4 @@ /* * Styles for JS behaviors. */ -@import "behaviors.scss"; +@import "behaviors.scss"; \ No newline at end of file -- cgit v1.2.1