chore(third-party): upgrade

This commit is contained in:
sinavir 2025-03-25 03:17:00 +01:00
parent e8d3560bb7
commit 83d614314d
No known key found for this signature in database
46 changed files with 829 additions and 1584 deletions

View file

@ -8,16 +8,16 @@
"repo": "git-hooks.nix"
},
"branch": "master",
"revision": "cc4d466cb1254af050ff7bdf47f6d404a7c646d1",
"url": "https://github.com/cachix/git-hooks.nix/archive/cc4d466cb1254af050ff7bdf47f6d404a7c646d1.tar.gz",
"hash": "1gl1bdnv533jyvj12dfyg8q5haprapswnn7hbpikb2qbnnwc2xzd"
"revision": "dcf5072734cb576d2b0c59b2ac44f5050b5eac82",
"url": "https://github.com/cachix/git-hooks.nix/archive/dcf5072734cb576d2b0c59b2ac44f5050b5eac82.tar.gz",
"hash": "1jmdxmx29xghjiaks6f5amnxld8w3kmxb2zv8lk2yzpgp6kr60qg"
},
"nixpkgs": {
"type": "Channel",
"name": "nixpkgs-unstable",
"url": "https://releases.nixos.org/nixpkgs/nixpkgs-24.11pre638929.3f84a279f1a6/nixexprs.tar.xz",
"hash": "1lvb81h0avzy75qjfb0gjrc5absa6fpdpll6winj3i2qcbmd90kl"
"url": "https://releases.nixos.org/nixpkgs/nixpkgs-25.05pre773343.1750f3c1c894/nixexprs.tar.xz",
"hash": "0wl2gcvybbmp88zd7555c7qr4zzi3hbwhb0zinn48hr22iflzg7r"
}
},
"version": 3
}
}

View file

