mirror of
https://github.com/jgthms/bulma
synced 2026-03-18 19:34:30 -07:00
Convert sass files to scss files
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"
|
||||
9
sass/utilities/_all.scss
Normal file
9
sass/utilities/_all.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
/* Bulma Utilities */
|
||||
@charset "utf-8";
|
||||
|
||||
@import "initial-variables";
|
||||
@import "functions";
|
||||
@import "derived-variables";
|
||||
@import "mixins";
|
||||
@import "controls";
|
||||
@import "extends";
|
||||
@@ -1 +0,0 @@
|
||||
@warn "The animations.sass file has MOVED. It is now in the /base folder. Please import sass/base/animations instead."
|
||||
1
sass/utilities/animations.scss
Normal file
1
sass/utilities/animations.scss
Normal file
@@ -0,0 +1 @@
|
||||
@warn "The animations.scss 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
|
||||
59
sass/utilities/controls.scss
Normal file
59
sass/utilities/controls.scss
Normal file
@@ -0,0 +1,59 @@
|
||||
@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;
|
||||
|
||||
@mixin 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
|
||||
@mixin control-small {
|
||||
border-radius: $control-radius-small;
|
||||
font-size: $size-small;
|
||||
}
|
||||
|
||||
@mixin control-medium {
|
||||
font-size: $size-medium;
|
||||
}
|
||||
|
||||
@mixin control-large {
|
||||
font-size: $size-large;
|
||||
}
|
||||
@@ -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
|
||||
114
sass/utilities/derived-variables.scss
Normal file
114
sass/utilities/derived-variables.scss
Normal file
@@ -0,0 +1,114 @@
|
||||
@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;
|
||||
@@ -1,25 +0,0 @@
|
||||
@import "mixins"
|
||||
|
||||
%control
|
||||
+control
|
||||
|
||||
%unselectable
|
||||
+unselectable
|
||||
|
||||
%arrow
|
||||
+arrow
|
||||
|
||||
%block
|
||||
+block
|
||||
|
||||
%delete
|
||||
+delete
|
||||
|
||||
%loader
|
||||
+loader
|
||||
|
||||
%overlay
|
||||
+overlay
|
||||
|
||||
%reset
|
||||
+reset
|
||||
33
sass/utilities/extends.scss
Normal file
33
sass/utilities/extends.scss
Normal file
@@ -0,0 +1,33 @@
|
||||
@import "mixins";
|
||||
|
||||
%control {
|
||||
@include control;
|
||||
}
|
||||
|
||||
%unselectable {
|
||||
@include unselectable;
|
||||
}
|
||||
|
||||
%arrow {
|
||||
@include arrow;
|
||||
}
|
||||
|
||||
%block {
|
||||
@include block;
|
||||
}
|
||||
|
||||
%delete {
|
||||
@include delete;
|
||||
}
|
||||
|
||||
%loader {
|
||||
@include loader;
|
||||
}
|
||||
|
||||
%overlay {
|
||||
@include overlay;
|
||||
}
|
||||
|
||||
%reset {
|
||||
@include reset;
|
||||
}
|
||||
@@ -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
|
||||
199
sass/utilities/functions.scss
Normal file
199
sass/utilities/functions.scss
Normal file
@@ -0,0 +1,199 @@
|
||||
@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 + 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 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) * 0.1;
|
||||
}
|
||||
|
||||
@return ($quotient + $remainder) * $sign;
|
||||
}
|
||||
@@ -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
|
||||
83
sass/utilities/initial-variables.scss
Normal file
83
sass/utilities/initial-variables.scss
Normal file
@@ -0,0 +1,83 @@
|
||||
// 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;
|
||||
@@ -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
|
||||
415
sass/utilities/mixins.scss
Normal file
415
sass/utilities/mixins.scss
Normal file
@@ -0,0 +1,415 @@
|
||||
@import "derived-variables";
|
||||
|
||||
@mixin clearfix {
|
||||
&::after {
|
||||
clear: both;
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
}
|
||||
|
||||
@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 fa($size, $dimensions) {
|
||||
display: inline-block;
|
||||
font-size: $size;
|
||||
height: $dimensions;
|
||||
line-height: $dimensions;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
width: $dimensions;
|
||||
}
|
||||
|
||||
@mixin 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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 {
|
||||
-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
|
||||
|
||||
@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: $tablet - 1px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tablet {
|
||||
@media screen and (min-width: $tablet), print {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tablet-only {
|
||||
@media screen and (min-width: $tablet) and (max-width: $desktop - 1px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin touch {
|
||||
@media screen and (max-width: $desktop - 1px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin desktop {
|
||||
@media screen and (min-width: $desktop) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin desktop-only {
|
||||
@if $widescreen-enabled {
|
||||
@media screen and (min-width: $desktop) and (max-width: $widescreen - 1px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin until-widescreen {
|
||||
@if $widescreen-enabled {
|
||||
@media screen and (max-width: $widescreen - 1px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin widescreen {
|
||||
@if $widescreen-enabled {
|
||||
@media screen and (min-width: $widescreen) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin widescreen-only {
|
||||
@if $widescreen-enabled and $fullhd-enabled {
|
||||
@media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin until-fullhd {
|
||||
@if $fullhd-enabled {
|
||||
@media screen and (max-width: $fullhd - 1px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fullhd {
|
||||
@if $fullhd-enabled {
|
||||
@media screen and (min-width: $fullhd) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin breakpoint($name) {
|
||||
$breakpoint: map-get($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 ltr {
|
||||
@if not $rtl {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin rtl {
|
||||
@if $rtl {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin 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;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin ltr-position($spacing, $right: true) {
|
||||
$normal: if($right, "right", "left");
|
||||
$opposite: if($right, "left", "right");
|
||||
|
||||
@if $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 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;
|
||||
}
|
||||
|
||||
@mixin block($spacing: $block-spacing) {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: $spacing;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin delete {
|
||||
@include 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;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin 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;
|
||||
}
|
||||
|
||||
@mixin overlay($offset: 0) {
|
||||
bottom: $offset;
|
||||
left: $offset;
|
||||
position: absolute;
|
||||
right: $offset;
|
||||
top: $offset;
|
||||
}
|
||||
Reference in New Issue
Block a user