Add focus and active override styles
This commit is contained in:
parent
771e09133c
commit
c75c86e16c
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue