Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Init v1

Browse Source
This commit is contained in:
Jeremy Thomas
2024-03-21 16:11:54 +00:00
parent 16f1b76881
commit 69877a652c
3261 changed files with 255369 additions and 108913 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
sass/elements/_all.sass
View File

@@ -1,16 +0,0 @@
/* Bulma Elements */
@charset "utf-8"
@import "box"
@import "button"
@import "container"
@import "content"
@import "icon"
@import "image"
@import "notification"
@import "progress"
@import "table"
@import "tag"
@import "title"
@import "other"

16
sass/elements/_index.scss Normal file
View File

@@ -0,0 +1,16 @@
/* Bulma Elements */
@charset "utf-8";
@forward "block";
@forward "box";
@forward "button";
@forward "content";
@forward "delete";
@forward "icon";
@forward "image";
@forward "loader";
@forward "notification";
@forward "progress";
@forward "table";
@forward "tag";
@forward "title";

6
sass/elements/block.scss Normal file
View File

@@ -0,0 +1,6 @@
@use "../utilities/initial-variables" as iv;
@use "../utilities/extends";
.#{iv.$class-prefix}block {
@extend %block;
}

26
sass/elements/box.sass
View File

@@ -1,26 +0,0 @@
@import "../utilities/mixins"
$box-color: $text !default
$box-background-color: $scheme-main !default
$box-radius: $radius-large !default
$box-shadow: $shadow !default
$box-padding: 1.25rem !default
$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link !default
$box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link !default
.box
@extend %block
background-color: $box-background-color
border-radius: $box-radius
box-shadow: $box-shadow
color: $box-color
display: block
padding: $box-padding
a.box
&:hover,
&:focus
box-shadow: $box-link-hover-shadow
&:active
box-shadow: $box-link-active-shadow

59
sass/elements/box.scss Normal file
View File

@@ -0,0 +1,59 @@
@use "../utilities/css-variables" as cv;
@use "../utilities/initial-variables" as iv;
@use "../utilities/extends";
$box-background-color: cv.getVar("scheme-main") !default;
$box-color: cv.getVar("text") !default;
$box-radius: cv.getVar("radius-large") !default;
$box-shadow: cv.getVar("shadow") !default;
$box-padding: 1.25rem !default;
$box-link-hover-shadow:
0 0.5em 1em -0.125em hsla(#{cv.getVar("scheme-h")}, #{cv.getVar("scheme-s")}, #{cv.getVar(
"scheme-invert-l"
)}, 0.1),
0 0 0 1px cv.getVar("link") !default;
$box-link-active-shadow:
inset 0 1px 2px
hsla(
#{cv.getVar("scheme-h")},
#{cv.getVar("scheme-s")},
#{cv.getVar("scheme-invert-l")},
0.2
),
0 0 0 1px cv.getVar("link") !default;
.#{iv.$class-prefix}box {
@include cv.register-vars(
(
"box-background-color": #{$box-background-color},
"box-color": #{$box-color},
"box-radius": #{$box-radius},
"box-shadow": #{$box-shadow},
"box-padding": #{$box-padding},
"box-link-hover-shadow": #{$box-link-hover-shadow},
"box-link-active-shadow": #{$box-link-active-shadow},
)
);
}
.#{iv.$class-prefix}box {
@extend %block;
background-color: cv.getVar("box-background-color");
border-radius: cv.getVar("box-radius");
box-shadow: cv.getVar("box-shadow");
color: cv.getVar("box-color");
display: block;
padding: cv.getVar("box-padding");
}
a.#{iv.$class-prefix}box {
&:hover,
&:focus {
box-shadow: cv.getVar("box-link-hover-shadow");
}
&:active {
box-shadow: cv.getVar("box-link-active-shadow");
}
}

357
sass/elements/button.sass
View File

@@ -1,357 +0,0 @@
@import "../utilities/controls"
@import "../utilities/mixins"
$button-color: $text-strong !default
$button-background-color: $scheme-main !default
$button-family: false !default
$button-border-color: $border !default
$button-border-width: $control-border-width !default
$button-padding-vertical: calc(0.5em - #{$button-border-width}) !default
$button-padding-horizontal: 1em !default
$button-hover-color: $link-hover !default
$button-hover-border-color: $link-hover-border !default
$button-focus-color: $link-focus !default
$button-focus-border-color: $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: $link-active !default
$button-active-border-color: $link-active-border !default
$button-text-color: $text !default
$button-text-decoration: underline !default
$button-text-hover-background-color: $background !default
$button-text-hover-color: $text-strong !default
$button-ghost-background: none !default
$button-ghost-border-color: transparent !default
$button-ghost-color: $link !default
$button-ghost-decoration: none !default
$button-ghost-hover-color: $link !default
$button-ghost-hover-decoration: underline !default
$button-disabled-background-color: $scheme-main !default
$button-disabled-border-color: $border !default
$button-disabled-shadow: none !default
$button-disabled-opacity: 0.5 !default
$button-static-color: $text-light !default
$button-static-background-color: $scheme-main-ter !default
$button-static-border-color: $border !default
$button-colors: $colors !default
$button-responsive-sizes: ("mobile": ("small": ($size-small * 0.75), "normal": ($size-small * 0.875), "medium": $size-small, "large": $size-normal), "tablet-only": ("small": ($size-small * 0.875), "normal": ($size-small), "medium": $size-normal, "large": $size-medium)) !default
// The button sizes use mixins so they can be used at different breakpoints
=button-small
&:not(.is-rounded)
border-radius: $radius-small
font-size: $size-small
=button-normal
font-size: $size-normal
=button-medium
font-size: $size-medium
=button-large
font-size: $size-large
.button
@extend %control
@extend %unselectable
background-color: $button-background-color
border-color: $button-border-color
border-width: $button-border-width
color: $button-color
cursor: pointer
@if $button-family
font-family: $button-family
justify-content: center
padding-bottom: $button-padding-vertical
padding-left: $button-padding-horizontal
padding-right: $button-padding-horizontal
padding-top: $button-padding-vertical
text-align: center
white-space: nowrap
strong
color: inherit
.icon
&,
&.is-small,
&.is-medium,
&.is-large
height: 1.5em
width: 1.5em
&:first-child:not(:last-child)
+ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}), false)
+ltr-property("margin", $button-padding-horizontal * 0.25)
&:last-child:not(:first-child)
+ltr-property("margin", $button-padding-horizontal * 0.25, false)
+ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}))
&:first-child:last-child
margin-left: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
margin-right: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
// States
&:hover,
&.is-hovered
border-color: $button-hover-border-color
color: $button-hover-color
&:focus,
&.is-focused
border-color: $button-focus-border-color
color: $button-focus-color
&:not(:active)
box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color
&:active,
&.is-active
border-color: $button-active-border-color
color: $button-active-color
// Colors
&.is-text
background-color: transparent
border-color: transparent
color: $button-text-color
text-decoration: $button-text-decoration
&:hover,
&.is-hovered,
&:focus,
&.is-focused
background-color: $button-text-hover-background-color
color: $button-text-hover-color
&:active,
&.is-active
background-color: bulmaDarken($button-text-hover-background-color, 5%)
color: $button-text-hover-color
&[disabled],
fieldset[disabled] &
background-color: transparent
border-color: transparent
box-shadow: none
&.is-ghost
background: $button-ghost-background
border-color: $button-ghost-border-color
color: $button-ghost-color
text-decoration: $button-ghost-decoration
&:hover,
&.is-hovered
color: $button-ghost-hover-color
text-decoration: $button-ghost-hover-decoration
@each $name, $pair in $button-colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background-color: $color
border-color: transparent
color: $color-invert
&:hover,
&.is-hovered
background-color: bulmaDarken($color, 2.5%)
border-color: transparent
color: $color-invert
&:focus,
&.is-focused
border-color: transparent
color: $color-invert
&:not(:active)
box-shadow: $button-focus-box-shadow-size bulmaRgba($color, 0.25)
&:active,
&.is-active
background-color: bulmaDarken($color, 5%)
border-color: transparent
color: $color-invert
&[disabled],
fieldset[disabled] &
background-color: $color
border-color: $color
box-shadow: none
&.is-inverted
background-color: $color-invert
color: $color
&:hover,
&.is-hovered
background-color: bulmaDarken($color-invert, 5%)
&[disabled],
fieldset[disabled] &
background-color: $color-invert
border-color: transparent
box-shadow: none
color: $color
&.is-loading
&::after
border-color: transparent transparent $color-invert $color-invert !important
&.is-outlined
background-color: transparent
border-color: $color
color: $color
&:hover,
&.is-hovered,
&:focus,
&.is-focused
background-color: $color
border-color: $color
color: $color-invert
&.is-loading
&::after
border-color: transparent transparent $color $color !important
&:hover,
&.is-hovered,
&:focus,
&.is-focused
&::after
border-color: transparent transparent $color-invert $color-invert !important
&[disabled],
fieldset[disabled] &
background-color: transparent
border-color: $color
box-shadow: none
color: $color
&.is-inverted.is-outlined
background-color: transparent
border-color: $color-invert
color: $color-invert
&:hover,
&.is-hovered,
&:focus,
&.is-focused
background-color: $color-invert
color: $color
&.is-loading
&:hover,
&.is-hovered,
&:focus,
&.is-focused
&::after
border-color: transparent transparent $color $color !important
&[disabled],
fieldset[disabled] &
background-color: transparent
border-color: $color-invert
box-shadow: none
color: $color-invert
// 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
+button-small
&.is-normal
+button-normal
&.is-medium
+button-medium
&.is-large
+button-large
// Modifiers
&[disabled],
fieldset[disabled] &
background-color: $button-disabled-background-color
border-color: $button-disabled-border-color
box-shadow: $button-disabled-shadow
opacity: $button-disabled-opacity
&.is-fullwidth
display: flex
width: 100%
&.is-loading
color: transparent !important
pointer-events: none
&::after
@extend %loader
+center(1em)
position: absolute !important
&.is-static
background-color: $button-static-background-color
border-color: $button-static-border-color
color: $button-static-color
box-shadow: none
pointer-events: none
&.is-rounded
border-radius: $radius-rounded
padding-left: calc(#{$button-padding-horizontal} + 0.25em)
padding-right: calc(#{$button-padding-horizontal} + 0.25em)
.buttons
align-items: center
display: flex
flex-wrap: wrap
justify-content: flex-start
.button
margin-bottom: 0.5rem
&:not(:last-child):not(.is-fullwidth)
+ltr-property("margin", 0.5rem)
&:last-child
margin-bottom: -0.5rem
&:not(:last-child)
margin-bottom: 1rem
// Sizes
&.are-small
.button:not(.is-normal):not(.is-medium):not(.is-large)
+button-small
&.are-medium
.button:not(.is-small):not(.is-normal):not(.is-large)
+button-medium
&.are-large
.button:not(.is-small):not(.is-normal):not(.is-medium)
+button-large
&.has-addons
.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
+ltr-property("margin", -1px)
&:last-child
+ltr-property("margin", 0)
&:hover,
&.is-hovered
z-index: 2
&:focus,
&.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)
.button:not(.is-fullwidth)
margin-left: 0.25rem
margin-right: 0.25rem
&.is-right
justify-content: flex-end
&:not(.has-addons)
.button:not(.is-fullwidth)
margin-left: 0.25rem
margin-right: 0.25rem
@each $bp-name, $bp-sizes in $button-responsive-sizes
+breakpoint($bp-name)
@each $size, $value in $bp-sizes
@if $size != "normal"
.button.is-responsive.is-#{$size}
font-size: $value
@else
.button.is-responsive,
.button.is-responsive.is-normal
font-size: $value

640
sass/elements/button.scss Normal file
View File

@@ -0,0 +1,640 @@
@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;
}
}
}
}
}

29
sass/elements/container.sass
View File

@@ -1,29 +0,0 @@
@import "../utilities/mixins"
$container-offset: (2 * $gap) !default
$container-max-width: $fullhd !default
.container
flex-grow: 1
margin: 0 auto
position: relative
width: auto
&.is-fluid
max-width: none !important
padding-left: $gap
padding-right: $gap
width: 100%
+desktop
max-width: $desktop - $container-offset
+until-widescreen
&.is-widescreen:not(.is-max-desktop)
max-width: min($widescreen, $container-max-width) - $container-offset
+until-fullhd
&.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen)
max-width: min($fullhd, $container-max-width) - $container-offset
+widescreen
&:not(.is-max-desktop)
max-width: min($widescreen, $container-max-width) - $container-offset
+fullhd
&:not(.is-max-desktop):not(.is-max-widescreen)
max-width: min($fullhd, $container-max-width) - $container-offset

162
sass/elements/content.sass
View File

@@ -1,162 +0,0 @@
@import "../utilities/mixins"
$content-heading-color: $text-strong !default
$content-heading-weight: $weight-semibold !default
$content-heading-line-height: 1.125 !default
$content-block-margin-bottom: 1em !default
$content-blockquote-background-color: $background !default
$content-blockquote-border-left: 5px solid $border !default
$content-blockquote-padding: 1.25em 1.5em !default
$content-pre-padding: 1.25em 1.5em !default
$content-table-cell-border: 1px solid $border !default
$content-table-cell-border-width: 0 0 1px !default
$content-table-cell-padding: 0.5em 0.75em !default
$content-table-cell-heading-color: $text-strong !default
$content-table-head-cell-border-width: 0 0 2px !default
$content-table-head-cell-color: $text-strong !default
$content-table-body-last-row-cell-border-bottom-width: 0 !default
$content-table-foot-cell-border-width: 2px 0 0 !default
$content-table-foot-cell-color: $text-strong !default
.content
@extend %block
// Inline
li + li
margin-top: 0.25em
// Block
p,
dl,
ol,
ul,
blockquote,
pre,
table
&:not(:last-child)
margin-bottom: $content-block-margin-bottom
h1,
h2,
h3,
h4,
h5,
h6
color: $content-heading-color
font-weight: $content-heading-weight
line-height: $content-heading-line-height
h1
font-size: 2em
margin-bottom: 0.5em
&:not(:first-child)
margin-top: 1em
h2
font-size: 1.75em
margin-bottom: 0.5714em
&:not(:first-child)
margin-top: 1.1428em
h3
font-size: 1.5em
margin-bottom: 0.6666em
&:not(:first-child)
margin-top: 1.3333em
h4
font-size: 1.25em
margin-bottom: 0.8em
h5
font-size: 1.125em
margin-bottom: 0.8888em
h6
font-size: 1em
margin-bottom: 1em
blockquote
background-color: $content-blockquote-background-color
+ltr-property("border", $content-blockquote-border-left, false)
padding: $content-blockquote-padding
ol
list-style-position: outside
+ltr-property("margin", 2em, false)
margin-top: 1em
&:not([type])
list-style-type: decimal
&.is-lower-alpha
list-style-type: lower-alpha
&.is-lower-roman
list-style-type: lower-roman
&.is-upper-alpha
list-style-type: upper-alpha
&.is-upper-roman
list-style-type: upper-roman
ul
list-style: disc outside
+ltr-property("margin", 2em, false)
margin-top: 1em
ul
list-style-type: circle
margin-top: 0.5em
ul
list-style-type: square
dd
+ltr-property("margin", 2em, false)
figure
margin-left: 2em
margin-right: 2em
text-align: center
&:not(:first-child)
margin-top: 2em
&:not(:last-child)
margin-bottom: 2em
img
display: inline-block
figcaption
font-style: italic
pre
+overflow-touch
overflow-x: auto
padding: $content-pre-padding
white-space: pre
word-wrap: normal
sup,
sub
font-size: 75%
table
width: 100%
td,
th
border: $content-table-cell-border
border-width: $content-table-cell-border-width
padding: $content-table-cell-padding
vertical-align: top
th
color: $content-table-cell-heading-color
&:not([align])
text-align: inherit
thead
td,
th
border-width: $content-table-head-cell-border-width
color: $content-table-head-cell-color
tfoot
td,
th
border-width: $content-table-foot-cell-border-width
color: $content-table-foot-cell-color
tbody
tr
&:last-child
td,
th
border-bottom-width: $content-table-body-last-row-cell-border-bottom-width
.tabs
li + li
margin-top: 0
// Sizes
&.is-small
font-size: $size-small
&.is-normal
font-size: $size-normal
&.is-medium
font-size: $size-medium
&.is-large
font-size: $size-large

283
sass/elements/content.scss Normal file
View File

@@ -0,0 +1,283 @@
@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;
$content-heading-color: #{cv.getVar("text-strong")} !default;
$content-heading-weight: #{cv.getVar("weight-extrabold")} !default;
$content-heading-line-height: 1.125 !default;
$content-block-margin-bottom: 1em !default;
$content-blockquote-background-color: #{cv.getVar("background")} !default;
$content-blockquote-border-left: 5px solid #{cv.getVar("border")} !default;
$content-blockquote-padding: 1.25em 1.5em !default;
$content-pre-padding: 1.25em 1.5em !default;
$content-table-cell-border: 1px solid #{cv.getVar("border")} !default;
$content-table-cell-border-width: 0 0 1px !default;
$content-table-cell-padding: 0.5em 0.75em !default;
$content-table-cell-heading-color: #{cv.getVar("text-strong")} !default;
$content-table-head-cell-border-width: 0 0 2px !default;
$content-table-head-cell-color: #{cv.getVar("text-strong")} !default;
$content-table-body-last-row-cell-border-bottom-width: 0 !default;
$content-table-foot-cell-border-width: 2px 0 0 !default;
$content-table-foot-cell-color: #{cv.getVar("text-strong")} !default;
.#{iv.$class-prefix}content {
@include cv.register-vars(
(
"content-heading-color": #{$content-heading-color},
"content-heading-weight": #{$content-heading-weight},
"content-heading-line-height": #{$content-heading-line-height},
"content-block-margin-bottom": #{$content-block-margin-bottom},
"content-blockquote-background-color": #{$content-blockquote-background-color},
"content-blockquote-border-left": #{$content-blockquote-border-left},
"content-blockquote-padding": #{$content-blockquote-padding},
"content-pre-padding": #{$content-pre-padding},
"content-table-cell-border": #{$content-table-cell-border},
"content-table-cell-border-width": #{$content-table-cell-border-width},
"content-table-cell-padding": #{$content-table-cell-padding},
"content-table-cell-heading-color": #{$content-table-cell-heading-color},
"content-table-head-cell-border-width": #{$content-table-head-cell-border-width},
"content-table-head-cell-color": #{$content-table-head-cell-color},
"content-table-body-last-row-cell-border-bottom-width": #{$content-table-body-last-row-cell-border-bottom-width},
"content-table-foot-cell-border-width": #{$content-table-foot-cell-border-width},
"content-table-foot-cell-color": #{$content-table-foot-cell-color},
)
);
}
.#{iv.$class-prefix}content {
@extend %block;
// Inline
li + li {
margin-top: 0.25em;
}
// Block
p,
dl,
ol,
ul,
blockquote,
pre,
table {
&:not(:last-child) {
margin-bottom: cv.getVar("content-block-margin-bottom");
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: cv.getVar("content-heading-color");
font-weight: cv.getVar("content-heading-weight");
line-height: cv.getVar("content-heading-line-height");
}
h1 {
font-size: 2em;
margin-bottom: 0.5em;
&:not(:first-child) {
margin-top: 1em;
}
}
h2 {
font-size: 1.75em;
margin-bottom: 0.5714em;
&:not(:first-child) {
margin-top: 1.1428em;
}
}
h3 {
font-size: 1.5em;
margin-bottom: 0.6666em;
&:not(:first-child) {
margin-top: 1.3333em;
}
}
h4 {
font-size: 1.25em;
margin-bottom: 0.8em;
}
h5 {
font-size: 1.125em;
margin-bottom: 0.8888em;
}
h6 {
font-size: 1em;
margin-bottom: 1em;
}
blockquote {
background-color: cv.getVar("content-blockquote-background-color");
border-inline-start: cv.getVar("content-blockquote-border-left");
padding: cv.getVar("content-blockquote-padding");
}
ol {
list-style-position: outside;
margin-inline-start: 2em;
margin-top: 1em;
&:not([type]) {
list-style-type: decimal;
&.#{iv.$class-prefix}is-lower-alpha {
list-style-type: lower-alpha;
}
&.#{iv.$class-prefix}is-lower-roman {
list-style-type: lower-roman;
}
&.#{iv.$class-prefix}is-upper-alpha {
list-style-type: upper-alpha;
}
&.#{iv.$class-prefix}is-upper-roman {
list-style-type: upper-roman;
}
}
}
ul {
list-style: disc outside;
margin-inline-start: 2em;
margin-top: 1em;
ul {
list-style-type: circle;
margin-bottom: 0.25em;
margin-top: 0.25em;
ul {
list-style-type: square;
}
}
}
dd {
margin-inline-start: 2em;
}
figure:not([class]) {
margin-left: 2em;
margin-right: 2em;
text-align: center;
&:not(:first-child) {
margin-top: 2em;
}
&:not(:last-child) {
margin-bottom: 2em;
}
img {
display: inline-block;
}
figcaption {
font-style: italic;
}
}
pre {
@include mx.overflow-touch;
overflow-x: auto;
padding: cv.getVar("content-pre-padding");
white-space: pre;
word-wrap: normal;
}
sup,
sub {
font-size: 75%;
}
table {
td,
th {
border: cv.getVar("content-table-cell-border");
border-width: cv.getVar("content-table-cell-border-width");
padding: cv.getVar("content-table-cell-padding");
vertical-align: top;
}
th {
color: cv.getVar("content-table-cell-heading-color");
&:not([align]) {
text-align: inherit;
}
}
thead {
td,
th {
border-width: cv.getVar("content-table-head-cell-border-width");
color: cv.getVar("content-table-head-cell-color");
}
}
tfoot {
td,
th {
border-width: cv.getVar("content-table-foot-cell-border-width");
color: cv.getVar("content-table-foot-cell-color");
}
}
tbody {
tr {
&:last-child {
td,
th {
border-bottom-width: cv.getVar(
"content-table-body-last-row-cell-border-bottom-width"
);
}
}
}
}
}
.#{iv.$class-prefix}tabs {
li + li {
margin-top: 0;
}
}
// Sizes
&.#{iv.$class-prefix}is-small {
font-size: cv.getVar("size-small");
}
&.#{iv.$class-prefix}is-normal {
font-size: cv.getVar("size-normal");
}
&.#{iv.$class-prefix}is-medium {
font-size: cv.getVar("size-medium");
}
&.#{iv.$class-prefix}is-large {
font-size: cv.getVar("size-large");
}
}

6
sass/elements/delete.scss Normal file
View File

@@ -0,0 +1,6 @@
@use "../utilities/initial-variables" as iv;
@use "../utilities/mixins" as mx;
.#{iv.$class-prefix}delete {
@include mx.delete;
}

1
sass/elements/form.sass
View File

@@ -1 +0,0 @@
@warn "The form.sass file is DEPRECATED. It has moved into its own /form folder. Please import sass/form/_all instead."

46
sass/elements/icon.sass
View File

