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

refactor: rename style to styles

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

7
styles/bulma/sass/utilities/_index.scss Normal file
View File

@ -0,0 +1,7 @@
/* Bulma Utilities */
@charset "utf-8";
@forward "initial-variables";
@forward "functions";
@forward "derived-variables";
@forward "controls";

85
styles/bulma/sass/utilities/controls.scss Normal file
View 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
styles/bulma/sass/utilities/css-variables.scss Normal file
View 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;
}
}
}

112
styles/bulma/sass/utilities/derived-variables.scss Normal file
View 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;

34
styles/bulma/sass/utilities/extends.scss Normal file
View 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;
}

258
styles/bulma/sass/utilities/functions.scss Normal file
View 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);
}

155
styles/bulma/sass/utilities/initial-variables.scss Normal file
View 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;

460
styles/bulma/sass/utilities/mixins.scss Normal file
View 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;
}