$button-sizes: (
normal: (
font-size: 14px,
height: 32px,
),
medium: (
font-size: 14px,
height: 44px,
),
large: (
font-size: 15px,
height: 56px,
),
);
@function getButtonSize($property, $size) {
@if map_has_key($button-sizes, $size) {
$button-size: map_get($button-sizes, $size);
@if map_has_key($button-size, $property) {
@return map_get($button-size, $property);
} @else {
@warn "Undefined size property: #{$property}";
}
} @else {
@warn "Undefined size: #{$size}";
}
}
@mixin button-size($size: normal) {
$font-size: getButtonSize(font-size, $size);
$height: getButtonSize(height, $size);
$lines: lines-for-font-size($font-size);
@include adjust-font-size-to($font-size);
height: $height;
$vertical-padding: ($height - $base-line-height - 2) / 2;
padding-top: $vertical-padding;
padding-bottom: $vertical-padding;
}
%button {
background: $brand-dark;
border: 1px solid $brand-dark;
color: #ffffff;
display: inline-block;
font-family: $font-family-sans-serif;
font-size: rem(14px);
font-weight: 400;
height: 32px;
line-height: 30px;
padding: 0 1.5em;
vertical-align: middle;
user-select: none;
border-radius: 2px;
}
.btn {
@extend %button;
@include button-size(normal);
}npm ERR! network This is most likely not a problem with npm itself
npm ERR! network and is related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