@@ -1,46 +0,0 @@
$icon-dimensions: 1.5rem !default
$icon-dimensions-small: 1rem !default
$icon-dimensions-medium: 2rem !default
$icon-dimensions-large: 3rem !default
$icon-text-spacing: 0.25em !default
.icon
align-items: center
display: inline-flex
justify-content: center
height: $icon-dimensions
width: $icon-dimensions
// Sizes
&.is-small
height: $icon-dimensions-small
width: $icon-dimensions-small
&.is-medium
height: $icon-dimensions-medium
width: $icon-dimensions-medium
&.is-large
height: $icon-dimensions-large
width: $icon-dimensions-large
.icon-text
align-items: flex-start
color: inherit
display: inline-flex
flex-wrap: wrap
line-height: $icon-dimensions
vertical-align: top
.icon
flex-grow: 0
flex-shrink: 0
&:not(:last-child)
+ltr
margin-right: $icon-text-spacing
+rtl
margin-left: $icon-text-spacing
&:not(:first-child)
+ltr
margin-left: $icon-text-spacing
+rtl
margin-right: $icon-text-spacing
div.icon-text
display: flex

67
sass/elements/icon.scss Normal file
View File

@@ -0,0 +1,67 @@
@use "../utilities/css-variables" as cv;
@use "../utilities/initial-variables" as iv;
$icon-dimensions: 1.5rem !default;
$icon-dimensions-small: 1rem !default;
$icon-dimensions-medium: 2rem !default;
$icon-dimensions-large: 3rem !default;
$icon-text-spacing: 0.25em !default;
.#{iv.$class-prefix}icon,
.#{iv.$class-prefix}icon-text {
@include cv.register-vars(
(
"icon-dimensions": #{$icon-dimensions},
"icon-dimensions-small": #{$icon-dimensions-small},
"icon-dimensions-medium": #{$icon-dimensions-medium},
"icon-dimensions-large": #{$icon-dimensions-large},
"icon-text-spacing": #{$icon-text-spacing},
)
);
}
.#{iv.$class-prefix}icon {
align-items: center;
display: inline-flex;
flex-shrink: 0;
justify-content: center;
height: cv.getVar("icon-dimensions");
transition-duration: cv.getVar("duration");
transition-property: color;
width: cv.getVar("icon-dimensions");
// Sizes
&.#{iv.$class-prefix}is-small {
height: cv.getVar("icon-dimensions-small");
width: cv.getVar("icon-dimensions-small");
}
&.#{iv.$class-prefix}is-medium {
height: cv.getVar("icon-dimensions-medium");
width: cv.getVar("icon-dimensions-medium");
}
&.#{iv.$class-prefix}is-large {
height: cv.getVar("icon-dimensions-large");
width: cv.getVar("icon-dimensions-large");
}
}
.#{iv.$class-prefix}icon-text {
align-items: flex-start;
color: inherit;
display: inline-flex;
flex-wrap: wrap;
gap: cv.getVar("icon-text-spacing");
line-height: cv.getVar("icon-dimensions");
vertical-align: top;
.#{iv.$class-prefix}icon {
flex-grow: 0;
flex-shrink: 0;
}
}
div.#{iv.$class-prefix}icon-text {
display: flex;
}

73
sass/elements/image.sass
View File

@@ -1,73 +0,0 @@
@import "../utilities/mixins"
$dimensions: 16 24 32 48 64 96 128 !default
.image
display: block
position: relative
img
display: block
height: auto
width: 100%
&.is-rounded
border-radius: $radius-rounded
&.is-fullwidth
width: 100%
// Ratio
&.is-square,
&.is-1by1,
&.is-5by4,
&.is-4by3,
&.is-3by2,
&.is-5by3,
&.is-16by9,
&.is-2by1,
&.is-3by1,
&.is-4by5,
&.is-3by4,
&.is-2by3,
&.is-3by5,
&.is-9by16,
&.is-1by2,
&.is-1by3
img,
.has-ratio
@extend %overlay
height: 100%
width: 100%
&.is-square,
&.is-1by1
padding-top: 100%
&.is-5by4
padding-top: 80%
&.is-4by3
padding-top: 75%
&.is-3by2
padding-top: 66.6666%
&.is-5by3
padding-top: 60%
&.is-16by9
padding-top: 56.25%
&.is-2by1
padding-top: 50%
&.is-3by1
padding-top: 33.3333%
&.is-4by5
padding-top: 125%
&.is-3by4
padding-top: 133.3333%
&.is-2by3
padding-top: 150%
&.is-3by5
padding-top: 166.6666%
&.is-9by16
padding-top: 177.7777%
&.is-1by2
padding-top: 200%
&.is-1by3
padding-top: 300%
// Sizes
@each $dimension in $dimensions
&.is-#{$dimension}x#{$dimension}
height: $dimension * 1px
width: $dimension * 1px

62
sass/elements/image.scss Normal file
View File

@@ -0,0 +1,62 @@
@use "../utilities/initial-variables" as iv;
@use "../utilities/css-variables" as cv;
@use "../utilities/mixins" as mx;
$dimensions: 16 24 32 48 64 96 128 !default;
.#{iv.$class-prefix}image {
display: block;
position: relative;
img {
display: block;
height: auto;
width: 100%;
&.#{iv.$class-prefix}is-rounded {
border-radius: cv.getVar("radius-rounded");
}
}
&.#{iv.$class-prefix}is-fullwidth {
width: 100%;
}
// Ratio
&.#{iv.$class-prefix}is-square {
img,
.#{iv.$class-prefix}has-ratio {
@include mx.overlay;
height: 100%;
width: 100%;
}
}
&.#{iv.$class-prefix}is-square {
aspect-ratio: 1;
}
@each $pair in iv.$aspect-ratios {
$w: nth($pair, 1);
$h: nth($pair, 2);
&.#{iv.$class-prefix}is-#{$w}by#{$h} {
aspect-ratio: #{$w} / #{$h};
img,
.#{iv.$class-prefix}has-ratio {
@include mx.overlay;
height: 100%;
width: 100%;
}
}
}
// Sizes
@each $dimension in $dimensions {
&.#{iv.$class-prefix}is-#{$dimension}x#{$dimension} {
height: $dimension * 1px;
width: $dimension * 1px;
}
}
}

15
sass/elements/loader.scss Normal file
View File

@@ -0,0 +1,15 @@
@use "../utilities/css-variables" as cv;
@use "../utilities/initial-variables" as iv;
.#{iv.$class-prefix}loader {
animation: spinAround 500ms infinite linear;
border: 2px solid cv.getVar("border");
border-radius: cv.getVar("radius-rounded");
border-right-color: transparent;
border-top-color: transparent;
content: "";
display: block;
height: 1em;
position: relative;
width: 1em;
}

52
sass/elements/notification.sass
View File

@@ -1,52 +0,0 @@
@import "../utilities/mixins"
$notification-background-color: $background !default
$notification-code-background-color: $scheme-main !default
$notification-radius: $radius !default
$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
$notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default
$notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default
$notification-colors: $colors !default
.notification
@extend %block
background-color: $notification-background-color
border-radius: $notification-radius
position: relative
+ltr
padding: $notification-padding-ltr
+rtl
padding: $notification-padding-rtl
a:not(.button):not(.dropdown-item)
color: currentColor
text-decoration: underline
strong
color: currentColor
code,
pre
background: $notification-code-background-color
pre code
background: transparent
& > .delete
+ltr-position(0.5rem)
position: absolute
top: 0.5rem
.title,
.subtitle,
.content
color: currentColor
// Colors
@each $name, $pair in $notification-colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background-color: $color
color: $color-invert
// 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

105
sass/elements/notification.scss Normal file
View File

