2020-05-03 12:57:19 -07:00
|
|
|
.btn {
|
|
|
|
color: RGB(var(--body-text));
|
|
|
|
}
|
|
|
|
|
2020-05-08 17:45:57 -07:00
|
|
|
.btn-link:hover {
|
|
|
|
color: RGB(var(--body-text));
|
|
|
|
}
|
|
|
|
|
2020-04-29 09:17:10 -07:00
|
|
|
@each $color in $color-names {
|
2020-04-27 09:38:24 -07:00
|
|
|
.btn-#{$color} {
|
2020-05-06 13:48:07 -07:00
|
|
|
|
2020-05-03 12:57:19 -07:00
|
|
|
color: RGB(var(--#{$color}-text));
|
2020-04-27 09:38:24 -07:00
|
|
|
background-color: var(--#{$color});
|
|
|
|
border-color: var(--#{$color});
|
2020-05-06 13:48:07 -07:00
|
|
|
border-width: 0;
|
2020-04-27 10:57:10 -07:00
|
|
|
|
|
|
|
&:hover {
|
|
|
|
background: linear-gradient(
|
|
|
|
to top,
|
|
|
|
rgba(0, 0, 0, 0.10),
|
|
|
|
rgba(0, 0, 0, 0.10)
|
|
|
|
) var(--#{$color});
|
|
|
|
}
|
2020-05-06 13:35:33 -07:00
|
|
|
|
2020-05-06 13:48:07 -07:00
|
|
|
&:not(:disabled):not(.disabled):active,
|
|
|
|
&:not(:disabled):not(.disabled).active {
|
|
|
|
border: none;
|
2020-05-06 13:35:33 -07:00
|
|
|
background: linear-gradient(
|
|
|
|
to top,
|
|
|
|
rgba(0, 0, 0, 0.25),
|
|
|
|
rgba(0, 0, 0, 0.25)
|
|
|
|
) var(--#{$color});
|
2020-05-06 13:48:07 -07:00
|
|
|
|
|
|
|
&: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;
|
2020-05-06 13:35:33 -07:00
|
|
|
}
|
2020-04-27 09:38:24 -07:00
|
|
|
}
|
2020-05-06 13:24:56 -07:00
|
|
|
|
|
|
|
.btn-outline-#{$color} {
|
|
|
|
color: var(--#{$color});
|
|
|
|
}
|
2020-04-27 09:38:24 -07:00
|
|
|
}
|