@ -10,14 +10,14 @@
buildPythonPackage rec {
pname = "django-browser-reload";
version = "1.12.1";
version = "1.18.0";
pyproject = true;
src = fetchFromGitHub {
owner = "adamchainz";
repo = "django-browser-reload";
rev = version;
hash = "sha256-IDIkAl6YYI3isDvpzCtAu4fLSr2gbjEvVW+K1WBDPbo=";
hash = "sha256-iLu9+E3Ejp/Dhv4I7RuL/F1WNiFRKytNvNDDhrh0Hhs=";
};
nativeBuildInputs = [

View file

@ -1,7 +1,7 @@
{
lib,
buildPythonPackage,
#fetchgit,
fetchgit,
setuptools,
setuptools-scm,
wheel,
@ -10,15 +10,14 @@
buildPythonPackage rec {
pname = "django-bulma-forms";
version = "0.1.4";
version = "0.1.6";
pyproject = true;
src = ../../../django-bulma-forms;
#fetchgit {
# url = "https://git.hubrecht.ovh/hubrecht/django-bulma-forms";
# rev = "v${version}";
# hash = "sha256-4KTMXx3YxDxB4/YH14pJnNYtpOGXeDmD+gcbrUHwD/w=";
#};
src = fetchgit {
url = "https://git.hubrecht.ovh/hubrecht/django-bulma-forms";
rev = "v${version}";
hash = "sha256-J4BoEP9wassUzhSeblfAEMpxFmNnNDog3SvhiPoFT5g=";
};
nativeBuildInputs = [
setuptools

View file

@ -8,14 +8,14 @@
buildPythonPackage rec {
pname = "django-sass-processor";
version = "1.4";
version = "1.4.1";
pyproject = true;
src = fetchFromGitHub {
owner = "jrief";
repo = "django-sass-processor";
rev = version;
hash = "sha256-kDhCJ/V2xwLqw3k0W1NLxUrxbvjuKGclWyAuFpGVyQU=";
hash = "sha256-Z3UzzkHlMNiyhj7YPRDgAX0437BywPG/waNSPoNiKLo=";
};
nativeBuildInputs = [

View file

@ -9,14 +9,14 @@
buildPythonPackage rec {
pname = "django-solo";
version = "2.2.0";
version = "2.4.0";
pyproject = true;
src = fetchFromGitHub {
owner = "lazybird";
repo = "django-solo";
rev = version;
hash = "sha256-utLwELFk5/oiYnfJCnnHQPlVTADSjt9cbMOOUKMtnfM=";
hash = "sha256-eZ8xR/h+wUuZyLFwfqgszrlVyYJk4pVml3AJF491rj0=";
};
nativeBuildInputs = [

File diff suppressed because one or more lines are too long

View file

@ -112,15 +112,3 @@ textarea.#{iv.$class-prefix}is-skeleton {
}
}
}
.#{iv.$class-prefix}skeleton {
background-image: linear-gradient(
0deg,
transparent 0%,
transparent 50%,
#f60 50%,
#f60 100%
);
background-position: top left;
background-size: 1.5em;
}

View file

@ -4,9 +4,9 @@
@use "../utilities/extends";
@use "../utilities/mixins" as mx;
$navbar-h: cv.getVar("scheme-h");
$navbar-s: cv.getVar("scheme-s");
$navbar-l: cv.getVar("scheme-main-l");
$navbar-h: cv.getVar("scheme-h") !default;
$navbar-s: cv.getVar("scheme-s") !default;
$navbar-l: cv.getVar("scheme-main-l") !default;
$navbar-background-color: cv.getVar("scheme-main") !default;
$navbar-box-shadow-size: 0 0.125em 0 0 !default;
$navbar-box-shadow-color: cv.getVar("background") !default;
@ -16,26 +16,35 @@ $navbar-padding-horizontal: 2rem !default;
$navbar-z: 30 !default;
$navbar-fixed-z: 30 !default;
$navbar-item-background-a: 0;
$navbar-item-background-l: cv.getVar("scheme-main-l");
$navbar-item-background-l-delta: 0%;
$navbar-item-hover-background-l-delta: cv.getVar("hover-background-l-delta");
$navbar-item-active-background-l-delta: cv.getVar("active-background-l-delta");
$navbar-item-color-l: cv.getVar("text-l");
$navbar-item-selected-h: cv.getVar("link-h");
$navbar-item-selected-s: cv.getVar("link-s");
$navbar-item-selected-l: cv.getVar("link-l");
$navbar-item-selected-background-l: cv.getVar("link-l");
$navbar-item-selected-color-l: cv.getVar("link-invert-l");
$navbar-item-background-a: 0 !default;
$navbar-item-background-l: cv.getVar("scheme-main-l") !default;
$navbar-item-background-l-delta: 0% !default;
$navbar-item-hover-background-l-delta: cv.getVar(
"hover-background-l-delta"
) !default;
$navbar-item-active-background-l-delta: cv.getVar(
"active-background-l-delta"
) !default;
$navbar-item-color-l: cv.getVar("text-l") !default;
$navbar-item-color: hsl(
#{cv.getVar("navbar-h")},
#{cv.getVar("navbar-s")},
#{cv.getVar("navbar-item-color-l")}
) !default;
$navbar-item-selected-h: cv.getVar("link-h") !default;
$navbar-item-selected-s: cv.getVar("link-s") !default;
$navbar-item-selected-l: cv.getVar("link-l") !default;
$navbar-item-selected-background-l: cv.getVar("link-l") !default;
$navbar-item-selected-color-l: cv.getVar("link-invert-l") !default;
$navbar-item-img-max-height: 1.75rem !default;
$navbar-dropdown-item-h: cv.getVar("scheme-h");
$navbar-dropdown-item-s: cv.getVar("scheme-s");
$navbar-dropdown-item-l: cv.getVar("scheme-main-l");
$navbar-dropdown-item-background-l: cv.getVar("scheme-main-l");
$navbar-dropdown-item-color-l: cv.getVar("text-l");
$navbar-dropdown-item-h: cv.getVar("scheme-h") !default;
$navbar-dropdown-item-s: cv.getVar("scheme-s") !default;
$navbar-dropdown-item-l: cv.getVar("scheme-main-l") !default;
$navbar-dropdown-item-background-l: cv.getVar("scheme-main-l") !default;
$navbar-dropdown-item-color-l: cv.getVar("text-l") !default;
$navbar-burger-color: cv.getVar("navbar-item-color") !default;
$navbar-burger-color: cv.getVar("link") !default;
$navbar-tab-hover-background-color: transparent !default;
$navbar-tab-hover-border-bottom-color: cv.getVar("link") !default;
@ -119,6 +128,7 @@ $navbar-colors: dv.$colors !default;
"navbar-item-hover-background-l-delta": #{$navbar-item-hover-background-l-delta},
"navbar-item-active-background-l-delta": #{$navbar-item-active-background-l-delta},
"navbar-item-color-l": #{$navbar-item-color-l},
"navbar-item-color": #{$navbar-item-color},
"navbar-item-selected-h": #{$navbar-item-selected-h},
"navbar-item-selected-s": #{$navbar-item-selected-s},
"navbar-item-selected-l": #{$navbar-item-selected-l},
@ -254,9 +264,13 @@ body {
.#{iv.$class-prefix}navbar-burger {
@extend %reset;
@include mx.burger(2.5rem);
align-self: center;
margin-inline-start: auto;
margin-inline-end: 0.375rem;
& {
align-self: center;
color: cv.getVar("navbar-burger-color");
margin-inline-start: auto;
margin-inline-end: 0.375rem;
}
}
.#{iv.$class-prefix}navbar-menu {
@ -265,12 +279,9 @@ body {
.#{iv.$class-prefix}navbar-item,
.#{iv.$class-prefix}navbar-link {
color: hsl(
#{cv.getVar("navbar-h")},
#{cv.getVar("navbar-s")},
#{cv.getVar("navbar-item-color-l")}
);
color: cv.getVar("navbar-item-color");
display: block;
gap: 0.75rem;
line-height: 1.5;
padding: 0.5rem 0.75rem;
position: relative;
@ -650,8 +661,8 @@ a.#{iv.$class-prefix}navbar-item,
.#{iv.$class-prefix}navbar-dropdown {
background-color: cv.getVar("navbar-dropdown-background-color");
border-bottom-left-radius: cv.getVar("navbar-dropdown-radius");
border-bottom-right-radius: cv.getVar("navbar-dropdown-radius");
border-end-start-radius: cv.getVar("navbar-dropdown-radius");
border-end-end-radius: cv.getVar("navbar-dropdown-radius");
border-top-color: cv.getVar("navbar-dropdown-border-color");
border-top-style: cv.getVar("navbar-dropdown-border-style");
border-top-width: cv.getVar("navbar-dropdown-border-width");

View file

@ -192,8 +192,8 @@ $panel-colors: dv.$colors !default;
}
&:last-child {
border-bottom-left-radius: cv.getVar("panel-radius");
border-bottom-right-radius: cv.getVar("panel-radius");
border-end-start-radius: cv.getVar("panel-radius");
border-end-end-radius: cv.getVar("panel-radius");
}
}

View file

@ -33,6 +33,7 @@ $button-border-width: cv.getVar("control-border-width") !default;
$button-padding-vertical: 0.5em !default;
$button-padding-horizontal: 1em !default;
$button-rounded-padding-horizontal-offset: 0.25em !default;
$button-focus-border-color: cv.getVar("link-focus-border") !default;
$button-focus-box-shadow-size: 0 0 0 0.125em !default;
@ -409,6 +410,12 @@ $no-palette: ("white", "black", "light", "dark");
&:active {
@include cv.register-vars(());
}
&[disabled],
fieldset[disabled] & {
background-color: transparent;
box-shadow: none;
}
}
&.#{iv.$class-prefix}is-inverted {
@ -533,8 +540,14 @@ $no-palette: ("white", "black", "light", "dark");
&.#{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);
padding-left: calc(
#{cv.getVar("button-padding-horizontal")} + #{$button-rounded-padding-horizontal-offset} -
#{cv.getVar("button-border-width")}
);
padding-right: calc(
#{cv.getVar("button-padding-horizontal")} + #{$button-rounded-padding-horizontal-offset} -
#{cv.getVar("button-border-width")}
);
}
}

View file

@ -133,7 +133,10 @@ $content-table-foot-cell-color: #{cv.getVar("text-strong")} !default;
ol {
list-style-position: outside;
margin-inline-start: 2em;
margin-top: 1em;
&:not(:first-child) {
margin-top: 1em;
}
&:not([type]) {
list-style-type: decimal;
@ -159,7 +162,10 @@ $content-table-foot-cell-color: #{cv.getVar("text-strong")} !default;
ul {
list-style: disc outside;
margin-inline-start: 2em;
margin-top: 1em;
&:not(:first-child) {
margin-top: 1em;
}
ul {
list-style-type: circle;

View file

@ -1,3 +1,5 @@
@use "sass:list";
@use "../utilities/initial-variables" as iv;
@use "../utilities/css-variables" as cv;
@use "../utilities/mixins" as mx;
@ -37,8 +39,8 @@ $dimensions: 16 24 32 48 64 96 128 !default;
}
@each $pair in iv.$aspect-ratios {
$w: nth($pair, 1);
$h: nth($pair, 2);
$w: list.nth($pair, 1);
$h: list.nth($pair, 2);
&.#{iv.$class-prefix}is-#{$w}by#{$h} {
aspect-ratio: #{$w} / #{$h};

View file

@ -1,3 +1,5 @@
@use "sass:list";
@use "../utilities/css-variables" as cv;
@use "../utilities/derived-variables" as dv;
@use "../utilities/initial-variables" as iv;
@ -90,7 +92,7 @@ $subtitle-strong-weight: cv.getVar("weight-semibold") !default;
// Sizes
@each $size in dv.$sizes {
$i: index(dv.$sizes, $size);
$i: list.index(dv.$sizes, $size);
&.#{iv.$class-prefix}is-#{$i} {
font-size: $size;
@ -119,7 +121,7 @@ $subtitle-strong-weight: cv.getVar("weight-semibold") !default;
// Sizes
@each $size in dv.$sizes {
$i: index(dv.$sizes, $size);
$i: list.index(dv.$sizes, $size);
&.#{iv.$class-prefix}is-#{$i} {
font-size: $size;

View file

@ -25,8 +25,12 @@
.#{iv.$class-prefix}radio {
@extend %checkbox-radio;
& + .#{iv.$class-prefix}radio {
margin-inline-start: 0.5em;
}
}
.#{iv.$class-prefix}checkboxes,
.#{iv.$class-prefix}radios {
display: flex;
flex-wrap: wrap;
column-gap: 1em;
row-gap: 0.5em;
}

View file

@ -1,3 +1,5 @@
@use "sass:list";
@use "shared";
@use "../utilities/css-variables" as cv;
@use "../utilities/initial-variables" as iv;
@ -12,16 +14,6 @@ $textarea-colors: shared.$form-colors !default;
%input-textarea {
@extend %input;
@include cv.register-vars(
(
"input-h": #{cv.getVar("scheme-h")},
"input-s": #{cv.getVar("scheme-s")},
"input-border-style": solid,
"input-border-width": 1px,
"input-border-l": #{cv.getVar("border-l")},
)
);
box-shadow: shared.$input-shadow;
max-width: 100%;
width: 100%;
@ -32,7 +24,7 @@ $textarea-colors: shared.$form-colors !default;
// Colors
@each $name, $pair in $textarea-colors {
$color: nth($pair, 1);
$color: list.nth($pair, 1);
&.#{iv.$class-prefix}is-#{$name} {
@include cv.register-vars(

View file

@ -84,6 +84,7 @@ $select-colors: shared.$form-colors !default;
"input-focus-s": #{cv.getVar($name, "", "-s")},
"input-focus-l": #{cv.getVar($name, "", "-l")},
"input-border-l": #{cv.getVar($name, "", "-l")},
"arrow-color": #{cv.getVar($name)},
)
);
}

View file

@ -9,8 +9,15 @@ $form-colors: dv.$colors !default;
$input-h: #{cv.getVar("scheme-h")} !default;
$input-s: #{cv.getVar("scheme-s")} !default;
$input-l: #{cv.getVar("scheme-main-l")} !default;
$input-border-style: solid !default;
$input-border-width: cv.getVar("control-border-width") !default;
$input-border-l: cv.getVar("border-l") !default;
$input-border-l-delta: 0% !default;
$input-border-color: hsl(
cv.getVar("input-h"),
cv.getVar("input-s"),
calc(#{cv.getVar("input-border-l")} + #{cv.getVar("input-border-l-delta")})
) !default;
$input-hover-border-l-delta: #{cv.getVar("hover-border-l-delta")} !default;
$input-active-border-l-delta: #{cv.getVar("active-border-l-delta")} !default;
$input-color-l: cv.getVar("text-strong-l") !default;
@ -58,14 +65,17 @@ $input-radius: cv.getVar("radius") !default;
.#{iv.$class-prefix}control,
.#{iv.$class-prefix}input,
.#{iv.$class-prefix}textarea,
.#{iv.$class-prefix}select select {
.#{iv.$class-prefix}select {
@include cv.register-vars(
(
"input-h": #{$input-h},
"input-s": #{$input-s},
"input-l": #{$input-l},
"input-border-style": #{$input-border-style},
"input-border-width": #{$input-border-width},
"input-border-l": #{$input-border-l},
"input-border-l-delta": #{$input-border-l-delta},
"input-border-color": #{$input-border-color},
"input-hover-border-l-delta": #{$input-hover-border-l-delta},
"input-active-border-l-delta": #{$input-active-border-l-delta},
"input-focus-h": #{$input-focus-h},
@ -103,11 +113,7 @@ $input-radius: cv.getVar("radius") !default;
)}
)
);
border-color: hsl(
cv.getVar("input-h"),
cv.getVar("input-s"),
calc(#{cv.getVar("input-border-l")} + #{cv.getVar("input-border-l-delta")})
);
border-color: cv.getVar("input-border-color");
border-radius: cv.getVar("input-radius");
color: hsl(
#{cv.getVar("input-h")},

View file

@ -6,20 +6,35 @@
@use "../utilities/mixins" as mx;
$label-color: cv.getVar("text-strong") !default;
$label-spacing: 0.5em !default;
$label-weight: cv.getVar("weight-semibold") !default;
$help-size: cv.getVar("size-small") !default;
$label-colors: shared.$form-colors !default;
$field-block-spacing: 0.75rem !default;
:root {
@include cv.register-vars(
(
"label-color": #{$label-color},
"label-spacing": #{$label-spacing},
"label-weight": #{$label-weight},
"help-size": #{$help-size},
"field-block-spacing": #{$field-block-spacing},
)
);
}
.#{iv.$class-prefix}label {
color: $label-color;
color: cv.getVar("label-color");
display: block;
font-size: cv.getVar("size-normal");
font-weight: $label-weight;
&:not(:last-child) {
margin-bottom: 0.5em;
margin-bottom: cv.getVar("label-spacing");
}
// Sizes
@ -38,7 +53,7 @@ $label-colors: shared.$form-colors !default;
.#{iv.$class-prefix}help {
display: block;
font-size: $help-size;
font-size: cv.getVar("help-size");
margin-top: 0.25rem;
@each $name, $pair in $label-colors {
@ -57,7 +72,7 @@ $label-colors: shared.$form-colors !default;
.#{iv.$class-prefix}field {
@include cv.register-vars(
(
"block-spacing": 0.75rem,
"block-spacing": #{cv.getVar("field-block-spacing")},
)
);
@ -85,10 +100,8 @@ $label-colors: shared.$form-colors !default;
.#{iv.$class-prefix}button,
.#{iv.$class-prefix}input,
.#{iv.$class-prefix}select select {
// @include ltr {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
// }
border-start-end-radius: 0;
border-end-end-radius: 0;
}
}
@ -96,10 +109,8 @@ $label-colors: shared.$form-colors !default;
.#{iv.$class-prefix}button,
.#{iv.$class-prefix}input,
.#{iv.$class-prefix}select select {
// @include ltr {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
// }
border-start-start-radius: 0;
border-end-start-radius: 0;
}
}

View file

@ -1,957 +0,0 @@
@use "sass:math";
@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;
$column-gap: 1.5rem !default;
:root {
@include cv.register-vars(
(
"column-gap": #{$column-gap},
)
);
}
.#{iv.$class-prefix}column {
display: block;
flex-basis: 0;
flex-grow: 1;
flex-shrink: 1;
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
> &.#{iv.$class-prefix}is-narrow {
flex: none;
width: unset;
}
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
> &.#{iv.$class-prefix}is-full {
flex: none;
width: 100%;
}
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
> &.#{iv.$class-prefix}is-three-quarters {
flex: none;
width: calc(75% - calc(#{cv.getVar("column-gap")} / 2));
}
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
> &.#{iv.$class-prefix}is-two-thirds {
flex: none;
width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2));
}
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
> &.#{iv.$class-prefix}is-half {
flex: none;
width: calc(50% - calc(#{cv.getVar("column-gap")} / 2));
}
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
> &.#{iv.$class-prefix}is-one-third {
flex: none;
width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2));
}
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
> &.#{iv.$class-prefix}is-one-quarter {
flex: none;
width: calc(25% - calc(#{cv.getVar("column-gap")} / 2));
}
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
> &.#{iv.$class-prefix}is-one-fifth {
flex: none;
width: calc(20% - calc(#{cv.getVar("column-gap")} / 2));
}
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
> &.#{iv.$class-prefix}is-two-fifths {
flex: none;
width: calc(40% - calc(#{cv.getVar("column-gap")} / 2));
}
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
> &.#{iv.$class-prefix}is-three-fifths {
flex: none;
width: calc(60% - calc(#{cv.getVar("column-gap")} / 2));
}
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
> &.#{iv.$class-prefix}is-four-fifths {
flex: none;
width: calc(80% - calc(#{cv.getVar("column-gap")} / 2));
}
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
> &.#{iv.$class-prefix}is-offset-three-quarters {
margin-inline-start: 75%;
}
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
> &.#{iv.$class-prefix}is-offset-two-thirds {
margin-inline-start: 66.6666%;
}
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
> &.#{iv.$class-prefix}is-offset-half {
margin-inline-start: 50%;
}
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
> &.#{iv.$class-prefix}is-offset-one-third {
margin-inline-start: 33.3333%;
}
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
> &.#{iv.$class-prefix}is-offset-one-quarter {
margin-inline-start: 25%;
}
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
> &.#{iv.$class-prefix}is-offset-one-fifth {
margin-inline-start: 20%;
}
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
> &.#{iv.$class-prefix}is-offset-two-fifths {
margin-inline-start: 40%;
}
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
> &.#{iv.$class-prefix}is-offset-three-fifths {
margin-inline-start: 60%;
}
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
> &.#{iv.$class-prefix}is-offset-four-fifths {
margin-inline-start: 80%;
}
@for $i from 0 through 12 {
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
> &.#{iv.$class-prefix}is-#{$i} {
flex: none;
width: calc(
math.percentage(math.div($i, 12)) - calc(#{cv.getVar("column-gap")} / 2)
);
}
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
> &.#{iv.$class-prefix}is-offset-#{$i} {
margin-inline-start: math.percentage(math.div($i, 12));
}
}
@include mx.mobile {
&.#{iv.$class-prefix}is-narrow-mobile {
flex: none;
width: unset;
}
&.#{iv.$class-prefix}is-full-mobile {
flex: none;
width: 100%;
}
&.#{iv.$class-prefix}is-three-quarters-mobile {
flex: none;
width: calc(75% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-two-thirds-mobile {
flex: none;
width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-half-mobile {
flex: none;
width: calc(50% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-one-third-mobile {
flex: none;
width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-one-quarter-mobile {
flex: none;
width: calc(25% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-one-fifth-mobile {
flex: none;
width: calc(20% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-two-fifths-mobile {
flex: none;
width: calc(40% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-three-fifths-mobile {
flex: none;
width: calc(60% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-four-fifths-mobile {
flex: none;
width: calc(80% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-offset-three-quarters-mobile {
margin-inline-start: 75%;
}
&.#{iv.$class-prefix}is-offset-two-thirds-mobile {
margin-inline-start: 66.6666%;
}
&.#{iv.$class-prefix}is-offset-half-mobile {
margin-inline-start: 50%;
}
&.#{iv.$class-prefix}is-offset-one-third-mobile {
margin-inline-start: 33.3333%;
}
&.#{iv.$class-prefix}is-offset-one-quarter-mobile {
margin-inline-start: 25%;
}
&.#{iv.$class-prefix}is-offset-one-fifth-mobile {
margin-inline-start: 20%;
}
&.#{iv.$class-prefix}is-offset-two-fifths-mobile {
margin-inline-start: 40%;
}
&.#{iv.$class-prefix}is-offset-three-fifths-mobile {
margin-inline-start: 60%;
}
&.#{iv.$class-prefix}is-offset-four-fifths-mobile {
margin-inline-start: 80%;
}
@for $i from 0 through 12 {
&.#{iv.$class-prefix}is-#{$i}-mobile {
flex: none;
width: calc(
math.percentage(math.div($i, 12)) - calc(
#{cv.getVar("column-gap")} / 2
)
);
}
&.#{iv.$class-prefix}is-offset-#{$i}-mobile {
margin-inline-start: math.percentage(math.div($i, 12));
}
}
}
@include mx.tablet {
&.#{iv.$class-prefix}is-narrow,
&.#{iv.$class-prefix}is-narrow-tablet {
flex: none;
width: unset;
}
&.#{iv.$class-prefix}is-full,
&.#{iv.$class-prefix}is-full-tablet {
flex: none;
width: 100%;
}
&.#{iv.$class-prefix}is-three-quarters,
&.#{iv.$class-prefix}is-three-quarters-tablet {
flex: none;
width: calc(75% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-two-thirds,
&.#{iv.$class-prefix}is-two-thirds-tablet {
flex: none;
width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-half,
&.#{iv.$class-prefix}is-half-tablet {
flex: none;
width: calc(50% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-one-third,
&.#{iv.$class-prefix}is-one-third-tablet {
flex: none;
width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-one-quarter,
&.#{iv.$class-prefix}is-one-quarter-tablet {
flex: none;
width: calc(25% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-one-fifth,
&.#{iv.$class-prefix}is-one-fifth-tablet {
flex: none;
width: calc(20% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-two-fifths,
&.#{iv.$class-prefix}is-two-fifths-tablet {
flex: none;
width: calc(40% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-three-fifths,
&.#{iv.$class-prefix}is-three-fifths-tablet {
flex: none;
width: calc(60% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-four-fifths,
&.#{iv.$class-prefix}is-four-fifths-tablet {
flex: none;
width: calc(80% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-offset-three-quarters,
&.#{iv.$class-prefix}is-offset-three-quarters-tablet {
margin-inline-start: 75%;
}
&.#{iv.$class-prefix}is-offset-two-thirds,
&.#{iv.$class-prefix}is-offset-two-thirds-tablet {
margin-inline-start: 66.6666%;
}
&.#{iv.$class-prefix}is-offset-half,
&.#{iv.$class-prefix}is-offset-half-tablet {
margin-inline-start: 50%;
}
&.#{iv.$class-prefix}is-offset-one-third,
&.#{iv.$class-prefix}is-offset-one-third-tablet {
margin-inline-start: 33.3333%;
}
&.#{iv.$class-prefix}is-offset-one-quarter,
&.#{iv.$class-prefix}is-offset-one-quarter-tablet {
margin-inline-start: 25%;
}
&.#{iv.$class-prefix}is-offset-one-fifth,
&.#{iv.$class-prefix}is-offset-one-fifth-tablet {
margin-inline-start: 20%;
}
&.#{iv.$class-prefix}is-offset-two-fifths,
&.#{iv.$class-prefix}is-offset-two-fifths-tablet {
margin-inline-start: 40%;
}
&.#{iv.$class-prefix}is-offset-three-fifths,
&.#{iv.$class-prefix}is-offset-three-fifths-tablet {
margin-inline-start: 60%;
}
&.#{iv.$class-prefix}is-offset-four-fifths,
&.#{iv.$class-prefix}is-offset-four-fifths-tablet {
margin-inline-start: 80%;
}
@for $i from 0 through 12 {
&.#{iv.$class-prefix}is-#{$i},
&.#{iv.$class-prefix}is-#{$i}-tablet {
flex: none;
width: calc(
math.percentage(math.div($i, 12)) - calc(
#{cv.getVar("column-gap")} / 2
)
);
}
&.#{iv.$class-prefix}is-offset-#{$i},
&.#{iv.$class-prefix}is-offset-#{$i}-tablet {
margin-inline-start: math.percentage(math.div($i, 12));
}
}
}
@include mx.touch {
&.#{iv.$class-prefix}is-narrow-touch {
flex: none;
width: unset;
}
&.#{iv.$class-prefix}is-full-touch {
flex: none;
width: 100%;
}
&.#{iv.$class-prefix}is-three-quarters-touch {
flex: none;
width: calc(75% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-two-thirds-touch {
flex: none;
width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-half-touch {
flex: none;
width: calc(50% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-one-third-touch {
flex: none;
width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-one-quarter-touch {
flex: none;
width: calc(25% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-one-fifth-touch {
flex: none;
width: calc(20% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-two-fifths-touch {
flex: none;
width: calc(40% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-three-fifths-touch {
flex: none;
width: calc(60% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-four-fifths-touch {
flex: none;
width: calc(80% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-offset-three-quarters-touch {
margin-inline-start: 75%;
}
&.#{iv.$class-prefix}is-offset-two-thirds-touch {
margin-inline-start: 66.6666%;
}
&.#{iv.$class-prefix}is-offset-half-touch {
margin-inline-start: 50%;
}
&.#{iv.$class-prefix}is-offset-one-third-touch {
margin-inline-start: 33.3333%;
}
&.#{iv.$class-prefix}is-offset-one-quarter-touch {
margin-inline-start: 25%;
}
&.#{iv.$class-prefix}is-offset-one-fifth-touch {
margin-inline-start: 20%;
}
&.#{iv.$class-prefix}is-offset-two-fifths-touch {
margin-inline-start: 40%;
}
&.#{iv.$class-prefix}is-offset-three-fifths-touch {
margin-inline-start: 60%;
}
&.#{iv.$class-prefix}is-offset-four-fifths-touch {
margin-inline-start: 80%;
}
@for $i from 0 through 12 {
&.#{iv.$class-prefix}is-#{$i}-touch {
flex: none;
width: math.percentage(math.div($i, 12));
}
&.#{iv.$class-prefix}is-offset-#{$i}-touch {
margin-inline-start: math.percentage(math.div($i, 12));
}
}
}
@include mx.desktop {
&.#{iv.$class-prefix}is-narrow-desktop {
flex: none;
width: unset;
}
&.#{iv.$class-prefix}is-full-desktop {
flex: none;
width: 100%;
}
&.#{iv.$class-prefix}is-three-quarters-desktop {
flex: none;
width: calc(75% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-two-thirds-desktop {
flex: none;
width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-half-desktop {
flex: none;
width: calc(50% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-one-third-desktop {
flex: none;
width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-one-quarter-desktop {
flex: none;
width: calc(25% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-one-fifth-desktop {
flex: none;
width: calc(20% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-two-fifths-desktop {
flex: none;
width: calc(40% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-three-fifths-desktop {
flex: none;
width: calc(60% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-four-fifths-desktop {
flex: none;
width: calc(80% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-offset-three-quarters-desktop {
margin-inline-start: 75%;
}
&.#{iv.$class-prefix}is-offset-two-thirds-desktop {
margin-inline-start: 66.6666%;
}
&.#{iv.$class-prefix}is-offset-half-desktop {
margin-inline-start: 50%;
}
&.#{iv.$class-prefix}is-offset-one-third-desktop {
margin-inline-start: 33.3333%;
}
&.#{iv.$class-prefix}is-offset-one-quarter-desktop {
margin-inline-start: 25%;
}
&.#{iv.$class-prefix}is-offset-one-fifth-desktop {
margin-inline-start: 20%;
}
&.#{iv.$class-prefix}is-offset-two-fifths-desktop {
margin-inline-start: 40%;
}
&.#{iv.$class-prefix}is-offset-three-fifths-desktop {
margin-inline-start: 60%;
}
&.#{iv.$class-prefix}is-offset-four-fifths-desktop {
margin-inline-start: 80%;
}
@for $i from 0 through 12 {
&.#{iv.$class-prefix}is-#{$i}-desktop {
flex: none;
width: calc(
math.percentage(math.div($i, 12)) - calc(
#{cv.getVar("column-gap")} / 2
)
);
}
&.#{iv.$class-prefix}is-offset-#{$i}-desktop {
margin-inline-start: math.percentage(math.div($i, 12));
}
}
}
@include mx.widescreen {
&.#{iv.$class-prefix}is-narrow-widescreen {
flex: none;
width: unset;
}
&.#{iv.$class-prefix}is-full-widescreen {
flex: none;
width: 100%;
}
&.#{iv.$class-prefix}is-three-quarters-widescreen {
flex: none;
width: calc(75% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-two-thirds-widescreen {
flex: none;
width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-half-widescreen {
flex: none;
width: calc(50% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-one-third-widescreen {
flex: none;
width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-one-quarter-widescreen {
flex: none;
width: calc(25% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-one-fifth-widescreen {
flex: none;
width: calc(20% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-two-fifths-widescreen {
flex: none;
width: calc(40% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-three-fifths-widescreen {
flex: none;
width: calc(60% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-four-fifths-widescreen {
flex: none;
width: calc(80% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-offset-three-quarters-widescreen {
margin-inline-start: 75%;
}
&.#{iv.$class-prefix}is-offset-two-thirds-widescreen {
margin-inline-start: 66.6666%;
}
&.#{iv.$class-prefix}is-offset-half-widescreen {
margin-inline-start: 50%;
}
&.#{iv.$class-prefix}is-offset-one-third-widescreen {
margin-inline-start: 33.3333%;
}
&.#{iv.$class-prefix}is-offset-one-quarter-widescreen {
margin-inline-start: 25%;
}
&.#{iv.$class-prefix}is-offset-one-fifth-widescreen {
margin-inline-start: 20%;
}
&.#{iv.$class-prefix}is-offset-two-fifths-widescreen {
margin-inline-start: 40%;
}
&.#{iv.$class-prefix}is-offset-three-fifths-widescreen {
margin-inline-start: 60%;
}
&.#{iv.$class-prefix}is-offset-four-fifths-widescreen {
margin-inline-start: 80%;
}
@for $i from 0 through 12 {
&.#{iv.$class-prefix}is-#{$i}-widescreen {
flex: none;
width: calc(
math.percentage(math.div($i, 12)) - calc(
#{cv.getVar("column-gap")} / 2
)
);
}
&.#{iv.$class-prefix}is-offset-#{$i}-widescreen {
margin-inline-start: math.percentage(math.div($i, 12));
}
}
}
@include mx.fullhd {
&.#{iv.$class-prefix}is-narrow-fullhd {
flex: none;
width: unset;
}
&.#{iv.$class-prefix}is-full-fullhd {
flex: none;
width: 100%;
}
&.#{iv.$class-prefix}is-three-quarters-fullhd {
flex: none;
width: calc(75% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-two-thirds-fullhd {
flex: none;
width: calc(66.6666% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-half-fullhd {
flex: none;
width: calc(50% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-one-third-fullhd {
flex: none;
width: calc(33.3333% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-one-quarter-fullhd {
flex: none;
width: calc(25% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-one-fifth-fullhd {
flex: none;
width: calc(20% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-two-fifths-fullhd {
flex: none;
width: calc(40% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-three-fifths-fullhd {
flex: none;
width: calc(60% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-four-fifths-fullhd {
flex: none;
width: calc(80% - calc(#{cv.getVar("column-gap")} / 2));
}
&.#{iv.$class-prefix}is-offset-three-quarters-fullhd {
margin-inline-start: 75%;
}
&.#{iv.$class-prefix}is-offset-two-thirds-fullhd {
margin-inline-start: 66.6666%;
}
&.#{iv.$class-prefix}is-offset-half-fullhd {
margin-inline-start: 50%;
}
&.#{iv.$class-prefix}is-offset-one-third-fullhd {
margin-inline-start: 33.3333%;
}
&.#{iv.$class-prefix}is-offset-one-quarter-fullhd {
margin-inline-start: 25%;
}
&.#{iv.$class-prefix}is-offset-one-fifth-fullhd {
margin-inline-start: 20%;
}
&.#{iv.$class-prefix}is-offset-two-fifths-fullhd {
margin-inline-start: 40%;
}
&.#{iv.$class-prefix}is-offset-three-fifths-fullhd {
margin-inline-start: 60%;
}
&.#{iv.$class-prefix}is-offset-four-fifths-fullhd {
margin-inline-start: 80%;
}
@for $i from 0 through 12 {
&.#{iv.$class-prefix}is-#{$i}-fullhd {
flex: none;
width: calc(
math.percentage(math.div($i, 12)) - calc(
#{cv.getVar("column-gap")} / 2
)
);
}
&.#{iv.$class-prefix}is-offset-#{$i}-fullhd {
margin-inline-start: math.percentage(math.div($i, 12));
}
}
}
}
.#{iv.$class-prefix}columns {
@extend %block;
gap: cv.getVar("column-gap");
// Modifiers
&.#{iv.$class-prefix}is-centered {
justify-content: center;
}
&.#{iv.$class-prefix}is-gapless {
gap: 0;
}
&.#{iv.$class-prefix}is-mobile {
display: flex;
}
&.#{iv.$class-prefix}is-multiline {
flex-wrap: wrap;
}
&.#{iv.$class-prefix}is-vcentered {
align-items: center;
}
// Responsiveness
@include mx.tablet {
&:not(.#{iv.$class-prefix}is-desktop) {
display: flex;
}
}
@include mx.desktop {
// Modifiers
&.#{iv.$class-prefix}is-desktop {
display: flex;
}
}
&.#{iv.$class-prefix}is-variable {
@for $i from 0 through 8 {
&.#{iv.$class-prefix}is-#{$i} {
@include cv.register-vars(
(
"column-gap": #{$i * 0.25rem},
)
);
}
@include mx.mobile {
&.#{iv.$class-prefix}is-#{$i}-mobile {
@include cv.register-vars(
(
"column-gap": #{$i * 0.25rem},
)
);
}
}
@include mx.tablet {
&.#{iv.$class-prefix}is-#{$i}-tablet {
@include cv.register-vars(
(
"column-gap": #{$i * 0.25rem},
)
);
}
}
@include mx.tablet-only {
&.#{iv.$class-prefix}is-#{$i}-tablet-only {
@include cv.register-vars(
(
"column-gap": #{$i * 0.25rem},
)
);
}
}
@include mx.touch {
&.#{iv.$class-prefix}is-#{$i}-touch {
@include cv.register-vars(
(
"column-gap": #{$i * 0.25rem},
)
);
}
}
@include mx.desktop {
&.#{iv.$class-prefix}is-#{$i}-desktop {
@include cv.register-vars(
(
"column-gap": #{$i * 0.25rem},
)
);
}
}
@include mx.desktop-only {
&.#{iv.$class-prefix}is-#{$i}-desktop-only {
@include cv.register-vars(
(
"column-gap": #{$i * 0.25rem},
)
);
}
}
@include mx.widescreen {
&.#{iv.$class-prefix}is-#{$i}-widescreen {
@include cv.register-vars(
(
"column-gap": #{$i * 0.25rem},
)
);
}
}
@include mx.widescreen-only {
&.#{iv.$class-prefix}is-#{$i}-widescreen-only {
@include cv.register-vars(
(
"column-gap": #{$i * 0.25rem},
)
);
}
}
@include mx.fullhd {
&.#{iv.$class-prefix}is-#{$i}-fullhd {
@include cv.register-vars(
(
"column-gap": #{$i * 0.25rem},
)
);
}
}
}
}
}