@@ -0,0 +1,105 @@
@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;
$notification-code-background-color: cv.getVar("scheme-main") !default;
$notification-radius: cv.getVar("radius") !default;
$notification-padding: 1.375em 1.5em !default;
$notification-colors: dv.$colors !default;
.#{iv.$class-prefix}notification {
@include cv.register-vars(
(
"notification-h": #{cv.getVar("scheme-h")},
"notification-s": #{cv.getVar("scheme-s")},
"notification-background-l": #{cv.getVar("background-l")},
"notification-color-l": #{cv.getVar("text-strong-l")},
"notification-code-background-color": #{$notification-code-background-color},
"notification-radius": #{$notification-radius},
"notification-padding": #{$notification-padding},
)
);
}
.#{iv.$class-prefix}notification {
@extend %block;
background-color: hsl(
cv.getVar("notification-h"),
cv.getVar("notification-s"),
cv.getVar("notification-background-l")
);
border-radius: cv.getVar("notification-radius");
color: hsl(
cv.getVar("notification-h"),
cv.getVar("notification-s"),
cv.getVar("notification-color-l")
);
padding: cv.getVar("notification-padding");
position: relative;
a:not(.#{iv.$class-prefix}button):not(.#{iv.$class-prefix}dropdown-item) {
color: currentColor;
text-decoration: underline;
}
strong {
color: currentColor;
}
code,
pre {
background: cv.getVar("notification-code-background-color");
}
pre code {
background: transparent;
}
& > .#{iv.$class-prefix}delete {
position: absolute;
inset-inline-end: 1rem;
top: 1rem;
}
.#{iv.$class-prefix}title,
.#{iv.$class-prefix}subtitle,
.#{iv.$class-prefix}content {
color: currentColor;
}
// Colors
@each $name, $pair in $notification-colors {
&.#{iv.$class-prefix}is-#{$name} {
@include cv.register-vars(
(
"notification-h": #{cv.getVar($name, "", "-h")},
"notification-s": #{cv.getVar($name, "", "-s")},
"notification-background-l": #{cv.getVar($name, "", "-l")},
"notification-color-l": #{cv.getVar($name, "", "-invert-l")},
)
);
&.#{iv.$class-prefix}is-light {
@include cv.register-vars(
(
"notification-background-l": 90%,
"notification-color-l": #{cv.getVar($name, "", "-light-invert-l")},
)
);
}
&.#{iv.$class-prefix}is-dark {
@include cv.register-vars(
(
"notification-background-l": 20%,
"notification-color-l": #{cv.getVar($name, "", "-dark-invert-l")},
)
);
}
}
}
}

31
sass/elements/other.sass
View File

@@ -1,31 +0,0 @@
@import "../utilities/mixins"
.block
@extend %block
.delete
@extend %delete
.heading
display: block
font-size: 11px
letter-spacing: 1px
margin-bottom: 5px
text-transform: uppercase
.loader
@extend %loader
.number
align-items: center
background-color: $background
border-radius: $radius-rounded
display: inline-flex
font-size: $size-medium
height: 2em
justify-content: center
margin-right: 1.5rem
min-width: 2.5em
padding: 0.25rem 0.5rem
text-align: center
vertical-align: top

73
sass/elements/progress.sass
View File

@@ -1,73 +0,0 @@
@import "../utilities/mixins"
$progress-bar-background-color: $border-light !default
$progress-value-background-color: $text !default
$progress-border-radius: $radius-rounded !default
$progress-indeterminate-duration: 1.5s !default
$progress-colors: $colors !default
.progress
@extend %block
-moz-appearance: none
-webkit-appearance: none
border: none
border-radius: $progress-border-radius
display: block
height: $size-normal
overflow: hidden
padding: 0
width: 100%
&::-webkit-progress-bar
background-color: $progress-bar-background-color
&::-webkit-progress-value
background-color: $progress-value-background-color
&::-moz-progress-bar
background-color: $progress-value-background-color
&::-ms-fill
background-color: $progress-value-background-color
border: none
// Colors
@each $name, $pair in $progress-colors
$color: nth($pair, 1)
&.is-#{$name}
&::-webkit-progress-value
background-color: $color
&::-moz-progress-bar
background-color: $color
&::-ms-fill
background-color: $color
&:indeterminate
background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%)
&:indeterminate
animation-duration: $progress-indeterminate-duration
animation-iteration-count: infinite
animation-name: moveIndeterminate
animation-timing-function: linear
background-color: $progress-bar-background-color
background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%)
background-position: top left
background-repeat: no-repeat
background-size: 150% 150%
&::-webkit-progress-bar
background-color: transparent
&::-moz-progress-bar
background-color: transparent
&::-ms-fill
animation-name: none
// Sizes
&.is-small
height: $size-small
&.is-medium
height: $size-medium
&.is-large
height: $size-large
@keyframes moveIndeterminate
from
background-position: 200% 0
to
background-position: -200% 0

115
sass/elements/progress.scss Normal file
View File

@@ -0,0 +1,115 @@
@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;
$progress-bar-background-color: cv.getVar("border-weak") !default;
$progress-value-background-color: cv.getVar("text") !default;
$progress-border-radius: cv.getVar("radius-rounded") !default;
$progress-indeterminate-duration: 1.5s !default;
$progress-colors: dv.$colors !default;
.#{iv.$class-prefix}progress {
@include cv.register-vars(
(
"progress-border-radius": #{$progress-border-radius},
"progress-bar-background-color": #{$progress-bar-background-color},
"progress-value-background-color": #{$progress-value-background-color},
"progress-indeterminate-duration": #{$progress-indeterminate-duration},
)
);
}
.#{iv.$class-prefix}progress {
@extend %block;
appearance: none;
border: none;
border-radius: cv.getVar("progress-border-radius");
display: block;
height: cv.getVar("size-normal");
overflow: hidden;
padding: 0;
width: 100%;
&::-webkit-progress-bar {
background-color: cv.getVar("progress-bar-background-color");
}
&::-webkit-progress-value {
background-color: cv.getVar("progress-value-background-color");
}
&::-moz-progress-bar {
background-color: cv.getVar("progress-value-background-color");
}
&::-ms-fill {
background-color: cv.getVar("progress-value-background-color");
border: none;
}
// Colors
@each $name, $pair in $progress-colors {
&.#{iv.$class-prefix}is-#{$name} {
@include cv.register-var(
"progress-value-background-color",
#{cv.getVar($name)}
);
}
}
&:indeterminate {
animation-duration: cv.getVar("progress-indeterminate-duration");
animation-iteration-count: infinite;
animation-name: moveIndeterminate;
animation-timing-function: linear;
background-color: cv.getVar("progress-bar-background-color");
background-image: linear-gradient(
to right,
cv.getVar("progress-value-background-color") 30%,
cv.getVar("progress-bar-background-color") 30%
);
background-position: top left;
background-repeat: no-repeat;
background-size: 150% 150%;
&::-webkit-progress-bar {
background-color: transparent;
}
&::-moz-progress-bar {
background-color: transparent;
}
&::-ms-fill {
animation-name: none;
}
}
// Sizes
&.#{iv.$class-prefix}is-small {
height: cv.getVar("size-small");
}
&.#{iv.$class-prefix}is-medium {
height: cv.getVar("size-medium");
}
&.#{iv.$class-prefix}is-large {
height: cv.getVar("size-large");
}
}
@keyframes moveIndeterminate {
from {
background-position: 200% 0;
}
to {
background-position: (-200%) 0;
}
}

134
sass/elements/table.sass
View File

