From f18da99551e5b28a20c5d26d47b6e6464bb5fd6a Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Sun, 10 May 2020 14:47:06 +0100 Subject: [PATCH 1/6] Add new spacing helpers --- .gitignore | 2 + docs/_layouts/default.html | 5 +- sass/components/_all.sass | 1 - sass/components/list.sass | 40 +------- sass/helpers/_all.sass | 10 ++ sass/helpers/color.sass | 16 ++++ sass/helpers/float.sass | 8 ++ sass/helpers/other.sass | 8 ++ sass/helpers/overflow.sass | 2 + sass/helpers/position.sass | 5 + sass/helpers/spacing.sass | 28 ++++++ sass/helpers/typography.sass | 98 +++++++++++++++++++ sass/helpers/visibility.sass | 122 ++++++++++++++++++++++++ sass/utilities/_all.sass | 2 +- sass/utilities/derived-variables.sass | 106 --------------------- sass/utilities/derived-variables.scss | 132 ++++++++++++++++++++++++++ 16 files changed, 436 insertions(+), 149 deletions(-) create mode 100644 sass/helpers/_all.sass create mode 100644 sass/helpers/color.sass create mode 100644 sass/helpers/float.sass create mode 100644 sass/helpers/other.sass create mode 100644 sass/helpers/overflow.sass create mode 100644 sass/helpers/position.sass create mode 100644 sass/helpers/spacing.sass create mode 100644 sass/helpers/typography.sass create mode 100644 sass/helpers/visibility.sass delete mode 100644 sass/utilities/derived-variables.sass create mode 100644 sass/utilities/derived-variables.scss diff --git a/.gitignore b/.gitignore index e4b30d7f..3a7186da 100644 --- a/.gitignore +++ b/.gitignore @@ -3,6 +3,8 @@ .DS_Store .ruby-version npm-debug.log +test.css +test.css.map test.html test.sass diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 8237e391..b396b5ff 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -7,7 +7,8 @@ - {% include global/deprecated.html %} {% include global/notice.html %} {{ - content }} {% include global/footer.html %} + {% include global/deprecated.html %} + {{ content }} + {% include global/footer.html %} diff --git a/sass/components/_all.sass b/sass/components/_all.sass index 88fd45c5..1de2c214 100644 --- a/sass/components/_all.sass +++ b/sass/components/_all.sass @@ -4,7 +4,6 @@ @import "card.sass" @import "dropdown.sass" @import "level.sass" -@import "list.sass" @import "media.sass" @import "menu.sass" @import "message.sass" diff --git a/sass/components/list.sass b/sass/components/list.sass index bc99428a..23ee365d 100644 --- a/sass/components/list.sass +++ b/sass/components/list.sass @@ -1,39 +1 @@ -$list-background-color: $scheme-main !default -$list-shadow: 0 2px 3px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1) !default -$list-radius: $radius !default - -$list-item-border: 1px solid $border !default -$list-item-color: $text !default -$list-item-active-background-color: $link !default -$list-item-active-color: $link-invert !default -$list-item-hover-background-color: $background !default - -.list - @extend %block - background-color: $list-background-color - border-radius: $list-radius - box-shadow: $list-shadow - // &.is-hoverable > .list-item:hover:not(.is-active) - // background-color: $list-item-hover-background-color - // cursor: pointer - -.list-item - display: block - padding: 0.5em 1em - &:not(a) - color: $list-item-color - &:first-child - border-top-left-radius: $list-radius - border-top-right-radius: $list-radius - &:last-child - border-bottom-left-radius: $list-radius - border-bottom-right-radius: $list-radius - &:not(:last-child) - border-bottom: $list-item-border - &.is-active - background-color: $list-item-active-background-color - color: $list-item-active-color - -a.list-item - background-color: $list-item-hover-background-color - cursor: pointer +@warn "The list.sass file is DEPRECATED. Please use sass/components/panel instead." diff --git a/sass/helpers/_all.sass b/sass/helpers/_all.sass new file mode 100644 index 00000000..89ef0a7f --- /dev/null +++ b/sass/helpers/_all.sass @@ -0,0 +1,10 @@ +@charset "utf-8" + +@import "color.sass" +@import "float.sass" +@import "other.sass" +@import "overflow.sass" +@import "position.sass" +@import "spacing.sass" +@import "typography.sass" +@import "visibility.sass" diff --git a/sass/helpers/color.sass b/sass/helpers/color.sass new file mode 100644 index 00000000..b2e89edb --- /dev/null +++ b/sass/helpers/color.sass @@ -0,0 +1,16 @@ +@each $name, $pair in $colors + $color: nth($pair, 1) + .has-text-#{$name} + color: $color !important + a.has-text-#{$name} + &:hover, + &:focus + color: bulmaDarken($color, 10%) !important + .has-background-#{$name} + background-color: $color !important + +@each $name, $shade in $shades + .has-text-#{$name} + color: $shade !important + .has-background-#{$name} + background-color: $shade !important diff --git a/sass/helpers/float.sass b/sass/helpers/float.sass new file mode 100644 index 00000000..fc77f179 --- /dev/null +++ b/sass/helpers/float.sass @@ -0,0 +1,8 @@ +.is-clearfix + +clearfix + +.is-pulled-left + float: left !important + +.is-pulled-right + float: right !important diff --git a/sass/helpers/other.sass b/sass/helpers/other.sass new file mode 100644 index 00000000..9aa271b3 --- /dev/null +++ b/sass/helpers/other.sass @@ -0,0 +1,8 @@ +.is-radiusless + border-radius: 0 !important + +.is-shadowless + box-shadow: none !important + +.is-unselectable + @extend %unselectable diff --git a/sass/helpers/overflow.sass b/sass/helpers/overflow.sass new file mode 100644 index 00000000..ef1e3ef0 --- /dev/null +++ b/sass/helpers/overflow.sass @@ -0,0 +1,2 @@ +.is-clipped + overflow: hidden !important diff --git a/sass/helpers/position.sass b/sass/helpers/position.sass new file mode 100644 index 00000000..083b36b7 --- /dev/null +++ b/sass/helpers/position.sass @@ -0,0 +1,5 @@ +.is-overlay + @extend %overlay + +.is-relative + position: relative !important diff --git a/sass/helpers/spacing.sass b/sass/helpers/spacing.sass new file mode 100644 index 00000000..03b474c4 --- /dev/null +++ b/sass/helpers/spacing.sass @@ -0,0 +1,28 @@ +.is-marginless + margin: 0 !important + +.is-paddingless + padding: 0 !important + +$spacing-shortcuts: ("margin": "m", "padding": "p") !default +$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default +$spacing-horizontal: "x" !default +$spacing-vertical: "y" !default +$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem) !default + +@each $property, $shortcut in $spacing-shortcuts + @each $direction, $suffix in $spacing-directions + @each $name, $value in $spacing-values + // Cardinal directions + .#{$shortcut}#{$suffix}-#{$name} + #{$property}-#{$direction}: $value !important + // Horizontal axis + @if $spacing-horizontal != null + .#{$shortcut}#{$spacing-horizontal}-#{$name} + #{$property}-left: $value !important + #{$property}-right: $value !important + // Vertical axis + @if $spacing-vertical != null + .#{$shortcut}#{$spacing-vertical}-#{$name} + #{$property}-top: $value !important + #{$property}-bottom: $value !important diff --git a/sass/helpers/typography.sass b/sass/helpers/typography.sass new file mode 100644 index 00000000..eafd7e09 --- /dev/null +++ b/sass/helpers/typography.sass @@ -0,0 +1,98 @@ +=typography-size($target:'') + @each $size in $sizes + $i: index($sizes, $size) + .is-size-#{$i}#{if($target == '', '', '-' + $target)} + font-size: $size !important + ++typography-size() + ++mobile + +typography-size('mobile') + ++tablet + +typography-size('tablet') + ++touch + +typography-size('touch') + ++desktop + +typography-size('desktop') + ++widescreen + +typography-size('widescreen') + ++fullhd + +typography-size('fullhd') + +$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right') + +@each $alignment, $text-align in $alignments + .has-text-#{$alignment} + text-align: #{$text-align} !important + +@each $alignment, $text-align in $alignments + +mobile + .has-text-#{$alignment}-mobile + text-align: #{$text-align} !important + +tablet + .has-text-#{$alignment}-tablet + text-align: #{$text-align} !important + +tablet-only + .has-text-#{$alignment}-tablet-only + text-align: #{$text-align} !important + +touch + .has-text-#{$alignment}-touch + text-align: #{$text-align} !important + +desktop + .has-text-#{$alignment}-desktop + text-align: #{$text-align} !important + +desktop-only + .has-text-#{$alignment}-desktop-only + text-align: #{$text-align} !important + +widescreen + .has-text-#{$alignment}-widescreen + text-align: #{$text-align} !important + +widescreen-only + .has-text-#{$alignment}-widescreen-only + text-align: #{$text-align} !important + +fullhd + .has-text-#{$alignment}-fullhd + text-align: #{$text-align} !important + +.is-capitalized + text-transform: capitalize !important + +.is-lowercase + text-transform: lowercase !important + +.is-uppercase + text-transform: uppercase !important + +.is-italic + font-style: italic !important + +.has-text-weight-light + font-weight: $weight-light !important +.has-text-weight-normal + font-weight: $weight-normal !important +.has-text-weight-medium + font-weight: $weight-medium !important +.has-text-weight-semibold + font-weight: $weight-semibold !important +.has-text-weight-bold + font-weight: $weight-bold !important + +.is-family-primary + font-family: $family-primary !important + +.is-family-secondary + font-family: $family-secondary !important + +.is-family-sans-serif + font-family: $family-sans-serif !important + +.is-family-monospace + font-family: $family-monospace !important + +.is-family-code + font-family: $family-code !important diff --git a/sass/helpers/visibility.sass b/sass/helpers/visibility.sass new file mode 100644 index 00000000..92477f3a --- /dev/null +++ b/sass/helpers/visibility.sass @@ -0,0 +1,122 @@ + + +$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex' + +@each $display in $displays + .is-#{$display} + display: #{$display} !important + +mobile + .is-#{$display}-mobile + display: #{$display} !important + +tablet + .is-#{$display}-tablet + display: #{$display} !important + +tablet-only + .is-#{$display}-tablet-only + display: #{$display} !important + +touch + .is-#{$display}-touch + display: #{$display} !important + +desktop + .is-#{$display}-desktop + display: #{$display} !important + +desktop-only + .is-#{$display}-desktop-only + display: #{$display} !important + +widescreen + .is-#{$display}-widescreen + display: #{$display} !important + +widescreen-only + .is-#{$display}-widescreen-only + display: #{$display} !important + +fullhd + .is-#{$display}-fullhd + display: #{$display} !important + +.is-hidden + display: none !important + +.is-sr-only + border: none !important + clip: rect(0, 0, 0, 0) !important + height: 0.01em !important + overflow: hidden !important + padding: 0 !important + position: absolute !important + white-space: nowrap !important + width: 0.01em !important + ++mobile + .is-hidden-mobile + display: none !important + ++tablet + .is-hidden-tablet + display: none !important + ++tablet-only + .is-hidden-tablet-only + display: none !important + ++touch + .is-hidden-touch + display: none !important + ++desktop + .is-hidden-desktop + display: none !important + ++desktop-only + .is-hidden-desktop-only + display: none !important + ++widescreen + .is-hidden-widescreen + display: none !important + ++widescreen-only + .is-hidden-widescreen-only + display: none !important + ++fullhd + .is-hidden-fullhd + display: none !important + +.is-invisible + visibility: hidden !important + ++mobile + .is-invisible-mobile + visibility: hidden !important + ++tablet + .is-invisible-tablet + visibility: hidden !important + ++tablet-only + .is-invisible-tablet-only + visibility: hidden !important + ++touch + .is-invisible-touch + visibility: hidden !important + ++desktop + .is-invisible-desktop + visibility: hidden !important + ++desktop-only + .is-invisible-desktop-only + visibility: hidden !important + ++widescreen + .is-invisible-widescreen + visibility: hidden !important + ++widescreen-only + .is-invisible-widescreen-only + visibility: hidden !important + ++fullhd + .is-invisible-fullhd + visibility: hidden !important diff --git a/sass/utilities/_all.sass b/sass/utilities/_all.sass index bf4ecfe3..b471577c 100644 --- a/sass/utilities/_all.sass +++ b/sass/utilities/_all.sass @@ -2,7 +2,7 @@ @import "initial-variables.sass" @import "functions.sass" -@import "derived-variables.sass" +@import "derived-variables.scss" @import "animations.sass" @import "mixins.sass" @import "controls.sass" diff --git a/sass/utilities/derived-variables.sass b/sass/utilities/derived-variables.sass deleted file mode 100644 index 18a7f461..00000000 --- a/sass/utilities/derived-variables.sass +++ /dev/null @@ -1,106 +0,0 @@ -$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: $red !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 - -// 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 diff --git a/sass/utilities/derived-variables.scss b/sass/utilities/derived-variables.scss new file mode 100644 index 00000000..54a03585 --- /dev/null +++ b/sass/utilities/derived-variables.scss @@ -0,0 +1,132 @@ +$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 : $red !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; + +// 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; From 7224fc260c5b249fd0e3b7fe397863a9d2d4dbd4 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Sun, 10 May 2020 22:10:51 +0100 Subject: [PATCH 2/6] Add light color helpers --- bulma.sass | 1 + docs/_data/links.json | 36 + docs/_includes/color/blue-dark.html | 2 + docs/_includes/color/blue-light.html | 2 + docs/_includes/color/cyan-dark.html | 2 + docs/_includes/color/cyan-light.html | 2 + docs/_includes/color/green-dark.html | 2 + docs/_includes/color/green-light.html | 2 + docs/_includes/color/red-dark.html | 2 + docs/_includes/color/red-light.html | 2 + docs/_includes/color/turquoise-dark.html | 2 + docs/_includes/color/turquoise-light.html | 2 + docs/_includes/color/yellow-dark.html | 2 + docs/_includes/color/yellow-light.html | 2 + docs/_includes/components/categories.html | 4 +- docs/css/bulma-docs.css | 3613 ++++++++++------- docs/documentation/helpers.html | 12 + docs/documentation/helpers/color-helpers.html | 203 + .../helpers/spacing-helpers.html | 13 + .../helpers/typography-helpers.html | 409 ++ .../helpers/visibility-helpers.html | 288 ++ .../modifiers/color-helpers.html | 92 - .../modifiers/typography-helpers.html | 440 -- sass/base/_all.sass | 1 - sass/helpers/color.sass | 21 + sass/utilities/functions.sass | 5 + 26 files changed, 3110 insertions(+), 2052 deletions(-) create mode 100644 docs/_includes/color/blue-dark.html create mode 100644 docs/_includes/color/blue-light.html create mode 100644 docs/_includes/color/cyan-dark.html create mode 100644 docs/_includes/color/cyan-light.html create mode 100644 docs/_includes/color/green-dark.html create mode 100644 docs/_includes/color/green-light.html create mode 100644 docs/_includes/color/red-dark.html create mode 100644 docs/_includes/color/red-light.html create mode 100644 docs/_includes/color/turquoise-dark.html create mode 100644 docs/_includes/color/turquoise-light.html create mode 100644 docs/_includes/color/yellow-dark.html create mode 100644 docs/_includes/color/yellow-light.html create mode 100644 docs/documentation/helpers.html create mode 100644 docs/documentation/helpers/color-helpers.html create mode 100644 docs/documentation/helpers/spacing-helpers.html create mode 100644 docs/documentation/helpers/typography-helpers.html create mode 100644 docs/documentation/helpers/visibility-helpers.html diff --git a/bulma.sass b/bulma.sass index 996c05e9..a2df583e 100644 --- a/bulma.sass +++ b/bulma.sass @@ -6,4 +6,5 @@ @import "sass/form/_all" @import "sass/components/_all" @import "sass/grid/_all" +@import "sass/helpers/_all" @import "sass/layout/_all" diff --git a/docs/_data/links.json b/docs/_data/links.json index 8f1efdfc..f105818d 100644 --- a/docs/_data/links.json +++ b/docs/_data/links.json @@ -167,6 +167,41 @@ "icon": "font", "path": "/documentation/modifiers/typography-helpers" }, + "helpers": { + "name": "Helpers", + "subtitle": "Apply helper classes to almost any element, in order to alter their style", + "color": "danger", + "icon": "medkit", + "path": "/documentation/helpers" + }, + "helpers-color": { + "name": "Color", + "subtitle": "Change the color of the text and/or background", + "color": "info", + "icon": "tint", + "path": "/documentation/helpers/color-helpers" + }, + "helpers-typography": { + "name": "Typography", + "subtitle": "Change the size, weight, and other font properties of the text", + "color": "grey-dark", + "icon": "font", + "path": "/documentation/helpers/typography-helpers" + }, + "helpers-spacing": { + "name": "Spacing", + "subtitle": "Change the size and color of the text for one or multiple viewport width", + "color": "grey-dark", + "icon": "font", + "path": "/documentation/helpers/spacing-helpers" + }, + "helpers-visibility": { + "name": "Visibility", + "subtitle": "Show/hide content depending on the width of the viewport", + "color": "primary", + "icon": "arrows-alt-h", + "path": "/documentation/helpers/visibility-helpers" + }, "columns": { "name": "Columns", "subtitle": "The power of Flexbox in a simple interface", @@ -581,6 +616,7 @@ "overview": ["overview-start", "overview-classes", "overview-modular", "overview-responsiveness", "overview-colors", "overview-functions", "overview-mixins"], "customize": ["customize-concepts", "customize-variables", "customize-node-sass", "customize-sass-cli", "customize-webpack"], "modifiers": ["modifiers-syntax", "modifiers-helpers", "modifiers-responsive-helpers", "modifiers-color-helpers", "modifiers-typography-helpers"], + "helpers": ["helpers-color", "helpers-typography", "helpers-visibility", "helpers-spacing"], "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"], "layout": ["layout-container", "layout-level", "layout-media", "layout-hero", "layout-section", "layout-footer", "layout-tiles"], "form": ["form-general", "form-input", "form-textarea", "form-select", "form-checkbox", "form-radio", "form-file"], diff --git a/docs/_includes/color/blue-dark.html b/docs/_includes/color/blue-dark.html new file mode 100644 index 00000000..6c550676 --- /dev/null +++ b/docs/_includes/color/blue-dark.html @@ -0,0 +1,2 @@ + +hsl(217, 71%, 45%) diff --git a/docs/_includes/color/blue-light.html b/docs/_includes/color/blue-light.html new file mode 100644 index 00000000..8df016cb --- /dev/null +++ b/docs/_includes/color/blue-light.html @@ -0,0 +1,2 @@ + +hsl(219, 70%, 96%) diff --git a/docs/_includes/color/cyan-dark.html b/docs/_includes/color/cyan-dark.html new file mode 100644 index 00000000..54ea6800 --- /dev/null +++ b/docs/_includes/color/cyan-dark.html @@ -0,0 +1,2 @@ + +hsl(204, 71%, 39%) diff --git a/docs/_includes/color/cyan-light.html b/docs/_includes/color/cyan-light.html new file mode 100644 index 00000000..a7bab90e --- /dev/null +++ b/docs/_includes/color/cyan-light.html @@ -0,0 +1,2 @@ + +hsl(206, 70%, 96%) diff --git a/docs/_includes/color/green-dark.html b/docs/_includes/color/green-dark.html new file mode 100644 index 00000000..569bb1d7 --- /dev/null +++ b/docs/_includes/color/green-dark.html @@ -0,0 +1,2 @@ + +hsl(141, 53%, 31%) diff --git a/docs/_includes/color/green-light.html b/docs/_includes/color/green-light.html new file mode 100644 index 00000000..6cbddab5 --- /dev/null +++ b/docs/_includes/color/green-light.html @@ -0,0 +1,2 @@ + +hsl(142, 52%, 96%) diff --git a/docs/_includes/color/red-dark.html b/docs/_includes/color/red-dark.html new file mode 100644 index 00000000..8af09cb6 --- /dev/null +++ b/docs/_includes/color/red-dark.html @@ -0,0 +1,2 @@ + +hsl(348, 86%, 43%) diff --git a/docs/_includes/color/red-light.html b/docs/_includes/color/red-light.html new file mode 100644 index 00000000..4efc07d7 --- /dev/null +++ b/docs/_includes/color/red-light.html @@ -0,0 +1,2 @@ + +hsl(347, 90%, 96%) diff --git a/docs/_includes/color/turquoise-dark.html b/docs/_includes/color/turquoise-dark.html new file mode 100644 index 00000000..8c530241 --- /dev/null +++ b/docs/_includes/color/turquoise-dark.html @@ -0,0 +1,2 @@ + +hsl(171, 100%, 29%) diff --git a/docs/_includes/color/turquoise-light.html b/docs/_includes/color/turquoise-light.html new file mode 100644 index 00000000..0e4fd237 --- /dev/null +++ b/docs/_includes/color/turquoise-light.html @@ -0,0 +1,2 @@ + +hsl(171, 100%, 96%) diff --git a/docs/_includes/color/yellow-dark.html b/docs/_includes/color/yellow-dark.html new file mode 100644 index 00000000..e6a27679 --- /dev/null +++ b/docs/_includes/color/yellow-dark.html @@ -0,0 +1,2 @@ + +hsl(48, 100%, 29%) diff --git a/docs/_includes/color/yellow-light.html b/docs/_includes/color/yellow-light.html new file mode 100644 index 00000000..788d8311 --- /dev/null +++ b/docs/_includes/color/yellow-light.html @@ -0,0 +1,2 @@ + +hsl(48, 100%, 96%) diff --git a/docs/_includes/components/categories.html b/docs/_includes/components/categories.html index 0de0abe6..e3d4f1b8 100644 --- a/docs/_includes/components/categories.html +++ b/docs/_includes/components/categories.html @@ -13,8 +13,8 @@ {{ category_link.name }} - {% if category_link.name == 'Customize' %} - + {% if category_link.name == 'Helpers' %} + New! {% endif %} diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 72501b12..72430e78 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -1,13 +1,5 @@ @charset "UTF-8"; /*! bulma.io v0.8.2 | MIT License | github.com/jgthms/bulma */ -@-webkit-keyframes spinAround { - from { - transform: rotate(0deg); - } - to { - transform: rotate(359deg); - } -} @keyframes spinAround { from { transform: rotate(0deg); @@ -17,10 +9,10 @@ } } -.delete, .modal-close, .is-unselectable, .button, .file, .breadcrumb, .pagination-previous, +.delete, .modal-close, .button, .file, .breadcrumb, .pagination-previous, .pagination-next, .pagination-link, -.pagination-ellipsis, .tabs { +.pagination-ellipsis, .tabs, .is-unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; @@ -46,7 +38,7 @@ } .box:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .table:not(:last-child), .table-container:not(:last-child), .title:not(:last-child), -.subtitle:not(:last-child), .block:not(:last-child), .highlight:not(:last-child), .breadcrumb:not(:last-child), .level:not(:last-child), .list:not(:last-child), .message:not(:last-child), .pagination:not(:last-child), .tabs:not(:last-child) { +.subtitle:not(:last-child), .block:not(:last-child), .highlight:not(:last-child), .breadcrumb:not(:last-child), .level:not(:last-child), .message:not(:last-child), .pagination:not(:last-child), .tabs:not(:last-child) { margin-bottom: 1.5rem; } @@ -130,8 +122,7 @@ } .button.is-loading::after, .loader, .select.is-loading::after, .control.is-loading::after { - -webkit-animation: spinAround 500ms infinite linear; - animation: spinAround 500ms infinite linear; + animation: spinAround 500ms infinite linear; border: 2px solid #dbdbdb; border-radius: 290486px; border-right-color: transparent; @@ -143,7 +134,7 @@ width: 1em; } -.is-overlay, .image.is-square img, +.image.is-square img, .image.is-square .has-ratio, .image.is-1by1 img, .image.is-1by1 .has-ratio, .image.is-5by4 img, .image.is-5by4 .has-ratio, .image.is-4by3 img, @@ -159,7 +150,7 @@ .image.is-3by5 .has-ratio, .image.is-9by16 img, .image.is-9by16 .has-ratio, .image.is-1by2 img, .image.is-1by2 .has-ratio, .image.is-1by3 img, -.image.is-1by3 .has-ratio, .modal, .modal-background, .hero-video { +.image.is-1by3 .has-ratio, .modal, .modal-background, .is-overlay, .hero-video { bottom: 0; left: 0; position: absolute; @@ -321,10 +312,7 @@ html { overflow-x: hidden; overflow-y: scroll; text-rendering: optimizeLegibility; - -webkit-text-size-adjust: 100%; - -moz-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - text-size-adjust: 100%; + text-size-adjust: 100%; } article, @@ -449,1113 +437,6 @@ table th { color: #363636; } -.is-clearfix::after { - clear: both; - content: " "; - display: table; -} - -.is-pulled-left { - float: left !important; -} - -.is-pulled-right { - float: right !important; -} - -.is-clipped { - overflow: hidden !important; -} - -.is-size-1 { - font-size: 3rem !important; -} - -.is-size-2 { - font-size: 2.5rem !important; -} - -.is-size-3 { - font-size: 2rem !important; -} - -.is-size-4 { - font-size: 1.5rem !important; -} - -.is-size-5 { - font-size: 1.25rem !important; -} - -.is-size-6 { - font-size: 1rem !important; -} - -.is-size-7 { - font-size: 0.75rem !important; -} - -@media screen and (max-width: 768px) { - .is-size-1-mobile { - font-size: 3rem !important; - } - .is-size-2-mobile { - font-size: 2.5rem !important; - } - .is-size-3-mobile { - font-size: 2rem !important; - } - .is-size-4-mobile { - font-size: 1.5rem !important; - } - .is-size-5-mobile { - font-size: 1.25rem !important; - } - .is-size-6-mobile { - font-size: 1rem !important; - } - .is-size-7-mobile { - font-size: 0.75rem !important; - } -} - -@media screen and (min-width: 769px), print { - .is-size-1-tablet { - font-size: 3rem !important; - } - .is-size-2-tablet { - font-size: 2.5rem !important; - } - .is-size-3-tablet { - font-size: 2rem !important; - } - .is-size-4-tablet { - font-size: 1.5rem !important; - } - .is-size-5-tablet { - font-size: 1.25rem !important; - } - .is-size-6-tablet { - font-size: 1rem !important; - } - .is-size-7-tablet { - font-size: 0.75rem !important; - } -} - -@media screen and (max-width: 1023px) { - .is-size-1-touch { - font-size: 3rem !important; - } - .is-size-2-touch { - font-size: 2.5rem !important; - } - .is-size-3-touch { - font-size: 2rem !important; - } - .is-size-4-touch { - font-size: 1.5rem !important; - } - .is-size-5-touch { - font-size: 1.25rem !important; - } - .is-size-6-touch { - font-size: 1rem !important; - } - .is-size-7-touch { - font-size: 0.75rem !important; - } -} - -@media screen and (min-width: 1024px) { - .is-size-1-desktop { - font-size: 3rem !important; - } - .is-size-2-desktop { - font-size: 2.5rem !important; - } - .is-size-3-desktop { - font-size: 2rem !important; - } - .is-size-4-desktop { - font-size: 1.5rem !important; - } - .is-size-5-desktop { - font-size: 1.25rem !important; - } - .is-size-6-desktop { - font-size: 1rem !important; - } - .is-size-7-desktop { - font-size: 0.75rem !important; - } -} - -@media screen and (min-width: 1216px) { - .is-size-1-widescreen { - font-size: 3rem !important; - } - .is-size-2-widescreen { - font-size: 2.5rem !important; - } - .is-size-3-widescreen { - font-size: 2rem !important; - } - .is-size-4-widescreen { - font-size: 1.5rem !important; - } - .is-size-5-widescreen { - font-size: 1.25rem !important; - } - .is-size-6-widescreen { - font-size: 1rem !important; - } - .is-size-7-widescreen { - font-size: 0.75rem !important; - } -} - -@media screen and (min-width: 1408px) { - .is-size-1-fullhd { - font-size: 3rem !important; - } - .is-size-2-fullhd { - font-size: 2.5rem !important; - } - .is-size-3-fullhd { - font-size: 2rem !important; - } - .is-size-4-fullhd { - font-size: 1.5rem !important; - } - .is-size-5-fullhd { - font-size: 1.25rem !important; - } - .is-size-6-fullhd { - font-size: 1rem !important; - } - .is-size-7-fullhd { - font-size: 0.75rem !important; - } -} - -.has-text-centered { - text-align: center !important; -} - -.has-text-justified { - text-align: justify !important; -} - -.has-text-left { - text-align: left !important; -} - -.has-text-right { - text-align: right !important; -} - -@media screen and (max-width: 768px) { - .has-text-centered-mobile { - text-align: center !important; - } -} - -@media screen and (min-width: 769px), print { - .has-text-centered-tablet { - text-align: center !important; - } -} - -@media screen and (min-width: 769px) and (max-width: 1023px) { - .has-text-centered-tablet-only { - text-align: center !important; - } -} - -@media screen and (max-width: 1023px) { - .has-text-centered-touch { - text-align: center !important; - } -} - -@media screen and (min-width: 1024px) { - .has-text-centered-desktop { - text-align: center !important; - } -} - -@media screen and (min-width: 1024px) and (max-width: 1215px) { - .has-text-centered-desktop-only { - text-align: center !important; - } -} - -@media screen and (min-width: 1216px) { - .has-text-centered-widescreen { - text-align: center !important; - } -} - -@media screen and (min-width: 1216px) and (max-width: 1407px) { - .has-text-centered-widescreen-only { - text-align: center !important; - } -} - -@media screen and (min-width: 1408px) { - .has-text-centered-fullhd { - text-align: center !important; - } -} - -@media screen and (max-width: 768px) { - .has-text-justified-mobile { - text-align: justify !important; - } -} - -@media screen and (min-width: 769px), print { - .has-text-justified-tablet { - text-align: justify !important; - } -} - -@media screen and (min-width: 769px) and (max-width: 1023px) { - .has-text-justified-tablet-only { - text-align: justify !important; - } -} - -@media screen and (max-width: 1023px) { - .has-text-justified-touch { - text-align: justify !important; - } -} - -@media screen and (min-width: 1024px) { - .has-text-justified-desktop { - text-align: justify !important; - } -} - -@media screen and (min-width: 1024px) and (max-width: 1215px) { - .has-text-justified-desktop-only { - text-align: justify !important; - } -} - -@media screen and (min-width: 1216px) { - .has-text-justified-widescreen { - text-align: justify !important; - } -} - -@media screen and (min-width: 1216px) and (max-width: 1407px) { - .has-text-justified-widescreen-only { - text-align: justify !important; - } -} - -@media screen and (min-width: 1408px) { - .has-text-justified-fullhd { - text-align: justify !important; - } -} - -@media screen and (max-width: 768px) { - .has-text-left-mobile { - text-align: left !important; - } -} - -@media screen and (min-width: 769px), print { - .has-text-left-tablet { - text-align: left !important; - } -} - -@media screen and (min-width: 769px) and (max-width: 1023px) { - .has-text-left-tablet-only { - text-align: left !important; - } -} - -@media screen and (max-width: 1023px) { - .has-text-left-touch { - text-align: left !important; - } -} - -@media screen and (min-width: 1024px) { - .has-text-left-desktop { - text-align: left !important; - } -} - -@media screen and (min-width: 1024px) and (max-width: 1215px) { - .has-text-left-desktop-only { - text-align: left !important; - } -} - -@media screen and (min-width: 1216px) { - .has-text-left-widescreen { - text-align: left !important; - } -} - -@media screen and (min-width: 1216px) and (max-width: 1407px) { - .has-text-left-widescreen-only { - text-align: left !important; - } -} - -@media screen and (min-width: 1408px) { - .has-text-left-fullhd { - text-align: left !important; - } -} - -@media screen and (max-width: 768px) { - .has-text-right-mobile { - text-align: right !important; - } -} - -@media screen and (min-width: 769px), print { - .has-text-right-tablet { - text-align: right !important; - } -} - -@media screen and (min-width: 769px) and (max-width: 1023px) { - .has-text-right-tablet-only { - text-align: right !important; - } -} - -@media screen and (max-width: 1023px) { - .has-text-right-touch { - text-align: right !important; - } -} - -@media screen and (min-width: 1024px) { - .has-text-right-desktop { - text-align: right !important; - } -} - -@media screen and (min-width: 1024px) and (max-width: 1215px) { - .has-text-right-desktop-only { - text-align: right !important; - } -} - -@media screen and (min-width: 1216px) { - .has-text-right-widescreen { - text-align: right !important; - } -} - -@media screen and (min-width: 1216px) and (max-width: 1407px) { - .has-text-right-widescreen-only { - text-align: right !important; - } -} - -@media screen and (min-width: 1408px) { - .has-text-right-fullhd { - text-align: right !important; - } -} - -.is-capitalized { - text-transform: capitalize !important; -} - -.is-lowercase { - text-transform: lowercase !important; -} - -.is-uppercase { - text-transform: uppercase !important; -} - -.is-italic { - font-style: italic !important; -} - -.has-text-white { - color: white !important; -} - -a.has-text-white:hover, a.has-text-white:focus { - color: #e6e6e6 !important; -} - -.has-background-white { - background-color: white !important; -} - -.has-text-black { - color: #0a0a0a !important; -} - -a.has-text-black:hover, a.has-text-black:focus { - color: black !important; -} - -.has-background-black { - background-color: #0a0a0a !important; -} - -.has-text-light { - color: whitesmoke !important; -} - -a.has-text-light:hover, a.has-text-light:focus { - color: #dbdbdb !important; -} - -.has-background-light { - background-color: whitesmoke !important; -} - -.has-text-dark { - color: #363636 !important; -} - -a.has-text-dark:hover, a.has-text-dark:focus { - color: #1c1c1c !important; -} - -.has-background-dark { - background-color: #363636 !important; -} - -.has-text-primary { - color: #00d1b2 !important; -} - -a.has-text-primary:hover, a.has-text-primary:focus { - color: #009e86 !important; -} - -.has-background-primary { - background-color: #00d1b2 !important; -} - -.has-text-link { - color: #3273dc !important; -} - -a.has-text-link:hover, a.has-text-link:focus { - color: #205bbc !important; -} - -.has-background-link { - background-color: #3273dc !important; -} - -.has-text-info { - color: #3298dc !important; -} - -a.has-text-info:hover, a.has-text-info:focus { - color: #207dbc !important; -} - -.has-background-info { - background-color: #3298dc !important; -} - -.has-text-success { - color: #48c774 !important; -} - -a.has-text-success:hover, a.has-text-success:focus { - color: #34a85c !important; -} - -.has-background-success { - background-color: #48c774 !important; -} - -.has-text-warning { - color: #ffdd57 !important; -} - -a.has-text-warning:hover, a.has-text-warning:focus { - color: #ffd324 !important; -} - -.has-background-warning { - background-color: #ffdd57 !important; -} - -.has-text-danger { - color: #f14668 !important; -} - -a.has-text-danger:hover, a.has-text-danger:focus { - color: #ee1742 !important; -} - -.has-background-danger { - background-color: #f14668 !important; -} - -.has-text-black-bis { - color: #121212 !important; -} - -.has-background-black-bis { - background-color: #121212 !important; -} - -.has-text-black-ter { - color: #242424 !important; -} - -.has-background-black-ter { - background-color: #242424 !important; -} - -.has-text-grey-darker { - color: #363636 !important; -} - -.has-background-grey-darker { - background-color: #363636 !important; -} - -.has-text-grey-dark { - color: #4a4a4a !important; -} - -.has-background-grey-dark { - background-color: #4a4a4a !important; -} - -.has-text-grey { - color: #7a7a7a !important; -} - -.has-background-grey { - background-color: #7a7a7a !important; -} - -.has-text-grey-light { - color: #b5b5b5 !important; -} - -.has-background-grey-light { - background-color: #b5b5b5 !important; -} - -.has-text-grey-lighter { - color: #dbdbdb !important; -} - -.has-background-grey-lighter { - background-color: #dbdbdb !important; -} - -.has-text-white-ter { - color: whitesmoke !important; -} - -.has-background-white-ter { - background-color: whitesmoke !important; -} - -.has-text-white-bis { - color: #fafafa !important; -} - -.has-background-white-bis { - background-color: #fafafa !important; -} - -.has-text-weight-light { - font-weight: 300 !important; -} - -.has-text-weight-normal { - font-weight: 400 !important; -} - -.has-text-weight-medium { - font-weight: 500 !important; -} - -.has-text-weight-semibold { - font-weight: 600 !important; -} - -.has-text-weight-bold { - font-weight: 700 !important; -} - -.is-family-primary { - font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important; -} - -.is-family-secondary { - font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important; -} - -.is-family-sans-serif { - font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important; -} - -.is-family-monospace { - font-family: monospace !important; -} - -.is-family-code { - font-family: monospace !important; -} - -.is-block { - display: block !important; -} - -@media screen and (max-width: 768px) { - .is-block-mobile { - display: block !important; - } -} - -@media screen and (min-width: 769px), print { - .is-block-tablet { - display: block !important; - } -} - -@media screen and (min-width: 769px) and (max-width: 1023px) { - .is-block-tablet-only { - display: block !important; - } -} - -@media screen and (max-width: 1023px) { - .is-block-touch { - display: block !important; - } -} - -@media screen and (min-width: 1024px) { - .is-block-desktop { - display: block !important; - } -} - -@media screen and (min-width: 1024px) and (max-width: 1215px) { - .is-block-desktop-only { - display: block !important; - } -} - -@media screen and (min-width: 1216px) { - .is-block-widescreen { - display: block !important; - } -} - -@media screen and (min-width: 1216px) and (max-width: 1407px) { - .is-block-widescreen-only { - display: block !important; - } -} - -@media screen and (min-width: 1408px) { - .is-block-fullhd { - display: block !important; - } -} - -.is-flex { - display: flex !important; -} - -@media screen and (max-width: 768px) { - .is-flex-mobile { - display: flex !important; - } -} - -@media screen and (min-width: 769px), print { - .is-flex-tablet { - display: flex !important; - } -} - -@media screen and (min-width: 769px) and (max-width: 1023px) { - .is-flex-tablet-only { - display: flex !important; - } -} - -@media screen and (max-width: 1023px) { - .is-flex-touch { - display: flex !important; - } -} - -@media screen and (min-width: 1024px) { - .is-flex-desktop { - display: flex !important; - } -} - -@media screen and (min-width: 1024px) and (max-width: 1215px) { - .is-flex-desktop-only { - display: flex !important; - } -} - -@media screen and (min-width: 1216px) { - .is-flex-widescreen { - display: flex !important; - } -} - -@media screen and (min-width: 1216px) and (max-width: 1407px) { - .is-flex-widescreen-only { - display: flex !important; - } -} - -@media screen and (min-width: 1408px) { - .is-flex-fullhd { - display: flex !important; - } -} - -.is-inline { - display: inline !important; -} - -@media screen and (max-width: 768px) { - .is-inline-mobile { - display: inline !important; - } -} - -@media screen and (min-width: 769px), print { - .is-inline-tablet { - display: inline !important; - } -} - -@media screen and (min-width: 769px) and (max-width: 1023px) { - .is-inline-tablet-only { - display: inline !important; - } -} - -@media screen and (max-width: 1023px) { - .is-inline-touch { - display: inline !important; - } -} - -@media screen and (min-width: 1024px) { - .is-inline-desktop { - display: inline !important; - } -} - -@media screen and (min-width: 1024px) and (max-width: 1215px) { - .is-inline-desktop-only { - display: inline !important; - } -} - -@media screen and (min-width: 1216px) { - .is-inline-widescreen { - display: inline !important; - } -} - -@media screen and (min-width: 1216px) and (max-width: 1407px) { - .is-inline-widescreen-only { - display: inline !important; - } -} - -@media screen and (min-width: 1408px) { - .is-inline-fullhd { - display: inline !important; - } -} - -.is-inline-block { - display: inline-block !important; -} - -@media screen and (max-width: 768px) { - .is-inline-block-mobile { - display: inline-block !important; - } -} - -@media screen and (min-width: 769px), print { - .is-inline-block-tablet { - display: inline-block !important; - } -} - -@media screen and (min-width: 769px) and (max-width: 1023px) { - .is-inline-block-tablet-only { - display: inline-block !important; - } -} - -@media screen and (max-width: 1023px) { - .is-inline-block-touch { - display: inline-block !important; - } -} - -@media screen and (min-width: 1024px) { - .is-inline-block-desktop { - display: inline-block !important; - } -} - -@media screen and (min-width: 1024px) and (max-width: 1215px) { - .is-inline-block-desktop-only { - display: inline-block !important; - } -} - -@media screen and (min-width: 1216px) { - .is-inline-block-widescreen { - display: inline-block !important; - } -} - -@media screen and (min-width: 1216px) and (max-width: 1407px) { - .is-inline-block-widescreen-only { - display: inline-block !important; - } -} - -@media screen and (min-width: 1408px) { - .is-inline-block-fullhd { - display: inline-block !important; - } -} - -.is-inline-flex { - display: inline-flex !important; -} - -@media screen and (max-width: 768px) { - .is-inline-flex-mobile { - display: inline-flex !important; - } -} - -@media screen and (min-width: 769px), print { - .is-inline-flex-tablet { - display: inline-flex !important; - } -} - -@media screen and (min-width: 769px) and (max-width: 1023px) { - .is-inline-flex-tablet-only { - display: inline-flex !important; - } -} - -@media screen and (max-width: 1023px) { - .is-inline-flex-touch { - display: inline-flex !important; - } -} - -@media screen and (min-width: 1024px) { - .is-inline-flex-desktop { - display: inline-flex !important; - } -} - -@media screen and (min-width: 1024px) and (max-width: 1215px) { - .is-inline-flex-desktop-only { - display: inline-flex !important; - } -} - -@media screen and (min-width: 1216px) { - .is-inline-flex-widescreen { - display: inline-flex !important; - } -} - -@media screen and (min-width: 1216px) and (max-width: 1407px) { - .is-inline-flex-widescreen-only { - display: inline-flex !important; - } -} - -@media screen and (min-width: 1408px) { - .is-inline-flex-fullhd { - display: inline-flex !important; - } -} - -.is-hidden { - display: none !important; -} - -.is-sr-only { - border: none !important; - clip: rect(0, 0, 0, 0) !important; - height: 0.01em !important; - overflow: hidden !important; - padding: 0 !important; - position: absolute !important; - white-space: nowrap !important; - width: 0.01em !important; -} - -@media screen and (max-width: 768px) { - .is-hidden-mobile { - display: none !important; - } -} - -@media screen and (min-width: 769px), print { - .is-hidden-tablet { - display: none !important; - } -} - -@media screen and (min-width: 769px) and (max-width: 1023px) { - .is-hidden-tablet-only { - display: none !important; - } -} - -@media screen and (max-width: 1023px) { - .is-hidden-touch { - display: none !important; - } -} - -@media screen and (min-width: 1024px) { - .is-hidden-desktop { - display: none !important; - } -} - -@media screen and (min-width: 1024px) and (max-width: 1215px) { - .is-hidden-desktop-only { - display: none !important; - } -} - -@media screen and (min-width: 1216px) { - .is-hidden-widescreen { - display: none !important; - } -} - -@media screen and (min-width: 1216px) and (max-width: 1407px) { - .is-hidden-widescreen-only { - display: none !important; - } -} - -@media screen and (min-width: 1408px) { - .is-hidden-fullhd { - display: none !important; - } -} - -.is-invisible { - visibility: hidden !important; -} - -@media screen and (max-width: 768px) { - .is-invisible-mobile { - visibility: hidden !important; - } -} - -@media screen and (min-width: 769px), print { - .is-invisible-tablet { - visibility: hidden !important; - } -} - -@media screen and (min-width: 769px) and (max-width: 1023px) { - .is-invisible-tablet-only { - visibility: hidden !important; - } -} - -@media screen and (max-width: 1023px) { - .is-invisible-touch { - visibility: hidden !important; - } -} - -@media screen and (min-width: 1024px) { - .is-invisible-desktop { - visibility: hidden !important; - } -} - -@media screen and (min-width: 1024px) and (max-width: 1215px) { - .is-invisible-desktop-only { - visibility: hidden !important; - } -} - -@media screen and (min-width: 1216px) { - .is-invisible-widescreen { - visibility: hidden !important; - } -} - -@media screen and (min-width: 1216px) and (max-width: 1407px) { - .is-invisible-widescreen-only { - visibility: hidden !important; - } -} - -@media screen and (min-width: 1408px) { - .is-invisible-fullhd { - visibility: hidden !important; - } -} - -.is-marginless { - margin: 0 !important; -} - -.is-paddingless { - padding: 0 !important; -} - -.is-radiusless { - border-radius: 0 !important; -} - -.is-shadowless { - box-shadow: none !important; -} - -.is-relative { - position: relative !important; -} - .box { background-color: white; border-radius: 6px; @@ -3674,14 +2555,10 @@ fieldset[disabled] .button { } .progress:indeterminate { - -webkit-animation-duration: 1.5s; - animation-duration: 1.5s; - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite; - -webkit-animation-name: moveIndeterminate; - animation-name: moveIndeterminate; - -webkit-animation-timing-function: linear; - animation-timing-function: linear; + animation-duration: 1.5s; + animation-iteration-count: infinite; + animation-name: moveIndeterminate; + animation-timing-function: linear; background-color: #ededed; background-image: linear-gradient(to right, #4a4a4a 30%, #ededed 30%); background-position: top left; @@ -3709,15 +2586,6 @@ fieldset[disabled] .button { height: 1.5rem; } -@-webkit-keyframes moveIndeterminate { - from { - background-position: 200% 0; - } - to { - background-position: -200% 0; - } -} - @keyframes moveIndeterminate { from { background-position: 200% 0; @@ -5949,45 +4817,6 @@ button.dropdown-item.is-active { } } -.list { - background-color: white; - border-radius: 4px; - box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); -} - -.list-item { - display: block; - padding: 0.5em 1em; -} - -.list-item:not(a) { - color: #4a4a4a; -} - -.list-item:first-child { - border-top-left-radius: 4px; - border-top-right-radius: 4px; -} - -.list-item:last-child { - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; -} - -.list-item:not(:last-child) { - border-bottom: 1px solid #dbdbdb; -} - -.list-item.is-active { - background-color: #3273dc; - color: #fff; -} - -a.list-item { - background-color: whitesmoke; - cursor: pointer; -} - .media { align-items: flex-start; display: flex; @@ -9860,8 +8689,6 @@ label.panel-block:hover { flex-basis: 0; flex-grow: 1; flex-shrink: 1; - min-height: -webkit-min-content; - min-height: -moz-min-content; min-height: min-content; } @@ -9949,6 +8776,2041 @@ label.panel-block:hover { } } +.has-text-white { + color: white !important; +} + +a.has-text-white:hover, a.has-text-white:focus { + color: #e6e6e6 !important; +} + +.has-background-white { + background-color: white !important; +} + +.has-text-black { + color: #0a0a0a !important; +} + +a.has-text-black:hover, a.has-text-black:focus { + color: black !important; +} + +.has-background-black { + background-color: #0a0a0a !important; +} + +.has-text-light { + color: whitesmoke !important; +} + +a.has-text-light:hover, a.has-text-light:focus { + color: #dbdbdb !important; +} + +.has-background-light { + background-color: whitesmoke !important; +} + +.has-text-dark { + color: #363636 !important; +} + +a.has-text-dark:hover, a.has-text-dark:focus { + color: #1c1c1c !important; +} + +.has-background-dark { + background-color: #363636 !important; +} + +.has-text-primary { + color: #00d1b2 !important; +} + +a.has-text-primary:hover, a.has-text-primary:focus { + color: #009e86 !important; +} + +.has-background-primary { + background-color: #00d1b2 !important; +} + +.has-text-primary-light { + color: #ebfffc !important; +} + +a.has-text-primary-light:hover, a.has-text-primary-light:focus { + color: #b8fff4 !important; +} + +.has-background-primary-light { + background-color: #ebfffc !important; +} + +.has-text-primary-dark { + color: #00947e !important; +} + +a.has-text-primary-dark:hover, a.has-text-primary-dark:focus { + color: #00c7a9 !important; +} + +.has-background-primary-dark { + background-color: #00947e !important; +} + +.has-text-link { + color: #3273dc !important; +} + +a.has-text-link:hover, a.has-text-link:focus { + color: #205bbc !important; +} + +.has-background-link { + background-color: #3273dc !important; +} + +.has-text-link-light { + color: #eef3fc !important; +} + +a.has-text-link-light:hover, a.has-text-link-light:focus { + color: #c2d5f5 !important; +} + +.has-background-link-light { + background-color: #eef3fc !important; +} + +.has-text-link-dark { + color: #2160c4 !important; +} + +a.has-text-link-dark:hover, a.has-text-link-dark:focus { + color: #3b79de !important; +} + +.has-background-link-dark { + background-color: #2160c4 !important; +} + +.has-text-info { + color: #3298dc !important; +} + +a.has-text-info:hover, a.has-text-info:focus { + color: #207dbc !important; +} + +.has-background-info { + background-color: #3298dc !important; +} + +.has-text-info-light { + color: #eef6fc !important; +} + +a.has-text-info-light:hover, a.has-text-info-light:focus { + color: #c2e0f5 !important; +} + +.has-background-info-light { + background-color: #eef6fc !important; +} + +.has-text-info-dark { + color: #1d72aa !important; +} + +a.has-text-info-dark:hover, a.has-text-info-dark:focus { + color: #248fd6 !important; +} + +.has-background-info-dark { + background-color: #1d72aa !important; +} + +.has-text-success { + color: #48c774 !important; +} + +a.has-text-success:hover, a.has-text-success:focus { + color: #34a85c !important; +} + +.has-background-success { + background-color: #48c774 !important; +} + +.has-text-success-light { + color: #effaf3 !important; +} + +a.has-text-success-light:hover, a.has-text-success-light:focus { + color: #c8eed6 !important; +} + +.has-background-success-light { + background-color: #effaf3 !important; +} + +.has-text-success-dark { + color: #257942 !important; +} + +a.has-text-success-dark:hover, a.has-text-success-dark:focus { + color: #31a058 !important; +} + +.has-background-success-dark { + background-color: #257942 !important; +} + +.has-text-warning { + color: #ffdd57 !important; +} + +a.has-text-warning:hover, a.has-text-warning:focus { + color: #ffd324 !important; +} + +.has-background-warning { + background-color: #ffdd57 !important; +} + +.has-text-warning-light { + color: #fffbeb !important; +} + +a.has-text-warning-light:hover, a.has-text-warning-light:focus { + color: #fff1b8 !important; +} + +.has-background-warning-light { + background-color: #fffbeb !important; +} + +.has-text-warning-dark { + color: #947600 !important; +} + +a.has-text-warning-dark:hover, a.has-text-warning-dark:focus { + color: #c79f00 !important; +} + +.has-background-warning-dark { + background-color: #947600 !important; +} + +.has-text-danger { + color: #f14668 !important; +} + +a.has-text-danger:hover, a.has-text-danger:focus { + color: #ee1742 !important; +} + +.has-background-danger { + background-color: #f14668 !important; +} + +.has-text-danger-light { + color: #feecf0 !important; +} + +a.has-text-danger-light:hover, a.has-text-danger-light:focus { + color: #fabdc9 !important; +} + +.has-background-danger-light { + background-color: #feecf0 !important; +} + +.has-text-danger-dark { + color: #cc0f35 !important; +} + +a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { + color: #ee2049 !important; +} + +.has-background-danger-dark { + background-color: #cc0f35 !important; +} + +.has-text-black-bis { + color: #121212 !important; +} + +.has-background-black-bis { + background-color: #121212 !important; +} + +.has-text-black-ter { + color: #242424 !important; +} + +.has-background-black-ter { + background-color: #242424 !important; +} + +.has-text-grey-darker { + color: #363636 !important; +} + +.has-background-grey-darker { + background-color: #363636 !important; +} + +.has-text-grey-dark { + color: #4a4a4a !important; +} + +.has-background-grey-dark { + background-color: #4a4a4a !important; +} + +.has-text-grey { + color: #7a7a7a !important; +} + +.has-background-grey { + background-color: #7a7a7a !important; +} + +.has-text-grey-light { + color: #b5b5b5 !important; +} + +.has-background-grey-light { + background-color: #b5b5b5 !important; +} + +.has-text-grey-lighter { + color: #dbdbdb !important; +} + +.has-background-grey-lighter { + background-color: #dbdbdb !important; +} + +.has-text-white-ter { + color: whitesmoke !important; +} + +.has-background-white-ter { + background-color: whitesmoke !important; +} + +.has-text-white-bis { + color: #fafafa !important; +} + +.has-background-white-bis { + background-color: #fafafa !important; +} + +.is-clearfix::after { + clear: both; + content: " "; + display: table; +} + +.is-pulled-left { + float: left !important; +} + +.is-pulled-right { + float: right !important; +} + +.is-radiusless { + border-radius: 0 !important; +} + +.is-shadowless { + box-shadow: none !important; +} + +.is-clipped { + overflow: hidden !important; +} + +.is-relative { + position: relative !important; +} + +.is-marginless { + margin: 0 !important; +} + +.is-paddingless { + padding: 0 !important; +} + +.mt-0 { + margin-top: 0 !important; +} + +.mx-0 { + margin-left: 0 !important; + margin-right: 0 !important; +} + +.my-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +.mt-1 { + margin-top: 0.25rem !important; +} + +.mx-1 { + margin-left: 0.25rem !important; + margin-right: 0.25rem !important; +} + +.my-1 { + margin-top: 0.25rem !important; + margin-bottom: 0.25rem !important; +} + +.mt-2 { + margin-top: 0.5rem !important; +} + +.mx-2 { + margin-left: 0.5rem !important; + margin-right: 0.5rem !important; +} + +.my-2 { + margin-top: 0.5rem !important; + margin-bottom: 0.5rem !important; +} + +.mt-3 { + margin-top: 0.75rem !important; +} + +.mx-3 { + margin-left: 0.75rem !important; + margin-right: 0.75rem !important; +} + +.my-3 { + margin-top: 0.75rem !important; + margin-bottom: 0.75rem !important; +} + +.mt-4 { + margin-top: 1rem !important; +} + +.mx-4 { + margin-left: 1rem !important; + margin-right: 1rem !important; +} + +.my-4 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; +} + +.mt-5 { + margin-top: 1.5rem !important; +} + +.mx-5 { + margin-left: 1.5rem !important; + margin-right: 1.5rem !important; +} + +.my-5 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; +} + +.mt-6 { + margin-top: 3rem !important; +} + +.mx-6 { + margin-left: 3rem !important; + margin-right: 3rem !important; +} + +.my-6 { + margin-top: 3rem !important; + margin-bottom: 3rem !important; +} + +.mr-0 { + margin-right: 0 !important; +} + +.mx-0 { + margin-left: 0 !important; + margin-right: 0 !important; +} + +.my-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +.mr-1 { + margin-right: 0.25rem !important; +} + +.mx-1 { + margin-left: 0.25rem !important; + margin-right: 0.25rem !important; +} + +.my-1 { + margin-top: 0.25rem !important; + margin-bottom: 0.25rem !important; +} + +.mr-2 { + margin-right: 0.5rem !important; +} + +.mx-2 { + margin-left: 0.5rem !important; + margin-right: 0.5rem !important; +} + +.my-2 { + margin-top: 0.5rem !important; + margin-bottom: 0.5rem !important; +} + +.mr-3 { + margin-right: 0.75rem !important; +} + +.mx-3 { + margin-left: 0.75rem !important; + margin-right: 0.75rem !important; +} + +.my-3 { + margin-top: 0.75rem !important; + margin-bottom: 0.75rem !important; +} + +.mr-4 { + margin-right: 1rem !important; +} + +.mx-4 { + margin-left: 1rem !important; + margin-right: 1rem !important; +} + +.my-4 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; +} + +.mr-5 { + margin-right: 1.5rem !important; +} + +.mx-5 { + margin-left: 1.5rem !important; + margin-right: 1.5rem !important; +} + +.my-5 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; +} + +.mr-6 { + margin-right: 3rem !important; +} + +.mx-6 { + margin-left: 3rem !important; + margin-right: 3rem !important; +} + +.my-6 { + margin-top: 3rem !important; + margin-bottom: 3rem !important; +} + +.mb-0 { + margin-bottom: 0 !important; +} + +.mx-0 { + margin-left: 0 !important; + margin-right: 0 !important; +} + +.my-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +.mb-1 { + margin-bottom: 0.25rem !important; +} + +.mx-1 { + margin-left: 0.25rem !important; + margin-right: 0.25rem !important; +} + +.my-1 { + margin-top: 0.25rem !important; + margin-bottom: 0.25rem !important; +} + +.mb-2 { + margin-bottom: 0.5rem !important; +} + +.mx-2 { + margin-left: 0.5rem !important; + margin-right: 0.5rem !important; +} + +.my-2 { + margin-top: 0.5rem !important; + margin-bottom: 0.5rem !important; +} + +.mb-3 { + margin-bottom: 0.75rem !important; +} + +.mx-3 { + margin-left: 0.75rem !important; + margin-right: 0.75rem !important; +} + +.my-3 { + margin-top: 0.75rem !important; + margin-bottom: 0.75rem !important; +} + +.mb-4 { + margin-bottom: 1rem !important; +} + +.mx-4 { + margin-left: 1rem !important; + margin-right: 1rem !important; +} + +.my-4 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; +} + +.mb-5 { + margin-bottom: 1.5rem !important; +} + +.mx-5 { + margin-left: 1.5rem !important; + margin-right: 1.5rem !important; +} + +.my-5 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; +} + +.mb-6 { + margin-bottom: 3rem !important; +} + +.mx-6 { + margin-left: 3rem !important; + margin-right: 3rem !important; +} + +.my-6 { + margin-top: 3rem !important; + margin-bottom: 3rem !important; +} + +.ml-0 { + margin-left: 0 !important; +} + +.mx-0 { + margin-left: 0 !important; + margin-right: 0 !important; +} + +.my-0 { + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +.ml-1 { + margin-left: 0.25rem !important; +} + +.mx-1 { + margin-left: 0.25rem !important; + margin-right: 0.25rem !important; +} + +.my-1 { + margin-top: 0.25rem !important; + margin-bottom: 0.25rem !important; +} + +.ml-2 { + margin-left: 0.5rem !important; +} + +.mx-2 { + margin-left: 0.5rem !important; + margin-right: 0.5rem !important; +} + +.my-2 { + margin-top: 0.5rem !important; + margin-bottom: 0.5rem !important; +} + +.ml-3 { + margin-left: 0.75rem !important; +} + +.mx-3 { + margin-left: 0.75rem !important; + margin-right: 0.75rem !important; +} + +.my-3 { + margin-top: 0.75rem !important; + margin-bottom: 0.75rem !important; +} + +.ml-4 { + margin-left: 1rem !important; +} + +.mx-4 { + margin-left: 1rem !important; + margin-right: 1rem !important; +} + +.my-4 { + margin-top: 1rem !important; + margin-bottom: 1rem !important; +} + +.ml-5 { + margin-left: 1.5rem !important; +} + +.mx-5 { + margin-left: 1.5rem !important; + margin-right: 1.5rem !important; +} + +.my-5 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; +} + +.ml-6 { + margin-left: 3rem !important; +} + +.mx-6 { + margin-left: 3rem !important; + margin-right: 3rem !important; +} + +.my-6 { + margin-top: 3rem !important; + margin-bottom: 3rem !important; +} + +.pt-0 { + padding-top: 0 !important; +} + +.px-0 { + padding-left: 0 !important; + padding-right: 0 !important; +} + +.py-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; +} + +.pt-1 { + padding-top: 0.25rem !important; +} + +.px-1 { + padding-left: 0.25rem !important; + padding-right: 0.25rem !important; +} + +.py-1 { + padding-top: 0.25rem !important; + padding-bottom: 0.25rem !important; +} + +.pt-2 { + padding-top: 0.5rem !important; +} + +.px-2 { + padding-left: 0.5rem !important; + padding-right: 0.5rem !important; +} + +.py-2 { + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; +} + +.pt-3 { + padding-top: 0.75rem !important; +} + +.px-3 { + padding-left: 0.75rem !important; + padding-right: 0.75rem !important; +} + +.py-3 { + padding-top: 0.75rem !important; + padding-bottom: 0.75rem !important; +} + +.pt-4 { + padding-top: 1rem !important; +} + +.px-4 { + padding-left: 1rem !important; + padding-right: 1rem !important; +} + +.py-4 { + padding-top: 1rem !important; + padding-bottom: 1rem !important; +} + +.pt-5 { + padding-top: 1.5rem !important; +} + +.px-5 { + padding-left: 1.5rem !important; + padding-right: 1.5rem !important; +} + +.py-5 { + padding-top: 1.5rem !important; + padding-bottom: 1.5rem !important; +} + +.pt-6 { + padding-top: 3rem !important; +} + +.px-6 { + padding-left: 3rem !important; + padding-right: 3rem !important; +} + +.py-6 { + padding-top: 3rem !important; + padding-bottom: 3rem !important; +} + +.pr-0 { + padding-right: 0 !important; +} + +.px-0 { + padding-left: 0 !important; + padding-right: 0 !important; +} + +.py-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; +} + +.pr-1 { + padding-right: 0.25rem !important; +} + +.px-1 { + padding-left: 0.25rem !important; + padding-right: 0.25rem !important; +} + +.py-1 { + padding-top: 0.25rem !important; + padding-bottom: 0.25rem !important; +} + +.pr-2 { + padding-right: 0.5rem !important; +} + +.px-2 { + padding-left: 0.5rem !important; + padding-right: 0.5rem !important; +} + +.py-2 { + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; +} + +.pr-3 { + padding-right: 0.75rem !important; +} + +.px-3 { + padding-left: 0.75rem !important; + padding-right: 0.75rem !important; +} + +.py-3 { + padding-top: 0.75rem !important; + padding-bottom: 0.75rem !important; +} + +.pr-4 { + padding-right: 1rem !important; +} + +.px-4 { + padding-left: 1rem !important; + padding-right: 1rem !important; +} + +.py-4 { + padding-top: 1rem !important; + padding-bottom: 1rem !important; +} + +.pr-5 { + padding-right: 1.5rem !important; +} + +.px-5 { + padding-left: 1.5rem !important; + padding-right: 1.5rem !important; +} + +.py-5 { + padding-top: 1.5rem !important; + padding-bottom: 1.5rem !important; +} + +.pr-6 { + padding-right: 3rem !important; +} + +.px-6 { + padding-left: 3rem !important; + padding-right: 3rem !important; +} + +.py-6 { + padding-top: 3rem !important; + padding-bottom: 3rem !important; +} + +.pb-0 { + padding-bottom: 0 !important; +} + +.px-0 { + padding-left: 0 !important; + padding-right: 0 !important; +} + +.py-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; +} + +.pb-1 { + padding-bottom: 0.25rem !important; +} + +.px-1 { + padding-left: 0.25rem !important; + padding-right: 0.25rem !important; +} + +.py-1 { + padding-top: 0.25rem !important; + padding-bottom: 0.25rem !important; +} + +.pb-2 { + padding-bottom: 0.5rem !important; +} + +.px-2 { + padding-left: 0.5rem !important; + padding-right: 0.5rem !important; +} + +.py-2 { + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; +} + +.pb-3 { + padding-bottom: 0.75rem !important; +} + +.px-3 { + padding-left: 0.75rem !important; + padding-right: 0.75rem !important; +} + +.py-3 { + padding-top: 0.75rem !important; + padding-bottom: 0.75rem !important; +} + +.pb-4 { + padding-bottom: 1rem !important; +} + +.px-4 { + padding-left: 1rem !important; + padding-right: 1rem !important; +} + +.py-4 { + padding-top: 1rem !important; + padding-bottom: 1rem !important; +} + +.pb-5 { + padding-bottom: 1.5rem !important; +} + +.px-5 { + padding-left: 1.5rem !important; + padding-right: 1.5rem !important; +} + +.py-5 { + padding-top: 1.5rem !important; + padding-bottom: 1.5rem !important; +} + +.pb-6 { + padding-bottom: 3rem !important; +} + +.px-6 { + padding-left: 3rem !important; + padding-right: 3rem !important; +} + +.py-6 { + padding-top: 3rem !important; + padding-bottom: 3rem !important; +} + +.pl-0 { + padding-left: 0 !important; +} + +.px-0 { + padding-left: 0 !important; + padding-right: 0 !important; +} + +.py-0 { + padding-top: 0 !important; + padding-bottom: 0 !important; +} + +.pl-1 { + padding-left: 0.25rem !important; +} + +.px-1 { + padding-left: 0.25rem !important; + padding-right: 0.25rem !important; +} + +.py-1 { + padding-top: 0.25rem !important; + padding-bottom: 0.25rem !important; +} + +.pl-2 { + padding-left: 0.5rem !important; +} + +.px-2 { + padding-left: 0.5rem !important; + padding-right: 0.5rem !important; +} + +.py-2 { + padding-top: 0.5rem !important; + padding-bottom: 0.5rem !important; +} + +.pl-3 { + padding-left: 0.75rem !important; +} + +.px-3 { + padding-left: 0.75rem !important; + padding-right: 0.75rem !important; +} + +.py-3 { + padding-top: 0.75rem !important; + padding-bottom: 0.75rem !important; +} + +.pl-4 { + padding-left: 1rem !important; +} + +.px-4 { + padding-left: 1rem !important; + padding-right: 1rem !important; +} + +.py-4 { + padding-top: 1rem !important; + padding-bottom: 1rem !important; +} + +.pl-5 { + padding-left: 1.5rem !important; +} + +.px-5 { + padding-left: 1.5rem !important; + padding-right: 1.5rem !important; +} + +.py-5 { + padding-top: 1.5rem !important; + padding-bottom: 1.5rem !important; +} + +.pl-6 { + padding-left: 3rem !important; +} + +.px-6 { + padding-left: 3rem !important; + padding-right: 3rem !important; +} + +.py-6 { + padding-top: 3rem !important; + padding-bottom: 3rem !important; +} + +.is-size-1 { + font-size: 3rem !important; +} + +.is-size-2 { + font-size: 2.5rem !important; +} + +.is-size-3 { + font-size: 2rem !important; +} + +.is-size-4 { + font-size: 1.5rem !important; +} + +.is-size-5 { + font-size: 1.25rem !important; +} + +.is-size-6 { + font-size: 1rem !important; +} + +.is-size-7 { + font-size: 0.75rem !important; +} + +@media screen and (max-width: 768px) { + .is-size-1-mobile { + font-size: 3rem !important; + } + .is-size-2-mobile { + font-size: 2.5rem !important; + } + .is-size-3-mobile { + font-size: 2rem !important; + } + .is-size-4-mobile { + font-size: 1.5rem !important; + } + .is-size-5-mobile { + font-size: 1.25rem !important; + } + .is-size-6-mobile { + font-size: 1rem !important; + } + .is-size-7-mobile { + font-size: 0.75rem !important; + } +} + +@media screen and (min-width: 769px), print { + .is-size-1-tablet { + font-size: 3rem !important; + } + .is-size-2-tablet { + font-size: 2.5rem !important; + } + .is-size-3-tablet { + font-size: 2rem !important; + } + .is-size-4-tablet { + font-size: 1.5rem !important; + } + .is-size-5-tablet { + font-size: 1.25rem !important; + } + .is-size-6-tablet { + font-size: 1rem !important; + } + .is-size-7-tablet { + font-size: 0.75rem !important; + } +} + +@media screen and (max-width: 1023px) { + .is-size-1-touch { + font-size: 3rem !important; + } + .is-size-2-touch { + font-size: 2.5rem !important; + } + .is-size-3-touch { + font-size: 2rem !important; + } + .is-size-4-touch { + font-size: 1.5rem !important; + } + .is-size-5-touch { + font-size: 1.25rem !important; + } + .is-size-6-touch { + font-size: 1rem !important; + } + .is-size-7-touch { + font-size: 0.75rem !important; + } +} + +@media screen and (min-width: 1024px) { + .is-size-1-desktop { + font-size: 3rem !important; + } + .is-size-2-desktop { + font-size: 2.5rem !important; + } + .is-size-3-desktop { + font-size: 2rem !important; + } + .is-size-4-desktop { + font-size: 1.5rem !important; + } + .is-size-5-desktop { + font-size: 1.25rem !important; + } + .is-size-6-desktop { + font-size: 1rem !important; + } + .is-size-7-desktop { + font-size: 0.75rem !important; + } +} + +@media screen and (min-width: 1216px) { + .is-size-1-widescreen { + font-size: 3rem !important; + } + .is-size-2-widescreen { + font-size: 2.5rem !important; + } + .is-size-3-widescreen { + font-size: 2rem !important; + } + .is-size-4-widescreen { + font-size: 1.5rem !important; + } + .is-size-5-widescreen { + font-size: 1.25rem !important; + } + .is-size-6-widescreen { + font-size: 1rem !important; + } + .is-size-7-widescreen { + font-size: 0.75rem !important; + } +} + +@media screen and (min-width: 1408px) { + .is-size-1-fullhd { + font-size: 3rem !important; + } + .is-size-2-fullhd { + font-size: 2.5rem !important; + } + .is-size-3-fullhd { + font-size: 2rem !important; + } + .is-size-4-fullhd { + font-size: 1.5rem !important; + } + .is-size-5-fullhd { + font-size: 1.25rem !important; + } + .is-size-6-fullhd { + font-size: 1rem !important; + } + .is-size-7-fullhd { + font-size: 0.75rem !important; + } +} + +.has-text-centered { + text-align: center !important; +} + +.has-text-justified { + text-align: justify !important; +} + +.has-text-left { + text-align: left !important; +} + +.has-text-right { + text-align: right !important; +} + +@media screen and (max-width: 768px) { + .has-text-centered-mobile { + text-align: center !important; + } +} + +@media screen and (min-width: 769px), print { + .has-text-centered-tablet { + text-align: center !important; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .has-text-centered-tablet-only { + text-align: center !important; + } +} + +@media screen and (max-width: 1023px) { + .has-text-centered-touch { + text-align: center !important; + } +} + +@media screen and (min-width: 1024px) { + .has-text-centered-desktop { + text-align: center !important; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .has-text-centered-desktop-only { + text-align: center !important; + } +} + +@media screen and (min-width: 1216px) { + .has-text-centered-widescreen { + text-align: center !important; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .has-text-centered-widescreen-only { + text-align: center !important; + } +} + +@media screen and (min-width: 1408px) { + .has-text-centered-fullhd { + text-align: center !important; + } +} + +@media screen and (max-width: 768px) { + .has-text-justified-mobile { + text-align: justify !important; + } +} + +@media screen and (min-width: 769px), print { + .has-text-justified-tablet { + text-align: justify !important; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .has-text-justified-tablet-only { + text-align: justify !important; + } +} + +@media screen and (max-width: 1023px) { + .has-text-justified-touch { + text-align: justify !important; + } +} + +@media screen and (min-width: 1024px) { + .has-text-justified-desktop { + text-align: justify !important; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .has-text-justified-desktop-only { + text-align: justify !important; + } +} + +@media screen and (min-width: 1216px) { + .has-text-justified-widescreen { + text-align: justify !important; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .has-text-justified-widescreen-only { + text-align: justify !important; + } +} + +@media screen and (min-width: 1408px) { + .has-text-justified-fullhd { + text-align: justify !important; + } +} + +@media screen and (max-width: 768px) { + .has-text-left-mobile { + text-align: left !important; + } +} + +@media screen and (min-width: 769px), print { + .has-text-left-tablet { + text-align: left !important; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .has-text-left-tablet-only { + text-align: left !important; + } +} + +@media screen and (max-width: 1023px) { + .has-text-left-touch { + text-align: left !important; + } +} + +@media screen and (min-width: 1024px) { + .has-text-left-desktop { + text-align: left !important; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .has-text-left-desktop-only { + text-align: left !important; + } +} + +@media screen and (min-width: 1216px) { + .has-text-left-widescreen { + text-align: left !important; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .has-text-left-widescreen-only { + text-align: left !important; + } +} + +@media screen and (min-width: 1408px) { + .has-text-left-fullhd { + text-align: left !important; + } +} + +@media screen and (max-width: 768px) { + .has-text-right-mobile { + text-align: right !important; + } +} + +@media screen and (min-width: 769px), print { + .has-text-right-tablet { + text-align: right !important; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .has-text-right-tablet-only { + text-align: right !important; + } +} + +@media screen and (max-width: 1023px) { + .has-text-right-touch { + text-align: right !important; + } +} + +@media screen and (min-width: 1024px) { + .has-text-right-desktop { + text-align: right !important; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .has-text-right-desktop-only { + text-align: right !important; + } +} + +@media screen and (min-width: 1216px) { + .has-text-right-widescreen { + text-align: right !important; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .has-text-right-widescreen-only { + text-align: right !important; + } +} + +@media screen and (min-width: 1408px) { + .has-text-right-fullhd { + text-align: right !important; + } +} + +.is-capitalized { + text-transform: capitalize !important; +} + +.is-lowercase { + text-transform: lowercase !important; +} + +.is-uppercase { + text-transform: uppercase !important; +} + +.is-italic { + font-style: italic !important; +} + +.has-text-weight-light { + font-weight: 300 !important; +} + +.has-text-weight-normal { + font-weight: 400 !important; +} + +.has-text-weight-medium { + font-weight: 500 !important; +} + +.has-text-weight-semibold { + font-weight: 600 !important; +} + +.has-text-weight-bold { + font-weight: 700 !important; +} + +.is-family-primary { + font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important; +} + +.is-family-secondary { + font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important; +} + +.is-family-sans-serif { + font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important; +} + +.is-family-monospace { + font-family: monospace !important; +} + +.is-family-code { + font-family: monospace !important; +} + +.is-block { + display: block !important; +} + +@media screen and (max-width: 768px) { + .is-block-mobile { + display: block !important; + } +} + +@media screen and (min-width: 769px), print { + .is-block-tablet { + display: block !important; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .is-block-tablet-only { + display: block !important; + } +} + +@media screen and (max-width: 1023px) { + .is-block-touch { + display: block !important; + } +} + +@media screen and (min-width: 1024px) { + .is-block-desktop { + display: block !important; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .is-block-desktop-only { + display: block !important; + } +} + +@media screen and (min-width: 1216px) { + .is-block-widescreen { + display: block !important; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .is-block-widescreen-only { + display: block !important; + } +} + +@media screen and (min-width: 1408px) { + .is-block-fullhd { + display: block !important; + } +} + +.is-flex { + display: flex !important; +} + +@media screen and (max-width: 768px) { + .is-flex-mobile { + display: flex !important; + } +} + +@media screen and (min-width: 769px), print { + .is-flex-tablet { + display: flex !important; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .is-flex-tablet-only { + display: flex !important; + } +} + +@media screen and (max-width: 1023px) { + .is-flex-touch { + display: flex !important; + } +} + +@media screen and (min-width: 1024px) { + .is-flex-desktop { + display: flex !important; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .is-flex-desktop-only { + display: flex !important; + } +} + +@media screen and (min-width: 1216px) { + .is-flex-widescreen { + display: flex !important; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .is-flex-widescreen-only { + display: flex !important; + } +} + +@media screen and (min-width: 1408px) { + .is-flex-fullhd { + display: flex !important; + } +} + +.is-inline { + display: inline !important; +} + +@media screen and (max-width: 768px) { + .is-inline-mobile { + display: inline !important; + } +} + +@media screen and (min-width: 769px), print { + .is-inline-tablet { + display: inline !important; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .is-inline-tablet-only { + display: inline !important; + } +} + +@media screen and (max-width: 1023px) { + .is-inline-touch { + display: inline !important; + } +} + +@media screen and (min-width: 1024px) { + .is-inline-desktop { + display: inline !important; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .is-inline-desktop-only { + display: inline !important; + } +} + +@media screen and (min-width: 1216px) { + .is-inline-widescreen { + display: inline !important; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .is-inline-widescreen-only { + display: inline !important; + } +} + +@media screen and (min-width: 1408px) { + .is-inline-fullhd { + display: inline !important; + } +} + +.is-inline-block { + display: inline-block !important; +} + +@media screen and (max-width: 768px) { + .is-inline-block-mobile { + display: inline-block !important; + } +} + +@media screen and (min-width: 769px), print { + .is-inline-block-tablet { + display: inline-block !important; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .is-inline-block-tablet-only { + display: inline-block !important; + } +} + +@media screen and (max-width: 1023px) { + .is-inline-block-touch { + display: inline-block !important; + } +} + +@media screen and (min-width: 1024px) { + .is-inline-block-desktop { + display: inline-block !important; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .is-inline-block-desktop-only { + display: inline-block !important; + } +} + +@media screen and (min-width: 1216px) { + .is-inline-block-widescreen { + display: inline-block !important; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .is-inline-block-widescreen-only { + display: inline-block !important; + } +} + +@media screen and (min-width: 1408px) { + .is-inline-block-fullhd { + display: inline-block !important; + } +} + +.is-inline-flex { + display: inline-flex !important; +} + +@media screen and (max-width: 768px) { + .is-inline-flex-mobile { + display: inline-flex !important; + } +} + +@media screen and (min-width: 769px), print { + .is-inline-flex-tablet { + display: inline-flex !important; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .is-inline-flex-tablet-only { + display: inline-flex !important; + } +} + +@media screen and (max-width: 1023px) { + .is-inline-flex-touch { + display: inline-flex !important; + } +} + +@media screen and (min-width: 1024px) { + .is-inline-flex-desktop { + display: inline-flex !important; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .is-inline-flex-desktop-only { + display: inline-flex !important; + } +} + +@media screen and (min-width: 1216px) { + .is-inline-flex-widescreen { + display: inline-flex !important; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .is-inline-flex-widescreen-only { + display: inline-flex !important; + } +} + +@media screen and (min-width: 1408px) { + .is-inline-flex-fullhd { + display: inline-flex !important; + } +} + +.is-hidden { + display: none !important; +} + +.is-sr-only { + border: none !important; + clip: rect(0, 0, 0, 0) !important; + height: 0.01em !important; + overflow: hidden !important; + padding: 0 !important; + position: absolute !important; + white-space: nowrap !important; + width: 0.01em !important; +} + +@media screen and (max-width: 768px) { + .is-hidden-mobile { + display: none !important; + } +} + +@media screen and (min-width: 769px), print { + .is-hidden-tablet { + display: none !important; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .is-hidden-tablet-only { + display: none !important; + } +} + +@media screen and (max-width: 1023px) { + .is-hidden-touch { + display: none !important; + } +} + +@media screen and (min-width: 1024px) { + .is-hidden-desktop { + display: none !important; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .is-hidden-desktop-only { + display: none !important; + } +} + +@media screen and (min-width: 1216px) { + .is-hidden-widescreen { + display: none !important; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .is-hidden-widescreen-only { + display: none !important; + } +} + +@media screen and (min-width: 1408px) { + .is-hidden-fullhd { + display: none !important; + } +} + +.is-invisible { + visibility: hidden !important; +} + +@media screen and (max-width: 768px) { + .is-invisible-mobile { + visibility: hidden !important; + } +} + +@media screen and (min-width: 769px), print { + .is-invisible-tablet { + visibility: hidden !important; + } +} + +@media screen and (min-width: 769px) and (max-width: 1023px) { + .is-invisible-tablet-only { + visibility: hidden !important; + } +} + +@media screen and (max-width: 1023px) { + .is-invisible-touch { + visibility: hidden !important; + } +} + +@media screen and (min-width: 1024px) { + .is-invisible-desktop { + visibility: hidden !important; + } +} + +@media screen and (min-width: 1024px) and (max-width: 1215px) { + .is-invisible-desktop-only { + visibility: hidden !important; + } +} + +@media screen and (min-width: 1216px) { + .is-invisible-widescreen { + visibility: hidden !important; + } +} + +@media screen and (min-width: 1216px) and (max-width: 1407px) { + .is-invisible-widescreen-only { + visibility: hidden !important; + } +} + +@media screen and (min-width: 1408px) { + .is-invisible-fullhd { + visibility: hidden !important; + } +} + .hero { align-items: stretch; display: flex; @@ -12205,17 +13067,6 @@ svg { opacity: 1; } -@-webkit-keyframes introSpinner { - from { - opacity: 0; - transform: scale(1.14); - } - to { - opacity: 1; - transform: scale(1); - } -} - @keyframes introSpinner { from { opacity: 0; @@ -12229,11 +13080,9 @@ svg { .intro-spinner, .intro-shadow { - -webkit-animation-duration: 500ms; - animation-duration: 500ms; + animation-duration: 500ms; animation-easing-function: ease-out; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; + animation-fill-mode: both; transform-origin: center; } @@ -12243,13 +13092,11 @@ svg { position: absolute; right: 0; top: 0; - -webkit-animation-name: introSpinner; - animation-name: introSpinner; + animation-name: introSpinner; } .intro-spinner::before { - -webkit-animation: spinAround 500ms infinite linear; - animation: spinAround 500ms infinite linear; + animation: spinAround 500ms infinite linear; border: 2px solid #dbdbdb; border-radius: 290486px; border-right-color: transparent; @@ -12268,17 +13115,6 @@ svg { width: 1.5em; } -@-webkit-keyframes introShadow { - from { - opacity: 0; - transform: scale(0.86); - } - to { - opacity: 1; - transform: scale(1); - } -} - @keyframes introShadow { from { opacity: 0; @@ -12301,8 +13137,7 @@ svg { background-repeat: no-repeat; background-size: cover; box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.2); - -webkit-animation-name: introShadow; - animation-name: introShadow; + animation-name: introShadow; } .intro-iframe { @@ -14112,8 +14947,7 @@ svg { } .bd-rainbow { - -webkit-animation: rainbow 8s ease infinite; - animation: rainbow 8s ease infinite; + animation: rainbow 8s ease infinite; background-image: linear-gradient(124deg, #ff470f, #f14668, #b86bff, #3273dc); background-size: 800% 800%; } @@ -14123,18 +14957,6 @@ svg { color: white; } -@-webkit-keyframes rainbow { - 0% { - background-position: 1% 80%; - } - 50% { - background-position: 99% 20%; - } - 100% { - background-position: 1% 80%; - } -} - @keyframes rainbow { 0% { background-position: 1% 80%; @@ -14646,15 +15468,6 @@ svg { } } -@-webkit-keyframes fadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - @keyframes fadeIn { from { opacity: 0; @@ -14664,15 +15477,6 @@ svg { } } -@-webkit-keyframes zoomIn { - from { - transform: scale(0.8); - } - to { - transform: scale(1); - } -} - @keyframes zoomIn { from { transform: scale(0.8); @@ -14817,21 +15621,17 @@ svg { .bd-book-modal .bd-book-modal-background, .bd-book-modal .modal-content { - -webkit-animation-duration: 250ms; - animation-duration: 250ms; + animation-duration: 250ms; animation-easing-function: ease-out; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; + animation-fill-mode: both; } .bd-book-modal .bd-book-modal-background { - -webkit-animation-name: fadeIn; - animation-name: fadeIn; + animation-name: fadeIn; } .bd-book-modal .modal-content { - -webkit-animation-name: zoomIn; - animation-name: zoomIn; + animation-name: zoomIn; transform-origin: center; } @@ -15022,15 +15822,6 @@ svg { } } -@-webkit-keyframes bdGrow { - from { - transform: scale(0); - } - to { - transform: scale(1); - } -} - @keyframes bdGrow { from { transform: scale(0); @@ -15040,17 +15831,6 @@ svg { } } -@-webkit-keyframes bdSlideDown { - from { - opacity: 0; - transform: translateY(-1rem); - } - to { - opacity: 1; - transform: translateY(0); - } -} - @keyframes bdSlideDown { from { opacity: 0; @@ -15062,17 +15842,6 @@ svg { } } -@-webkit-keyframes bdSlideUp { - from { - opacity: 0; - transform: translateY(1rem); - } - to { - opacity: 1; - transform: translateY(0); - } -} - @keyframes bdSlideUp { from { opacity: 0; @@ -15086,132 +15855,95 @@ svg { .intro-title, .intro-ghbtns, .intro-author, .intro-npm, .intro-buttons .button, .bd-focus-item .title, .bd-focus-item .subtitle, .bd-focus-mobile, .bd-focus-tablet, .bd-focus-desktop, .bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3, .bd-focus-css3, .bd-focus-github { - -webkit-animation-duration: 500ms; - animation-duration: 500ms; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; - -webkit-animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86); - animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86); + animation-duration: 500ms; + animation-fill-mode: both; + animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86); transform-origin: center center; } .intro-title { - -webkit-animation-name: bdSlideDown; - animation-name: bdSlideDown; + animation-name: bdSlideDown; } .intro-ghbtns, .intro-author { - -webkit-animation-delay: 1s; - animation-delay: 1s; - -webkit-animation-duration: 1000ms; - animation-duration: 1000ms; - -webkit-animation-name: bdFadeIn; - animation-name: bdFadeIn; + animation-delay: 1s; + animation-duration: 1000ms; + animation-name: bdFadeIn; } .intro-npm { - -webkit-animation-delay: 250ms; - animation-delay: 250ms; - -webkit-animation-name: bdSlowIn; - animation-name: bdSlowIn; + animation-delay: 250ms; + animation-name: bdSlowIn; } .intro-buttons .button { - -webkit-animation-name: bdSlowIn; - animation-name: bdSlowIn; + animation-name: bdSlowIn; } .intro-buttons .button:first-child { - -webkit-animation-delay: 500ms; - animation-delay: 500ms; + animation-delay: 500ms; } .intro-buttons .button:last-child { - -webkit-animation-delay: 750ms; - animation-delay: 750ms; + animation-delay: 750ms; } .bd-focus-item .title { - -webkit-animation-name: bdSlideDown; - animation-name: bdSlideDown; + animation-name: bdSlideDown; } .bd-focus-item .subtitle { - -webkit-animation-name: bdSlideUp; - animation-name: bdSlideUp; + animation-name: bdSlideUp; } .bd-focus-item:nth-child(1) .title { - -webkit-animation-delay: 1s; - animation-delay: 1s; + animation-delay: 1s; } .bd-focus-item:nth-child(1) .subtitle { - -webkit-animation-delay: 1.125s; - animation-delay: 1.125s; + animation-delay: 1.125s; } .bd-focus-item:nth-child(2) .title { - -webkit-animation-delay: 1.5s; - animation-delay: 1.5s; + animation-delay: 1.5s; } .bd-focus-item:nth-child(2) .subtitle { - -webkit-animation-delay: 1.625s; - animation-delay: 1.625s; + animation-delay: 1.625s; } .bd-focus-item:nth-child(3) .title { - -webkit-animation-delay: 2s; - animation-delay: 2s; + animation-delay: 2s; } .bd-focus-item:nth-child(3) .subtitle { - -webkit-animation-delay: 2.125s; - animation-delay: 2.125s; + animation-delay: 2.125s; } .bd-focus-item:nth-child(4) .title { - -webkit-animation-delay: 2.5s; - animation-delay: 2.5s; + animation-delay: 2.5s; } .bd-focus-item:nth-child(4) .subtitle { - -webkit-animation-delay: 2.625s; - animation-delay: 2.625s; + animation-delay: 2.625s; } .bd-focus-mobile, .bd-focus-tablet, .bd-focus-desktop { - -webkit-animation-name: bdGrow; - animation-name: bdGrow; + animation-name: bdGrow; transform-origin: bottom center; } .bd-focus-mobile { - -webkit-animation-delay: 1s; - animation-delay: 1s; + animation-delay: 1s; } .bd-focus-tablet { - -webkit-animation-delay: 1.25s; - animation-delay: 1.25s; + animation-delay: 1.25s; } .bd-focus-desktop { - -webkit-animation-delay: 1.5s; - animation-delay: 1.5s; -} - -@-webkit-keyframes bdCube1 { - 0% { - transform: translate3d(0, -50px, 0); - opacity: 0; - } - 25%, 100% { - transform: translate3d(0, 0, 0); - opacity: 1; - } + animation-delay: 1.5s; } @keyframes bdCube1 { @@ -15225,17 +15957,6 @@ svg { } } -@-webkit-keyframes bdCube2 { - 0% { - transform: translate3d(-40px, 30px, 0); - opacity: 0; - } - 25%, 100% { - transform: translate3d(0, 0, 0); - opacity: 1; - } -} - @keyframes bdCube2 { 0% { transform: translate3d(-40px, 30px, 0); @@ -15247,17 +15968,6 @@ svg { } } -@-webkit-keyframes bdCube3 { - 0% { - transform: translate3d(40px, 30px, 0); - opacity: 0; - } - 25%, 100% { - transform: translate3d(0, 0, 0); - opacity: 1; - } -} - @keyframes bdCube3 { 0% { transform: translate3d(40px, 30px, 0); @@ -15270,42 +15980,24 @@ svg { } .bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3 { - -webkit-animation-direction: alternate; - animation-direction: alternate; - -webkit-animation-duration: 2000ms; - animation-duration: 2000ms; - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite; + animation-direction: alternate; + animation-duration: 2000ms; + animation-iteration-count: infinite; } .bd-focus-cube-1 { - -webkit-animation-delay: 1.5s; - animation-delay: 1.5s; - -webkit-animation-name: bdCube1; - animation-name: bdCube1; + animation-delay: 1.5s; + animation-name: bdCube1; } .bd-focus-cube-2 { - -webkit-animation-name: bdCube2; - animation-name: bdCube2; - -webkit-animation-delay: 1.75s; - animation-delay: 1.75s; + animation-name: bdCube2; + animation-delay: 1.75s; } .bd-focus-cube-3 { - -webkit-animation-name: bdCube3; - animation-name: bdCube3; - -webkit-animation-delay: 2s; - animation-delay: 2s; -} - -@-webkit-keyframes bdFadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } + animation-name: bdCube3; + animation-delay: 2s; } @keyframes bdFadeIn { @@ -15317,17 +16009,6 @@ svg { } } -@-webkit-keyframes bdSlowIn { - from { - opacity: 0; - transform: scale(0.9); - } - to { - opacity: 1; - transform: scale(1); - } -} - @keyframes bdSlowIn { from { opacity: 0; @@ -15339,17 +16020,6 @@ svg { } } -@-webkit-keyframes bdScaleIn { - from { - opacity: 0; - transform: scale(0); - } - to { - opacity: 1; - transform: scale(1); - } -} - @keyframes bdScaleIn { from { opacity: 0; @@ -15362,103 +16032,14 @@ svg { } .bd-focus-css3 { - -webkit-animation-delay: 2s; - animation-delay: 2s; - -webkit-animation-name: bdScaleIn; - animation-name: bdScaleIn; + animation-delay: 2s; + animation-name: bdScaleIn; } .bd-focus-github { - -webkit-animation-delay: 2.5s; - animation-delay: 2.5s; - -webkit-animation-duration: 1500ms; - animation-duration: 1500ms; - -webkit-animation-name: bdJellyPop; - animation-name: bdJellyPop; -} - -@-webkit-keyframes bdJellyPop { - 0% { - opacity: 0; - transform: matrix3d(0.1, 0, 0, 0, 0, 0.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 3.4% { - opacity: 1; - transform: matrix3d(0.384, 0, 0, 0, 0, 0.466, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 4.7% { - transform: matrix3d(0.505, 0, 0, 0, 0, 0.639, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 6.81% { - transform: matrix3d(0.693, 0, 0, 0, 0, 0.904, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 9.41% { - transform: matrix3d(0.895, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 10.21% { - transform: matrix3d(0.947, 0, 0, 0, 0, 1.204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 13.61% { - transform: matrix3d(1.111, 0, 0, 0, 0, 1.299, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 14.11% { - transform: matrix3d(1.127, 0, 0, 0, 0, 1.298, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 17.52% { - transform: matrix3d(1.187, 0, 0, 0, 0, 1.216, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 18.72% { - transform: matrix3d(1.191, 0, 0, 0, 0, 1.169, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 21.32% { - transform: matrix3d(1.177, 0, 0, 0, 0, 1.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 24.32% { - transform: matrix3d(1.135, 0, 0, 0, 0, 0.964, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 25.23% { - transform: matrix3d(1.121, 0, 0, 0, 0, 0.944, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 29.03% { - transform: matrix3d(1.057, 0, 0, 0, 0, 0.907, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 29.93% { - transform: matrix3d(1.043, 0, 0, 0, 0, 0.909, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 35.54% { - transform: matrix3d(0.981, 0, 0, 0, 0, 0.966, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 36.74% { - transform: matrix3d(0.974, 0, 0, 0, 0, 0.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 41.04% { - transform: matrix3d(0.965, 0, 0, 0, 0, 1.02, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 44.44% { - transform: matrix3d(0.969, 0, 0, 0, 0, 1.029, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 52.15% { - transform: matrix3d(0.992, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 59.86% { - transform: matrix3d(1.005, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 63.26% { - transform: matrix3d(1.007, 0, 0, 0, 0, 0.993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 75.28% { - transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 85.49% { - transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 90.69% { - transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } - 100% { - opacity: 1; - transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); - } + animation-delay: 2.5s; + animation-duration: 1500ms; + animation-name: bdJellyPop; } @keyframes bdJellyPop { @@ -15544,5 +16125,3 @@ svg { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } } - -/*# sourceMappingURL=bulma-docs.css.map */ \ No newline at end of file diff --git a/docs/documentation/helpers.html b/docs/documentation/helpers.html new file mode 100644 index 00000000..3e075221 --- /dev/null +++ b/docs/documentation/helpers.html @@ -0,0 +1,12 @@ +--- +title: Helpers +layout: documentation +doc-tab: helpers +hide_tabs: true +breadcrumb: +- home +- documentation +- helpers +--- + +{% include components/links.html category_id='helpers' %} diff --git a/docs/documentation/helpers/color-helpers.html b/docs/documentation/helpers/color-helpers.html new file mode 100644 index 00000000..56f74b8c --- /dev/null +++ b/docs/documentation/helpers/color-helpers.html @@ -0,0 +1,203 @@ +--- +title: Color helpers +layout: documentation +doc-tab: helpers +doc-subtab: helpers-color +breadcrumb: +- home +- documentation +- helpers +- helpers-color +--- + +{% include elements/anchor.html name="Text color" %} + +
+

+ You can set any element to one of the 10 colors or 9 shades of grey: +

+
+ + + + + + + + + + + + + + + + + + + + + +
+ Class + + Color + + Example +
has-text-white{% include color/white.html %}Hello Bulma
has-text-black{% include color/black.html %}Hello Bulma
has-text-light{% include color/white-ter.html %}Hello Bulma
has-text-dark{% include color/grey-darker.html %}Hello Bulma
has-text-primary{% include color/turquoise.html %}Hello Bulma
has-text-link{% include color/blue.html %}Hello Bulma
has-text-info{% include color/cyan.html %}Hello Bulma
has-text-success{% include color/green.html %}Hello Bulma
has-text-warning{% include color/yellow.html %}Hello Bulma
has-text-danger{% include color/red.html %}Hello Bulma
+ + + + + + + + + + + + + + + + + + + + +
+ Class + + Shade + + Example +
has-text-black-bis{% include color/black-bis.html %}Hello Bulma
has-text-black-ter{% include color/black-ter.html %}Hello Bulma
has-text-grey-darker{% include color/grey-darker.html %}Hello Bulma
has-text-grey-dark{% include color/grey-dark.html %}Hello Bulma
has-text-grey{% include color/grey.html %}Hello Bulma
has-text-grey-light{% include color/grey-light.html %}Hello Bulma
has-text-grey-lighter{% include color/grey-lighter.html %}Hello Bulma
has-text-white-ter{% include color/white-ter.html %}Hello Bulma
has-text-white-bis{% include color/white-bis.html %}Hello Bulma
+ +{% include elements/new-tag.html version="0.9.0" %} + +

You can use each color in their light and dark versions. Simply append *-light or *-dark.

+ + + + + + + + + + + + + + + + + + + + + + + +
+ Class + + Light/Dark color + + Example +
has-text-primary-light{% include color/turquoise-light.html %}Hello Bulma
has-text-link-light{% include color/blue-light.html %}Hello Bulma
has-text-info-light{% include color/cyan-light.html %}Hello Bulma
has-text-success-light{% include color/green-light.html %}Hello Bulma
has-text-warning-light{% include color/yellow-light.html %}Hello Bulma
has-text-danger-light{% include color/red-light.html %}Hello Bulma
has-text-primary-dark{% include color/turquoise-dark.html %}Hello Bulma
has-text-link-dark{% include color/blue-dark.html %}Hello Bulma
has-text-info-dark{% include color/cyan-dark.html %}Hello Bulma
has-text-success-dark{% include color/green-dark.html %}Hello Bulma
has-text-warning-dark{% include color/yellow-dark.html %}Hello Bulma
has-text-danger-dark{% include color/red-dark.html %}Hello Bulma
+ +{% assign vernum = site.data.meta.version | downcase | remove: "." | plus: 0 %} + +{% include elements/anchor.html name="Background color" %} + +{% include elements/new-tag.html version="0.7.0" %} + +
+

