Merge branch 'master' into css-variables-with-fallback

This commit is contained in:
Jeremy Thomas 2020-08-27 12:04:00 +02:00
commit cfa4b562b3
25 changed files with 845 additions and 447 deletions

915
css/bulma.css vendored

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

2
css/bulma.min.css vendored

File diff suppressed because one or more lines are too long

View File

@ -17,13 +17,23 @@
<tbody>
{% for shortcut in include.shortcuts %}
{% for direction in include.directions %}
<tr>
<td><code>{{ shortcut[0] }}-{{ direction[0] }}</code></td>
<td><code>{{ shortcut[1] }}{{ direction[1] }}</code></td>
{% for value in include.values %}
<td><code>{{ shortcut[1] }}{{ direction[1] }}-{{ value[0] }}</code></td>
{% endfor %}
</tr>
{% if direction[0] == 'all' %}
<tr>
<td><code>{{ shortcut[0] }}</code></td>
<td><code>{{ shortcut[1] }}</code></td>
{% for value in include.values %}
<td><code>{{ shortcut[1] }}-{{ value[0] }}</code></td>
{% endfor %}
</tr>
{% else %}
<tr>
<td><code>{{ shortcut[0] }}-{{ direction[0] }}</code></td>
<td><code>{{ shortcut[1] }}{{ direction[1] }}</code></td>
{% for value in include.values %}
<td><code>{{ shortcut[1] }}{{ direction[1] }}-{{ value[0] }}</code></td>
{% endfor %}
</tr>
{% endif %}
{% endfor %}
<tr>

View File

@ -12,6 +12,7 @@ shortcuts:
margin: m
padding: p
directions:
all: a
top: t
right: r
bottom: b

View File

@ -49,6 +49,8 @@ $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
$navbar-breakpoint: $desktop !default
$navbar-colors: $colors !default
=navbar-fixed
left: 0
position: fixed
@ -98,7 +100,7 @@ $navbar-breakpoint: $desktop !default
min-height: var(--navbar-height)
position: relative
z-index: var(--navbar-z)
@each $name, $pair in $colors
@each $name, $pair in $navbar-colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}

View File

@ -33,6 +33,8 @@ $button-static-color: $text-light !default
$button-static-background-color: $scheme-main-ter !default
$button-static-border-color: $border !default
$button-colors: $colors !default
// The button sizes use mixins so they can be used at different breakpoints
=button-small
border-radius: $radius-small
@ -115,7 +117,7 @@ $button-static-border-color: $border !default
background-color: transparent
border-color: transparent
box-shadow: none
@each $name, $pair in $colors
@each $name, $pair in $button-colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}

View File

@ -5,6 +5,8 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
$notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default
$notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default
$notification-colors: $colors !default
.notification
--notification-background-color: #{$notification-background-color}
--notification-radius: #{$notification-radius}
@ -40,7 +42,7 @@ $notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default
.content
color: currentColor
// Colors
@each $name, $pair in $colors
@each $name, $pair in $notification-colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}

View File

