Commit e03d0b28 authored by connorshea's avatar connorshea
Browse files

Follow the CSS Style Guide rules for HEX colors.

Use lowercase letters and shorthand values for HEX colors where
possible.

Discussed in #14299.
parent 23109ff47c13
......@@ -37,23 +37,23 @@
}
@mixin btn-green {
@include btn-color($green-light, $border-green-light, $green-normal, $border-green-normal, $green-dark, $border-green-dark, #FFFFFF);
@include btn-color($green-light, $border-green-light, $green-normal, $border-green-normal, $green-dark, $border-green-dark, #fff);
}
@mixin btn-blue {
@include btn-color($blue-light, $border-blue-light, $blue-normal, $border-blue-normal, $blue-dark, $border-blue-dark, #FFFFFF);
@include btn-color($blue-light, $border-blue-light, $blue-normal, $border-blue-normal, $blue-dark, $border-blue-dark, #fff);
}
@mixin btn-blue-medium {
@include btn-color($blue-medium-light, $border-blue-light, $blue-medium, $border-blue-normal, $blue-medium-dark, $border-blue-dark, #FFFFFF);
@include btn-color($blue-medium-light, $border-blue-light, $blue-medium, $border-blue-normal, $blue-medium-dark, $border-blue-dark, #fff);
}
@mixin btn-orange {
@include btn-color($orange-light, $border-orange-light, $orange-normal, $border-orange-normal, $orange-dark, $border-orange-dark, #FFFFFF);
@include btn-color($orange-light, $border-orange-light, $orange-normal, $border-orange-normal, $orange-dark, $border-orange-dark, #fff);
}
@mixin btn-red {
@include btn-color($red-light, $border-red-light, $red-normal, $border-red-normal, $red-dark, $border-red-dark, #FFFFFF);
@include btn-color($red-light, $border-red-light, $red-normal, $border-red-normal, $red-dark, $border-red-dark, #fff);
}
@mixin btn-gray {
......
......@@ -33,19 +33,19 @@
}
.q2 {
fill: #ACD5F2 !important;
fill: #acd5f2 !important;
}
.q3 {
fill: #7FA8D1 !important;
fill: #7fa8d1 !important;
}
.q4 {
fill: #49729B !important;
fill: #49729b !important;
}
.q5 {
fill: #254E77 !important;
fill: #254e77 !important;
}
.domain-background {
......
......@@ -39,6 +39,6 @@
}
.bs-callout-success {
background-color: #dff0d8;
border-color: #5cA64d;
border-color: #5ca64d;
color: #3c763d;
}
/** COLORS **/
.cgray { color: $gl-gray; }
.clgray { color: #BBB }
.clgray { color: #bbb }
.cred { color: $gl-text-red; }
.cgreen { color: $gl-text-green; }
.cdark { color: #444 }
......@@ -51,7 +51,7 @@ pre {
}
&.well-pre {
border: 1px solid #EEE;
border: 1px solid #eee;
background: #f9f9f9;
border-radius: 0;
color: #555;
......@@ -103,7 +103,7 @@ span.update-author {
}
.user-mention {
color: #2FA0BB;
color: #2fa0bb;
font-weight: bold;
}
......@@ -187,9 +187,9 @@ li.note {
.error-message {
padding: 10px;
background: #C67;
background: #c67;
margin: 0;
color: #FFF;
color: #fff;
a {
color: #fff;
......@@ -200,7 +200,7 @@ li.note {
.browser-alert {
padding: 10px;
text-align: center;
background: #C67;
background: #c67;
color: #fff;
font-weight: bold;
a {
......@@ -271,7 +271,7 @@ img.emoji {
table {
td.permission-x {
background: #D9EDF7 !important;
background: #d9edf7 !important;
text-align: center;
}
}
......@@ -280,7 +280,7 @@ table {
float: left;
text-align: center;
font-size: 32px;
color: #AAA;
color: #aaa;
width: 60px;
}
......@@ -347,7 +347,7 @@ table {
.profiler-button,
.profiler-controls {
border-color: #EEE !important;
border-color: #eee !important;
}
}
......
......@@ -261,7 +261,7 @@
position: absolute;
top: 10px;
right: 10px;
color: #C7C7C7;
color: #c7c7c7;
font-size: 12px;
pointer-events: none;
}
......
......@@ -84,7 +84,7 @@
&.blob-no-preview {
background: #eee;
text-shadow: 0 1px 2px #FFF;
text-shadow: 0 1px 2px #fff;
padding: 100px 0;
}
......@@ -124,7 +124,7 @@
}
td.line-numbers {
float: none;
border-left: 1px solid #DDD;
border-left: 1px solid #ddd;
}
td.lines {
padding: 0;
......
......@@ -41,8 +41,8 @@ input[type='search'].search-input {
}
input[type='text'].danger {
background: #F2DEDE!important;
border-color: #D66;
background: #f2dede!important;
border-color: #d66;
text-shadow: 0 1px 1px #fff
}
......
......@@ -23,13 +23,13 @@
&:hover {
background-color: $color-darker;
a {
color: #FFF;
color: #fff;
}
}
}
.collapse-nav a {
color: #FFF;
color: #fff;
background: $color;
}
......@@ -42,7 +42,7 @@
&:hover {
background-color: $color-dark;
color: #FFF;
color: #fff;
text-decoration: none;
}
}
......@@ -71,7 +71,7 @@
}
&.active a {
color: #FFF;
color: #fff;
background: $color-dark;
&.no-highlight {
......@@ -79,42 +79,42 @@
}
i {
color: #FFF
color: #fff
}
}
}
}
}
$theme-blue: #2980B9;
$theme-blue: #2980b9;
$theme-charcoal: #333c47;
$theme-graphite: #888888;
$theme-graphite: #888;
$theme-gray: #373737;
$theme-green: #019875;
$theme-violet: #554488;
$theme-violet: #548;
body {
&.ui_blue {
@include gitlab-theme(#BECDE9, $theme-blue, #1970A9, #096099);
@include gitlab-theme(#becde9, $theme-blue, #1970a9, #096099);
}
&.ui_charcoal {
@include gitlab-theme(#c5d0de, $theme-charcoal, #2b333d, #24272D);
@include gitlab-theme(#c5d0de, $theme-charcoal, #2b333d, #24272d);
}
&.ui_graphite {
@include gitlab-theme(#CCCCCC, $theme-graphite, #777777, #666666);
@include gitlab-theme(#ccc, $theme-graphite, #777, #666);
}
&.ui_gray {
@include gitlab-theme(#979797, $theme-gray, #272727, #222222);
@include gitlab-theme(#979797, $theme-gray, #272727, #222);
}
&.ui_green {
@include gitlab-theme(#AADDCC, $theme-green, #018865, #017855);
@include gitlab-theme(#adc, $theme-green, #018865, #017855);
}
&.ui_violet {
@include gitlab-theme(#9988CC, $theme-violet, #443366, #332255);
@include gitlab-theme(#98c, $theme-violet, #436, #325);
}
}
\ No newline at end of file
......@@ -7,8 +7,8 @@ header {
&.navbar-empty {
height: 58px;
background: #FFF;
border-bottom: 1px solid #EEE;
background: #fff;
border-bottom: 1px solid #eee;
.center-logo {
margin: 11px 0;
......@@ -28,7 +28,7 @@ header {
min-height: $header-height;
background-color: #fff;
border: none;
border-bottom: 1px solid #EEE;
border-bottom: 1px solid #eee;
.container-fluid {
width: 100% !important;
......@@ -47,7 +47,7 @@ header {
text-align: center;
&:hover, &:focus, &:active {
background-color: #FFF;
background-color: #fff;
}
}
......@@ -59,7 +59,7 @@ header {
right: 2px;
&:hover {
background-color: #EEE;
background-color: #eee;
}
&.active {
color: #7f8fa4;
......
......@@ -20,7 +20,7 @@
display: block;
float: left;
margin-right: 10px;
color: #FFF;
color: #fff;
font-size: $gl-font-size;
line-height: 25px;
......
......@@ -3,13 +3,13 @@
font-size: $font-size-base;
&.ui-datepicker-inline {
border: 1px solid #DDD;
border: 1px solid #ddd;
padding: 10px;
width: 270px;
.ui-datepicker-header {
background: #FFF;
border-color: #DDD;
background: #fff;
border-color: #ddd;
}
.ui-datepicker-calendar td a {
......@@ -19,7 +19,7 @@
}
&.ui-autocomplete {
border-color: #DDD;
border-color: #ddd;
padding: 0;
margin-top: 2px;
z-index: 1001;
......@@ -30,20 +30,20 @@
}
.ui-state-default {
border: 1px solid #FFF;
background: #FFF;
border: 1px solid #fff;
background: #fff;
color: #777;
}
.ui-state-highlight {
border: 1px solid #EEE;
background: #EEE;
border: 1px solid #eee;
background: #eee;
}
.ui-state-active {
border: 1px solid $gl-primary;
background: $gl-primary;
color: #FFF;
color: #fff;
}
.ui-state-hover,
......
......@@ -71,7 +71,7 @@
}
.md-preview-holder {
background: #FFF;
background: #fff;
border: 1px solid #ddd;
min-height: 169px;
padding: 5px;
......@@ -80,7 +80,7 @@
.markdown-area {
@include border-radius(0);
background: #FFF;
background: #fff;
border: 1px solid #ddd;
min-height: 140px;
max-height: 500px;
......
......@@ -75,7 +75,7 @@
@include clearfix;
padding: 10px 0;
border-bottom: 1px solid #EEE;
border-bottom: 1px solid #eee;
display: block;
margin: 0px;
......
......@@ -131,9 +131,9 @@
right: 0px;
top: 30%;
padding: 5px 15px;
background: #EEE;
background: #eee;
font-size: 20px;
color: #777;
z-index: 100;
@include box-shadow(0 1px 2px #DDD);
@include box-shadow(0 1px 2px #ddd);
}
......@@ -26,7 +26,7 @@
}
&.active a {
color: #000000;
color: #000;
border-bottom: 2px solid #4688f1;
}
......@@ -41,7 +41,7 @@
.top-area {
@include clearfix;
border-bottom: 1px solid #EEE;
border-bottom: 1px solid #eee;
.nav-text {
padding-top: 16px;
......
......@@ -229,7 +229,7 @@
.namespace-result {
.namespace-kind {
color: #AAA;
color: #aaa;
font-weight: normal;
}
.namespace-path {
......
......@@ -47,7 +47,7 @@
width: 100%;
.container-fluid {
background: #FFF;
background: #fff;
padding: 0 $gl-padding;
&.container-blank {
......@@ -103,7 +103,7 @@
}
&:hover {
background-color: #EEE;
background-color: #eee;
}
}
......
......@@ -95,7 +95,7 @@
}
&.label-inverse {
background-color: #333333;
background-color: #333;
}
}
......
......@@ -57,7 +57,7 @@ $component-active-bg: $brand-info;
$input-color: $text-color;
$input-border: #e7e9ed;
$input-border-focus: #7F8FA4;
$input-border-focus: #7f8fa4;
$legend-color: $text-color;
......@@ -125,8 +125,8 @@ $panel-inner-border: $border-color;
//
//##
$well-bg: #F9F9F9;
$well-border: #EEE;
$well-bg: #f9f9f9;
$well-border: #eee;
//== Code
//
......
......@@ -27,13 +27,13 @@
line-height: 10px;
color: #555;
vertical-align: middle;
background-color: #FCFCFC;
background-color: #fcfcfc;
border-width: 1px;
border-style: solid;
border-color: #CCC #CCC #BBB;
border-color: #ccc #ccc #bbb;
border-image: none;
border-radius: 3px;
box-shadow: 0px -1px 0px #BBB inset;
box-shadow: 0px -1px 0px #bbb inset;
}
h1 {
......
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