View file

@ -20,7 +20,7 @@ $column-gap: 0.75rem !default;
flex-basis: 0;
flex-grow: 1;
flex-shrink: 1;
padding: $column-gap;
padding: cv.getVar("column-gap");
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
> &.#{iv.$class-prefix}is-narrow {
@ -137,9 +137,7 @@ $column-gap: 0.75rem !default;
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
> &.#{iv.$class-prefix}is-#{$i} {
flex: none;
width: calc(
math.percentage(math.div($i, 12)) - calc(#{cv.getVar("column-gap")} / 2)
);
width: math.percentage(math.div($i, 12));
}
.#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
@ -243,11 +241,7 @@ $column-gap: 0.75rem !default;
@for $i from 0 through 12 {
&.#{iv.$class-prefix}is-#{$i}-mobile {
flex: none;
width: calc(
math.percentage(math.div($i, 12)) - calc(
#{cv.getVar("column-gap")} / 2
)
);
width: math.percentage(math.div($i, 12));
}
&.#{iv.$class-prefix}is-offset-#{$i}-mobile {
@ -372,11 +366,7 @@ $column-gap: 0.75rem !default;
&.#{iv.$class-prefix}is-#{$i},
&.#{iv.$class-prefix}is-#{$i}-tablet {
flex: none;
width: calc(
math.percentage(math.div($i, 12)) - calc(
#{cv.getVar("column-gap")} / 2
)
);
width: math.percentage(math.div($i, 12));
}
&.#{iv.$class-prefix}is-offset-#{$i},
@ -585,11 +575,7 @@ $column-gap: 0.75rem !default;
@for $i from 0 through 12 {
&.#{iv.$class-prefix}is-#{$i}-desktop {
flex: none;
width: calc(
math.percentage(math.div($i, 12)) - calc(
#{cv.getVar("column-gap")} / 2
)
);
width: math.percentage(math.div($i, 12));
}
&.#{iv.$class-prefix}is-offset-#{$i}-desktop {
@ -693,11 +679,7 @@ $column-gap: 0.75rem !default;
@for $i from 0 through 12 {
&.#{iv.$class-prefix}is-#{$i}-widescreen {
flex: none;
width: calc(
math.percentage(math.div($i, 12)) - calc(
#{cv.getVar("column-gap")} / 2
)
);
width: math.percentage(math.div($i, 12));
}
&.#{iv.$class-prefix}is-offset-#{$i}-widescreen {
@ -821,7 +803,9 @@ $column-gap: 0.75rem !default;
}
&:not(:last-child) {
margin-bottom: calc(1.5rem - #{$column-gap});
margin-bottom: calc(
#{cv.getVar("block-spacing")} - #{cv.getVar("column-gap")}
);
}
// Modifiers
@ -874,4 +858,104 @@ $column-gap: 0.75rem !default;
display: flex;
}
}
@for $i from 0 through 8 {
&.#{iv.$class-prefix}is-#{$i} {
@include cv.register-vars(
(
"column-gap": #{$i * 0.25rem},
)
);
}
@include mx.mobile {
&.#{iv.$class-prefix}is-#{$i}-mobile {
@include cv.register-vars(
(
"column-gap": #{$i * 0.25rem},
)
);
}
}
@include mx.tablet {
&.#{iv.$class-prefix}is-#{$i}-tablet {
@include cv.register-vars(
(
"column-gap": #{$i * 0.25rem},
)
);
}
}
@include mx.tablet-only {
&.#{iv.$class-prefix}is-#{$i}-tablet-only {
@include cv.register-vars(
(
"column-gap": #{$i * 0.25rem},
)
);
}
}
@include mx.touch {
&.#{iv.$class-prefix}is-#{$i}-touch {
@include cv.register-vars(
(
"column-gap": #{$i * 0.25rem},
)
);
}
}
@include mx.desktop {
&.#{iv.$class-prefix}is-#{$i}-desktop {
@include cv.register-vars(
(
"column-gap": #{$i * 0.25rem},
)
);
}
}
@include mx.desktop-only {
&.#{iv.$class-prefix}is-#{$i}-desktop-only {
@include cv.register-vars(
(
"column-gap": #{$i * 0.25rem},
)
);
}
}
@include mx.widescreen {
&.#{iv.$class-prefix}is-#{$i}-widescreen {
@include cv.register-vars(
(
"column-gap": #{$i * 0.25rem},
)
);
}
}
@include mx.widescreen-only {
&.#{iv.$class-prefix}is-#{$i}-widescreen-only {
@include cv.register-vars(
(
"column-gap": #{$i * 0.25rem},
)
);
}
}
@include mx.fullhd {
&.#{iv.$class-prefix}is-#{$i}-fullhd {
@include cv.register-vars(
(
"column-gap": #{$i * 0.25rem},
)
);
}
}
}
}