+ You can set any element to one of the 10 colors or 9 shades of grey: +

+
+ + + + + + + + + + + + + + + + + + + + +
+ Class + + Background color +
has-background-white{% include color/white.html %}
has-background-black{% include color/black.html %}
has-background-light{% include color/white-ter.html %}
has-background-dark{% include color/grey-darker.html %}
has-background-primary{% include color/turquoise.html %}
has-background-link{% include color/blue.html %}
has-background-info{% include color/cyan.html %}
has-background-success{% include color/green.html %}
has-background-warning{% include color/yellow.html %}
has-background-danger{% include color/red.html %}
+ + + + + + + + + + + + + + + + + + + +
+ Class + + Background shade +
has-background-black-bis{% include color/black-bis.html %}
has-background-black-ter{% include color/black-ter.html %}
has-background-grey-darker{% include color/grey-darker.html %}
has-background-grey-dark{% include color/grey-dark.html %}
has-background-grey{% include color/grey.html %}
has-background-grey-light{% include color/grey-light.html %}
has-background-grey-lighter{% include color/grey-lighter.html %}
has-background-white-ter{% include color/white-ter.html %}
has-background-white-bis{% include color/white-bis.html %}
+ +{% include elements/new-tag.html version="0.9.0" %} + +

You can use each color in their light and dark versions. Simply append *-light or *-dark.

