mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Update button colors
This commit is contained in:
Jeremy Thomas
parent
b73e183091
commit
a41ce795ae
1230
docs/css/bulma.css
vendored
1230
docs/css/bulma.css
vendored
File diff suppressed because it is too large
Load Diff
@ -2,7 +2,10 @@
|
||||
|
||||
$modal-z: 40 !default;
|
||||
|
||||
$modal-background-background-color: bulmargba(getVar("shadow-color-rgb"), 0.86) !default;
|
||||
$modal-background-background-color: bulmaRgba(
|
||||
getVar("shadow-color-rgb"),
|
||||
0.86
|
||||
) !default;
|
||||
|
||||
$modal-content-width: 640px !default;
|
||||
$modal-content-margin-mobile: 20px !default;
|
||||
|
||||
@ -34,8 +34,9 @@ $navbar-dropdown-radius: getVar("radius-large") !default;
|
||||
$navbar-dropdown-z: 20 !default;
|
||||
|
||||
$navbar-dropdown-boxed-radius: getVar("radius-large") !default;
|
||||
$navbar-dropdown-boxed-shadow: 0 8px 8px bulmargba(getVar("shadow-color-rgb"), 0.1),
|
||||
0 0 0 1px bulmargba(getVar("shadow-color-rgb"), 0.1) !default;
|
||||
$navbar-dropdown-boxed-shadow: 0 8px 8px
|
||||
bulmaRgba(getVar("shadow-color-rgb"), 0.1),
|
||||
0 0 0 1px bulmaRgba(getVar("shadow-color-rgb"), 0.1) !default;
|
||||
|
||||
$navbar-dropdown-item-hover-color: getVar("scheme-invert") !default;
|
||||
$navbar-dropdown-item-hover-background-color: getVar("background") !default;
|
||||
@ -396,7 +397,7 @@ a.#{$class-prefix}navbar-item,
|
||||
|
||||
.#{$class-prefix}navbar-menu {
|
||||
background-color: getVar("navbar-background-color");
|
||||
box-shadow: 0 8px 16px bulmargba(getVar("shadow-color-rgb"), 0.1);
|
||||
box-shadow: 0 8px 16px bulmaRgba(getVar("shadow-color-rgb"), 0.1);
|
||||
padding: 0.5rem 0;
|
||||
|
||||
&.is-active {
|
||||
@ -415,7 +416,7 @@ a.#{$class-prefix}navbar-item,
|
||||
bottom: 0;
|
||||
|
||||
&.has-shadow {
|
||||
box-shadow: 0 -2px 3px bulmargba(getVar("shadow-color-rgb"), 0.1);
|
||||
box-shadow: 0 -2px 3px bulmaRgba(getVar("shadow-color-rgb"), 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -541,7 +542,7 @@ a.#{$class-prefix}navbar-item,
|
||||
getVar("navbar-dropdown-radius") 0 0;
|
||||
border-top: none;
|
||||
bottom: 100%;
|
||||
box-shadow: 0 -8px 8px bulmargba(getVar("shadow-color-rgb"), 0.1);
|
||||
box-shadow: 0 -8px 8px bulmaRgba(getVar("shadow-color-rgb"), 0.1);
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
@ -585,7 +586,7 @@ a.#{$class-prefix}navbar-item,
|
||||
border-bottom-left-radius: getVar("navbar-dropdown-radius");
|
||||
border-bottom-right-radius: getVar("navbar-dropdown-radius");
|
||||
border-top: getVar("navbar-dropdown-border-top");
|
||||
box-shadow: 0 8px 8px bulmargba(getVar("shadow-color-rgb"), 0.1);
|
||||
box-shadow: 0 8px 8px bulmaRgba(getVar("shadow-color-rgb"), 0.1);
|
||||
display: none;
|
||||
font-size: 0.875rem;
|
||||
@include ltr-position(0, false);
|
||||
@ -662,7 +663,7 @@ a.#{$class-prefix}navbar-item,
|
||||
bottom: 0;
|
||||
|
||||
&.has-shadow {
|
||||
box-shadow: 0 -2px 3px bulmargba(getVar("shadow-color-rgb"), 0.1);
|
||||
box-shadow: 0 -2px 3px bulmaRgba(getVar("shadow-color-rgb"), 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@ $button-background-color: getVar("scheme-main") !default;
|
||||
$button-family: false !default;
|
||||
|
||||
$button-border-color: getVar("border") !default;
|
||||
$button-border-width: $control-border-width !default; // TODO
|
||||
$button-border-width: getVar("control-border-width") !default;
|
||||
|
||||
$button-padding-vertical: calc(
|
||||
0.5em - #{getVar("button-border-width")}
|
||||
@ -45,6 +45,15 @@ $button-static-color: getVar("text-light") !default;
|
||||
$button-static-background-color: getVar("scheme-main-ter") !default;
|
||||
$button-static-border-color: getVar("border") !default;
|
||||
|
||||
$dark-shade: 20 !default;
|
||||
$dark-invert-shade: 90 !default;
|
||||
$light-shade: 90 !default;
|
||||
$light-invert-shade: 50 !default;
|
||||
$button-hover-s: 10% !default;
|
||||
$button-hover-l: -10% !default;
|
||||
$button-active-s: 20% !default;
|
||||
$button-active-l: -20% !default;
|
||||
|
||||
$button-colors: $colors !default;
|
||||
$button-responsive-sizes: (
|
||||
"mobile": (
|
||||
@ -117,6 +126,14 @@ $button-responsive-sizes: (
|
||||
button-static-color: #{$button-static-color},
|
||||
button-static-background-color: #{$button-static-background-color},
|
||||
button-static-border-color: #{$button-static-border-color},
|
||||
button-hover-s: #{$button-hover-s},
|
||||
button-hover-l: #{$button-hover-l},
|
||||
button-active-s: #{$button-active-s},
|
||||
button-active-l: #{$button-active-l},
|
||||
dark-shade: #{$dark-shade},
|
||||
dark-invert-shade: #{$dark-invert-shade},
|
||||
light-shade: #{$light-shade},
|
||||
light-invert-shade: #{$light-invert-shade},
|
||||
)
|
||||
);
|
||||
}
|
||||
@ -209,7 +226,7 @@ $button-responsive-sizes: (
|
||||
color: getVar("button-hover-color");
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:focus-visible,
|
||||
&.is-focused {
|
||||
border-color: getVar("button-focus-border-color");
|
||||
color: getVar("button-focus-color");
|
||||
@ -235,7 +252,7 @@ $button-responsive-sizes: (
|
||||
|
||||
&:hover,
|
||||
&.is-hovered,
|
||||
&:focus,
|
||||
&:focus-visible,
|
||||
&.is-focused {
|
||||
background-color: getVar("button-text-hover-background-color");
|
||||
color: getVar("button-text-hover-color");
|
||||
@ -269,101 +286,104 @@ $button-responsive-sizes: (
|
||||
}
|
||||
|
||||
@each $name, $pair in $button-colors {
|
||||
$color: nth($pair, 1);
|
||||
$color-invert: nth($pair, 2);
|
||||
$base-h: getVar($name, "", "-h");
|
||||
$base-s: getVar($name, "", "-s");
|
||||
$base-l: getVar($name, "", "-l");
|
||||
$invert: getVar($name, "", "-invert");
|
||||
$base: hsla($base-h, var(--s), var(--l), 1);
|
||||
$button-shadow: hsla($base-h, var(--s), var(--l), 0.5);
|
||||
|
||||
&.is-#{$name} {
|
||||
background-color: $color;
|
||||
--base-s: #{$base-s};
|
||||
--base-l: #{$base-l};
|
||||
--s: var(--base-s);
|
||||
--l: var(--base-l);
|
||||
background-color: $base;
|
||||
border-color: transparent;
|
||||
color: $color-invert;
|
||||
color: $invert;
|
||||
|
||||
&:hover,
|
||||
&.is-hovered {
|
||||
background-color: bulmaDarken($color, 2.5%);
|
||||
--s: calc(var(--base-s) + var(--bulma-button-hover-s));
|
||||
--l: calc(var(--base-l) + var(--bulma-button-hover-l));
|
||||
border-color: transparent;
|
||||
color: $color-invert;
|
||||
color: $invert;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:focus-visible,
|
||||
&.is-focused {
|
||||
border-color: transparent;
|
||||
color: $color-invert;
|
||||
color: $invert;
|
||||
|
||||
&:not(:active) {
|
||||
box-shadow: getVar("button-focus-box-shadow-size")
|
||||
bulmaRgba($color, 0.25);
|
||||
box-shadow: getVar("button-focus-box-shadow-size") $button-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.is-active {
|
||||
background-color: bulmaDarken($color, 5%);
|
||||
--s: calc(var(--base-s) + var(--bulma-button-active-s));
|
||||
--l: calc(var(--base-l) + var(--bulma-button-active-l));
|
||||
border-color: transparent;
|
||||
color: $color-invert;
|
||||
color: $invert;
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
background-color: $base;
|
||||
border-color: $base;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.is-inverted {
|
||||
background-color: $color-invert;
|
||||
color: $color;
|
||||
background-color: $invert;
|
||||
color: $base;
|
||||
|
||||
&:hover,
|
||||
&.is-hovered {
|
||||
background-color: bulmaDarken($color-invert, 5%);
|
||||
// background-color: bulmaDarken($color-invert, 5%);
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
background-color: $color-invert;
|
||||
background-color: $invert;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
color: $color;
|
||||
color: $base;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-loading {
|
||||
&::after {
|
||||
border-color: transparent
|
||||
transparent
|
||||
$color-invert
|
||||
$color-invert !important;
|
||||
border-color: transparent transparent $invert $invert !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-outlined {
|
||||
background-color: transparent;
|
||||
border-color: $color;
|
||||
color: $color;
|
||||
border-color: $base;
|
||||
color: $base;
|
||||
|
||||
&:hover,
|
||||
&.is-hovered,
|
||||
&:focus,
|
||||
&:focus-visible,
|
||||
&.is-focused {
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
color: $color-invert;
|
||||
background-color: $base;
|
||||
border-color: $base;
|
||||
color: $invert;
|
||||
}
|
||||
|
||||
&.is-loading {
|
||||
&::after {
|
||||
border-color: transparent transparent $color $color !important;
|
||||
border-color: transparent transparent $base $base !important;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.is-hovered,
|
||||
&:focus,
|
||||
&:focus-visible,
|
||||
&.is-focused {
|
||||
&::after {
|
||||
border-color: transparent
|
||||
transparent
|
||||
$color-invert
|
||||
$color-invert !important;
|
||||
border-color: transparent transparent $invert $invert !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -371,32 +391,32 @@ $button-responsive-sizes: (
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
background-color: transparent;
|
||||
border-color: $color;
|
||||
border-color: $base;
|
||||
box-shadow: none;
|
||||
color: $color;
|
||||
color: $base;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-inverted.is-outlined {
|
||||
background-color: transparent;
|
||||
border-color: $color-invert;
|
||||
color: $color-invert;
|
||||
border-color: $invert;
|
||||
color: $invert;
|
||||
|
||||
&:hover,
|
||||
&.is-hovered,
|
||||
&:focus,
|
||||
&:focus-visible,
|
||||
&.is-focused {
|
||||
background-color: $color-invert;
|
||||
color: $color;
|
||||
background-color: $invert;
|
||||
color: $base;
|
||||
}
|
||||
|
||||
&.is-loading {
|
||||
&:hover,
|
||||
&.is-hovered,
|
||||
&:focus,
|
||||
&:focus-visible,
|
||||
&.is-focused {
|
||||
&::after {
|
||||
border-color: transparent transparent $color $color !important;
|
||||
border-color: transparent transparent $base $base !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -404,36 +424,55 @@ $button-responsive-sizes: (
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
background-color: transparent;
|
||||
border-color: $color-invert;
|
||||
border-color: $invert;
|
||||
box-shadow: none;
|
||||
color: $color-invert;
|
||||
color: $invert;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-light {
|
||||
// --l: var(--bulma-dark-shade);
|
||||
background-color: getVar($name, "", "-#{$light-shade}");
|
||||
color: $base;
|
||||
|
||||
&:hover,
|
||||
&.is-hovered {
|
||||
background-color: getVar($name, "", "-#{$light-shade - 5}");
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.is-active {
|
||||
background-color: getVar($name, "", "-#{$light-shade - 10}");
|
||||
border-color: transparent;
|
||||
// color: $color-dark;
|
||||
}
|
||||
}
|
||||
|
||||
// If light and dark colors are provided
|
||||
@if length($pair) >= 4 {
|
||||
$color-light: nth($pair, 3);
|
||||
$color-dark: nth($pair, 4);
|
||||
// @if length($pair) >= 4 {
|
||||
// $color-light: nth($pair, 3);
|
||||
// $color-dark: nth($pair, 4);
|
||||
|
||||
&.is-light {
|
||||
background-color: $color-light;
|
||||
color: $color-dark;
|
||||
// &.is-light {
|
||||
// background-color: $color-light;
|
||||
// color: $color-dark;
|
||||
|
||||
&:hover,
|
||||
&.is-hovered {
|
||||
background-color: bulmaDarken($color-light, 2.5%);
|
||||
border-color: transparent;
|
||||
color: $color-dark;
|
||||
}
|
||||
// &:hover,
|
||||
// &.is-hovered {
|
||||
// background-color: bulmaDarken($color-light, 2.5%);
|
||||
// border-color: transparent;
|
||||
// color: $color-dark;
|
||||
// }
|
||||
|
||||
&:active,
|
||||
&.is-active {
|
||||
background-color: bulmaDarken($color-light, 5%);
|
||||
border-color: transparent;
|
||||
color: $color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
// &:active,
|
||||
// &.is-active {
|
||||
// background-color: bulmaDarken($color-light, 5%);
|
||||
// border-color: transparent;
|
||||
// color: $color-dark;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
@ -558,7 +597,7 @@ $button-responsive-sizes: (
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:focus-visible,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active,
|
||||
|
||||
@ -95,7 +95,7 @@ $hero-colors: $colors !default;
|
||||
color: $color-invert;
|
||||
|
||||
&:hover {
|
||||
background-color: bulmargba(getVar("shadow-color-rgb"), 0.1);
|
||||
background-color: bulmaRgba(getVar("shadow-color-rgb"), 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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");
|
||||
}
|
||||
|
||||
@ -8,7 +8,12 @@
|
||||
// The color name should be a string
|
||||
// and the components either a single color
|
||||
// or a colors list with at least one element
|
||||
@if type-of($name) == "string" and (type-of($components) == "list" or type-of($components) == "color") and length($components) >= 1 {
|
||||
@if type-of($name) ==
|
||||
"string" and
|
||||
(type-of($components) == "list" or type-of($components) == "color") and
|
||||
length($components) >=
|
||||
1
|
||||
{
|
||||
$color-base: null;
|
||||
$color-invert: null;
|
||||
$color-light: null;
|
||||
@ -22,8 +27,7 @@
|
||||
$color-invert: findColorInvert($color-base);
|
||||
$color-light: findLightColor($color-base);
|
||||
$color-dark: findDarkColor($color-base);
|
||||
}
|
||||
@else if type-of($components) == "list" {
|
||||
} @else if type-of($components) == "list" {
|
||||
$color-base: nth($components, 1);
|
||||
|
||||
// If Invert, Light and Dark are provided
|
||||
@ -33,15 +37,13 @@
|
||||
$color-dark: nth($components, 4);
|
||||
|
||||
// If only Invert and Light are provided
|
||||
}
|
||||
@else if length($components) > 2 {
|
||||
} @else if length($components) > 2 {
|
||||
$color-invert: nth($components, 2);
|
||||
$color-light: nth($components, 3);
|
||||
$color-dark: findDarkColor($color-base);
|
||||
|
||||
// If only Invert is provided
|
||||
}
|
||||
@else {
|
||||
} @else {
|
||||
$color-invert: nth($components, 2);
|
||||
$color-light: findLightColor($color-base);
|
||||
$color-dark: findDarkColor($color-base);
|
||||
@ -55,7 +57,12 @@
|
||||
// We merge this colors elements as map with Bulma's colors map
|
||||
// (we can override them this way, no multiple definition for the same name)
|
||||
// $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark)))
|
||||
$merged-colors: map_merge($merged-colors, ($name: $value));
|
||||
$merged-colors: map_merge(
|
||||
$merged-colors,
|
||||
(
|
||||
$name: $value,
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -71,8 +78,7 @@
|
||||
@for $i from 1 through $exp {
|
||||
$value: $value * $number;
|
||||
}
|
||||
}
|
||||
@else if $exp < 0 {
|
||||
} @else if $exp < 0 {
|
||||
@for $i from 1 through -$exp {
|
||||
$value: divide($value, $number);
|
||||
}
|
||||
@ -86,7 +92,11 @@
|
||||
@return 0.55;
|
||||
}
|
||||
|
||||
$color-rgb: ("red": red($color), "green": green($color), "blue": blue($color));
|
||||
$color-rgb: (
|
||||
"red": red($color),
|
||||
"green": green($color),
|
||||
"blue": blue($color),
|
||||
);
|
||||
|
||||
@each $name, $value in $color-rgb {
|
||||
$adjusted: 0;
|
||||
@ -94,23 +104,27 @@
|
||||
|
||||
@if $value < 0.03928 {
|
||||
$value: divide($value, 12.92);
|
||||
}
|
||||
@else {
|
||||
} @else {
|
||||
$value: divide($value + 0.055, 1.055);
|
||||
$value: powerNumber($value, 2);
|
||||
}
|
||||
|
||||
$color-rgb: map-merge($color-rgb, ($name: $value));
|
||||
$color-rgb: map-merge(
|
||||
$color-rgb,
|
||||
(
|
||||
$name: $value,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@return map-get($color-rgb, "red") * 0.2126 + map-get($color-rgb, "green") * 0.7152 + map-get($color-rgb, "blue") * 0.0722;
|
||||
@return map-get($color-rgb, "red") * 0.2126 + map-get($color-rgb, "green") *
|
||||
0.7152 + map-get($color-rgb, "blue") * 0.0722;
|
||||
}
|
||||
|
||||
@function findColorInvert($color) {
|
||||
@if colorLuminance($color) > 0.55 {
|
||||
@return rgba(#000, 0.7);
|
||||
}
|
||||
@else {
|
||||
} @else {
|
||||
@return #fff;
|
||||
}
|
||||
}
|
||||
@ -142,10 +156,6 @@
|
||||
}
|
||||
|
||||
@function bulmaRgba($color, $alpha) {
|
||||
@if type-of($color) != "color" {
|
||||
@return $color;
|
||||
}
|
||||
|
||||
@return rgba($color, $alpha);
|
||||
}
|
||||
|
||||
|
||||
@ -14,8 +14,7 @@
|
||||
@if $height != 0 {
|
||||
left: calc(50% - (#{$width} * 0.5));
|
||||
top: calc(50% - (#{$height} * 0.5));
|
||||
}
|
||||
@else {
|
||||
} @else {
|
||||
left: calc(50% - (#{$width} * 0.5));
|
||||
top: calc(50% - (#{$width} * 0.5));
|
||||
}
|
||||
@ -226,13 +225,11 @@
|
||||
@include between($from, $until) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@else if $from {
|
||||
} @else if $from {
|
||||
@include from($from) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@else if $until {
|
||||
} @else if $until {
|
||||
@include until($until) {
|
||||
@content;
|
||||
}
|
||||
@ -258,8 +255,7 @@
|
||||
|
||||
@if $rtl {
|
||||
#{$property}-#{$opposite}: $spacing;
|
||||
}
|
||||
@else {
|
||||
} @else {
|
||||
#{$property}-#{$normal}: $spacing;
|
||||
}
|
||||
}
|
||||
@ -270,8 +266,7 @@
|
||||
|
||||
@if $rtl {
|
||||
#{$opposite}: $spacing;
|
||||
}
|
||||
@else {
|
||||
} @else {
|
||||
#{$normal}: $spacing;
|
||||
}
|
||||
}
|
||||
@ -314,7 +309,7 @@
|
||||
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background-color: bulmargba(getVar("shadow-color-rgb"), 0.2);
|
||||
background-color: bulmaRgba(getVar("shadow-color-rgb"), 0.2);
|
||||
border: none;
|
||||
border-radius: $radius-rounded;
|
||||
cursor: pointer;
|
||||
@ -357,11 +352,11 @@
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: bulmargba(getVar("shadow-color-rgb"), 0.3);
|
||||
background-color: bulmaRgba(getVar("shadow-color-rgb"), 0.3);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: bulmargba(getVar("shadow-color-rgb"), 0.4);
|
||||
background-color: bulmaRgba(getVar("shadow-color-rgb"), 0.4);
|
||||
}
|
||||
|
||||
// Sizes
|
||||
|
||||
Loading…
Reference in New Issue
Block a user