mirror of
https://github.com/jgthms/bulma
synced 2026-03-20 12:24:28 -07:00
Update button colors
This commit is contained in:
@@ -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");
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user