@@ -1,134 +0,0 @@
@import "../utilities/mixins"
$table-color: $text-strong !default
$table-background-color: $scheme-main !default
$table-cell-border: 1px solid $border !default
$table-cell-border-width: 0 0 1px !default
$table-cell-padding: 0.5em 0.75em !default
$table-cell-heading-color: $text-strong !default
$table-cell-text-align: left !default
$table-head-cell-border-width: 0 0 2px !default
$table-head-cell-color: $text-strong !default
$table-foot-cell-border-width: 2px 0 0 !default
$table-foot-cell-color: $text-strong !default
$table-head-background-color: transparent !default
$table-body-background-color: transparent !default
$table-foot-background-color: transparent !default
$table-row-hover-background-color: $scheme-main-bis !default
$table-row-active-background-color: $primary !default
$table-row-active-color: $primary-invert !default
$table-striped-row-even-background-color: $scheme-main-bis !default
$table-striped-row-even-hover-background-color: $scheme-main-ter !default
$table-colors: $colors !default
.table
@extend %block
background-color: $table-background-color
color: $table-color
td,
th
border: $table-cell-border
border-width: $table-cell-border-width
padding: $table-cell-padding
vertical-align: top
// Colors
@each $name, $pair in $table-colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background-color: $color
border-color: $color
color: $color-invert
// Modifiers
&.is-narrow
white-space: nowrap
width: 1%
&.is-selected
background-color: $table-row-active-background-color
color: $table-row-active-color
a,
strong
color: currentColor
&.is-vcentered
vertical-align: middle
th
color: $table-cell-heading-color
&:not([align])
text-align: $table-cell-text-align
tr
&.is-selected
background-color: $table-row-active-background-color
color: $table-row-active-color
a,
strong
color: currentColor
td,
th
border-color: $table-row-active-color
color: currentColor
thead
background-color: $table-head-background-color
td,
th
border-width: $table-head-cell-border-width
color: $table-head-cell-color
tfoot
background-color: $table-foot-background-color
td,
th
border-width: $table-foot-cell-border-width
color: $table-foot-cell-color
tbody
background-color: $table-body-background-color
tr
&:last-child
td,
th
border-bottom-width: 0
// Modifiers
&.is-bordered
td,
th
border-width: 1px
tr
&:last-child
td,
th
border-bottom-width: 1px
&.is-fullwidth
width: 100%
&.is-hoverable
tbody
tr:not(.is-selected)
&:hover
background-color: $table-row-hover-background-color
&.is-striped
tbody
tr:not(.is-selected)
&:hover
background-color: $table-row-hover-background-color
&:nth-child(even)
background-color: $table-striped-row-even-hover-background-color
&.is-narrow
td,
th
padding: 0.25em 0.5em
&.is-striped
tbody
tr:not(.is-selected)
&:nth-child(even)
background-color: $table-striped-row-even-background-color
.table-container
@extend %block
+overflow-touch
overflow: auto
overflow-y: hidden
max-width: 100%

261
sass/elements/table.scss Normal file
View File

@@ -0,0 +1,261 @@
@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;
$table-color: cv.getVar("text-strong") !default;
$table-background-color: cv.getVar("scheme-main") !default;
$table-cell-border-color: cv.getVar("border") !default;
$table-cell-border-style: solid !default;
$table-cell-border-width: 0 0 1px !default;
$table-cell-padding: 0.5em 0.75em !default;
$table-cell-heading-color: cv.getVar("text-strong") !default;
$table-cell-text-align: left !default;
$table-head-cell-border-width: 0 0 2px !default;
$table-head-cell-color: cv.getVar("text-strong") !default;
$table-foot-cell-border-width: 2px 0 0 !default;
$table-foot-cell-color: cv.getVar("text-strong") !default;
$table-head-background-color: transparent !default;
$table-body-background-color: transparent !default;
$table-foot-background-color: transparent !default;
$table-row-hover-background-color: cv.getVar("scheme-main-bis") !default;
$table-row-active-background-color: cv.getVar("primary") !default;
$table-row-active-color: cv.getVar("primary-invert") !default;
$table-striped-row-even-background-color: cv.getVar("scheme-main-bis") !default;
$table-striped-row-even-hover-background-color: cv.getVar(
"scheme-main-ter"
) !default;
$table-colors: dv.$colors !default;
.#{iv.$class-prefix}table {
@include cv.register-vars(
(
"table-color": #{$table-color},
"table-background-color": #{$table-background-color},
"table-cell-border-color": #{$table-cell-border-color},
"table-cell-border-style": #{$table-cell-border-style},
"table-cell-border-width": #{$table-cell-border-width},
"table-cell-padding": #{$table-cell-padding},
"table-cell-heading-color": #{$table-cell-heading-color},
"table-cell-text-align": #{$table-cell-text-align},
"table-head-cell-border-width": #{$table-head-cell-border-width},
"table-head-cell-color": #{$table-head-cell-color},
"table-foot-cell-border-width": #{$table-foot-cell-border-width},
"table-foot-cell-color": #{$table-foot-cell-color},
"table-head-background-color": #{$table-head-background-color},
"table-body-background-color": #{$table-body-background-color},
"table-foot-background-color": #{$table-foot-background-color},
"table-row-hover-background-color": #{$table-row-hover-background-color},
"table-row-active-background-color": #{$table-row-active-background-color},
"table-row-active-color": #{$table-row-active-color},
"table-striped-row-even-background-color": #{$table-striped-row-even-background-color},
"table-striped-row-even-hover-background-color": #{$table-striped-row-even-hover-background-color},
)
);
}
.#{iv.$class-prefix}table {
@extend %block;
background-color: cv.getVar("table-background-color");
color: cv.getVar("table-color");
td,
th {
background-color: cv.getVar("table-cell-background-color");
border-color: cv.getVar("table-cell-border-color");
border-style: cv.getVar("table-cell-border-style");
border-width: cv.getVar("table-cell-border-width");
color: cv.getVar("table-color");
padding: cv.getVar("table-cell-padding");
vertical-align: top;
// Colors
@each $name, $pair in $table-colors {
&.#{iv.$class-prefix}is-#{$name} {
@include cv.register-vars(
(
"table-color": #{cv.getVar($name, "", "-invert")},
"table-cell-heading-color": #{cv.getVar($name, "", "-invert")},
"table-cell-background-color": #{cv.getVar($name)},
"table-cell-border-color": #{cv.getVar($name)},
)
);
}
}
// Modifiers
&.#{iv.$class-prefix}is-narrow {
white-space: nowrap;
width: 1%;
}
&.#{iv.$class-prefix}is-selected {
background-color: cv.getVar("table-row-active-background-color");
color: cv.getVar("table-row-active-color");
a,
strong {
color: currentColor;
}
}
&.#{iv.$class-prefix}is-vcentered {
vertical-align: middle;
}
}
th {
color: cv.getVar("table-cell-heading-color");
&:not([align]) {
text-align: cv.getVar("table-cell-text-align");
}
}
tr {
&.#{iv.$class-prefix}is-selected {
background-color: cv.getVar("table-row-active-background-color");
color: cv.getVar("table-row-active-color");
a,
strong {
color: currentColor;
}
td,
th {
border-color: cv.getVar("table-row-active-color");
color: currentColor;
}
}
@each $name, $pair in $table-colors {
&.#{iv.$class-prefix}is-#{$name} {
@include cv.register-vars(
(
"table-color": #{cv.getVar($name, "", "-invert")},
"table-cell-heading-color": #{cv.getVar($name, "", "-invert")},
"table-cell-background-color": #{cv.getVar($name)},
"table-cell-border-color": #{cv.getVar($name)},
)
);
}
}
}
thead {
background-color: cv.getVar("table-head-background-color");
td,
th {
border-width: cv.getVar("table-head-cell-border-width");
color: cv.getVar("table-head-cell-color");
}
}
tfoot {
background-color: cv.getVar("table-foot-background-color");
td,
th {
border-width: cv.getVar("table-foot-cell-border-width");
color: cv.getVar("table-foot-cell-color");
}
}
tbody {
background-color: cv.getVar("table-body-background-color");
tr {
&:last-child {
td,
th {
border-bottom-width: 0;
}
}
}
}
// Modifiers
&.#{iv.$class-prefix}is-bordered {
td,
th {
border-width: 1px;
}
tr {
&:last-child {
td,
th {
border-bottom-width: 1px;
}
}
}
}
&.#{iv.$class-prefix}is-fullwidth {
width: 100%;
}
&.#{iv.$class-prefix}is-hoverable {
tbody {
tr:not(.#{iv.$class-prefix}is-selected) {
&:hover {
background-color: cv.getVar("table-row-hover-background-color");
}
}
}
&.#{iv.$class-prefix}is-striped {
tbody {
tr:not(.#{iv.$class-prefix}is-selected) {
&:hover {
background-color: cv.getVar("table-row-hover-background-color");
&:nth-child(even) {
background-color: cv.getVar(
"table-striped-row-even-hover-background-color"
);
}
}
}
}
}
}
&.#{iv.$class-prefix}is-narrow {
td,
th {
padding: 0.25em 0.5em;
}
}
&.#{iv.$class-prefix}is-striped {
tbody {
tr:not(.#{iv.$class-prefix}is-selected) {
&:nth-child(even) {
background-color: cv.getVar(
"table-striped-row-even-background-color"
);
}
}
}
}
}
.#{iv.$class-prefix}table-container {
@extend %block;
@include mx.overflow-touch;
overflow: auto;
overflow-y: hidden;
max-width: 100%;
}