+ + + + + + + + + + + + + + + + + + + + + + + +
+ Class + + Light/Dark background + + Example +
has-background-primary-light{% include color/turquoise-light.html %}Hello Bulma
has-background-link-light{% include color/blue-light.html %}Hello Bulma
has-background-info-light{% include color/cyan-light.html %}Hello Bulma
has-background-success-light{% include color/green-light.html %}Hello Bulma
has-background-warning-light{% include color/yellow-light.html %}Hello Bulma
has-background-danger-light{% include color/red-light.html %}Hello Bulma
has-background-primary-dark{% include color/turquoise-dark.html %}Hello Bulma
has-background-link-dark{% include color/blue-dark.html %}Hello Bulma
has-background-info-dark{% include color/cyan-dark.html %}Hello Bulma
has-background-success-dark{% include color/green-dark.html %}Hello Bulma
has-background-warning-dark{% include color/yellow-dark.html %}Hello Bulma
has-background-danger-dark{% include color/red-dark.html %}Hello Bulma
diff --git a/docs/documentation/helpers/spacing-helpers.html b/docs/documentation/helpers/spacing-helpers.html new file mode 100644 index 00000000..e4a557f7 --- /dev/null +++ b/docs/documentation/helpers/spacing-helpers.html @@ -0,0 +1,13 @@ +--- +title: Spacing helpers +layout: documentation +doc-tab: helpers +doc-subtab: helpers-spacing +breadcrumb: +- home +- documentation +- helpers +- helpers-spacing +--- + +{% include elements/anchor.html name="Text spacing" %} diff --git a/docs/documentation/helpers/typography-helpers.html b/docs/documentation/helpers/typography-helpers.html new file mode 100644 index 00000000..951cc81e --- /dev/null +++ b/docs/documentation/helpers/typography-helpers.html @@ -0,0 +1,409 @@ +--- +title: Typography helpers +layout: documentation +doc-tab: helpers +doc-subtab: helpers-typography +breadcrumb: +- home +- documentation +- helpers +- helpers-typography +--- + +{% assign initial_vars = site.data.variables.utilities.initial-variables.by_name %} +{% assign sizes = site.data.variables.utilities.derived-variables.by_name['$sizes'].value | split: ' ' %} + +{% capture thead %} + + + + Class + + {% for breakpoint_hash in site.data.breakpoints %} + {% assign breakpoint = breakpoint_hash[1] %} + + {{ breakpoint.name }}
+ {% if breakpoint.id == 'mobile' %} + Up to {{ breakpoint.to }}px + {% elsif breakpoint.id == 'fullhd' %} + {{ breakpoint.from }}px and above + {% else %} + Between {{ breakpoint.from }}px and {{ breakpoint.to }}px + {% endif %} + + {% endfor %} + + +{% endcapture %} + +{% capture size1 %} + +

{{ initial_vars['$size-1'].value }}

+ +{% endcapture %} + +{% capture unchanged %} + +

unchanged

+ +{% endcapture %} + +{% capture left %} + +

left-aligned

+ +{% endcapture %} + +{% include elements/anchor.html name="Size" %} + +
+

+ There are {{ sizes | size }} sizes to choose from: +

+
+ + + + + + + + + + {% for size in sizes %} + + {% assign key = '$size-' | append: forloop.index %} + + + + + {% endfor %} + +
+ Class + + Font-size +
is-size-{{ forloop.index }}{{ initial_vars[key].value }}
+ +{% include elements/anchor.html name="Responsive size" %} + +
+

+ You can choose a specific size for each viewport width. You simply need to append the viewport width to the size modifier. +

+

+ For example, here are the modifiers for $size-1: +

+
+ + +
+ + {{ thead }} + + + + {{ size1 }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + + + + {{ unchanged }} + {{ size1 }} + {{ size1 }} + {{ size1 }} + {{ size1 }} + + + + {{ size1 }} + {{ size1 }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + + + + {{ unchanged }} + {{ unchanged }} + {{ size1 }} + {{ size1 }} + {{ size1 }} + + + + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ size1 }} + {{ size1 }} + + + + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ size1 }} + + +
is-size-1-mobile
is-size-1-tablet
is-size-1-touch
is-size-1-desktop
is-size-1-widescreen
is-size-1-fullhd
+
+ + +
+

+ You can use the same logic for each of the 7 sizes. +

+
+ +{% include elements/anchor.html name="Alignment" %} + +
+

+ You can align the text with the use of one of 4 alignment helpers: +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Class + + Alignment +
has-text-centeredMakes the text centered
has-text-justifiedMakes the text justified
has-text-leftMakes the text aligned to the left
has-text-rightMakes the text aligned to the right
+ +{% include elements/anchor.html name="Responsive Alignment" %} + +
+

+ You can now align text for each viewport width. You simply need to append the viewport width to the alignment modifier. +

+ +

+ For example, here are the modifiers for has-text-left: +

+
+ + +
+ + {{ thead }} + + + + {{ left }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + + + + {{ unchanged }} + {{ left }} + {{ left }} + {{ left }} + {{ left }} + + + + {{ unchanged }} + {{ left }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + + + + {{ left }} + {{ left }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + + + + {{ unchanged }} + {{ unchanged }} + {{ left }} + {{ left }} + {{ left }} + + + + {{ unchanged }} + {{ unchanged }} + {{ left }} + {{ unchanged }} + {{ unchanged }} + + + + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ left }} + {{ left }} + + + + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ left }} + {{ unchanged }} + + + + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ left }} + + +
has-text-left-mobile
has-text-left-tablet
has-text-left-tablet-only
has-text-left-touch
has-text-left-desktop
has-text-left-desktop-only
has-text-left-widescreen
has-text-left-widescreen-only
has-text-left-fullhd
+
+ + +{% include elements/anchor.html name="Text transformation" %} + +
+

+ You can transform the text with the use of one of 4 text transformation helpers: +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Class + + Transformation +
is-capitalizedTransforms the first character of each word to uppercase
is-lowercaseTransforms all characters to lowercase
is-uppercaseTransforms all characters to uppercase
is-italicTransforms all characters to italic
+ +{% include elements/anchor.html name="Text weight" %} + +
+

+ You can transform the text weight with the use of one of 5 text weight helpers: +

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Class + + Weight +
has-text-weight-lightTransforms text weight to light
has-text-weight-normalTransforms text weight to normal
has-text-weight-mediumTransforms text weight to medium
has-text-weight-semiboldTransforms text weight to semi-bold
has-text-weight-boldTransforms text weight to bold
+ +{% include elements/anchor.html name="Font family" %} + +{% include elements/new-tag.html version="0.7.4" %} + +
+

+ You can change the font family with the use of one of 5 font family helpers: +

+
+ +{% assign font_families = "sans-serif,monospace,primary,secondary,code" | split: ',' %} + + + + + + + + + + {% for family in font_families %} + + + + + {% endfor %} + +
+ Class + + Family +
is-family-{{ family }}Sets font family to $family-{{ family }}
diff --git a/docs/documentation/helpers/visibility-helpers.html b/docs/documentation/helpers/visibility-helpers.html new file mode 100644 index 00000000..ef9b3f8b --- /dev/null +++ b/docs/documentation/helpers/visibility-helpers.html @@ -0,0 +1,288 @@ +--- +title: Responsive helpers +layout: documentation +doc-tab: helpers +doc-subtab: helpers-visibility +breadcrumb: +- home +- documentation +- helpers +- helpers-visibility +--- + +{% capture thead %} + + + + Class + + {% for breakpoint_hash in site.data.breakpoints %} + {% assign breakpoint = breakpoint_hash[1] %} + + {{ breakpoint.name }}
+ {% if breakpoint.id == 'mobile' %} + Up to {{ breakpoint.to }}px + {% elsif breakpoint.id == 'fullhd' %} + {{ breakpoint.from }}px and above + {% else %} + Between {{ breakpoint.from }}px and {{ breakpoint.to }}px + {% endif %} + + {% endfor %} + + +{% endcapture %} + +{% capture flex %} + +

Flex

+ +{% endcapture %} + +{% capture visible %} + +

Visible

+ +{% endcapture %} + +{% capture hidden %} + +

Hidden

+ +{% endcapture %} + +{% capture unchanged %} + +

Unchanged

+ +{% endcapture %} + +{% include elements/anchor.html name="Show" %} + +
+

+ You can use one of the following display classes: +

+
    +
  • is-block
    • +
  • is-flex
    • +
  • is-inline
    • +
  • is-inline-block
    • +
  • is-inline-flex
    • +
+

For example, here's how the is-flex helper works:

+
+ +
+ + {{ thead }} + + + + {{ flex }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + + + + {{ unchanged }} + {{ flex }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + + + + {{ unchanged }} + {{ unchanged }} + {{ flex }} + {{ unchanged }} + {{ unchanged }} + + + + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ flex }} + {{ unchanged }} + + + + + + + {{ flex }} + {{ flex }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + + + + {{ unchanged }} + {{ flex }} + {{ flex }} + {{ flex }} + {{ flex }} + + + + {{ unchanged }} + {{ unchanged }} + {{ flex }} + {{ flex }} + {{ flex }} + + + + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ flex }} + {{ flex }} + + + + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ flex }} + + +
+ is-flex-mobile +
+ is-flex-tablet-only +
+ is-flex-desktop-only +
+ is-flex-widescreen-only +
+

Classes to display up to or from a specific breakpoint

+
+ is-flex-touch +
+ is-flex-tablet +
+ is-flex-desktop +
+ is-flex-widescreen +
+ is-flex-fullhd +
+
+ +
+

+ For the other display options, just replace is-flex with is-block is-inline is-inline-block or is-inline-flex +

+
+ +{% include elements/anchor.html name="Hide" %} + +
+ + {{ thead }} + + + + {{ hidden }} + {{ visible }} + {{ visible }} + {{ visible }} + {{ visible }} + + + + {{ visible }} + {{ hidden }} + {{ visible }} + {{ visible }} + {{ visible }} + + + + {{ visible }} + {{ visible }} + {{ hidden }} + {{ visible }} + {{ visible }} + + + + {{ visible }} + {{ visible }} + {{ visible }} + {{ hidden }} + {{ visible }} + + + + + + + {{ hidden }} + {{ hidden }} + {{ visible }} + {{ visible }} + {{ visible }} + + + + {{ visible }} + {{ hidden }} + {{ hidden }} + {{ hidden }} + {{ hidden }} + + + + {{ visible }} + {{ visible }} + {{ hidden }} + {{ hidden }} + {{ hidden }} + + + + {{ visible }} + {{ visible }} + {{ visible }} + {{ hidden }} + {{ hidden }} + + + + {{ visible }} + {{ visible }} + {{ visible }} + {{ visible }} + {{ hidden }} + + +
+ is-hidden-mobile +
+ is-hidden-tablet-only +
+ is-hidden-desktop-only +
+ is-hidden-widescreen-only +
+

Classes to hide up to or from a specific breakpoint

+
+ is-hidden-touch +
+ is-hidden-tablet +
+ is-hidden-desktop +
+ is-hidden-widescreen +
+ is-hidden-fullhd +
+
diff --git a/docs/documentation/modifiers/color-helpers.html b/docs/documentation/modifiers/color-helpers.html index b4c2995c..36c6f8a7 100644 --- a/docs/documentation/modifiers/color-helpers.html +++ b/docs/documentation/modifiers/color-helpers.html @@ -9,95 +9,3 @@ breadcrumb: - modifiers - modifiers-color-helpers --- - -{% include elements/anchor.html name="Text color" %} - -
-

