Skip to content

G
gitlab-ce
Commit 1254f226 authored by Clement Ho's avatar Clement Ho
Browse files
Options

Merge branch '50632-combine-color-duplicates' into 'master' 

Resolve "[SCSS Variables Cleanup] Combine all duplicated hex colors in variables.scss", Part 1

See merge request gitlab-org/gitlab-ce!21375
parents 23562699 0459c78f
Show whitespace changes
Inline Side-by-side
Showing with 59 additions and 254 deletions
app/assets/stylesheets/framework.scss
View file @ 1254f226
......@@ -27,7 +27,6 @@
@import 'framework/header';
@import 'framework/highlight';
@import 'framework/issue_box';
@import 'framework/jquery';
@import 'framework/lists';
@import 'framework/logo';
@import 'framework/markdown_area';
......
app/assets/stylesheets/framework/avatar.scss
View file @ 1254f226
......@@ -69,7 +69,7 @@
.identicon {
text-align: center;
vertical-align: top;
color: $identicon-fg-color;
color: $gl-gray-700;
background-color: $gray-darker;
// Sizes
......
app/assets/stylesheets/framework/buttons.scss
View file @ 1254f226
......@@ -369,7 +369,7 @@
}
.clone-dropdown-btn a {
color: $dropdown-link-color;
color: $gl-gray-700;
&:hover {
text-decoration: none;
......
app/assets/stylesheets/framework/common.scss
View file @ 1254f226
......@@ -43,7 +43,7 @@
color: $brand-info;
}
.hint { font-style: italic; color: $hint-color; }
.hint { font-style: italic; color: $gl-gray-400; }
.light { color: $gl-text-color; }
.slead {
......@@ -70,13 +70,6 @@ pre {
padding: 0;
}
&.card.card-body-pre {
border: 1px solid $gray-darker;
background: $gray-light;
border-radius: 0;
color: $well-pre-color;
}
&.wrap {
word-break: break-word;
white-space: pre-wrap;
......@@ -121,49 +114,24 @@ hr {
text-decoration: none;
}
.back-link {
font-size: 14px;
}
table {
a code {
position: relative;
top: -2px;
margin-right: 3px;
}
td.permission-x {
background: $table-permission-x-bg !important;
text-align: center;
}
}
.loading {
margin: 20px auto;
height: 40px;
color: $loading-color;
color: $gl-gray-700;
font-size: 32px;
text-align: center;
}
span.update-author {
display: block;
color: $update-author-color;
font-weight: $gl-font-weight-normal;
font-style: italic;
strong {
font-weight: $gl-font-weight-bold;
font-style: normal;
}
}
.field_with_errors {
display: inline;
}
p.time {
color: $time-color;
color: $gl-gray-400;
font-size: 90%;
margin: 30px 3px 3px 2px;
}
......@@ -197,40 +165,11 @@ li.note {
background-color: inherit;
}
.project_member_show {
td:first-child {
color: $project-member-show-color;
}
}
.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-lg-6;
text-align: left;
margin-top: 40px;
pre {
background: $white-light;
border: 0;
font-size: 12px;
}
}
.error-message {
padding: 10px;
background: $red-400;
......@@ -258,7 +197,7 @@ li.note {
.gitlab-promo {
a {
color: $gl-promo-color;
color: $gl-gray-350;
margin-right: 30px;
}
}
......@@ -271,19 +210,6 @@ li.note {
}
}
.control-group {
.controls {
span {
&.descr {
position: relative;
top: 2px;
left: 5px;
color: $control-group-descr-color;
}
}
}
}
img.emoji {
height: 20px;
vertical-align: top;
......@@ -302,12 +228,6 @@ img.emoji {
margin-bottom: 10px;
}
.side-filters {
fieldset {
margin-bottom: 15px;
}
}
.footer-links {
margin-bottom: 20px;
......@@ -329,25 +249,6 @@ img.emoji {
text-align: center;
}
.header-with-avatar {
h3 {
margin: 0;
font-weight: $gl-font-weight-bold;
}
.username {
font-size: 18px;
color: $username-color;
margin-top: 8px;
}
.description {
font-size: $gl-font-size;
color: $description-color;
margin-top: 8px;
}
}
.dropzone .dz-preview .dz-progress {
border-color: $border-color !important;
......@@ -386,16 +287,6 @@ img.emoji {
}
}
.content-separator {
margin-left: -$gl-padding;
margin-right: -$gl-padding;
border-top: 1px solid $border-color;
}
.hide-bottom-border {
border-bottom: 0 !important;
}
.gl-accessibility {
&:focus {
display: flex;
......
app/assets/stylesheets/framework/dropdowns.scss
View file @ 1254f226
......@@ -607,25 +607,25 @@
width: 100%;
min-height: 30px;
padding: 0 7px;
color: $dropdown-input-color;
color: $gl-gray-700;
line-height: 30px;
border: 1px solid $dropdown-divider-color;
border-radius: 2px;
outline: 0;
&:focus {
color: $dropdown-link-color;
color: $gl-gray-700;
border-color: $blue-300;
box-shadow: 0 0 4px $dropdown-input-focus-shadow;
~ .fa {
color: $dropdown-link-color;
color: $gl-gray-700;
}
}
&:hover {
~ .fa {
color: $dropdown-link-color;
color: $gl-gray-700;
}
}
}
......@@ -890,7 +890,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
position: absolute;
top: 13px;
right: 25px;
color: $md-area-border;
color: $gray-100;
}
}
......@@ -929,7 +929,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
&:hover {
.frequent-items-item-avatar-container .avatar {
border-color: $md-area-border;
border-color: $gray-100;
}
}
......
app/assets/stylesheets/framework/files.scss
View file @ 1254f226
......@@ -184,7 +184,7 @@
&.line-numbers {
float: none;
border-left: 1px solid $blame-line-numbers-border;
border-left: 1px solid $gl-gray-100;
i {
float: none;
......
app/assets/stylesheets/framework/jquery.scss deleted 100644 → 0
View file @ 23562699
.ui-widget {
font-family: $regular-font;
font-size: $font-size-base;
.ui-state-default {
border: 1px solid $white-light;
background: $white-light;
color: $jq-ui-default-color;
}
.ui-state-highlight {
border: 0;
background: transparent;
}
}
app/assets/stylesheets/framework/markdown_area.scss
View file @ 1254f226
......@@ -122,7 +122,7 @@
.markdown-area {
border-radius: 0;
background: $white-light;
border: 1px solid $md-area-border;
border: 1px solid $gray-100;
min-height: 140px;
max-height: 500px;
padding: 5px;
......
app/assets/stylesheets/framework/mixins.scss
View file @ 1254f226
......@@ -20,7 +20,7 @@
display: inline-block;
overflow-x: auto;
border: 0;
border-color: $md-area-border;
border-color: $gray-100;
@supports (width: fit-content) {
display: block;
......@@ -29,11 +29,11 @@
tr {
th {
border-bottom: solid 2px $md-area-border;
border-bottom: solid 2px $gray-100;
}
td {
border-color: $md-area-border;
border-color: $gray-100;
}
}
}
......
app/assets/stylesheets/framework/selects.scss
View file @ 1254f226
......@@ -237,7 +237,7 @@
}
.group-path {
color: $group-path-color;
color: $gl-gray-400;
}
}
......@@ -257,7 +257,7 @@
.namespace-result {
.namespace-kind {
color: $namespace-kind-color;
color: $gl-gray-350;
font-weight: $gl-font-weight-normal;
}
......
app/assets/stylesheets/framework/toggle.scss
View file @ 1254f226
......@@ -31,7 +31,7 @@
height: 24px;
cursor: pointer;
user-select: none;
background: $feature-toggle-color-disabled;
background: $gl-gray-400;
border-radius: 12px;
padding: 3px;
transition: all .4s ease;
......@@ -61,7 +61,7 @@
}
.toggle-icon-svg {
fill: $feature-toggle-color-disabled;
fill: $gl-gray-400;
}
.toggle-status-checked {
......
app/assets/stylesheets/framework/typography.scss
View file @ 1254f226
......@@ -61,12 +61,12 @@
padding: 3px 5px;
font-size: 11px;
line-height: 10px;
color: $kdb-color;
color: $gl-gray-700;
vertical-align: middle;
background-color: $kdb-bg;
border-width: 1px;
border-style: solid;
border-color: $kdb-border $kdb-border $kdb-border-bottom;
border-color: $gl-gray-200 $gl-gray-200 $kdb-border-bottom;
border-image: none;
border-radius: 3px;
box-shadow: 0 -1px 0 $kdb-shadow inset;
......
app/assets/stylesheets/framework/variables.scss
View file @ 1254f226
......@@ -31,6 +31,14 @@ $gray-dark: darken($gray-light, $darken-dark-factor);
$gray-darker: #eee;
$gray-darkest: #c4c4c4;
$gl-gray-100: #dddddd;
$gl-gray-200: #cccccc;
$gl-gray-350: #aaaaaa;
$gl-gray-400: #999999;
$gl-gray-500: #777777;
$gl-gray-600: #666666;
$gl-gray-700: #555555;
$green-50: #f1fdf6;
$green-100: #dcf5e7;
$green-200: #b3e6c8;
......@@ -206,11 +214,6 @@ $gl-header-color: #4c4e54;
$list-border: rgba(0, 0, 0, 0.05);
$list-text-height: 42px;
/*
* Markdown
*/
$md-area-border: #ddd;
/*
* Code
*/
......@@ -241,7 +244,6 @@ $input-horizontal-padding: 12px;
/*
* Misc
*/
$progress-color: #c0392b;
$header-height: 40px;
$ide-statusbar-height: 25px;
$fixed-layout-width: 1280px;
......@@ -256,14 +258,7 @@ $btn-side-margin: 10px;
$btn-sm-side-margin: 7px;
$btn-margin-5: 5px;
$sidebar-block-hover-color: #ebebeb;
$group-path-color: #999;
$namespace-kind-color: #aaa;
$panel-heading-link-color: #777;
$graph-author-email-color: #777;
$count-arrow-border: #dce0e5;
$save-project-loader-color: #555;
$divergence-graph-bar-bg: #ccc;
$divergence-graph-separator-bg: #ccc;
$general-hover-transition-duration: 100ms;
$general-hover-transition-curve: linear;
$highlight-changes-color: rgb(235, 255, 232);
......@@ -276,20 +271,8 @@ $project-title-row-height: 24px;
/*
* Common component specific colors
*/
$hint-color: #999;
$well-pre-color: #555;
$loading-color: #555;
$update-author-color: #999;
$user-mention-bg: rgba($blue-500, 0.044);
$user-mention-bg-hover: rgba($blue-500, 0.15);
$time-color: #999;
$project-member-show-color: #aaa;
$gl-promo-color: #aaa;
$control-group-descr-color: #666;
$table-permission-x-bg: #d9edf7;
$username-color: #666;
$description-color: #666;
$profiler-border: #eee;
/* tanuki logo colors */
$tanuki-red: #e24329;
......@@ -320,9 +303,7 @@ $line-select-yellow: #fcf8e7;
$line-select-yellow-dark: #f0e2bd;
$dark-diff-match-bg: rgba(255, 255, 255, 0.3);
$dark-diff-match-color: rgba(255, 255, 255, 0.1);
$file-mode-changed: #777;
$diff-image-info-color: gray;
$diff-swipe-border: #999;
$diff-view-modes-color: gray;
$diff-view-modes-border: #c1c1c1;
$diff-jagged-border-gradient-color: darken($white-normal, 8%);
......@@ -342,12 +323,10 @@ $dropdown-width: 300px;
$dropdown-min-height: 40px;
$dropdown-max-height: 312px;
$dropdown-vertical-offset: 4px;
$dropdown-link-color: #555;
$dropdown-empty-row-bg: rgba(#000, 0.04);
$dropdown-shadow-color: rgba(#000, 0.1);
$dropdown-divider-color: rgba(#000, 0.1);
$dropdown-title-btn-color: #bfbfbf;
$dropdown-input-color: #555;
$dropdown-input-fa-color: #c7c7c7;
$dropdown-input-focus-shadow: rgba($blue-300, 0.4);
$dropdown-loading-bg: rgba(#fff, 0.6);
......@@ -420,14 +399,8 @@ $location-icon-color: #e7e9ed;
$note-disabled-comment-color: #b2b2b2;
$note-targe3-outside: #fffff0;
$note-targe3-inside: #ffffd3;
$note-line2-border: #ddd;
$note-icon-gutter-width: 55px;
/*
* Zen
*/
$zen-control-color: #555;
/*
* Identicon
*/
......@@ -437,7 +410,6 @@ $identicon-indigo: #e8eaf6;
$identicon-blue: #e3f2fd;
$identicon-teal: #e0f2f1;
$identicon-orange: #fbe9e7;
$identicon-fg-color: #555555;
/*
* Calendar
......@@ -505,17 +477,9 @@ $commit-message-text-area-bg: rgba(0, 0, 0, 0);
$common-gray-light: #bbb;
$common-gray-dark: #444;
/*
* Events
*/
$events-pre-color: #777;
$events-note-icon-color: #777;
$events-body-border: #ddd;
/*
* Files
*/
$blame-line-numbers-border: #ddd;
$logs-li-color: #888;
$logs-p-color: #333;
......@@ -534,8 +498,6 @@ $input-short-md-width: 280px;
* Help
*/
$document-index-color: #888;
$help-shortcut-color: #999;
$help-shortcut-mapping-color: #555;
$help-shortcut-header-color: #333;
/*
......@@ -545,12 +507,6 @@ $issues-today-bg: #f3fff2;
$issues-today-border: #e1e8d5;
$compare-display-color: #888;
/*
* jQuery UI
*/
$jq-ui-border: #ddd;
$jq-ui-default-color: #777;
/*
* Label
*/
......@@ -574,35 +530,20 @@ $fade-mask-transition-curve: ease-in-out;
*/
$login-brand-holder-color: #888;
/*
* Nav
*/
$nav-link-gray: #959494;
$nav-toggle-gray: #666;
/*
* Notify
*/
$notify-details: #777;
$notify-footer: #777;
/*
* Projects
*/
$project-option-descr-color: #54565b;
$project-breadcrumb-color: #999;
$project-network-controls-color: #888;
$feature-toggle-color: #fff;
$feature-toggle-text-color: #fff;
$feature-toggle-color-disabled: #999;
$feature-toggle-color-enabled: #4a8bee;
/*
Stat Graph
*/
$stat-graph-common-bg: #f3f3f3;
$stat-graph-axis-fill: #aaa;
$stat-graph-selection-fill: #333;
$stat-graph-selection-stroke: #333;
......@@ -612,18 +553,10 @@ $stat-graph-selection-stroke: #333;
$select2-drop-shadow1: rgba(76, 86, 103, 0.247059);
$select2-drop-shadow2: rgba(31, 37, 50, 0.317647);
/*
* Todo
*/
$todo-body-pre-color: #777;
$todo-body-border: #ddd;
/*
* Typography
*/
$kdb-bg: #fcfcfc;
$kdb-color: #555;
$kdb-border: #ccc;
$kdb-border-bottom: #bbb;
$kdb-shadow: #bbb;
$body-text-shadow: rgba(255, 255, 255, 0.01);
......@@ -632,7 +565,6 @@ $body-text-shadow: rgba(255, 255, 255, 0.01);
* UI Dev Kit
*/
$ui-dev-kit-example-color: #bbb;
$ui-dev-kit-example-border: #ddd;
/*
Pipeline Graph
......@@ -666,12 +598,10 @@ $dropdown-animation-timing: cubic-bezier(0.23, 1, 0.32, 1);
/*
Performance Bar
*/
$perf-bar-text: #999;
$perf-bar-production: #222;
$perf-bar-staging: #291430;
$perf-bar-development: #4c1210;
$perf-bar-bucket-bg: #111;
$perf-bar-bucket-color: #ccc;
$perf-bar-bucket-box-shadow-from: rgba($white-light, 0.2);
$perf-bar-bucket-box-shadow-to: rgba($black, 0.25);
......
app/assets/stylesheets/framework/zen.scss
View file @ 1254f226
......@@ -35,7 +35,7 @@
.zen-control {
padding: 0;
color: $zen-control-color;
color: $gl-gray-700;
background: none;
border: 0;
}
......
app/assets/stylesheets/notify.scss
View file @ 1254f226
......@@ -7,12 +7,12 @@ img {
p.details {
font-style: italic;
color: $notify-details;
color: $gl-gray-500;
}
.footer > p {
font-size: small;
color: $notify-footer;
color: $gl-gray-500;
}
pre.commit-message {
......
app/assets/stylesheets/pages/branches.scss
View file @ 1254f226
......@@ -23,7 +23,7 @@
.bar {
position: absolute;
height: 4px;
background-color: $divergence-graph-bar-bg;
background-color: $gl-gray-200;
}
.bar-behind {
......@@ -61,7 +61,7 @@
height: 18px;
margin: 5px 0 0;
float: left;
background-color: $divergence-graph-separator-bg;
background-color: $gl-gray-200;
}
}
......
app/assets/stylesheets/pages/diff.scss
View file @ 1254f226
......@@ -31,7 +31,7 @@
.file-mode-changed {
padding: 10px;
color: $file-mode-changed;
color: $gl-gray-500;
}
.suppressed-container {
......@@ -245,7 +245,7 @@
.swipe-wrap {
overflow: hidden;
border-left: 1px solid $diff-swipe-border;
border-left: 1px solid $gl-gray-400;
position: absolute;
display: block;
top: 13px;
......
app/assets/stylesheets/pages/environments.scss
View file @ 1254f226
......@@ -153,7 +153,7 @@
.x-axis path,
.y-axis path {
stroke: $stat-graph-axis-fill;
stroke: $gl-gray-350;
}
.label-x-axis-line,
......@@ -163,7 +163,7 @@
.y-axis {
line {
stroke: $stat-graph-axis-fill;
stroke: $gl-gray-350;
stroke-width: 1;
}
}
......
app/assets/stylesheets/pages/events.scss
View file @ 1254f226
......@@ -87,7 +87,7 @@
border: 0;
background: $gray-light;
border-radius: 0;
color: $events-pre-color;
color: $gl-gray-500;
overflow: hidden;
}
......@@ -104,7 +104,7 @@
}
.event-note-icon {
color: $events-pre-color;
color: $gl-gray-500;
float: left;
font-size: $gl-font-size;
line-height: 16px;
......
app/assets/stylesheets/pages/graph.scss
View file @ 1254f226
......@@ -20,7 +20,7 @@
.graphs {
.graph-author-email {
float: right;
color: $graph-author-email-color;
color: $gl-gray-500;
}
.graph-additions {
......@@ -58,7 +58,7 @@
.y-axis-label {
line {
stroke: $stat-graph-axis-fill;
stroke: $gl-gray-350;
}
text {
......
app/assets/stylesheets/pages/groups.scss
View file @ 1254f226
......@@ -263,7 +263,7 @@
height: 100%;
width: 100%;
background-color: transparent;
border: 2px outset $kdb-border;
border: 2px outset $gl-gray-200;
border-radius: 50%;
animation: spin-avatar 3s infinite linear;
}
......
app/assets/stylesheets/pages/help.scss
View file @ 1254f226
.shortcut-mappings {
font-size: 12px;
color: $help-shortcut-mapping-color;
color: $gl-gray-700;
tbody:first-child tr:first-child {
padding-top: 0;
......@@ -22,7 +22,7 @@
.shortcut {
padding-right: 10px;
color: $help-shortcut-color;
color: $gl-gray-400;
text-align: right;
white-space: nowrap;
}
......
app/assets/stylesheets/pages/merge_requests.scss
View file @ 1254f226
......@@ -910,7 +910,7 @@
opacity: .65;
&:hover {
color: $file-mode-changed;
color: $gl-gray-500;
text-decoration: none;
}
}
......
app/assets/stylesheets/pages/notes.scss
View file @ 1254f226
......@@ -94,8 +94,8 @@ ul.notes {
opacity: 0.5;
.dummy-avatar {
background-color: $kdb-border;
border: 1px solid darken($kdb-border, 25%);
background-color: $gl-gray-200;
border: 1px solid darken($gl-gray-200, 25%);
}
.note-headline-light,
......
app/assets/stylesheets/pages/projects.scss
View file @ 1254f226
......@@ -371,7 +371,7 @@
.save-project-loader {
margin-top: 50px;
margin-bottom: 50px;
color: $save-project-loader-color;
color: $gl-gray-700;
}
.transfer-project .select2-container {
......@@ -447,7 +447,7 @@
> li + li::before {
padding: 0 3px;
color: $project-breadcrumb-color;
color: $gl-gray-400;
}
a {
......
app/assets/stylesheets/pages/settings.scss
View file @ 1254f226
......@@ -249,7 +249,7 @@
}
.loading-metrics .metrics-load-spinner {
color: $loading-color;
color: $gl-gray-700;
}
.metrics-list {
......
app/assets/stylesheets/pages/todos.scss
View file @ 1254f226
......@@ -143,7 +143,7 @@
border: 0;
background: $gray-light;
border-radius: 0;
color: $todo-body-pre-color;
color: $gl-gray-500;
margin: 0 20px;
overflow: hidden;
}
......@@ -205,7 +205,7 @@
.todo-body {
margin: 0;
border-left: 2px solid $todo-body-border;
border-left: 2px solid $gl-gray-100;
padding-left: 10px;
}
}
......
app/assets/stylesheets/pages/ui_dev_kit.scss
View file @ 1254f226
......@@ -6,7 +6,7 @@
.example {
padding: 15px;
border: 1px dashed $ui-dev-kit-example-border;
border: 1px dashed $gl-gray-100;
margin-bottom: 15px;
&::before {
......
app/assets/stylesheets/performance_bar.scss
View file @ 1254f226
......@@ -11,10 +11,10 @@
height: $performance-bar-height;
background: $black;
line-height: $performance-bar-height;
color: $perf-bar-text;
color: $gl-gray-400;
select {
color: $perf-bar-text;
color: $gl-gray-400;
width: 200px;
}
......@@ -53,7 +53,7 @@
padding: 4px 6px;
font-family: Consolas, 'Liberation Mono', Courier, monospace;
line-height: 1;
color: $perf-bar-bucket-color;
color: $gl-gray-200;
border-radius: 3px;
box-shadow: 0 1px 0 $perf-bar-bucket-box-shadow-from,
inset 0 1px 2px $perf-bar-bucket-box-shadow-to;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7