140
sass/elements/tag.sass
View File

@@ -1,140 +0,0 @@
@import "../utilities/mixins"
$tag-background-color: $background !default
$tag-color: $text !default
$tag-radius: $radius !default
$tag-delete-margin: 1px !default
$tag-colors: $colors !default
.tags
align-items: center
display: flex
flex-wrap: wrap
justify-content: flex-start
.tag
margin-bottom: 0.5rem
&:not(:last-child)
+ltr-property("margin", 0.5rem)
&:last-child
margin-bottom: -0.5rem
&:not(:last-child)
margin-bottom: 1rem
// Sizes
&.are-medium
.tag:not(.is-normal):not(.is-large)
font-size: $size-normal
&.are-large
.tag:not(.is-normal):not(.is-medium)
font-size: $size-medium
&.is-centered
justify-content: center
.tag
margin-right: 0.25rem
margin-left: 0.25rem
&.is-right
justify-content: flex-end
.tag
&:not(:first-child)
margin-left: 0.5rem
&:not(:last-child)
margin-right: 0
&.has-addons
.tag
+ltr-property("margin", 0)
&:not(:first-child)
+ltr-property("margin", 0, false)
+ltr
border-top-left-radius: 0
border-bottom-left-radius: 0
+rtl
border-top-right-radius: 0
border-bottom-right-radius: 0
&:not(:last-child)
+ltr
border-top-right-radius: 0
border-bottom-right-radius: 0
+rtl
border-top-left-radius: 0
border-bottom-left-radius: 0
.tag:not(body)
align-items: center
background-color: $tag-background-color
border-radius: $tag-radius
color: $tag-color
display: inline-flex
font-size: $size-small
height: 2em
justify-content: center
line-height: 1.5
padding-left: 0.75em
padding-right: 0.75em
white-space: nowrap
.delete
+ltr-property("margin", 0.25rem, false)
+ltr-property("margin", -0.375rem)
// Colors
@each $name, $pair in $tag-colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}
background-color: $color
color: $color-invert
// If a light and dark colors are provided
@if length($pair) > 3
$color-light: nth($pair, 3)
$color-dark: nth($pair, 4)
&.is-light
background-color: $color-light
color: $color-dark
// Sizes
&.is-normal
font-size: $size-small
&.is-medium
font-size: $size-normal
&.is-large
font-size: $size-medium
.icon
&:first-child:not(:last-child)
+ltr-property("margin", -0.375em, false)
+ltr-property("margin", 0.1875em)
&:last-child:not(:first-child)
+ltr-property("margin", 0.1875em, false)
+ltr-property("margin", -0.375em)
&:first-child:last-child
+ltr-property("margin", -0.375em, false)
+ltr-property("margin", -0.375em)
// Modifiers
&.is-delete
+ltr-property("margin", $tag-delete-margin, false)
padding: 0
position: relative
width: 2em
&::before,
&::after
background-color: currentColor
content: ""
display: block
left: 50%
position: absolute
top: 50%
transform: translateX(-50%) translateY(-50%) rotate(45deg)
transform-origin: center center
&::before
height: 1px
width: 50%
&::after
height: 50%
width: 1px
&:hover,
&:focus
background-color: darken($tag-background-color, 5%)
&:active
background-color: darken($tag-background-color, 10%)
&.is-rounded
border-radius: $radius-rounded
a.tag
&:hover
text-decoration: underline

219
sass/elements/tag.scss Normal file
View File

@@ -0,0 +1,219 @@
@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;
$tag-h: cv.getVar("scheme-h");
$tag-s: cv.getVar("scheme-s");
$tag-background-l: cv.getVar("background-l");
$tag-background-l-delta: 0%;
$tag-hover-background-l-delta: cv.getVar("hover-background-l-delta");
$tag-active-background-l-delta: cv.getVar("active-background-l-delta");
$tag-color-l: cv.getVar("text-l");
$tag-radius: cv.getVar("radius") !default;
$tag-delete-margin: 1px !default;
$tag-colors: dv.$colors !default;
.#{iv.$class-prefix}tags {
@extend %block;
align-items: center;
color: hsl(cv.getVar("tag-h"), cv.getVar("tag-s"), cv.getVar("tag-color-l"));
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: flex-start;
// Sizes
&.#{iv.$class-prefix}are-medium {
.#{iv.$class-prefix}tag:not(.#{iv.$class-prefix}is-normal):not(
.#{iv.$class-prefix}is-large
) {
font-size: cv.getVar("size-normal");
}
}
&.#{iv.$class-prefix}are-large {
.#{iv.$class-prefix}tag:not(.#{iv.$class-prefix}is-normal):not(
.#{iv.$class-prefix}is-medium
) {
font-size: cv.getVar("size-medium");
}
}
&.#{iv.$class-prefix}is-centered {
gap: 0.25rem;
justify-content: center;
}
&.#{iv.$class-prefix}is-right {
justify-content: flex-end;
}
&.#{iv.$class-prefix}has-addons {
gap: 0;
.#{iv.$class-prefix}tag {
&:not(:first-child) {
border-start-start-radius: 0; // Top left
border-end-start-radius: 0; // Top right
}
&:not(:last-child) {
border-start-end-radius: 0; // Bottom left
border-end-end-radius: 0; // Bottom right
}
}
}
}
.#{iv.$class-prefix}tag {
@include cv.register-vars(
(
"tag-h": #{$tag-h},
"tag-s": #{$tag-s},
"tag-background-l": #{$tag-background-l},
"tag-background-l-delta": #{$tag-background-l-delta},
"tag-hover-background-l-delta": #{$tag-hover-background-l-delta},
"tag-active-background-l-delta": #{$tag-active-background-l-delta},
"tag-color-l": #{$tag-color-l},
"tag-radius": #{$tag-radius},
"tag-delete-margin": #{$tag-delete-margin},
)
);
align-items: center;
background-color: hsl(
cv.getVar("tag-h"),
cv.getVar("tag-s"),
calc(
#{cv.getVar("tag-background-l")} + #{cv.getVar("tag-background-l-delta")}
)
);
border-radius: $tag-radius;
color: hsl(cv.getVar("tag-h"), cv.getVar("tag-s"), cv.getVar("tag-color-l"));
display: inline-flex;
font-size: cv.getVar("size-small");
height: 2em;
justify-content: center;
line-height: 1.5;
padding-left: 0.75em;
padding-right: 0.75em;
white-space: nowrap;
.#{iv.$class-prefix}delete {
margin-inline-start: 0.25rem;
margin-inline-end: -0.375rem;
}
// Colors
@each $name, $pair in $tag-colors {
&.#{iv.$class-prefix}is-#{$name} {
@include cv.register-vars(
(
"tag-h": #{cv.getVar($name, "", "-h")},
"tag-s": #{cv.getVar($name, "", "-s")},
"tag-background-l": #{cv.getVar($name, "", "-l")},
"tag-color-l": #{cv.getVar($name, "", "-invert-l")},
)
);
&.#{iv.$class-prefix}is-light {
@include cv.register-vars(
(
"tag-background-l": #{cv.getVar("light-l")},
"tag-color-l": #{cv.getVar($name, "", "-light-invert-l")},
)
);
}
}
}
// Sizes
&.#{iv.$class-prefix}is-normal {
font-size: cv.getVar("size-small");
}
&.#{iv.$class-prefix}is-medium {
font-size: cv.getVar("size-normal");
}
&.#{iv.$class-prefix}is-large {
font-size: cv.getVar("size-medium");
}
.#{iv.$class-prefix}icon {
&:first-child:not(:last-child) {
margin-inline-start: -0.375em;
margin-inline-end: 0.1875em;
}
&:last-child:not(:first-child) {
margin-inline-start: 0.1875em;
margin-inline-end: -0.375em;
}
&:first-child:last-child {
margin-inline-start: -0.375em;
margin-inline-end: -0.375em;
}
}
// Modifiers
&.#{iv.$class-prefix}is-delete {
margin-inline-start: cv.getVar("tag-delete-margin");
padding: 0;
position: relative;
width: 2em;
&::before,
&::after {
background-color: currentColor;
content: "";
display: block;
left: 50%;
position: absolute;
top: 50%;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform-origin: center center;
}
&::before {
height: 1px;
width: 50%;
}
&::after {
height: 50%;
width: 1px;
}
}
&.#{iv.$class-prefix}is-rounded {
border-radius: cv.getVar("radius-rounded");
}
}
a.#{iv.$class-prefix}tag,
button.#{iv.$class-prefix}tag,
.#{iv.$class-prefix}tag.is-hoverable {
cursor: pointer;
&:hover {
@include cv.register-vars(
(
"tag-background-l-delta": #{cv.getVar("tag-hover-background-l-delta")},
)
);
}
&:active {
@include cv.register-vars(
(
"tag-background-l-delta": #{cv.getVar("tag-active-background-l-delta")},
)
);
}
}