View file

@ -10,7 +10,7 @@ $column-min-base: 1.5rem;
@mixin fixed-grid-properties($suffix: "") {
@for $i from 1 through $max-column-count {
&.#{iv.$class-prefix}has-#{$i}-cols#{$suffix} {
.#{iv.$class-prefix}grid {
> .#{iv.$class-prefix}grid {
@include cv.register-var("grid-column-count", #{$i});
}
}
@ -24,7 +24,7 @@ $grid-container-name: bulma-fixed-grid;
container-name: $grid-container-name;
container-type: inline-size;
.#{iv.$class-prefix}grid {
> .#{iv.$class-prefix}grid {
@include cv.register-vars(
(
"grid-gap-count": calc(#{cv.getVar("grid-column-count")} - 1),
@ -110,7 +110,7 @@ $grid-container-name: bulma-fixed-grid;
);
}
@for $i from 1 through 12 {
@for $i from 1 through 32 {
&.#{iv.$class-prefix}is-col-min-#{$i} {
@include cv.register-vars(
(

View file

@ -1,10 +1,12 @@
@use "sass:list";
@use "../utilities/initial-variables" as iv;
@each $pair in iv.$aspect-ratios {
$w: nth($pair, 1);
$h: nth($pair, 2);
$w: list.nth($pair, 1);
$h: list.nth($pair, 2);
.#{iv.$helpers-prefix}aspect-ratio-#{$w}by#{$h} {
.#{iv.$class-prefix}#{iv.$helpers-prefix}aspect-ratio-#{$w}by#{$h} {
aspect-ratio: #{$w} / #{$h};
}
}

View file

@ -9,7 +9,7 @@ $radii: (
);
@each $name, $var in $radii {
.#{iv.$helpers-has-prefix}radius-#{$name} {
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}radius-#{$name} {
border-radius: cv.getVar($var);
}
}

View file

@ -26,7 +26,7 @@ $digits: (
"100"
);
.#{iv.$helpers-has-prefix}background {
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background {
background-color: cv.getVar("background");
}
@ -34,311 +34,277 @@ $digits: (
$background: hsl(
#{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")},
calc(#{cv.getVar("background-l")} + #{cv.getVar("background-l-delta")})
#{cv.getVar($name, "", "-l")}
);
$color: hsl(
#{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")},
calc(#{cv.getVar("color-l")} + #{cv.getVar("color-l-delta")})
#{cv.getVar($name, "", "-l")}
);
[class*="#{iv.$helpers-prefix}color-#{$name}"],
[class*="#{iv.$helpers-has-prefix}text-#{$name}"] {
@include cv.register-vars(
(
"color-l": #{cv.getVar($name, "", "-l")},
"color-l-delta": 0%,
)
);
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name} {
color: $color !important;
}
[class*="#{iv.$helpers-prefix}background-#{$name}"],
[class*="#{iv.$helpers-has-prefix}background-#{$name}"] {
@include cv.register-vars(
(
"background-l": #{cv.getVar($name, "", "-l")},
"background-l-delta": 0%,
)
);
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name} {
background-color: $background !important;
}
// Invert
.#{iv.$helpers-prefix}color-#{$name}-invert,
.#{iv.$helpers-has-prefix}text-#{$name}-invert {
@include cv.register-vars(
(
"color-l": #{cv.getVar($name, "", "-invert-l")},
)
);
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-invert {
color: hsl(
#{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")},
#{cv.getVar($name, "", "-invert-l")}
) !important;
}
.#{iv.$helpers-prefix}background-#{$name}-invert,
.#{iv.$helpers-has-prefix}background-#{$name}-invert {
@include cv.register-vars(
(
"background-l": #{cv.getVar($name, "", "-invert-l")},
)
);
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-invert {
background-color: hsl(
#{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")},
#{cv.getVar($name, "", "-invert-l")}
) !important;
}
// On Scheme
.#{iv.$helpers-prefix}color-#{$name}-on-scheme,
.#{iv.$helpers-has-prefix}text-#{$name}-on-scheme {
@include cv.register-vars(
(
"color-l": #{cv.getVar($name, "", "-on-scheme-l")},
)
);
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-on-scheme {
color: hsl(
#{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")},
#{cv.getVar($name, "", "-on-scheme-l")}
) !important;
}
.#{iv.$helpers-prefix}background-#{$name}-on-scheme,
.#{iv.$helpers-has-prefix}background-#{$name}-on-scheme {
@include cv.register-vars(
(
"background-l": #{cv.getVar($name, "", "-on-scheme-l")},
)
);
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-on-scheme {
background-color: hsl(
#{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")},
#{cv.getVar($name, "", "-on-scheme-l")}
) !important;
}
// Light
.#{iv.$helpers-prefix}color-#{$name}-light,
.#{iv.$helpers-has-prefix}text-#{$name}-light {
@include cv.register-vars(
(
"color-l": #{cv.getVar($name, "", "-light-l")},
)
);
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-light {
color: hsl(
#{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")},
#{cv.getVar($name, "", "-light-l")}
) !important;
}
.#{iv.$helpers-prefix}background-#{$name}-light,
.#{iv.$helpers-has-prefix}background-#{$name}-light {
@include cv.register-vars(
(
"background-l": #{cv.getVar($name, "", "-light-l")},
)
);
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-light {
background-color: hsl(
#{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")},
#{cv.getVar($name, "", "-light-l")}
) !important;
}
.#{iv.$helpers-prefix}color-#{$name}-light-invert,
.#{iv.$helpers-has-prefix}text-#{$name}-light-invert {
@include cv.register-vars(
(
"color-l": #{cv.getVar($name, "", "-light-invert-l")},
)
);
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-light-invert {
color: hsl(
#{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")},
#{cv.getVar($name, "", "-light-invert-l")}
) !important;
}
.#{iv.$helpers-prefix}background-#{$name}-light-invert,
.#{iv.$helpers-has-prefix}background-#{$name}-light-invert {
@include cv.register-vars(
(
"background-l": #{cv.getVar($name, "", "-light-invert-l")},
)
);
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-light-invert {
background-color: hsl(
#{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")},
#{cv.getVar($name, "", "-light-invert-l")}
) !important;
}
// Dark
.#{iv.$helpers-prefix}color-#{$name}-dark,
.#{iv.$helpers-has-prefix}text-#{$name}-dark {
@include cv.register-vars(
(
"color-l": #{cv.getVar($name, "", "-dark-l")},
)
);
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-dark {
color: hsl(
#{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")},
#{cv.getVar($name, "", "-dark-l")}
) !important;
}
.#{iv.$helpers-prefix}background-#{$name}-dark,
.#{iv.$helpers-has-prefix}background-#{$name}-dark {
@include cv.register-vars(
(
"background-l": #{cv.getVar($name, "", "-dark-l")},
)
);
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-dark {
background-color: hsl(
#{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")},
#{cv.getVar($name, "", "-dark-l")}
) !important;
}
.#{iv.$helpers-prefix}color-#{$name}-dark-invert,
.#{iv.$helpers-has-prefix}text-#{$name}-dark-invert {
@include cv.register-vars(
(
"color-l": #{cv.getVar($name, "", "-dark-invert-l")},
)
);
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-dark-invert {
color: hsl(
#{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")},
#{cv.getVar($name, "", "-dark-invert-l")}
) !important;
}
.#{iv.$helpers-prefix}background-#{$name}-dark-invert,
.#{iv.$helpers-has-prefix}background-#{$name}-dark-invert {
@include cv.register-vars(
(
"background-l": #{cv.getVar($name, "", "-dark-invert-l")},
)
);
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-dark-invert {
background-color: hsl(
#{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")},
#{cv.getVar($name, "", "-dark-invert-l")}
) !important;
}
// Soft/Bold
.#{iv.$helpers-prefix}color-#{$name}-soft,
.#{iv.$helpers-has-prefix}text-#{$name}-soft {
@include cv.register-vars(
(
"color-l": #{cv.getVar("soft-l")},
)
);
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-soft {
color: hsl(
#{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")},
#{cv.getVar("soft-l")}
) !important;
}
.#{iv.$helpers-prefix}background-#{$name}-soft,
.#{iv.$helpers-has-prefix}background-#{$name}-soft {
@include cv.register-vars(
(
"background-l": #{cv.getVar("soft-l")},
)
);
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-soft {
background-color: hsl(
#{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")},
#{cv.getVar("soft-l")}
) !important;
}
.#{iv.$helpers-prefix}color-#{$name}-bold,
.#{iv.$helpers-has-prefix}text-#{$name}-bold {
@include cv.register-vars(
(
"color-l": #{cv.getVar("bold-l")},
)
);
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-bold {
color: hsl(
#{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")},
#{cv.getVar("bold-l")}
) !important;
}
.#{iv.$helpers-prefix}background-#{$name}-bold,
.#{iv.$helpers-has-prefix}background-#{$name}-bold {
@include cv.register-vars(
(
"background-l": #{cv.getVar("bold-l")},
)
);
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-bold {
background-color: hsl(
#{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")},
#{cv.getVar("bold-l")}
) !important;
}
.#{iv.$helpers-prefix}color-#{$name}-soft-invert,
.#{iv.$helpers-has-prefix}text-#{$name}-soft-invert {
@include cv.register-vars(
(
"color-l": #{cv.getVar("soft-invert-l")},
)
);
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-soft-invert {
color: hsl(
#{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")},
#{cv.getVar("soft-invert-l")}
) !important;
}
.#{iv.$helpers-prefix}background-#{$name}-soft-invert,
.#{iv.$helpers-has-prefix}background-#{$name}-soft-invert {
@include cv.register-vars(
(
"background-l": #{cv.getVar("soft-invert-l")},
)
);
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-soft-invert {
background-color: hsl(
#{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")},
#{cv.getVar("soft-invert-l")}
) !important;
}
.#{iv.$helpers-prefix}color-#{$name}-bold-invert,
.#{iv.$helpers-has-prefix}text-#{$name}-bold-invert {
@include cv.register-vars(
(
"color-l": #{cv.getVar("bold-invert-l")},
)
);
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-bold-invert {
color: hsl(
#{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")},
#{cv.getVar("bold-invert-l")}
) !important;
}
.#{iv.$helpers-prefix}background-#{$name}-bold-invert,
.#{iv.$helpers-has-prefix}background-#{$name}-bold-invert {
@include cv.register-vars(
(
"background-l": #{cv.getVar("bold-invert-l")},
)
);
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-bold-invert {
background-color: hsl(
#{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")},
#{cv.getVar("bold-invert-l")}
) !important;
}
@each $digit in $digits {
.#{iv.$helpers-prefix}color-#{$name}-#{$digit},
.#{iv.$helpers-has-prefix}text-#{$name}-#{$digit} {
@include cv.register-vars(
(
"color-l": #{cv.getVar($name, "", "-#{$digit}-l")},
)
);
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-#{$digit} {
color: hsl(
#{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")},
#{cv.getVar($name, "", "-#{$digit}-l")}
) !important;
}
.#{iv.$helpers-prefix}background-#{$name}-#{$digit},
.#{iv.$helpers-has-prefix}background-#{$name}-#{$digit} {
@include cv.register-vars(
(
"background-l": #{cv.getVar($name, "", "-#{$digit}-l")},
)
);
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-#{$digit} {
background-color: hsl(
#{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")},
#{cv.getVar($name, "", "-#{$digit}-l")}
) !important;
}
.#{iv.$helpers-prefix}color-#{$name}-#{$digit}-invert,
.#{iv.$helpers-has-prefix}text-#{$name}-#{$digit}-invert {
@include cv.register-vars(
(
"color-l": #{cv.getVar($name, "", "-#{$digit}-invert-l")},
)
);
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}-#{$digit}-invert {
color: hsl(
#{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")},
#{cv.getVar($name, "", "-#{$digit}-invert-l")}
) !important;
}
.#{iv.$helpers-prefix}background-#{$name}-#{$digit}-invert,
.#{iv.$helpers-has-prefix}background-#{$name}-#{$digit}-invert {
@include cv.register-vars(
(
"background-l": #{cv.getVar($name, "", "-#{$digit}-invert-l")},
)
);
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}-#{$digit}-invert {
background-color: hsl(
#{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")},
#{cv.getVar($name, "", "-#{$digit}-invert-l")}
) !important;
}
}
// Hover
a.#{iv.$helpers-prefix}color-#{$name},
button.#{iv.$helpers-prefix}color-#{$name},
#{iv.$helpers-prefix}color-#{$name}.is-hoverable,
a.#{iv.$helpers-has-prefix}text-#{$name},
button.#{iv.$helpers-has-prefix}text-#{$name},
#{iv.$helpers-has-prefix}text-#{$name}.is-hoverable {
a.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name},
button.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name},
#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name}.is-hoverable {
&:hover,
&:focus-visible {
@include cv.register-vars(
(
"color-l-delta": #{cv.getVar("hover-color-l-delta")},
color: hsl(
#{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")},
calc(
#{cv.getVar($name, "", "-l")} + #{cv.getVar("hover-color-l-delta")}
)
);
) !important;
}
&:active {
@include cv.register-vars(
(
"color-l-delta": #{cv.getVar("active-color-l-delta")},
color: hsl(
#{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")},
calc(
#{cv.getVar($name, "", "-l")} + #{cv.getVar("active-color-l-delta")}
)
);
) !important;
}
}
a.#{iv.$helpers-prefix}background-#{$name},
button.#{iv.$helpers-prefix}background-#{$name},
#{iv.$helpers-prefix}background-#{$name}.is-hoverable,
a.#{iv.$helpers-has-prefix}background-#{$name},
button.#{iv.$helpers-has-prefix}background-#{$name},
#{iv.$helpers-has-prefix}background-#{$name}.is-hoverable {
a.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name},
button.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name},
#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name}.is-hoverable {
&:hover,
&:focus-visible {
@include cv.register-vars(
(
"background-l-delta": #{cv.getVar("hover-background-l-delta")},
background-color: hsl(
#{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")},
calc(
#{cv.getVar($name, "", "-l")} +
#{cv.getVar("hover-background-l-delta")}
)
);
) !important;
}
&:active {
@include cv.register-vars(
(
"background-l-delta": #{cv.getVar("active-background-l-delta")},
background-color: hsl(
#{cv.getVar($name, "", "-h")},
#{cv.getVar($name, "", "-s")},
calc(
#{cv.getVar($name, "", "-l")} +
#{cv.getVar("active-background-l-delta")}
)
);
) !important;
}
}
// Palettes
.#{iv.$helpers-prefix}palette-#{$name} {
.#{iv.$class-prefix}#{iv.$helpers-prefix}palette-#{$name} {
--h: #{cv.getVar($name, "", "-h")};
--s: #{cv.getVar($name, "", "-s")};
--l: #{cv.getVar($name, "", "-l")};
@ -352,13 +318,27 @@ $digits: (
}
@each $name, $shade in dv.$shades {
.#{iv.$helpers-prefix}color-#{$name},
.#{iv.$helpers-has-prefix}text-#{$name} {
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$name} {
color: $shade !important;
}
.#{iv.$helpers-prefix}background-#{$name},
.#{iv.$helpers-has-prefix}background-#{$name} {
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-#{$name} {
background-color: $shade !important;
}
}
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-current {
color: currentColor !important;
}
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-inherit {
color: inherit !important;
}
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-current {
background-color: currentColor !important;
}
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}background-inherit {
background-color: inherit !important;
}

