mirror of
https://github.com/jgthms/bulma
synced 2026-03-20 20:24:30 -07:00
Init v1
This commit is contained in:
Jeremy Thomas
@@ -1,9 +0,0 @@
|
||||
/* Bulma Utilities */
|
||||
@charset "utf-8"
|
||||
|
||||
@import "initial-variables"
|
||||
@import "functions"
|
||||
@import "derived-variables"
|
||||
@import "mixins"
|
||||
@import "controls"
|
||||
@import "extends"
|
||||
7
sass/utilities/_index.scss
Normal file
7
sass/utilities/_index.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
/* Bulma Utilities */
|
||||
@charset "utf-8";
|
||||
|
||||
@forward "initial-variables";
|
||||
@forward "functions";
|
||||
@forward "derived-variables";
|
||||
@forward "controls";
|
||||
@@ -1 +0,0 @@
|
||||
@warn "The animations.sass file has MOVED. It is now in the /base folder. Please import sass/base/animations instead."
|
||||
@@ -1,49 +0,0 @@
|
||||
@import "derived-variables"
|
||||
|
||||
$control-radius: $radius !default
|
||||
$control-radius-small: $radius-small !default
|
||||
|
||||
$control-border-width: 1px !default
|
||||
|
||||
$control-height: 2.5em !default
|
||||
$control-line-height: 1.5 !default
|
||||
|
||||
$control-padding-vertical: calc(0.5em - #{$control-border-width}) !default
|
||||
$control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default
|
||||
|
||||
=control
|
||||
-moz-appearance: none
|
||||
-webkit-appearance: none
|
||||
align-items: center
|
||||
border: $control-border-width solid transparent
|
||||
border-radius: $control-radius
|
||||
box-shadow: none
|
||||
display: inline-flex
|
||||
font-size: $size-normal
|
||||
height: $control-height
|
||||
justify-content: flex-start
|
||||
line-height: $control-line-height
|
||||
padding-bottom: $control-padding-vertical
|
||||
padding-left: $control-padding-horizontal
|
||||
padding-right: $control-padding-horizontal
|
||||
padding-top: $control-padding-vertical
|
||||
position: relative
|
||||
vertical-align: top
|
||||
// States
|
||||
&:focus,
|
||||
&.is-focused,
|
||||
&:active,
|
||||
&.is-active
|
||||
outline: none
|
||||
&[disabled],
|
||||
fieldset[disabled] &
|
||||
cursor: not-allowed
|
||||
|
||||
// The controls sizes use mixins so they can be used at different breakpoints
|
||||
=control-small
|
||||
border-radius: $control-radius-small
|
||||
font-size: $size-small
|
||||
=control-medium
|
||||
font-size: $size-medium
|
||||
=control-large
|
||||
font-size: $size-large
|
||||
85
sass/utilities/controls.scss
Normal file
85
sass/utilities/controls.scss
Normal file
@@ -0,0 +1,85 @@
|
||||
@use "css-variables" as cv;
|
||||
@use "derived-variables" as dv;
|
||||
@use "initial-variables" as iv;
|
||||
|
||||
$control-radius: cv.getVar("radius") !default;
|
||||
$control-radius-small: cv.getVar("radius-small") !default;
|
||||
|
||||
$control-border-width: 1px !default;
|
||||
$control-size: cv.getVar("size-normal") !default;
|
||||
|
||||
$control-height: 2.5em !default;
|
||||
$control-line-height: 1.5 !default;
|
||||
|
||||
$control-padding-vertical: calc(0.5em - #{$control-border-width}) !default;
|
||||
$control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default;
|
||||
|
||||
$control-focus-shadow-l: 50% !default;
|
||||
|
||||
:root {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"control-radius": #{$control-radius},
|
||||
"control-radius-small": #{$control-radius-small},
|
||||
"control-border-width": #{$control-border-width},
|
||||
"control-height": #{$control-height},
|
||||
"control-line-height": #{$control-line-height},
|
||||
"control-padding-vertical": #{$control-padding-vertical},
|
||||
"control-padding-horizontal": #{$control-padding-horizontal},
|
||||
"control-size": #{$control-size},
|
||||
"control-focus-shadow-l": #{$control-focus-shadow-l},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@mixin control {
|
||||
align-items: center;
|
||||
appearance: none;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: cv.getVar("control-border-width");
|
||||
border-radius: cv.getVar("control-radius");
|
||||
box-shadow: none;
|
||||
display: inline-flex;
|
||||
font-size: cv.getVar("control-size");
|
||||
height: cv.getVar("control-height");
|
||||
justify-content: flex-start;
|
||||
line-height: cv.getVar("control-line-height");
|
||||
padding-bottom: cv.getVar("control-padding-vertical");
|
||||
padding-left: cv.getVar("control-padding-horizontal");
|
||||
padding-right: cv.getVar("control-padding-horizontal");
|
||||
padding-top: cv.getVar("control-padding-vertical");
|
||||
position: relative;
|
||||
transition-duration: cv.getVar("duration");
|
||||
transition-property: background-color, border-color, box-shadow, color;
|
||||
vertical-align: top;
|
||||
|
||||
// States
|
||||
&:focus,
|
||||
&:focus-visible,
|
||||
&:focus-within,
|
||||
&.#{iv.$class-prefix}is-focused,
|
||||
&:active,
|
||||
&.#{iv.$class-prefix}is-active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
// The controls sizes use mixins so they can be used at different breakpoints
|
||||
@mixin control-small {
|
||||
border-radius: $control-radius-small;
|
||||
font-size: cv.getVar("size-small");
|
||||
}
|
||||
|
||||
@mixin control-medium {
|
||||
font-size: cv.getVar("size-medium");
|
||||
}
|
||||
|
||||
@mixin control-large {
|
||||
font-size: cv.getVar("size-large");
|
||||
}
|
||||
425
sass/utilities/css-variables.scss
Normal file
425
sass/utilities/css-variables.scss
Normal file
@@ -0,0 +1,425 @@
|
||||
@use "sass:color";
|
||||
@use "sass:list";
|
||||
@use "sass:map";
|
||||
@use "sass:math";
|
||||
|
||||
@use "initial-variables" as iv;
|
||||
@use "functions" as fn;
|
||||
|
||||
@function buildVarName($name, $prefix: "", $suffix: "") {
|
||||
@return "--#{iv.$cssvars-prefix}#{$prefix}#{$name}#{$suffix}";
|
||||
}
|
||||
|
||||
@function buildHslaString($name, $l, $a: 1) {
|
||||
$lightness: getVar($name, "", "-l");
|
||||
@if ($l) {
|
||||
$lightness: $l;
|
||||
}
|
||||
@return "hsla(#{getVar($name, '', '-h')}, #{getVar($name, '', '-s')}, #{$lightness}, #{$a})";
|
||||
}
|
||||
|
||||
@function getVar($name, $prefix: "", $suffix: "") {
|
||||
$varName: buildVarName($name, $prefix, $suffix);
|
||||
@return var(#{$varName});
|
||||
}
|
||||
|
||||
@function getVarWithBackup($name, $backup, $prefix: "", $suffix: "") {
|
||||
$varName: buildVarName($name, $prefix, $suffix);
|
||||
$backupName: buildVarName($backup, $prefix, $suffix);
|
||||
@return var(#{$varName}, var(#{$backupName}));
|
||||
}
|
||||
|
||||
@function getRgbaVar($name, $alpha, $prefix: "", $suffix: "") {
|
||||
$varName: buildVarName($name, $prefix, $suffix);
|
||||
@return unquote("rgba(var(#{$varName}), #{$alpha})");
|
||||
}
|
||||
|
||||
@mixin register-var($name, $value, $prefix: "", $suffix: "") {
|
||||
$varName: buildVarName($name, $prefix, $suffix);
|
||||
#{$varName}: #{$value};
|
||||
}
|
||||
|
||||
@mixin register-vars($vars, $prefix: "", $suffix: "") {
|
||||
@each $name, $value in $vars {
|
||||
@include register-var($name, $value, $prefix, $suffix);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin register-rgb($name, $value) {
|
||||
@include register-var(
|
||||
$name,
|
||||
(red($value), green($value), blue($value)),
|
||||
"",
|
||||
"-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");
|
||||
}
|
||||
|
||||
@mixin generate-on-scheme-colors($name, $base, $scheme-main) {
|
||||
// Accessibility Contrast System
|
||||
$scheme-main-brightness: fn.bulmaColorBrightness($scheme-main);
|
||||
$on-scheme-color: $base;
|
||||
$fg-lum: fn.bulmaColorLuminance($on-scheme-color);
|
||||
$bg-lum: fn.bulmaColorLuminance($scheme-main);
|
||||
$ratio: 0;
|
||||
$found-decent-color: false;
|
||||
|
||||
@if ($fg-lum > $bg-lum) {
|
||||
@for $i from 0 through 20 {
|
||||
$ratio: math.div(($fg-lum + 0.05), ($bg-lum + 0.05));
|
||||
|
||||
@if $ratio > 5 {
|
||||
$found-decent-color: true;
|
||||
} @else {
|
||||
$on-scheme-color: lighten($on-scheme-color, 5%);
|
||||
$fg-lum: fn.bulmaColorLuminance($on-scheme-color);
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
@for $i from 0 through 20 {
|
||||
$ratio: math.div(($bg-lum + 0.05), ($fg-lum + 0.05));
|
||||
|
||||
@if $ratio > 5 {
|
||||
$found-decent-color: true;
|
||||
} @else {
|
||||
$on-scheme-color: darken($on-scheme-color, 5%);
|
||||
$fg-lum: fn.bulmaColorLuminance($on-scheme-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$on-scheme-lightness: lightness($on-scheme-color);
|
||||
@include register-var($name, $on-scheme-lightness, "", "-on-scheme-l");
|
||||
$on-scheme-l: getVar($name, "", "-on-scheme-l");
|
||||
@include register-var(
|
||||
"#{$name}-on-scheme",
|
||||
buildHslaString($name, $on-scheme-l)
|
||||
);
|
||||
}
|
||||
|
||||
@mixin v1-generate-on-scheme-colors($name, $base, $scheme-main) {
|
||||
// Accessibility Contrast System
|
||||
$scheme-main-brightness: fn.bulmaColorBrightness($scheme-main);
|
||||
$on-scheme-color: $base;
|
||||
|
||||
@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%);
|
||||
}
|
||||
} @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-lightness: lightness($on-scheme-color);
|
||||
@include register-var($name, $on-scheme-lightness, "", "-on-scheme-l");
|
||||
}
|
||||
|
||||
@mixin register-base-color($name, $base) {
|
||||
$hsla: buildHslaString($name, getVar($name, "", "-l"));
|
||||
@include register-var($name, $hsla);
|
||||
@include register-var($name, $hsla, "", "-base"); // Just for reference
|
||||
@include register-rgb($name, $base);
|
||||
@include register-hsl($name, $base);
|
||||
}
|
||||
|
||||
@mixin generate-basic-palette($name, $base, $invert: null) {
|
||||
@include register-base-color($name, $base);
|
||||
|
||||
@if $invert {
|
||||
@include register-var($name, lightness($invert), "", "-invert-l");
|
||||
@include register-var("#{$name}-invert", $invert);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin generate-color-palette(
|
||||
$name,
|
||||
$base,
|
||||
$scheme-main-l: 100%,
|
||||
$invert: null,
|
||||
$light: null,
|
||||
$dark: null
|
||||
) {
|
||||
$h: round(hue($base)); // Hue
|
||||
$s: round(saturation($base)); // Saturation
|
||||
$l: round(lightness($base)); // Lightness
|
||||
$base-lum: fn.bulmaColorLuminance($base);
|
||||
$l-base: round($l % 10); // Get lightness second digit: 53% -> 3%
|
||||
$l-0: 0%; // 5% or less
|
||||
$l-5: 5%; // More than 5%
|
||||
$a: 1; // Alpha
|
||||
$base-digits: "00";
|
||||
|
||||
// Calculate digits like "40" for the scheme-main
|
||||
$scheme-l-0: 0%;
|
||||
$scheme-l-base: 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};
|
||||
|
||||
// === STEP 1 ===
|
||||
// Register the base colors
|
||||
@include register-base-color($name, $base);
|
||||
|
||||
// === STEP 2 ===
|
||||
// Generating 20 shades of the color
|
||||
|
||||
// 00: 0%, 1%, 2%
|
||||
// 05: 3%, 4%, 5%, 6%, 7%
|
||||
// 10: 8%, 9%
|
||||
|
||||
@if ($l-base < 3%) {
|
||||
$l-0: $l-base;
|
||||
$l-5: $l-base + 5%;
|
||||
} @else if ($l-base < 8%) {
|
||||
// $l-0: math.max($l-base - 5%, 0%);
|
||||
$l-0: $l-base - 5%;
|
||||
$l-5: $l-base;
|
||||
} @else {
|
||||
// $l-0: math.max($l-base - 10%, 0%);
|
||||
$l-0: $l-base - 10%;
|
||||
$l-5: $l-base - 5%;
|
||||
}
|
||||
|
||||
$shades: ();
|
||||
|
||||
@for $i from 0 through 9 {
|
||||
// if $l-base = 3%, then we get 3%, 13%, 23%, 33% etc.
|
||||
$color-l-0: math.max($l-0 + $i * 10, 0%);
|
||||
|
||||
// if $l-base = 3%, then we get 8%, 18%, 28%, 38% etc.
|
||||
$color-l-5: $l-5 + $i * 10;
|
||||
|
||||
$shades: map.set($shades, "#{$i}0", $color-l-0);
|
||||
$shades: map.set($shades, "#{$i}5", $color-l-5);
|
||||
|
||||
@include register-var($name, $color-l-0, "", "-#{$i}0-l");
|
||||
@include register-var($name, $color-l-5, "", "-#{$i}5-l");
|
||||
|
||||
@if $color-l-0 == $l {
|
||||
$base-digits: "#{$i}0";
|
||||
} @else if $color-l-5 == $l {
|
||||
$base-digits: "#{$i}5";
|
||||
}
|
||||
}
|
||||
|
||||
$shades: map.set($shades, "100", 100%);
|
||||
@include register-var($name, 100%, "", "-100-l");
|
||||
|
||||
// === STEP 3 ===
|
||||
// Find accessible color combinations
|
||||
|
||||
$combos: ();
|
||||
|
||||
@each $digits-bg, $bg-l in $shades {
|
||||
$background: hsl($h, $s, $bg-l);
|
||||
$bg-lum: fn.bulmaColorLuminance($background);
|
||||
$bg-is-light: $bg-lum > 0.55;
|
||||
$candidates: ();
|
||||
$found: false;
|
||||
|
||||
// If the background color is the base color
|
||||
@if $bg-l == $l {
|
||||
$base-digits: $digits-bg;
|
||||
|
||||
// Even if the base color as a background
|
||||
// doesn't have an appropriate foreground,
|
||||
// we still add to the list of "valid" contrast combos for now.
|
||||
@if $bg-is-light {
|
||||
$combos: map.set($combos, $base-digits, "10");
|
||||
} @else {
|
||||
$combos: map.set($combos, $base-digits, "100");
|
||||
}
|
||||
}
|
||||
|
||||
// We capture all contrast ratios for any given background
|
||||
// using all foreground options
|
||||
$current-best-digits: "00";
|
||||
$current-best-ratio: 0;
|
||||
|
||||
@each $digits-fg, $fg-l in $shades {
|
||||
$foreground: hsl($h, $s, $fg-l);
|
||||
$ratio: 0;
|
||||
$is-light-fg: false;
|
||||
|
||||
// Source: https://www.w3.org/TR/WCAG20-TECHS/G17.html
|
||||
$fg-lum: fn.bulmaColorLuminance($foreground);
|
||||
|
||||
@if (lightness($foreground) > lightness($background)) {
|
||||
$is-light-fg: true;
|
||||
$ratio: math.div(($fg-lum + 0.05), ($bg-lum + 0.05));
|
||||
} @else {
|
||||
$ratio: math.div(($bg-lum + 0.05), ($fg-lum + 0.05));
|
||||
}
|
||||
|
||||
@if $ratio > 7 {
|
||||
$candidates: list.append(
|
||||
$candidates,
|
||||
fn.bulmaStringToNumber($digits-fg)
|
||||
);
|
||||
|
||||
@if ($is-light-fg) {
|
||||
@if (not $found) {
|
||||
// Store the background/foreground combination
|
||||
$combos: map.set($combos, $digits-bg, $digits-fg);
|
||||
$current-best-digits: $digits-fg;
|
||||
$current-best-ratio: $ratio;
|
||||
$found: true;
|
||||
}
|
||||
} @else {
|
||||
$combos: map.set($combos, $digits-bg, $digits-fg);
|
||||
$current-best-digits: $digits-fg;
|
||||
$current-best-ratio: $ratio;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// We haven't found a decent ratio
|
||||
@each $digits-fg, $fg-l in $shades {
|
||||
@if (map.has-key($combos, $digits-bg) == false) {
|
||||
@if ($bg-is-light) {
|
||||
// Light background so we set a dark foreground
|
||||
$combos: map.set($combos, $digits-bg, "00");
|
||||
} @else {
|
||||
// Dark background so we set a light foreground
|
||||
$combos: map.set($combos, $digits-bg, "100");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// The output needs to be:
|
||||
// --bulma-primary-invert-l: var(--bulma-primary-100-l);
|
||||
|
||||
@each $bg, $fg in $combos {
|
||||
// Just using this loop to register all 20 digits
|
||||
$bg-l: getVar($name, "", "-#{$bg}-l");
|
||||
@include register-var("#{$name}-#{$bg}", buildHslaString($name, $bg-l));
|
||||
|
||||
// Register the lightness
|
||||
@include register-var(
|
||||
$name,
|
||||
getVar($name, "", "-#{$fg}-l"),
|
||||
"",
|
||||
"-#{$bg}-invert-l"
|
||||
);
|
||||
|
||||
// Resiter the color using that lightness
|
||||
$bg-invert-l: getVar($name, "", "-#{$bg}-invert-l");
|
||||
@include register-var(
|
||||
"#{$name}-#{$bg}-invert",
|
||||
buildHslaString($name, $bg-invert-l)
|
||||
);
|
||||
}
|
||||
|
||||
// If an invert color is provided by the user
|
||||
@if $invert {
|
||||
@include register-var($name, lightness($invert), "", "-invert-l");
|
||||
@include register-var("#{$name}-invert", $invert);
|
||||
} @else {
|
||||
$base-invert-l-digits: map.get($combos, $base-digits);
|
||||
@include register-var(
|
||||
$name,
|
||||
getVar($name, "", "-#{$base-invert-l-digits}-l"),
|
||||
"",
|
||||
"-invert-l"
|
||||
);
|
||||
|
||||
$base-invert-l: getVar($name, "", "-invert-l");
|
||||
@include register-var(
|
||||
"#{$name}-invert",
|
||||
buildHslaString($name, $base-invert-l)
|
||||
);
|
||||
}
|
||||
|
||||
// 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}-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}-dark", $dark);
|
||||
@include register-var("#{$name}-light-invert", $dark);
|
||||
} @else {
|
||||
@include register-var($name, getVar($name, "", "-90-l"), "", "-light-l");
|
||||
|
||||
$light-l: getVar($name, "", "-light-l");
|
||||
@include register-var("#{$name}-light", buildHslaString($name, $light-l));
|
||||
|
||||
$light-invert-l-digits: map.get($combos, "90");
|
||||
@include register-var(
|
||||
$name,
|
||||
getVar($name, "", "-#{$light-invert-l-digits}-l"),
|
||||
"",
|
||||
"-light-invert-l"
|
||||
);
|
||||
|
||||
$light-invert-l: getVar($name, "", "-light-invert-l");
|
||||
@include register-var(
|
||||
"#{$name}-light-invert",
|
||||
buildHslaString($name, $light-invert-l)
|
||||
);
|
||||
|
||||
// Good color on dark background (10% lightness)
|
||||
@include register-var($name, getVar($name, "", "-10-l"), "", "-dark-l");
|
||||
|
||||
$dark-l: getVar($name, "", "-dark-l");
|
||||
@include register-var("#{$name}-dark", buildHslaString($name, $dark-l));
|
||||
|
||||
$dark-invert-l-digits: map.get($combos, "10");
|
||||
@include register-var(
|
||||
$name,
|
||||
getVar($name, "", "-#{$dark-invert-l-digits}-l"),
|
||||
"",
|
||||
"-dark-invert-l"
|
||||
);
|
||||
|
||||
$dark-invert-l: getVar($name, "", "-dark-invert-l");
|
||||
@include register-var(
|
||||
"#{$name}-dark-invert",
|
||||
buildHslaString($name, $dark-invert-l)
|
||||
);
|
||||
|
||||
// Soft and Bold colors
|
||||
$soft-l: getVar("soft-l");
|
||||
$soft-invert-l: getVar("soft-invert-l");
|
||||
$bold-l: getVar("bold-l");
|
||||
$bold-invert-l: getVar("bold-invert-l");
|
||||
@include register-var("#{$name}-soft", buildHslaString($name, $soft-l));
|
||||
@include register-var("#{$name}-bold", buildHslaString($name, $bold-l));
|
||||
@include register-var(
|
||||
"#{$name}-soft-invert",
|
||||
buildHslaString($name, $soft-invert-l)
|
||||
);
|
||||
@include register-var(
|
||||
"#{$name}-bold-invert",
|
||||
buildHslaString($name, $bold-invert-l)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bulma-theme($name) {
|
||||
[data-#{iv.$class-prefix}theme="#{$name}"],
|
||||
.#{iv.$class-prefix}theme-#{$name} {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin system-theme($name) {
|
||||
@media (prefers-color-scheme: #{$name}) {
|
||||
:root {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,114 +0,0 @@
|
||||
@import "initial-variables"
|
||||
@import "functions"
|
||||
|
||||
$primary: $turquoise !default
|
||||
|
||||
$info: $cyan !default
|
||||
$success: $green !default
|
||||
$warning: $yellow !default
|
||||
$danger: $red !default
|
||||
|
||||
$light: $white-ter !default
|
||||
$dark: $grey-darker !default
|
||||
|
||||
// Invert colors
|
||||
|
||||
$orange-invert: findColorInvert($orange) !default
|
||||
$yellow-invert: findColorInvert($yellow) !default
|
||||
$green-invert: findColorInvert($green) !default
|
||||
$turquoise-invert: findColorInvert($turquoise) !default
|
||||
$cyan-invert: findColorInvert($cyan) !default
|
||||
$blue-invert: findColorInvert($blue) !default
|
||||
$purple-invert: findColorInvert($purple) !default
|
||||
$red-invert: findColorInvert($red) !default
|
||||
|
||||
$primary-invert: findColorInvert($primary) !default
|
||||
$primary-light: findLightColor($primary) !default
|
||||
$primary-dark: findDarkColor($primary) !default
|
||||
$info-invert: findColorInvert($info) !default
|
||||
$info-light: findLightColor($info) !default
|
||||
$info-dark: findDarkColor($info) !default
|
||||
$success-invert: findColorInvert($success) !default
|
||||
$success-light: findLightColor($success) !default
|
||||
$success-dark: findDarkColor($success) !default
|
||||
$warning-invert: findColorInvert($warning) !default
|
||||
$warning-light: findLightColor($warning) !default
|
||||
$warning-dark: findDarkColor($warning) !default
|
||||
$danger-invert: findColorInvert($danger) !default
|
||||
$danger-light: findLightColor($danger) !default
|
||||
$danger-dark: findDarkColor($danger) !default
|
||||
$light-invert: findColorInvert($light) !default
|
||||
$dark-invert: findColorInvert($dark) !default
|
||||
|
||||
// General colors
|
||||
|
||||
$scheme-main: $white !default
|
||||
$scheme-main-bis: $white-bis !default
|
||||
$scheme-main-ter: $white-ter !default
|
||||
$scheme-invert: $black !default
|
||||
$scheme-invert-bis: $black-bis !default
|
||||
$scheme-invert-ter: $black-ter !default
|
||||
|
||||
$background: $white-ter !default
|
||||
|
||||
$border: $grey-lighter !default
|
||||
$border-hover: $grey-light !default
|
||||
$border-light: $grey-lightest !default
|
||||
$border-light-hover: $grey-light !default
|
||||
|
||||
// Text colors
|
||||
|
||||
$text: $grey-dark !default
|
||||
$text-invert: findColorInvert($text) !default
|
||||
$text-light: $grey !default
|
||||
$text-strong: $grey-darker !default
|
||||
|
||||
// Code colors
|
||||
|
||||
$code: darken($red, 15%) !default
|
||||
$code-background: $background !default
|
||||
|
||||
$pre: $text !default
|
||||
$pre-background: $background !default
|
||||
|
||||
// Link colors
|
||||
|
||||
$link: $blue !default
|
||||
$link-invert: findColorInvert($link) !default
|
||||
$link-light: findLightColor($link) !default
|
||||
$link-dark: findDarkColor($link) !default
|
||||
$link-visited: $purple !default
|
||||
|
||||
$link-hover: $grey-darker !default
|
||||
$link-hover-border: $grey-light !default
|
||||
|
||||
$link-focus: $grey-darker !default
|
||||
$link-focus-border: $blue !default
|
||||
|
||||
$link-active: $grey-darker !default
|
||||
$link-active-border: $grey-dark !default
|
||||
|
||||
// Typography
|
||||
|
||||
$family-primary: $family-sans-serif !default
|
||||
$family-secondary: $family-sans-serif !default
|
||||
$family-code: $family-monospace !default
|
||||
|
||||
$size-small: $size-7 !default
|
||||
$size-normal: $size-6 !default
|
||||
$size-medium: $size-5 !default
|
||||
$size-large: $size-4 !default
|
||||
|
||||
// Effects
|
||||
|
||||
$shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
|
||||
|
||||
// Lists and maps
|
||||
$custom-colors: null !default
|
||||
$custom-shades: null !default
|
||||
|
||||
$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default
|
||||
|
||||
$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default
|
||||
|
||||
$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default
|
||||
112
sass/utilities/derived-variables.scss
Normal file
112
sass/utilities/derived-variables.scss
Normal file
@@ -0,0 +1,112 @@
|
||||
@use "initial-variables" as iv;
|
||||
@use "functions" as fn;
|
||||
|
||||
// Scheme colors
|
||||
|
||||
$scheme-main: iv.$white !default;
|
||||
$scheme-main-bis: iv.$white-bis !default;
|
||||
$scheme-main-ter: iv.$white-ter !default;
|
||||
$scheme-invert: iv.$black !default;
|
||||
$scheme-invert-bis: iv.$black-bis !default;
|
||||
$scheme-invert-ter: iv.$black-ter !default;
|
||||
|
||||
// Text colors
|
||||
|
||||
$text: iv.$grey-dark !default;
|
||||
$text-invert: fn.bulmaFindColorInvert($text) !default;
|
||||
$text-weak: iv.$grey !default;
|
||||
$text-strong: iv.$grey-darker !default;
|
||||
|
||||
// Status colors
|
||||
|
||||
$primary: iv.$turquoise !default;
|
||||
$info: iv.$cyan !default;
|
||||
$success: iv.$green !default;
|
||||
$warning: iv.$yellow !default;
|
||||
$danger: iv.$red !default;
|
||||
$light: iv.$white-ter !default;
|
||||
$dark: iv.$grey-darker !default;
|
||||
|
||||
// Link colors
|
||||
|
||||
$link: iv.$blue !default;
|
||||
|
||||
// Decorative colors
|
||||
|
||||
$background: iv.$white-ter !default;
|
||||
$border: iv.$grey-lighter !default;
|
||||
$border-weak: iv.$grey-lightest !default;
|
||||
|
||||
// Code colors
|
||||
|
||||
$code: iv.$red !default;
|
||||
$code-background: $background !default;
|
||||
|
||||
$pre: $text !default;
|
||||
$pre-background: $background !default;
|
||||
|
||||
// Typography
|
||||
|
||||
$family-primary: iv.$family-sans-serif !default;
|
||||
$family-secondary: iv.$family-sans-serif !default;
|
||||
$family-code: iv.$family-monospace !default;
|
||||
|
||||
$size-small: iv.$size-7 !default;
|
||||
$size-normal: iv.$size-6 !default;
|
||||
$size-medium: iv.$size-5 !default;
|
||||
$size-large: iv.$size-4 !default;
|
||||
|
||||
// Effects
|
||||
|
||||
$shadow-color: iv.$black !default;
|
||||
|
||||
// Lists and maps
|
||||
$custom-colors: null !default;
|
||||
$custom-shades: null !default;
|
||||
|
||||
$colors: fn.mergeColorMaps(
|
||||
(
|
||||
"white": (
|
||||
iv.$white,
|
||||
iv.$black,
|
||||
),
|
||||
"black": (
|
||||
iv.$black,
|
||||
iv.$white,
|
||||
),
|
||||
"light": (
|
||||
$light,
|
||||
$dark,
|
||||
),
|
||||
"dark": (
|
||||
$dark,
|
||||
$light,
|
||||
),
|
||||
"text": $text,
|
||||
"primary": $primary,
|
||||
"link": $link,
|
||||
"info": $info,
|
||||
"success": $success,
|
||||
"warning": $warning,
|
||||
"danger": $danger,
|
||||
),
|
||||
$custom-colors
|
||||
) !default;
|
||||
|
||||
$shades: fn.mergeColorMaps(
|
||||
(
|
||||
"black-bis": iv.$black-bis,
|
||||
"black-ter": iv.$black-ter,
|
||||
"grey-darker": iv.$grey-darker,
|
||||
"grey-dark": iv.$grey-dark,
|
||||
"grey": iv.$grey,
|
||||
"grey-light": iv.$grey-light,
|
||||
"grey-lighter": iv.$grey-lighter,
|
||||
"white-ter": iv.$white-ter,
|
||||
"white-bis": iv.$white-bis,
|
||||
),
|
||||
$custom-shades
|
||||
) !default;
|
||||
|
||||
$sizes: iv.$size-1 iv.$size-2 iv.$size-3 iv.$size-4 iv.$size-5 iv.$size-6
|
||||
iv.$size-7 !default;
|
||||
@@ -1,25 +0,0 @@
|
||||
@import "mixins"
|
||||
|
||||
%control
|
||||
+control
|
||||
|
||||
%unselectable
|
||||
+unselectable
|
||||
|
||||
%arrow
|
||||
+arrow
|
||||
|
||||
%block
|
||||
+block
|
||||
|
||||
%delete
|
||||
+delete
|
||||
|
||||
%loader
|
||||
+loader
|
||||
|
||||
%overlay
|
||||
+overlay
|
||||
|
||||
%reset
|
||||
+reset
|
||||
34
sass/utilities/extends.scss
Normal file
34
sass/utilities/extends.scss
Normal file
@@ -0,0 +1,34 @@
|
||||
@use "controls";
|
||||
@use "mixins";
|
||||
|
||||
%arrow {
|
||||
@include mixins.arrow;
|
||||
}
|
||||
|
||||
%block {
|
||||
@include mixins.block;
|
||||
}
|
||||
|
||||
%control {
|
||||
@include controls.control;
|
||||
}
|
||||
|
||||
%delete {
|
||||
@include mixins.delete;
|
||||
}
|
||||
|
||||
%loader {
|
||||
@include mixins.loader;
|
||||
}
|
||||
|
||||
%overlay {
|
||||
@include mixins.overlay;
|
||||
}
|
||||
|
||||
%reset {
|
||||
@include mixins.reset;
|
||||
}
|
||||
|
||||
%unselectable {
|
||||
@include mixins.unselectable;
|
||||
}
|
||||
@@ -1,135 +0,0 @@
|
||||
@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'
|
||||
@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) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1
|
||||
$color-base: null
|
||||
$color-invert: null
|
||||
$color-light: null
|
||||
$color-dark: null
|
||||
$value: null
|
||||
|
||||
// The param can either be a single color
|
||||
// or a list of 2 colors
|
||||
@if type-of($components) == 'color'
|
||||
$color-base: $components
|
||||
$color-invert: findColorInvert($color-base)
|
||||
$color-light: findLightColor($color-base)
|
||||
$color-dark: findDarkColor($color-base)
|
||||
@else if type-of($components) == 'list'
|
||||
$color-base: nth($components, 1)
|
||||
// If Invert, Light and Dark are provided
|
||||
@if length($components) > 3
|
||||
$color-invert: nth($components, 2)
|
||||
$color-light: nth($components, 3)
|
||||
$color-dark: nth($components, 4)
|
||||
// If only Invert and Light are provided
|
||||
@else if length($components) > 2
|
||||
$color-invert: nth($components, 2)
|
||||
$color-light: nth($components, 3)
|
||||
$color-dark: findDarkColor($color-base)
|
||||
// If only Invert is provided
|
||||
@else
|
||||
$color-invert: nth($components, 2)
|
||||
$color-light: findLightColor($color-base)
|
||||
$color-dark: findDarkColor($color-base)
|
||||
|
||||
$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'
|
||||
// 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, ($name: $value))
|
||||
|
||||
@return $merged-colors
|
||||
|
||||
@function powerNumber($number, $exp)
|
||||
$value: 1
|
||||
@if $exp > 0
|
||||
@for $i from 1 through $exp
|
||||
$value: $value * $number
|
||||
@else if $exp < 0
|
||||
@for $i from 1 through -$exp
|
||||
$value: divide($value, $number)
|
||||
@return $value
|
||||
|
||||
@function colorLuminance($color)
|
||||
@if type-of($color) != 'color'
|
||||
@return 0.55
|
||||
$color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
|
||||
@each $name, $value in $color-rgb
|
||||
$adjusted: 0
|
||||
$value: divide($value, 255)
|
||||
@if $value < 0.03928
|
||||
$value: divide($value, 12.92)
|
||||
@else
|
||||
$value: divide(($value + .055), 1.055)
|
||||
$value: powerNumber($value, 2)
|
||||
$color-rgb: map-merge($color-rgb, ($name: $value))
|
||||
@return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
|
||||
|
||||
@function findColorInvert($color)
|
||||
@if (colorLuminance($color) > 0.55)
|
||||
@return rgba(#000, 0.7)
|
||||
@else
|
||||
@return #fff
|
||||
|
||||
@function findLightColor($color, $l: 96%)
|
||||
@if type-of($color) == 'color'
|
||||
$l: 96%
|
||||
@if lightness($color) > 96%
|
||||
$l: lightness($color)
|
||||
@return change-color($color, $lightness: $l)
|
||||
@return $background
|
||||
|
||||
@function findDarkColor($color, $base-l: 29%)
|
||||
@if type-of($color) == 'color'
|
||||
$luminance: colorLuminance($color)
|
||||
$luminance-delta: (0.53 - $luminance)
|
||||
$target-l: round($base-l + ($luminance-delta * 53))
|
||||
@return change-color($color, $lightness: max($base-l, $target-l))
|
||||
@return $text-strong
|
||||
|
||||
@function bulmaRgba($color, $alpha)
|
||||
@if type-of($color) != 'color'
|
||||
@return $color
|
||||
@return rgba($color, $alpha)
|
||||
|
||||
@function bulmaDarken($color, $amount)
|
||||
@if type-of($color) != 'color'
|
||||
@return $color
|
||||
@return darken($color, $amount)
|
||||
|
||||
@function bulmaLighten($color, $amount)
|
||||
@if type-of($color) != 'color'
|
||||
@return $color
|
||||
@return lighten($color, $amount)
|
||||
|
||||
// Custom divide function by @mdo from https://github.com/twbs/bootstrap/pull/34245
|
||||
// Replaces old slash division deprecated in Dart Sass
|
||||
@function divide($dividend, $divisor, $precision: 10)
|
||||
$sign: if($dividend > 0 and $divisor > 0, 1, -1)
|
||||
$dividend: abs($dividend)
|
||||
$divisor: abs($divisor)
|
||||
$quotient: 0
|
||||
$remainder: $dividend
|
||||
@if $dividend == 0
|
||||
@return 0
|
||||
@if $divisor == 0
|
||||
@error "Cannot divide by 0"
|
||||
@if $divisor == 1
|
||||
@return $dividend
|
||||
@while $remainder >= $divisor
|
||||
$quotient: $quotient + 1
|
||||
$remainder: $remainder - $divisor
|
||||
@if $remainder > 0 and $precision > 0
|
||||
$remainder: divide($remainder * 10, $divisor, $precision - 1) * .1
|
||||
@return ($quotient + $remainder) * $sign
|
||||
258
sass/utilities/functions.scss
Normal file
258
sass/utilities/functions.scss
Normal file
@@ -0,0 +1,258 @@
|
||||
@use "sass:list";
|
||||
@use "sass:math";
|
||||
|
||||
@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" {
|
||||
@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) ==
|
||||
"string" and
|
||||
(type-of($components) == "list" or type-of($components) == "color") and
|
||||
length($components) >=
|
||||
1
|
||||
{
|
||||
$color-base: null;
|
||||
$color-invert: null;
|
||||
$color-light: null;
|
||||
$color-dark: null;
|
||||
$value: null;
|
||||
|
||||
// The param can either be a single color
|
||||
// or a list of 2 colors
|
||||
@if 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" {
|
||||
$color-base: list.nth($components, 1);
|
||||
|
||||
// If Invert, Light and Dark are provided
|
||||
@if 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 {
|
||||
$color-invert: list.nth($components, 2);
|
||||
$color-light: list.nth($components, 3);
|
||||
$color-dark: bulmaFindDarkColor($color-base);
|
||||
|
||||
// If only Invert is provided
|
||||
} @else {
|
||||
$color-invert: list.nth($components, 2);
|
||||
$color-light: bulmaFindLightColor($color-base);
|
||||
$color-dark: bulmaFindDarkColor($color-base);
|
||||
}
|
||||
}
|
||||
|
||||
$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" {
|
||||
// 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,
|
||||
(
|
||||
$name: $value,
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@return $merged-colors;
|
||||
}
|
||||
|
||||
@function powerNumber($number, $exp) {
|
||||
$value: 1;
|
||||
|
||||
@if $exp > 0 {
|
||||
@for $i from 1 through $exp {
|
||||
$value: $value * $number;
|
||||
}
|
||||
} @else if $exp < 0 {
|
||||
@for $i from 1 through -$exp {
|
||||
$value: math.div($value, $number);
|
||||
}
|
||||
}
|
||||
|
||||
@return $value;
|
||||
}
|
||||
|
||||
@function bulmaColorLuminance($color) {
|
||||
@if type-of($color) != "color" {
|
||||
@return 0.55;
|
||||
}
|
||||
|
||||
$color-rgb: (
|
||||
"red": red($color),
|
||||
"green": green($color),
|
||||
"blue": blue($color),
|
||||
);
|
||||
|
||||
@each $name, $value in $color-rgb {
|
||||
$adjusted: 0;
|
||||
$value: math.div($value, 255);
|
||||
|
||||
@if $value < 0.03928 {
|
||||
$value: math.div($value, 12.92);
|
||||
} @else {
|
||||
$value: math.div($value + 0.055, 1.055);
|
||||
$value: powerNumber($value, 2);
|
||||
}
|
||||
|
||||
$color-rgb: map-merge(
|
||||
$color-rgb,
|
||||
(
|
||||
$name: $value,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@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) {
|
||||
@if bulmaColorLuminance($color) > 0.55 {
|
||||
@return rgba(#000, 0.7);
|
||||
} @else {
|
||||
@return #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@function bulmaFindLightColor($color, $l: 96%) {
|
||||
@if type-of($color) == "color" {
|
||||
$l: 96%;
|
||||
|
||||
@if lightness($color) > 96% {
|
||||
$l: lightness($color);
|
||||
}
|
||||
|
||||
@return change-color($color, $lightness: $l);
|
||||
}
|
||||
|
||||
@return $background;
|
||||
}
|
||||
|
||||
@function bulmaFindDarkColor($color, $base-l: 29%) {
|
||||
@if type-of($color) == "color" {
|
||||
$luminance: bulmaColorLuminance($color);
|
||||
$luminance-delta: 0.53 - $luminance;
|
||||
$target-l: round($base-l + $luminance-delta * 53);
|
||||
|
||||
@return change-color($color, $lightness: max($base-l, $target-l));
|
||||
}
|
||||
|
||||
@return $text-strong;
|
||||
}
|
||||
|
||||
@function bulmaRgba($color, $alpha) {
|
||||
@if type-of($color) != "color" {
|
||||
@return $color;
|
||||
}
|
||||
|
||||
@return rgba($color, $alpha);
|
||||
}
|
||||
|
||||
@function bulmaDarken($color, $amount) {
|
||||
@if type-of($color) != "color" {
|
||||
@return $color;
|
||||
}
|
||||
|
||||
@return darken($color, $amount);
|
||||
}
|
||||
|
||||
@function bulmaLighten($color, $amount) {
|
||||
@if type-of($color) != "color" {
|
||||
@return $color;
|
||||
}
|
||||
|
||||
@return lighten($color, $amount);
|
||||
}
|
||||
|
||||
@function bulmaColorBrightness($n) {
|
||||
$color-brightness: round(
|
||||
(red($n) * 299) + (green($n) * 587) + (blue($n) * 114) / 1000
|
||||
);
|
||||
$light-color: round(
|
||||
(red(#ffffff) * 299) + (green(#ffffff) * 587) + (blue(#ffffff) * 114) / 1000
|
||||
);
|
||||
|
||||
@if abs($color-brightness) < math.div($light-color, 2) {
|
||||
@return "dark";
|
||||
}
|
||||
|
||||
@return "bright";
|
||||
}
|
||||
|
||||
@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)));
|
||||
$sum-rgb: $r + $g + $b;
|
||||
|
||||
@if $sum-rgb < 500 {
|
||||
@return false;
|
||||
}
|
||||
|
||||
@return true;
|
||||
}
|
||||
|
||||
// By Cory Simmons https://corysimmons.com/
|
||||
@function bulmaStringToNumber($value) {
|
||||
@if type-of($value) == "number" {
|
||||
@return $value;
|
||||
} @else if 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) == "-";
|
||||
$numbers: (
|
||||
"0": 0,
|
||||
"1": 1,
|
||||
"2": 2,
|
||||
"3": 3,
|
||||
"4": 4,
|
||||
"5": 5,
|
||||
"6": 6,
|
||||
"7": 7,
|
||||
"8": 8,
|
||||
"9": 9,
|
||||
);
|
||||
|
||||
@for $i from if($minus, 2, 1) through str-length($value) {
|
||||
$character: str-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 $character == "." {
|
||||
$digits: 1;
|
||||
} @else if $digits == 0 {
|
||||
$result: $result * 10 + map-get($numbers, $character);
|
||||
} @else {
|
||||
$digits: $digits * 10;
|
||||
$result: $result + map-get($numbers, $character) / $digits;
|
||||
}
|
||||
}
|
||||
|
||||
@return if($minus, -$result, $result);
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
// Colors
|
||||
|
||||
$black: hsl(0, 0%, 4%) !default
|
||||
$black-bis: hsl(0, 0%, 7%) !default
|
||||
$black-ter: hsl(0, 0%, 14%) !default
|
||||
|
||||
$grey-darker: hsl(0, 0%, 21%) !default
|
||||
$grey-dark: hsl(0, 0%, 29%) !default
|
||||
$grey: hsl(0, 0%, 48%) !default
|
||||
$grey-light: hsl(0, 0%, 71%) !default
|
||||
$grey-lighter: hsl(0, 0%, 86%) !default
|
||||
$grey-lightest: hsl(0, 0%, 93%) !default
|
||||
|
||||
$white-ter: hsl(0, 0%, 96%) !default
|
||||
$white-bis: hsl(0, 0%, 98%) !default
|
||||
$white: hsl(0, 0%, 100%) !default
|
||||
|
||||
$orange: hsl(14, 100%, 53%) !default
|
||||
$yellow: hsl(44, 100%, 77%) !default
|
||||
$green: hsl(153, 53%, 53%) !default
|
||||
$turquoise: hsl(171, 100%, 41%) !default
|
||||
$cyan: hsl(207, 61%, 53%) !default
|
||||
$blue: hsl(229, 53%, 53%) !default
|
||||
$purple: hsl(271, 100%, 71%) !default
|
||||
$red: hsl(348, 86%, 61%) !default
|
||||
|
||||
// Typography
|
||||
|
||||
$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
|
||||
$family-monospace: monospace !default
|
||||
$render-mode: optimizeLegibility !default
|
||||
|
||||
$size-1: 3rem !default
|
||||
$size-2: 2.5rem !default
|
||||
$size-3: 2rem !default
|
||||
$size-4: 1.5rem !default
|
||||
$size-5: 1.25rem !default
|
||||
$size-6: 1rem !default
|
||||
$size-7: 0.75rem !default
|
||||
|
||||
$weight-light: 300 !default
|
||||
$weight-normal: 400 !default
|
||||
$weight-medium: 500 !default
|
||||
$weight-semibold: 600 !default
|
||||
$weight-bold: 700 !default
|
||||
|
||||
// Spacing
|
||||
|
||||
$block-spacing: 1.5rem !default
|
||||
|
||||
// Responsiveness
|
||||
|
||||
// The container horizontal gap, which acts as the offset for breakpoints
|
||||
$gap: 32px !default
|
||||
// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
|
||||
$tablet: 769px !default
|
||||
// 960px container + 4rem
|
||||
$desktop: 960px + (2 * $gap) !default
|
||||
// 1152px container + 4rem
|
||||
$widescreen: 1152px + (2 * $gap) !default
|
||||
$widescreen-enabled: true !default
|
||||
// 1344px container + 4rem
|
||||
$fullhd: 1344px + (2 * $gap) !default
|
||||
$fullhd-enabled: true !default
|
||||
$breakpoints: ("mobile": ("until": $tablet), "tablet": ("from": $tablet), "tablet-only": ("from": $tablet, "until": $desktop), "touch": ("from": $desktop), "desktop": ("from": $desktop), "desktop-only": ("from": $desktop, "until": $widescreen), "until-widescreen": ("until": $widescreen), "widescreen": ("from": $widescreen), "widescreen-only": ("from": $widescreen, "until": $fullhd), "until-fullhd": ("until": $fullhd), "fullhd": ("from": $fullhd)) !default
|
||||
|
||||
// Miscellaneous
|
||||
|
||||
$easing: ease-out !default
|
||||
$radius-small: 2px !default
|
||||
$radius: 4px !default
|
||||
$radius-large: 6px !default
|
||||
$radius-rounded: 9999px !default
|
||||
$speed: 86ms !default
|
||||
|
||||
// Flags
|
||||
|
||||
$variable-columns: true !default
|
||||
$rtl: false !default
|
||||
155
sass/utilities/initial-variables.scss
Normal file
155
sass/utilities/initial-variables.scss
Normal file
@@ -0,0 +1,155 @@
|
||||
// Scheme Hue and Saturation
|
||||
|
||||
$scheme-h: 221;
|
||||
$scheme-s: 14%;
|
||||
$dark-l: 20%;
|
||||
$light-l: 90%;
|
||||
|
||||
// Colors
|
||||
|
||||
$black: hsl(221, 14%, 4%) !default;
|
||||
$black-bis: hsl(221, 14%, 9%) !default;
|
||||
$black-ter: hsl(221, 14%, 14%) !default;
|
||||
|
||||
$grey-darker: hsl(221, 14%, 21%) !default;
|
||||
$grey-dark: hsl(221, 14%, 29%) !default;
|
||||
$grey: hsl(221, 14%, 48%) !default;
|
||||
$grey-light: hsl(221, 14%, 71%) !default;
|
||||
$grey-lighter: hsl(221, 14%, 86%) !default;
|
||||
$grey-lightest: hsl(221, 14%, 93%) !default;
|
||||
|
||||
$white-ter: hsl(221, 14%, 96%) !default;
|
||||
$white-bis: hsl(221, 14%, 98%) !default;
|
||||
$white: hsl(221, 14%, 100%) !default;
|
||||
|
||||
$orange: hsl(14, 100%, 53%) !default;
|
||||
$yellow: hsl(42, 100%, 53%) !default;
|
||||
$green: hsl(153, 53%, 53%) !default;
|
||||
$turquoise: hsl(171, 100%, 41%) !default;
|
||||
$cyan: hsl(198, 100%, 70%) !default;
|
||||
$blue: hsl(233, 100%, 63%) !default;
|
||||
$purple: hsl(271, 100%, 71%) !default;
|
||||
$red: hsl(348, 100%, 70%) !default;
|
||||
|
||||
// Typography
|
||||
|
||||
$family-sans-serif: "Inter", "SF Pro", "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
|
||||
"Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
|
||||
$family-monospace: "Inconsolata", "Hack", "SF Mono", "Roboto Mono",
|
||||
"Source Code Pro", "Ubuntu Mono", monospace !default;
|
||||
$render-mode: optimizeLegibility !default;
|
||||
|
||||
$size-1: 3rem !default;
|
||||
$size-2: 2.5rem !default;
|
||||
$size-3: 2rem !default;
|
||||
$size-4: 1.5rem !default;
|
||||
$size-5: 1.25rem !default;
|
||||
$size-6: 1rem !default;
|
||||
$size-7: 0.75rem !default;
|
||||
|
||||
$weight-light: 300 !default;
|
||||
$weight-normal: 400 !default;
|
||||
$weight-medium: 500 !default;
|
||||
$weight-semibold: 600 !default;
|
||||
$weight-bold: 700 !default;
|
||||
$weight-extrabold: 800 !default;
|
||||
|
||||
// Spacing
|
||||
|
||||
$block-spacing: 1.5rem !default;
|
||||
$aspect-ratios: (
|
||||
(1, 1),
|
||||
(5, 4),
|
||||
(4, 3),
|
||||
(3, 2),
|
||||
(5, 3),
|
||||
(16, 9),
|
||||
(2, 1),
|
||||
(3, 1),
|
||||
(4, 5),
|
||||
(3, 4),
|
||||
(2, 3),
|
||||
(3, 5),
|
||||
(9, 16),
|
||||
(1, 2),
|
||||
(1, 3)
|
||||
) !default;
|
||||
|
||||
// Responsiveness
|
||||
|
||||
// The container horizontal gap, which acts as the offset for breakpoints
|
||||
$gap: 32px !default;
|
||||
|
||||
// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
|
||||
$tablet: 769px !default;
|
||||
|
||||
// 960px container + 4rem
|
||||
$desktop: 960px + 2 * $gap !default;
|
||||
|
||||
// 1152px container + 4rem
|
||||
$widescreen: 1152px + 2 * $gap !default;
|
||||
$widescreen-enabled: true !default;
|
||||
|
||||
// 1344px container + 4rem
|
||||
$fullhd: 1344px + 2 * $gap !default;
|
||||
$fullhd-enabled: true !default;
|
||||
$breakpoints: (
|
||||
"mobile": (
|
||||
"until": $tablet,
|
||||
),
|
||||
"tablet": (
|
||||
"from": $tablet,
|
||||
),
|
||||
"tablet-only": (
|
||||
"from": $tablet,
|
||||
"until": $desktop,
|
||||
),
|
||||
"touch": (
|
||||
"from": $desktop,
|
||||
),
|
||||
"desktop": (
|
||||
"from": $desktop,
|
||||
),
|
||||
"desktop-only": (
|
||||
"from": $desktop,
|
||||
"until": $widescreen,
|
||||
),
|
||||
"until-widescreen": (
|
||||
"until": $widescreen,
|
||||
),
|
||||
"widescreen": (
|
||||
"from": $widescreen,
|
||||
),
|
||||
"widescreen-only": (
|
||||
"from": $widescreen,
|
||||
"until": $fullhd,
|
||||
),
|
||||
"until-fullhd": (
|
||||
"until": $fullhd,
|
||||
),
|
||||
"fullhd": (
|
||||
"from": $fullhd,
|
||||
),
|
||||
) !default;
|
||||
|
||||
// Miscellaneous
|
||||
|
||||
$easing: ease-out !default;
|
||||
$radius-small: 0.25rem !default;
|
||||
$radius: 0.375rem !default;
|
||||
$radius-medium: 0.5em !default;
|
||||
$radius-large: 0.75rem !default;
|
||||
$radius-rounded: 9999px !default;
|
||||
$speed: 86ms !default;
|
||||
|
||||
// Flags
|
||||
|
||||
$variable-columns: true !default;
|
||||
$rtl: false !default;
|
||||
|
||||
// Prefixes
|
||||
|
||||
$class-prefix: "" !default;
|
||||
$cssvars-prefix: "bulma-" !default;
|
||||
$helpers-prefix: "is-" !default;
|
||||
$helpers-has-prefix: "has-" !default;
|
||||
@@ -1,303 +0,0 @@
|
||||
@import "derived-variables"
|
||||
|
||||
=clearfix
|
||||
&::after
|
||||
clear: both
|
||||
content: " "
|
||||
display: table
|
||||
|
||||
=center($width, $height: 0)
|
||||
position: absolute
|
||||
@if $height != 0
|
||||
left: calc(50% - (#{$width} * 0.5))
|
||||
top: calc(50% - (#{$height} * 0.5))
|
||||
@else
|
||||
left: calc(50% - (#{$width} * 0.5))
|
||||
top: calc(50% - (#{$width} * 0.5))
|
||||
|
||||
=fa($size, $dimensions)
|
||||
display: inline-block
|
||||
font-size: $size
|
||||
height: $dimensions
|
||||
line-height: $dimensions
|
||||
text-align: center
|
||||
vertical-align: top
|
||||
width: $dimensions
|
||||
|
||||
=hamburger($dimensions)
|
||||
-moz-appearance: none
|
||||
-webkit-appearance: none
|
||||
appearance: none
|
||||
background: none
|
||||
border: none
|
||||
cursor: pointer
|
||||
display: block
|
||||
height: $dimensions
|
||||
position: relative
|
||||
width: $dimensions
|
||||
span
|
||||
background-color: currentColor
|
||||
display: block
|
||||
height: 1px
|
||||
left: calc(50% - 8px)
|
||||
position: absolute
|
||||
transform-origin: center
|
||||
transition-duration: $speed
|
||||
transition-property: background-color, opacity, transform
|
||||
transition-timing-function: $easing
|
||||
width: 16px
|
||||
&:nth-child(1)
|
||||
top: calc(50% - 6px)
|
||||
&:nth-child(2)
|
||||
top: calc(50% - 1px)
|
||||
&:nth-child(3)
|
||||
top: calc(50% + 4px)
|
||||
&:hover
|
||||
background-color: bulmaRgba(black, 0.05)
|
||||
// Modifers
|
||||
&.is-active
|
||||
span
|
||||
&:nth-child(1)
|
||||
transform: translateY(5px) rotate(45deg)
|
||||
&:nth-child(2)
|
||||
opacity: 0
|
||||
&:nth-child(3)
|
||||
transform: translateY(-5px) rotate(-45deg)
|
||||
|
||||
=overflow-touch
|
||||
-webkit-overflow-scrolling: touch
|
||||
|
||||
=placeholder
|
||||
$placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
|
||||
@each $placeholder in $placeholders
|
||||
&:#{$placeholder}-placeholder
|
||||
@content
|
||||
|
||||
=reset
|
||||
-moz-appearance: none
|
||||
-webkit-appearance: none
|
||||
appearance: none
|
||||
background: none
|
||||
border: none
|
||||
color: currentColor
|
||||
font-family: inherit
|
||||
font-size: 1em
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
// Responsiveness
|
||||
|
||||
=from($device)
|
||||
@media screen and (min-width: $device)
|
||||
@content
|
||||
|
||||
=until($device)
|
||||
@media screen and (max-width: $device - 1px)
|
||||
@content
|
||||
|
||||
=between($from, $until)
|
||||
@media screen and (min-width: $from) and (max-width: $until - 1px)
|
||||
@content
|
||||
|
||||
=mobile
|
||||
@media screen and (max-width: $tablet - 1px)
|
||||
@content
|
||||
|
||||
=tablet
|
||||
@media screen and (min-width: $tablet), print
|
||||
@content
|
||||
|
||||
=tablet-only
|
||||
@media screen and (min-width: $tablet) and (max-width: $desktop - 1px)
|
||||
@content
|
||||
|
||||
=touch
|
||||
@media screen and (max-width: $desktop - 1px)
|
||||
@content
|
||||
|
||||
=desktop
|
||||
@media screen and (min-width: $desktop)
|
||||
@content
|
||||
|
||||
=desktop-only
|
||||
@if $widescreen-enabled
|
||||
@media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
|
||||
@content
|
||||
|
||||
=until-widescreen
|
||||
@if $widescreen-enabled
|
||||
@media screen and (max-width: $widescreen - 1px)
|
||||
@content
|
||||
|
||||
=widescreen
|
||||
@if $widescreen-enabled
|
||||
@media screen and (min-width: $widescreen)
|
||||
@content
|
||||
|
||||
=widescreen-only
|
||||
@if $widescreen-enabled and $fullhd-enabled
|
||||
@media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)
|
||||
@content
|
||||
|
||||
=until-fullhd
|
||||
@if $fullhd-enabled
|
||||
@media screen and (max-width: $fullhd - 1px)
|
||||
@content
|
||||
|
||||
=fullhd
|
||||
@if $fullhd-enabled
|
||||
@media screen and (min-width: $fullhd)
|
||||
@content
|
||||
|
||||
=breakpoint($name)
|
||||
$breakpoint: map-get($breakpoints, $name)
|
||||
@if $breakpoint
|
||||
$from: map-get($breakpoint, "from")
|
||||
$until: map-get($breakpoint, "until")
|
||||
@if $from and $until
|
||||
+between($from, $until)
|
||||
@content
|
||||
@else if $from
|
||||
+from($from)
|
||||
@content
|
||||
@else if $until
|
||||
+until($until)
|
||||
@content
|
||||
|
||||
=ltr
|
||||
@if not $rtl
|
||||
@content
|
||||
|
||||
=rtl
|
||||
@if $rtl
|
||||
@content
|
||||
|
||||
=ltr-property($property, $spacing, $right: true)
|
||||
$normal: if($right, "right", "left")
|
||||
$opposite: if($right, "left", "right")
|
||||
@if $rtl
|
||||
#{$property}-#{$opposite}: $spacing
|
||||
@else
|
||||
#{$property}-#{$normal}: $spacing
|
||||
|
||||
=ltr-position($spacing, $right: true)
|
||||
$normal: if($right, "right", "left")
|
||||
$opposite: if($right, "left", "right")
|
||||
@if $rtl
|
||||
#{$opposite}: $spacing
|
||||
@else
|
||||
#{$normal}: $spacing
|
||||
|
||||
// Placeholders
|
||||
|
||||
=unselectable
|
||||
-webkit-touch-callout: none
|
||||
-webkit-user-select: none
|
||||
-moz-user-select: none
|
||||
-ms-user-select: none
|
||||
user-select: none
|
||||
|
||||
=arrow($color: transparent)
|
||||
border: 3px solid $color
|
||||
border-radius: 2px
|
||||
border-right: 0
|
||||
border-top: 0
|
||||
content: " "
|
||||
display: block
|
||||
height: 0.625em
|
||||
margin-top: -0.4375em
|
||||
pointer-events: none
|
||||
position: absolute
|
||||
top: 50%
|
||||
transform: rotate(-45deg)
|
||||
transform-origin: center
|
||||
width: 0.625em
|
||||
|
||||
=block($spacing: $block-spacing)
|
||||
&:not(:last-child)
|
||||
margin-bottom: $spacing
|
||||
|
||||
=delete
|
||||
+unselectable
|
||||
-moz-appearance: none
|
||||
-webkit-appearance: none
|
||||
background-color: bulmaRgba($scheme-invert, 0.2)
|
||||
border: none
|
||||
border-radius: $radius-rounded
|
||||
cursor: pointer
|
||||
pointer-events: auto
|
||||
display: inline-block
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
font-size: 0
|
||||
height: 20px
|
||||
max-height: 20px
|
||||
max-width: 20px
|
||||
min-height: 20px
|
||||
min-width: 20px
|
||||
outline: none
|
||||
position: relative
|
||||
vertical-align: top
|
||||
width: 20px
|
||||
&::before,
|
||||
&::after
|
||||
background-color: $scheme-main
|
||||
content: ""
|
||||
display: block
|
||||
left: 50%
|
||||
position: absolute
|
||||
top: 50%
|
||||
transform: translateX(-50%) translateY(-50%) rotate(45deg)
|
||||
transform-origin: center center
|
||||
&::before
|
||||
height: 2px
|
||||
width: 50%
|
||||
&::after
|
||||
height: 50%
|
||||
width: 2px
|
||||
&:hover,
|
||||
&:focus
|
||||
background-color: bulmaRgba($scheme-invert, 0.3)
|
||||
&:active
|
||||
background-color: bulmaRgba($scheme-invert, 0.4)
|
||||
// Sizes
|
||||
&.is-small
|
||||
height: 16px
|
||||
max-height: 16px
|
||||
max-width: 16px
|
||||
min-height: 16px
|
||||
min-width: 16px
|
||||
width: 16px
|
||||
&.is-medium
|
||||
height: 24px
|
||||
max-height: 24px
|
||||
max-width: 24px
|
||||
min-height: 24px
|
||||
min-width: 24px
|
||||
width: 24px
|
||||
&.is-large
|
||||
height: 32px
|
||||
max-height: 32px
|
||||
max-width: 32px
|
||||
min-height: 32px
|
||||
min-width: 32px
|
||||
width: 32px
|
||||
|
||||
=loader
|
||||
animation: spinAround 500ms infinite linear
|
||||
border: 2px solid $grey-lighter
|
||||
border-radius: $radius-rounded
|
||||
border-right-color: transparent
|
||||
border-top-color: transparent
|
||||
content: ""
|
||||
display: block
|
||||
height: 1em
|
||||
position: relative
|
||||
width: 1em
|
||||
|
||||
=overlay($offset: 0)
|
||||
bottom: $offset
|
||||
left: $offset
|
||||
position: absolute
|
||||
right: $offset
|
||||
top: $offset
|
||||
460
sass/utilities/mixins.scss
Normal file
460
sass/utilities/mixins.scss
Normal file
@@ -0,0 +1,460 @@
|
||||
@use "initial-variables" as iv;
|
||||
@use "css-variables" as cv;
|
||||
|
||||
@mixin arrow($color: #{cv.getVar("link")}) {
|
||||
border: 0.125em solid $color;
|
||||
border-right: 0;
|
||||
border-top: 0;
|
||||
content: " ";
|
||||
display: block;
|
||||
height: 0.625em;
|
||||
margin-top: -0.4375em;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: rotate(-45deg);
|
||||
transform-origin: center;
|
||||
transition-duration: cv.getVar("duration");
|
||||
transition-property: border-color;
|
||||
width: 0.625em;
|
||||
}
|
||||
|
||||
@mixin block($spacing: cv.getVar("block-spacing")) {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: $spacing;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin center($width, $height: 0) {
|
||||
position: absolute;
|
||||
@if $height != 0 {
|
||||
left: calc(50% - (#{$width} * 0.5));
|
||||
top: calc(50% - (#{$height} * 0.5));
|
||||
} @else {
|
||||
left: calc(50% - (#{$width} * 0.5));
|
||||
top: calc(50% - (#{$width} * 0.5));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin clearfix {
|
||||
&::after {
|
||||
clear: both;
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin delete {
|
||||
@include cv.register-vars(
|
||||
(
|
||||
"delete-dimensions": 1.25rem,
|
||||
"delete-background-l": 0%,
|
||||
"delete-background-alpha": 0.5,
|
||||
"delete-color": #{cv.getVar("white")},
|
||||
)
|
||||
);
|
||||
|
||||
appearance: none;
|
||||
background-color: hsla(
|
||||
#{cv.getVar("scheme-h")},
|
||||
#{cv.getVar("scheme-s")},
|
||||
#{cv.getVar("delete-background-l")},
|
||||
#{cv.getVar("delete-background-alpha")}
|
||||
);
|
||||
border: none;
|
||||
border-radius: cv.getVar("radius-rounded");
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
display: inline-flex;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
font-size: 1em;
|
||||
height: cv.getVar("delete-dimensions");
|
||||
max-height: cv.getVar("delete-dimensions");
|
||||
max-width: cv.getVar("delete-dimensions");
|
||||
min-height: cv.getVar("delete-dimensions");
|
||||
min-width: cv.getVar("delete-dimensions");
|
||||
outline: none;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
width: cv.getVar("delete-dimensions");
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
background-color: cv.getVar("delete-color");
|
||||
content: "";
|
||||
display: block;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%) rotate(45deg);
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
&::before {
|
||||
height: 2px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
height: 50%;
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@include cv.register-var("delete-background-alpha", 0.4);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@include cv.register-var("delete-background-alpha", 0.5);
|
||||
}
|
||||
|
||||
// Sizes
|
||||
&.#{iv.$class-prefix}is-small {
|
||||
@include cv.register-var("delete-dimensions", 1rem);
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-medium {
|
||||
@include cv.register-var("delete-dimensions", 1.5rem);
|
||||
}
|
||||
|
||||
&.#{iv.$class-prefix}is-large {
|
||||
@include cv.register-var("delete-dimensions", 2rem);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fa($size, $dimensions) {
|
||||
display: inline-block;
|
||||
font-size: $size;
|
||||
height: $dimensions;
|
||||
line-height: $dimensions;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
width: $dimensions;
|
||||
}
|
||||
|
||||
@mixin burger($dimensions) {
|
||||
align-items: center;
|
||||
appearance: none;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: cv.getVar("burger-border-radius");
|
||||
color: hsl(
|
||||
cv.getVar("burger-h"),
|
||||
cv.getVar("burger-s"),
|
||||
cv.getVar("burger-l")
|
||||
);
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
height: $dimensions;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
width: $dimensions;
|
||||
|
||||
span {
|
||||
background-color: currentColor;
|
||||
display: block;
|
||||
height: cv.getVar("burger-item-height");
|
||||
left: calc(50% - calc(#{cv.getVar("burger-item-width")}) / 2);
|
||||
position: absolute;
|
||||
transform-origin: center;
|
||||
transition-duration: cv.getVar("duration");
|
||||
transition-property: background-color, color, opacity, transform;
|
||||
transition-timing-function: cv.getVar("easing");
|
||||
width: cv.getVar("burger-item-width");
|
||||
|
||||
&:nth-child(1),
|
||||
&:nth-child(2) {
|
||||
top: calc(50% - calc(#{cv.getVar("burger-item-height")}) / 2);
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
bottom: calc(50% + #{cv.getVar("burger-gap")});
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
top: calc(50% + #{cv.getVar("burger-gap")});
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: hsla(
|
||||
cv.getVar("burger-h"),
|
||||
cv.getVar("burger-s"),
|
||||
cv.getVar("burger-l"),
|
||||
0.1
|
||||
);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: hsla(
|
||||
cv.getVar("burger-h"),
|
||||
cv.getVar("burger-s"),
|
||||
cv.getVar("burger-l"),
|
||||
0.2
|
||||
);
|
||||
}
|
||||
|
||||
// Modifers
|
||||
&.#{iv.$class-prefix}is-active {
|
||||
span {
|
||||
&:nth-child(1) {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
&:nth-child(3),
|
||||
&:nth-child(4) {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin overflow-touch {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
@mixin placeholder {
|
||||
$placeholders: ":-moz" ":-webkit-input" "-moz" "-ms-input";
|
||||
|
||||
@each $placeholder in $placeholders {
|
||||
&:#{$placeholder}-placeholder {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin reset {
|
||||
appearance: none;
|
||||
background: none;
|
||||
border: none;
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
font-size: 1em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@mixin selection($current-selector: false) {
|
||||
@if $current-selector {
|
||||
&::-moz-selection {
|
||||
@content;
|
||||
}
|
||||
&::selection {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
::-moz-selection {
|
||||
@content;
|
||||
}
|
||||
::selection {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsiveness
|
||||
|
||||
@mixin from($device) {
|
||||
@media screen and (min-width: $device) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin until($device) {
|
||||
@media screen and (max-width: ($device - 1px)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin between($from, $until) {
|
||||
@media screen and (min-width: $from) and (max-width: ($until - 1px)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mobile {
|
||||
@media screen and (max-width: (iv.$tablet - 1px)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tablet {
|
||||
@media screen and (min-width: iv.$tablet), print {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tablet-only {
|
||||
@media screen and (min-width: iv.$tablet) and (max-width: (iv.$desktop - 1px)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin touch {
|
||||
@media screen and (max-width: (iv.$desktop - 1px)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin desktop {
|
||||
@media screen and (min-width: iv.$desktop) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin desktop-only {
|
||||
@if iv.$widescreen-enabled {
|
||||
@media screen and (min-width: iv.$desktop) and (max-width: (iv.$widescreen - 1px)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin until-widescreen {
|
||||
@if iv.$widescreen-enabled {
|
||||
@media screen and (max-width: (iv.$widescreen - 1px)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin widescreen {
|
||||
@if iv.$widescreen-enabled {
|
||||
@media screen and (min-width: iv.$widescreen) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin widescreen-only {
|
||||
@if iv.$widescreen-enabled and iv.$fullhd-enabled {
|
||||
@media screen and (min-width: iv.$widescreen) and (max-width: (iv.$fullhd - 1px)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin until-fullhd {
|
||||
@if iv.$fullhd-enabled {
|
||||
@media screen and (max-width: (iv.$fullhd - 1px)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fullhd {
|
||||
@if iv.$fullhd-enabled {
|
||||
@media screen and (min-width: iv.$fullhd) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin breakpoint($name) {
|
||||
$breakpoint: map-get(iv.$breakpoints, $name);
|
||||
|
||||
@if $breakpoint {
|
||||
$from: map-get($breakpoint, "from");
|
||||
$until: map-get($breakpoint, "until");
|
||||
|
||||
@if $from and $until {
|
||||
@include between($from, $until) {
|
||||
@content;
|
||||
}
|
||||
} @else if $from {
|
||||
@include from($from) {
|
||||
@content;
|
||||
}
|
||||
} @else if $until {
|
||||
@include until($until) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin container-from($name, $width) {
|
||||
@container #{$name} (min-width: #{$width}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin container-until($name, $width) {
|
||||
@container #{$name} (max-width: #{$width - 1px}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ltr {
|
||||
@if not iv.$rtl {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin rtl {
|
||||
@if iv.$rtl {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ltr-property($property, $spacing, $right: true) {
|
||||
$normal: if($right, "right", "left");
|
||||
$opposite: if($right, "left", "right");
|
||||
|
||||
@if iv.$rtl {
|
||||
#{$property}-#{$opposite}: $spacing;
|
||||
} @else {
|
||||
#{$property}-#{$normal}: $spacing;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ltr-position($spacing, $right: true) {
|
||||
$normal: if($right, "right", "left");
|
||||
$opposite: if($right, "left", "right");
|
||||
|
||||
@if iv.$rtl {
|
||||
#{$opposite}: $spacing;
|
||||
} @else {
|
||||
#{$normal}: $spacing;
|
||||
}
|
||||
}
|
||||
|
||||
// Placeholders
|
||||
|
||||
@mixin unselectable {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@mixin loader {
|
||||
animation: spinAround 500ms infinite linear;
|
||||
border: 2px solid cv.getVar("loading-color");
|
||||
border-radius: cv.getVar("radius-rounded");
|
||||
border-right-color: transparent;
|
||||
border-top-color: transparent;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 1em;
|
||||
position: relative;
|
||||
width: 1em;
|
||||
}
|
||||
|
||||
@mixin overlay($offset: 0) {
|
||||
bottom: $offset;
|
||||
left: $offset;
|
||||
position: absolute;
|
||||
right: $offset;
|
||||
top: $offset;
|
||||
}
|
||||
Reference in New Issue
Block a user