From 7224fc260c5b249fd0e3b7fe397863a9d2d4dbd4 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Sun, 10 May 2020 22:10:51 +0100 Subject: [PATCH] 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)