diff options
author | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2016-12-12 16:26:21 -0600 |
---|---|---|
committer | Annabel Dunstone Gray <annabel.dunstone@gmail.com> | 2016-12-13 13:13:53 -0600 |
commit | 0b72554c1bb47c88361f9fbc6185f49767337368 (patch) | |
tree | 68786bac6940cc8660d28a8279d8e3eeb93aa041 /app/assets/stylesheets/framework | |
parent | e4a000478f327885fd9dcbc7d47ba77045cef139 (diff) | |
download | gitlab-ce-0b72554c1bb47c88361f9fbc6185f49767337368.tar.gz |
Finish refactoring graysvariables
Diffstat (limited to 'app/assets/stylesheets/framework')
19 files changed, 56 insertions, 81 deletions
diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss index dece5c3202b..9fc9bcebc44 100644 --- a/app/assets/stylesheets/framework/awards.scss +++ b/app/assets/stylesheets/framework/awards.scss @@ -12,8 +12,8 @@ z-index: 9; width: 300px; font-size: 14px; - background-color: $award-emoji-menu-bg; - border: 1px solid $award-emoji-menu-border; + background-color: $white-light; + border: 1px solid $border-white-light; border-radius: $border-radius-base; box-shadow: 0 6px 12px $award-emoji-menu-shadow; pointer-events: none; @@ -135,7 +135,7 @@ } .award-control-icon { - color: $award-emoji-new-btn-icon-color; + color: $border-gray-normal; margin-top: 1px; } } diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss index 95c02499271..9f02749f5ab 100644 --- a/app/assets/stylesheets/framework/blocks.scss +++ b/app/assets/stylesheets/framework/blocks.scss @@ -24,7 +24,7 @@ .row-content-block { margin-top: 0; margin-bottom: -$gl-padding; - background-color: $background-color; + background-color: $gray-light; padding: $gl-padding; margin-bottom: 0; border-top: 1px solid $white-dark; @@ -118,7 +118,7 @@ .cover-block { text-align: center; - background: $background-color; + background: $gray-light; padding-top: 44px; position: relative; diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index e6f03528d41..59ff17ad2c1 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -88,11 +88,11 @@ } @mixin btn-gray { - @include btn-color($gray-light, $border-gray-light, $gray-normal, $border-gray-normal, $gray-dark, $border-gray-dark, $gl-gray-dark); + @include btn-color($gray-light, $border-gray-normal, $gray-normal, $border-gray-normal, $gray-dark, $border-gray-dark, $gl-gray-dark); } @mixin btn-white { - @include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-white-dark, $gl-text-color); + @include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-gray-dark, $gl-text-color); } @mixin btn-with-margin { @@ -289,7 +289,7 @@ .active { box-shadow: $gl-btn-active-background; - border: 1px solid $border-white-dark !important; + border: 1px solid $border-gray-dark !important; background-color: $btn-active-gray-light !important; } } @@ -310,7 +310,7 @@ padding: 6px 16px; border-color: $border-color; color: $gray-darkest; - background-color: $background-color; + background-color: $gray-light; &:hover, &:active, @@ -319,7 +319,7 @@ box-shadow: none; border-color: $border-color; color: $gray-darkest; - background-color: $background-color; + background-color: $gray-light; } } @@ -344,8 +344,8 @@ } .btn-static { - background-color: $background-color !important; - border: 1px solid $border-gray-light; + background-color: $gray-light !important; + border: 1px solid $border-gray-normal; cursor: default; &:active { diff --git a/app/assets/stylesheets/framework/callout.scss b/app/assets/stylesheets/framework/callout.scss index 2a100980aca..e0e46dd73af 100644 --- a/app/assets/stylesheets/framework/callout.scss +++ b/app/assets/stylesheets/framework/callout.scss @@ -11,7 +11,7 @@ padding: $gl-padding; border-left: 3px solid $border-color; color: $text-color; - background: $background-color; + background: $gray-light; } .bs-callout h4 { diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index fd5f521e4a0..ecd540793d0 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -34,7 +34,7 @@ .dropdown-toggle { padding: 6px 8px 6px 10px; - background-color: $dropdown-toggle-bg; + background-color: $white-light; color: $gl-text-color; font-size: 14px; text-align: left; @@ -609,7 +609,7 @@ } .ui-datepicker-unselectable { - background-color: $calendar-unselectable-bg; + background-color: $gray-light; } } diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index ab0b81f77f7..88ed0a4a17e 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -19,7 +19,7 @@ .file-title { position: relative; - background-color: $background-color; + background-color: $gray-light; border-bottom: 1px solid $border-color; margin: 0; text-align: left; diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss index 89a51959571..940807fc399 100644 --- a/app/assets/stylesheets/framework/forms.scss +++ b/app/assets/stylesheets/framework/forms.scss @@ -22,7 +22,7 @@ input[type='text'].danger { margin-top: 0; margin-bottom: -$gl-padding; padding: $gl-padding; - background-color: $background-color; + background-color: $gray-light; border-top: 1px solid $border-color; } diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 74fd97f811e..971940773f7 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -9,7 +9,7 @@ header { &.navbar-empty { height: $header-height; background: $white-light; - border-bottom: 1px solid $btn-gray-hover; + border-bottom: 1px solid $white-normal; .center-logo { margin: 8px 0; @@ -27,7 +27,7 @@ header { z-index: 100; margin-bottom: 0; height: $header-height; - background-color: $background-color; + background-color: $gray-light; border: none; border-bottom: 1px solid $border-color; @@ -62,7 +62,7 @@ header { &:hover, &:focus, &:active { - background-color: $background-color; + background-color: $gray-light; color: darken($gl-gray-light, 30%); .todos-pending-count { @@ -84,7 +84,7 @@ header { padding: 6px 10px; &:hover { - background-color: $btn-gray-hover; + background-color: $white-normal; } &.active { @@ -100,10 +100,10 @@ header { font-size: 18px; padding: 6px 10px; border: none; - background-color: $background-color; + background-color: $gray-light; &:hover { - background-color: $btn-gray-hover; + background-color: $white-normal; } } } diff --git a/app/assets/stylesheets/framework/images.scss b/app/assets/stylesheets/framework/images.scss index 878f44116ba..09a569ad415 100644 --- a/app/assets/stylesheets/framework/images.scss +++ b/app/assets/stylesheets/framework/images.scss @@ -4,7 +4,7 @@ } .appearance-light-logo-preview { - background-color: $background-color; + background-color: $gray-light; max-width: 72px; padding: 10px; margin-bottom: 10px; diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss index 389ead37366..e96cd671e34 100644 --- a/app/assets/stylesheets/framework/lists.scss +++ b/app/assets/stylesheets/framework/lists.scss @@ -36,7 +36,7 @@ color: $list-warning-row-color; } - &.smoke { background-color: $background-color; } + &.smoke { background-color: $gray-light; } &:not(.ui-sort-disabled):hover { background: $row-hover; @@ -46,7 +46,7 @@ border-bottom: none; &.bottom { - background: $background-color; + background: $gray-light; } } @@ -59,7 +59,7 @@ p { padding-top: 1px; margin: 0; - color: $gray-dark; + color: $white-normal; img { position: relative; @@ -113,7 +113,7 @@ ul.content-list { padding: 0; li { - border-color: $table-border-color; + border-color: $white-normal; font-size: $list-font-size; color: $list-text-color; @@ -186,7 +186,7 @@ ul.content-list { &.list-placeholder { background-color: $gray-light; - border: dotted 1px $gray-dark; + border: dotted 1px $white-normal; margin: 1px 0; min-height: 52px; } diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss index cf298773d58..e30d81d09f0 100644 --- a/app/assets/stylesheets/framework/markdown_area.scss +++ b/app/assets/stylesheets/framework/markdown_area.scss @@ -114,7 +114,7 @@ // Border around images in issue and MR comments. img:not(.emoji) { - border: 1px solid $table-border-gray; + border: 1px solid $white-normal; padding: 5px; margin: 5px 0; // Ensure that image does not exceed viewport diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss index 26d290976dc..e4affbb1be1 100644 --- a/app/assets/stylesheets/framework/nav.scss +++ b/app/assets/stylesheets/framework/nav.scss @@ -87,10 +87,10 @@ &.sub-nav { text-align: center; - background-color: $dark-background-color; + background-color: $gray-normal; .container-fluid { - background-color: $dark-background-color; + background-color: $gray-normal; margin-bottom: 0; } @@ -117,7 +117,7 @@ .top-area { @include clearfix; - border-bottom: 1px solid $btn-gray-hover; + border-bottom: 1px solid $white-normal; .nav-text { padding-top: 16px; @@ -289,7 +289,7 @@ top: $header-height; width: 100%; z-index: 11; - background: $background-color; + background: $gray-light; border-bottom: 1px solid $border-color; transition: padding $sidebar-transition-duration; text-align: center; @@ -352,7 +352,7 @@ } .fade-right { - @include fade(left, $background-color); + @include fade(left, $gray-light); right: -5px; .fa { @@ -361,7 +361,7 @@ } .fade-left { - @include fade(right, $background-color); + @include fade(right, $gray-light); left: -5px; .fa { @@ -372,7 +372,7 @@ &.sub-nav-scroll { .fade-right { - @include fade(left, $dark-background-color); + @include fade(left, $gray-normal); right: 0; .fa { @@ -381,7 +381,7 @@ } .fade-left { - @include fade(right, $dark-background-color); + @include fade(right, $gray-normal); left: 0; .fa { diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss index fde1431b13e..9ab17e67d4c 100644 --- a/app/assets/stylesheets/framework/selects.scss +++ b/app/assets/stylesheets/framework/selects.scss @@ -39,7 +39,7 @@ } &:hover { - background-color: $gray-dark; + background-color: $white-normal; border-color: $border-white-normal; color: $gl-text-color; } @@ -108,7 +108,7 @@ border-color: $input-border; color: $gl-text-color; line-height: 15px; - background-color: $background-color; + background-color: $gray-light; background-image: none; .select2-search-choice-close { diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 0aa609b8dd5..46a06cd7eab 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -23,7 +23,7 @@ .sidebar-wrapper { z-index: 1000; - background: $background-color; + background: $gray-light; .nicescroll-rails-hr { // TODO: Figure out why nicescroll doesn't hide horizontal bar diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss index 5d0ca63ea08..6d9fa74a030 100644 --- a/app/assets/stylesheets/framework/tables.scss +++ b/app/assets/stylesheets/framework/tables.scss @@ -31,7 +31,7 @@ table { } th { - background-color: $background-color; + background-color: $gray-light; font-weight: normal; border-bottom: none; @@ -41,7 +41,7 @@ table { } td { - border-color: $table-border-color; + border-color: $white-normal; } } } diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss index 875cded8b4e..6078505807e 100644 --- a/app/assets/stylesheets/framework/timeline.scss +++ b/app/assets/stylesheets/framework/timeline.scss @@ -6,7 +6,7 @@ .timeline-entry { padding: $gl-padding $gl-btn-padding 11px; - border-color: $table-border-color; + border-color: $white-normal; color: $gl-gray; border-bottom: 1px solid $border-white-light; diff --git a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss index c731a8f222f..876adf7f712 100644 --- a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss +++ b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss @@ -78,7 +78,7 @@ $pagination-active-bg: $white-light; $pagination-active-border: $border-color; $pagination-disabled-color: #cdcdcd; -$pagination-disabled-bg: $background-color; +$pagination-disabled-bg: $gray-light; $pagination-disabled-border: $border-color; @@ -117,8 +117,8 @@ $alert-border-radius: 0; $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-default-heading-bg: $gray-light; +$panel-footer-bg: $gray-light; $panel-inner-border: $border-color; //== Wells @@ -153,8 +153,8 @@ $nav-link-padding: 13px $gl-padding; //== Code // //## -$pre-bg: $background-color !default; +$pre-bg: $gray-light !default; $pre-color: $gl-gray !default; $pre-border-color: $border-color; -$table-bg-accent: $background-color; +$table-bg-accent: $gray-light; diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 00ac5e82181..936aaf38254 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -17,14 +17,13 @@ $darken-dark-factor: 10%; $darken-border-factor: 5%; $white-light: #fff; -$white-normal: darken($white-light, $darken-normal-factor); -$white-dark: darken($white-light, $darken-dark-factor); +$white-normal: #f0f0f0; +$white-dark: #eaeaea; $gray-lightest: #fdfdfd; $gray-light: #fafafa; $gray-lighter: #f9f9f9; -$gray-normal: darken($gray-light, $darken-normal-factor); -$gray-dark: darken($gray-light, $darken-dark-factor); +$gray-normal: #f5f5f5; $gray-darker: #eee; $gray-darkest: #c4c4c4; @@ -55,11 +54,9 @@ $black-transparent: rgba(0, 0, 0, 0.3); $border-white-light: darken($white-light, $darken-border-factor); $border-white-normal: darken($white-normal, $darken-border-factor); -$border-white-dark: darken($white-dark, $darken-border-factor); -$border-gray-light: darken($gray-light, $darken-border-factor); $border-gray-normal: darken($gray-normal, $darken-border-factor); -$border-gray-dark: darken($gray-dark, $darken-border-factor); +$border-gray-dark: darken($white-normal, $darken-border-factor); $border-green-extra-light: #9adb84; $border-green-light: darken($green-light, $darken-border-factor); @@ -78,9 +75,6 @@ $border-red-light: darken($red-light, $darken-border-factor); $border-red-normal: darken($red-normal, $darken-border-factor); $border-red-dark: darken($red-dark, $darken-border-factor); -$help-well-bg: $gray-light; -$help-well-border: #e5e5e5; - $warning-message-bg: #fbf2d9; $warning-message-color: #9e8e60; $warning-message-border: #f0e2bb; @@ -90,9 +84,6 @@ $warning-message-border: #f0e2bb; */ $border-color: #e5e5e5; $focus-border-color: #3aabf0; -$table-border-color: #f0f0f0; -$background-color: $gray-light; -$dark-background-color: #f5f5f5; $well-expand-item: #e8f2f7; $well-inner-border: #eef0f2; $well-light-border: #f1f1f1; @@ -166,7 +157,6 @@ $fixed-layout-width: 1280px; $error-exclamation-point: #e62958; $border-radius-default: 2px; $settings-icon-size: 18px; -$provider-btn-group-border: #e5e5e5; $provider-btn-not-active-color: #4688f1; $link-underline-blue: #4a8bee; $active-item-blue: #4a8bee; @@ -241,8 +231,6 @@ $line-removed-dark: #fac5cd; $line-number-old: #f9d7dc; $line-number-new: #ddfbe6; $line-number-select: #fbf2da; -$match-line: $gray-light; -$table-border-gray: #f0f0f0; $line-target-blue: #f6faff; $line-select-yellow: #fcf8e7; $line-select-yellow-dark: #f0e2bd; @@ -252,7 +240,6 @@ $file-mode-changed: #777; $file-mode-changed: #777; $diff-image-bg: #ddd; $diff-image-info-color: grey; -$diff-image-img-bg: #e5e5e5; $diff-swipe-border: #999; $diff-view-modes-color: grey; $diff-view-modes-border: #c1c1c1; @@ -280,10 +267,7 @@ $dropdown-input-focus-border: $focus-border-color; $dropdown-input-focus-shadow: rgba($dropdown-input-focus-border, .4); $dropdown-loading-bg: rgba(#fff, .6); $dropdown-chevron-size: 10px; - -$dropdown-toggle-bg: #fff; -$dropdown-toggle-border-color: #e5e5e5; -$dropdown-toggle-active-border-color: darken($dropdown-toggle-border-color, 14%); +$dropdown-toggle-active-border-color: darken($border-color, 14%); /* @@ -291,15 +275,11 @@ $dropdown-toggle-active-border-color: darken($dropdown-toggle-border-color, 14%) */ $btn-active-gray: #ececec; $btn-active-gray-light: e4e7ed; -$btn-gray-hover: #eee; /* * Award emoji */ -$award-emoji-menu-bg: #fff; -$award-emoji-menu-border: #f1f2f4; $award-emoji-menu-shadow: rgba(0,0,0,.175); -$award-emoji-new-btn-icon-color: #dcdcdc; /* * Search Box @@ -307,7 +287,6 @@ $award-emoji-new-btn-icon-color: #dcdcdc; $search-input-border-color: rgba(#4688f1, .8); $search-input-focus-shadow-color: $dropdown-input-focus-shadow; $search-input-width: 220px; -$location-badge-bg: $dark-background-color; $location-badge-active-bg: #4f91f8; $location-icon-color: #e7e9ed; @@ -316,9 +295,7 @@ $location-icon-color: #e7e9ed; */ $notes-light-color: #8e8e8e; $notes-role-color: #8e8e8e; -$notes-role-border-color: #e4e4e4; $note-disabled-comment-color: #b2b2b2; -$note-form-border-color: #e5e5e5; $note-targe3-outside: #fffff0; $note-targe3-inside: #ffffd3; $note-line2-border: #ddd; @@ -334,7 +311,6 @@ $zen-control-color: #555; */ $calendar-hover-bg: #ecf3fe; $calendar-border-color: rgba(#000, .1); -$calendar-unselectable-bg: $gray-light; $calendar-user-contrib-text: #959494; /* @@ -445,7 +421,6 @@ $help-shortcut-header-color: #333; /* * Issues */ -$issues-border: #e5e5e5; $issues-today-bg: #f3fff2; $issues-today-border: #e1e8d5; diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss index f2860dfe84d..f9c850ebdc8 100644 --- a/app/assets/stylesheets/framework/wells.scss +++ b/app/assets/stylesheets/framework/wells.scss @@ -1,5 +1,5 @@ .info-well { - background: $background-color; + background: $gray-light; color: $gl-gray; border: 1px solid $border-color; border-radius: $border-radius-default; @@ -45,7 +45,7 @@ } .light-well { - background-color: $background-color; + background-color: $gray-light; padding: 15px; } |