diff options
Diffstat (limited to 'app/assets/stylesheets')
| -rw-r--r-- | app/assets/stylesheets/application.scss | 50 | ||||
| -rw-r--r-- | app/assets/stylesheets/base/variables.scss | 46 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework.scss | 33 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/avatar.scss (renamed from app/assets/stylesheets/generic/avatar.scss) | 0 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/blocks.scss (renamed from app/assets/stylesheets/generic/blocks.scss) | 0 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/buttons.scss | 171 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/calendar.scss (renamed from app/assets/stylesheets/generic/calendar.scss) | 0 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/callout.scss (renamed from app/assets/stylesheets/generic/callout.scss) | 0 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/common.scss (renamed from app/assets/stylesheets/generic/common.scss) | 8 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/files.scss (renamed from app/assets/stylesheets/generic/files.scss) | 0 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/filters.scss (renamed from app/assets/stylesheets/generic/filters.scss) | 0 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/flash.scss (renamed from app/assets/stylesheets/generic/flash.scss) | 0 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/fonts.scss (renamed from app/assets/stylesheets/base/fonts.scss) | 0 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/forms.scss (renamed from app/assets/stylesheets/generic/forms.scss) | 20 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/gfm.scss (renamed from app/assets/stylesheets/generic/gfm.scss) | 1 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/gitlab-theme.scss (renamed from app/assets/stylesheets/themes/gitlab-theme.scss) | 0 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/header.scss (renamed from app/assets/stylesheets/generic/header.scss) | 7 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/highlight.scss (renamed from app/assets/stylesheets/generic/highlight.scss) | 0 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/issue_box.scss (renamed from app/assets/stylesheets/generic/issue_box.scss) | 2 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/jquery.scss (renamed from app/assets/stylesheets/generic/jquery.scss) | 0 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/layout.scss (renamed from app/assets/stylesheets/base/layout.scss) | 1 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/lists.scss (renamed from app/assets/stylesheets/generic/lists.scss) | 6 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/markdown_area.scss (renamed from app/assets/stylesheets/generic/markdown_area.scss) | 0 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/mixins.scss (renamed from app/assets/stylesheets/base/mixins.scss) | 141 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/mobile.scss (renamed from app/assets/stylesheets/generic/mobile.scss) | 14 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/pagination.scss (renamed from app/assets/stylesheets/generic/pagination.scss) | 0 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/selects.scss (renamed from app/assets/stylesheets/generic/selects.scss) | 42 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/sidebar.scss (renamed from app/assets/stylesheets/generic/sidebar.scss) | 0 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/tables.scss (renamed from app/assets/stylesheets/generic/tables.scss) | 18 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/timeline.scss (renamed from app/assets/stylesheets/generic/timeline.scss) | 4 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/tw_bootstrap.scss (renamed from app/assets/stylesheets/base/gl_bootstrap.scss) | 22 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/tw_bootstrap_variables.scss (renamed from app/assets/stylesheets/base/gl_variables.scss) | 6 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/typography.scss | 271 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/variables.scss | 99 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/zen.scss (renamed from app/assets/stylesheets/generic/zen.scss) | 0 | ||||
| -rw-r--r-- | app/assets/stylesheets/generic/buttons.scss | 228 | ||||
| -rw-r--r-- | app/assets/stylesheets/generic/typography.scss | 130 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/builds.scss (renamed from app/assets/stylesheets/ci/builds.scss) | 7 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/ci_projects.scss (renamed from app/assets/stylesheets/ci/projects.scss) | 0 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/commit.scss | 13 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/commits.scss | 3 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/diff.scss | 114 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/issuable.scss | 9 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/lint.scss (renamed from app/assets/stylesheets/ci/lint.scss) | 0 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/merge_requests.scss | 39 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/note_form.scss | 9 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/notes.scss | 2 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/projects.scss | 36 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/runners.scss (renamed from app/assets/stylesheets/ci/runners.scss) | 0 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/status.scss (renamed from app/assets/stylesheets/ci/status.scss) | 0 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/tree.scss | 34 | ||||
| -rw-r--r-- | app/assets/stylesheets/pages/xterm.scss (renamed from app/assets/stylesheets/ci/xterm.scss) | 2 |
52 files changed, 858 insertions, 730 deletions
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index d9ede637944..7b060ce4853 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -11,59 +11,41 @@ *= require cal-heatmap */ +/* + * Welcome to GitLab css! + * 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. + */ -@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 */ @import 'nprogress'; @import 'nprogress-bootstrap'; -/** +/* * Font icons - * */ @import "font-awesome"; -/** - * UI themes: - */ -@import "themes/**/*"; - -/** - * Generic css (forms, nav etc): - */ -@import "generic/**/*"; - -/** +/* * Page specific styles (issues, projects etc): */ - @import "pages/**/*"; -/** +/* * Code highlight */ @import "highlight/**/*"; -/** +/* * Styles for JS behaviors. */ -@import "behaviors.scss"; - -/** - * CI specific styles: - */ -@import "ci/**/*"; - +@import "behaviors.scss";
\ No newline at end of file diff --git a/app/assets/stylesheets/base/variables.scss b/app/assets/stylesheets/base/variables.scss deleted file mode 100644 index befd63832d5..00000000000 --- a/app/assets/stylesheets/base/variables.scss +++ /dev/null @@ -1,46 +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; - - -/* - * State colors: - */ -$gl-primary: #446e9b; -$gl-success: #44c679; -$gl-info: #00aaff; -$gl-warning: #EB9532; -$gl-danger: #d9534f; - -/* - * 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..1ec9d2fd84f --- /dev/null +++ b/app/assets/stylesheets/framework.scss @@ -0,0 +1,33 @@ +@import "framework/fonts"; +@import "framework/variables"; +@import "framework/mixins"; +@import "framework/layout"; +@import 'framework/tw_bootstrap_variables'; +@import 'framework/tw_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/generic/avatar.scss b/app/assets/stylesheets/framework/avatar.scss index 36e582d4854..36e582d4854 100644 --- a/app/assets/stylesheets/generic/avatar.scss +++ b/app/assets/stylesheets/framework/avatar.scss diff --git a/app/assets/stylesheets/generic/blocks.scss b/app/assets/stylesheets/framework/blocks.scss index 6ce34b5c3e8..6ce34b5c3e8 100644 --- a/app/assets/stylesheets/generic/blocks.scss +++ b/app/assets/stylesheets/framework/blocks.scss diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss new file mode 100644 index 00000000000..e5f0c0ad9ef --- /dev/null +++ b/app/assets/stylesheets/framework/buttons.scss @@ -0,0 +1,171 @@ +@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 $gl-padding; + 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-sm { + padding: 5px 10px; + } + + &.btn-xs { + padding: 1px 5px; + } + + &.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/framework/calendar.scss index a36fefe22c5..a36fefe22c5 100644 --- a/app/assets/stylesheets/generic/calendar.scss +++ b/app/assets/stylesheets/framework/calendar.scss diff --git a/app/assets/stylesheets/generic/callout.scss b/app/assets/stylesheets/framework/callout.scss index f1699d21c9b..f1699d21c9b 100644 --- a/app/assets/stylesheets/generic/callout.scss +++ b/app/assets/stylesheets/framework/callout.scss diff --git a/app/assets/stylesheets/generic/common.scss b/app/assets/stylesheets/framework/common.scss index 016cc015e9c..e1a1793be9c 100644 --- a/app/assets/stylesheets/generic/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -381,6 +381,10 @@ table { &.no-bottom { margin-bottom: 0; } + + &.no-top { + margin-top: 0; + } } .dropzone .dz-preview .dz-progress { @@ -390,3 +394,7 @@ table { .dropzone .dz-preview .dz-progress .dz-upload { background: $gl-success !important; } + +.space-right { + margin-right: 10px; +} diff --git a/app/assets/stylesheets/generic/files.scss b/app/assets/stylesheets/framework/files.scss index 9dd77747884..9dd77747884 100644 --- a/app/assets/stylesheets/generic/files.scss +++ b/app/assets/stylesheets/framework/files.scss diff --git a/app/assets/stylesheets/generic/filters.scss b/app/assets/stylesheets/framework/filters.scss index 8e6922c9231..8e6922c9231 100644 --- a/app/assets/stylesheets/generic/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss diff --git a/app/assets/stylesheets/generic/flash.scss b/app/assets/stylesheets/framework/flash.scss index 82eb50ad4be..82eb50ad4be 100644 --- a/app/assets/stylesheets/generic/flash.scss +++ b/app/assets/stylesheets/framework/flash.scss diff --git a/app/assets/stylesheets/base/fonts.scss b/app/assets/stylesheets/framework/fonts.scss index e214567eca1..e214567eca1 100644 --- a/app/assets/stylesheets/base/fonts.scss +++ b/app/assets/stylesheets/framework/fonts.scss diff --git a/app/assets/stylesheets/generic/forms.scss b/app/assets/stylesheets/framework/forms.scss index 4282832e2bf..0edfe24f195 100644 --- a/app/assets/stylesheets/generic/forms.scss +++ b/app/assets/stylesheets/framework/forms.scss @@ -29,12 +29,6 @@ input[type='text'].danger { border-top: 1px solid $border-color; } -@media (min-width: $screen-sm-min) { - .form-actions { - padding-left: 17%; - } -} - label { &.control-label { @extend .col-sm-2; @@ -84,3 +78,17 @@ label { .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/framework/gfm.scss index bd9200ace23..5ae0520fd7b 100644 --- a/app/assets/stylesheets/generic/gfm.scss +++ b/app/assets/stylesheets/framework/gfm.scss @@ -22,4 +22,5 @@ .gfm-commit, .gfm-commit_range { font-family: $monospace_font; + font-size: 90%; } diff --git a/app/assets/stylesheets/themes/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss index 8d9a0aae568..8d9a0aae568 100644 --- a/app/assets/stylesheets/themes/gitlab-theme.scss +++ b/app/assets/stylesheets/framework/gitlab-theme.scss diff --git a/app/assets/stylesheets/generic/header.scss b/app/assets/stylesheets/framework/header.scss index 543ce41ab52..91e6975e269 100644 --- a/app/assets/stylesheets/generic/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -50,15 +50,17 @@ header { .navbar-toggle { color: #666; - margin: 0; + margin: 6px 0; border-radius: 0; position: absolute; right: 2px; - top: 15px; &:hover { background-color: #EEE; } + &.active { + color: #7f8fa4; + } } } } @@ -87,6 +89,7 @@ header { .navbar-collapse { float: right; + border-top: none; } } diff --git a/app/assets/stylesheets/generic/highlight.scss b/app/assets/stylesheets/framework/highlight.scss index 2e13ee842e0..2e13ee842e0 100644 --- a/app/assets/stylesheets/generic/highlight.scss +++ b/app/assets/stylesheets/framework/highlight.scss diff --git a/app/assets/stylesheets/generic/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss index b1fb87a6830..93377e45e70 100644 --- a/app/assets/stylesheets/generic/issue_box.scss +++ b/app/assets/stylesheets/framework/issue_box.scss @@ -5,7 +5,7 @@ */ .issue-box { - @include border-radius(3px); + @include border-radius(2px); display: inline-block; padding: 10px $gl-padding; diff --git a/app/assets/stylesheets/generic/jquery.scss b/app/assets/stylesheets/framework/jquery.scss index 871b808bad4..871b808bad4 100644 --- a/app/assets/stylesheets/generic/jquery.scss +++ b/app/assets/stylesheets/framework/jquery.scss diff --git a/app/assets/stylesheets/base/layout.scss b/app/assets/stylesheets/framework/layout.scss index b91c15d8910..c7b3b60e769 100644 --- a/app/assets/stylesheets/base/layout.scss +++ b/app/assets/stylesheets/framework/layout.scss @@ -5,6 +5,7 @@ html { body { padding-top: $header-height; + text-rendering: geometricPrecision; } } diff --git a/app/assets/stylesheets/generic/lists.scss b/app/assets/stylesheets/framework/lists.scss index 3bfed8de772..c5764c36597 100644 --- a/app/assets/stylesheets/generic/lists.scss +++ b/app/assets/stylesheets/framework/lists.scss @@ -117,8 +117,12 @@ ul.content-list { } .controls { - padding-top: 10px; + padding-top: 4px; float: right; + + .btn { + padding: 10px 14px; + } } } } diff --git a/app/assets/stylesheets/generic/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss index ed0333d2336..ed0333d2336 100644 --- a/app/assets/stylesheets/generic/markdown_area.scss +++ b/app/assets/stylesheets/framework/markdown_area.scss diff --git a/app/assets/stylesheets/base/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index c74a6d39824..089e6958eeb 100644 --- a/app/assets/stylesheets/base/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -54,147 +54,6 @@ @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; diff --git a/app/assets/stylesheets/generic/mobile.scss b/app/assets/stylesheets/framework/mobile.scss index 36ae126f865..cea47fba192 100644 --- a/app/assets/stylesheets/generic/mobile.scss +++ b/app/assets/stylesheets/framework/mobile.scss @@ -23,7 +23,7 @@ margin-right: 0; } - .issues-filters, + .issues-details-filters, .dash-projects-filters, .check-all-holder { display: none; @@ -83,6 +83,7 @@ .center-top-menu { height: 45px; + margin-bottom: 30px; li a { font-size: 14px; @@ -90,9 +91,11 @@ } } - .projects-search-form { - margin: 0 -5px !important; + .activity-filter-block { + display: none; + } + .projects-search-form { .btn { display: none; } @@ -100,6 +103,11 @@ } @media (max-width: $screen-sm-max) { + .page-with-sidebar .content-wrapper { + padding: 0; + padding-top: 1px; + } + .issues-filters { .milestone-filter, .labels-filter { display: none; diff --git a/app/assets/stylesheets/generic/pagination.scss b/app/assets/stylesheets/framework/pagination.scss index 6677f94dafd..6677f94dafd 100644 --- a/app/assets/stylesheets/generic/pagination.scss +++ b/app/assets/stylesheets/framework/pagination.scss diff --git a/app/assets/stylesheets/generic/selects.scss b/app/assets/stylesheets/framework/selects.scss index f0860de1c49..cba621635b6 100644 --- a/app/assets/stylesheets/generic/selects.scss +++ b/app/assets/stylesheets/framework/selects.scss @@ -8,7 +8,7 @@ font-size: $gl-font-size; line-height: 1.42857143; - @include border-radius(4px); + @include border-radius(2px); .select2-arrow { background: #FFF; @@ -18,8 +18,39 @@ } } +.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(4px); + @include border-radius(2px); border-color: #CCC; } @@ -63,7 +94,7 @@ .ajax-users-dropdown, .ajax-project-users-dropdown { .select2-search { - padding-top: 4px; + padding-top: 2px; } } @@ -97,9 +128,6 @@ } .user-name { } - .user-username { - color: #999; - } } .namespace-result { @@ -114,5 +142,5 @@ } .ajax-users-dropdown { - min-width: 225px !important; + min-width: 250px !important; } diff --git a/app/assets/stylesheets/generic/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index c5ea3aca7ca..c5ea3aca7ca 100644 --- a/app/assets/stylesheets/generic/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss diff --git a/app/assets/stylesheets/generic/tables.scss b/app/assets/stylesheets/framework/tables.scss index a66e45577de..789b34020c1 100644 --- a/app/assets/stylesheets/generic/tables.scss +++ b/app/assets/stylesheets/framework/tables.scss @@ -1,5 +1,21 @@ table { &.table { + .dropdown-menu a { + text-decoration: none; + } + + .success, + .warning, + .danger, + .info { + color: #fff; + + a:not(.btn) { + text-decoration: underline; + color: #fff; + } + } + tr { td, th { padding: 8px 10px; @@ -12,7 +28,7 @@ table { border-bottom: 1px solid $border-color !important; } td { - border-color: #F1F1F1 !important; + border-color: $table-border-color !important; border-bottom: 1px solid; } } diff --git a/app/assets/stylesheets/generic/timeline.scss b/app/assets/stylesheets/framework/timeline.scss index 74bbaabad39..bf21d7fce76 100644 --- a/app/assets/stylesheets/generic/timeline.scss +++ b/app/assets/stylesheets/framework/timeline.scss @@ -10,8 +10,8 @@ margin-left: -$gl-padding; margin-right: -$gl-padding; color: $gl-gray; - border-bottom: 1px solid #f1f2f4; - border-right: 1px solid #f1f2f4; + border-bottom: 1px solid #ECEEF1; + border-right: 1px solid #ECEEF1; &:last-child { border-bottom: none; diff --git a/app/assets/stylesheets/base/gl_bootstrap.scss b/app/assets/stylesheets/framework/tw_bootstrap.scss index eb8d23d6453..99d028d1228 100644 --- a/app/assets/stylesheets/base/gl_bootstrap.scss +++ b/app/assets/stylesheets/framework/tw_bootstrap.scss @@ -32,8 +32,6 @@ @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"; @@ -251,23 +249,3 @@ .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/framework/tw_bootstrap_variables.scss index 7378d404008..63868a34e2a 100644 --- a/app/assets/stylesheets/base/gl_variables.scss +++ b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss @@ -22,8 +22,8 @@ $brand-info: $gl-info; $brand-warning: $gl-warning; $brand-danger: $gl-danger; -$border-radius-base: 3px !default; -$border-radius-large: 5px !default; +$border-radius-base: 2px !default; +$border-radius-large: 2px !default; $border-radius-small: 2px !default; @@ -156,3 +156,5 @@ $nav-link-padding: 13px $gl-padding; $pre-bg: #f8fafc !default; $pre-color: $gl-gray !default; $pre-border-color: #e7e9ed; + +$table-bg-accent: $background-color; diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss new file mode 100644 index 00000000000..bf36f96cc97 --- /dev/null +++ b/app/assets/stylesheets/framework/typography.scss @@ -0,0 +1,271 @@ +@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; + } + } +} + + +/** + * 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; +} diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss new file mode 100644 index 00000000000..91954683c3e --- /dev/null +++ b/app/assets/stylesheets/framework/variables.scss @@ -0,0 +1,99 @@ +$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; +$table-border-color: #eef0f2; +$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/generic/zen.scss b/app/assets/stylesheets/framework/zen.scss index 32e2c020e06..32e2c020e06 100644 --- a/app/assets/stylesheets/generic/zen.scss +++ b/app/assets/stylesheets/framework/zen.scss diff --git a/app/assets/stylesheets/generic/buttons.scss b/app/assets/stylesheets/generic/buttons.scss deleted file mode 100644 index cf76f538e01..00000000000 --- a/app/assets/stylesheets/generic/buttons.scss +++ /dev/null @@ -1,228 +0,0 @@ -body { - text-rendering: geometricPrecision; -} -.btn { - @extend .btn-default; - - &.btn-new { - @extend .btn-success; - } - - &.btn-create { - @extend .btn-success; - } - - &.btn-save { - @extend .btn-success; - } - - &.btn-remove { - @extend .btn-danger; - } - - &.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-save { - @extend .btn-primary; - } - - &.btn-new, &.btn-create { - @extend .btn-success; - } -} - -.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; - } - } -} - -@mixin btn-info { - @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; - - &:hover { - border-width: 1px; - border-style: solid; - } - - &:focus { - border-width: 1px; - border-style: solid; - } - - &:active { - @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); - border-width: 1px; - border-style: solid; - } -} - -@mixin btn-middle { - @include border-radius(2px); - - border-width: 1px; - border-style: solid; - text-transform: uppercase; - font-size: 13px; - font-weight: 600; - line-height: 18px; - padding: 11px 24px; - letter-spacing: .4px; - - &:hover { - border-width: 1px; - border-style: solid; - } - - &:focus { - border-width: 1px; - border-style: solid; - } - - &:active { - @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); - border-width: 1px; - border-style: solid; - } -} - - -@mixin btn-green { - background-color: #28b061; - border: 1px solid #26a65c; - color: #fff; - - &:hover { - background-color: #26ab5d; - border: 1px solid #229954; - color: #fff; - } - - &:focus { - background-color: #26ab5d; - border: 1px solid #229954; - color: #fff; - } - - &:active { - @include box-shadow (inset 0 0 4px rgba(0, 0, 0, 0.12)); - - background-color: #23a158 !important; - border: 1px solid #229954 !important; - color: #fff !important; - } -} - -/*Butons*/ - -@mixin bnt-project { - background-color: #f0f2f5; - border-color: #dce0e5; - color: #313236; - - &:hover { - border-color:#dce0e5; - background-color: #ebeef2; - color: #313236; - } - - &:focus { - border-color: #dce0e5; - background-color: #ebeef2; - color: #313236; - } - - &:active { - @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); - - color: #313236 !important; - border-color: #c6cacf !important; - background-color: #e4e7ed !important; - } -} - -@mixin btn-remove { - background-color: #f72e60; - border-color: #ee295a; - - &:hover { - background-color: #e82757; - border-color: #e32555; - } - - &:focus { - background-color: #e82757; - border-color: #e32555; - } - - &:active { - @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12)); - background-color: #d42450 !important; - border-color: #e12554 !important; - } - -}
\ No newline at end of file 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/ci/builds.scss b/app/assets/stylesheets/pages/builds.scss index a11a935b54d..74dc3e321c1 100644 --- a/app/assets/stylesheets/ci/builds.scss +++ b/app/assets/stylesheets/pages/builds.scss @@ -1,4 +1,4 @@ -.ci-body { +.build-page { pre.trace { background: #111111; color: #fff; @@ -67,4 +67,9 @@ color: #3084bb !important; } } + + .build-top-menu { + margin-top: 0; + margin-bottom: 2px; + } } diff --git a/app/assets/stylesheets/ci/projects.scss b/app/assets/stylesheets/pages/ci_projects.scss index 8c5273abcda..8c5273abcda 100644 --- a/app/assets/stylesheets/ci/projects.scss +++ b/app/assets/stylesheets/pages/ci_projects.scss diff --git a/app/assets/stylesheets/pages/commit.scss b/app/assets/stylesheets/pages/commit.scss index 741ff9051a2..fbd7c363de1 100644 --- a/app/assets/stylesheets/pages/commit.scss +++ b/app/assets/stylesheets/pages/commit.scss @@ -107,3 +107,16 @@ z-index: 2; } } + +.commit-ci-menu { + padding: 0; + margin: 0; + list-style: none; + margin-top: 5px; + height: 56px; + margin: -16px; + padding: 16px; + text-align: center; + margin-top: 0px; + margin-bottom: 2px; +} diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index de2ae93df37..4e121b95d13 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -1,5 +1,6 @@ .commits-compare-switch{ - @extend .btn; + @include btn-default; + @include btn-white; background: image-url("switch_icon.png") no-repeat center center; text-indent: -9999px; float: left; diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index 5e7e59a6af8..d9ef06dc6b6 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -1,3 +1,4 @@ +// Common .diff-file { margin-left: -$gl-padding; margin-right: -$gl-padding; @@ -12,24 +13,17 @@ color: #555; z-index: 10; - > span { + .diff-title { font-family: $monospace_font; word-break: break-all; - margin-right: 200px; display: block; .file-mode { - margin-left: 10px; color: #777; } } - .diff-btn-group { - float: right; - position: absolute; - top: 5px; - right: 15px; - + .diff-controls { .btn { padding: 0px 10px; font-size: 13px; @@ -90,12 +84,12 @@ } } - tr.line_holder.parallel{ + tr.line_holder.parallel { .old_line, .new_line, .diff_line { min-width: 50px; } - td.line_content.parallel{ + td.line_content.parallel { width: 50%; } } @@ -105,7 +99,7 @@ padding: 0px; border: none; background: $background-color; - color: rgba(0,0,0,0.3); + color: rgba(0, 0, 0, 0.3); padding: 0px 5px; border-right: 1px solid $border-color; text-align: right; @@ -117,7 +111,7 @@ float: left; width: 35px; font-weight: normal; - color: rgba(0,0,0,0.3); + color: rgba(0, 0, 0, 0.3); &:hover { text-decoration: underline; } @@ -168,7 +162,7 @@ background: #ddd; text-align: center; padding: 30px; - .wrap{ + .wrap { display: inline-block; } @@ -176,7 +170,7 @@ display: inline-block; background-color: #fff; line-height: 0; - img{ + img { border: 1px solid #FFF; background: image-url('trans_bg.gif'); max-width: 100%; @@ -189,21 +183,21 @@ border: 1px solid $added; } } - .image-info{ + .image-info { font-size: 12px; margin: 5px 0 0 0; color: grey; } - .view.swipe{ + .view.swipe { position: relative; - .swipe-frame{ + .swipe-frame { display: block; margin: auto; position: relative; } - .swipe-wrap{ + .swipe-wrap { overflow: hidden; border-left: 1px solid #999; position: absolute; @@ -211,33 +205,33 @@ top: 13px; right: 7px; } - .frame{ + .frame { top: 0; right: 0; position: absolute; - &.deleted{ + &.deleted { margin: 0; display: block; top: 13px; right: 7px; } } - .swipe-bar{ + .swipe-bar { display: block; height: 100%; width: 15px; z-index: 100; position: absolute; cursor: pointer; - &:hover{ - .top-handle{ + &:hover { + .top-handle { background-position: -15px 3px; } - .bottom-handle{ + .bottom-handle { background-position: -15px -11px; } - }; - .top-handle{ + } + .top-handle { display: block; height: 14px; width: 15px; @@ -245,7 +239,7 @@ top: 0px; background: image-url('swipemode_sprites.gif') 0 3px no-repeat; } - .bottom-handle{ + .bottom-handle { display: block; height: 14px; width: 15px; @@ -254,9 +248,10 @@ background: image-url('swipemode_sprites.gif') 0 -11px no-repeat; } } - } //.view.swipe - .view.onion-skin{ - .onion-skin-frame{ + } + //.view.swipe + .view.onion-skin { + .onion-skin-frame { display: block; margin: auto; position: relative; @@ -267,7 +262,7 @@ top: 0px; left: 0px; } - .controls{ + .controls { display: block; height: 14px; width: 300px; @@ -277,7 +272,7 @@ left: 50%; margin-left: -150px; - .drag-track{ + .drag-track { display: block; position: absolute; left: 12px; @@ -317,39 +312,40 @@ background: image-url('onion_skin_sprites.gif') -2px -10px no-repeat; } } - } //.view.onion-skin + } + //.view.onion-skin } - .view-modes{ + .view-modes { padding: 10px; text-align: center; background: #EEE; - ul, li{ + ul, li { list-style: none; margin: 0; padding: 0; display: inline-block; } - li{ + li { color: grey; border-left: 1px solid #c1c1c1; padding: 0 12px 0 16px; cursor: pointer; - &:first-child{ + &:first-child { border-left: none; } - &:hover{ + &:hover { text-decoration: underline; } - &.active{ - &:hover{ + &.active { + &:hover { text-decoration: none; } cursor: default; color: #333; } - &.disabled{ + &.disabled { display: none; } } @@ -373,3 +369,37 @@ float: right; margin-top: -5px; } + +// Mobile +@media (max-width: 480px) { + .diff-title { + margin: 0; + + .file-mode { + display: none; + } + } + + .diff-controls { + position: static; + text-align: center; + } +} + +// Bigger screens +@media (min-width: 481px) { + .diff-title { + margin-right: 200px; + + .file-mode { + margin-left: 10px; + } + } + + .diff-controls { + float: right; + position: absolute; + top: 5px; + right: 15px; + } +} diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index b5c61f7f91d..9da085a3473 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -54,21 +54,22 @@ margin-top: -15px; padding: 10px 0; margin-bottom: 0; - color: $gl-gray; + color: #5c5d5e; font-size: 16px; .author { - color: $gl-gray; + color: #5c5d5e; } .issue-id { - font-size: 19px; - color: $gl-text-color; + color: #5c5d5e; } } .issue-title { margin: 0; + font-size: 23px; + color: #313236; } .description { diff --git a/app/assets/stylesheets/ci/lint.scss b/app/assets/stylesheets/pages/lint.scss index 6d2bd33b28b..6d2bd33b28b 100644 --- a/app/assets/stylesheets/ci/lint.scss +++ b/app/assets/stylesheets/pages/lint.scss diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index d8c8e5ad0a4..a1a5208c59c 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -3,12 +3,11 @@ * */ .mr-state-widget { - background: #f8fafc; + background: #F7F8FA; margin-bottom: 20px; color: $gl-gray; - border: 1px solid #eef0f2; - @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.05)); - @include border-radius(3px); + border: 1px solid #dce0e6; + @include border-radius(2px); form { margin-bottom: 0; @@ -77,10 +76,16 @@ padding: 15px; } + .normal { + color: #5c5d5e; + } + .mr-widget-body { h4 { - font-weight: bold; + font-weight: 600; + font-size: 17px; margin: 5px 0; + color: #313236; } p:last-child { @@ -97,14 +102,26 @@ } } -.merge-request .merge-request-tabs{ +.merge-request .merge-request-tabs { @include nav-menu; margin: -$gl-padding; padding: $gl-padding; text-align: center; - border-top: 1px solid #e7e9ed; - margin-top: 18px; - margin-bottom: 3px; + margin-bottom: 1px; +} + +// Mobile +@media (max-width: 480px) { + .merge-request .merge-request-tabs { + margin: 0; + padding: 0; + + li { + a { + padding: 0; + } + } + } } .mr_source_commit, @@ -120,10 +137,12 @@ } .label-branch { - color: #222; + color: #313236; font-family: $monospace_font; font-weight: bold; overflow: hidden; + font-size: 14px; + margin: 0 3px; } .mr-list { diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index fdc2c3332df..4392f08942b 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -65,19 +65,18 @@ .note-image-attach { @extend .col-md-4; - @extend .thumbnail; margin-left: 45px; float: none; } .common-note-form { margin: 0; - background: #f8fafc; + background: #F7F8FA; padding: $gl-padding; margin-left: -$gl-padding; margin-right: -$gl-padding; - border-right: 1px solid #f1f2f4; - border-top: 1px solid #f1f2f4; + border-right: 1px solid #ECEEF1; + border-top: 1px solid #ECEEF1; margin-bottom: -$gl-padding; } @@ -168,7 +167,7 @@ .comment-hints { color: #999; background: #FFF; - padding: 5px; + padding: 7px; margin-top: -11px; border: 1px solid $border-color; font-size: 13px; diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 2a77f065aed..abb03b07f51 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -18,7 +18,7 @@ ul.notes { font-size: 14px; padding-top: 10px; padding-bottom: 10px; - background: #f8fafc; + background: #FDFDFD; .timeline-icon { .avatar { diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 818aa10aefe..f7a22849003 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -13,11 +13,15 @@ .edit_project { fieldset.features { .control-label { - font-weight: bold; + font-weight: normal; } } } +.project-edit-content { + padding: 7px; +} + .project-name-holder { .help-inline { vertical-align: top; @@ -59,6 +63,7 @@ } p { + padding: 0 $gl-padding; color: #5c5d5e; } } @@ -92,8 +97,7 @@ margin-bottom: 0px; .btn { - @include bnt-project; - @include btn-info; + @include btn-gray; .count { display: inline-block; @@ -149,7 +153,7 @@ .input-group-btn { .btn { - @include bnt-project; + @include btn-gray; @include btn-middle; &:hover { @@ -183,8 +187,8 @@ margin: 0 12px 0 12px; .btn{ - @include bnt-project; - @include btn-info; + @include btn-gray; + @include btn-default; } .dropdown-toggle { @@ -251,18 +255,19 @@ margin-bottom: 10px; i { - margin: 0 3px; + margin: 2px 0; font-size: 20px; } .option-title { - font-weight: bold; + font-weight: normal; display: inline-block; + color: #313236; } .option-descr { - margin-left: 36px; - color: $gray; + margin-left: 29px; + color: #54565b; } } } @@ -376,8 +381,8 @@ table.table.protected-branches-list tr.no-border { } .nav > li > a { - @include btn-info; - @include bnt-project; + @include btn-default; + @include btn-gray; background-color: transparent; border: 1px solid #f7f8fa; @@ -437,7 +442,7 @@ pre.light-well { .btn-remove { @include btn-middle; - @include btn-remove; + @include btn-red; float: left !important; } @@ -506,8 +511,3 @@ pre.light-well { margin-top: -1px; } } - -.inline-form { - display: inline-block; -} - diff --git a/app/assets/stylesheets/ci/runners.scss b/app/assets/stylesheets/pages/runners.scss index 2b15ab83129..2b15ab83129 100644 --- a/app/assets/stylesheets/ci/runners.scss +++ b/app/assets/stylesheets/pages/runners.scss diff --git a/app/assets/stylesheets/ci/status.scss b/app/assets/stylesheets/pages/status.scss index a7d3b2197f1..a7d3b2197f1 100644 --- a/app/assets/stylesheets/ci/status.scss +++ b/app/assets/stylesheets/pages/status.scss diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index 271cc547e2b..dadd86e88cc 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/app/assets/stylesheets/pages/tree.scss @@ -1,7 +1,7 @@ .tree-holder { - .tree-content-holder { - float: left; - width: 100%; + .tree-table-holder { + margin-left: -$gl-padding; + margin-right: -$gl-padding; } .tree_progress { @@ -13,10 +13,15 @@ } .tree-table { - @extend .table; - @include border-radius(0); + margin-bottom: 0; tr { + > td, > th { + padding: 10px $gl-padding; + line-height: 32px; + border-color: $table-border-color !important; + } + &:hover { td { background: $hover; @@ -27,9 +32,9 @@ } &.selected { td { - background: $background-color; - border-top: 1px solid #EEE; - border-bottom: 1px solid #EEE; + background: $gray-dark; + border-top: 1px solid $border-gray-dark; + border-bottom: 1px solid $border-gray-dark; } } } @@ -85,19 +90,6 @@ margin-right: 15px; } -.readme-holder { - margin: 0 auto; - - .readme-file-title { - font-size: 14px; - font-weight: bold; - margin-bottom: 20px; - color: #777; - border-bottom: 1px solid #DDD; - padding: 10px 0; - } -} - .blob-commit-info { list-style: none; margin: 0; diff --git a/app/assets/stylesheets/ci/xterm.scss b/app/assets/stylesheets/pages/xterm.scss index 532dede0b23..9a50096c0d0 100644 --- a/app/assets/stylesheets/ci/xterm.scss +++ b/app/assets/stylesheets/pages/xterm.scss @@ -1,4 +1,4 @@ -.ci-body { +.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 |