@ -6,6 +6,8 @@ $progress-border-radius: var(--radius-rounded, #{$radius-rounded}) !default
$progress-indeterminate-duration: 1.5s !default
$progress-colors: $colors !default
.progress
--progress-border-radius: #{$progress-border-radius}
--progress-bar-background-color: #{$progress-bar-background-color}
@ -33,7 +35,7 @@ $progress-indeterminate-duration: 1.5s !default
background-color: var(--progress-value-background-color)
border: none
// Colors
@each $name, $pair in $colors
@each $name, $pair in $progress-colors
$color: nth($pair, 1)
&.is-#{$name}
&::-webkit-progress-value

View File

@ -23,6 +23,8 @@ $table-row-active-color: var(--primary-invert, #{$primary-invert}) !default
$table-striped-row-even-background-color: var(--scheme-main-bis, #{$scheme-main-bis}) !default
$table-striped-row-even-hover-background-color: var(--scheme-main-ter, #{$scheme-main-ter}) !default
$table-colors: $colors !default
.table
--table-body-background-color: #{$table-body-background-color}
--table-color: #{$table-color}
@ -53,7 +55,7 @@ $table-striped-row-even-hover-background-color: var(--scheme-main-ter, #{$scheme
padding: var(--table-cell-padding)
vertical-align: top
// Colors
@each $name, $pair in $colors
@each $name, $pair in $table-colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}

View File

@ -3,6 +3,8 @@ $tag-color: var(--text, #{$text}) !default
$tag-radius: var(--radius, #{$radius}) !default
$tag-delete-margin: 1px !default
$tag-colors: $colors !default
.tags
align-items: center
display: flex
@ -76,7 +78,7 @@ $tag-delete-margin: 1px !default
+ltr-property("margin", 0.25rem, false)
+ltr-property("margin", -0.375rem)
// Colors
@each $name, $pair in $colors
@each $name, $pair in $tag-colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}

View File

@ -11,7 +11,8 @@
&:hover
color: var(--checkbox-radio-hover-color)
&[disabled],
fieldset[disabled] &
fieldset[disabled] &,
input[disabled]
color: var(--checkbox-radio-disabled-color)
cursor: not-allowed

View File

@ -11,6 +11,8 @@ $file-name-border-style: solid !default
$file-name-border-width: 1px 1px 1px 0 !default
$file-name-max-width: 16em !default
$file-colors: $form-colors !default
.file
--file-radius: #{$file-radius}
--file-cta-hover-color: #{$file-cta-hover-color}
@ -30,7 +32,7 @@ $file-name-max-width: 16em !default
justify-content: flex-start
position: relative
// Colors
@each $name, $pair in $colors
@each $name, $pair in $file-colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}

View File

@ -2,6 +2,8 @@ $textarea-padding: var(--control-padding-horizontal, #{$control-padding-horizont
$textarea-max-height: 40em !default
$textarea-min-height: 8em !default
$textarea-colors: $form-colors !default
%input-textarea
@extend %input
box-shadow: var(--input-shadow, #{$input-shadow})
@ -10,7 +12,7 @@ $textarea-min-height: 8em !default
&[readonly]
box-shadow: none
// Colors
@each $name, $pair in $colors
@each $name, $pair in $textarea-colors
$color: nth($pair, 1)
&.is-#{$name}
border-color: var(--#{$name}, #{$color})

View File

@ -1,3 +1,5 @@
$select-colors: $form-colors !default
.select
--select-arrow: #{$input-arrow}
--select-disabled-border-color: #{$input-disabled-border-color}
@ -45,7 +47,7 @@
&::after
border-color: var(--select-hover-color)
// Colors
@each $name, $pair in $colors
@each $name, $pair in $select-colors
$color: nth($pair, 1)
&.is-#{$name}
&:not(:hover)::after

View File

@ -1,3 +1,5 @@
$form-colors: $colors !default
$input-color: var(--text-strong, #{$text-strong}) !default
$input-background-color: var(--scheme-main, #{$scheme-main}) !default
$input-border-color: var(--border, #{$border}) !default

View File

@ -6,6 +6,8 @@ $help-size: var(--size-small, #{$size-small}) !default
$control-font-size: var(--size-normal, #{$size-normal}) !default
$label-colors: $form-colors !default
.label
--label-color: #{$label-color}
--label-font-size: #{$label-font-size}
@ -31,7 +33,7 @@ $control-font-size: var(--size-normal, #{$size-normal}) !default
display: block
font-size: var(--help-font-size)
margin-top: 0.25rem
@each $name, $pair in $colors
@each $name, $pair in $label-colors
$color: nth($pair, 1)
&.is-#{$name}
color: var(--#{$name}, #{$color})

View File

@ -2,6 +2,7 @@
@charset "utf-8"
@import "color.sass"
@import "flexbox.sass"
@import "float.sass"
@import "other.sass"
@import "overflow.sass"

35
sass/helpers/flexbox.sass Normal file
View File

@ -0,0 +1,35 @@
$flex-directions-values: row, row-reverse, column, column-reverse
@each $value in $flex-directions-values
.is-flex-direction-#{$value}
flex-direction: $value !important
$flex-wrap-values: nowrap, wrap, wrap-reverse
@each $value in $flex-wrap-values
.is-flex-wrap-#{$value}
flex-wrap: $value !important
$justify-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, start, end, left, right
@each $value in $justify-content-values
.is-justify-content-#{$value}
justify-content: $value !important
$align-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch, start, end, baseline
@each $value in $align-content-values
.is-align-content-#{$value}
align-content: $value !important
$align-items-values: stretch, flex-start, flex-end, center, baseline, start, end, self-start, self-end
@each $value in $align-items-values
.is-align-items-#{$value}
align-items: $value !important
$align-self-values: auto, flex-start, flex-end, center, baseline, stretch
@each $value in $align-self-values
.is-align-self-#{$value}
align-self: $value !important
$flex-operators: grow, shrink
@each $operator in $flex-operators
@for $i from 0 through 5
.is-flex-#{$operator}-#{$i}
flex-#{$operator}: $i !important

View File

@ -12,6 +12,9 @@ $spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5
@each $property, $shortcut in $spacing-shortcuts
@each $name, $value in $spacing-values
// All directions
.#{$shortcut}-#{$name}
#{$property}: $value !important
// Cardinal directions
@each $direction, $suffix in $spacing-directions
.#{$shortcut}#{$suffix}-#{$name}

View File

@ -3,6 +3,8 @@ $hero-body-padding-small: 1.5rem !default
$hero-body-padding-medium: 9rem 1.5rem !default
$hero-body-padding-large: 18rem 1.5rem !default
$hero-colors: $colors !default
// Main container
.hero
--hero-body-padding: #{$hero-body-padding}
@ -20,7 +22,7 @@ $hero-body-padding-large: 18rem 1.5rem !default
ul
border-bottom: none
// Colors
@each $name, $pair in $colors
@each $name, $pair in $hero-colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
&.is-#{$name}

View File

@ -3,7 +3,7 @@
@import "initial-variables.sass"
@import "functions.sass"
@import "derived-variables.scss"
@import "derived-variables.sass"
@import "animations.sass"
@import "mixins.sass"
@import "controls.sass"

View File

@ -0,0 +1,114 @@
$primary: var(--turquoise, #{$turquoise}) !default
$info: var(--cyan, #{$cyan}) !default
$success: var(--green, #{$green}) !default
$warning: var(--yellow, #{$yellow}) !default
$danger: var(--red, #{$red}) !default
$light: var(--white-ter, #{$white-ter}) !default
$dark: var(--grey-darker, #{$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, $turquoise) !default
$primary-light: findLightColor($primary, $turquoise) !default
$primary-dark: findDarkColor($primary, $turquoise) !default
$info-invert: findColorInvert($info, $cyan) !default
$info-light: findLightColor($info, $cyan) !default
$info-dark: findDarkColor($info, $cyan) !default
$success-invert: findColorInvert($success, $green) !default
$success-light: findLightColor($success, $green) !default
$success-dark: findDarkColor($success, $green) !default
$warning-invert: findColorInvert($warning, $yellow) !default
$warning-light: findLightColor($warning, $yellow) !default
$warning-dark: findDarkColor($warning, $yellow) !default
$danger-invert: findColorInvert($danger, $red) !default
$danger-light: findLightColor($danger, $red) !default
$danger-dark: findDarkColor($danger, $red) !default
$light-invert: findColorInvert($light, $white-ter) !default
$light-light: findLightColor($light, $white-ter) !default
$light-dark: findDarkColor($light, $white-ter) !default
$dark-invert: findColorInvert($dark, $grey-darker) !default
$dark-light: findLightColor($dark, $grey-darker) !default
$dark-dark: findDarkColor($dark, $grey-darker) !default
// General colors
$scheme-main: var(--white, #{$white}) !default
$scheme-main-bis: var(--white-bis, #{$white-bis}) !default
$scheme-main-ter: var(--white-ter, #{$white-ter}) !default
$scheme-invert: var(--black, #{$black}) !default
$scheme-invert-rgb: bulmaToRGB($black) !default
$scheme-invert-bis: var(--black-bis, #{$black-bis}) !default
$scheme-invert-ter: var(--black-ter, #{$black-ter}) !default
$background: var(--white-ter, #{$white-ter}) !default
$border: var(--grey-lighter, #{$grey-lighter}) !default
$border-rgb: bulmaToRGB($grey-lighter) !default
$border-hover: var(--grey-light, #{$grey-light}) !default
$border-light: var(--grey-lightest, #{$grey-lightest}) !default
$border-light-hover: var(--grey-light, #{$grey-light}) !default
// Text colors
$text: var(--grey-dark, #{$grey-dark}) !default
$text-invert: findColorInvert($text, $grey-dark) !default
$text-light: var(--grey, #{$grey}) !default
$text-strong: var(--grey-darker, #{$grey-darker}) !default
// Code colors
$code: var(--red, #{darken($red, 15%)}) !default
$code-background: var(--background, #{$background}) !default
$pre: var(--text, #{$text}) !default
$pre-background: var(--background, #{$background}) !default
// Link colors
$link: var(--blue, #{$blue}) !default
$link-rgb: bulmaToRGB($blue) !default
$link-invert: findColorInvert($link, $blue) !default
$link-light: findLightColor($link, $blue) !default
$link-dark: findDarkColor($link, $blue) !default
$link-visited: var(--purple, #{$purple}) !default
$link-hover: var(--grey-darker, #{$grey-darker}) !default
$link-hover-border: var(--grey-light, #{$grey-light}) !default
$link-focus: var(--grey-darker, #{$grey-darker}) !default
$link-focus-border: var(--blue, #{$blue}) !default
$link-active: var(--grey-darker, #{$grey-darker}) !default
$link-active-border: var(--grey-dark, #{$grey-dark}) !default
// Typography
$family-primary: var(--family-sans-serif, #{$family-sans-serif}) !default
$family-secondary: var(--family-sans-serif, #{$family-sans-serif}) !default
$family-code: var(--family-monospace, #{$family-monospace}) !default
$size-small: var(--size-7, #{size-7}) !default
$size-normal: var(--size-6, #{size-6}) !default
$size-medium: var(--size-5, #{size-5}) !default
$size-large: var(--size-4, #{size-4}) !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

View File

@ -1,139 +0,0 @@
$primary: var(--turquoise, #{$turquoise}) !default;
$info : var(--cyan, #{$cyan}) !default;
$success: var(--green, #{$green}) !default;
$warning: var(--yellow, #{$yellow}) !default;
$danger : var(--red, #{$red}) !default;
$light : var(--white-ter, #{$white-ter}) !default;
$dark : var(--grey-darker, #{$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, $turquoise) !default;
$primary-light : findLightColor($primary, $turquoise) !default;
$primary-dark : findDarkColor($primary, $turquoise) !default;
$info-invert : findColorInvert($info, $cyan) !default;
$info-light : findLightColor($info, $cyan) !default;
$info-dark : findDarkColor($info, $cyan) !default;
$success-invert : findColorInvert($success, $green) !default;
$success-light : findLightColor($success, $green) !default;
$success-dark : findDarkColor($success, $green) !default;
$warning-invert : findColorInvert($warning, $yellow) !default;
$warning-light : findLightColor($warning, $yellow) !default;
$warning-dark : findDarkColor($warning, $yellow) !default;
$danger-invert : findColorInvert($danger, $red) !default;
$danger-light : findLightColor($danger, $red) !default;
$danger-dark : findDarkColor($danger, $red) !default;
$light-invert : findColorInvert($light, $white-ter) !default;
$light-light : findLightColor($light, $white-ter) !default;
$light-dark : findDarkColor($light, $white-ter) !default;
$dark-invert : findColorInvert($dark, $grey-darker) !default;
$dark-light : findLightColor($dark, $grey-darker) !default;
$dark-dark : findDarkColor($dark, $grey-darker) !default;
// General colors
$scheme-main : var(--white, #{$white}) !default;
$scheme-main-bis : var(--white-bis, #{$white-bis}) !default;
$scheme-main-ter : var(--white-ter, #{$white-ter}) !default;
$scheme-invert : var(--black, #{$black}) !default;
$scheme-invert-rgb : bulmaToRGB($black) !default;
$scheme-invert-bis : var(--black-bis, #{$black-bis}) !default;
$scheme-invert-ter : var(--black-ter, #{$black-ter}) !default;
$background : var(--white-ter, #{$white-ter}) !default;
$border : var(--grey-lighter, #{$grey-lighter}) !default;
$border-rgb : bulmaToRGB($grey-lighter) !default;
$border-hover : var(--grey-light, #{$grey-light}) !default;
$border-light : var(--grey-lightest, #{$grey-lightest}) !default;
$border-light-hover: var(--grey-light, #{$grey-light}) !default;
// Text colors
$text : var(--grey-dark, #{$grey-dark}) !default;
$text-invert: findColorInvert($text, $grey-dark) !default;
$text-light : var(--grey, #{$grey}) !default;
$text-strong: var(--grey-darker, #{$grey-darker}) !default;
// Code colors
$code : var(--red, #{darken($red, 15%)}) !default;
$code-background: var(--background, #{$background}) !default;
$pre : var(--text, #{$text}) !default;
$pre-background : var(--background, #{$background}) !default;
// Link colors
$link : var(--blue, #{$blue}) !default;
$link-rgb : bulmaToRGB($blue) !default;
$link-invert : findColorInvert($link, $blue) !default;
$link-light : findLightColor($link, $blue) !default;
$link-dark : findDarkColor($link, $blue) !default;
$link-visited : var(--purple, #{$purple}) !default;
$link-hover : var(--grey-darker, #{$grey-darker}) !default;
$link-hover-border : var(--grey-light, #{$grey-light}) !default;
$link-focus : var(--grey-darker, #{$grey-darker}) !default;
$link-focus-border : var(--blue, #{$blue}) !default;
$link-active : var(--grey-darker, #{$grey-darker}) !default;
$link-active-border: var(--grey-dark, #{$grey-dark}) !default;
// Typography
$family-primary : var(--family-sans-serif, #{$family-sans-serif}) !default;
$family-secondary: var(--family-sans-serif, #{$family-sans-serif}) !default;
$family-code : var(--family-monospace, #{$family-monospace}) !default;
$size-small : var(--size-7, #{size-7}) !default;
$size-normal: var(--size-6, #{size-6}) !default;
$size-medium: var(--size-5, #{size-5}) !default;
$size-large : var(--size-4, #{size-4}) !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;

View File

@ -32,5 +32,10 @@ $custom-colors: (
"lavender": ($lavender, $lavender-invert, $lavender-light, $lavender-dark)
);
$spacing-shortcuts: ("margin": "mg");
$spacing-horizontal: "h";
$spacing-vertical: null;
$spacing-values: ("small": 10px, "medium": 30px, "large": 60px);
// Import the rest of Bulma
@import "../../bulma";