- You can set any element to one of the 9 colors or 9 shades of grey: -

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Class - - Color -
has-text-white{% include color/white.html %}
has-text-black{% include color/black.html %}
has-text-light{% include color/white-ter.html %}
has-text-dark{% include color/grey-darker.html %}
has-text-primary{% include color/turquoise.html %}
has-text-info{% include color/cyan.html %}
has-text-link{% include color/blue.html %}
has-text-success{% include color/green.html %}
has-text-warning{% include color/yellow.html %}
has-text-danger{% include color/red.html %}
has-text-black-bis{% include color/black-bis.html %}
has-text-black-ter{% include color/black-ter.html %}
has-text-grey-darker{% include color/grey-darker.html %}
has-text-grey-dark{% include color/grey-dark.html %}
has-text-grey{% include color/grey.html %}
has-text-grey-light{% include color/grey-light.html %}
has-text-grey-lighter{% include color/grey-lighter.html %}
has-text-white-ter{% include color/white-ter.html %}
has-text-white-bis{% include color/white-bis.html %}
- -{% assign vernum = site.data.meta.version | downcase | remove: "." | plus: 0 %} - -{% if vernum >= 70 %} - -{% include elements/anchor.html name="Background color" %} - -{% include elements/new-tag.html version="0.7.0" %} - -
-

- You can set any element to one of the 9 colors or 9 shades of grey: -

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Class - - Background color -
has-background-white{% include color/white.html %}
has-background-black{% include color/black.html %}
has-background-light{% include color/white-ter.html %}
has-background-dark{% include color/grey-darker.html %}
has-background-primary{% include color/turquoise.html %}
has-background-info{% include color/cyan.html %}
has-background-link{% include color/blue.html %}
has-background-success{% include color/green.html %}
has-background-warning{% include color/yellow.html %}
has-background-danger{% include color/red.html %}
has-background-black-bis{% include color/black-bis.html %}
has-background-black-ter{% include color/black-ter.html %}
has-background-grey-darker{% include color/grey-darker.html %}
has-background-grey-dark{% include color/grey-dark.html %}
has-background-grey{% include color/grey.html %}
has-background-grey-light{% include color/grey-light.html %}
has-background-grey-lighter{% include color/grey-lighter.html %}
has-background-white-ter{% include color/white-ter.html %}
has-background-white-bis{% include color/white-bis.html %}
- -{% endif %} diff --git a/docs/documentation/modifiers/typography-helpers.html b/docs/documentation/modifiers/typography-helpers.html index ee651bbb..0a57d047 100644 --- a/docs/documentation/modifiers/typography-helpers.html +++ b/docs/documentation/modifiers/typography-helpers.html @@ -10,443 +10,3 @@ breadcrumb: - modifiers-typography-helpers --- -{% assign initial_vars = site.data.variables.utilities.initial-variables.by_name %} -{% assign sizes = site.data.variables.utilities.derived-variables.by_name['$sizes'].value | split: ' ' %} - -{% capture thead %} - - - - Class - - {% for breakpoint_hash in site.data.breakpoints %} - {% assign breakpoint = breakpoint_hash[1] %} - - {{ breakpoint.name }}
- {% if breakpoint.id == 'mobile' %} - Up to {{ breakpoint.to }}px - {% elsif breakpoint.id == 'fullhd' %} - {{ breakpoint.from }}px and above - {% else %} - Between {{ breakpoint.from }}px and {{ breakpoint.to }}px - {% endif %} - - {% endfor %} - - -{% endcapture %} - -{% capture size1 %} - -

{{ initial_vars['$size-1'].value }}

- -{% endcapture %} - -{% capture unchanged %} - -

unchanged

- -{% endcapture %} - -{% capture left %} - -

left-aligned

- -{% endcapture %} - -{% include elements/anchor.html name="Size" %} - -
-

- There are {{ sizes | size }} sizes to choose from: -

-
- - - - - - - - - - {% for size in sizes %} - - {% assign key = '$size-' | append: forloop.index %} - - - - - {% endfor %} - -
- Class - - Font-size -
is-size-{{ forloop.index }}{{ initial_vars[key].value }}
- -{% include elements/anchor.html name="Responsive size" %} - -
-

- You can choose a specific size for each viewport width. You simply need to append the viewport width to the size modifier. -

-

- For example, here are the modifiers for $size-1: -

-
- - -
- - {{ thead }} - - - - {{ size1 }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - - - - {{ unchanged }} - {{ size1 }} - {{ size1 }} - {{ size1 }} - {{ size1 }} - - - - {{ size1 }} - {{ size1 }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - - - - {{ unchanged }} - {{ unchanged }} - {{ size1 }} - {{ size1 }} - {{ size1 }} - - - - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ size1 }} - {{ size1 }} - - - - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ size1 }} - - -
is-size-1-mobile
is-size-1-tablet
is-size-1-touch
is-size-1-desktop
is-size-1-widescreen
is-size-1-fullhd
-
- - -
-

- You can use the same logic for each of the 7 sizes. -

-
- -{% include elements/anchor.html name="Colors" %} - -
-

- You can set any element to one of the 9 colors or 9 shades of grey: -

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Class - - Color -
has-text-white{% include color/white.html %}
has-text-black{% include color/black.html %}
has-text-light{% include color/white-ter.html %}
has-text-dark{% include color/grey-darker.html %}
has-text-primary{% include color/turquoise.html %}
has-text-info{% include color/cyan.html %}
has-text-link{% include color/blue.html %}
has-text-success{% include color/green.html %}
has-text-warning{% include color/yellow.html %}
has-text-danger{% include color/red.html %}
has-text-black-bis{% include color/black-bis.html %}
has-text-black-ter{% include color/black-ter.html %}
has-text-grey-darker{% include color/grey-darker.html %}
has-text-grey-dark{% include color/grey-dark.html %}
has-text-grey{% include color/grey.html %}
has-text-grey-light{% include color/grey-light.html %}
has-text-grey-lighter{% include color/grey-lighter.html %}
has-text-white-ter{% include color/white-ter.html %}
has-text-white-bis{% include color/white-bis.html %}
- -{% include elements/anchor.html name="Alignment" %} - -
-

- You can align the text with the use of one of 4 alignment helpers: -

-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- Class - - Alignment -
has-text-centeredMakes the text centered
has-text-justifiedMakes the text justified
has-text-leftMakes the text aligned to the left
has-text-rightMakes the text aligned to the right
- -{% include elements/anchor.html name="Responsive Alignment" %} - -
-

- You can now align text for each viewport width. You simply need to append the viewport width to the alignment modifier. -

- -

- For example, here are the modifiers for has-text-left: -

-
- - -
- - {{ thead }} - - - - {{ left }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - - - - {{ unchanged }} - {{ left }} - {{ left }} - {{ left }} - {{ left }} - - - - {{ unchanged }} - {{ left }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - - - - {{ left }} - {{ left }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - - - - {{ unchanged }} - {{ unchanged }} - {{ left }} - {{ left }} - {{ left }} - - - - {{ unchanged }} - {{ unchanged }} - {{ left }} - {{ unchanged }} - {{ unchanged }} - - - - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ left }} - {{ left }} - - - - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ left }} - {{ unchanged }} - - - - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ left }} - - -
has-text-left-mobile
has-text-left-tablet
has-text-left-tablet-only
has-text-left-touch
has-text-left-desktop
has-text-left-desktop-only
has-text-left-widescreen
has-text-left-widescreen-only
has-text-left-fullhd
-
- - -{% include elements/anchor.html name="Text transformation" %} - -
-

- You can transform the text with the use of one of 4 text transformation helpers: -

-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- Class - - Transformation -
is-capitalizedTransforms the first character of each word to uppercase
is-lowercaseTransforms all characters to lowercase
is-uppercaseTransforms all characters to uppercase
is-italicTransforms all characters to italic
- -{% include elements/anchor.html name="Text weight" %} - -
-

- You can transform the text weight with the use of one of 5 text weight helpers: -

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Class - - Weight -
has-text-weight-lightTransforms text weight to light
has-text-weight-normalTransforms text weight to normal
has-text-weight-mediumTransforms text weight to medium
has-text-weight-semiboldTransforms text weight to semi-bold
has-text-weight-boldTransforms text weight to bold
- -{% include elements/anchor.html name="Font family" %} - -{% include elements/new-tag.html version="0.7.4" %} - -
-

- You can change the font family with the use of one of 5 font family helpers: -

-
- -{% assign font_families = "sans-serif,monospace,primary,secondary,code" | split: ',' %} - - - - - - - - - - {% for family in font_families %} - - - - - {% endfor %} - -
- Class - - Family -
is-family-{{ family }}Sets font family to $family-{{ family }}
- diff --git a/sass/base/_all.sass b/sass/base/_all.sass index e913d6ba..ce1dddc9 100644 --- a/sass/base/_all.sass +++ b/sass/base/_all.sass @@ -2,4 +2,3 @@ @import "minireset.sass" @import "generic.sass" -@import "helpers.sass" diff --git a/sass/helpers/color.sass b/sass/helpers/color.sass index b2e89edb..22ac8c51 100644 --- a/sass/helpers/color.sass +++ b/sass/helpers/color.sass @@ -8,6 +8,27 @@ color: bulmaDarken($color, 10%) !important .has-background-#{$name} background-color: $color !important + @if length($pair) >= 4 + $color-light: nth($pair, 3) + $color-dark: nth($pair, 4) + // Light + .has-text-#{$name}-light + color: $color-light !important + a.has-text-#{$name}-light + &:hover, + &:focus + color: bulmaDarken($color-light, 10%) !important + .has-background-#{$name}-light + background-color: $color-light !important + // Dark + .has-text-#{$name}-dark + color: $color-dark !important + a.has-text-#{$name}-dark + &:hover, + &:focus + color: bulmaLighten($color-dark, 10%) !important + .has-background-#{$name}-dark + background-color: $color-dark !important @each $name, $shade in $shades .has-text-#{$name} diff --git a/sass/utilities/functions.sass b/sass/utilities/functions.sass index 06f8dea6..270121f6 100644 --- a/sass/utilities/functions.sass +++ b/sass/utilities/functions.sass @@ -108,3 +108,8 @@ @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) From f79d8c09e209b32ea192f1d37e41303af84bab22 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Mon, 11 May 2020 00:25:29 +0100 Subject: [PATCH 3/6] Highlight rows and columns --- docs/_data/links.json | 9 +- docs/_includes/components/categories.html | 2 +- docs/_javascript/main.js | 44 +- docs/_sass/specific.sass | 23 + docs/css/bulma-docs.css | 746 +++++------------- docs/documentation/helpers/other-helpers.html | 56 ++ .../helpers/spacing-helpers.html | 130 ++- .../helpers/typography-helpers.html | 291 +++---- .../helpers/visibility-helpers.html | 35 +- docs/documentation/modifiers/helpers.html | 64 +- .../modifiers/responsive-helpers.html | 289 ------- docs/lib/main.js | 50 +- sass/helpers/spacing.sass | 26 +- 13 files changed, 677 insertions(+), 1088 deletions(-) create mode 100644 docs/documentation/helpers/other-helpers.html diff --git a/docs/_data/links.json b/docs/_data/links.json index f105818d..99c143a7 100644 --- a/docs/_data/links.json +++ b/docs/_data/links.json @@ -202,6 +202,13 @@ "icon": "arrows-alt-h", "path": "/documentation/helpers/visibility-helpers" }, + "helpers-other": { + "name": "Other", + "subtitle": "Other useful Bulma helpers", + "color": "primary", + "icon": "medkit", + "path": "/documentation/helpers/other-helpers" + }, "columns": { "name": "Columns", "subtitle": "The power of Flexbox in a simple interface", @@ -616,7 +623,7 @@ "overview": ["overview-start", "overview-classes", "overview-modular", "overview-responsiveness", "overview-colors", "overview-functions", "overview-mixins"], "customize": ["customize-concepts", "customize-variables", "customize-node-sass", "customize-sass-cli", "customize-webpack"], "modifiers": ["modifiers-syntax", "modifiers-helpers", "modifiers-responsive-helpers", "modifiers-color-helpers", "modifiers-typography-helpers"], - "helpers": ["helpers-color", "helpers-typography", "helpers-visibility", "helpers-spacing"], + "helpers": ["helpers-color", "helpers-spacing", "helpers-typography", "helpers-visibility", "helpers-other"], "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"], "layout": ["layout-container", "layout-level", "layout-media", "layout-hero", "layout-section", "layout-footer", "layout-tiles"], "form": ["form-general", "form-input", "form-textarea", "form-select", "form-checkbox", "form-radio", "form-file"], diff --git a/docs/_includes/components/categories.html b/docs/_includes/components/categories.html index e3d4f1b8..491489bc 100644 --- a/docs/_includes/components/categories.html +++ b/docs/_includes/components/categories.html @@ -14,7 +14,7 @@ {{ category_link.name }} {% if category_link.name == 'Helpers' %} - + New! {% endif %} diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js index 613aa54b..6299a8e7 100644 --- a/docs/_javascript/main.js +++ b/docs/_javascript/main.js @@ -260,8 +260,8 @@ document.addEventListener('DOMContentLoaded', () => { // Functions - function getAll(selector) { - return Array.prototype.slice.call(document.querySelectorAll(selector), 0); + function getAll(selector, parent = document) { + return Array.prototype.slice.call(parent.querySelectorAll(selector), 0); } // Scrolling @@ -345,6 +345,46 @@ document.addEventListener('DOMContentLoaded', () => { } } + // Spacing table + + const spacingEl = document.getElementById('spacingTable'); + const spacingRows = getAll('tbody tr', spacingEl); + const spacingCells = getAll('tbody td', spacingEl); + const spacingValues = getAll('tfoot th', spacingEl); + + spacingEl.addEventListener('mouseleave', () => { + resetTable(); + }); + + spacingCells.forEach(el => { + el.addEventListener('mouseenter', () => { + resetTable(); + const row = Array.prototype.indexOf.call(el.parentNode.parentNode.children, el.parentNode); + const column = Array.prototype.indexOf.call(el.parentNode.children, el); + highlightRowAndColumn(row, column); + }); + }); + + function resetTable() { + spacingRows.forEach(el => el.classList.remove('bd-current-row')); + spacingCells.forEach(el => el.classList.remove('bd-current-column')); + spacingValues.forEach(el => el.classList.remove('bd-current-value')); + } + + function highlightRowAndColumn(rowIndex, columnIndex) { + const row = spacingRows[rowIndex]; + row.classList.add('bd-current-row'); + + spacingRows.forEach(r => { + r.children[columnIndex].classList.add('bd-current-column'); + }); + + if (columnIndex < 2) { + return; + } + spacingValues[columnIndex - 1].classList.add('bd-current-value'); + } + // Scroll function upOrDown(lastY, currentY) { diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass index 62d705df..82ca37a9 100644 --- a/docs/_sass/specific.sass +++ b/docs/_sass/specific.sass @@ -1,3 +1,26 @@ +#spacingTable + &:hover + color: $border + code + background: none + color: $border + .bd-current-row + background-color: $background + td:first-child, + .bd-current-column:not(:first-child) + background-color: $danger-light + color: $text-strong + code + background-color: $danger + color: $danger-invert + .bd-current-column + background-color: $background + .bd-current-value + background-color: $danger-light + code + background-color: $danger + color: $danger-invert + +selection background-color: $primary color: $primary-invert diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 72430e78..9d01c9ed 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -9154,296 +9154,14 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { margin-top: 0 !important; } -.mx-0 { - margin-left: 0 !important; - margin-right: 0 !important; -} - -.my-0 { - margin-top: 0 !important; - margin-bottom: 0 !important; -} - -.mt-1 { - margin-top: 0.25rem !important; -} - -.mx-1 { - margin-left: 0.25rem !important; - margin-right: 0.25rem !important; -} - -.my-1 { - margin-top: 0.25rem !important; - margin-bottom: 0.25rem !important; -} - -.mt-2 { - margin-top: 0.5rem !important; -} - -.mx-2 { - margin-left: 0.5rem !important; - margin-right: 0.5rem !important; -} - -.my-2 { - margin-top: 0.5rem !important; - margin-bottom: 0.5rem !important; -} - -.mt-3 { - margin-top: 0.75rem !important; -} - -.mx-3 { - margin-left: 0.75rem !important; - margin-right: 0.75rem !important; -} - -.my-3 { - margin-top: 0.75rem !important; - margin-bottom: 0.75rem !important; -} - -.mt-4 { - margin-top: 1rem !important; -} - -.mx-4 { - margin-left: 1rem !important; - margin-right: 1rem !important; -} - -.my-4 { - margin-top: 1rem !important; - margin-bottom: 1rem !important; -} - -.mt-5 { - margin-top: 1.5rem !important; -} - -.mx-5 { - margin-left: 1.5rem !important; - margin-right: 1.5rem !important; -} - -.my-5 { - margin-top: 1.5rem !important; - margin-bottom: 1.5rem !important; -} - -.mt-6 { - margin-top: 3rem !important; -} - -.mx-6 { - margin-left: 3rem !important; - margin-right: 3rem !important; -} - -.my-6 { - margin-top: 3rem !important; - margin-bottom: 3rem !important; -} - .mr-0 { margin-right: 0 !important; } -.mx-0 { - margin-left: 0 !important; - margin-right: 0 !important; -} - -.my-0 { - margin-top: 0 !important; - margin-bottom: 0 !important; -} - -.mr-1 { - margin-right: 0.25rem !important; -} - -.mx-1 { - margin-left: 0.25rem !important; - margin-right: 0.25rem !important; -} - -.my-1 { - margin-top: 0.25rem !important; - margin-bottom: 0.25rem !important; -} - -.mr-2 { - margin-right: 0.5rem !important; -} - -.mx-2 { - margin-left: 0.5rem !important; - margin-right: 0.5rem !important; -} - -.my-2 { - margin-top: 0.5rem !important; - margin-bottom: 0.5rem !important; -} - -.mr-3 { - margin-right: 0.75rem !important; -} - -.mx-3 { - margin-left: 0.75rem !important; - margin-right: 0.75rem !important; -} - -.my-3 { - margin-top: 0.75rem !important; - margin-bottom: 0.75rem !important; -} - -.mr-4 { - margin-right: 1rem !important; -} - -.mx-4 { - margin-left: 1rem !important; - margin-right: 1rem !important; -} - -.my-4 { - margin-top: 1rem !important; - margin-bottom: 1rem !important; -} - -.mr-5 { - margin-right: 1.5rem !important; -} - -.mx-5 { - margin-left: 1.5rem !important; - margin-right: 1.5rem !important; -} - -.my-5 { - margin-top: 1.5rem !important; - margin-bottom: 1.5rem !important; -} - -.mr-6 { - margin-right: 3rem !important; -} - -.mx-6 { - margin-left: 3rem !important; - margin-right: 3rem !important; -} - -.my-6 { - margin-top: 3rem !important; - margin-bottom: 3rem !important; -} - .mb-0 { margin-bottom: 0 !important; } -.mx-0 { - margin-left: 0 !important; - margin-right: 0 !important; -} - -.my-0 { - margin-top: 0 !important; - margin-bottom: 0 !important; -} - -.mb-1 { - margin-bottom: 0.25rem !important; -} - -.mx-1 { - margin-left: 0.25rem !important; - margin-right: 0.25rem !important; -} - -.my-1 { - margin-top: 0.25rem !important; - margin-bottom: 0.25rem !important; -} - -.mb-2 { - margin-bottom: 0.5rem !important; -} - -.mx-2 { - margin-left: 0.5rem !important; - margin-right: 0.5rem !important; -} - -.my-2 { - margin-top: 0.5rem !important; - margin-bottom: 0.5rem !important; -} - -.mb-3 { - margin-bottom: 0.75rem !important; -} - -.mx-3 { - margin-left: 0.75rem !important; - margin-right: 0.75rem !important; -} - -.my-3 { - margin-top: 0.75rem !important; - margin-bottom: 0.75rem !important; -} - -.mb-4 { - margin-bottom: 1rem !important; -} - -.mx-4 { - margin-left: 1rem !important; - margin-right: 1rem !important; -} - -.my-4 { - margin-top: 1rem !important; - margin-bottom: 1rem !important; -} - -.mb-5 { - margin-bottom: 1.5rem !important; -} - -.mx-5 { - margin-left: 1.5rem !important; - margin-right: 1.5rem !important; -} - -.my-5 { - margin-top: 1.5rem !important; - margin-bottom: 1.5rem !important; -} - -.mb-6 { - margin-bottom: 3rem !important; -} - -.mx-6 { - margin-left: 3rem !important; - margin-right: 3rem !important; -} - -.my-6 { - margin-top: 3rem !important; - margin-bottom: 3rem !important; -} - .ml-0 { margin-left: 0 !important; } @@ -9458,6 +9176,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { margin-bottom: 0 !important; } +.mt-1 { + margin-top: 0.25rem !important; +} + +.mr-1 { + margin-right: 0.25rem !important; +} + +.mb-1 { + margin-bottom: 0.25rem !important; +} + .ml-1 { margin-left: 0.25rem !important; } @@ -9472,6 +9202,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { margin-bottom: 0.25rem !important; } +.mt-2 { + margin-top: 0.5rem !important; +} + +.mr-2 { + margin-right: 0.5rem !important; +} + +.mb-2 { + margin-bottom: 0.5rem !important; +} + .ml-2 { margin-left: 0.5rem !important; } @@ -9486,6 +9228,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { margin-bottom: 0.5rem !important; } +.mt-3 { + margin-top: 0.75rem !important; +} + +.mr-3 { + margin-right: 0.75rem !important; +} + +.mb-3 { + margin-bottom: 0.75rem !important; +} + .ml-3 { margin-left: 0.75rem !important; } @@ -9500,6 +9254,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { margin-bottom: 0.75rem !important; } +.mt-4 { + margin-top: 1rem !important; +} + +.mr-4 { + margin-right: 1rem !important; +} + +.mb-4 { + margin-bottom: 1rem !important; +} + .ml-4 { margin-left: 1rem !important; } @@ -9514,6 +9280,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { margin-bottom: 1rem !important; } +.mt-5 { + margin-top: 1.5rem !important; +} + +.mr-5 { + margin-right: 1.5rem !important; +} + +.mb-5 { + margin-bottom: 1.5rem !important; +} + .ml-5 { margin-left: 1.5rem !important; } @@ -9528,6 +9306,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { margin-bottom: 1.5rem !important; } +.mt-6 { + margin-top: 3rem !important; +} + +.mr-6 { + margin-right: 3rem !important; +} + +.mb-6 { + margin-bottom: 3rem !important; +} + .ml-6 { margin-left: 3rem !important; } @@ -9546,296 +9336,14 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { padding-top: 0 !important; } -.px-0 { - padding-left: 0 !important; - padding-right: 0 !important; -} - -.py-0 { - padding-top: 0 !important; - padding-bottom: 0 !important; -} - -.pt-1 { - padding-top: 0.25rem !important; -} - -.px-1 { - padding-left: 0.25rem !important; - padding-right: 0.25rem !important; -} - -.py-1 { - padding-top: 0.25rem !important; - padding-bottom: 0.25rem !important; -} - -.pt-2 { - padding-top: 0.5rem !important; -} - -.px-2 { - padding-left: 0.5rem !important; - padding-right: 0.5rem !important; -} - -.py-2 { - padding-top: 0.5rem !important; - padding-bottom: 0.5rem !important; -} - -.pt-3 { - padding-top: 0.75rem !important; -} - -.px-3 { - padding-left: 0.75rem !important; - padding-right: 0.75rem !important; -} - -.py-3 { - padding-top: 0.75rem !important; - padding-bottom: 0.75rem !important; -} - -.pt-4 { - padding-top: 1rem !important; -} - -.px-4 { - padding-left: 1rem !important; - padding-right: 1rem !important; -} - -.py-4 { - padding-top: 1rem !important; - padding-bottom: 1rem !important; -} - -.pt-5 { - padding-top: 1.5rem !important; -} - -.px-5 { - padding-left: 1.5rem !important; - padding-right: 1.5rem !important; -} - -.py-5 { - padding-top: 1.5rem !important; - padding-bottom: 1.5rem !important; -} - -.pt-6 { - padding-top: 3rem !important; -} - -.px-6 { - padding-left: 3rem !important; - padding-right: 3rem !important; -} - -.py-6 { - padding-top: 3rem !important; - padding-bottom: 3rem !important; -} - .pr-0 { padding-right: 0 !important; } -.px-0 { - padding-left: 0 !important; - padding-right: 0 !important; -} - -.py-0 { - padding-top: 0 !important; - padding-bottom: 0 !important; -} - -.pr-1 { - padding-right: 0.25rem !important; -} - -.px-1 { - padding-left: 0.25rem !important; - padding-right: 0.25rem !important; -} - -.py-1 { - padding-top: 0.25rem !important; - padding-bottom: 0.25rem !important; -} - -.pr-2 { - padding-right: 0.5rem !important; -} - -.px-2 { - padding-left: 0.5rem !important; - padding-right: 0.5rem !important; -} - -.py-2 { - padding-top: 0.5rem !important; - padding-bottom: 0.5rem !important; -} - -.pr-3 { - padding-right: 0.75rem !important; -} - -.px-3 { - padding-left: 0.75rem !important; - padding-right: 0.75rem !important; -} - -.py-3 { - padding-top: 0.75rem !important; - padding-bottom: 0.75rem !important; -} - -.pr-4 { - padding-right: 1rem !important; -} - -.px-4 { - padding-left: 1rem !important; - padding-right: 1rem !important; -} - -.py-4 { - padding-top: 1rem !important; - padding-bottom: 1rem !important; -} - -.pr-5 { - padding-right: 1.5rem !important; -} - -.px-5 { - padding-left: 1.5rem !important; - padding-right: 1.5rem !important; -} - -.py-5 { - padding-top: 1.5rem !important; - padding-bottom: 1.5rem !important; -} - -.pr-6 { - padding-right: 3rem !important; -} - -.px-6 { - padding-left: 3rem !important; - padding-right: 3rem !important; -} - -.py-6 { - padding-top: 3rem !important; - padding-bottom: 3rem !important; -} - .pb-0 { padding-bottom: 0 !important; } -.px-0 { - padding-left: 0 !important; - padding-right: 0 !important; -} - -.py-0 { - padding-top: 0 !important; - padding-bottom: 0 !important; -} - -.pb-1 { - padding-bottom: 0.25rem !important; -} - -.px-1 { - padding-left: 0.25rem !important; - padding-right: 0.25rem !important; -} - -.py-1 { - padding-top: 0.25rem !important; - padding-bottom: 0.25rem !important; -} - -.pb-2 { - padding-bottom: 0.5rem !important; -} - -.px-2 { - padding-left: 0.5rem !important; - padding-right: 0.5rem !important; -} - -.py-2 { - padding-top: 0.5rem !important; - padding-bottom: 0.5rem !important; -} - -.pb-3 { - padding-bottom: 0.75rem !important; -} - -.px-3 { - padding-left: 0.75rem !important; - padding-right: 0.75rem !important; -} - -.py-3 { - padding-top: 0.75rem !important; - padding-bottom: 0.75rem !important; -} - -.pb-4 { - padding-bottom: 1rem !important; -} - -.px-4 { - padding-left: 1rem !important; - padding-right: 1rem !important; -} - -.py-4 { - padding-top: 1rem !important; - padding-bottom: 1rem !important; -} - -.pb-5 { - padding-bottom: 1.5rem !important; -} - -.px-5 { - padding-left: 1.5rem !important; - padding-right: 1.5rem !important; -} - -.py-5 { - padding-top: 1.5rem !important; - padding-bottom: 1.5rem !important; -} - -.pb-6 { - padding-bottom: 3rem !important; -} - -.px-6 { - padding-left: 3rem !important; - padding-right: 3rem !important; -} - -.py-6 { - padding-top: 3rem !important; - padding-bottom: 3rem !important; -} - .pl-0 { padding-left: 0 !important; } @@ -9850,6 +9358,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { padding-bottom: 0 !important; } +.pt-1 { + padding-top: 0.25rem !important; +} + +.pr-1 { + padding-right: 0.25rem !important; +} + +.pb-1 { + padding-bottom: 0.25rem !important; +} + .pl-1 { padding-left: 0.25rem !important; } @@ -9864,6 +9384,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { padding-bottom: 0.25rem !important; } +.pt-2 { + padding-top: 0.5rem !important; +} + +.pr-2 { + padding-right: 0.5rem !important; +} + +.pb-2 { + padding-bottom: 0.5rem !important; +} + .pl-2 { padding-left: 0.5rem !important; } @@ -9878,6 +9410,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { padding-bottom: 0.5rem !important; } +.pt-3 { + padding-top: 0.75rem !important; +} + +.pr-3 { + padding-right: 0.75rem !important; +} + +.pb-3 { + padding-bottom: 0.75rem !important; +} + .pl-3 { padding-left: 0.75rem !important; } @@ -9892,6 +9436,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { padding-bottom: 0.75rem !important; } +.pt-4 { + padding-top: 1rem !important; +} + +.pr-4 { + padding-right: 1rem !important; +} + +.pb-4 { + padding-bottom: 1rem !important; +} + .pl-4 { padding-left: 1rem !important; } @@ -9906,6 +9462,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { padding-bottom: 1rem !important; } +.pt-5 { + padding-top: 1.5rem !important; +} + +.pr-5 { + padding-right: 1.5rem !important; +} + +.pb-5 { + padding-bottom: 1.5rem !important; +} + .pl-5 { padding-left: 1.5rem !important; } @@ -9920,6 +9488,18 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus { padding-bottom: 1.5rem !important; } +.pt-6 { + padding-top: 3rem !important; +} + +.pr-6 { + padding-right: 3rem !important; +} + +.pb-6 { + padding-bottom: 3rem !important; +} + .pl-6 { padding-left: 3rem !important; } @@ -13583,6 +13163,44 @@ svg { width: 1em; } +#spacingTable:hover { + color: #dbdbdb; +} + +#spacingTable:hover code { + background: none; + color: #dbdbdb; +} + +#spacingTable .bd-current-row { + background-color: whitesmoke; +} + +#spacingTable .bd-current-row td:first-child, +#spacingTable .bd-current-row .bd-current-column:not(:first-child) { + background-color: #feecf0; + color: #363636; +} + +#spacingTable .bd-current-row td:first-child code, +#spacingTable .bd-current-row .bd-current-column:not(:first-child) code { + background-color: #f14668; + color: #fff; +} + +#spacingTable .bd-current-column { + background-color: whitesmoke; +} + +#spacingTable .bd-current-value { + background-color: #feecf0; +} + +#spacingTable .bd-current-value code { + background-color: #f14668; + color: #fff; +} + ::-moz-selection { background-color: #00d1b2; color: #fff; diff --git a/docs/documentation/helpers/other-helpers.html b/docs/documentation/helpers/other-helpers.html new file mode 100644 index 00000000..4c00545a --- /dev/null +++ b/docs/documentation/helpers/other-helpers.html @@ -0,0 +1,56 @@ +--- +title: Other helpers +layout: documentation +doc-tab: helpers +doc-subtab: helpers-other +breadcrumb: +- home +- documentation +- helpers +- helpers-other +--- + +

