Commit d6d22a5d authored by Sam Rose's avatar Sam Rose

Enable ColorVariable in scss-lint

parent 99453027
......@@ -30,7 +30,7 @@ linters:
# variable declarations. They should be referred to via variables everywhere
# else.
ColorVariable:
enabled: false
enabled: true
# Which form of comments to prefer in CSS.
Comment:
......
......@@ -8,7 +8,7 @@
float: left;
margin-right: 15px;
border-radius: $avatar_radius;
border: 1px solid rgba(0, 0, 0, .1);
border: 1px solid $avatar-border;
&.s16 { @include avatar-size(16px, 6px); }
&.s20 { @include avatar-size(20px, 7px); }
&.s24 { @include avatar-size(24px, 8px); }
......
......@@ -41,7 +41,7 @@
}
&.white {
background-color: white;
background-color: $white-light;
}
&.top-block {
......@@ -158,7 +158,7 @@
p {
padding: 0 $gl-padding;
color: #5c5d5e;
color: $gl-text-color-dark;
}
}
......
......@@ -68,23 +68,23 @@
}
@mixin btn-green {
@include btn-color($green-light, $border-green-light, $green-normal, $border-green-normal, $green-dark, $border-green-dark, #fff);
@include btn-color($green-light, $border-green-light, $green-normal, $border-green-normal, $green-dark, $border-green-dark, $white-light);
}
@mixin btn-blue {
@include btn-color($blue-light, $border-blue-light, $blue-normal, $border-blue-normal, $blue-dark, $border-blue-dark, #fff);
@include btn-color($blue-light, $border-blue-light, $blue-normal, $border-blue-normal, $blue-dark, $border-blue-dark, $white-light);
}
@mixin btn-blue-medium {
@include btn-color($blue-medium-light, $border-blue-light, $blue-medium, $border-blue-normal, $blue-medium-dark, $border-blue-dark, #fff);
@include btn-color($blue-medium-light, $border-blue-light, $blue-medium, $border-blue-normal, $blue-medium-dark, $border-blue-dark, $white-light);
}
@mixin btn-orange {
@include btn-color($orange-light, $border-orange-light, $orange-normal, $border-orange-normal, $orange-dark, $border-orange-dark, #fff);
@include btn-color($orange-light, $border-orange-light, $orange-normal, $border-orange-normal, $orange-dark, $border-orange-dark, $white-light);
}
@mixin btn-red {
@include btn-color($red-light, $border-red-light, $red-normal, $border-red-normal, $red-dark, $border-red-dark, #fff);
@include btn-color($red-light, $border-red-light, $red-normal, $border-red-normal, $red-dark, $border-red-dark, $white-light);
}
@mixin btn-gray {
......@@ -289,8 +289,8 @@
.active {
box-shadow: $gl-btn-active-background;
border: 1px solid #c6cacf !important;
background-color: #e4e7ed !important;
border: 1px solid $border-white-dark !important;
background-color: $btn-active-gray-light !important;
}
}
......@@ -345,13 +345,13 @@
.btn-static {
background-color: $background-color !important;
border: 1px solid lightgrey;
border: 1px solid $border-gray-light;
cursor: default;
&:active {
-moz-box-shadow: inset 0 0 0 white;
-webkit-box-shadow: inset 0 0 0 white;
box-shadow: inset 0 0 0 white;
-moz-box-shadow: inset 0 0 0 $white-light;
-webkit-box-shadow: inset 0 0 0 $white-light;
box-shadow: inset 0 0 0 $white-light;
}
}
......
......@@ -28,13 +28,13 @@
.user-contrib-cell {
&:hover {
cursor: pointer;
stroke: #000;
stroke: $black;
}
}
.user-contrib-text {
font-size: 12px;
fill: #959494;
fill: $calendar-user-contrib-text;
}
.calendar-hint {
......
......@@ -25,25 +25,25 @@
/* Variations */
.bs-callout-danger {
background-color: #fdf7f7;
border-color: #eed3d7;
color: #b94a48;
background-color: $callout-danger-bg;
border-color: $callout-danger-border;
color: $callout-danger-color;
}
.bs-callout-warning {
background-color: #faf8f0;
border-color: #faebcc;
color: #8a6d3b;
background-color: $callout-warning-bg;
border-color: $callout-warning-border;
color: $callout-warning-color;
}
.bs-callout-info {
background-color: #f4f8fa;
border-color: #bce8f1;
color: #34789a;
background-color: $callout-info-bg;
border-color: $callout-info-border;
color: $callout-info-color;
}
.bs-callout-success {
background-color: #dff0d8;
border-color: #5ca64d;
color: #3c763d;
background-color: $callout-success-bg;
border-color: $callout-success-border;
color: $callout-success-color;
}
/** COLORS **/
.cgray { color: $gl-gray; }
.clgray { color: #bbb; }
.cred { color: $gl-text-red; }
.cgreen { color: $gl-text-green; }
.cdark { color: #444; }
.cgray { color: $common-gray; }
.clgray { color: $common-gray-light; }
.cred { color: $common-red; }
.cgreen { color: $common-green; }
.cdark { color: $common-gray-dark; }
/** COMMON CLASSES **/
.prepend-top-0 { margin-top: 0; }
......@@ -28,11 +28,11 @@
.center { text-align: center; }
.underlined-link { text-decoration: underline; }
.hint { font-style: italic; color: #999; }
.light { color: $gl-gray; }
.hint { font-style: italic; color: $hint-color; }
.light { color: $common-gray; }
.slead {
color: $gl-gray;
color: $common-gray;
font-size: 15px;
margin-bottom: 12px;
font-weight: normal;
......@@ -52,10 +52,10 @@ pre {
}
&.well-pre {
border: 1px solid #eee;
border: 1px solid $well-pre-bg;
background: $gray-light;
border-radius: 0;
color: #555;
color: $well-pre-color;
}
}
......@@ -87,14 +87,14 @@ table a code {
.loading {
margin: 20px auto;
height: 40px;
color: #555;
color: $loading-color;
font-size: 32px;
text-align: center;
}
span.update-author {
display: block;
color: #999;
color: $update-author-color;
font-weight: normal;
font-style: italic;
......@@ -105,7 +105,7 @@ span.update-author {
}
.user-mention {
color: #2fa0bb;
color: $user-mention-color;
font-weight: bold;
}
......@@ -114,7 +114,7 @@ span.update-author {
}
p.time {
color: #999;
color: $time-color;
font-size: 90%;
margin: 30px 3px 3px 2px;
}
......@@ -150,7 +150,7 @@ li.note {
.project_member_show {
td:first-child {
color: #aaa;
color: $project-member-show-color;
}
}
......@@ -176,7 +176,7 @@ li.note {
margin-top: 40px;
pre {
background: white;
background: $white-light;
border: none;
font-size: 12px;
}
......@@ -184,12 +184,12 @@ li.note {
.error-message {
padding: 10px;
background: #c67;
background: $error-bg;
margin: 0;
color: #fff;
color: $white-light;
a {
color: #fff;
color: $white-light;
text-decoration: underline;
}
}
......@@ -197,22 +197,22 @@ li.note {
.browser-alert {
padding: 10px;
text-align: center;
background: #c67;
color: #fff;
background: $error-bg;
color: $white-light;
font-weight: bold;
a {
color: #fff;
color: $white-light;
text-decoration: underline;
}
}
.warning_message {
border-left: 4px solid #ed9;
color: #b90;
border-left: 4px solid $warning-message-border;
color: $warning-message-color;
padding: 10px;
margin-bottom: 10px;
background: #ffffe6;
background: $warning-message-bg;
padding-left: 20px;
&.centered {
......@@ -222,7 +222,7 @@ li.note {
.gitlab-promo {
a {
color: #aaa;
color: $gl-promo-color;
margin-right: 30px;
}
}
......@@ -245,7 +245,7 @@ li.note {
position: relative;
top: 2px;
left: 5px;
color: #666;
color: $control-group-descr-color;
}
}
}
......@@ -270,7 +270,7 @@ img.emoji {
table {
td.permission-x {
background: #d9edf7 !important;
background: $table-permission-x-bg !important;
text-align: center;
}
}
......@@ -323,13 +323,13 @@ table {
.username {
font-size: 18px;
color: #666;
color: $username-color;
margin-top: 8px;
}
.description {
font-size: $gl-font-size;
color: #666;
color: $description-color;
margin-top: 8px;
}
}
......@@ -339,7 +339,7 @@ table {
.profiler-button,
.profiler-controls {
border-color: #eee !important;
border-color: $profiler-border !important;
}
}
......
......@@ -376,7 +376,7 @@
position: absolute;
top: 10px;
right: 20px;
color: #c7c7c7;
color: $dropdown-input-fa-color;
font-size: 12px;
pointer-events: none;
}
......@@ -529,7 +529,7 @@
.ui-datepicker-calendar {
.ui-state-hover,
.ui-state-active {
color: #fff;
color: $white-light;
border: 0;
}
}
......
......@@ -59,10 +59,10 @@
}
.file-content {
background: #fff;
background: $white-light;
&.image_file {
background: #eee;
background: $file-image-bg;
text-align: center;
img {
......@@ -84,8 +84,8 @@
}
&.blob-no-preview {
background: #eee;
text-shadow: 0 1px 2px #fff;
background: $blob-bg;
text-shadow: 0 1px 2px $white-light;
padding: 100px 0;
}
......@@ -99,7 +99,7 @@
}
tr {
border-bottom: 1px solid #eee;
border-bottom: 1px solid $blame-border;
}
td {
......@@ -120,7 +120,7 @@
td.line-numbers {
float: none;
border-left: 1px solid #ddd;
border-left: 1px solid $blame-line-numbers-border;
i {
float: none;
......@@ -134,7 +134,7 @@
}
&.logs {
background: #eee;
background: $logs-bg;
max-height: 700px;
overflow-y: auto;
......@@ -143,14 +143,14 @@
padding: 10px 0;
border-left: 1px solid $border-color;
margin-bottom: 0;
background: white;
background: $white-light;
li {
color: #888;
color: $logs-li-color;
p {
margin: 0;
color: #333;
color: $logs-p-color;
line-height: 24px;
padding-left: 10px;
}
......
......@@ -7,9 +7,9 @@ input {
}
input[type='text'].danger {
background: #f2dede!important;
border-color: #d66;
text-shadow: 0 1px 1px #fff;
background: $input-danger-bg !important;
border-color: $input-danger-border;
text-shadow: 0 1px 1px $white-light;
}
.datetime-controls {
......@@ -159,7 +159,7 @@ label {
}
.input-group-addon {
background-color: #f7f8fa;
background-color: $input-group-addon-bg;
}
.input-group-addon:not(:first-child):not(:last-child) {
......@@ -181,7 +181,7 @@ label {
border: 1px solid $green-normal;
&:focus {
box-shadow: 0 0 0 1px $green-normal inset, 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 4px 0 $green-normal;
box-shadow: 0 0 0 1px $green-normal inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $green-normal;
border: 0 none;
}
}
......@@ -190,7 +190,7 @@ label {
border: 1px solid $red-normal;
&:focus {
box-shadow: 0 0 0 1px $red-normal inset, 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 4px 0 rgba(210, 40, 82, 0.6);
box-shadow: 0 0 0 1px $red-normal inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $gl-field-focus-shadow-error;
border: 0 none;
}
}
......
......@@ -85,37 +85,57 @@
}
$theme-charcoal: #3d454d;
$theme-charcoal-light: #485157;
$theme-charcoal-dark: #383f45;
$theme-charcoal-text: #b9bbbe;
$theme-blue-light: #becde9;
$theme-blue: #2980b9;
$theme-blue-dark: #1970a9;
$theme-blue-darker: #096099;
$theme-graphite-lighter: #ccc;
$theme-graphite-light: #777;
$theme-graphite: #666;
$theme-graphite-dark: #555;
$theme-gray-light: #979797;
$theme-gray: #373737;
$theme-gray-dark: #272727;
$theme-gray-darker: #222;
$theme-green-light: #adc;
$theme-green: #019875;
$theme-green-dark: #018865;
$theme-green-darker: #017855;
$theme-violet-light: #98c;
$theme-violet: #548;
$theme-violet-dark: #436;
$theme-violet-darker: #325;
body {
&.ui_blue {
@include gitlab-theme(#becde9, $theme-blue, #1970a9, #096099);
@include gitlab-theme($theme-blue-light, $theme-blue, $theme-blue-dark, $theme-blue-darker);
}
&.ui_charcoal {
@include gitlab-theme($theme-charcoal-text, #485157, $theme-charcoal, $theme-charcoal-dark);
@include gitlab-theme($theme-charcoal-text, $theme-charcoal-light, $theme-charcoal, $theme-charcoal-dark);
}
&.ui_graphite {
@include gitlab-theme(#ccc, #777, $theme-graphite, #555);
@include gitlab-theme($theme-graphite-lighter, $theme-graphite-light, $theme-graphite, $theme-graphite-dark);
}
&.ui_gray {
@include gitlab-theme(#979797, $theme-gray, #272727, #222);
@include gitlab-theme($theme-gray-light, $theme-gray, $theme-gray-dark, $theme-gray-darker);
}
&.ui_green {
@include gitlab-theme(#adc, $theme-green, #018865, #017855);
@include gitlab-theme($theme-green-light, $theme-green, $theme-green-dark, $theme-green-darker);
}
&.ui_violet {
@include gitlab-theme(#98c, $theme-violet, #436, #325);
@include gitlab-theme($theme-violet-light, $theme-violet, $theme-violet-dark, $theme-violet-darker);
}
}
......@@ -8,7 +8,7 @@ header {
&.navbar-empty {
height: $header-height;
background: #fff;
background: $white-light;
border-bottom: 1px solid $btn-gray-hover;
.center-logo {
......@@ -76,7 +76,7 @@ header {
}
.navbar-toggle {
color: #666;
color: $nav-toggle-gray;
margin: 6px 0;
border-radius: 0;
position: absolute;
......
......@@ -20,7 +20,7 @@
display: block;
float: left;
margin-right: 10px;
color: #fff;
color: $white-light;
font-size: $gl-font-size;
line-height: 25px;
......@@ -37,10 +37,10 @@
}
&.status-box-expired {
background: #cea61b;
background-color: $issue-status-expired;
}
&.status-box-upcoming {
background: #8f8f8f;
background: $issue-box-upcoming-bg;
}
}
......@@ -4,13 +4,13 @@
&.ui-datepicker,
&.ui-datepicker-inline {
border: 1px solid #ddd;
border: 1px solid $jq-ui-border;
padding: 10px;
width: 270px;
.ui-datepicker-header {
background: #fff;
border-color: #ddd;
background: $white-light;
border-color: $jq-ui-border;
.ui-datepicker-prev,
.ui-datepicker-next {
......@@ -39,7 +39,7 @@
}
&.ui-autocomplete {
border-color: #ddd;
border-color: $jq-ui-border;
padding: 0;
margin-top: 2px;
z-index: 1001;
......@@ -50,9 +50,9 @@
}
.ui-state-default {
border: 1px solid #fff;
background: #fff;
color: #777;
border: 1px solid $white-light;
background: $white-light;
color: $jq-ui-default-color;
}
.ui-state-highlight {
......@@ -66,7 +66,7 @@
.ui-state-focus {
border: 1px solid $gl-primary;
background: $gl-primary;
color: #fff;
color: $white-light;
}
}
}
......
......@@ -6,7 +6,7 @@ html {
body {
&.navless {
background-color: white !important;
background-color: $white-light !important;
}
}
......
......@@ -11,8 +11,8 @@
> li {
padding: 10px 15px;
min-height: 20px;
border-bottom: 1px solid #eee;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
border-bottom: 1px solid $list-border-light;
border-bottom: 1px solid $list-border;
&::after {
content: " ";
......@@ -21,7 +21,7 @@
}
&.disabled {
color: #888;
color: $list-text-disabled-color;
}
&.unstyled {
......@@ -31,9 +31,9 @@
}
&.warning-row {
background-color: #fcf8e3;
border-color: #faebcc;
color: #8a6d3b;
background-color: $list-warning-row-bg;
border-color: $list-warning-row-border;
color: $list-warning-row-color;
}
&.smoke { background-color: $background-color; }
......
......@@ -73,7 +73,7 @@
}
.referenced-users {
color: #4c4e54;
color: $gl-header-color;
padding-top: 10px;
}
......@@ -85,8 +85,8 @@
.markdown-area {
border-radius: 0;
background: #fff;
border: 1px solid #ddd;
background: $white-light;
border: 1px solid $md-area-border;
min-height: 140px;
max-height: 500px;
padding: 5px;
......@@ -108,7 +108,7 @@
hr {
// Darken 'whitesmoke' a bit to make it more visible in note bodies
border-color: darken(#f5f5f5, 8%);
border-color: darken($gray-normal, 8%);
margin: 10px 0;
}
......@@ -135,7 +135,7 @@
.toolbar-btn {
float: left;
padding: 0 5px;
color: #959494;
color: $note-toolbar-color;
background: transparent;
border: 0;
outline: 0;
......
......@@ -24,7 +24,7 @@
@include clearfix;
padding: 10px 0;
border-bottom: 1px solid #eee;
border-bottom: 1px solid $list-border-light;
display: block;
margin: 0;
......@@ -67,8 +67,8 @@
}
@mixin dark-diff-match-line {