We're using `background: #fff` and `background: $white` in many places. Sometimes we mean "use the same background as the body", which means if we change the body background so it's, let's say, dark, we'll also have to change all these places. So now we're using `$body-background` in more places, so changing the general background color is easier. There are still some places where we use `#fff` or `$white`. Sometimes it's hard to tell whether the intention is "use a white background here" or "use the same background as the body here". When in doubt, I've left it the way it was. Just for testing purposes, I've tested locally how things would look like if we added this code to `_consul_custom_overrides.scss`: ``` $body-background: #fea; $card-background: $body-background; $tab-background: $body-background; $tab-content-background: $body-background; $table-background: $body-background; ``` Or: ``` $body-background: #333; $text: #fcfcfc; $body-font-color: $text; $card-background: $body-background; $tab-background: $body-background; $tab-content-background: $body-background; $table-background: $body-background; ``` Testing shows we've still got a long way to go to make it easy to add custom color themes, since there are many custom colors in the code. Hopefully these changes bring us one step closer.
36 lines
647 B
SCSS
36 lines
647 B
SCSS
// Overrides styles of jquery-ui/autocomplete
|
|
//
|
|
|
|
/* Autocomplete
|
|
----------------------------------*/
|
|
.ui-autocomplete {
|
|
position: absolute;
|
|
cursor: default;
|
|
}
|
|
|
|
/* Menu
|
|
----------------------------------*/
|
|
.ui-menu {
|
|
list-style: none;
|
|
padding: $line-height / 4 $line-height / 3;
|
|
display: block;
|
|
background: $body-background;
|
|
border: 1px solid $border;
|
|
font-size: $small-font-size;
|
|
|
|
.ui-menu-item {
|
|
|
|
.ui-menu-item-wrapper {
|
|
padding: $line-height / 4 $line-height / 3;
|
|
position: relative;
|
|
}
|
|
|
|
.ui-state-hover,
|
|
.ui-state-active {
|
|
background: #ececec;
|
|
border-radius: rem-calc(6);
|
|
}
|
|
}
|
|
|
|
}
|