+ Here are some other helpers shipped with Bulma: +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
is-clearfixFixes an element's floating children
is-pulled-leftMoves an element to the left
is-pulled-rightMoves an element to the right
is-overlayCompletely covers the first positioned parent
is-clippedAdds overflow hidden
is-radiuslessRemoves any radius
is-shadowlessRemoves any shadow
is-unselectablePrevents the text from being selectable
is-relativeApplies position: relative to the element.
diff --git a/docs/documentation/helpers/spacing-helpers.html b/docs/documentation/helpers/spacing-helpers.html index e4a557f7..cd7078cf 100644 --- a/docs/documentation/helpers/spacing-helpers.html +++ b/docs/documentation/helpers/spacing-helpers.html @@ -8,6 +8,134 @@ breadcrumb: - documentation - helpers - helpers-spacing +shortcuts: + margin: m + padding: p +directions: + top: t + right: r + bottom: b + left: l +horizontal: x +vertical: y +values: + 0: 0 + 1: 0.25rem + 2: 0.5rem + 3: 0.75rem + 4: 1rem + 5: 1.5rem + 6: 3rem --- -{% include elements/anchor.html name="Text spacing" %} +{% include elements/new-tag.html version="0.9.0" %} + +
+

Bulma provides you margin m* and padding p* helpers in all directions:

+ +
    +
  • + *t for top +
    • +
  • + *r for right +
    • +
  • + *b for bottom +
    • +
  • + *l for left +
    • +
  • + *x horizontally for both left and right +
    • +
  • + *y vertically for both top and bottom +
    • +
+ +

+ You can combine a margin/padding prefix with a direciton suffix. For example: +

+ +
    +
  • for a margin-top, use mt-*
    • +
  • for a padding-bottom, use pb-*
    • +
  • for both margin-left and margin-right, use mx-*
    • +
+ +

+ Each of these property-direction combinations needs to be appended with one of 6 value suffixes: +

+
+ + + + + + + + + + + + + + + +
SuffixValue
*-00
*-10.25rem
*-20.5rem
*-30.75rem
*-41rem
*-51.5rem
*-63rem
+ +{% include elements/anchor.html name="List of all spacing helpers" %} + + + + + + + + + + + + + {% for value in page.values %} + + {% endfor %} + + + + {% for shortcut in page.shortcuts %} + {% for direction in page.directions %} + + + + {% for value in page.values %} + + {% endfor %} + + {% endfor %} + + + + + {% for value in page.values %} + + {% endfor %} + + + + + + {% for value in page.values %} + + {% endfor %} + + {% endfor %} + +
PropertyShortcutClasses ↓
Values →{{ value[1] }}
{{ shortcut[0] }}-{{ direction[0] }}{{ shortcut[1] }}{{ direction[1] }}{{ shortcut[1] }}{{ direction[1] }}-{{ value[0] }}
+ {{ shortcut[0] }}-left and
+ {{ shortcut[0] }}-right + 		{{ shortcut[1] }}{{ page.horizontal }}{{ shortcut[1] }}{{ page.horizontal }}-{{ value[0] }}
+ {{ shortcut[0] }}-top and
+ {{ shortcut[0] }}-bottom + 		{{ shortcut[1] }}{{ page.vertical }}{{ shortcut[1] }}{{ page.vertical }}-{{ value[0] }}
diff --git a/docs/documentation/helpers/typography-helpers.html b/docs/documentation/helpers/typography-helpers.html index 951cc81e..8453ce67 100644 --- a/docs/documentation/helpers/typography-helpers.html +++ b/docs/documentation/helpers/typography-helpers.html @@ -37,20 +37,20 @@ breadcrumb: {% endcapture %} {% capture size1 %} - -

{{ initial_vars['$size-1'].value }}

+ + {{ initial_vars['$size-1'].value }} {% endcapture %} {% capture unchanged %} - -

unchanged

+ + unchanged {% endcapture %} {% capture left %} - -

left-aligned

+ + left-aligned {% endcapture %} @@ -77,7 +77,6 @@ breadcrumb: {% for size in sizes %} {% assign key = '$size-' | append: forloop.index %} - is-size-{{ forloop.index }} {{ initial_vars[key].value }} @@ -96,63 +95,61 @@ breadcrumb:

- -
- - {{ thead }} - - - - {{ size1 }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - - - - {{ unchanged }} - {{ size1 }} - {{ size1 }} - {{ size1 }} - {{ size1 }} - - - - {{ size1 }} - {{ size1 }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - - - - {{ unchanged }} - {{ unchanged }} - {{ size1 }} - {{ size1 }} - {{ size1 }} - - - - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ size1 }} - {{ size1 }} - - - - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ size1 }} - - -
is-size-1-mobile
is-size-1-tablet
is-size-1-touch
is-size-1-desktop
is-size-1-widescreen
is-size-1-fullhd
-
- +
+ + {{ thead }} + + + + {{ size1 }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + + + + {{ size1 }} + {{ size1 }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + + + + {{ unchanged }} + {{ size1 }} + {{ size1 }} + {{ size1 }} + {{ size1 }} + + + + {{ unchanged }} + {{ unchanged }} + {{ size1 }} + {{ size1 }} + {{ size1 }} + + + + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ size1 }} + {{ size1 }} + + + + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ size1 }} + + +
is-size-1-mobile
is-size-1-touch
is-size-1-tablet
is-size-1-desktop
is-size-1-widescreen
is-size-1-fullhd
+

@@ -203,7 +200,7 @@ breadcrumb:

- You can now align text for each viewport width. You simply need to append the viewport width to the alignment modifier. + You can align text differently for each viewport width. Simply append the viewport width to the alignment modifier.

@@ -211,87 +208,91 @@ breadcrumb:

+
+ + {{ thead }} + + + + {{ left }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + + + + {{ left }} + {{ left }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + + + + {{ unchanged }} + {{ left }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + + + + {{ unchanged }} + {{ left }} + {{ left }} + {{ left }} + {{ left }} + + + + {{ unchanged }} + {{ unchanged }} + {{ left }} + {{ unchanged }} + {{ unchanged }} + + + + {{ unchanged }} + {{ unchanged }} + {{ left }} + {{ left }} + {{ left }} + + + + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ left }} + {{ unchanged }} + + + + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ left }} + {{ left }} + + + + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ unchanged }} + {{ left }} + + +
has-text-left-mobile
has-text-left-touch
has-text-left-tablet-only
has-text-left-tablet
has-text-left-desktop-only
has-text-left-desktop
has-text-left-widescreen-only
has-text-left-widescreen
has-text-left-fullhd
+
-
- - {{ thead }} - - - - {{ left }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - - - - {{ unchanged }} - {{ left }} - {{ left }} - {{ left }} - {{ left }} - - - - {{ unchanged }} - {{ left }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - - - - {{ left }} - {{ left }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - - - - {{ unchanged }} - {{ unchanged }} - {{ left }} - {{ left }} - {{ left }} - - - - {{ unchanged }} - {{ unchanged }} - {{ left }} - {{ unchanged }} - {{ unchanged }} - - - - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ left }} - {{ left }} - - - - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ left }} - {{ unchanged }} - - - - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ left }} - - -
has-text-left-mobile
has-text-left-tablet
has-text-left-tablet-only
has-text-left-touch
has-text-left-desktop
has-text-left-desktop-only
has-text-left-widescreen
has-text-left-widescreen-only
has-text-left-fullhd
-
- +
+

+ You can use the same logic for each of the 4 alignments. +

+
{% include elements/anchor.html name="Text transformation" %} diff --git a/docs/documentation/helpers/visibility-helpers.html b/docs/documentation/helpers/visibility-helpers.html index ef9b3f8b..1d363981 100644 --- a/docs/documentation/helpers/visibility-helpers.html +++ b/docs/documentation/helpers/visibility-helpers.html @@ -34,26 +34,26 @@ breadcrumb: {% endcapture %} {% capture flex %} - -

Flex

+ + Flex {% endcapture %} {% capture visible %} - -

Visible

+ + Visible {% endcapture %} {% capture hidden %} - -

Hidden

+ + Hidden {% endcapture %} {% capture unchanged %} - -

Unchanged

+ + Unchanged {% endcapture %} @@ -286,3 +286,22 @@ breadcrumb:
+ +{% include elements/anchor.html name="Other visibility helpers" %} + + + + + + + + + + + + + + + + +
is-invisibleAdds visibility hidden
is-hiddenHides element
is-sr-onlyHide elements visually but keep the element available to be announced by a screen reader
diff --git a/docs/documentation/modifiers/helpers.html b/docs/documentation/modifiers/helpers.html index 7495dd07..00213056 100644 --- a/docs/documentation/modifiers/helpers.html +++ b/docs/documentation/modifiers/helpers.html @@ -10,66 +10,4 @@ breadcrumb: - modifiers-helpers --- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Floatis-clearfixFixes an element's floating children
is-pulled-leftMoves an element to the left
is-pulled-rightMoves an element to the right
Spacingis-marginlessRemoves any margin
is-paddinglessRemoves any padding
Otheris-overlayCompletely covers the first positioned parent
is-clippedAdds overflow hidden
is-radiuslessRemoves any radius
is-shadowlessRemoves any shadow
is-unselectablePrevents the text from being selectable
is-invisibleAdds visibility hidden
is-hiddenHides element
is-sr-onlyHide elements visually but keep the element available to be announced by a screen reader
is-relativeApplies position: relative to the element.
+ diff --git a/docs/documentation/modifiers/responsive-helpers.html b/docs/documentation/modifiers/responsive-helpers.html index ee20ae2b..39639101 100644 --- a/docs/documentation/modifiers/responsive-helpers.html +++ b/docs/documentation/modifiers/responsive-helpers.html @@ -10,292 +10,3 @@ breadcrumb: - modifiers - modifiers-responsive-helpers --- - -{% capture thead %} - - - - Class - - {% for breakpoint_hash in site.data.breakpoints %} - {% assign breakpoint = breakpoint_hash[1] %} - - {{ breakpoint.name }}
- {% if breakpoint.id == 'mobile' %} - Up to {{ breakpoint.to }}px - {% elsif breakpoint.id == 'fullhd' %} - {{ breakpoint.from }}px and above - {% else %} - Between {{ breakpoint.from }}px and {{ breakpoint.to }}px - {% endif %} - - {% endfor %} - - -{% endcapture %} - -{% capture flex %} - -

flex

- -{% endcapture %} - -{% capture visible %} - -

visible

- -{% endcapture %} - -{% capture hidden %} - -

hidden

- -{% endcapture %} - -{% capture unchanged %} - -

unchanged

- -{% endcapture %} - -{% include elements/anchor.html name="Show" %} - -
-

- You can use one of the following display classes: -

-
    -
  • is-block
    • -
  • is-flex
    • -
  • is-inline
    • -
  • is-inline-block
    • -
  • is-inline-flex
    • -
-

For example, here's how the is-flex helper works:

-
- -{% include layout/main-close.html show_categories=true %} - -
-
- - {{ thead }} - - - - {{ flex }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - - - - {{ unchanged }} - {{ flex }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - - - - {{ unchanged }} - {{ unchanged }} - {{ flex }} - {{ unchanged }} - {{ unchanged }} - - - - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ flex }} - {{ unchanged }} - - - - - - - {{ flex }} - {{ flex }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - - - - {{ unchanged }} - {{ flex }} - {{ flex }} - {{ flex }} - {{ flex }} - - - - {{ unchanged }} - {{ unchanged }} - {{ flex }} - {{ flex }} - {{ flex }} - - - - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ flex }} - {{ flex }} - - - - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ unchanged }} - {{ flex }} - - -
- is-flex-mobile -
- is-flex-tablet-only -
- is-flex-desktop-only -
- is-flex-widescreen-only -
-

Classes to display up to or from a specific breakpoint

-
- is-flex-touch -
- is-flex-tablet -
- is-flex-desktop -
- is-flex-widescreen -
- is-flex-fullhd -
-
-
- -{% include layout/main-open.html %} - -
-

- For the other display options, just replace is-flex with is-block is-inline is-inline-block or is-inline-flex -

-
- -{% include elements/anchor.html name="Hide" %} - -{% include layout/main-close.html %} - -
-
- - {{ thead }} - - - - {{ hidden }} - {{ visible }} - {{ visible }} - {{ visible }} - {{ visible }} - - - - {{ visible }} - {{ hidden }} - {{ visible }} - {{ visible }} - {{ visible }} - - - - {{ visible }} - {{ visible }} - {{ hidden }} - {{ visible }} - {{ visible }} - - - - {{ visible }} - {{ visible }} - {{ visible }} - {{ hidden }} - {{ visible }} - - - - - - - {{ hidden }} - {{ hidden }} - {{ visible }} - {{ visible }} - {{ visible }} - - - - {{ visible }} - {{ hidden }} - {{ hidden }} - {{ hidden }} - {{ hidden }} - - - - {{ visible }} - {{ visible }} - {{ hidden }} - {{ hidden }} - {{ hidden }} - - - - {{ visible }} - {{ visible }} - {{ visible }} - {{ hidden }} - {{ hidden }} - - - - {{ visible }} - {{ visible }} - {{ visible }} - {{ visible }} - {{ hidden }} - - -
- is-hidden-mobile -
- is-hidden-tablet-only -
- is-hidden-desktop-only -
- is-hidden-widescreen-only -
-