View file

@ -3,7 +3,7 @@
$flex-direction-values: row, row-reverse, column, column-reverse;
@each $value in $flex-direction-values {
.#{iv.$helpers-prefix}flex-direction-#{$value} {
.#{iv.$class-prefix}#{iv.$helpers-prefix}flex-direction-#{$value} {
flex-direction: $value !important;
}
}
@ -11,7 +11,7 @@ $flex-direction-values: row, row-reverse, column, column-reverse;
$flex-wrap-values: nowrap, wrap, wrap-reverse;
@each $value in $flex-wrap-values {
.#{iv.$helpers-prefix}flex-wrap-#{$value} {
.#{iv.$class-prefix}#{iv.$helpers-prefix}flex-wrap-#{$value} {
flex-wrap: $value !important;
}
}
@ -20,7 +20,7 @@ $justify-content-values: flex-start, flex-end, center, space-between,
space-around, space-evenly, start, end, left, right;
@each $value in $justify-content-values {
.#{iv.$helpers-prefix}justify-content-#{$value} {
.#{iv.$class-prefix}#{iv.$helpers-prefix}justify-content-#{$value} {
justify-content: $value !important;
}
}
@ -29,7 +29,7 @@ $align-content-values: flex-start, flex-end, center, space-between, space-around
space-evenly, stretch, start, end, baseline;
@each $value in $align-content-values {
.#{iv.$helpers-prefix}align-content-#{$value} {
.#{iv.$class-prefix}#{iv.$helpers-prefix}align-content-#{$value} {
align-content: $value !important;
}
}
@ -38,7 +38,7 @@ $align-items-values: stretch, flex-start, flex-end, center, baseline, start, end
self-start, self-end;
@each $value in $align-items-values {
.#{iv.$helpers-prefix}align-items-#{$value} {
.#{iv.$class-prefix}#{iv.$helpers-prefix}align-items-#{$value} {
align-items: $value !important;
}
}
@ -46,7 +46,7 @@ $align-items-values: stretch, flex-start, flex-end, center, baseline, start, end
$align-self-values: auto, flex-start, flex-end, center, baseline, stretch;
@each $value in $align-self-values {
.#{iv.$helpers-prefix}align-self-#{$value} {
.#{iv.$class-prefix}#{iv.$helpers-prefix}align-self-#{$value} {
align-self: $value !important;
}
}
@ -55,7 +55,7 @@ $flex-operators: grow, shrink;
@each $operator in $flex-operators {
@for $i from 0 through 5 {
.#{iv.$helpers-prefix}flex-#{$operator}-#{$i} {
.#{iv.$class-prefix}#{iv.$helpers-prefix}flex-#{$operator}-#{$i} {
flex-#{$operator}: $i !important;
}
}

View file

@ -1,28 +1,28 @@
@use "../utilities/initial-variables" as iv;
@use "../utilities/mixins" as mx;
.#{iv.$helpers-prefix}clearfix {
.#{iv.$class-prefix}#{iv.$helpers-prefix}clearfix {
@include mx.clearfix;
}
.#{iv.$helpers-prefix}float-left,
.#{iv.$helpers-prefix}pulled-left {
.#{iv.$class-prefix}#{iv.$helpers-prefix}float-left,
.#{iv.$class-prefix}#{iv.$helpers-prefix}pulled-left {
float: left !important;
}
.#{iv.$helpers-prefix}float-right,
.#{iv.$helpers-prefix}pulled-right {
.#{iv.$class-prefix}#{iv.$helpers-prefix}float-right,
.#{iv.$class-prefix}#{iv.$helpers-prefix}pulled-right {
float: right !important;
}
.#{iv.$helpers-prefix}float-none {
.#{iv.$class-prefix}#{iv.$helpers-prefix}float-none {
float: none !important;
}
$clears: both left none right;
@each $clear in $clears {
.#{iv.$helpers-prefix}clear-#{$clear} {
.#{iv.$class-prefix}#{iv.$helpers-prefix}clear-#{$clear} {
clear: $clear !important;
}
}

View file

@ -2,7 +2,7 @@
@use "sass:string";
@use "../utilities/initial-variables" as iv;
.#{iv.$helpers-prefix}gapless {
.#{iv.$class-prefix}#{iv.$helpers-prefix}gapless {
gap: 0 !important;
}
@ -11,12 +11,12 @@ $gap-base: 0.5rem;
@each $gap in $gaps {
@for $i from 0 through 8 {
.#{iv.$helpers-prefix}#{$gap}-#{$i} {
.#{iv.$class-prefix}#{iv.$helpers-prefix}#{$gap}-#{$i} {
#{$gap}: ($gap-base * $i) !important;
}
@if $i < 8 {
.#{iv.$helpers-prefix}#{$gap}-#{$i}\.5 {
.#{iv.$class-prefix}#{iv.$helpers-prefix}#{$gap}-#{$i}\.5 {
#{$gap}: ($gap-base * $i + math.div($gap-base, 2)) !important;
}
}

View file

@ -1,19 +1,19 @@
@use "../utilities/extends";
@use "../utilities/initial-variables" as iv;
.#{iv.$helpers-prefix}radiusless {
.#{iv.$class-prefix}#{iv.$helpers-prefix}radiusless {
border-radius: 0 !important;
}
.#{iv.$helpers-prefix}shadowless {
.#{iv.$class-prefix}#{iv.$helpers-prefix}shadowless {
box-shadow: none !important;
}
.#{iv.$helpers-prefix}clickable {
.#{iv.$class-prefix}#{iv.$helpers-prefix}clickable {
cursor: pointer !important;
pointer-events: all !important;
}
.#{iv.$helpers-prefix}unselectable {
.#{iv.$class-prefix}#{iv.$helpers-prefix}unselectable {
@extend %unselectable;
}

