mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
658 lines
17 KiB
SCSS
658 lines
17 KiB
SCSS
@import "../utilities/controls";
|
|
@import "../utilities/mixins";
|
|
|
|
$button-color: getVar("text-strong") !default;
|
|
$button-background-color: getVar("scheme-main") !default;
|
|
$button-family: false !default;
|
|
|
|
$button-border-color: getVar("border") !default;
|
|
$button-border-width: getVar("control-border-width") !default;
|
|
|
|
$button-padding-vertical: calc(
|
|
0.5em - #{getVar("button-border-width")}
|
|
) !default;
|
|
$button-padding-horizontal: 1em !default;
|
|
|
|
$button-hover-color: getVar("link-hover") !default;
|
|
$button-hover-border-color: getVar("link-hover-border") !default;
|
|
|
|
$button-focus-color: getVar("link-focus") !default;
|
|
$button-focus-border-color: getVar("link-focus-border") !default;
|
|
$button-focus-box-shadow-size: 0 0 0 0.125em !default;
|
|
$button-focus-box-shadow-color: bulmaRgba($link, 0.25) !default;
|
|
|
|
$button-active-color: getVar("link-active") !default;
|
|
$button-active-border-color: getVar("link-active-border") !default;
|
|
|
|
$button-text-color: getVar("text") !default;
|
|
$button-text-decoration: underline !default;
|
|
$button-text-hover-background-color: getVar("background") !default;
|
|
$button-text-hover-color: getVar("text-strong") !default;
|
|
|
|
$button-ghost-background: none !default;
|
|
$button-ghost-border-color: transparent !default;
|
|
$button-ghost-color: getVar("link") !default;
|
|
$button-ghost-decoration: none !default;
|
|
$button-ghost-hover-color: getVar("link") !default;
|
|
$button-ghost-hover-decoration: underline !default;
|
|
|
|
$button-disabled-background-color: getVar("scheme-main") !default;
|
|
$button-disabled-border-color: getVar("border") !default;
|
|
$button-disabled-shadow: none !default;
|
|
$button-disabled-opacity: 0.5 !default;
|
|
|
|
$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": (
|
|
"small": calc(#{getVar("size-small")} * 0.75),
|
|
"normal": calc(#{getVar("size-small")} * 0.875),
|
|
"medium": getVar("size-small"),
|
|
"large": getVar("size-normal"),
|
|
),
|
|
"tablet-only": (
|
|
"small": calc(#{getVar("size-small")} * 0.875),
|
|
"normal": getVar("size-small"),
|
|
"medium": getVar("size-normal"),
|
|
"large": getVar("size-medium"),
|
|
),
|
|
) !default;
|
|
|
|
// The button sizes use mixins so they can be used at different breakpoints
|
|
@mixin button-small {
|
|
&:not(.is-rounded) {
|
|
border-radius: getVar("radius-small");
|
|
}
|
|
|
|
font-size: getVar("size-small");
|
|
}
|
|
|
|
@mixin button-normal {
|
|
font-size: getVar("size-normal");
|
|
}
|
|
|
|
@mixin button-medium {
|
|
font-size: getVar("size-medium");
|
|
}
|
|
|
|
@mixin button-large {
|
|
font-size: getVar("size-large");
|
|
}
|
|
|
|
:root {
|
|
@include register-vars(
|
|
(
|
|
button-color: #{$button-color},
|
|
button-background-color: #{$button-background-color},
|
|
button-family: #{$button-family},
|
|
button-border-color: #{$button-border-color},
|
|
button-border-width: #{$button-border-width},
|
|
button-padding-vertical: #{$button-padding-vertical},
|
|
button-padding-horizontal: #{$button-padding-horizontal},
|
|
button-hover-color: #{$button-hover-color},
|
|
button-hover-border-color: #{$button-hover-border-color},
|
|
button-focus-color: #{$button-focus-color},
|
|
button-focus-border-color: #{$button-focus-border-color},
|
|
button-focus-box-shadow-size: #{$button-focus-box-shadow-size},
|
|
button-focus-box-shadow-color: #{$button-focus-box-shadow-color},
|
|
button-active-color: #{$button-active-color},
|
|
button-active-border-color: #{$button-active-border-color},
|
|
button-text-color: #{$button-text-color},
|
|
button-text-decoration: #{$button-text-decoration},
|
|
button-text-hover-background-color: #{$button-text-hover-background-color},
|
|
button-text-hover-color: #{$button-text-hover-color},
|
|
button-ghost-background: #{$button-ghost-background},
|
|
button-ghost-border-color: #{$button-ghost-border-color},
|
|
button-ghost-color: #{$button-ghost-color},
|
|
button-ghost-decoration: #{$button-ghost-decoration},
|
|
button-ghost-hover-color: #{$button-ghost-hover-color},
|
|
button-ghost-hover-decoration: #{$button-ghost-hover-decoration},
|
|
button-disabled-background-color: #{$button-disabled-background-color},
|
|
button-disabled-border-color: #{$button-disabled-border-color},
|
|
button-disabled-shadow: #{$button-disabled-shadow},
|
|
button-disabled-opacity: #{$button-disabled-opacity},
|
|
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},
|
|
)
|
|
);
|
|
}
|
|
|
|
.#{$class-prefix}button {
|
|
@extend %control;
|
|
@extend %unselectable;
|
|
|
|
background-color: getVar("button-background-color");
|
|
border-color: getVar("button-border-color");
|
|
border-width: getVar("button-border-width");
|
|
color: getVar("button-color");
|
|
cursor: pointer;
|
|
|
|
@if $button-family {
|
|
font-family: getVar("button-family");
|
|
}
|
|
|
|
justify-content: center;
|
|
padding-bottom: getVar("button-padding-vertical");
|
|
padding-left: getVar("button-padding-horizontal");
|
|
padding-right: getVar("button-padding-horizontal");
|
|
padding-top: getVar("button-padding-vertical");
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
|
|
strong {
|
|
color: inherit;
|
|
}
|
|
|
|
.#{$class-prefix}icon {
|
|
&,
|
|
&.is-small,
|
|
&.is-medium,
|
|
&.is-large {
|
|
height: 1.5em;
|
|
width: 1.5em;
|
|
}
|
|
|
|
&:first-child:not(:last-child) {
|
|
@include ltr-property(
|
|
"margin",
|
|
calc(
|
|
calc(-0.5 * #{getVar("button-padding-horizontal")}) - #{getVar(
|
|
"button-border-width"
|
|
)}
|
|
),
|
|
false
|
|
);
|
|
@include ltr-property(
|
|
"margin",
|
|
calc(#{getVar("button-padding-horizontal")} * 0.25)
|
|
);
|
|
}
|
|
|
|
&:last-child:not(:first-child) {
|
|
@include ltr-property(
|
|
"margin",
|
|
calc(#{getVar("button-padding-horizontal")} * 0.25),
|
|
false
|
|
);
|
|
@include ltr-property(
|
|
"margin",
|
|
calc(
|
|
calc(-0.5 * #{getVar("button-padding-horizontal")}) - #{getVar(
|
|
"button-border-width"
|
|
)}
|
|
)
|
|
);
|
|
}
|
|
|
|
&:first-child:last-child {
|
|
margin-left: calc(
|
|
calc(-0.5 * #{getVar("button-padding-horizontal")}) - #{getVar(
|
|
"button-border-width"
|
|
)}
|
|
);
|
|
margin-right: calc(
|
|
calc(-0.5 * #{getVar("button-padding-horizontal")}) - #{getVar(
|
|
"button-border-width"
|
|
)}
|
|
);
|
|
}
|
|
}
|
|
|
|
// States
|
|
&:hover,
|
|
&.is-hovered {
|
|
border-color: getVar("button-hover-border-color");
|
|
color: getVar("button-hover-color");
|
|
}
|
|
|
|
&:focus-visible,
|
|
&.is-focused {
|
|
border-color: getVar("button-focus-border-color");
|
|
color: getVar("button-focus-color");
|
|
|
|
&:not(:active) {
|
|
box-shadow: getVar("button-focus-box-shadow-size")
|
|
getVar("button-focus-box-shadow-color");
|
|
}
|
|
}
|
|
|
|
&:active,
|
|
&.is-active {
|
|
border-color: getVar("button-active-border-color");
|
|
color: getVar("button-active-color");
|
|
}
|
|
|
|
// Colors
|
|
&.is-text {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
color: getVar("button-text-color");
|
|
text-decoration: getVar("button-text-decoration");
|
|
|
|
&:hover,
|
|
&.is-hovered,
|
|
&:focus-visible,
|
|
&.is-focused {
|
|
background-color: getVar("button-text-hover-background-color");
|
|
color: getVar("button-text-hover-color");
|
|
}
|
|
|
|
&:active,
|
|
&.is-active {
|
|
// background-color: bulmaDarken($button-text-hover-background-color, 5%); // TODO
|
|
color: getVar("button-text-hover-color");
|
|
}
|
|
|
|
&[disabled],
|
|
fieldset[disabled] & {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
&.is-ghost {
|
|
background: getVar("button-ghost-background");
|
|
border-color: getVar("button-ghost-border-color");
|
|
color: getVar("button-ghost-color");
|
|
text-decoration: getVar("button-ghost-decoration");
|
|
|
|
&:hover,
|
|
&.is-hovered {
|
|
color: getVar("button-ghost-hover-color");
|
|
text-decoration: getVar("button-ghost-hover-decoration");
|
|
}
|
|
}
|
|
|
|
@each $name, $pair in $button-colors {
|
|
$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} {
|
|
--base-s: #{$base-s};
|
|
--base-l: #{$base-l};
|
|
--s: var(--base-s);
|
|
--l: var(--base-l);
|
|
background-color: $base;
|
|
border-color: transparent;
|
|
color: $invert;
|
|
|
|
&:hover,
|
|
&.is-hovered {
|
|
--s: calc(var(--base-s) + var(--bulma-button-hover-s));
|
|
--l: calc(var(--base-l) + var(--bulma-button-hover-l));
|
|
border-color: transparent;
|
|
color: $invert;
|
|
}
|
|
|
|
&:focus-visible,
|
|
&.is-focused {
|
|
border-color: transparent;
|
|
color: $invert;
|
|
|
|
&:not(:active) {
|
|
box-shadow: getVar("button-focus-box-shadow-size") $button-shadow;
|
|
}
|
|
}
|
|
|
|
&:active,
|
|
&.is-active {
|
|
--s: calc(var(--base-s) + var(--bulma-button-active-s));
|
|
--l: calc(var(--base-l) + var(--bulma-button-active-l));
|
|
border-color: transparent;
|
|
color: $invert;
|
|
}
|
|
|
|
&[disabled],
|
|
fieldset[disabled] & {
|
|
background-color: $base;
|
|
border-color: $base;
|
|
box-shadow: none;
|
|
}
|
|
|
|
&.is-inverted {
|
|
background-color: $invert;
|
|
color: $base;
|
|
|
|
&:hover,
|
|
&.is-hovered {
|
|
// background-color: bulmaDarken($color-invert, 5%);
|
|
}
|
|
|
|
&[disabled],
|
|
fieldset[disabled] & {
|
|
background-color: $invert;
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
color: $base;
|
|
}
|
|
}
|
|
|
|
&.is-loading {
|
|
&::after {
|
|
border-color: transparent transparent $invert $invert !important;
|
|
}
|
|
}
|
|
|
|
&.is-outlined {
|
|
background-color: transparent;
|
|
border-color: $base;
|
|
color: $base;
|
|
|
|
&:hover,
|
|
&.is-hovered,
|
|
&:focus-visible,
|
|
&.is-focused {
|
|
background-color: $base;
|
|
border-color: $base;
|
|
color: $invert;
|
|
}
|
|
|
|
&.is-loading {
|
|
&::after {
|
|
border-color: transparent transparent $base $base !important;
|
|
}
|
|
|
|
&:hover,
|
|
&.is-hovered,
|
|
&:focus-visible,
|
|
&.is-focused {
|
|
&::after {
|
|
border-color: transparent transparent $invert $invert !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[disabled],
|
|
fieldset[disabled] & {
|
|
background-color: transparent;
|
|
border-color: $base;
|
|
box-shadow: none;
|
|
color: $base;
|
|
}
|
|
}
|
|
|
|
&.is-inverted.is-outlined {
|
|
background-color: transparent;
|
|
border-color: $invert;
|
|
color: $invert;
|
|
|
|
&:hover,
|
|
&.is-hovered,
|
|
&:focus-visible,
|
|
&.is-focused {
|
|
background-color: $invert;
|
|
color: $base;
|
|
}
|
|
|
|
&.is-loading {
|
|
&:hover,
|
|
&.is-hovered,
|
|
&:focus-visible,
|
|
&.is-focused {
|
|
&::after {
|
|
border-color: transparent transparent $base $base !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[disabled],
|
|
fieldset[disabled] & {
|
|
background-color: transparent;
|
|
border-color: $invert;
|
|
box-shadow: none;
|
|
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);
|
|
|
|
// &.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;
|
|
// }
|
|
|
|
// &:active,
|
|
// &.is-active {
|
|
// background-color: bulmaDarken($color-light, 5%);
|
|
// border-color: transparent;
|
|
// color: $color-dark;
|
|
// }
|
|
// }
|
|
// }
|
|
}
|
|
}
|
|
|
|
// Sizes
|
|
&.is-small {
|
|
@include button-small;
|
|
}
|
|
|
|
&.is-normal {
|
|
@include button-normal;
|
|
}
|
|
|
|
&.is-medium {
|
|
@include button-medium;
|
|
}
|
|
|
|
&.is-large {
|
|
@include button-large;
|
|
}
|
|
|
|
// Modifiers
|
|
&[disabled],
|
|
fieldset[disabled] & {
|
|
background-color: getVar("button-disabled-background-color");
|
|
border-color: getVar("button-disabled-border-color");
|
|
box-shadow: getVar("button-disabled-shadow");
|
|
opacity: getVar("button-disabled-opacity");
|
|
}
|
|
|
|
&.is-fullwidth {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
&.is-loading {
|
|
color: transparent !important;
|
|
pointer-events: none;
|
|
|
|
&::after {
|
|
@extend %loader;
|
|
@include center(1em);
|
|
position: absolute !important;
|
|
}
|
|
}
|
|
|
|
&.is-static {
|
|
background-color: getVar("button-static-background-color");
|
|
border-color: getVar("button-static-border-color");
|
|
color: getVar("button-static-color");
|
|
box-shadow: none;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&.is-rounded {
|
|
border-radius: getVar("radius-rounded");
|
|
padding-left: calc(#{getVar("button-padding-horizontal")} + 0.25em);
|
|
padding-right: calc(#{getVar("button-padding-horizontal")} + 0.25em);
|
|
}
|
|
}
|
|
|
|
.#{$class-prefix}buttons {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
|
|
.#{$class-prefix}button {
|
|
margin-bottom: 0.5rem;
|
|
|
|
&:not(:last-child):not(.is-fullwidth) {
|
|
@include ltr-property("margin", 0.5rem);
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: -0.5rem;
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
// Sizes
|
|
&.are-small {
|
|
.#{$class-prefix}button:not(.is-normal):not(.is-medium):not(.is-large) {
|
|
@include button-small;
|
|
}
|
|
}
|
|
|
|
&.are-medium {
|
|
.#{$class-prefix}button:not(.is-small):not(.is-normal):not(.is-large) {
|
|
@include button-medium;
|
|
}
|
|
}
|
|
|
|
&.are-large {
|
|
.#{$class-prefix}button:not(.is-small):not(.is-normal):not(.is-medium) {
|
|
@include button-large;
|
|
}
|
|
}
|
|
|
|
&.has-addons {
|
|
.#{$class-prefix}button {
|
|
&:not(:first-child) {
|
|
border-bottom-left-radius: 0;
|
|
border-top-left-radius: 0;
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
border-bottom-right-radius: 0;
|
|
border-top-right-radius: 0;
|
|
|
|
@include ltr-property("margin", -1px);
|
|
}
|
|
|
|
&:last-child {
|
|
@include ltr-property("margin", 0);
|
|
}
|
|
|
|
&:hover,
|
|
&.is-hovered {
|
|
z-index: 2;
|
|
}
|
|
|
|
&:focus-visible,
|
|
&.is-focused,
|
|
&:active,
|
|
&.is-active,
|
|
&.is-selected {
|
|
z-index: 3;
|
|
|
|
&:hover {
|
|
z-index: 4;
|
|
}
|
|
}
|
|
|
|
&.is-expanded {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.is-centered {
|
|
justify-content: center;
|
|
|
|
&:not(.has-addons) {
|
|
.#{$class-prefix}button:not(.is-fullwidth) {
|
|
margin-left: 0.25rem;
|
|
margin-right: 0.25rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.is-right {
|
|
justify-content: flex-end;
|
|
|
|
&:not(.has-addons) {
|
|
.#{$class-prefix}button:not(.is-fullwidth) {
|
|
margin-left: 0.25rem;
|
|
margin-right: 0.25rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@each $bp-name, $bp-sizes in $button-responsive-sizes {
|
|
@include breakpoint($bp-name) {
|
|
@each $size, $value in $bp-sizes {
|
|
@if $size != "normal" {
|
|
.#{$class-prefix}button.is-responsive.is-#{$size} {
|
|
font-size: getVar("value");
|
|
}
|
|
} @else {
|
|
.#{$class-prefix}button.is-responsive,
|
|
.#{$class-prefix}button.is-responsive.is-normal {
|
|
font-size: getVar("value");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|