add css to make dropdown readable with dark mode
This commit is contained in:
parent
86c9a84111
commit
84cd5daf9c
3 changed files with 23 additions and 4 deletions
|
@ -174,6 +174,28 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[data-fr-theme="dark"]
|
||||||
|
.dropdown-content {
|
||||||
|
border: none;
|
||||||
|
background: var(--background-action-low-blue-france);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-fr-theme="dark"]
|
||||||
|
.dropdown-items {
|
||||||
|
li {
|
||||||
|
&:not(.inactive) {
|
||||||
|
&:hover,
|
||||||
|
&.selected {
|
||||||
|
background: var(--background-action-low-blue-france-hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.form-inside {
|
||||||
|
background-color: var(--background-action-low-blue-france);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.dropdown-content {
|
.dropdown-content {
|
||||||
border: 1px solid $border-grey;
|
border: 1px solid $border-grey;
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
|
@ -226,7 +248,6 @@ ul.dropdown-items {
|
||||||
li {
|
li {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: $default-padding;
|
padding: $default-padding;
|
||||||
color: $dark-grey;
|
|
||||||
border-bottom: 1px solid $border-grey;
|
border-bottom: 1px solid $border-grey;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
min-width: 300px;
|
min-width: 300px;
|
||||||
|
@ -293,7 +314,6 @@ ul.dropdown-items {
|
||||||
|
|
||||||
h4 {
|
h4 {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: $black;
|
|
||||||
margin-bottom: $default-spacer;
|
margin-bottom: $default-spacer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.help-dropdown-title {
|
.help-dropdown-title {
|
||||||
color: $blue-france-500;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-items li.help-dropdown-service {
|
.dropdown-items li.help-dropdown-service {
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
@import "colors";
|
@import "colors";
|
||||||
|
|
||||||
.menu-component-header {
|
.menu-component-header {
|
||||||
color: $dark-grey;
|
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
|
Loading…
Reference in a new issue