View file

@ -1,21 +1,21 @@
@use "../utilities/initial-variables" as iv;
.#{iv.$helpers-prefix}clipped {
.#{iv.$class-prefix}#{iv.$helpers-prefix}clipped {
overflow: hidden !important;
}
$overflows: auto clip hidden scroll visible;
@each $overflow in $overflows {
.#{iv.$helpers-prefix}overflow-#{$overflow} {
.#{iv.$class-prefix}#{iv.$helpers-prefix}overflow-#{$overflow} {
overflow: $overflow !important;
}
.#{iv.$helpers-prefix}overflow-x-#{$overflow} {
.#{iv.$class-prefix}#{iv.$helpers-prefix}overflow-x-#{$overflow} {
overflow-x: $overflow !important;
}
.#{iv.$helpers-prefix}overflow-y-#{$overflow} {
.#{iv.$class-prefix}#{iv.$helpers-prefix}overflow-y-#{$overflow} {
overflow-y: $overflow !important;
}
}

View file

@ -1,19 +1,19 @@
@use "../utilities/extends";
@use "../utilities/initial-variables" as iv;
.#{iv.$helpers-prefix}overlay,
.#{iv.$helpers-prefix}overlay {
.#{iv.$class-prefix}#{iv.$helpers-prefix}overlay,
.#{iv.$class-prefix}#{iv.$helpers-prefix}overlay {
@extend %overlay;
}
.#{iv.$helpers-prefix}relative {
.#{iv.$class-prefix}#{iv.$helpers-prefix}relative {
position: relative !important;
}
$positions: absolute fixed relative static sticky;
@each $position in $positions {
.#{iv.$helpers-prefix}position-#{$position} {
.#{iv.$class-prefix}#{iv.$helpers-prefix}position-#{$position} {
position: $position !important;
}
}

View file

@ -1,10 +1,10 @@
@use "../utilities/initial-variables" as iv;
.marginless {
.#{iv.$class-prefix}marginless {
margin: 0 !important;
}
.paddingless {
.#{iv.$class-prefix}paddingless {
padding: 0 !important;
}
@ -34,20 +34,20 @@ $spacing-values: (
@each $property, $shortcut in $spacing-shortcuts {
@each $name, $value in $spacing-values {
// All directions
.#{$shortcut}-#{$name} {
.#{iv.$class-prefix}#{$shortcut}-#{$name} {
#{$property}: $value !important;
}
// Cardinal directions
@each $direction, $suffix in $spacing-directions {
.#{$shortcut}#{$suffix}-#{$name} {
.#{iv.$class-prefix}#{$shortcut}#{$suffix}-#{$name} {
#{$property}-#{$direction}: $value !important;
}
}
// Horizontal axis
@if $spacing-horizontal != null {
.#{$shortcut}#{$spacing-horizontal}-#{$name} {
.#{iv.$class-prefix}#{$shortcut}#{$spacing-horizontal}-#{$name} {
#{$property}-left: $value !important;
#{$property}-right: $value !important;
}
@ -55,7 +55,7 @@ $spacing-values: (
// Vertical axis
@if $spacing-vertical != null {
.#{$shortcut}#{$spacing-vertical}-#{$name} {
.#{iv.$class-prefix}#{$shortcut}#{$spacing-vertical}-#{$name} {
#{$property}-top: $value !important;
#{$property}-bottom: $value !important;
}

View file

@ -1,12 +1,14 @@
@use "sass:list";
@use "../utilities/derived-variables" as dv;
@use "../utilities/initial-variables" as iv;
@use "../utilities/mixins" as mx;
@mixin typography-size($target: "") {
@each $size in dv.$sizes {
$i: index(dv.$sizes, $size);
$i: list.index(dv.$sizes, $size);
.#{iv.$helpers-prefix}size-#{$i}#{if($target == "", "", "-" + $target)} {
.#{iv.$class-prefix}#{iv.$helpers-prefix}size-#{$i}#{if($target == "", "", "-" + $target)} {
font-size: $size !important;
}
}
@ -46,123 +48,123 @@ $alignments: (
);
@each $alignment, $text-align in $alignments {
.#{iv.$helpers-has-prefix}text-#{$alignment} {
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment} {
text-align: #{$text-align} !important;
}
}
@each $alignment, $text-align in $alignments {
@include mx.mobile {
.#{iv.$helpers-has-prefix}text-#{$alignment}-mobile {
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-mobile {
text-align: #{$text-align} !important;
}
}
@include mx.tablet {
.#{iv.$helpers-has-prefix}text-#{$alignment}-tablet {
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-tablet {
text-align: #{$text-align} !important;
}
}
@include mx.tablet-only {
.#{iv.$helpers-has-prefix}text-#{$alignment}-tablet-only {
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-tablet-only {
text-align: #{$text-align} !important;
}
}
@include mx.touch {
.#{iv.$helpers-has-prefix}text-#{$alignment}-touch {
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-touch {
text-align: #{$text-align} !important;
}
}
@include mx.desktop {
.#{iv.$helpers-has-prefix}text-#{$alignment}-desktop {
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-desktop {
text-align: #{$text-align} !important;
}
}
@include mx.desktop-only {
.#{iv.$helpers-has-prefix}text-#{$alignment}-desktop-only {
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-desktop-only {
text-align: #{$text-align} !important;
}
}
@include mx.widescreen {
.#{iv.$helpers-has-prefix}text-#{$alignment}-widescreen {
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-widescreen {
text-align: #{$text-align} !important;
}
}
@include mx.widescreen-only {
.#{iv.$helpers-has-prefix}text-#{$alignment}-widescreen-only {
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-widescreen-only {
text-align: #{$text-align} !important;
}
}
@include mx.fullhd {
.#{iv.$helpers-has-prefix}text-#{$alignment}-fullhd {
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-#{$alignment}-fullhd {
text-align: #{$text-align} !important;
}
}
}
.#{iv.$helpers-prefix}capitalized {
.#{iv.$class-prefix}#{iv.$helpers-prefix}capitalized {
text-transform: capitalize !important;
}
.#{iv.$helpers-prefix}lowercase {
.#{iv.$class-prefix}#{iv.$helpers-prefix}lowercase {
text-transform: lowercase !important;
}
.#{iv.$helpers-prefix}uppercase {
.#{iv.$class-prefix}#{iv.$helpers-prefix}uppercase {
text-transform: uppercase !important;
}
.#{iv.$helpers-prefix}italic {
.#{iv.$class-prefix}#{iv.$helpers-prefix}italic {
font-style: italic !important;
}
.#{iv.$helpers-prefix}underlined {
.#{iv.$class-prefix}#{iv.$helpers-prefix}underlined {
text-decoration: underline !important;
}
.#{iv.$helpers-has-prefix}text-weight-light {
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-weight-light {
font-weight: iv.$weight-light !important;
}
.#{iv.$helpers-has-prefix}text-weight-normal {
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-weight-normal {
font-weight: iv.$weight-normal !important;
}
.#{iv.$helpers-has-prefix}text-weight-medium {
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-weight-medium {
font-weight: iv.$weight-medium !important;
}
.#{iv.$helpers-has-prefix}text-weight-semibold {
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-weight-semibold {
font-weight: iv.$weight-semibold !important;
}
.#{iv.$helpers-has-prefix}text-weight-bold {
.#{iv.$class-prefix}#{iv.$helpers-has-prefix}text-weight-bold {
font-weight: iv.$weight-bold !important;
}
.#{iv.$helpers-prefix}family-primary {
.#{iv.$class-prefix}#{iv.$helpers-prefix}family-primary {
font-family: dv.$family-primary !important;
}
.#{iv.$helpers-prefix}family-secondary {
.#{iv.$class-prefix}#{iv.$helpers-prefix}family-secondary {
font-family: dv.$family-secondary !important;
}
.#{iv.$helpers-prefix}family-sans-serif {
.#{iv.$class-prefix}#{iv.$helpers-prefix}family-sans-serif {
font-family: iv.$family-sans-serif !important;
}
.#{iv.$helpers-prefix}family-monospace {
.#{iv.$class-prefix}#{iv.$helpers-prefix}family-monospace {
font-family: iv.$family-monospace !important;
}
.#{iv.$helpers-prefix}family-code {
.#{iv.$class-prefix}#{iv.$helpers-prefix}family-code {
font-family: dv.$family-code !important;
}

View file

@ -1,84 +1,84 @@
@use "../utilities/initial-variables" as iv;
@use "../utilities/mixins" as mx;
.#{iv.$helpers-prefix}display-none,
.#{iv.$helpers-prefix}hidden {
.#{iv.$class-prefix}#{iv.$helpers-prefix}display-none,
.#{iv.$class-prefix}#{iv.$helpers-prefix}hidden {
display: none !important;
}
$displays: block flex inline inline-block inline-flex grid;
@each $display in $displays {
.#{iv.$helpers-prefix}display-#{$display},
.#{iv.$helpers-prefix}#{$display} {
.#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display},
.#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display} {
display: $display !important;
}
@include mx.mobile {
.#{iv.$helpers-prefix}display-#{$display}-mobile,
.#{iv.$helpers-prefix}#{$display}-mobile {
.#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-mobile,
.#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-mobile {
display: $display !important;
}
}
@include mx.tablet {
.#{iv.$helpers-prefix}display-#{$display}-tablet,
.#{iv.$helpers-prefix}#{$display}-tablet {
.#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-tablet,
.#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-tablet {
display: $display !important;
}
}
@include mx.tablet-only {
.#{iv.$helpers-prefix}display-#{$display}-tablet-only,
.#{iv.$helpers-prefix}#{$display}-tablet-only {
.#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-tablet-only,
.#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-tablet-only {
display: $display !important;
}
}
@include mx.touch {
.#{iv.$helpers-prefix}display-#{$display}-touch,
.#{iv.$helpers-prefix}#{$display}-touch {
.#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-touch,
.#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-touch {
display: $display !important;
}
}
@include mx.desktop {
.#{iv.$helpers-prefix}display-#{$display}-desktop,
.#{iv.$helpers-prefix}#{$display}-desktop {
.#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-desktop,
.#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-desktop {
display: $display !important;
}
}
@include mx.desktop-only {
.#{iv.$helpers-prefix}display-#{$display}-desktop-only,
.#{iv.$helpers-prefix}#{$display}-desktop-only {
.#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-desktop-only,
.#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-desktop-only {
display: $display !important;
}
}
@include mx.widescreen {
.#{iv.$helpers-prefix}display-#{$display}-widescreen,
.#{iv.$helpers-prefix}#{$display}-widescreen {
.#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-widescreen,
.#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-widescreen {
display: $display !important;
}
}
@include mx.widescreen-only {
.#{iv.$helpers-prefix}display-#{$display}-widescreen-only,
.#{iv.$helpers-prefix}#{$display}-widescreen-only {
.#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-widescreen-only,
.#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-widescreen-only {
display: $display !important;
}
}
@include mx.fullhd {
.#{iv.$helpers-prefix}display-#{$display}-fullhd,
.#{iv.$helpers-prefix}#{$display}-fullhd {
.#{iv.$class-prefix}#{iv.$helpers-prefix}display-#{$display}-fullhd,
.#{iv.$class-prefix}#{iv.$helpers-prefix}#{$display}-fullhd {
display: $display !important;
}
}
}
.#{iv.$helpers-prefix}sr-only {
.#{iv.$class-prefix}#{iv.$helpers-prefix}sr-only {
border: none !important;
clip: rect(0, 0, 0, 0) !important;
height: 0.01em !important;
@ -90,132 +90,132 @@ $displays: block flex inline inline-block inline-flex grid;
}
@include mx.mobile {
.#{iv.$helpers-prefix}display-none-mobile,
.#{iv.$helpers-prefix}hidden-mobile {
.#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-mobile,
.#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-mobile {
display: none !important;
}
}
@include mx.tablet {
.#{iv.$helpers-prefix}display-none-tablet,
.#{iv.$helpers-prefix}hidden-tablet {
.#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-tablet,
.#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-tablet {
display: none !important;
}
}
@include mx.tablet-only {
.#{iv.$helpers-prefix}display-none-tablet-only,
.#{iv.$helpers-prefix}hidden-tablet-only {
.#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-tablet-only,
.#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-tablet-only {
display: none !important;
}
}
@include mx.touch {
.#{iv.$helpers-prefix}display-none-touch,
.#{iv.$helpers-prefix}hidden-touch {
.#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-touch,
.#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-touch {
display: none !important;
}
}
@include mx.desktop {
.#{iv.$helpers-prefix}display-none-desktop,
.#{iv.$helpers-prefix}hidden-desktop {
.#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-desktop,
.#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-desktop {
display: none !important;
}
}
@include mx.desktop-only {
.#{iv.$helpers-prefix}display-none-desktop-only,
.#{iv.$helpers-prefix}hidden-desktop-only {
.#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-desktop-only,
.#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-desktop-only {
display: none !important;
}
}
@include mx.widescreen {
.#{iv.$helpers-prefix}display-none-widescreen,
.#{iv.$helpers-prefix}hidden-widescreen {
.#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-widescreen,
.#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-widescreen {
display: none !important;
}
}
@include mx.widescreen-only {
.#{iv.$helpers-prefix}display-none-widescreen-only,
.#{iv.$helpers-prefix}hidden-widescreen-only {
.#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-widescreen-only,
.#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-widescreen-only {
display: none !important;
}
}
@include mx.fullhd {
.#{iv.$helpers-prefix}display-none-fullhd,
.#{iv.$helpers-prefix}hidden-fullhd {
.#{iv.$class-prefix}#{iv.$helpers-prefix}display-none-fullhd,
.#{iv.$class-prefix}#{iv.$helpers-prefix}hidden-fullhd {
display: none !important;
}
}
.#{iv.$helpers-prefix}visibility-hidden,
.#{iv.$helpers-prefix}invisible {
.#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden,
.#{iv.$class-prefix}#{iv.$helpers-prefix}invisible {
visibility: hidden !important;
}
@include mx.mobile {
.#{iv.$helpers-prefix}visibility-hidden-mobile,
.#{iv.$helpers-prefix}invisible-mobile {
.#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-mobile,
.#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-mobile {
visibility: hidden !important;
}
}
@include mx.tablet {
.#{iv.$helpers-prefix}visibility-hidden-tablet,
.#{iv.$helpers-prefix}invisible-tablet {
.#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-tablet,
.#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-tablet {
visibility: hidden !important;
}
}
@include mx.tablet-only {
.#{iv.$helpers-prefix}visibility-hidden-tablet-only,
.#{iv.$helpers-prefix}invisible-tablet-only {
.#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-tablet-only,
.#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-tablet-only {
visibility: hidden !important;
}
}
@include mx.touch {
.#{iv.$helpers-prefix}visibility-hidden-touch,
.#{iv.$helpers-prefix}invisible-touch {
.#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-touch,
.#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-touch {
visibility: hidden !important;
}
}
@include mx.desktop {
.#{iv.$helpers-prefix}visibility-hidden-desktop,
.#{iv.$helpers-prefix}invisible-desktop {
.#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-desktop,
.#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-desktop {
visibility: hidden !important;
}
}
@include mx.desktop-only {
.#{iv.$helpers-prefix}visibility-hidden-desktop-only,
.#{iv.$helpers-prefix}invisible-desktop-only {
.#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-desktop-only,
.#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-desktop-only {
visibility: hidden !important;
}
}
@include mx.widescreen {
.#{iv.$helpers-prefix}visibility-hidden-widescreen,
.#{iv.$helpers-prefix}invisible-widescreen {
.#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-widescreen,
.#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-widescreen {
visibility: hidden !important;
}
}
@include mx.widescreen-only {
.#{iv.$helpers-prefix}visibility-hidden-widescreen-only,
.#{iv.$helpers-prefix}invisible-widescreen-only {
.#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-widescreen-only,
.#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-widescreen-only {
visibility: hidden !important;
}
}
@include mx.fullhd {
.#{iv.$helpers-prefix}visibility-hidden-fullhd,
.#{iv.$helpers-prefix}invisible-fullhd {
.#{iv.$class-prefix}#{iv.$helpers-prefix}visibility-hidden-fullhd,
.#{iv.$class-prefix}#{iv.$helpers-prefix}invisible-fullhd {
visibility: hidden !important;
}
}