Classes to hide up to or from a specific breakpoint

-
- is-hidden-touch -
- is-hidden-tablet -
- is-hidden-desktop -
- is-hidden-widescreen -
- is-hidden-fullhd -
-
-
- -{% include layout/main-open.html %} diff --git a/docs/lib/main.js b/docs/lib/main.js index 8349ba68..001741b3 100644 --- a/docs/lib/main.js +++ b/docs/lib/main.js @@ -263,7 +263,9 @@ document.addEventListener('DOMContentLoaded', function () { // Functions function getAll(selector) { - return Array.prototype.slice.call(document.querySelectorAll(selector), 0); + var parent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document; + + return Array.prototype.slice.call(parent.querySelectorAll(selector), 0); } // Scrolling @@ -347,6 +349,52 @@ document.addEventListener('DOMContentLoaded', function () { } } + // Spacing table + + var spacingEl = document.getElementById('spacingTable'); + var spacingRows = getAll('tbody tr', spacingEl); + var spacingCells = getAll('tbody td', spacingEl); + var spacingValues = getAll('tfoot th', spacingEl); + + spacingEl.addEventListener('mouseleave', function () { + resetTable(); + }); + + spacingCells.forEach(function (el) { + el.addEventListener('mouseenter', function () { + resetTable(); + var row = Array.prototype.indexOf.call(el.parentNode.parentNode.children, el.parentNode); + var column = Array.prototype.indexOf.call(el.parentNode.children, el); + highlightRowAndColumn(row, column); + }); + }); + + function resetTable() { + spacingRows.forEach(function (el) { + return el.classList.remove('bd-current-row'); + }); + spacingCells.forEach(function (el) { + return el.classList.remove('bd-current-column'); + }); + spacingValues.forEach(function (el) { + return el.classList.remove('bd-current-value'); + }); + } + + function highlightRowAndColumn(rowIndex, columnIndex) { + var row = spacingRows[rowIndex]; + row.classList.add('bd-current-row'); + + spacingRows.forEach(function (r) { + r.children[columnIndex].classList.add('bd-current-column'); + }); + + if (columnIndex < 2) { + return; + } + spacingValues[columnIndex - 1].classList.add('bd-current-value'); + } + // Scroll function upOrDown(lastY, currentY) { diff --git a/sass/helpers/spacing.sass b/sass/helpers/spacing.sass index 03b474c4..b7e571e8 100644 --- a/sass/helpers/spacing.sass +++ b/sass/helpers/spacing.sass @@ -11,18 +11,18 @@ $spacing-vertical: "y" !default $spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem) !default @each $property, $shortcut in $spacing-shortcuts - @each $direction, $suffix in $spacing-directions - @each $name, $value in $spacing-values - // Cardinal directions + @each $name, $value in $spacing-values + // Cardinal directions + @each $direction, $suffix in $spacing-directions .#{$shortcut}#{$suffix}-#{$name} #{$property}-#{$direction}: $value !important - // Horizontal axis - @if $spacing-horizontal != null - .#{$shortcut}#{$spacing-horizontal}-#{$name} - #{$property}-left: $value !important - #{$property}-right: $value !important - // Vertical axis - @if $spacing-vertical != null - .#{$shortcut}#{$spacing-vertical}-#{$name} - #{$property}-top: $value !important - #{$property}-bottom: $value !important + // Horizontal axis + @if $spacing-horizontal != null + .#{$shortcut}#{$spacing-horizontal}-#{$name} + #{$property}-left: $value !important + #{$property}-right: $value !important + // Vertical axis + @if $spacing-vertical != null + .#{$shortcut}#{$spacing-vertical}-#{$name} + #{$property}-top: $value !important + #{$property}-bottom: $value !important From 64bb3085b56bb23ccde4a0564ff5fccd76b09f4c Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Mon, 11 May 2020 00:40:11 +0100 Subject: [PATCH 4/6] Only highlight relevant cells --- docs/_javascript/main.js | 14 ++++++++++---- docs/_sass/specific.sass | 9 +++++++-- docs/css/bulma-docs.css | 16 ++++++++++++---- docs/lib/main.js | 16 ++++++++++------ 4 files changed, 39 insertions(+), 16 deletions(-) diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js index 6299a8e7..fa31bec9 100644 --- a/docs/_javascript/main.js +++ b/docs/_javascript/main.js @@ -366,16 +366,22 @@ document.addEventListener('DOMContentLoaded', () => { }); function resetTable() { - spacingRows.forEach(el => el.classList.remove('bd-current-row')); - spacingCells.forEach(el => el.classList.remove('bd-current-column')); + // spacingRows.forEach(el => el.classList.remove('bd-current-row')); + spacingCells.forEach(el => el.classList.remove('bd-current-row', 'bd-current-column')); spacingValues.forEach(el => el.classList.remove('bd-current-value')); } function highlightRowAndColumn(rowIndex, columnIndex) { const row = spacingRows[rowIndex]; - row.classList.add('bd-current-row'); + let i = columnIndex; - spacingRows.forEach(r => { + while (i > -1) { + row.children[i].classList.add('bd-current-row'); + i--; + } + + const nextRows = spacingRows.slice(rowIndex); + nextRows.forEach(r => { r.children[columnIndex].classList.add('bd-current-column'); }); diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass index 82ca37a9..322ff184 100644 --- a/docs/_sass/specific.sass +++ b/docs/_sass/specific.sass @@ -6,13 +6,18 @@ color: $border .bd-current-row background-color: $background - td:first-child, - .bd-current-column:not(:first-child) + &:first-child background-color: $danger-light color: $text-strong code background-color: $danger color: $danger-invert + &.bd-current-column + background-color: $primary-light + color: $text-strong + code + background-color: $primary + color: $primary-invert .bd-current-column background-color: $background .bd-current-value diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 9d01c9ed..8a8d4951 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -13176,18 +13176,26 @@ svg { background-color: whitesmoke; } -#spacingTable .bd-current-row td:first-child, -#spacingTable .bd-current-row .bd-current-column:not(:first-child) { +#spacingTable .bd-current-row:first-child { background-color: #feecf0; color: #363636; } -#spacingTable .bd-current-row td:first-child code, -#spacingTable .bd-current-row .bd-current-column:not(:first-child) code { +#spacingTable .bd-current-row:first-child code { background-color: #f14668; color: #fff; } +#spacingTable .bd-current-row.bd-current-column { + background-color: #ebfffc; + color: #363636; +} + +#spacingTable .bd-current-row.bd-current-column code { + background-color: #00d1b2; + color: #fff; +} + #spacingTable .bd-current-column { background-color: whitesmoke; } diff --git a/docs/lib/main.js b/docs/lib/main.js index 001741b3..5b47259a 100644 --- a/docs/lib/main.js +++ b/docs/lib/main.js @@ -370,11 +370,9 @@ document.addEventListener('DOMContentLoaded', function () { }); function resetTable() { - spacingRows.forEach(function (el) { - return el.classList.remove('bd-current-row'); - }); + // spacingRows.forEach(el => el.classList.remove('bd-current-row')); spacingCells.forEach(function (el) { - return el.classList.remove('bd-current-column'); + return el.classList.remove('bd-current-row', 'bd-current-column'); }); spacingValues.forEach(function (el) { return el.classList.remove('bd-current-value'); @@ -383,9 +381,15 @@ document.addEventListener('DOMContentLoaded', function () { function highlightRowAndColumn(rowIndex, columnIndex) { var row = spacingRows[rowIndex]; - row.classList.add('bd-current-row'); + var i = columnIndex; - spacingRows.forEach(function (r) { + while (i > -1) { + row.children[i].classList.add('bd-current-row'); + i--; + } + + var nextRows = spacingRows.slice(rowIndex); + nextRows.forEach(function (r) { r.children[columnIndex].classList.add('bd-current-column'); }); From 1ccf1c974145160150a7d1e15b5756b2ab22e345 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Mon, 11 May 2020 01:03:16 +0100 Subject: [PATCH 5/6] Customizing spacing helpers output --- docs/_includes/components/spacing-table.html | 54 ++++++++ docs/_includes/index/customize.html | 3 +- docs/_javascript/main.js | 44 +++---- docs/_sass/specific.sass | 2 +- docs/css/bulma-docs.css | 20 +-- .../helpers/spacing-helpers.html | 119 ++++++++++-------- docs/lib/main.js | 44 +++---- 7 files changed, 181 insertions(+), 105 deletions(-) create mode 100644 docs/_includes/components/spacing-table.html diff --git a/docs/_includes/components/spacing-table.html b/docs/_includes/components/spacing-table.html new file mode 100644 index 00000000..dcc5b937 --- /dev/null +++ b/docs/_includes/components/spacing-table.html @@ -0,0 +1,54 @@ + + + + + + + + + + + + {% for value in include.values %} + + {% endfor %} + + + + {% for shortcut in include.shortcuts %} + {% for direction in include.directions %} + + + + {% for value in include.values %} + + {% endfor %} + + {% endfor %} + + + + + {% for value in include.values %} + + {% endfor %} + + + {% if include.vertical %} + + + + {% for value in include.values %} + + {% endfor %} + + {% endif %} + {% endfor %} + +
PropertyShortcutClasses ↓
Values →{{ value[1] }}
{{ shortcut[0] }}-{{ direction[0] }}{{ shortcut[1] }}{{ direction[1] }}{{ shortcut[1] }}{{ direction[1] }}-{{ value[0] }}
+ {{ shortcut[0] }}-left and
+ {{ shortcut[0] }}-right + 		{{ shortcut[1] }}{{ include.horizontal }}{{ shortcut[1] }}{{ include.horizontal }}-{{ value[0] }}
+ {{ shortcut[0] }}-top and
+ {{ shortcut[0] }}-bottom + 		{{ shortcut[1] }}{{ include.vertical }}{{ shortcut[1] }}{{ include.vertical }}-{{ value[0] }}
diff --git a/docs/_includes/index/customize.html b/docs/_includes/index/customize.html index 29160118..208e285b 100644 --- a/docs/_includes/index/customize.html +++ b/docs/_includes/index/customize.html @@ -98,7 +98,6 @@ {% include components/hero-buttons.html href=customize_link.path - content="Learn how to customize" %} + content="Learn how to customize" %} diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js index fa31bec9..a001e224 100644 --- a/docs/_javascript/main.js +++ b/docs/_javascript/main.js @@ -347,32 +347,34 @@ document.addEventListener('DOMContentLoaded', () => { // Spacing table - const spacingEl = document.getElementById('spacingTable'); - const spacingRows = getAll('tbody tr', spacingEl); - const spacingCells = getAll('tbody td', spacingEl); - const spacingValues = getAll('tfoot th', spacingEl); + const spacingTables = getAll('.bd-spacing-table'); - spacingEl.addEventListener('mouseleave', () => { - resetTable(); - }); + spacingTables.forEach(spacingEl => { + const spacingRows = getAll('tbody tr', spacingEl); + const spacingCells = getAll('tbody td', spacingEl); + const spacingValues = getAll('tfoot th', spacingEl); - spacingCells.forEach(el => { - el.addEventListener('mouseenter', () => { - resetTable(); - const row = Array.prototype.indexOf.call(el.parentNode.parentNode.children, el.parentNode); - const column = Array.prototype.indexOf.call(el.parentNode.children, el); - highlightRowAndColumn(row, column); + spacingEl.addEventListener('mouseleave', () => { + resetTable(spacingCells, spacingValues); + }); + + spacingCells.forEach(el => { + el.addEventListener('mouseenter', () => { + resetTable(spacingCells, spacingValues); + const row = Array.prototype.indexOf.call(el.parentNode.parentNode.children, el.parentNode); + const column = Array.prototype.indexOf.call(el.parentNode.children, el); + highlightRowAndColumn(row, column, spacingRows, spacingValues); + }); }); }); - function resetTable() { - // spacingRows.forEach(el => el.classList.remove('bd-current-row')); - spacingCells.forEach(el => el.classList.remove('bd-current-row', 'bd-current-column')); - spacingValues.forEach(el => el.classList.remove('bd-current-value')); + function resetTable(cells, values) { + cells.forEach(el => el.classList.remove('bd-current-row', 'bd-current-column')); + values.forEach(el => el.classList.remove('bd-current-value')); } - function highlightRowAndColumn(rowIndex, columnIndex) { - const row = spacingRows[rowIndex]; + function highlightRowAndColumn(rowIndex, columnIndex, rows, values) { + const row = rows[rowIndex]; let i = columnIndex; while (i > -1) { @@ -380,7 +382,7 @@ document.addEventListener('DOMContentLoaded', () => { i--; } - const nextRows = spacingRows.slice(rowIndex); + const nextRows = rows.slice(rowIndex); nextRows.forEach(r => { r.children[columnIndex].classList.add('bd-current-column'); }); @@ -388,7 +390,7 @@ document.addEventListener('DOMContentLoaded', () => { if (columnIndex < 2) { return; } - spacingValues[columnIndex - 1].classList.add('bd-current-value'); + values[columnIndex - 1].classList.add('bd-current-value'); } // Scroll diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass index 322ff184..1f55467b 100644 --- a/docs/_sass/specific.sass +++ b/docs/_sass/specific.sass @@ -1,4 +1,4 @@ -#spacingTable +.bd-spacing-table &:hover color: $border code diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 8a8d4951..bc5bdfda 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -13163,48 +13163,48 @@ svg { width: 1em; } -#spacingTable:hover { +.bd-spacing-table:hover { color: #dbdbdb; } -#spacingTable:hover code { +.bd-spacing-table:hover code { background: none; color: #dbdbdb; } -#spacingTable .bd-current-row { +.bd-spacing-table .bd-current-row { background-color: whitesmoke; } -#spacingTable .bd-current-row:first-child { +.bd-spacing-table .bd-current-row:first-child { background-color: #feecf0; color: #363636; } -#spacingTable .bd-current-row:first-child code { +.bd-spacing-table .bd-current-row:first-child code { background-color: #f14668; color: #fff; } -#spacingTable .bd-current-row.bd-current-column { +.bd-spacing-table .bd-current-row.bd-current-column { background-color: #ebfffc; color: #363636; } -#spacingTable .bd-current-row.bd-current-column code { +.bd-spacing-table .bd-current-row.bd-current-column code { background-color: #00d1b2; color: #fff; } -#spacingTable .bd-current-column { +.bd-spacing-table .bd-current-column { background-color: whitesmoke; } -#spacingTable .bd-current-value { +.bd-spacing-table .bd-current-value { background-color: #feecf0; } -#spacingTable .bd-current-value code { +.bd-spacing-table .bd-current-value code { background-color: #f14668; color: #fff; } diff --git a/docs/documentation/helpers/spacing-helpers.html b/docs/documentation/helpers/spacing-helpers.html index cd7078cf..9d09573b 100644 --- a/docs/documentation/helpers/spacing-helpers.html +++ b/docs/documentation/helpers/spacing-helpers.html @@ -26,6 +26,13 @@ values: 4: 1rem 5: 1.5rem 6: 3rem +customShortcuts: + margin: mg +customHorizontal: h +customValues: + small: 10px + medium: 30px + large: 60px --- {% include elements/new-tag.html version="0.9.0" %} @@ -87,55 +94,67 @@ values: {% include elements/anchor.html name="List of all spacing helpers" %} - - - - - - - - - - - - {% for value in page.values %} - - {% endfor %} - - - - {% for shortcut in page.shortcuts %} - {% for direction in page.directions %} - - - - {% for value in page.values %} - - {% endfor %} - - {% endfor %} +

+ There are 84 spacing helpers to choose from: +

- - - - {% for value in page.values %} - - {% endfor %} - +{% include + components/spacing-table.html + values=page.values + shortcuts=page.shortcuts + directions=page.directions + horizontal=page.horizontal + vertical=page.vertical +%} - - - - {% for value in page.values %} - - {% endfor %} - - {% endfor %} - -
PropertyShortcutClasses ↓
Values →{{ value[1] }}
{{ shortcut[0] }}-{{ direction[0] }}{{ shortcut[1] }}{{ direction[1] }}{{ shortcut[1] }}{{ direction[1] }}-{{ value[0] }}
- {{ shortcut[0] }}-left and
- {{ shortcut[0] }}-right - 		{{ shortcut[1] }}{{ page.horizontal }}{{ shortcut[1] }}{{ page.horizontal }}-{{ value[0] }}
- {{ shortcut[0] }}-top and
- {{ shortcut[0] }}-bottom - 		{{ shortcut[1] }}{{ page.vertical }}{{ shortcut[1] }}{{ page.vertical }}-{{ value[0] }}
+{% include elements/anchor.html name="Configuration" %} + +{% capture custom %} +$spacing-shortcuts: ("margin": "mg"); +$spacing-horizontal: "h"; +$spacing-vertical: null; +$spacing-values: ("small": 10px, "medium": 30px, "large": 60px); +{% endcapture %} + +
+

+ Because every developer has their own preferences, and to satisfy Bulma's customization features, it's possible to specify your own class name shortcuts as well as the spacing values. +

+

+ For example, if you wanted: +

+
    +
  • + margin to be abbreviated to mg +
    • +
  • + padding to be totally excluded +
    • +
  • + horizontal to be abbreviated to h as shortcut +
    • +
  • + vertical to be ommited +
    • +
  • + to only have 3 values: "small" at 10px, "medium" at 30px, and "large" at 60px +
    • +
+

+ You can simplify the CSS output by customizing these SCSS variables: +

+
+ +{% highlight scss %}{{ custom }}{% endhighlight %} + +{% include + components/spacing-table.html + values=page.customValues + shortcuts=page.customShortcuts + directions=page.directions + horizontal=page.customHorizontal +%} + +

+ By customizing the output, you've narrowed down the list of spacing helpers from 84 to only 15. +

diff --git a/docs/lib/main.js b/docs/lib/main.js index 5b47259a..bb41995c 100644 --- a/docs/lib/main.js +++ b/docs/lib/main.js @@ -351,36 +351,38 @@ document.addEventListener('DOMContentLoaded', function () { // Spacing table - var spacingEl = document.getElementById('spacingTable'); - var spacingRows = getAll('tbody tr', spacingEl); - var spacingCells = getAll('tbody td', spacingEl); - var spacingValues = getAll('tfoot th', spacingEl); + var spacingTables = getAll('.bd-spacing-table'); - spacingEl.addEventListener('mouseleave', function () { - resetTable(); - }); + spacingTables.forEach(function (spacingEl) { + var spacingRows = getAll('tbody tr', spacingEl); + var spacingCells = getAll('tbody td', spacingEl); + var spacingValues = getAll('tfoot th', spacingEl); - spacingCells.forEach(function (el) { - el.addEventListener('mouseenter', function () { - resetTable(); - var row = Array.prototype.indexOf.call(el.parentNode.parentNode.children, el.parentNode); - var column = Array.prototype.indexOf.call(el.parentNode.children, el); - highlightRowAndColumn(row, column); + spacingEl.addEventListener('mouseleave', function () { + resetTable(spacingCells, spacingValues); + }); + + spacingCells.forEach(function (el) { + el.addEventListener('mouseenter', function () { + resetTable(spacingCells, spacingValues); + var row = Array.prototype.indexOf.call(el.parentNode.parentNode.children, el.parentNode); + var column = Array.prototype.indexOf.call(el.parentNode.children, el); + highlightRowAndColumn(row, column, spacingRows, spacingValues); + }); }); }); - function resetTable() { - // spacingRows.forEach(el => el.classList.remove('bd-current-row')); - spacingCells.forEach(function (el) { + function resetTable(cells, values) { + cells.forEach(function (el) { return el.classList.remove('bd-current-row', 'bd-current-column'); }); - spacingValues.forEach(function (el) { + values.forEach(function (el) { return el.classList.remove('bd-current-value'); }); } - function highlightRowAndColumn(rowIndex, columnIndex) { - var row = spacingRows[rowIndex]; + function highlightRowAndColumn(rowIndex, columnIndex, rows, values) { + var row = rows[rowIndex]; var i = columnIndex; while (i > -1) { @@ -388,7 +390,7 @@ document.addEventListener('DOMContentLoaded', function () { i--; } - var nextRows = spacingRows.slice(rowIndex); + var nextRows = rows.slice(rowIndex); nextRows.forEach(function (r) { r.children[columnIndex].classList.add('bd-current-column'); }); @@ -396,7 +398,7 @@ document.addEventListener('DOMContentLoaded', function () { if (columnIndex < 2) { return; } - spacingValues[columnIndex - 1].classList.add('bd-current-value'); + values[columnIndex - 1].classList.add('bd-current-value'); } // Scroll From 1549f647b6331cd8bdaa577a0fbb7be494360e84 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Wed, 13 May 2020 13:09:44 +0100 Subject: [PATCH 6/6] Change wording --- docs/documentation/helpers/spacing-helpers.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/documentation/helpers/spacing-helpers.html b/docs/documentation/helpers/spacing-helpers.html index 9d09573b..e60914c8 100644 --- a/docs/documentation/helpers/spacing-helpers.html +++ b/docs/documentation/helpers/spacing-helpers.html @@ -38,7 +38,7 @@ customValues: {% include elements/new-tag.html version="0.9.0" %}
-

Bulma provides you margin m* and padding p* helpers in all directions:

+

Bulma provides margin m* and padding p* helpers in all directions:

  • @@ -62,7 +62,7 @@ customValues:

- You can combine a margin/padding prefix with a direciton suffix. For example: + You need to combine a margin/padding prefix with a direciton suffix. For example:

    @@ -94,7 +94,7 @@ customValues: {% include elements/anchor.html name="List of all spacing helpers" %} -

    +

    There are 84 spacing helpers to choose from:

    @@ -131,13 +131,13 @@ $spacing-values: ("small": 10px, "medium": 30px, "large": 60px); padding to be totally excluded
  • - horizontal to be abbreviated to h as shortcut + horizontal to be abbreviated to h
  • - vertical to be ommited + vertical to be excluded as well
  • - to only have 3 values: "small" at 10px, "medium" at 30px, and "large" at 60px + and to only have 3 values: "small" at 10px, "medium" at 30px, and "large" at 60px