70
sass/elements/title.sass
View File

@@ -1,70 +0,0 @@
@import "../utilities/mixins"
$title-color: $text-strong !default
$title-family: false !default
$title-size: $size-3 !default
$title-weight: $weight-semibold !default
$title-line-height: 1.125 !default
$title-strong-color: inherit !default
$title-strong-weight: inherit !default
$title-sub-size: 0.75em !default
$title-sup-size: 0.75em !default
$subtitle-color: $text !default
$subtitle-family: false !default
$subtitle-size: $size-5 !default
$subtitle-weight: $weight-normal !default
$subtitle-line-height: 1.25 !default
$subtitle-strong-color: $text-strong !default
$subtitle-strong-weight: $weight-semibold !default
$subtitle-negative-margin: -1.25rem !default
.title,
.subtitle
@extend %block
word-break: break-word
em,
span
font-weight: inherit
sub
font-size: $title-sub-size
sup
font-size: $title-sup-size
.tag
vertical-align: middle
.title
color: $title-color
@if $title-family
font-family: $title-family
font-size: $title-size
font-weight: $title-weight
line-height: $title-line-height
strong
color: $title-strong-color
font-weight: $title-strong-weight
&:not(.is-spaced) + .subtitle
margin-top: $subtitle-negative-margin
// Sizes
@each $size in $sizes
$i: index($sizes, $size)
&.is-#{$i}
font-size: $size
.subtitle
color: $subtitle-color
@if $subtitle-family
font-family: $subtitle-family
font-size: $subtitle-size
font-weight: $subtitle-weight
line-height: $subtitle-line-height
strong
color: $subtitle-strong-color
font-weight: $subtitle-strong-weight
&:not(.is-spaced) + .title
margin-top: $subtitle-negative-margin
// Sizes
@each $size in $sizes
$i: index($sizes, $size)
&.is-#{$i}
font-size: $size

128
sass/elements/title.scss Normal file
View File

@@ -0,0 +1,128 @@
@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;
$title-color: cv.getVar("text-strong") !default;
$title-family: false !default;
$title-size: cv.getVar("size-3") !default;
$title-weight: cv.getVar("weight-extrabold") !default;
$title-line-height: 1.125 !default;
$title-strong-color: inherit !default;
$title-strong-weight: inherit !default;
$title-sub-size: 0.75em !default;
$title-sup-size: 0.75em !default;
$subtitle-color: cv.getVar("text") !default;
$subtitle-family: false !default;
$subtitle-size: cv.getVar("size-5") !default;
$subtitle-weight: cv.getVar("weight-normal") !default;
$subtitle-line-height: 1.25 !default;
$subtitle-strong-color: cv.getVar("text-strong") !default;
$subtitle-strong-weight: cv.getVar("weight-semibold") !default;
.#{iv.$class-prefix}title,
.#{iv.$class-prefix}subtitle {
@include cv.register-vars(
(
"title-color": #{$title-color},
"title-family": #{$title-family},
"title-size": #{$title-size},
"title-weight": #{$title-weight},
"title-line-height": #{$title-line-height},
"title-strong-color": #{$title-strong-color},
"title-strong-weight": #{$title-strong-weight},
"title-sub-size": #{$title-sub-size},
"title-sup-size": #{$title-sup-size},
"subtitle-color": #{$subtitle-color},
"subtitle-family": #{$subtitle-family},
"subtitle-size": #{$subtitle-size},
"subtitle-weight": #{$subtitle-weight},
"subtitle-line-height": #{$subtitle-line-height},
"subtitle-strong-color": #{$subtitle-strong-color},
"subtitle-strong-weight": #{$subtitle-strong-weight},
)
);
}
.#{iv.$class-prefix}title,
.#{iv.$class-prefix}subtitle {
@extend %block;
word-break: break-word;
em,
span {
font-weight: inherit;
}
sub {
font-size: cv.getVar("title-sub-size");
}
sup {
font-size: cv.getVar("title-sup-size");
}
.#{iv.$class-prefix}tag {
vertical-align: middle;
}
}
.#{iv.$class-prefix}title {
color: cv.getVar("title-color");
font-size: cv.getVar("title-size");
font-weight: cv.getVar("title-weight");
line-height: cv.getVar("title-line-height");
@if $title-family {
font-family: cv.getVar("title-family");
}
strong {
color: cv.getVar("title-strong-color");
font-weight: cv.getVar("title-strong-weight");
}
&:not(.#{iv.$class-prefix}is-spaced):has(+ .#{iv.$class-prefix}subtitle) {
margin-bottom: 0;
}
// Sizes
@each $size in dv.$sizes {
$i: index(dv.$sizes, $size);
&.#{iv.$class-prefix}is-#{$i} {
font-size: $size;
}
}
}
.#{iv.$class-prefix}subtitle {
color: cv.getVar("subtitle-color");
font-size: cv.getVar("subtitle-size");
font-weight: cv.getVar("subtitle-weight");
line-height: cv.getVar("subtitle-line-height");
@if $subtitle-family {
font-family: cv.getVar("subtitle-family");
}
strong {
color: cv.getVar("subtitle-strong-color");
font-weight: cv.getVar("subtitle-strong-weight");
}
&:not(.#{iv.$class-prefix}is-spaced):has(+ .#{iv.$class-prefix}title) {
margin-bottom: 0;
}
// Sizes
@each $size in dv.$sizes {
$i: index(dv.$sizes, $size);
&.#{iv.$class-prefix}is-#{$i} {
font-size: $size;
}
}
}