View file

@ -17,34 +17,42 @@ $container-max-width: iv.$fullhd !default;
width: 100%;
}
&.#{iv.$class-prefix}is-max-tablet {
max-width: iv.$tablet - $container-offset;
}
@include mx.desktop {
max-width: iv.$desktop - $container-offset;
}
@include mx.until-widescreen {
&.#{iv.$class-prefix}is-widescreen:not(.#{iv.$class-prefix}is-max-desktop) {
&.#{iv.$class-prefix}is-widescreen:not(
.#{iv.$class-prefix}is-max-tablet
):not(.#{iv.$class-prefix}is-max-desktop) {
max-width: min(iv.$widescreen, $container-max-width) - $container-offset;
}
}
@include mx.until-fullhd {
&.#{iv.$class-prefix}is-fullhd:not(.#{iv.$class-prefix}is-max-desktop):not(
.#{iv.$class-prefix}is-max-widescreen
) {
&.#{iv.$class-prefix}is-fullhd:not(.#{iv.$class-prefix}is-max-tablet):not(
.#{iv.$class-prefix}is-max-desktop
):not(.#{iv.$class-prefix}is-max-widescreen) {
max-width: min(iv.$fullhd, $container-max-width) - $container-offset;
}
}
@include mx.widescreen {
&:not(.#{iv.$class-prefix}is-max-desktop) {
&:not(.#{iv.$class-prefix}is-max-tablet):not(
.#{iv.$class-prefix}is-max-desktop
) {
max-width: min(iv.$widescreen, $container-max-width) - $container-offset;
}
}
@include mx.fullhd {
&:not(.#{iv.$class-prefix}is-max-desktop):not(
.#{iv.$class-prefix}is-max-widescreen
) {
&:not(.#{iv.$class-prefix}is-max-tablet):not(
.#{iv.$class-prefix}is-max-desktop
):not(.#{iv.$class-prefix}is-max-widescreen) {
max-width: min(iv.$fullhd, $container-max-width) - $container-offset;
}
}

View file

@ -10,9 +10,9 @@ $hero-body-padding-small: 1.5rem !default;
$hero-body-padding-medium: 9rem 4.5rem !default;
$hero-body-padding-large: 18rem 6rem !default;
$hero-gradient-h-offset: 5deg;
$hero-gradient-s-offset: 10%;
$hero-gradient-l-offset: 5%;
$hero-gradient-h-offset: 5deg !default;
$hero-gradient-s-offset: 10% !default;
$hero-gradient-l-offset: 5% !default;
$hero-colors: dv.$colors !default;
@ -25,6 +25,9 @@ $hero-colors: dv.$colors !default;
"hero-body-padding-small": #{$hero-body-padding-small},
"hero-body-padding-medium": #{$hero-body-padding-medium},
"hero-body-padding-large": #{$hero-body-padding-large},
"hero-gradient-h-offset": #{$hero-gradient-h-offset},
"hero-gradient-s-offset": #{$hero-gradient-s-offset},
"hero-gradient-l-offset": #{$hero-gradient-l-offset},
)
);
}

View file

@ -31,4 +31,8 @@ $section-padding-large: 18rem 6rem !default;
padding: cv.getVar("section-padding-large");
}
}
&.#{iv.$class-prefix}is-fullheight {
min-height: 100vh;
}
}

View file

