Files
nairobi/app/assets/stylesheets/autocomplete_overrides.scss
Javi Martín 73fe89829d Use $body-background to remove color duplication
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.
2021-06-30 16:42:53 +02:00

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);
}
}
}