640 lines
18 KiB
SCSS
640 lines
18 KiB
SCSS
@use "sass:list";
|
|
|
|
@use "../utilities/css-variables" as cv;
|
|
@use "../utilities/derived-variables" as dv;
|
|
@use "../utilities/initial-variables" as iv;
|
|
@use "../utilities/extends";
|
|
@use "../utilities/mixins" as mx;
|
|
|
|
$button-h: #{cv.getVar("scheme-h")};
|
|
$button-s: #{cv.getVar("scheme-s")};
|
|
$button-l: #{cv.getVar("scheme-main-l")};
|
|
$button-background-l: #{cv.getVar("scheme-main-l")};
|
|
$button-background-l-delta: 0%;
|
|
$button-hover-background-l-delta: #{cv.getVar("hover-background-l-delta")};
|
|
$button-active-background-l-delta: #{cv.getVar("active-background-l-delta")};
|
|
$button-color-l: #{cv.getVar("text-strong-l")};
|
|
$button-border-l: #{cv.getVar("border-l")};
|
|
$button-border-l-delta: 0%;
|
|
$button-hover-border-l-delta: #{cv.getVar("hover-border-l-delta")};
|
|
$button-active-border-l-delta: #{cv.getVar("active-border-l-delta")};
|
|
$button-focus-border-l-delta: #{cv.getVar("focus-border-l-delta")};
|
|
$button-outer-shadow-h: 0;
|
|
$button-outer-shadow-s: 0%;
|
|
$button-outer-shadow-l: 20%;
|
|
$button-outer-shadow-a: 0.05;
|
|
|
|
$button-weight: cv.getVar("weight-medium") !default;
|
|
$button-family: false !default;
|
|
|
|
$button-border-color: cv.getVar("border") !default;
|
|
$button-border-style: solid !default;
|
|
$button-border-width: cv.getVar("control-border-width") !default;
|
|
|
|
$button-padding-vertical: 0.5em !default;
|
|
$button-padding-horizontal: 1em !default;
|
|
|
|
$button-focus-border-color: cv.getVar("link-focus-border") !default;
|
|
$button-focus-box-shadow-size: 0 0 0 0.125em !default;
|
|
$button-focus-box-shadow-color: hsla(
|
|
#{cv.getVar("link-h")},
|
|
#{cv.getVar("link-s")},
|
|
#{cv.getVar("link-on-scheme-l")},
|
|
0.25
|
|
) !default;
|
|
|
|
$button-active-color: cv.getVar("link-active") !default;
|
|
$button-active-border-color: cv.getVar("link-active-border") !default;
|
|
|
|
$button-text-color: cv.getVar("text") !default;
|
|
$button-text-decoration: underline !default;
|
|
$button-text-hover-background-color: cv.getVar("background") !default;
|
|
$button-text-hover-color: cv.getVar("text-strong") !default;
|
|
|
|
$button-ghost-background: none !default;
|
|
$button-ghost-border-color: transparent !default;
|
|
$button-ghost-color: cv.getVar("link-text") !default;
|
|
$button-ghost-decoration: none !default;
|
|
$button-ghost-hover-color: cv.getVar("link") !default;
|
|
$button-ghost-hover-decoration: underline !default;
|
|
|
|
$button-disabled-background-color: cv.getVar("scheme-main") !default;
|
|
$button-disabled-border-color: cv.getVar("border") !default;
|
|
$button-disabled-shadow: none !default;
|
|
$button-disabled-opacity: 0.5 !default;
|
|
|
|
$button-static-color: cv.getVar("text-weak") !default;
|
|
$button-static-background-color: cv.getVar("scheme-main-ter") !default;
|
|
$button-static-border-color: cv.getVar("border") !default;
|
|
|
|
$button-colors: dv.$colors !default;
|
|
$button-responsive-sizes: (
|
|
"mobile": (
|
|
"small": calc(#{cv.getVar("size-small")} * 0.75),
|
|
"normal": calc(#{cv.getVar("size-small")} * 0.875),
|
|
"medium": cv.getVar("size-small"),
|
|
"large": cv.getVar("size-normal"),
|
|
),
|
|
"tablet-only": (
|
|
"small": calc(#{cv.getVar("size-small")} * 0.875),
|
|
"normal": cv.getVar("size-small"),
|
|
"medium": cv.getVar("size-normal"),
|
|
"large": cv.getVar("size-medium"),
|
|
),
|
|
) !default;
|
|
|
|
$no-palette: ("white", "black", "light", "dark");
|
|
|
|
.#{iv.$class-prefix}button {
|
|
@include cv.register-vars(
|
|
(
|
|
"button-family": #{$button-family},
|
|
"button-weight": #{$button-weight},
|
|
"button-border-color": #{$button-border-color},
|
|
"button-border-style": #{$button-border-style},
|
|
"button-border-width": #{$button-border-width},
|
|
"button-padding-vertical": #{$button-padding-vertical},
|
|
"button-padding-horizontal": #{$button-padding-horizontal},
|
|
"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},
|
|
)
|
|
);
|
|
}
|
|
|
|
.#{iv.$class-prefix}button {
|
|
@include cv.register-vars(
|
|
(
|
|
"button-h": #{$button-h},
|
|
"button-s": #{$button-s},
|
|
"button-l": #{$button-l},
|
|
"button-background-l": #{$button-background-l},
|
|
"button-background-l-delta": #{$button-background-l-delta},
|
|
"button-hover-background-l-delta": #{$button-hover-background-l-delta},
|
|
"button-active-background-l-delta": #{$button-active-background-l-delta},
|
|
"button-color-l": #{$button-color-l},
|
|
"button-border-l": #{$button-border-l},
|
|
"button-border-l-delta": #{$button-border-l-delta},
|
|
"button-hover-border-l-delta": #{$button-hover-border-l-delta},
|
|
"button-active-border-l-delta": #{$button-active-border-l-delta},
|
|
"button-focus-border-l-delta": #{$button-focus-border-l-delta},
|
|
"button-outer-shadow-h": #{$button-outer-shadow-h},
|
|
"button-outer-shadow-s": #{$button-outer-shadow-s},
|
|
"button-outer-shadow-l": #{$button-outer-shadow-l},
|
|
"button-outer-shadow-a": #{$button-outer-shadow-a},
|
|
"loading-color":
|
|
hsl(
|
|
#{cv.getVar("button-h")},
|
|
#{cv.getVar("button-s")},
|
|
#{cv.getVar("button-color-l")}
|
|
),
|
|
)
|
|
);
|
|
|
|
@extend %control;
|
|
@extend %unselectable;
|
|
|
|
background-color: hsl(
|
|
#{cv.getVar("button-h")},
|
|
#{cv.getVar("button-s")},
|
|
calc(
|
|
#{cv.getVar("button-background-l")} + #{cv.getVar(
|
|
"button-background-l-delta"
|
|
)}
|
|
)
|
|
);
|
|
border-color: hsl(
|
|
#{cv.getVar("button-h")},
|
|
#{cv.getVar("button-s")},
|
|
calc(
|
|
#{cv.getVar("button-border-l")} + #{cv.getVar("button-border-l-delta")}
|
|
)
|
|
);
|
|
border-style: cv.getVar("button-border-style");
|
|
border-width: cv.getVar("button-border-width");
|
|
box-shadow:
|
|
0px 0.0625em 0.125em
|
|
hsla(
|
|
cv.getVar("button-outer-shadow-h"),
|
|
cv.getVar("button-outer-shadow-s"),
|
|
cv.getVar("button-outer-shadow-l"),
|
|
cv.getVar("button-outer-shadow-a")
|
|
),
|
|
0px 0.125em 0.25em
|
|
hsla(
|
|
cv.getVar("button-outer-shadow-h"),
|
|
cv.getVar("button-outer-shadow-s"),
|
|
cv.getVar("button-outer-shadow-l"),
|
|
cv.getVar("button-outer-shadow-a")
|
|
);
|
|
color: hsl(
|
|
#{cv.getVar("button-h")},
|
|
#{cv.getVar("button-s")},
|
|
#{cv.getVar("button-color-l")}
|
|
);
|
|
cursor: pointer;
|
|
font-weight: cv.getVar("button-weight");
|
|
height: auto;
|
|
justify-content: center;
|
|
padding-bottom: calc(
|
|
#{cv.getVar("button-padding-vertical")} - #{cv.getVar(
|
|
"button-border-width"
|
|
)}
|
|
);
|
|
padding-left: calc(
|
|
#{cv.getVar("button-padding-horizontal")} - #{cv.getVar(
|
|
"button-border-width"
|
|
)}
|
|
);
|
|
padding-right: calc(
|
|
#{cv.getVar("button-padding-horizontal")} - #{cv.getVar(
|
|
"button-border-width"
|
|
)}
|
|
);
|
|
padding-top: calc(
|
|
#{cv.getVar("button-padding-vertical")} - #{cv.getVar(
|
|
"button-border-width"
|
|
)}
|
|
);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
|
|
@if $button-family {
|
|
font-family: cv.getVar("button-family");
|
|
}
|
|
|
|
strong {
|
|
color: inherit;
|
|
}
|
|
|
|
.#{iv.$class-prefix}icon {
|
|
&,
|
|
&.#{iv.$class-prefix}is-small,
|
|
&.#{iv.$class-prefix}is-medium,
|
|
&.#{iv.$class-prefix}is-large {
|
|
height: 1.5em;
|
|
width: 1.5em;
|
|
}
|
|
|
|
&:first-child:not(:last-child) {
|
|
margin-inline-start: calc(
|
|
-0.5 * #{cv.getVar("button-padding-horizontal")}
|
|
);
|
|
margin-inline-end: calc(#{cv.getVar("button-padding-horizontal")} * 0.25);
|
|
}
|
|
|
|
&:last-child:not(:first-child) {
|
|
margin-inline-start: calc(
|
|
#{cv.getVar("button-padding-horizontal")} * 0.25
|
|
);
|
|
margin-inline-end: calc(-0.5 * #{cv.getVar("button-padding-horizontal")});
|
|
}
|
|
|
|
&:first-child:last-child {
|
|
margin-inline-start: calc(
|
|
-0.5 * #{cv.getVar("button-padding-horizontal")}
|
|
);
|
|
margin-inline-end: calc(-0.5 * #{cv.getVar("button-padding-horizontal")});
|
|
}
|
|
}
|
|
|
|
// States
|
|
&:hover,
|
|
&.#{iv.$class-prefix}is-hovered {
|
|
@include cv.register-vars(
|
|
(
|
|
"button-background-l-delta": #{cv.getVar(
|
|
"button-hover-background-l-delta"
|
|
)},
|
|
"button-border-l-delta": #{cv.getVar("button-hover-border-l-delta")},
|
|
)
|
|
);
|
|
}
|
|
|
|
&:focus-visible,
|
|
&.#{iv.$class-prefix}is-focused {
|
|
@include cv.register-var("button-border-width", 1px);
|
|
|
|
border-color: hsl(
|
|
#{cv.getVar("focus-h")},
|
|
#{cv.getVar("focus-s")},
|
|
#{cv.getVar("focus-l")}
|
|
);
|
|
box-shadow: cv.getVar("focus-shadow-size")
|
|
hsla(
|
|
cv.getVar("focus-h"),
|
|
cv.getVar("focus-s"),
|
|
cv.getVar("focus-l"),
|
|
cv.getVar("focus-shadow-alpha")
|
|
);
|
|
}
|
|
|
|
&:active,
|
|
&.#{iv.$class-prefix}is-active {
|
|
@include cv.register-vars(
|
|
(
|
|
"button-background-l-delta": #{cv.getVar(
|
|
"button-active-background-l-delta"
|
|
)},
|
|
"button-border-l-delta": #{cv.getVar("button-active-border-l-delta")},
|
|
"button-outer-shadow-a": 0,
|
|
)
|
|
);
|
|
}
|
|
|
|
&[disabled],
|
|
fieldset[disabled] & {
|
|
background-color: cv.getVar("button-disabled-background-color");
|
|
border-color: cv.getVar("button-disabled-border-color");
|
|
box-shadow: cv.getVar("button-disabled-shadow");
|
|
opacity: cv.getVar("button-disabled-opacity");
|
|
}
|
|
|
|
// Colors
|
|
@each $name, $pair in $button-colors {
|
|
&.#{iv.$class-prefix}is-#{$name} {
|
|
@include cv.register-vars(
|
|
(
|
|
"button-h": #{cv.getVar($name, "", "-h")},
|
|
"button-s": #{cv.getVar($name, "", "-s")},
|
|
"button-l": #{cv.getVar($name, "", "-l")},
|
|
"button-background-l": #{cv.getVar($name, "", "-l")},
|
|
"button-border-l": #{cv.getVar($name, "", "-l")},
|
|
"button-border-width": 0px,
|
|
"button-color-l": #{cv.getVar($name, "", "-invert-l")},
|
|
"button-outer-shadow-a": 0,
|
|
)
|
|
);
|
|
|
|
&:focus-visible,
|
|
&.#{iv.$class-prefix}is-focused {
|
|
@include cv.register-var("button-border-width", 1px);
|
|
}
|
|
|
|
@if not list.index($no-palette, $name) {
|
|
&.#{iv.$class-prefix}is-light {
|
|
@include cv.register-vars(
|
|
(
|
|
"button-background-l": #{cv.getVar("light-l")},
|
|
"button-color-l": #{cv.getVar($name, "", "-light-invert-l")},
|
|
)
|
|
);
|
|
}
|
|
|
|
&.#{iv.$class-prefix}is-dark {
|
|
@include cv.register-vars(
|
|
(
|
|
"button-background-l": #{cv.getVar("dark-l")},
|
|
"button-color-l": #{cv.getVar($name, "", "-dark-invert-l")},
|
|
)
|
|
);
|
|
}
|
|
}
|
|
|
|
&.#{iv.$class-prefix}is-soft {
|
|
@include cv.register-vars(
|
|
(
|
|
"button-background-l": #{cv.getVar("soft-l")},
|
|
"button-color-l": #{cv.getVar("soft-invert-l")},
|
|
)
|
|
);
|
|
}
|
|
|
|
&.#{iv.$class-prefix}is-bold {
|
|
@include cv.register-vars(
|
|
(
|
|
"button-background-l": #{cv.getVar("bold-l")},
|
|
"button-color-l": #{cv.getVar("bold-invert-l")},
|
|
)
|
|
);
|
|
}
|
|
|
|
&[disabled],
|
|
fieldset[disabled] & {
|
|
background-color: cv.getVar($name);
|
|
border-color: cv.getVar($name);
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Styles
|
|
&.#{iv.$class-prefix}is-outlined {
|
|
@include cv.register-vars(
|
|
(
|
|
"button-border-width": max(1px, 0.0625em),
|
|
)
|
|
);
|
|
|
|
background-color: transparent;
|
|
border-color: hsl(
|
|
#{cv.getVar("button-h")},
|
|
#{cv.getVar("button-s")},
|
|
#{cv.getVar("button-l")}
|
|
);
|
|
color: hsl(
|
|
#{cv.getVar("button-h")},
|
|
#{cv.getVar("button-s")},
|
|
#{cv.getVar("button-l")}
|
|
);
|
|
|
|
&:hover {
|
|
@include cv.register-vars(
|
|
(
|
|
"button-border-width": max(2px, 0.125em),
|
|
"button-outer-shadow-alpha": 1,
|
|
)
|
|
);
|
|
}
|
|
|
|
&:active {
|
|
@include cv.register-vars(());
|
|
}
|
|
}
|
|
|
|
&.#{iv.$class-prefix}is-inverted {
|
|
background-color: hsl(
|
|
#{cv.getVar("button-h")},
|
|
#{cv.getVar("button-s")},
|
|
calc(
|
|
#{cv.getVar("button-color-l")} + #{cv.getVar(
|
|
"button-background-l-delta"
|
|
)}
|
|
)
|
|
);
|
|
color: hsl(
|
|
#{cv.getVar("button-h")},
|
|
#{cv.getVar("button-s")},
|
|
#{cv.getVar("button-background-l")}
|
|
);
|
|
}
|
|
|
|
&.#{iv.$class-prefix}is-text {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
color: cv.getVar("button-text-color");
|
|
text-decoration: cv.getVar("button-text-decoration");
|
|
|
|
&:hover,
|
|
&.#{iv.$class-prefix}is-hovered {
|
|
background-color: cv.getVar("button-text-hover-background-color");
|
|
color: cv.getVar("button-text-hover-color");
|
|
}
|
|
|
|
&:active,
|
|
&.#{iv.$class-prefix}is-active {
|
|
// background-color: bulmaDarken($button-text-hover-background-color, 5%);
|
|
color: cv.getVar("button-text-hover-color");
|
|
}
|
|
|
|
&[disabled],
|
|
fieldset[disabled] & {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
&.#{iv.$class-prefix}is-ghost {
|
|
background: cv.getVar("button-ghost-background");
|
|
border-color: cv.getVar("button-ghost-border-color");
|
|
box-shadow: none;
|
|
color: cv.getVar("button-ghost-color");
|
|
text-decoration: cv.getVar("button-ghost-decoration");
|
|
|
|
&:hover,
|
|
&.#{iv.$class-prefix}is-hovered {
|
|
color: cv.getVar("button-ghost-hover-color");
|
|
text-decoration: cv.getVar("button-ghost-hover-decoration");
|
|
}
|
|
}
|
|
|
|
// Sizes
|
|
&.#{iv.$class-prefix}is-small {
|
|
@include cv.register-vars(
|
|
(
|
|
"control-size": #{cv.getVar("size-small")},
|
|
"control-radius": #{cv.getVar("radius-small")},
|
|
)
|
|
);
|
|
}
|
|
|
|
&.#{iv.$class-prefix}is-normal {
|
|
@include cv.register-vars(
|
|
(
|
|
"control-size": #{cv.getVar("size-normal")},
|
|
"control-radius": #{cv.getVar("radius")},
|
|
)
|
|
);
|
|
}
|
|
|
|
&.#{iv.$class-prefix}is-medium {
|
|
@include cv.register-vars(
|
|
(
|
|
"control-size": #{cv.getVar("size-medium")},
|
|
"control-radius": #{cv.getVar("radius-medium")},
|
|
)
|
|
);
|
|
}
|
|
|
|
&.#{iv.$class-prefix}is-large {
|
|
@include cv.register-vars(
|
|
(
|
|
"control-size": #{cv.getVar("size-large")},
|
|
"control-radius": #{cv.getVar("radius-medium")},
|
|
)
|
|
);
|
|
}
|
|
|
|
// Modifiers
|
|
&.#{iv.$class-prefix}is-fullwidth {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
&.#{iv.$class-prefix}is-loading {
|
|
box-shadow: none;
|
|
color: transparent !important;
|
|
pointer-events: none;
|
|
|
|
&::after {
|
|
@extend %loader;
|
|
@include mx.center(1em);
|
|
position: absolute !important;
|
|
}
|
|
}
|
|
|
|
&.#{iv.$class-prefix}is-static {
|
|
background-color: cv.getVar("button-static-background-color");
|
|
border-color: cv.getVar("button-static-border-color");
|
|
color: cv.getVar("button-static-color");
|
|
box-shadow: none;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&.#{iv.$class-prefix}is-rounded {
|
|
border-radius: cv.getVar("radius-rounded");
|
|
padding-left: calc(#{cv.getVar("button-padding-horizontal")} + 0.25em);
|
|
padding-right: calc(#{cv.getVar("button-padding-horizontal")} + 0.25em);
|
|
}
|
|
}
|
|
|
|
.#{iv.$class-prefix}buttons {
|
|
@extend %block;
|
|
align-items: center;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
justify-content: flex-start;
|
|
|
|
// Sizes
|
|
&.#{iv.$class-prefix}are-small {
|
|
@include cv.register-vars(
|
|
(
|
|
"control-size": #{cv.getVar("size-small")},
|
|
"control-radius": #{cv.getVar("radius-small")},
|
|
)
|
|
);
|
|
}
|
|
|
|
&.#{iv.$class-prefix}are-medium {
|
|
@include cv.register-vars(
|
|
(
|
|
"control-size": #{cv.getVar("size-medium")},
|
|
"control-radius": #{cv.getVar("radius-medium")},
|
|
)
|
|
);
|
|
}
|
|
|
|
&.#{iv.$class-prefix}are-large {
|
|
@include cv.register-vars(
|
|
(
|
|
"control-size": #{cv.getVar("size-large")},
|
|
"control-radius": #{cv.getVar("radius-large")},
|
|
)
|
|
);
|
|
}
|
|
|
|
&.#{iv.$class-prefix}has-addons {
|
|
gap: 0;
|
|
|
|
.#{iv.$class-prefix}button {
|
|
&:not(:first-child) {
|
|
border-end-start-radius: 0;
|
|
border-start-start-radius: 0;
|
|
}
|
|
|
|
&:not(:last-child) {
|
|
border-end-end-radius: 0;
|
|
border-start-end-radius: 0;
|
|
margin-inline-end: -1px;
|
|
}
|
|
|
|
&:hover,
|
|
&.#{iv.$class-prefix}is-hovered {
|
|
z-index: 2;
|
|
}
|
|
|
|
&:focus,
|
|
&.#{iv.$class-prefix}is-focused,
|
|
&:active,
|
|
&.#{iv.$class-prefix}is-active,
|
|
&.#{iv.$class-prefix}is-selected {
|
|
z-index: 3;
|
|
|
|
&:hover {
|
|
z-index: 4;
|
|
}
|
|
}
|
|
|
|
&.#{iv.$class-prefix}is-expanded {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.#{iv.$class-prefix}is-centered {
|
|
justify-content: center;
|
|
}
|
|
|
|
&.#{iv.$class-prefix}is-right {
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
|
|
@each $bp-name, $bp-sizes in $button-responsive-sizes {
|
|
@include mx.breakpoint($bp-name) {
|
|
@each $size, $value in $bp-sizes {
|
|
@if $size != "normal" {
|
|
.#{iv.$class-prefix}button.#{iv.$class-prefix}is-responsive.#{iv.$class-prefix}is-#{$size} {
|
|
font-size: $value;
|
|
}
|
|
} @else {
|
|
.#{iv.$class-prefix}button.#{iv.$class-prefix}is-responsive,
|
|
.#{iv.$class-prefix}button.#{iv.$class-prefix}is-responsive.#{iv.$class-prefix}is-normal {
|
|
font-size: $value;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|