Add focus and active override styles

This commit is contained in:
Andreas Nedbal 2020-05-06 22:48:07 +02:00
parent 771e09133c
commit c75c86e16c
1 changed files with 24 additions and 1 deletions

View File

@ -4,9 +4,11 @@
@each $color in $color-names {
.btn-#{$color} {
color: RGB(var(--#{$color}-text));
background-color: var(--#{$color});
border-color: var(--#{$color});
border-width: 0;
&:hover {
background: linear-gradient(
@ -16,12 +18,33 @@
) var(--#{$color});
}
&:active {
&:not(:disabled):not(.disabled):active,
&:not(:disabled):not(.disabled).active {
border: none;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.25),
rgba(0, 0, 0, 0.25)
) var(--#{$color});
&:focus {
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.30),
rgba(0, 0, 0, 0.30)
) var(--#{$color});
box-shadow: none;
}
}
&:focus,
&:focus:hover {
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.30),
rgba(0, 0, 0, 0.30)
) var(--#{$color});
box-shadow: none;
}
}