Update button colors

This commit is contained in:
Jeremy Thomas
2022-12-17 01:11:23 +01:00
parent b73e183091
commit a41ce795ae
8 changed files with 889 additions and 669 deletions

View File

@@ -1,32 +1,52 @@
@import "derived-variables";
$control-radius: $radius !default;
$control-radius-small: $radius-small !default;
$control-radius: getVar("radius") !default;
$control-radius-small: getVar("radius-small") !default;
$control-border-width: 1px !default;
$control-height: 2.5em !default;
$control-line-height: 1.5 !default;
$control-padding-vertical: calc(0.5em - #{$control-border-width}) !default;
$control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default;
$control-padding-vertical: calc(
0.5em - #{getVar("control-border-width")}
) !default;
$control-padding-horizontal: calc(
0.75em - #{getVar("control-border-width")}
) !default;
:root {
@include register-vars(
(
control-radius: #{$control-radius},
control-radius-small: #{$control-radius-small},
control-border-width: #{$control-border-width},
control-height: #{$control-height},
control-line-height: #{$control-line-height},
control-padding-vertical: #{$control-padding-vertical},
control-padding-horizontal: #{$control-padding-horizontal},
)
);
}
@mixin control {
-moz-appearance: none;
-webkit-appearance: none;
align-items: center;
border: $control-border-width solid transparent;
border-radius: $control-radius;
border-color: transparent;
border-radius: getVar("control-radius");
border-style: solid;
border-width: getVar("control-border-width");
box-shadow: none;
display: inline-flex;
font-size: $size-normal;
height: $control-height;
font-size: getVar("size-normal");
height: getVar("control-height");
justify-content: flex-start;
line-height: $control-line-height;
padding-bottom: $control-padding-vertical;
padding-left: $control-padding-horizontal;
padding-right: $control-padding-horizontal;
padding-top: $control-padding-vertical;
line-height: getVar("control-line-height");
padding-bottom: getVar("control-padding-vertical");
padding-left: getVar("control-padding-horizontal");
padding-right: getVar("control-padding-horizontal");
padding-top: getVar("control-padding-vertical");
position: relative;
vertical-align: top;
@@ -46,14 +66,14 @@ $control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default;
// The controls sizes use mixins so they can be used at different breakpoints
@mixin control-small {
border-radius: $control-radius-small;
font-size: $size-small;
border-radius: getVar("control-radius-small");
font-size: getVar("size-small");
}
@mixin control-medium {
font-size: $size-medium;
font-size: getVar("size-medium");
}
@mixin control-large {
font-size: $size-large;
font-size: getVar("size-large");
}