style(dropdowns): Better support for :focus

This commit is contained in:
Lucas Larroche 2022-02-27 17:21:13 +07:00
parent f7ed336ac0
commit 2906e37f7a
26 changed files with 55 additions and 94 deletions

View file

@ -73,15 +73,16 @@ details[role="list"] {
margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);
}
&:hover {
background-color: var(--dropdown-focus-background-color);
}
a {
display: block;
width: 100%;
margin: calc(var(--form-element-spacing-vertical) * -0.5) calc(var(--form-element-spacing-horizontal) * -1);
padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
color: var(--dropdown-color);
text-decoration: none;
&:hover {
background-color: var(--dropdown-hover-background-color);
}
}
}

View file

@ -117,7 +117,7 @@
--dropdown-border-color: #{mix($grey-900, $grey-800)};
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-focus-background-color: #{rgba(mix($grey-900, $grey-800), 0.75)};
--dropdown-hover-background-color: #{rgba(mix($grey-900, $grey-800), 0.75)};
// Modal (<dialog>)
--modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.9)};

View file

@ -117,7 +117,7 @@
--dropdown-border-color: #{mix($grey-100, $grey-50)};
--dropdown-box-shadow: var(--card-box-shadow);
--dropdown-color: var(--color);
--dropdown-focus-background-color: #{$grey-50};
--dropdown-hover-background-color: #{$grey-50};
// Modal (<dialog>)
--modal-overlay-background-color: #{rgba($grey-100, 0.8)};