Clego/clego-app
Archived
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: rename style to styles

Browse Source
This commit is contained in:
theo
2024-04-26 23:46:53 +02:00
parent d8fb60f23c
commit 50688c6fbe
78 changed files with 1 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
styles/bulma/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
styles/bulma/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;
}

59
styles/bulma/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");
}
}

640
styles/bulma/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;
}
}
}
}
}

283
styles/bulma/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
styles/bulma/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;
}

67
styles/bulma/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;
}

62
styles/bulma/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
styles/bulma/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;
}

105
styles/bulma/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")},
)
);
}
}
}
}

115
styles/bulma/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;
}
}

261
styles/bulma/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%;
}

219
styles/bulma/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")},
)
);
}
}

128
styles/bulma/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;
}
}
}