chore(third-party): upgrade
This commit is contained in:
parent
e8d3560bb7
commit
83d614314d
46 changed files with 829 additions and 1584 deletions
|
@ -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
|
||||
}
|
||||
}
|
|
@ -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 = [
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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 = [
|
||||
|
|
|
@ -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
12
shared/static/bulma/sass/base/skeleton.scss
vendored
12
shared/static/bulma/sass/base/skeleton.scss
vendored
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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");
|
||||
|
|
|
@ -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");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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")}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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};
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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)},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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")},
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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},
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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(
|
||||
(
|
||||
|
|
|
@ -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};
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
@ -31,4 +31,8 @@ $section-padding-large: 18rem 6rem !default;
|
|||
padding: cv.getVar("section-padding-large");
|
||||
}
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-fullheight {
|
||||
min-height: 100vh;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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";
|
|
@ -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";
|
|
@ -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-"
|
||||
);
|
Loading…
Add table
Add a link
Reference in a new issue