@ -1,4 +1,5 @@
@use "sass:list";
@use "sass:meta";
@use "../utilities/initial-variables" as iv;
@use "../utilities/css-variables" as cv;
@ -19,7 +20,7 @@ $text: hsl(iv.$scheme-h, iv.$scheme-s, $text-l);
@each $name, $color in dv.$colors {
$base: $color;
@if type-of($color == "list") {
@if meta.type-of($color == "list") {
$base: list.nth($color, 1);
}

View file

@ -1,4 +1,5 @@
@use "sass:list";
@use "sass:meta";
@use "../utilities/css-variables" as cv;
@use "../utilities/derived-variables" as dv;
@ -73,14 +74,15 @@ $scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
// Other
"block-spacing": iv.$block-spacing,
"duration": 294ms,
"easing": ease-out,
"easing": iv.$easing,
"radius-small": iv.$radius-small,
"radius": iv.$radius,
"radius-medium": iv.$radius-medium,
"radius-large": iv.$radius-large,
"radius-rounded": 9999px,
"speed": 86ms,
"radius-rounded": iv.$radius-rounded,
"speed": iv.$speed,
"arrow-color": #{cv.getVar("link")},
"loading-color": #{cv.getVar("border")},
"burger-h": #{cv.getVar("link-h")},
"burger-s": #{cv.getVar("link-s")},
@ -102,7 +104,7 @@ $scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
$light: null;
$dark: null;
@if type-of($color == "list") {
@if meta.type-of($color == "list") {
$base: list.nth($color, 1);
@if list.length($color) > 3 {
@ -138,7 +140,7 @@ $scheme-main: hsl(iv.$scheme-h, iv.$scheme-s, $scheme-main-l);
@include cv.register-hsl("shadow", dv.$shadow-color);
@each $size in dv.$sizes {
$i: index(dv.$sizes, $size);
$i: list.index(dv.$sizes, $size);
$name: "size-#{$i}";
@include cv.register-var($name, $size);
}

View file

@ -48,16 +48,35 @@
@mixin register-rgb($name, $value) {
@include register-var(
$name,
(red($value), green($value), blue($value)),
(
color.channel($value, "red", $space: rgb),
color.channel($value, "green", $space: rgb),
color.channel($value, "blue", $space: rgb)
),
"",
"-rgb"
);
}
@mixin register-hsl($name, $value) {
@include register-var($name, round(hue($value)), "", "-h");
@include register-var($name, round(saturation($value)), "", "-s");
@include register-var($name, round(lightness($value)), "", "-l");
@include register-var(
$name,
math.round(color.channel($value, "hue", $space: hsl)),
"",
"-h"
);
@include register-var(
$name,
math.round(color.channel($value, "saturation", $space: hsl)),
"",
"-s"
);
@include register-var(
$name,
math.round(color.channel($value, "lightness", $space: hsl)),
"",
"-l"
);
}
@mixin generate-on-scheme-colors($name, $base, $scheme-main) {
@ -76,7 +95,11 @@
@if $ratio > 5 {
$found-decent-color: true;
} @else {
$on-scheme-color: lighten($on-scheme-color, 5%);
$on-scheme-color: color.adjust(
$on-scheme-color,
$lightness: 5%,
$space: hsl
);
$fg-lum: fn.bulmaColorLuminance($on-scheme-color);
}
}
@ -87,13 +110,21 @@
@if $ratio > 5 {
$found-decent-color: true;
} @else {
$on-scheme-color: darken($on-scheme-color, 5%);
$on-scheme-color: color.adjust(
$on-scheme-color,
$lightness: -5%,
$space: hsl
);
$fg-lum: fn.bulmaColorLuminance($on-scheme-color);
}
}
}
$on-scheme-lightness: lightness($on-scheme-color);
$on-scheme-lightness: color.channel(
$on-scheme-color,
"lightness",
$space: hsl
);
@include register-var($name, $on-scheme-lightness, "", "-on-scheme-l");
$on-scheme-l: getVar($name, "", "-on-scheme-l");
@include register-var(
@ -110,16 +141,28 @@
@if ($scheme-main-brightness == "bright") {
@while (fn.bulmaEnoughContrast($on-scheme-color, #fff) == false) {
// We're on a light background, so we'll darken the test color step by step.
$on-scheme-color: darken($on-scheme-color, 5%);
$on-scheme-color: color.adjust(
$on-scheme-color,
$lightness: -5%,
$space: hsl
);
}
} @else {
@while (fn.bulmaEnoughContrast($on-scheme-color, #000) == false) {
// We're on a dark background, so we'll lighten the test color step by step.
$on-scheme-color: lighten($on-scheme-color, 5%);
$on-scheme-color: color.adjust(
$on-scheme-color,
$lightness: 5%,
$space: hsl
);
}
}
$on-scheme-lightness: lightness($on-scheme-color);
$on-scheme-lightness: color.channel(
$on-scheme-color,
"lightness",
$space: hsl
);
@include register-var($name, $on-scheme-lightness, "", "-on-scheme-l");
}
@ -135,7 +178,12 @@
@include register-base-color($name, $base);
@if $invert {
@include register-var($name, lightness($invert), "", "-invert-l");
@include register-var(
$name,
color.channel($invert, "lightness", $space: hsl),
"",
"-invert-l"
);
@include register-var("#{$name}-invert", $invert);
}
}
@ -148,11 +196,11 @@
$light: null,
$dark: null
) {
$h: round(hue($base)); // Hue
$s: round(saturation($base)); // Saturation
$l: round(lightness($base)); // Lightness
$h:math.round(color.channel($base, "hue", $space: hsl)); // Hue
$s:math.round(color.channel($base, "saturation", $space: hsl)); // Saturation
$l:math.round(color.channel($base, "lightness", $space: hsl)); // Lightness
$base-lum: fn.bulmaColorLuminance($base);
$l-base: round($l % 10); // Get lightness second digit: 53% -> 3%
$l-base: math.round($l % 10); // Get lightness second digit: 53% -> 3%
$l-0: 0%; // 5% or less
$l-5: 5%; // More than 5%
$a: 1; // Alpha
@ -160,7 +208,7 @@
// Calculate digits like "40" for the scheme-main
$scheme-l-0: 0%;
$scheme-l-base: round($scheme-main-l % 10);
$scheme-l-base: math.round($scheme-main-l % 10);
$closest-5: math.round(math.div($scheme-main-l, 5)) * 5;
$pct-to-int: math.div($closest-5, 100%) * 100;
$scheme-main-digits: #{$pct-to-int};
@ -211,8 +259,9 @@
}
}
$shades: map.set($shades, "100", 100%);
@include register-var($name, 100%, "", "-100-l");
$l-100: math.min($l-0 + 100%, 100%);
$shades: map.set($shades, "100", $l-100);
@include register-var($name, $l-100, "", "-100-l");
// === STEP 3 ===
// Find accessible color combinations
@ -253,7 +302,10 @@
// Source: https://www.w3.org/TR/WCAG20-TECHS/G17.html
$fg-lum: fn.bulmaColorLuminance($foreground);
@if (lightness($foreground) > lightness($background)) {
@if (
color.channel($foreground, "lightness", $space: hsl) >
color.channel($background, "lightness", $space: hsl)
) {
$is-light-fg: true;
$ratio: math.div(($fg-lum + 0.05), ($bg-lum + 0.05));
} @else {
@ -322,7 +374,12 @@
// If an invert color is provided by the user
@if $invert {
@include register-var($name, lightness($invert), "", "-invert-l");
@include register-var(
$name,
color.channel($invert, "lightness", $space: hsl),
"",
"-invert-l"
);
@include register-var("#{$name}-invert", $invert);
} @else {
$base-invert-l-digits: map.get($combos, $base-digits);
@ -342,13 +399,33 @@
// Good color on light background (90% lightness)
@if $light and $dark {
@include register-var($name, lightness($light), "", "-light-l");
@include register-var($name, lightness($light), "", "-dark-invert-l");
@include register-var(
$name,
color.channel($light, "lightness", $space: hsl),
"",
"-light-l"
);
@include register-var(
$name,
color.channel($light, "lightness", $space: hsl),
"",
"-dark-invert-l"
);
@include register-var("#{$name}-light", $light);
@include register-var("#{$name}-dark-invert", $light);
@include register-var($name, lightness($dark), "", "-dark-l");
@include register-var($name, lightness($dark), "", "-light-invert-l");
@include register-var(
$name,
color.channel($dark, "lightness", $space: hsl),
"",
"-dark-l"
);
@include register-var(
$name,
color.channel($dark, "lightness", $space: hsl),
"",
"-light-invert-l"
);
@include register-var("#{$name}-dark", $dark);
@include register-var("#{$name}-light-invert", $dark);
} @else {

View file

@ -1,20 +1,29 @@
@use "sass:color";
@use "sass:list";
@use "sass:map";
@use "sass:math";
@use "sass:meta";
@use "sass:string";
@function mergeColorMaps($bulma-colors, $custom-colors) {
// We return at least Bulma's hard-coded colors
$merged-colors: $bulma-colors;
// We want a map as input
@if type-of($custom-colors) == "map" {
@if meta.type-of($custom-colors) == "map" {
@each $name, $components in $custom-colors {
// The color name should be a string
// and the components either a single color
// or a colors list with at least one element
@if type-of($name) ==
@if meta.type-of($name) ==
"string" and
(type-of($components) == "list" or type-of($components) == "color") and
length($components) >=
(
meta.type-of($components) ==
"list" or
meta.type-of($components) ==
"color"
) and
list.length($components) >=
1
{
$color-base: null;
@ -25,22 +34,22 @@
// The param can either be a single color
// or a list of 2 colors
@if type-of($components) == "color" {
@if meta.type-of($components) == "color" {
$color-base: $components;
$color-invert: bulmaFindColorInvert($color-base);
$color-light: bulmaFindLightColor($color-base);
$color-dark: bulmaFindDarkColor($color-base);
} @else if type-of($components) == "list" {
} @else if meta.type-of($components) == "list" {
$color-base: list.nth($components, 1);
// If Invert, Light and Dark are provided
@if length($components) > 3 {
@if list.length($components) > 3 {
$color-invert: list.nth($components, 2);
$color-light: list.nth($components, 3);
$color-dark: list.nth($components, 4);
// If only Invert and Light are provided
} @else if length($components) > 2 {
} @else if list.length($components) > 2 {
$color-invert: list.nth($components, 2);
$color-light: list.nth($components, 3);
$color-dark: bulmaFindDarkColor($color-base);
@ -56,11 +65,11 @@
$value: $color-base, $color-invert, $color-light, $color-dark;
// We only want to merge the map if the color base is an actual color
@if type-of($color-base) == "color" {
@if meta.type-of($color-base) == "color" {
// We merge this colors elements as map with Bulma's colors map
// (we can override them this way, no multiple definition for the same name)
// $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark)))
$merged-colors: map_merge(
$merged-colors: map.merge(
$merged-colors,
(
$name: $value,
@ -91,14 +100,14 @@
}
@function bulmaColorLuminance($color) {
@if type-of($color) != "color" {
@if meta.type-of($color) != "color" {
@return 0.55;
}
$color-rgb: (
"red": red($color),
"green": green($color),
"blue": blue($color),
"red": color.channel($color, "red", $space: rgb),
"green": color.channel($color, "green", $space: rgb),
"blue": color.channel($color, "blue", $space: rgb),
);
@each $name, $value in $color-rgb {
@ -112,7 +121,7 @@
$value: powerNumber($value, 2);
}
$color-rgb: map-merge(
$color-rgb: map.merge(
$color-rgb,
(
$name: $value,
@ -120,8 +129,8 @@
);
}
@return map-get($color-rgb, "red") * 0.2126 + map-get($color-rgb, "green") *
0.7152 + map-get($color-rgb, "blue") * 0.0722;
@return map.get($color-rgb, "red") * 0.2126 + map.get($color-rgb, "green") *
0.7152 + map.get($color-rgb, "blue") * 0.0722;
}
@function bulmaFindColorInvert($color) {
@ -133,33 +142,33 @@
}
@function bulmaFindLightColor($color, $l: 96%) {
@if type-of($color) == "color" {
@if meta.type-of($color) == "color" {
$l: 96%;
@if lightness($color) > 96% {
$l: lightness($color);
@if color.channel($color, "lightness", $space: hsl) > 96% {
$l: color.channel($color, "lightness", $space: hsl);
}
@return change-color($color, $lightness: $l);
@return color.change($color, $lightness: $l);
}
@return $background;
}
@function bulmaFindDarkColor($color, $base-l: 29%) {
@if type-of($color) == "color" {
@if meta.type-of($color) == "color" {
$luminance: bulmaColorLuminance($color);
$luminance-delta: 0.53 - $luminance;
$target-l: round($base-l + $luminance-delta * 53);
$target-l: math.round($base-l + $luminance-delta * 53);
@return change-color($color, $lightness: max($base-l, $target-l));
@return color.change($color, $lightness: max($base-l, $target-l));
}
@return $text-strong;
}
@function bulmaRgba($color, $alpha) {
@if type-of($color) != "color" {
@if meta.type-of($color) != "color" {
@return $color;
}
@ -167,27 +176,37 @@
}
@function bulmaDarken($color, $amount) {
@if type-of($color) != "color" {
@if meta.type-of($color) != "color" {
@return $color;
}
@return darken($color, $amount);
@return color.adjust($color, $lightness: -$amount, $space: hsl);
}
@function bulmaLighten($color, $amount) {
@if type-of($color) != "color" {
@if meta.type-of($color) != "color" {
@return $color;
}
@return lighten($color, $amount);
@return color.adjust($color, $lightness: $amount, $space: hsl);
}
@function bulmaColorBrightness($n) {
$color-brightness: round(
(red($n) * 299) + (green($n) * 587) + (blue($n) * 114) / 1000
$color-brightness: math.round(
math.div(
(color.channel($n, "red", $space: rgb) * 299) +
(color.channel($n, "green", $space: rgb) * 587) +
(color.channel($n, "blue", $space: rgb) * 114),
1000
)
);
$light-color: round(
(red(#ffffff) * 299) + (green(#ffffff) * 587) + (blue(#ffffff) * 114) / 1000
$light-color: math.round(
math.div(
(color.channel(#ffffff, "red", $space: rgb) * 299) +
(color.channel(#ffffff, "green", $space: rgb) * 587) +
(color.channel(#ffffff, "blue", $space: rgb) * 114),
1000
)
);
@if abs($color-brightness) < math.div($light-color, 2) {
@ -198,12 +217,42 @@
}
@function bulmaEnoughContrast($foreground, $background) {
$r: (max(red($foreground), red($background))) -
(min(red($foreground), red($background)));
$g: (max(green($foreground), green($background))) -
(min(green($foreground), green($background)));
$b: (max(blue($foreground), blue($background))) -
(min(blue($foreground), blue($background)));
$r: (
max(
color.channel($foreground, "red", $space: rgb),
color.channel($background, "red", $space: rgb)
)
) -
(
min(
color.channel($foreground, "red", $space: rgb),
color.channel($background, "red", $space: rgb)
)
);
$g: (
max(
color.channel($foreground, "green", $space: rgb),
color.channel($background, "green", $space: rgb)
)
) -
(
min(
color.channel($foreground, "green", $space: rgb),
color.channel($background, "green", $space: rgb)
)
);
$b: (
max(
color.channel($foreground, "blue", $space: rgb),
color.channel($background, "blue", $space: rgb)
)
) -
(
min(
color.channel($foreground, "blue", $space: rgb),
color.channel($background, "blue", $space: rgb)
)
);
$sum-rgb: $r + $g + $b;
@if $sum-rgb < 500 {
@ -215,15 +264,15 @@
// By Cory Simmons https://corysimmons.com/
@function bulmaStringToNumber($value) {
@if type-of($value) == "number" {
@if meta.type-of($value) == "number" {
@return $value;
} @else if type-of($value) != "string" {
} @else if meta.type-of($value) != "string" {
$_: log("Value for `to-number` should be a number or a string.");
}
$result: 0;
$digits: 0;
$minus: str-slice($value, 1, 1) == "-";
$minus: string.slice($value, 1, 1) == "-";
$numbers: (
"0": 0,
"1": 1,
@ -237,20 +286,23 @@
"9": 9,
);
@for $i from if($minus, 2, 1) through str-length($value) {
$character: str-slice($value, $i, $i);
@for $i from if($minus, 2, 1) through string.length($value) {
$character: string.slice($value, $i, $i);
@if not(index(map-keys($numbers), $character) or $character == ".") {
@return to-length(if($minus, -$result, $result), str-slice($value, $i));
@if not(list.index(map.keys($numbers), $character) or $character == ".") {
@return to-length(
if($minus, -$result, $result),
string.slice($value, $i)
);
}
@if $character == "." {
$digits: 1;
} @else if $digits == 0 {
$result: $result * 10 + map-get($numbers, $character);
$result: $result * 10 + map.get($numbers, $character);
} @else {
$digits: $digits * 10;
$result: $result + map-get($numbers, $character) / $digits;
$result: $result + map.get($numbers, $character) / $digits;
}
}

View file

@ -1,9 +1,9 @@
// Scheme Hue and Saturation
$scheme-h: 221;
$scheme-s: 14%;
$dark-l: 20%;
$light-l: 90%;
$scheme-h: 221 !default;
$scheme-s: 14% !default;
$dark-l: 20% !default;
$light-l: 90% !default;
// Colors

View file

@ -1,7 +1,9 @@
@use "sass:map";
@use "initial-variables" as iv;
@use "css-variables" as cv;
@mixin arrow($color: #{cv.getVar("link")}) {
@mixin arrow($color: #{cv.getVar("arrow-color")}) {
border: 0.125em solid $color;
border-right: 0;
border-top: 0;
@ -360,11 +362,11 @@
}
@mixin breakpoint($name) {
$breakpoint: map-get(iv.$breakpoints, $name);
$breakpoint: map.get(iv.$breakpoints, $name);
@if $breakpoint {
$from: map-get($breakpoint, "from");
$until: map-get($breakpoint, "until");
$from: map.get($breakpoint, "from");
$until: map.get($breakpoint, "until");
@if $from and $until {
@include between($from, $until) {

View file

@ -1,19 +0,0 @@
@charset "utf-8";
/*! bulma.io v1.0.0-beta | MIT License | github.com/jgthms/bulma */
@forward "../sass/utilities";
@forward "../sass/base";
@forward "../sass/elements";
@forward "../sass/form";
@forward "../sass/components";
@forward "../sass/grid";
@forward "../sass/layout";
@forward "../sass/base/skeleton";
@use "../sass/themes/light";
@use "../sass/themes/setup";
:root {
@include light.light-theme;
@include setup.setup-theme;
}

View file

@ -1,13 +0,0 @@
@charset "utf-8";
/*! bulma.io v1.0.0-beta | MIT License | github.com/jgthms/bulma */
@use "../sass/utilities" with (
$class-prefix: "bulma-"
);
@forward "../sass/base";
@forward "../sass/elements";
@forward "../sass/form";
@forward "../sass/components";
@forward "../sass/grid";
@forward "../sass/layout";
@forward "../sass/base/skeleton";

View file

@ -1,11 +0,0 @@
@charset "utf-8";
/*! bulma.io v1.0.0-beta | MIT License | github.com/jgthms/bulma */
@forward "../sass/utilities";
@forward "../sass/base";
@forward "../sass/elements";
@forward "../sass/form";
@forward "../sass/components";
@forward "../sass/grid";
@forward "../sass/layout";
@forward "../sass/base/skeleton";

View file

@ -1,6 +0,0 @@
@charset "utf-8";
/*! bulma.io v1.0.0-beta | MIT License | github.com/jgthms/bulma */
@use "../sass" with (
$class-prefix: "bulma-"
);