Commit 6ddfd459 authored by Angelo Gulina's avatar Angelo Gulina Committed by Simon Knox

Add CSS variables to support Dark Mode in Environments

parent a8d50a38
......@@ -8,24 +8,24 @@
.external-url,
.dropdown-new {
color: $gl-text-color-secondary;
color: var(--gray-500, $gray-500);
}
.build-link,
.ref-name {
color: $gl-text-color;
color: var(--gray-900, $gray-900);
}
.folder-icon {
margin-right: 3px;
color: $gl-text-color-secondary;
color: var(--gray-500, $gray-500);
display: inline-block;
vertical-align: text-top;
}
.folder-name {
cursor: pointer;
color: $gl-text-color-secondary;
color: var(--gray-500, $gray-500);
display: inline-block;
}
......@@ -74,17 +74,17 @@
.x-axis path,
.y-axis path {
stroke: $gray-300;
stroke: var(--gray-300, $gray-300);
}
.label-x-axis-line,
.label-y-axis-line {
stroke: $border-color;
stroke: var(--gray-100, $gray-100);
}
.y-axis {
line {
stroke: $gray-300;
stroke: var(--gray-300, $gray-300);
stroke-width: 1;
}
}
......@@ -94,13 +94,13 @@
}
.rect-text-metric {
fill: $white;
fill: var(--white, $white);
stroke-width: 1;
stroke: $gray-darkest;
stroke: var(--gray-600, $gray-600);
}
.rect-axis-text {
fill: $white;
fill: var(--white, $white);
}
.text-metric {
......@@ -108,18 +108,18 @@
}
.selected-metric-line {
stroke: $gray-900;
stroke: var(--gray-900, $gray-900);
stroke-width: 1;
}
.deployment-line {
stroke: $black;
stroke: var(--white, $white);
stroke-width: 1;
}
.divider-line {
stroke-width: 1;
stroke: $gray-darkest;
stroke: var(--gray-600, $gray-600);
}
.environments-actions {
......
......@@ -4,7 +4,7 @@
* Deploy boards
*/
.deploy-board {
background-color: $gray-light;
background-color: var(--gray-50, $gray-50);
min-height: 20px;
> .loading-icon,
......@@ -64,7 +64,7 @@
}
.deploy-board-legend .legend-text {
color: $gl-text-color;
color: var(--gray-900, $gray-900);
font-size: $gl-font-size-small;
font-weight: $gl-font-weight-bold;
line-height: $gl-line-height-14;
......@@ -81,7 +81,7 @@
i {
cursor: pointer;
color: $layout-link-gray;
color: var(--gray-200, $gray-200);
padding-right: 10px;
}
}
......@@ -90,7 +90,7 @@
margin-left: $btn-side-margin;
.dropdown.open & {
background: $white-normal;
background: var(--gray-50, $gray-50);
outline: 0;
}
......@@ -102,7 +102,7 @@
}
&.chevron {
color: $gl-text-color-secondary;
color: var(--gray-500, $gray-500);
}
}
}
......@@ -114,7 +114,7 @@
}
.alert-error-message {
color: $red-500;
color: var(--red-500, $red-500);
vertical-align: middle;
}
......@@ -131,7 +131,7 @@
}
.canary-deployment-callout {
border-bottom: 1px solid $border-white-normal;
border-bottom: 1px solid var(--gray-500, $gray-500);
display: flex;
@include media-breakpoint-down(sm) {
......@@ -145,39 +145,39 @@
&-message {
max-width: 600px;
color: $gray-500;
color: var(--gray-500, $gray-500);
}
&-close {
color: $gray-500;
color: var(--gray-500, $gray-500);
cursor: pointer;
}
&-button {
border-color: $blue-500;
color: $blue-500;
border-color: var(--blue-500, $blue-500);
color: var(--blue-500, $blue-500);
&:not(:disabled):not(.disabled):active {
background-color: $blue-200;
border: 2px solid $blue-600;
color: $blue-700;
background-color: var(--blue-200, $blue-200);
border: 2px solid var(--blue-600, $blue-600);
color: var(--blue-700, $blue-700);
height: 34px;
padding: 5px 9px;
}
&:focus {
background-color: $blue-100;
border: 2px solid $blue-500;
box-shadow: 0 0 4px 1px $blue-200;
color: $blue-600;
background-color: var(--blue-500, $blue-500);
border: 2px solid var(--blue-500, $blue-500);
box-shadow: 0 0 4px 1px var(--blue-200, $blue-200);
color: var(--blue-600, $blue-600);
height: 34px;
padding: 5px 9px;
}
&:hover {
background-color: $blue-100;
border: 2px solid $blue-500;
color: $blue-600;
background-color: var(--blue-500, $blue-500);
border: 2px solid var(--blue-500, $blue-500);
color: var(--blue-600, $blue-600);
height: 34px;
padding: 5px 9px;
}
......
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