### Raising an issue
-* Make sure the issue hasn't been raised yet
-* Include **screenshots** and animated GIFs in your issue whenever possible
+- Make sure the issue hasn't been raised yet
+- Include **screenshots** and animated GIFs in your issue whenever possible
### Submitting a Pull Request
-* Include **screenshots** and animated GIFs in your pull request whenever possible
-* Use the **present** tense ("Add feature" not "Added feature")
-* Use the **imperative** mood ("Move cursor to..." not "Moves cursor to...")
-* Limit the first line to 72 characters or fewer
-* Reference issues and pull requests liberally
+- Include **screenshots** and animated GIFs in your pull request whenever possible
+- Use the **present** tense ("Add feature" not "Added feature")
+- Use the **imperative** mood ("Move cursor to..." not "Moves cursor to...")
+- Limit the first line to 72 characters or fewer
+- Reference issues and pull requests liberally
### Try your changes
-When modifying any `.sass`, you will need to rebuild the css. You can do this by running:
+When modifying any `.scss`, you will need to rebuild the css. You can do this by running:
```
npm install
### Bulma Sass styleguide
-* **No semi-colons** `;` or **curly braces** `{` `}`
-* **No camelCase**
-* Use only **classes**
-* Order the CSS properties **alphabetically**
-* Order the CSS rule by
- * direct styles
- * nested tags
- * pseudo-classes
- * color modifiers
- * size modifiers
- * modifiers
- * responsive styles
-* Add appropriate one-line comments for each of these sections within a CSS rule
-* **No trailing space**
-* End files with a **newline**
+- **No semi-colons** `;` or **curly braces** `{` `}`
+- **No camelCase**
+- Use only **classes**
+- Order the CSS properties **alphabetically**
+- Order the CSS rule by
+ - direct styles
+ - nested tags
+ - pseudo-classes
+ - color modifiers
+ - size modifiers
+ - modifiers
+ - responsive styles
+- Add appropriate one-line comments for each of these sections within a CSS rule
+- **No trailing space**
+- End files with a **newline**
```sass
.element
<!-- DO NOT REBUILD THE CSS OUTPUT IN YOUR PR -->
<!-- Choose one of the following: -->
+
This is a **new feature | improvement | bugfix | documentation fix**.
+
<!-- New feature? Update the CHANGELOG.md too, and eventually the Docs. -->
<!-- Improvement? Explain how and why. -->
<!-- Bugfix? Reference that issue as well. -->
<!-- BEFORE SUBMITTING YOUR PR, MAKE SURE TO FOLLOW THESE STEPS: -->
<!-- 1. Pull the latest `master` branch -->
<!-- 2. Make sure your Sass code is compliant with the [Bulma Sass styleguide](https://github.com/jgthms/bulma/blob/master/.github/CONTRIBUTING.md#bulma-sass-styleguide) -->
-<!-- 3. Make sure your PR only affects `.sass` or documentation files -->
+<!-- 3. Make sure your PR only affects `.scss` or documentation files -->
<!-- 4. [Try your changes](https://github.com/jgthms/bulma/blob/master/.github/CONTRIBUTING.md#try-your-changes). -->
<!-- How have you confirmed this feature works? -->
"homepage": "https://bulma.io",
"authors": ["jgthms <bbxdesign@gmail.com>"],
"description": "Modern CSS framework based on Flexbox",
- "main": "bulma.sass",
- "keywords": ["css", "sass", "flexbox", "responsive", "framework"],
+ "main": "bulma.scss",
+ "keywords": [
+ "css",
+ "sass",
+ "scss",
+ "modern",
+ "flexbox",
+ "responsive",
+ "framework"
+ ],
"license": "MIT",
"ignore": [
"**/.*",
+++ /dev/null
-@charset "utf-8"
-$rtl: true
-@import "bulma"
--- /dev/null
+@charset "utf-8";
+
+$rtl: true;
+
+@import "bulma";
+++ /dev/null
-@charset "utf-8"
-/*! bulma.io v0.9.4 | MIT License | github.com/jgthms/bulma */
-@import "sass/utilities/_all"
-@import "sass/base/_all"
-@import "sass/elements/_all"
-@import "sass/form/_all"
-@import "sass/components/_all"
-@import "sass/grid/_all"
-@import "sass/helpers/_all"
-@import "sass/layout/_all"
--- /dev/null
+@charset "utf-8";
+
+/*! bulma.io v0.9.4 | MIT License | github.com/jgthms/bulma */
+@import "sass/utilities/_all";
+@import "sass/base/_all";
+@import "sass/elements/_all";
+@import "sass/form/_all";
+@import "sass/components/_all";
+@import "sass/grid/_all";
+@import "sass/helpers/_all";
+@import "sass/layout/_all";
"url": "https://jgthms.com"
},
"description": "Modern CSS framework based on Flexbox",
- "main": "bulma.sass",
+ "main": "bulma.scss",
"unpkg": "css/bulma.css",
"style": "bulma/css/bulma.min.css",
"repository": {
"keywords": [
"css",
"sass",
+ "scss",
+ "modern",
"flexbox",
"responsive",
"framework"
"build": "npm run build-sass && npm run build-autoprefix && npm run build-cleancss",
"build-autoprefix": "postcss --use autoprefixer --map false --output css/bulma.css css/bulma.css",
"build-cleancss": "cleancss -o css/bulma.min.css css/bulma.css",
- "build-sass": "node-sass --output-style expanded --source-map true bulma.sass css/bulma.css",
+ "build-sass": "node-sass --output-style expanded --source-map true bulma.scss css/bulma.css",
"clean": "rimraf css",
"rtl": "npm run rtl-sass && npm run rtl-autoprefix && npm run rtl-cleancss",
- "rtl-sass": "node-sass --output-style expanded --source-map true bulma-rtl.sass css/bulma-rtl.css",
+ "rtl-sass": "node-sass --output-style expanded --source-map true bulma-rtl.scss css/bulma-rtl.css",
"rtl-autoprefix": "postcss --use autoprefixer --map false --output css/bulma-rtl.css css/bulma-rtl.css",
"rtl-cleancss": "cleancss -o css/bulma-rtl.min.css css/bulma-rtl.css",
"deploy": "npm run clean && npm run build && npm run rtl",
"files": [
"css",
"sass",
- "bulma.sass",
+ "bulma.scss",
+ "bulma-rtl.scss",
"LICENSE",
"README.md"
]
+++ /dev/null
-/* Bulma Base */
-@charset "utf-8"
-
-@import "minireset"
-@import "generic"
-@import "animations"
--- /dev/null
+/* Bulma Base */
+@charset "utf-8";
+
+@import "minireset";
+@import "generic";
+@import "animations";
+++ /dev/null
-@keyframes spinAround
- from
- transform: rotate(0deg)
- to
- transform: rotate(359deg)
--- /dev/null
+@keyframes spinAround {
+ from {
+ transform: rotate(0deg);
+ }
+
+ to {
+ transform: rotate(359deg);
+ }
+}
+++ /dev/null
-@import "../utilities/mixins"
-
-$body-background-color: $scheme-main !default
-$body-size: 16px !default
-$body-min-width: 300px !default
-$body-rendering: optimizeLegibility !default
-$body-family: $family-primary !default
-$body-overflow-x: hidden !default
-$body-overflow-y: scroll !default
-
-$body-color: $text !default
-$body-font-size: 1em !default
-$body-weight: $weight-normal !default
-$body-line-height: 1.5 !default
-
-$code-family: $family-code !default
-$code-padding: 0.25em 0.5em 0.25em !default
-$code-weight: normal !default
-$code-size: 0.875em !default
-
-$small-font-size: 0.875em !default
-
-$hr-background-color: $background !default
-$hr-height: 2px !default
-$hr-margin: 1.5rem 0 !default
-
-$strong-color: $text-strong !default
-$strong-weight: $weight-bold !default
-
-$pre-font-size: 0.875em !default
-$pre-padding: 1.25rem 1.5rem !default
-$pre-code-font-size: 1em !default
-
-html
- background-color: $body-background-color
- font-size: $body-size
- -moz-osx-font-smoothing: grayscale
- -webkit-font-smoothing: antialiased
- min-width: $body-min-width
- overflow-x: $body-overflow-x
- overflow-y: $body-overflow-y
- text-rendering: $body-rendering
- text-size-adjust: 100%
-
-article,
-aside,
-figure,
-footer,
-header,
-hgroup,
-section
- display: block
-
-body,
-button,
-input,
-optgroup,
-select,
-textarea
- font-family: $body-family
-
-code,
-pre
- -moz-osx-font-smoothing: auto
- -webkit-font-smoothing: auto
- font-family: $code-family
-
-body
- color: $body-color
- font-size: $body-font-size
- font-weight: $body-weight
- line-height: $body-line-height
-
-// Inline
-
-a
- color: $link
- cursor: pointer
- text-decoration: none
- strong
- color: currentColor
- &:hover
- color: $link-hover
-
-code
- background-color: $code-background
- color: $code
- font-size: $code-size
- font-weight: $code-weight
- padding: $code-padding
-
-hr
- background-color: $hr-background-color
- border: none
- display: block
- height: $hr-height
- margin: $hr-margin
-
-img
- height: auto
- max-width: 100%
-
-input[type="checkbox"],
-input[type="radio"]
- vertical-align: baseline
-
-small
- font-size: $small-font-size
-
-span
- font-style: inherit
- font-weight: inherit
-
-strong
- color: $strong-color
- font-weight: $strong-weight
-
-// Block
-
-fieldset
- border: none
-
-pre
- +overflow-touch
- background-color: $pre-background
- color: $pre
- font-size: $pre-font-size
- overflow-x: auto
- padding: $pre-padding
- white-space: pre
- word-wrap: normal
- code
- background-color: transparent
- color: currentColor
- font-size: $pre-code-font-size
- padding: 0
-
-table
- td,
- th
- vertical-align: top
- &:not([align])
- text-align: inherit
- th
- color: $text-strong
--- /dev/null
+@import "../utilities/mixins";
+
+$body-background-color: $scheme-main !default;
+$body-size: 16px !default;
+$body-min-width: 300px !default;
+$body-rendering: optimizeLegibility !default;
+$body-family: $family-primary !default;
+$body-overflow-x: hidden !default;
+$body-overflow-y: scroll !default;
+
+$body-color: $text !default;
+$body-font-size: 1em !default;
+$body-weight: $weight-normal !default;
+$body-line-height: 1.5 !default;
+
+$code-family: $family-code !default;
+$code-padding: 0.25em 0.5em 0.25em !default;
+$code-weight: normal !default;
+$code-size: 0.875em !default;
+
+$small-font-size: 0.875em !default;
+
+$hr-background-color: $background !default;
+$hr-height: 2px !default;
+$hr-margin: 1.5rem 0 !default;
+
+$strong-color: $text-strong !default;
+$strong-weight: $weight-bold !default;
+
+$pre-font-size: 0.875em !default;
+$pre-padding: 1.25rem 1.5rem !default;
+$pre-code-font-size: 1em !default;
+
+html {
+ background-color: $body-background-color;
+ font-size: $body-size;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ min-width: $body-min-width;
+ overflow-x: $body-overflow-x;
+ overflow-y: $body-overflow-y;
+ text-rendering: $body-rendering;
+ text-size-adjust: 100%;
+}
+
+article,
+aside,
+figure,
+footer,
+header,
+hgroup,
+section {
+ display: block;
+}
+
+body,
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: $body-family;
+}
+
+code,
+pre {
+ -moz-osx-font-smoothing: auto;
+ -webkit-font-smoothing: auto;
+ font-family: $code-family;
+}
+
+body {
+ color: $body-color;
+ font-size: $body-font-size;
+ font-weight: $body-weight;
+ line-height: $body-line-height;
+}
+
+// Inline
+
+a {
+ color: $link;
+ cursor: pointer;
+ text-decoration: none;
+
+ strong {
+ color: currentColor;
+ }
+
+ &:hover {
+ color: $link-hover;
+ }
+}
+
+code {
+ background-color: $code-background;
+ color: $code;
+ font-size: $code-size;
+ font-weight: $code-weight;
+ padding: $code-padding;
+}
+
+hr {
+ background-color: $hr-background-color;
+ border: none;
+ display: block;
+ height: $hr-height;
+ margin: $hr-margin;
+}
+
+img {
+ height: auto;
+ max-width: 100%;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+ vertical-align: baseline;
+}
+
+small {
+ font-size: $small-font-size;
+}
+
+span {
+ font-style: inherit;
+ font-weight: inherit;
+}
+
+strong {
+ color: $strong-color;
+ font-weight: $strong-weight;
+}
+
+// Block
+
+fieldset {
+ border: none;
+}
+
+pre {
+ @include overflow-touch;
+
+ background-color: $pre-background;
+ color: $pre;
+ font-size: $pre-font-size;
+ overflow-x: auto;
+ padding: $pre-padding;
+ white-space: pre;
+ word-wrap: normal;
+
+ code {
+ background-color: transparent;
+ color: currentColor;
+ font-size: $pre-code-font-size;
+ padding: 0;
+ }
+}
+
+table {
+ td,
+ th {
+ vertical-align: top;
+
+ &:not([align]) {
+ text-align: inherit;
+ }
+ }
+
+ th {
+ color: $text-strong;
+ }
+}
+++ /dev/null
-@warn "The helpers.sass file is DEPRECATED. It has moved into its own /helpers folder. Please import sass/helpers/_all instead."
--- /dev/null
+@warn "The helpers.scss file is DEPRECATED. It has moved into its own /helpers folder. Please import sass/helpers/_all instead.";
+++ /dev/null
-/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
-// Blocks
-html,
-body,
-p,
-ol,
-ul,
-li,
-dl,
-dt,
-dd,
-blockquote,
-figure,
-fieldset,
-legend,
-textarea,
-pre,
-iframe,
-hr,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6
- margin: 0
- padding: 0
-
-// Headings
-h1,
-h2,
-h3,
-h4,
-h5,
-h6
- font-size: 100%
- font-weight: normal
-
-// List
-ul
- list-style: none
-
-// Form
-button,
-input,
-select,
-textarea
- margin: 0
-
-// Box sizing
-html
- box-sizing: border-box
-
-*
- &,
- &::before,
- &::after
- box-sizing: inherit
-
-// Media
-img,
-video
- height: auto
- max-width: 100%
-
-// Iframe
-iframe
- border: 0
-
-// Table
-table
- border-collapse: collapse
- border-spacing: 0
-
-td,
-th
- padding: 0
- &:not([align])
- text-align: inherit
--- /dev/null
+/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
+// Blocks
+html,
+body,
+p,
+ol,
+ul,
+li,
+dl,
+dt,
+dd,
+blockquote,
+figure,
+fieldset,
+legend,
+textarea,
+pre,
+iframe,
+hr,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ margin: 0;
+ padding: 0;
+}
+
+// Headings
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-size: 100%;
+ font-weight: normal;
+}
+
+// List
+ul {
+ list-style: none;
+}
+
+// Form
+button,
+input,
+select,
+textarea {
+ margin: 0;
+}
+
+// Box sizing
+html {
+ box-sizing: border-box;
+}
+
+* {
+ &,
+ &::before,
+ &::after {
+ box-sizing: inherit;
+ }
+}
+
+// Media
+img,
+video {
+ height: auto;
+ max-width: 100%;
+}
+
+// Iframe
+iframe {
+ border: 0;
+}
+
+// Table
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+td,
+th {
+ padding: 0;
+
+ &:not([align]) {
+ text-align: inherit;
+ }
+}
+++ /dev/null
-/* Bulma Components */
-@charset "utf-8"
-
-@import "breadcrumb"
-@import "card"
-@import "dropdown"
-@import "level"
-@import "media"
-@import "menu"
-@import "message"
-@import "modal"
-@import "navbar"
-@import "pagination"
-@import "panel"
-@import "tabs"
--- /dev/null
+/* Bulma Components */
+@charset "utf-8";
+
+@import "breadcrumb";
+@import "card";
+@import "dropdown";
+@import "level";
+@import "media";
+@import "menu";
+@import "message";
+@import "modal";
+@import "navbar";
+@import "pagination";
+@import "panel";
+@import "tabs";
+++ /dev/null
-@import "../utilities/mixins"
-
-$breadcrumb-item-color: $link !default
-$breadcrumb-item-hover-color: $link-hover !default
-$breadcrumb-item-active-color: $text-strong !default
-
-$breadcrumb-item-padding-vertical: 0 !default
-$breadcrumb-item-padding-horizontal: 0.75em !default
-
-$breadcrumb-item-separator-color: $border-hover !default
-
-.breadcrumb
- @extend %block
- @extend %unselectable
- font-size: $size-normal
- white-space: nowrap
- a
- align-items: center
- color: $breadcrumb-item-color
- display: flex
- justify-content: center
- padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal
- &:hover
- color: $breadcrumb-item-hover-color
- li
- align-items: center
- display: flex
- &:first-child a
- +ltr-property("padding", 0, false)
- &.is-active
- a
- color: $breadcrumb-item-active-color
- cursor: default
- pointer-events: none
- & + li::before
- color: $breadcrumb-item-separator-color
- content: "\0002f"
- ul,
- ol
- align-items: flex-start
- display: flex
- flex-wrap: wrap
- justify-content: flex-start
- .icon
- &:first-child
- +ltr-property("margin", 0.5em)
- &:last-child
- +ltr-property("margin", 0.5em, false)
- // Alignment
- &.is-centered
- ol,
- ul
- justify-content: center
- &.is-right
- ol,
- ul
- justify-content: flex-end
- // Sizes
- &.is-small
- font-size: $size-small
- &.is-medium
- font-size: $size-medium
- &.is-large
- font-size: $size-large
- // Styles
- &.has-arrow-separator
- li + li::before
- content: "\02192"
- &.has-bullet-separator
- li + li::before
- content: "\02022"
- &.has-dot-separator
- li + li::before
- content: "\000b7"
- &.has-succeeds-separator
- li + li::before
- content: "\0227B"
--- /dev/null
+@import "../utilities/mixins";
+
+$breadcrumb-item-color: $link !default;
+$breadcrumb-item-hover-color: $link-hover !default;
+$breadcrumb-item-active-color: $text-strong !default;
+
+$breadcrumb-item-padding-vertical: 0 !default;
+$breadcrumb-item-padding-horizontal: 0.75em !default;
+
+$breadcrumb-item-separator-color: $border-hover !default;
+
+.breadcrumb {
+ @extend %block;
+
+ @extend %unselectable;
+
+ font-size: $size-normal;
+ white-space: nowrap;
+
+ a {
+ align-items: center;
+ color: $breadcrumb-item-color;
+ display: flex;
+ justify-content: center;
+ padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal;
+
+ &:hover {
+ color: $breadcrumb-item-hover-color;
+ }
+ }
+
+ li {
+ align-items: center;
+ display: flex;
+
+ &:first-child a {
+ @include ltr-property("padding", 0, false);
+ }
+
+ &.is-active {
+ a {
+ color: $breadcrumb-item-active-color;
+ cursor: default;
+ pointer-events: none;
+ }
+ }
+
+ & + li::before {
+ color: $breadcrumb-item-separator-color;
+ content: "/";
+ }
+ }
+
+ ul,
+ ol {
+ align-items: flex-start;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ }
+
+ .icon {
+ &:first-child {
+ @include ltr-property("margin", 0.5em);
+ }
+
+ &:last-child {
+ @include ltr-property("margin", 0.5em, false);
+ }
+ }
+
+ // Alignment
+ &.is-centered {
+ ol,
+ ul {
+ justify-content: center;
+ }
+ }
+
+ &.is-right {
+ ol,
+ ul {
+ justify-content: flex-end;
+ }
+ }
+
+ // Sizes
+ &.is-small {
+ font-size: $size-small;
+ }
+
+ &.is-medium {
+ font-size: $size-medium;
+ }
+
+ &.is-large {
+ font-size: $size-large;
+ }
+
+ // Styles
+ &.has-arrow-separator {
+ li + li::before {
+ content: "→";
+ }
+ }
+
+ &.has-bullet-separator {
+ li + li::before {
+ content: "•";
+ }
+ }
+
+ &.has-dot-separator {
+ li + li::before {
+ content: "·";
+ }
+ }
+
+ &.has-succeeds-separator {
+ li + li::before {
+ content: "≻";
+ }
+ }
+}
+++ /dev/null
-@import "../utilities/mixins"
-
-$card-color: $text !default
-$card-background-color: $scheme-main !default
-$card-shadow: $shadow !default
-$card-radius: 0.25rem !default
-
-$card-header-background-color: transparent !default
-$card-header-color: $text-strong !default
-$card-header-padding: 0.75rem 1rem !default
-$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default
-$card-header-weight: $weight-bold !default
-
-$card-content-background-color: transparent !default
-$card-content-padding: 1.5rem !default
-
-$card-footer-background-color: transparent !default
-$card-footer-border-top: 1px solid $border-light !default
-$card-footer-padding: 0.75rem !default
-
-$card-media-margin: $block-spacing !default
-
-.card
- background-color: $card-background-color
- border-radius: $card-radius
- box-shadow: $card-shadow
- color: $card-color
- max-width: 100%
- position: relative
-
-%card-item
- &:first-child
- border-top-left-radius: $card-radius
- border-top-right-radius: $card-radius
- &:last-child
- border-bottom-left-radius: $card-radius
- border-bottom-right-radius: $card-radius
-
-.card-header
- @extend %card-item
- background-color: $card-header-background-color
- align-items: stretch
- box-shadow: $card-header-shadow
- display: flex
-
-.card-header-title
- align-items: center
- color: $card-header-color
- display: flex
- flex-grow: 1
- font-weight: $card-header-weight
- padding: $card-header-padding
- &.is-centered
- justify-content: center
-
-.card-header-icon
- +reset
- align-items: center
- cursor: pointer
- display: flex
- justify-content: center
- padding: $card-header-padding
-
-.card-image
- display: block
- position: relative
- &:first-child
- img
- border-top-left-radius: $card-radius
- border-top-right-radius: $card-radius
- &:last-child
- img
- border-bottom-left-radius: $card-radius
- border-bottom-right-radius: $card-radius
-
-.card-content
- @extend %card-item
- background-color: $card-content-background-color
- padding: $card-content-padding
-
-.card-footer
- @extend %card-item
- background-color: $card-footer-background-color
- border-top: $card-footer-border-top
- align-items: stretch
- display: flex
-
-.card-footer-item
- align-items: center
- display: flex
- flex-basis: 0
- flex-grow: 1
- flex-shrink: 0
- justify-content: center
- padding: $card-footer-padding
- &:not(:last-child)
- +ltr-property("border", $card-footer-border-top)
-
-// Combinations
-
-.card
- .media:not(:last-child)
- margin-bottom: $card-media-margin
--- /dev/null
+@import "../utilities/mixins";
+
+$card-color: $text !default;
+$card-background-color: $scheme-main !default;
+$card-shadow: $shadow !default;
+$card-radius: 0.25rem !default;
+
+$card-header-background-color: transparent !default;
+$card-header-color: $text-strong !default;
+$card-header-padding: 0.75rem 1rem !default;
+$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default;
+$card-header-weight: $weight-bold !default;
+
+$card-content-background-color: transparent !default;
+$card-content-padding: 1.5rem !default;
+
+$card-footer-background-color: transparent !default;
+$card-footer-border-top: 1px solid $border-light !default;
+$card-footer-padding: 0.75rem !default;
+
+$card-media-margin: $block-spacing !default;
+
+.card {
+ background-color: $card-background-color;
+ border-radius: $card-radius;
+ box-shadow: $card-shadow;
+ color: $card-color;
+ max-width: 100%;
+ position: relative;
+}
+
+%card-item {
+ &:first-child {
+ border-top-left-radius: $card-radius;
+ border-top-right-radius: $card-radius;
+ }
+
+ &:last-child {
+ border-bottom-left-radius: $card-radius;
+ border-bottom-right-radius: $card-radius;
+ }
+}
+
+.card-header {
+ @extend %card-item;
+
+ background-color: $card-header-background-color;
+ align-items: stretch;
+ box-shadow: $card-header-shadow;
+ display: flex;
+}
+
+.card-header-title {
+ align-items: center;
+ color: $card-header-color;
+ display: flex;
+ flex-grow: 1;
+ font-weight: $card-header-weight;
+ padding: $card-header-padding;
+
+ &.is-centered {
+ justify-content: center;
+ }
+}
+
+.card-header-icon {
+ @include reset;
+
+ align-items: center;
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ padding: $card-header-padding;
+}
+
+.card-image {
+ display: block;
+ position: relative;
+
+ &:first-child {
+ img {
+ border-top-left-radius: $card-radius;
+ border-top-right-radius: $card-radius;
+ }
+ }
+
+ &:last-child {
+ img {
+ border-bottom-left-radius: $card-radius;
+ border-bottom-right-radius: $card-radius;
+ }
+ }
+}
+
+.card-content {
+ @extend %card-item;
+
+ background-color: $card-content-background-color;
+ padding: $card-content-padding;
+}
+
+.card-footer {
+ @extend %card-item;
+
+ background-color: $card-footer-background-color;
+ border-top: $card-footer-border-top;
+ align-items: stretch;
+ display: flex;
+}
+
+.card-footer-item {
+ align-items: center;
+ display: flex;
+ flex-basis: 0;
+ flex-grow: 1;
+ flex-shrink: 0;
+ justify-content: center;
+ padding: $card-footer-padding;
+
+ &:not(:last-child) {
+ @include ltr-property("border", $card-footer-border-top);
+ }
+}
+
+// Combinations
+
+.card {
+ .media:not(:last-child) {
+ margin-bottom: $card-media-margin;
+ }
+}
+++ /dev/null
-@import "../utilities/mixins"
-
-$dropdown-menu-min-width: 12rem !default
-
-$dropdown-content-background-color: $scheme-main !default
-$dropdown-content-arrow: $link !default
-$dropdown-content-offset: 4px !default
-$dropdown-content-padding-bottom: 0.5rem !default
-$dropdown-content-padding-top: 0.5rem !default
-$dropdown-content-radius: $radius !default
-$dropdown-content-shadow: $shadow !default
-$dropdown-content-z: 20 !default
-
-$dropdown-item-color: $text !default
-$dropdown-item-hover-color: $scheme-invert !default
-$dropdown-item-hover-background-color: $background !default
-$dropdown-item-active-color: $link-invert !default
-$dropdown-item-active-background-color: $link !default
-
-$dropdown-divider-background-color: $border-light !default
-
-.dropdown
- display: inline-flex
- position: relative
- vertical-align: top
- &.is-active,
- &.is-hoverable:hover
- .dropdown-menu
- display: block
- &.is-right
- .dropdown-menu
- left: auto
- right: 0
- &.is-up
- .dropdown-menu
- bottom: 100%
- padding-bottom: $dropdown-content-offset
- padding-top: initial
- top: auto
-
-.dropdown-menu
- display: none
- +ltr-position(0, false)
- min-width: $dropdown-menu-min-width
- padding-top: $dropdown-content-offset
- position: absolute
- top: 100%
- z-index: $dropdown-content-z
-
-.dropdown-content
- background-color: $dropdown-content-background-color
- border-radius: $dropdown-content-radius
- box-shadow: $dropdown-content-shadow
- padding-bottom: $dropdown-content-padding-bottom
- padding-top: $dropdown-content-padding-top
-
-.dropdown-item
- color: $dropdown-item-color
- display: block
- font-size: 0.875rem
- line-height: 1.5
- padding: 0.375rem 1rem
- position: relative
-
-a.dropdown-item,
-button.dropdown-item
- +ltr-property("padding", 3rem)
- text-align: inherit
- white-space: nowrap
- width: 100%
- &:hover
- background-color: $dropdown-item-hover-background-color
- color: $dropdown-item-hover-color
- &.is-active
- background-color: $dropdown-item-active-background-color
- color: $dropdown-item-active-color
-
-.dropdown-divider
- background-color: $dropdown-divider-background-color
- border: none
- display: block
- height: 1px
- margin: 0.5rem 0
--- /dev/null
+@import "../utilities/mixins";
+
+$dropdown-menu-min-width: 12rem !default;
+
+$dropdown-content-background-color: $scheme-main !default;
+$dropdown-content-arrow: $link !default;
+$dropdown-content-offset: 4px !default;
+$dropdown-content-padding-bottom: 0.5rem !default;
+$dropdown-content-padding-top: 0.5rem !default;
+$dropdown-content-radius: $radius !default;
+$dropdown-content-shadow: $shadow !default;
+$dropdown-content-z: 20 !default;
+
+$dropdown-item-color: $text !default;
+$dropdown-item-hover-color: $scheme-invert !default;
+$dropdown-item-hover-background-color: $background !default;
+$dropdown-item-active-color: $link-invert !default;
+$dropdown-item-active-background-color: $link !default;
+
+$dropdown-divider-background-color: $border-light !default;
+
+.dropdown {
+ display: inline-flex;
+ position: relative;
+ vertical-align: top;
+
+ &.is-active,
+ &.is-hoverable:hover {
+ .dropdown-menu {
+ display: block;
+ }
+ }
+
+ &.is-right {
+ .dropdown-menu {
+ left: auto;
+ right: 0;
+ }
+ }
+
+ &.is-up {
+ .dropdown-menu {
+ bottom: 100%;
+ padding-bottom: $dropdown-content-offset;
+ padding-top: initial;
+ top: auto;
+ }
+ }
+}
+
+.dropdown-menu {
+ display: none;
+
+ @include ltr-position(0, false);
+
+ min-width: $dropdown-menu-min-width;
+ padding-top: $dropdown-content-offset;
+ position: absolute;
+ top: 100%;
+ z-index: $dropdown-content-z;
+}
+
+.dropdown-content {
+ background-color: $dropdown-content-background-color;
+ border-radius: $dropdown-content-radius;
+ box-shadow: $dropdown-content-shadow;
+ padding-bottom: $dropdown-content-padding-bottom;
+ padding-top: $dropdown-content-padding-top;
+}
+
+.dropdown-item {
+ color: $dropdown-item-color;
+ display: block;
+ font-size: 0.875rem;
+ line-height: 1.5;
+ padding: 0.375rem 1rem;
+ position: relative;
+}
+
+a.dropdown-item,
+button.dropdown-item {
+ @include ltr-property("padding", 3rem);
+
+ text-align: inherit;
+ white-space: nowrap;
+ width: 100%;
+
+ &:hover {
+ background-color: $dropdown-item-hover-background-color;
+ color: $dropdown-item-hover-color;
+ }
+
+ &.is-active {
+ background-color: $dropdown-item-active-background-color;
+ color: $dropdown-item-active-color;
+ }
+}
+
+.dropdown-divider {
+ background-color: $dropdown-divider-background-color;
+ border: none;
+ display: block;
+ height: 1px;
+ margin: 0.5rem 0;
+}
+++ /dev/null
-@import "../utilities/mixins"
-
-$level-item-spacing: ($block-spacing * 0.5) !default
-
-.level
- @extend %block
- align-items: center
- justify-content: space-between
- code
- border-radius: $radius
- img
- display: inline-block
- vertical-align: top
- // Modifiers
- &.is-mobile
- display: flex
- .level-left,
- .level-right
- display: flex
- .level-left + .level-right
- margin-top: 0
- .level-item
- &:not(:last-child)
- margin-bottom: 0
- +ltr-property("margin", $level-item-spacing)
- &:not(.is-narrow)
- flex-grow: 1
- // Responsiveness
- +tablet
- display: flex
- & > .level-item
- &:not(.is-narrow)
- flex-grow: 1
-
-.level-item
- align-items: center
- display: flex
- flex-basis: auto
- flex-grow: 0
- flex-shrink: 0
- justify-content: center
- .title,
- .subtitle
- margin-bottom: 0
- // Responsiveness
- +mobile
- &:not(:last-child)
- margin-bottom: $level-item-spacing
-
-.level-left,
-.level-right
- flex-basis: auto
- flex-grow: 0
- flex-shrink: 0
- .level-item
- // Modifiers
- &.is-flexible
- flex-grow: 1
- // Responsiveness
- +tablet
- &:not(:last-child)
- +ltr-property("margin", $level-item-spacing)
-
-.level-left
- align-items: center
- justify-content: flex-start
- // Responsiveness
- +mobile
- & + .level-right
- margin-top: 1.5rem
- +tablet
- display: flex
-
-.level-right
- align-items: center
- justify-content: flex-end
- // Responsiveness
- +tablet
- display: flex
--- /dev/null
+@import "../utilities/mixins";
+
+$level-item-spacing: $block-spacing * 0.5 !default;
+
+.level {
+ @extend %block;
+
+ align-items: center;
+ justify-content: space-between;
+
+ code {
+ border-radius: $radius;
+ }
+
+ img {
+ display: inline-block;
+ vertical-align: top;
+ }
+
+ // Modifiers
+ &.is-mobile {
+ display: flex;
+
+ .level-left,
+ .level-right {
+ display: flex;
+ }
+
+ .level-left + .level-right {
+ margin-top: 0;
+ }
+
+ .level-item {
+ &:not(:last-child) {
+ margin-bottom: 0;
+
+ @include ltr-property("margin", $level-item-spacing);
+ }
+
+ &:not(.is-narrow) {
+ flex-grow: 1;
+ }
+ }
+ }
+
+ // Responsiveness
+ @include tablet {
+ display: flex;
+
+ & > .level-item {
+ &:not(.is-narrow) {
+ flex-grow: 1;
+ }
+ }
+ }
+}
+
+.level-item {
+ align-items: center;
+ display: flex;
+ flex-basis: auto;
+ flex-grow: 0;
+ flex-shrink: 0;
+ justify-content: center;
+
+ .title,
+ .subtitle {
+ margin-bottom: 0;
+ }
+
+ // Responsiveness
+ @include mobile {
+ &:not(:last-child) {
+ margin-bottom: $level-item-spacing;
+ }
+ }
+}
+
+.level-left,
+.level-right {
+ flex-basis: auto;
+ flex-grow: 0;
+ flex-shrink: 0;
+
+ .level-item {
+ // Modifiers
+ &.is-flexible {
+ flex-grow: 1;
+ }
+
+ // Responsiveness
+ @include tablet {
+ &:not(:last-child) {
+ @include ltr-property("margin", $level-item-spacing);
+ }
+ }
+ }
+}
+
+.level-left {
+ align-items: center;
+ justify-content: flex-start;
+
+ // Responsiveness
+ @include mobile {
+ & + .level-right {
+ margin-top: 1.5rem;
+ }
+ }
+
+
+ @include tablet {
+ display: flex;
+ }
+}
+
+.level-right {
+ align-items: center;
+ justify-content: flex-end;
+
+ // Responsiveness
+ @include tablet {
+ display: flex;
+ }
+}
+++ /dev/null
-@import "../utilities/mixins"
-
-$media-border-color: bulmaRgba($border, 0.5) !default
-$media-border-size: 1px !default
-$media-spacing: 1rem !default
-$media-spacing-large: 1.5rem !default
-$media-content-spacing: 0.75rem !default
-$media-level-1-spacing: 0.75rem !default
-$media-level-1-content-spacing: 0.5rem !default
-$media-level-2-spacing: 0.5rem !default
-
-.media
- align-items: flex-start
- display: flex
- text-align: inherit
- .content:not(:last-child)
- margin-bottom: $media-content-spacing
- .media
- border-top: $media-border-size solid $media-border-color
- display: flex
- padding-top: $media-level-1-spacing
- .content:not(:last-child),
- .control:not(:last-child)
- margin-bottom: $media-level-1-content-spacing
- .media
- padding-top: $media-level-2-spacing
- & + .media
- margin-top: $media-level-2-spacing
- & + .media
- border-top: $media-border-size solid $media-border-color
- margin-top: $media-spacing
- padding-top: $media-spacing
- // Sizes
- &.is-large
- & + .media
- margin-top: $media-spacing-large
- padding-top: $media-spacing-large
-
-.media-left,
-.media-right
- flex-basis: auto
- flex-grow: 0
- flex-shrink: 0
-
-.media-left
- +ltr-property("margin", $media-spacing)
-
-.media-right
- +ltr-property("margin", $media-spacing, false)
-
-.media-content
- flex-basis: auto
- flex-grow: 1
- flex-shrink: 1
- text-align: inherit
-
-+mobile
- .media-content
- overflow-x: auto
--- /dev/null
+@import "../utilities/mixins";
+
+$media-border-color: bulmaRgba($border, 0.5) !default;
+$media-border-size: 1px !default;
+$media-spacing: 1rem !default;
+$media-spacing-large: 1.5rem !default;
+$media-content-spacing: 0.75rem !default;
+$media-level-1-spacing: 0.75rem !default;
+$media-level-1-content-spacing: 0.5rem !default;
+$media-level-2-spacing: 0.5rem !default;
+
+.media {
+ align-items: flex-start;
+ display: flex;
+ text-align: inherit;
+
+ .content:not(:last-child) {
+ margin-bottom: $media-content-spacing;
+ }
+
+ .media {
+ border-top: $media-border-size solid $media-border-color;
+ display: flex;
+ padding-top: $media-level-1-spacing;
+
+ .content:not(:last-child),
+ .control:not(:last-child) {
+ margin-bottom: $media-level-1-content-spacing;
+ }
+
+ .media {
+ padding-top: $media-level-2-spacing;
+
+ & + .media {
+ margin-top: $media-level-2-spacing;
+ }
+ }
+ }
+
+ & + .media {
+ border-top: $media-border-size solid $media-border-color;
+ margin-top: $media-spacing;
+ padding-top: $media-spacing;
+ }
+
+ // Sizes
+ &.is-large {
+ & + .media {
+ margin-top: $media-spacing-large;
+ padding-top: $media-spacing-large;
+ }
+ }
+}
+
+.media-left,
+.media-right {
+ flex-basis: auto;
+ flex-grow: 0;
+ flex-shrink: 0;
+}
+
+.media-left {
+ @include ltr-property("margin", $media-spacing);
+}
+
+.media-right {
+ @include ltr-property("margin", $media-spacing, false);
+}
+
+.media-content {
+ flex-basis: auto;
+ flex-grow: 1;
+ flex-shrink: 1;
+ text-align: inherit;
+}
+
+@include mobile {
+ .media-content {
+ overflow-x: auto;
+ }
+}
+++ /dev/null
-@import "../utilities/mixins"
-
-$menu-item-color: $text !default
-$menu-item-radius: $radius-small !default
-$menu-item-hover-color: $text-strong !default
-$menu-item-hover-background-color: $background !default
-$menu-item-active-color: $link-invert !default
-$menu-item-active-background-color: $link !default
-
-$menu-list-border-left: 1px solid $border !default
-$menu-list-line-height: 1.25 !default
-$menu-list-link-padding: 0.5em 0.75em !default
-$menu-nested-list-margin: 0.75em !default
-$menu-nested-list-padding-left: 0.75em !default
-
-$menu-label-color: $text-light !default
-$menu-label-font-size: 0.75em !default
-$menu-label-letter-spacing: 0.1em !default
-$menu-label-spacing: 1em !default
-
-.menu
- font-size: $size-normal
- // Sizes
- &.is-small
- font-size: $size-small
- &.is-medium
- font-size: $size-medium
- &.is-large
- font-size: $size-large
-
-.menu-list
- line-height: $menu-list-line-height
- a
- border-radius: $menu-item-radius
- color: $menu-item-color
- display: block
- padding: $menu-list-link-padding
- &:hover
- background-color: $menu-item-hover-background-color
- color: $menu-item-hover-color
- // Modifiers
- &.is-active
- background-color: $menu-item-active-background-color
- color: $menu-item-active-color
- li
- ul
- +ltr-property("border", $menu-list-border-left, false)
- margin: $menu-nested-list-margin
- +ltr-property("padding", $menu-nested-list-padding-left, false)
-
-.menu-label
- color: $menu-label-color
- font-size: $menu-label-font-size
- letter-spacing: $menu-label-letter-spacing
- text-transform: uppercase
- &:not(:first-child)
- margin-top: $menu-label-spacing
- &:not(:last-child)
- margin-bottom: $menu-label-spacing
--- /dev/null
+@import "../utilities/mixins";
+
+$menu-item-color: $text !default;
+$menu-item-radius: $radius-small !default;
+$menu-item-hover-color: $text-strong !default;
+$menu-item-hover-background-color: $background !default;
+$menu-item-active-color: $link-invert !default;
+$menu-item-active-background-color: $link !default;
+
+$menu-list-border-left: 1px solid $border !default;
+$menu-list-line-height: 1.25 !default;
+$menu-list-link-padding: 0.5em 0.75em !default;
+$menu-nested-list-margin: 0.75em !default;
+$menu-nested-list-padding-left: 0.75em !default;
+
+$menu-label-color: $text-light !default;
+$menu-label-font-size: 0.75em !default;
+$menu-label-letter-spacing: 0.1em !default;
+$menu-label-spacing: 1em !default;
+
+.menu {
+ font-size: $size-normal;
+
+ // Sizes
+ &.is-small {
+ font-size: $size-small;
+ }
+
+ &.is-medium {
+ font-size: $size-medium;
+ }
+
+ &.is-large {
+ font-size: $size-large;
+ }
+}
+
+.menu-list {
+ line-height: $menu-list-line-height;
+
+ a {
+ border-radius: $menu-item-radius;
+ color: $menu-item-color;
+ display: block;
+ padding: $menu-list-link-padding;
+
+ &:hover {
+ background-color: $menu-item-hover-background-color;
+ color: $menu-item-hover-color;
+ }
+
+ // Modifiers
+ &.is-active {
+ background-color: $menu-item-active-background-color;
+ color: $menu-item-active-color;
+ }
+ }
+
+ li {
+ ul {
+ @include ltr-property("border", $menu-list-border-left, false);
+
+ margin: $menu-nested-list-margin;
+
+ @include ltr-property("padding", $menu-nested-list-padding-left, false);
+ }
+ }
+}
+
+.menu-label {
+ color: $menu-label-color;
+ font-size: $menu-label-font-size;
+ letter-spacing: $menu-label-letter-spacing;
+ text-transform: uppercase;
+
+ &:not(:first-child) {
+ margin-top: $menu-label-spacing;
+ }
+
+ &:not(:last-child) {
+ margin-bottom: $menu-label-spacing;
+ }
+}
+++ /dev/null
-@import "../utilities/mixins"
-
-$message-background-color: $background !default
-$message-radius: $radius !default
-
-$message-header-background-color: $text !default
-$message-header-color: $text-invert !default
-$message-header-weight: $weight-bold !default
-$message-header-padding: 0.75em 1em !default
-$message-header-radius: $radius !default
-
-$message-body-border-color: $border !default
-$message-body-border-width: 0 0 0 4px !default
-$message-body-color: $text !default
-$message-body-padding: 1.25em 1.5em !default
-$message-body-radius: $radius !default
-
-$message-body-pre-background-color: $scheme-main !default
-$message-body-pre-code-background-color: transparent !default
-
-$message-header-body-border-width: 0 !default
-$message-colors: $colors !default
-
-.message
- @extend %block
- background-color: $message-background-color
- border-radius: $message-radius
- font-size: $size-normal
- strong
- color: currentColor
- a:not(.button):not(.tag):not(.dropdown-item)
- color: currentColor
- text-decoration: underline
- // Sizes
- &.is-small
- font-size: $size-small
- &.is-medium
- font-size: $size-medium
- &.is-large
- font-size: $size-large
- // Colors
- @each $name, $components in $message-colors
- $color: nth($components, 1)
- $color-invert: nth($components, 2)
- $color-light: null
- $color-dark: null
-
- @if length($components) >= 3
- $color-light: nth($components, 3)
- @if length($components) >= 4
- $color-dark: nth($components, 4)
- @else
- $color-luminance: colorLuminance($color)
- $darken-percentage: $color-luminance * 70%
- $desaturate-percentage: $color-luminance * 30%
- $color-dark: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
- @else
- $color-lightning: max((100% - lightness($color)) - 2%, 0%)
- $color-light: lighten($color, $color-lightning)
-
- &.is-#{$name}
- background-color: $color-light
- .message-header
- background-color: $color
- color: $color-invert
- .message-body
- border-color: $color
- color: $color-dark
-
-.message-header
- align-items: center
- background-color: $message-header-background-color
- border-radius: $message-header-radius $message-header-radius 0 0
- color: $message-header-color
- display: flex
- font-weight: $message-header-weight
- justify-content: space-between
- line-height: 1.25
- padding: $message-header-padding
- position: relative
- .delete
- flex-grow: 0
- flex-shrink: 0
- +ltr-property("margin", 0.75em, false)
- & + .message-body
- border-width: $message-header-body-border-width
- border-top-left-radius: 0
- border-top-right-radius: 0
-
-.message-body
- border-color: $message-body-border-color
- border-radius: $message-body-radius
- border-style: solid
- border-width: $message-body-border-width
- color: $message-body-color
- padding: $message-body-padding
- code,
- pre
- background-color: $message-body-pre-background-color
- pre code
- background-color: $message-body-pre-code-background-color
--- /dev/null
+@import "../utilities/mixins";
+
+$message-background-color: $background !default;
+$message-radius: $radius !default;
+
+$message-header-background-color: $text !default;
+$message-header-color: $text-invert !default;
+$message-header-weight: $weight-bold !default;
+$message-header-padding: 0.75em 1em !default;
+$message-header-radius: $radius !default;
+
+$message-body-border-color: $border !default;
+$message-body-border-width: 0 0 0 4px !default;
+$message-body-color: $text !default;
+$message-body-padding: 1.25em 1.5em !default;
+$message-body-radius: $radius !default;
+
+$message-body-pre-background-color: $scheme-main !default;
+$message-body-pre-code-background-color: transparent !default;
+
+$message-header-body-border-width: 0 !default;
+$message-colors: $colors !default;
+
+.message {
+ @extend %block;
+
+ background-color: $message-background-color;
+ border-radius: $message-radius;
+ font-size: $size-normal;
+
+ strong {
+ color: currentColor;
+ }
+
+ a:not(.button):not(.tag):not(.dropdown-item) {
+ color: currentColor;
+ text-decoration: underline;
+ }
+
+ // Sizes
+ &.is-small {
+ font-size: $size-small;
+ }
+
+ &.is-medium {
+ font-size: $size-medium;
+ }
+
+ &.is-large {
+ font-size: $size-large;
+ }
+
+ // Colors
+ @each $name, $components in $message-colors {
+ $color: nth($components, 1);
+ $color-invert: nth($components, 2);
+ $color-light: null;
+ $color-dark: null;
+
+ @if length($components) >= 3 {
+ $color-light: nth($components, 3);
+
+ @if length($components) >= 4 {
+ $color-dark: nth($components, 4);
+ }
+ @else {
+ $color-luminance: colorLuminance($color);
+ $darken-percentage: $color-luminance * 70%;
+ $desaturate-percentage: $color-luminance * 30%;
+ $color-dark: desaturate(darken($color, $darken-percentage), $desaturate-percentage);
+ }
+ }
+ @else {
+ $color-lightning: max(100% - lightness($color) - 2%, 0%);
+ $color-light: lighten($color, $color-lightning);
+ }
+
+ &.is-#{$name} {
+ background-color: $color-light;
+
+ .message-header {
+ background-color: $color;
+ color: $color-invert;
+ }
+
+ .message-body {
+ border-color: $color;
+ color: $color-dark;
+ }
+ }
+ }
+}
+
+.message-header {
+ align-items: center;
+ background-color: $message-header-background-color;
+ border-radius: $message-header-radius $message-header-radius 0 0;
+ color: $message-header-color;
+ display: flex;
+ font-weight: $message-header-weight;
+ justify-content: space-between;
+ line-height: 1.25;
+ padding: $message-header-padding;
+ position: relative;
+
+ .delete {
+ flex-grow: 0;
+ flex-shrink: 0;
+
+ @include ltr-property("margin", 0.75em, false);
+ }
+
+ & + .message-body {
+ border-width: $message-header-body-border-width;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ }
+}
+
+.message-body {
+ border-color: $message-body-border-color;
+ border-radius: $message-body-radius;
+ border-style: solid;
+ border-width: $message-body-border-width;
+ color: $message-body-color;
+ padding: $message-body-padding;
+
+ code,
+ pre {
+ background-color: $message-body-pre-background-color;
+ }
+
+ pre code {
+ background-color: $message-body-pre-code-background-color;
+ }
+}
+++ /dev/null
-@import "../utilities/mixins"
-
-$modal-z: 40 !default
-
-$modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default
-
-$modal-content-width: 640px !default
-$modal-content-margin-mobile: 20px !default
-$modal-content-spacing-mobile: 160px !default
-$modal-content-spacing-tablet: 40px !default
-
-$modal-close-dimensions: 40px !default
-$modal-close-right: 20px !default
-$modal-close-top: 20px !default
-
-$modal-card-spacing: 40px !default
-
-$modal-card-head-background-color: $background !default
-$modal-card-head-border-bottom: 1px solid $border !default
-$modal-card-head-padding: 20px !default
-$modal-card-head-radius: $radius-large !default
-
-$modal-card-title-color: $text-strong !default
-$modal-card-title-line-height: 1 !default
-$modal-card-title-size: $size-4 !default
-
-$modal-card-foot-radius: $radius-large !default
-$modal-card-foot-border-top: 1px solid $border !default
-
-$modal-card-body-background-color: $scheme-main !default
-$modal-card-body-padding: 20px !default
-
-$modal-breakpoint: $tablet !default
-
-.modal
- @extend %overlay
- align-items: center
- display: none
- flex-direction: column
- justify-content: center
- overflow: hidden
- position: fixed
- z-index: $modal-z
- // Modifiers
- &.is-active
- display: flex
-
-.modal-background
- @extend %overlay
- background-color: $modal-background-background-color
-
-.modal-content,
-.modal-card
- margin: 0 $modal-content-margin-mobile
- max-height: calc(100vh - #{$modal-content-spacing-mobile})
- overflow: auto
- position: relative
- width: 100%
- // Responsiveness
- +from($modal-breakpoint)
- margin: 0 auto
- max-height: calc(100vh - #{$modal-content-spacing-tablet})
- width: $modal-content-width
-
-.modal-close
- @extend %delete
- background: none
- height: $modal-close-dimensions
- position: fixed
- +ltr-position($modal-close-right)
- top: $modal-close-top
- width: $modal-close-dimensions
-
-.modal-card
- display: flex
- flex-direction: column
- max-height: calc(100vh - #{$modal-card-spacing})
- overflow: hidden
- -ms-overflow-y: visible
-
-.modal-card-head,
-.modal-card-foot
- align-items: center
- background-color: $modal-card-head-background-color
- display: flex
- flex-shrink: 0
- justify-content: flex-start
- padding: $modal-card-head-padding
- position: relative
-
-.modal-card-head
- border-bottom: $modal-card-head-border-bottom
- border-top-left-radius: $modal-card-head-radius
- border-top-right-radius: $modal-card-head-radius
-
-.modal-card-title
- color: $modal-card-title-color
- flex-grow: 1
- flex-shrink: 0
- font-size: $modal-card-title-size
- line-height: $modal-card-title-line-height
-
-.modal-card-foot
- border-bottom-left-radius: $modal-card-foot-radius
- border-bottom-right-radius: $modal-card-foot-radius
- border-top: $modal-card-foot-border-top
- .button
- &:not(:last-child)
- +ltr-property("margin", 0.5em)
-
-.modal-card-body
- +overflow-touch
- background-color: $modal-card-body-background-color
- flex-grow: 1
- flex-shrink: 1
- overflow: auto
- padding: $modal-card-body-padding
--- /dev/null
+@import "../utilities/mixins";
+
+$modal-z: 40 !default;
+
+$modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default;
+
+$modal-content-width: 640px !default;
+$modal-content-margin-mobile: 20px !default;
+$modal-content-spacing-mobile: 160px !default;
+$modal-content-spacing-tablet: 40px !default;
+
+$modal-close-dimensions: 40px !default;
+$modal-close-right: 20px !default;
+$modal-close-top: 20px !default;
+
+$modal-card-spacing: 40px !default;
+
+$modal-card-head-background-color: $background !default;
+$modal-card-head-border-bottom: 1px solid $border !default;
+$modal-card-head-padding: 20px !default;
+$modal-card-head-radius: $radius-large !default;
+
+$modal-card-title-color: $text-strong !default;
+$modal-card-title-line-height: 1 !default;
+$modal-card-title-size: $size-4 !default;
+
+$modal-card-foot-radius: $radius-large !default;
+$modal-card-foot-border-top: 1px solid $border !default;
+
+$modal-card-body-background-color: $scheme-main !default;
+$modal-card-body-padding: 20px !default;
+
+$modal-breakpoint: $tablet !default;
+
+.modal {
+ @extend %overlay;
+
+ align-items: center;
+ display: none;
+ flex-direction: column;
+ justify-content: center;
+ overflow: hidden;
+ position: fixed;
+ z-index: $modal-z;
+
+ // Modifiers
+ &.is-active {
+ display: flex;
+ }
+}
+
+.modal-background {
+ @extend %overlay;
+
+ background-color: $modal-background-background-color;
+}
+
+.modal-content,
+.modal-card {
+ margin: 0 $modal-content-margin-mobile;
+ max-height: calc(100vh - #{$modal-content-spacing-mobile});
+ overflow: auto;
+ position: relative;
+ width: 100%;
+
+ // Responsiveness
+ @include from($modal-breakpoint) {
+ margin: 0 auto;
+ max-height: calc(100vh - #{$modal-content-spacing-tablet});
+ width: $modal-content-width;
+ }
+}
+
+.modal-close {
+ @extend %delete;
+
+ background: none;
+ height: $modal-close-dimensions;
+ position: fixed;
+
+ @include ltr-position($modal-close-right);
+
+ top: $modal-close-top;
+ width: $modal-close-dimensions;
+}
+
+.modal-card {
+ display: flex;
+ flex-direction: column;
+ max-height: calc(100vh - #{$modal-card-spacing});
+ overflow: hidden;
+ -ms-overflow-y: visible;
+}
+
+.modal-card-head,
+.modal-card-foot {
+ align-items: center;
+ background-color: $modal-card-head-background-color;
+ display: flex;
+ flex-shrink: 0;
+ justify-content: flex-start;
+ padding: $modal-card-head-padding;
+ position: relative;
+}
+
+.modal-card-head {
+ border-bottom: $modal-card-head-border-bottom;
+ border-top-left-radius: $modal-card-head-radius;
+ border-top-right-radius: $modal-card-head-radius;
+}
+
+.modal-card-title {
+ color: $modal-card-title-color;
+ flex-grow: 1;
+ flex-shrink: 0;
+ font-size: $modal-card-title-size;
+ line-height: $modal-card-title-line-height;
+}
+
+.modal-card-foot {
+ border-bottom-left-radius: $modal-card-foot-radius;
+ border-bottom-right-radius: $modal-card-foot-radius;
+ border-top: $modal-card-foot-border-top;
+
+ .button {
+ &:not(:last-child) {
+ @include ltr-property("margin", 0.5em);
+ }
+ }
+}
+
+.modal-card-body {
+ @include overflow-touch;
+
+ background-color: $modal-card-body-background-color;
+ flex-grow: 1;
+ flex-shrink: 1;
+ overflow: auto;
+ padding: $modal-card-body-padding;
+}
+++ /dev/null
-@import "../utilities/mixins"
-
-$navbar-background-color: $scheme-main !default
-$navbar-box-shadow-size: 0 2px 0 0 !default
-$navbar-box-shadow-color: $background !default
-$navbar-height: 3.25rem !default
-$navbar-padding-vertical: 1rem !default
-$navbar-padding-horizontal: 2rem !default
-$navbar-z: 30 !default
-$navbar-fixed-z: 30 !default
-
-$navbar-item-color: $text !default
-$navbar-item-hover-color: $link !default
-$navbar-item-hover-background-color: $scheme-main-bis !default
-$navbar-item-active-color: $scheme-invert !default
-$navbar-item-active-background-color: transparent !default
-$navbar-item-img-max-height: 1.75rem !default
-
-$navbar-burger-color: $navbar-item-color !default
-
-$navbar-tab-hover-background-color: transparent !default
-$navbar-tab-hover-border-bottom-color: $link !default
-$navbar-tab-active-color: $link !default
-$navbar-tab-active-background-color: transparent !default
-$navbar-tab-active-border-bottom-color: $link !default
-$navbar-tab-active-border-bottom-style: solid !default
-$navbar-tab-active-border-bottom-width: 3px !default
-
-$navbar-dropdown-background-color: $scheme-main !default
-$navbar-dropdown-border-top: 2px solid $border !default
-$navbar-dropdown-offset: -4px !default
-$navbar-dropdown-arrow: $link !default
-$navbar-dropdown-radius: $radius-large !default
-$navbar-dropdown-z: 20 !default
-
-$navbar-dropdown-boxed-radius: $radius-large !default
-$navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default
-
-$navbar-dropdown-item-hover-color: $scheme-invert !default
-$navbar-dropdown-item-hover-background-color: $background !default
-$navbar-dropdown-item-active-color: $link !default
-$navbar-dropdown-item-active-background-color: $background !default
-
-$navbar-divider-background-color: $background !default
-$navbar-divider-height: 2px !default
-
-$navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
-
-$navbar-breakpoint: $desktop !default
-
-$navbar-colors: $colors !default
-
-=navbar-fixed
- left: 0
- position: fixed
- right: 0
- z-index: $navbar-fixed-z
-
-.navbar
- background-color: $navbar-background-color
- min-height: $navbar-height
- position: relative
- z-index: $navbar-z
- @each $name, $pair in $navbar-colors
- $color: nth($pair, 1)
- $color-invert: nth($pair, 2)
- &.is-#{$name}
- background-color: $color
- color: $color-invert
- .navbar-brand
- & > .navbar-item,
- .navbar-link
- color: $color-invert
- & > a.navbar-item,
- .navbar-link
- &:focus,
- &:hover,
- &.is-active
- background-color: bulmaDarken($color, 5%)
- color: $color-invert
- .navbar-link
- &::after
- border-color: $color-invert
- .navbar-burger
- color: $color-invert
- +from($navbar-breakpoint)
- .navbar-start,
- .navbar-end
- & > .navbar-item,
- .navbar-link
- color: $color-invert
- & > a.navbar-item,
- .navbar-link
- &:focus,
- &:hover,
- &.is-active
- background-color: bulmaDarken($color, 5%)
- color: $color-invert
- .navbar-link
- &::after
- border-color: $color-invert
- .navbar-item.has-dropdown:focus .navbar-link,
- .navbar-item.has-dropdown:hover .navbar-link,
- .navbar-item.has-dropdown.is-active .navbar-link
- background-color: bulmaDarken($color, 5%)
- color: $color-invert
- .navbar-dropdown
- a.navbar-item
- &.is-active
- background-color: $color
- color: $color-invert
- & > .container
- align-items: stretch
- display: flex
- min-height: $navbar-height
- width: 100%
- &.has-shadow
- box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color
- &.is-fixed-bottom,
- &.is-fixed-top
- +navbar-fixed
- &.is-fixed-bottom
- bottom: 0
- &.has-shadow
- box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color
- &.is-fixed-top
- top: 0
-
-html,
-body
- &.has-navbar-fixed-top
- padding-top: $navbar-height
- &.has-navbar-fixed-bottom
- padding-bottom: $navbar-height
-
-.navbar-brand,
-.navbar-tabs
- align-items: stretch
- display: flex
- flex-shrink: 0
- min-height: $navbar-height
-
-.navbar-brand
- a.navbar-item
- &:focus,
- &:hover
- background-color: transparent
-
-.navbar-tabs
- +overflow-touch
- max-width: 100vw
- overflow-x: auto
- overflow-y: hidden
-
-.navbar-burger
- @extend %reset
- color: $navbar-burger-color
- +hamburger($navbar-height)
- +ltr-property("margin", auto, false)
-
-.navbar-menu
- display: none
-
-.navbar-item,
-.navbar-link
- color: $navbar-item-color
- display: block
- line-height: 1.5
- padding: 0.5rem 0.75rem
- position: relative
- .icon
- &:only-child
- margin-left: -0.25rem
- margin-right: -0.25rem
-
-a.navbar-item,
-.navbar-link
- cursor: pointer
- &:focus,
- &:focus-within,
- &:hover,
- &.is-active
- background-color: $navbar-item-hover-background-color
- color: $navbar-item-hover-color
-
-.navbar-item
- flex-grow: 0
- flex-shrink: 0
- img
- max-height: $navbar-item-img-max-height
- &.has-dropdown
- padding: 0
- &.is-expanded
- flex-grow: 1
- flex-shrink: 1
- &.is-tab
- border-bottom: 1px solid transparent
- min-height: $navbar-height
- padding-bottom: calc(0.5rem - 1px)
- &:focus,
- &:hover
- background-color: $navbar-tab-hover-background-color
- border-bottom-color: $navbar-tab-hover-border-bottom-color
- &.is-active
- background-color: $navbar-tab-active-background-color
- border-bottom-color: $navbar-tab-active-border-bottom-color
- border-bottom-style: $navbar-tab-active-border-bottom-style
- border-bottom-width: $navbar-tab-active-border-bottom-width
- color: $navbar-tab-active-color
- padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width})
-
-.navbar-content
- flex-grow: 1
- flex-shrink: 1
-
-.navbar-link:not(.is-arrowless)
- +ltr-property("padding", 2.5em)
- &::after
- @extend %arrow
- border-color: $navbar-dropdown-arrow
- margin-top: -0.375em
- +ltr-position(1.125em)
-
-.navbar-dropdown
- font-size: 0.875rem
- padding-bottom: 0.5rem
- padding-top: 0.5rem
- .navbar-item
- padding-left: 1.5rem
- padding-right: 1.5rem
-
-.navbar-divider
- background-color: $navbar-divider-background-color
- border: none
- display: none
- height: $navbar-divider-height
- margin: 0.5rem 0
-
-+until($navbar-breakpoint)
- .navbar > .container
- display: block
- .navbar-brand,
- .navbar-tabs
- .navbar-item
- align-items: center
- display: flex
- .navbar-link
- &::after
- display: none
- .navbar-menu
- background-color: $navbar-background-color
- box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1)
- padding: 0.5rem 0
- &.is-active
- display: block
- // Fixed navbar
- .navbar
- &.is-fixed-bottom-touch,
- &.is-fixed-top-touch
- +navbar-fixed
- &.is-fixed-bottom-touch
- bottom: 0
- &.has-shadow
- box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
- &.is-fixed-top-touch
- top: 0
- &.is-fixed-top,
- &.is-fixed-top-touch
- .navbar-menu
- +overflow-touch
- max-height: calc(100vh - #{$navbar-height})
- overflow: auto
- html,
- body
- &.has-navbar-fixed-top-touch
- padding-top: $navbar-height
- &.has-navbar-fixed-bottom-touch
- padding-bottom: $navbar-height
-
-+from($navbar-breakpoint)
- .navbar,
- .navbar-menu,
- .navbar-start,
- .navbar-end
- align-items: stretch
- display: flex
- .navbar
- min-height: $navbar-height
- &.is-spaced
- padding: $navbar-padding-vertical $navbar-padding-horizontal
- .navbar-start,
- .navbar-end
- align-items: center
- a.navbar-item,
- .navbar-link
- border-radius: $radius
- &.is-transparent
- a.navbar-item,
- .navbar-link
- &:focus,
- &:hover,
- &.is-active
- background-color: transparent !important
- .navbar-item.has-dropdown
- &.is-active,
- &.is-hoverable:focus,
- &.is-hoverable:focus-within,
- &.is-hoverable:hover
- .navbar-link
- background-color: transparent !important
- .navbar-dropdown
- a.navbar-item
- &:focus,
- &:hover
- background-color: $navbar-dropdown-item-hover-background-color
- color: $navbar-dropdown-item-hover-color
- &.is-active
- background-color: $navbar-dropdown-item-active-background-color
- color: $navbar-dropdown-item-active-color
- .navbar-burger
- display: none
- .navbar-item,
- .navbar-link
- align-items: center
- display: flex
- .navbar-item
- &.has-dropdown
- align-items: stretch
- &.has-dropdown-up
- .navbar-link::after
- transform: rotate(135deg) translate(0.25em, -0.25em)
- .navbar-dropdown
- border-bottom: $navbar-dropdown-border-top
- border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
- border-top: none
- bottom: 100%
- box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1)
- top: auto
- &.is-active,
- &.is-hoverable:focus,
- &.is-hoverable:focus-within,
- &.is-hoverable:hover
- .navbar-dropdown
- display: block
- .navbar.is-spaced &,
- &.is-boxed
- opacity: 1
- pointer-events: auto
- transform: translateY(0)
- .navbar-menu
- flex-grow: 1
- flex-shrink: 0
- .navbar-start
- justify-content: flex-start
- +ltr-property("margin", auto)
- .navbar-end
- justify-content: flex-end
- +ltr-property("margin", auto, false)
- .navbar-dropdown
- background-color: $navbar-dropdown-background-color
- border-bottom-left-radius: $navbar-dropdown-radius
- border-bottom-right-radius: $navbar-dropdown-radius
- border-top: $navbar-dropdown-border-top
- box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1)
- display: none
- font-size: 0.875rem
- +ltr-position(0, false)
- min-width: 100%
- position: absolute
- top: 100%
- z-index: $navbar-dropdown-z
- .navbar-item
- padding: 0.375rem 1rem
- white-space: nowrap
- a.navbar-item
- +ltr-property("padding", 3rem)
- &:focus,
- &:hover
- background-color: $navbar-dropdown-item-hover-background-color
- color: $navbar-dropdown-item-hover-color
- &.is-active
- background-color: $navbar-dropdown-item-active-background-color
- color: $navbar-dropdown-item-active-color
- .navbar.is-spaced &,
- &.is-boxed
- border-radius: $navbar-dropdown-boxed-radius
- border-top: none
- box-shadow: $navbar-dropdown-boxed-shadow
- display: block
- opacity: 0
- pointer-events: none
- top: calc(100% + (#{$navbar-dropdown-offset}))
- transform: translateY(-5px)
- transition-duration: $speed
- transition-property: opacity, transform
- &.is-right
- left: auto
- right: 0
- .navbar-divider
- display: block
- .navbar > .container,
- .container > .navbar
- .navbar-brand
- +ltr-property("margin", -.75rem, false)
- .navbar-menu
- +ltr-property("margin", -.75rem)
- // Fixed navbar
- .navbar
- &.is-fixed-bottom-desktop,
- &.is-fixed-top-desktop
- +navbar-fixed
- &.is-fixed-bottom-desktop
- bottom: 0
- &.has-shadow
- box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
- &.is-fixed-top-desktop
- top: 0
- html,
- body
- &.has-navbar-fixed-top-desktop
- padding-top: $navbar-height
- &.has-navbar-fixed-bottom-desktop
- padding-bottom: $navbar-height
- &.has-spaced-navbar-fixed-top
- padding-top: $navbar-height + ($navbar-padding-vertical * 2)
- &.has-spaced-navbar-fixed-bottom
- padding-bottom: $navbar-height + ($navbar-padding-vertical * 2)
- // Hover/Active states
- a.navbar-item,
- .navbar-link
- &.is-active
- color: $navbar-item-active-color
- &.is-active:not(:focus):not(:hover)
- background-color: $navbar-item-active-background-color
- .navbar-item.has-dropdown
- &:focus,
- &:hover,
- &.is-active
- .navbar-link
- background-color: $navbar-item-hover-background-color
-
-// Combination
-
-.hero
- &.is-fullheight-with-navbar
- min-height: calc(100vh - #{$navbar-height})
--- /dev/null
+@import "../utilities/mixins";
+
+$navbar-background-color: $scheme-main !default;
+$navbar-box-shadow-size: 0 2px 0 0 !default;
+$navbar-box-shadow-color: $background !default;
+$navbar-height: 3.25rem !default;
+$navbar-padding-vertical: 1rem !default;
+$navbar-padding-horizontal: 2rem !default;
+$navbar-z: 30 !default;
+$navbar-fixed-z: 30 !default;
+
+$navbar-item-color: $text !default;
+$navbar-item-hover-color: $link !default;
+$navbar-item-hover-background-color: $scheme-main-bis !default;
+$navbar-item-active-color: $scheme-invert !default;
+$navbar-item-active-background-color: transparent !default;
+$navbar-item-img-max-height: 1.75rem !default;
+
+$navbar-burger-color: $navbar-item-color !default;
+
+$navbar-tab-hover-background-color: transparent !default;
+$navbar-tab-hover-border-bottom-color: $link !default;
+$navbar-tab-active-color: $link !default;
+$navbar-tab-active-background-color: transparent !default;
+$navbar-tab-active-border-bottom-color: $link !default;
+$navbar-tab-active-border-bottom-style: solid !default;
+$navbar-tab-active-border-bottom-width: 3px !default;
+
+$navbar-dropdown-background-color: $scheme-main !default;
+$navbar-dropdown-border-top: 2px solid $border !default;
+$navbar-dropdown-offset: -4px !default;
+$navbar-dropdown-arrow: $link !default;
+$navbar-dropdown-radius: $radius-large !default;
+$navbar-dropdown-z: 20 !default;
+
+$navbar-dropdown-boxed-radius: $radius-large !default;
+$navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default;
+
+$navbar-dropdown-item-hover-color: $scheme-invert !default;
+$navbar-dropdown-item-hover-background-color: $background !default;
+$navbar-dropdown-item-active-color: $link !default;
+$navbar-dropdown-item-active-background-color: $background !default;
+
+$navbar-divider-background-color: $background !default;
+$navbar-divider-height: 2px !default;
+
+$navbar-bottom-box-shadow-size: 0 -2px 0 0 !default;
+
+$navbar-breakpoint: $desktop !default;
+
+$navbar-colors: $colors !default;
+
+@mixin navbar-fixed {
+ left: 0;
+ position: fixed;
+ right: 0;
+ z-index: $navbar-fixed-z;
+}
+
+.navbar {
+ background-color: $navbar-background-color;
+ min-height: $navbar-height;
+ position: relative;
+ z-index: $navbar-z;
+
+ @each $name, $pair in $navbar-colors {
+ $color: nth($pair, 1);
+ $color-invert: nth($pair, 2);
+
+ &.is-#{$name} {
+ background-color: $color;
+ color: $color-invert;
+
+ .navbar-brand {
+ & > .navbar-item,
+ .navbar-link {
+ color: $color-invert;
+ }
+
+ & > a.navbar-item,
+ .navbar-link {
+ &:focus,
+ &:hover,
+ &.is-active {
+ background-color: bulmaDarken($color, 5%);
+ color: $color-invert;
+ }
+ }
+
+ .navbar-link {
+ &::after {
+ border-color: $color-invert;
+ }
+ }
+ }
+
+ .navbar-burger {
+ color: $color-invert;
+ }
+
+ @include from($navbar-breakpoint) {
+ .navbar-start,
+ .navbar-end {
+ & > .navbar-item,
+ .navbar-link {
+ color: $color-invert;
+ }
+
+ & > a.navbar-item,
+ .navbar-link {
+ &:focus,
+ &:hover,
+ &.is-active {
+ background-color: bulmaDarken($color, 5%);
+ color: $color-invert;
+ }
+ }
+
+ .navbar-link {
+ &::after {
+ border-color: $color-invert;
+ }
+ }
+ }
+
+ .navbar-item.has-dropdown:focus .navbar-link,
+ .navbar-item.has-dropdown:hover .navbar-link,
+ .navbar-item.has-dropdown.is-active .navbar-link {
+ background-color: bulmaDarken($color, 5%);
+ color: $color-invert;
+ }
+
+ .navbar-dropdown {
+ a.navbar-item {
+ &.is-active {
+ background-color: $color;
+ color: $color-invert;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ & > .container {
+ align-items: stretch;
+ display: flex;
+ min-height: $navbar-height;
+ width: 100%;
+ }
+
+ &.has-shadow {
+ box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color;
+ }
+
+ &.is-fixed-bottom,
+ &.is-fixed-top {
+ @include navbar-fixed;
+ }
+
+ &.is-fixed-bottom {
+ bottom: 0;
+
+ &.has-shadow {
+ box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color;
+ }
+ }
+
+ &.is-fixed-top {
+ top: 0;
+ }
+}
+
+html,
+body {
+ &.has-navbar-fixed-top {
+ padding-top: $navbar-height;
+ }
+
+ &.has-navbar-fixed-bottom {
+ padding-bottom: $navbar-height;
+ }
+}
+
+.navbar-brand,
+.navbar-tabs {
+ align-items: stretch;
+ display: flex;
+ flex-shrink: 0;
+ min-height: $navbar-height;
+}
+
+.navbar-brand {
+ a.navbar-item {
+ &:focus,
+ &:hover {
+ background-color: transparent;
+ }
+ }
+}
+
+.navbar-tabs {
+ @include overflow-touch;
+
+ max-width: 100vw;
+ overflow-x: auto;
+ overflow-y: hidden;
+}
+
+.navbar-burger {
+ @extend %reset;
+
+ color: $navbar-burger-color;
+
+ @include hamburger($navbar-height);
+ @include ltr-property("margin", auto, false);
+}
+
+.navbar-menu {
+ display: none;
+}
+
+.navbar-item,
+.navbar-link {
+ color: $navbar-item-color;
+ display: block;
+ line-height: 1.5;
+ padding: 0.5rem 0.75rem;
+ position: relative;
+
+ .icon {
+ &:only-child {
+ margin-left: -0.25rem;
+ margin-right: -0.25rem;
+ }
+ }
+}
+
+a.navbar-item,
+.navbar-link {
+ cursor: pointer;
+
+ &:focus,
+ &:focus-within,
+ &:hover,
+ &.is-active {
+ background-color: $navbar-item-hover-background-color;
+ color: $navbar-item-hover-color;
+ }
+}
+
+.navbar-item {
+ flex-grow: 0;
+ flex-shrink: 0;
+
+ img {
+ max-height: $navbar-item-img-max-height;
+ }
+
+ &.has-dropdown {
+ padding: 0;
+ }
+
+ &.is-expanded {
+ flex-grow: 1;
+ flex-shrink: 1;
+ }
+
+ &.is-tab {
+ border-bottom: 1px solid transparent;
+ min-height: $navbar-height;
+ padding-bottom: calc(0.5rem - 1px);
+
+ &:focus,
+ &:hover {
+ background-color: $navbar-tab-hover-background-color;
+ border-bottom-color: $navbar-tab-hover-border-bottom-color;
+ }
+
+ &.is-active {
+ background-color: $navbar-tab-active-background-color;
+ border-bottom-color: $navbar-tab-active-border-bottom-color;
+ border-bottom-style: $navbar-tab-active-border-bottom-style;
+ border-bottom-width: $navbar-tab-active-border-bottom-width;
+ color: $navbar-tab-active-color;
+ padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width});
+ }
+ }
+}
+
+.navbar-content {
+ flex-grow: 1;
+ flex-shrink: 1;
+}
+
+.navbar-link:not(.is-arrowless) {
+ @include ltr-property("padding", 2.5em);
+
+ &::after {
+ @extend %arrow;
+
+ border-color: $navbar-dropdown-arrow;
+ margin-top: -0.375em;
+
+ @include ltr-position(1.125em);
+ }
+}
+
+.navbar-dropdown {
+ font-size: 0.875rem;
+ padding-bottom: 0.5rem;
+ padding-top: 0.5rem;
+
+ .navbar-item {
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+ }
+}
+
+.navbar-divider {
+ background-color: $navbar-divider-background-color;
+ border: none;
+ display: none;
+ height: $navbar-divider-height;
+ margin: 0.5rem 0;
+}
+
+@include until($navbar-breakpoint) {
+ .navbar > .container {
+ display: block;
+ }
+
+ .navbar-brand,
+ .navbar-tabs {
+ .navbar-item {
+ align-items: center;
+ display: flex;
+ }
+ }
+
+ .navbar-link {
+ &::after {
+ display: none;
+ }
+ }
+
+ .navbar-menu {
+ background-color: $navbar-background-color;
+ box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1);
+ padding: 0.5rem 0;
+
+ &.is-active {
+ display: block;
+ }
+ }
+
+ // Fixed navbar
+ .navbar {
+ &.is-fixed-bottom-touch,
+ &.is-fixed-top-touch {
+ @include navbar-fixed;
+ }
+
+ &.is-fixed-bottom-touch {
+ bottom: 0;
+
+ &.has-shadow {
+ box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1);
+ }
+ }
+
+ &.is-fixed-top-touch {
+ top: 0;
+ }
+
+ &.is-fixed-top,
+ &.is-fixed-top-touch {
+ .navbar-menu {
+ @include overflow-touch;
+
+ max-height: calc(100vh - #{$navbar-height});
+ overflow: auto;
+ }
+ }
+ }
+
+ html,
+ body {
+ &.has-navbar-fixed-top-touch {
+ padding-top: $navbar-height;
+ }
+
+ &.has-navbar-fixed-bottom-touch {
+ padding-bottom: $navbar-height;
+ }
+ }
+}
+
+
+@include from($navbar-breakpoint) {
+ .navbar,
+ .navbar-menu,
+ .navbar-start,
+ .navbar-end {
+ align-items: stretch;
+ display: flex;
+ }
+
+ .navbar {
+ min-height: $navbar-height;
+
+ &.is-spaced {
+ padding: $navbar-padding-vertical $navbar-padding-horizontal;
+
+ .navbar-start,
+ .navbar-end {
+ align-items: center;
+ }
+
+ a.navbar-item,
+ .navbar-link {
+ border-radius: $radius;
+ }
+ }
+
+ &.is-transparent {
+ a.navbar-item,
+ .navbar-link {
+ &:focus,
+ &:hover,
+ &.is-active {
+ background-color: transparent !important;
+ }
+ }
+
+ .navbar-item.has-dropdown {
+ &.is-active,
+ &.is-hoverable:focus,
+ &.is-hoverable:focus-within,
+ &.is-hoverable:hover {
+ .navbar-link {
+ background-color: transparent !important;
+ }
+ }
+ }
+
+ .navbar-dropdown {
+ a.navbar-item {
+ &:focus,
+ &:hover {
+ background-color: $navbar-dropdown-item-hover-background-color;
+ color: $navbar-dropdown-item-hover-color;
+ }
+
+ &.is-active {
+ background-color: $navbar-dropdown-item-active-background-color;
+ color: $navbar-dropdown-item-active-color;
+ }
+ }
+ }
+ }
+ }
+
+ .navbar-burger {
+ display: none;
+ }
+
+ .navbar-item,
+ .navbar-link {
+ align-items: center;
+ display: flex;
+ }
+
+ .navbar-item {
+ &.has-dropdown {
+ align-items: stretch;
+ }
+
+ &.has-dropdown-up {
+ .navbar-link::after {
+ transform: rotate(135deg) translate(0.25em, -0.25em);
+ }
+
+ .navbar-dropdown {
+ border-bottom: $navbar-dropdown-border-top;
+ border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0;
+ border-top: none;
+ bottom: 100%;
+ box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1);
+ top: auto;
+ }
+ }
+
+ &.is-active,
+ &.is-hoverable:focus,
+ &.is-hoverable:focus-within,
+ &.is-hoverable:hover {
+ .navbar-dropdown {
+ display: block;
+
+ .navbar.is-spaced &,
+ &.is-boxed {
+ opacity: 1;
+ pointer-events: auto;
+ transform: translateY(0);
+ }
+ }
+ }
+ }
+
+ .navbar-menu {
+ flex-grow: 1;
+ flex-shrink: 0;
+ }
+
+ .navbar-start {
+ justify-content: flex-start;
+
+ @include ltr-property("margin", auto);
+ }
+
+ .navbar-end {
+ justify-content: flex-end;
+
+ @include ltr-property("margin", auto, false);
+ }
+
+ .navbar-dropdown {
+ background-color: $navbar-dropdown-background-color;
+ border-bottom-left-radius: $navbar-dropdown-radius;
+ border-bottom-right-radius: $navbar-dropdown-radius;
+ border-top: $navbar-dropdown-border-top;
+ box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1);
+ display: none;
+ font-size: 0.875rem;
+
+ @include ltr-position(0, false);
+
+ min-width: 100%;
+ position: absolute;
+ top: 100%;
+ z-index: $navbar-dropdown-z;
+
+ .navbar-item {
+ padding: 0.375rem 1rem;
+ white-space: nowrap;
+ }
+
+ a.navbar-item {
+ @include ltr-property("padding", 3rem);
+
+ &:focus,
+ &:hover {
+ background-color: $navbar-dropdown-item-hover-background-color;
+ color: $navbar-dropdown-item-hover-color;
+ }
+
+ &.is-active {
+ background-color: $navbar-dropdown-item-active-background-color;
+ color: $navbar-dropdown-item-active-color;
+ }
+ }
+
+ .navbar.is-spaced &,
+ &.is-boxed {
+ border-radius: $navbar-dropdown-boxed-radius;
+ border-top: none;
+ box-shadow: $navbar-dropdown-boxed-shadow;
+ display: block;
+ opacity: 0;
+ pointer-events: none;
+ top: calc(100% + (#{$navbar-dropdown-offset}));
+ transform: translateY(-5px);
+ transition-duration: $speed;
+ transition-property: opacity, transform;
+ }
+
+ &.is-right {
+ left: auto;
+ right: 0;
+ }
+ }
+
+ .navbar-divider {
+ display: block;
+ }
+
+ .navbar > .container,
+ .container > .navbar {
+ .navbar-brand {
+ @include ltr-property("margin", -0.75rem, false);
+ }
+
+ .navbar-menu {
+ @include ltr-property("margin", -0.75rem);
+ }
+ }
+
+ // Fixed navbar
+ .navbar {
+ &.is-fixed-bottom-desktop,
+ &.is-fixed-top-desktop {
+ @include navbar-fixed;
+ }
+
+ &.is-fixed-bottom-desktop {
+ bottom: 0;
+
+ &.has-shadow {
+ box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1);
+ }
+ }
+
+ &.is-fixed-top-desktop {
+ top: 0;
+ }
+ }
+
+ html,
+ body {
+ &.has-navbar-fixed-top-desktop {
+ padding-top: $navbar-height;
+ }
+
+ &.has-navbar-fixed-bottom-desktop {
+ padding-bottom: $navbar-height;
+ }
+
+ &.has-spaced-navbar-fixed-top {
+ padding-top: $navbar-height + $navbar-padding-vertical * 2;
+ }
+
+ &.has-spaced-navbar-fixed-bottom {
+ padding-bottom: $navbar-height + $navbar-padding-vertical * 2;
+ }
+ }
+
+ // Hover/Active states
+ a.navbar-item,
+ .navbar-link {
+ &.is-active {
+ color: $navbar-item-active-color;
+ }
+
+ &.is-active:not(:focus):not(:hover) {
+ background-color: $navbar-item-active-background-color;
+ }
+ }
+
+ .navbar-item.has-dropdown {
+ &:focus,
+ &:hover,
+ &.is-active {
+ .navbar-link {
+ background-color: $navbar-item-hover-background-color;
+ }
+ }
+ }
+}
+
+
+// Combination
+
+.hero {
+ &.is-fullheight-with-navbar {
+ min-height: calc(100vh - #{$navbar-height});
+ }
+}
+++ /dev/null
-@import "../utilities/controls"
-@import "../utilities/mixins"
-
-$pagination-color: $text-strong !default
-$pagination-border-color: $border !default
-$pagination-margin: -0.25rem !default
-$pagination-min-width: $control-height !default
-
-$pagination-item-font-size: 1em !default
-$pagination-item-margin: 0.25rem !default
-$pagination-item-padding-left: 0.5em !default
-$pagination-item-padding-right: 0.5em !default
-
-$pagination-nav-padding-left: 0.75em !default
-$pagination-nav-padding-right: 0.75em !default
-
-$pagination-hover-color: $link-hover !default
-$pagination-hover-border-color: $link-hover-border !default
-
-$pagination-focus-color: $link-focus !default
-$pagination-focus-border-color: $link-focus-border !default
-
-$pagination-active-color: $link-active !default
-$pagination-active-border-color: $link-active-border !default
-
-$pagination-disabled-color: $text-light !default
-$pagination-disabled-background-color: $border !default
-$pagination-disabled-border-color: $border !default
-
-$pagination-current-color: $link-invert !default
-$pagination-current-background-color: $link !default
-$pagination-current-border-color: $link !default
-
-$pagination-ellipsis-color: $grey-light !default
-
-$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default
-
-.pagination
- @extend %block
- font-size: $size-normal
- margin: $pagination-margin
- // Sizes
- &.is-small
- font-size: $size-small
- &.is-medium
- font-size: $size-medium
- &.is-large
- font-size: $size-large
- &.is-rounded
- .pagination-previous,
- .pagination-next
- padding-left: 1em
- padding-right: 1em
- border-radius: $radius-rounded
- .pagination-link
- border-radius: $radius-rounded
-
-.pagination,
-.pagination-list
- align-items: center
- display: flex
- justify-content: center
- text-align: center
-
-.pagination-previous,
-.pagination-next,
-.pagination-link,
-.pagination-ellipsis
- @extend %control
- @extend %unselectable
- font-size: $pagination-item-font-size
- justify-content: center
- margin: $pagination-item-margin
- padding-left: $pagination-item-padding-left
- padding-right: $pagination-item-padding-right
- text-align: center
-
-.pagination-previous,
-.pagination-next,
-.pagination-link
- border-color: $pagination-border-color
- color: $pagination-color
- min-width: $pagination-min-width
- &:hover
- border-color: $pagination-hover-border-color
- color: $pagination-hover-color
- &:focus
- border-color: $pagination-focus-border-color
- &:active
- box-shadow: $pagination-shadow-inset
- &[disabled],
- &.is-disabled
- background-color: $pagination-disabled-background-color
- border-color: $pagination-disabled-border-color
- box-shadow: none
- color: $pagination-disabled-color
- opacity: 0.5
-
-.pagination-previous,
-.pagination-next
- padding-left: $pagination-nav-padding-left
- padding-right: $pagination-nav-padding-right
- white-space: nowrap
-
-.pagination-link
- &.is-current
- background-color: $pagination-current-background-color
- border-color: $pagination-current-border-color
- color: $pagination-current-color
-
-.pagination-ellipsis
- color: $pagination-ellipsis-color
- pointer-events: none
-
-.pagination-list
- flex-wrap: wrap
- li
- list-style: none
-
-+mobile
- .pagination
- flex-wrap: wrap
- .pagination-previous,
- .pagination-next
- flex-grow: 1
- flex-shrink: 1
- .pagination-list
- li
- flex-grow: 1
- flex-shrink: 1
-
-+tablet
- .pagination-list
- flex-grow: 1
- flex-shrink: 1
- justify-content: flex-start
- order: 1
- .pagination-previous,
- .pagination-next,
- .pagination-link,
- .pagination-ellipsis
- margin-bottom: 0
- margin-top: 0
- .pagination-previous
- order: 2
- .pagination-next
- order: 3
- .pagination
- justify-content: space-between
- margin-bottom: 0
- margin-top: 0
- &.is-centered
- .pagination-previous
- order: 1
- .pagination-list
- justify-content: center
- order: 2
- .pagination-next
- order: 3
- &.is-right
- .pagination-previous
- order: 1
- .pagination-next
- order: 2
- .pagination-list
- justify-content: flex-end
- order: 3
--- /dev/null
+@import "../utilities/controls";
+@import "../utilities/mixins";
+
+$pagination-color: $text-strong !default;
+$pagination-border-color: $border !default;
+$pagination-margin: -0.25rem !default;
+$pagination-min-width: $control-height !default;
+
+$pagination-item-font-size: 1em !default;
+$pagination-item-margin: 0.25rem !default;
+$pagination-item-padding-left: 0.5em !default;
+$pagination-item-padding-right: 0.5em !default;
+
+$pagination-nav-padding-left: 0.75em !default;
+$pagination-nav-padding-right: 0.75em !default;
+
+$pagination-hover-color: $link-hover !default;
+$pagination-hover-border-color: $link-hover-border !default;
+
+$pagination-focus-color: $link-focus !default;
+$pagination-focus-border-color: $link-focus-border !default;
+
+$pagination-active-color: $link-active !default;
+$pagination-active-border-color: $link-active-border !default;
+
+$pagination-disabled-color: $text-light !default;
+$pagination-disabled-background-color: $border !default;
+$pagination-disabled-border-color: $border !default;
+
+$pagination-current-color: $link-invert !default;
+$pagination-current-background-color: $link !default;
+$pagination-current-border-color: $link !default;
+
+$pagination-ellipsis-color: $grey-light !default;
+
+$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default;
+
+.pagination {
+ @extend %block;
+
+ font-size: $size-normal;
+ margin: $pagination-margin;
+
+ // Sizes
+ &.is-small {
+ font-size: $size-small;
+ }
+
+ &.is-medium {
+ font-size: $size-medium;
+ }
+
+ &.is-large {
+ font-size: $size-large;
+ }
+
+ &.is-rounded {
+ .pagination-previous,
+ .pagination-next {
+ padding-left: 1em;
+ padding-right: 1em;
+ border-radius: $radius-rounded;
+ }
+
+ .pagination-link {
+ border-radius: $radius-rounded;
+ }
+ }
+}
+
+.pagination,
+.pagination-list {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ text-align: center;
+}
+
+.pagination-previous,
+.pagination-next,
+.pagination-link,
+.pagination-ellipsis {
+ @extend %control;
+
+ @extend %unselectable;
+
+ font-size: $pagination-item-font-size;
+ justify-content: center;
+ margin: $pagination-item-margin;
+ padding-left: $pagination-item-padding-left;
+ padding-right: $pagination-item-padding-right;
+ text-align: center;
+}
+
+.pagination-previous,
+.pagination-next,
+.pagination-link {
+ border-color: $pagination-border-color;
+ color: $pagination-color;
+ min-width: $pagination-min-width;
+
+ &:hover {
+ border-color: $pagination-hover-border-color;
+ color: $pagination-hover-color;
+ }
+
+ &:focus {
+ border-color: $pagination-focus-border-color;
+ }
+
+ &:active {
+ box-shadow: $pagination-shadow-inset;
+ }
+
+ &[disabled],
+ &.is-disabled {
+ background-color: $pagination-disabled-background-color;
+ border-color: $pagination-disabled-border-color;
+ box-shadow: none;
+ color: $pagination-disabled-color;
+ opacity: 0.5;
+ }
+}
+
+.pagination-previous,
+.pagination-next {
+ padding-left: $pagination-nav-padding-left;
+ padding-right: $pagination-nav-padding-right;
+ white-space: nowrap;
+}
+
+.pagination-link {
+ &.is-current {
+ background-color: $pagination-current-background-color;
+ border-color: $pagination-current-border-color;
+ color: $pagination-current-color;
+ }
+}
+
+.pagination-ellipsis {
+ color: $pagination-ellipsis-color;
+ pointer-events: none;
+}
+
+.pagination-list {
+ flex-wrap: wrap;
+
+ li {
+ list-style: none;
+ }
+}
+
+@include mobile {
+ .pagination {
+ flex-wrap: wrap;
+ }
+
+ .pagination-previous,
+ .pagination-next {
+ flex-grow: 1;
+ flex-shrink: 1;
+ }
+
+ .pagination-list {
+ li {
+ flex-grow: 1;
+ flex-shrink: 1;
+ }
+ }
+}
+
+
+@include tablet {
+ .pagination-list {
+ flex-grow: 1;
+ flex-shrink: 1;
+ justify-content: flex-start;
+ order: 1;
+ }
+
+ .pagination-previous,
+ .pagination-next,
+ .pagination-link,
+ .pagination-ellipsis {
+ margin-bottom: 0;
+ margin-top: 0;
+ }
+
+ .pagination-previous {
+ order: 2;
+ }
+
+ .pagination-next {
+ order: 3;
+ }
+
+ .pagination {
+ justify-content: space-between;
+ margin-bottom: 0;
+ margin-top: 0;
+
+ &.is-centered {
+ .pagination-previous {
+ order: 1;
+ }
+
+ .pagination-list {
+ justify-content: center;
+ order: 2;
+ }
+
+ .pagination-next {
+ order: 3;
+ }
+ }
+
+ &.is-right {
+ .pagination-previous {
+ order: 1;
+ }
+
+ .pagination-next {
+ order: 2;
+ }
+
+ .pagination-list {
+ justify-content: flex-end;
+ order: 3;
+ }
+ }
+ }
+}
+++ /dev/null
-@import "../utilities/mixins"
-
-$panel-margin: $block-spacing !default
-$panel-item-border: 1px solid $border-light !default
-$panel-radius: $radius-large !default
-$panel-shadow: $shadow !default
-
-$panel-heading-background-color: $border-light !default
-$panel-heading-color: $text-strong !default
-$panel-heading-line-height: 1.25 !default
-$panel-heading-padding: 0.75em 1em !default
-$panel-heading-radius: $radius !default
-$panel-heading-size: 1.25em !default
-$panel-heading-weight: $weight-bold !default
-
-$panel-tabs-font-size: 0.875em !default
-$panel-tab-border-bottom: 1px solid $border !default
-$panel-tab-active-border-bottom-color: $link-active-border !default
-$panel-tab-active-color: $link-active !default
-
-$panel-list-item-color: $text !default
-$panel-list-item-hover-color: $link !default
-
-$panel-block-color: $text-strong !default
-$panel-block-hover-background-color: $background !default
-$panel-block-active-border-left-color: $link !default
-$panel-block-active-color: $link-active !default
-$panel-block-active-icon-color: $link !default
-
-$panel-icon-color: $text-light !default
-$panel-colors: $colors !default
-
-.panel
- border-radius: $panel-radius
- box-shadow: $panel-shadow
- font-size: $size-normal
- &:not(:last-child)
- margin-bottom: $panel-margin
- // Colors
- @each $name, $components in $panel-colors
- $color: nth($components, 1)
- $color-invert: nth($components, 2)
- &.is-#{$name}
- .panel-heading
- background-color: $color
- color: $color-invert
- .panel-tabs a.is-active
- border-bottom-color: $color
- .panel-block.is-active .panel-icon
- color: $color
-
-.panel-tabs,
-.panel-block
- &:not(:last-child)
- border-bottom: $panel-item-border
-
-.panel-heading
- background-color: $panel-heading-background-color
- border-radius: $panel-radius $panel-radius 0 0
- color: $panel-heading-color
- font-size: $panel-heading-size
- font-weight: $panel-heading-weight
- line-height: $panel-heading-line-height
- padding: $panel-heading-padding
-
-.panel-tabs
- align-items: flex-end
- display: flex
- font-size: $panel-tabs-font-size
- justify-content: center
- a
- border-bottom: $panel-tab-border-bottom
- margin-bottom: -1px
- padding: 0.5em
- // Modifiers
- &.is-active
- border-bottom-color: $panel-tab-active-border-bottom-color
- color: $panel-tab-active-color
-
-.panel-list
- a
- color: $panel-list-item-color
- &:hover
- color: $panel-list-item-hover-color
-
-.panel-block
- align-items: center
- color: $panel-block-color
- display: flex
- justify-content: flex-start
- padding: 0.5em 0.75em
- input[type="checkbox"]
- +ltr-property("margin", 0.75em)
- & > .control
- flex-grow: 1
- flex-shrink: 1
- width: 100%
- &.is-wrapped
- flex-wrap: wrap
- &.is-active
- border-left-color: $panel-block-active-border-left-color
- color: $panel-block-active-color
- .panel-icon
- color: $panel-block-active-icon-color
- &:last-child
- border-bottom-left-radius: $panel-radius
- border-bottom-right-radius: $panel-radius
-
-a.panel-block,
-label.panel-block
- cursor: pointer
- &:hover
- background-color: $panel-block-hover-background-color
-
-.panel-icon
- +fa(14px, 1em)
- color: $panel-icon-color
- +ltr-property("margin", 0.75em)
- .fa
- font-size: inherit
- line-height: inherit
--- /dev/null
+@import "../utilities/mixins";
+
+$panel-margin: $block-spacing !default;
+$panel-item-border: 1px solid $border-light !default;
+$panel-radius: $radius-large !default;
+$panel-shadow: $shadow !default;
+
+$panel-heading-background-color: $border-light !default;
+$panel-heading-color: $text-strong !default;
+$panel-heading-line-height: 1.25 !default;
+$panel-heading-padding: 0.75em 1em !default;
+$panel-heading-radius: $radius !default;
+$panel-heading-size: 1.25em !default;
+$panel-heading-weight: $weight-bold !default;
+
+$panel-tabs-font-size: 0.875em !default;
+$panel-tab-border-bottom: 1px solid $border !default;
+$panel-tab-active-border-bottom-color: $link-active-border !default;
+$panel-tab-active-color: $link-active !default;
+
+$panel-list-item-color: $text !default;
+$panel-list-item-hover-color: $link !default;
+
+$panel-block-color: $text-strong !default;
+$panel-block-hover-background-color: $background !default;
+$panel-block-active-border-left-color: $link !default;
+$panel-block-active-color: $link-active !default;
+$panel-block-active-icon-color: $link !default;
+
+$panel-icon-color: $text-light !default;
+$panel-colors: $colors !default;
+
+.panel {
+ border-radius: $panel-radius;
+ box-shadow: $panel-shadow;
+ font-size: $size-normal;
+
+ &:not(:last-child) {
+ margin-bottom: $panel-margin;
+ }
+
+ // Colors
+ @each $name, $components in $panel-colors {
+ $color: nth($components, 1);
+ $color-invert: nth($components, 2);
+
+ &.is-#{$name} {
+ .panel-heading {
+ background-color: $color;
+ color: $color-invert;
+ }
+
+ .panel-tabs a.is-active {
+ border-bottom-color: $color;
+ }
+
+ .panel-block.is-active .panel-icon {
+ color: $color;
+ }
+ }
+ }
+}
+
+.panel-tabs,
+.panel-block {
+ &:not(:last-child) {
+ border-bottom: $panel-item-border;
+ }
+}
+
+.panel-heading {
+ background-color: $panel-heading-background-color;
+ border-radius: $panel-radius $panel-radius 0 0;
+ color: $panel-heading-color;
+ font-size: $panel-heading-size;
+ font-weight: $panel-heading-weight;
+ line-height: $panel-heading-line-height;
+ padding: $panel-heading-padding;
+}
+
+.panel-tabs {
+ align-items: flex-end;
+ display: flex;
+ font-size: $panel-tabs-font-size;
+ justify-content: center;
+
+ a {
+ border-bottom: $panel-tab-border-bottom;
+ margin-bottom: -1px;
+ padding: 0.5em;
+
+ // Modifiers
+ &.is-active {
+ border-bottom-color: $panel-tab-active-border-bottom-color;
+ color: $panel-tab-active-color;
+ }
+ }
+}
+
+.panel-list {
+ a {
+ color: $panel-list-item-color;
+
+ &:hover {
+ color: $panel-list-item-hover-color;
+ }
+ }
+}
+
+.panel-block {
+ align-items: center;
+ color: $panel-block-color;
+ display: flex;
+ justify-content: flex-start;
+ padding: 0.5em 0.75em;
+
+ input[type="checkbox"] {
+ @include ltr-property("margin", 0.75em);
+ }
+
+ & > .control {
+ flex-grow: 1;
+ flex-shrink: 1;
+ width: 100%;
+ }
+
+ &.is-wrapped {
+ flex-wrap: wrap;
+ }
+
+ &.is-active {
+ border-left-color: $panel-block-active-border-left-color;
+ color: $panel-block-active-color;
+
+ .panel-icon {
+ color: $panel-block-active-icon-color;
+ }
+ }
+
+ &:last-child {
+ border-bottom-left-radius: $panel-radius;
+ border-bottom-right-radius: $panel-radius;
+ }
+}
+
+a.panel-block,
+label.panel-block {
+ cursor: pointer;
+
+ &:hover {
+ background-color: $panel-block-hover-background-color;
+ }
+}
+
+.panel-icon {
+ @include fa(14px, 1em);
+
+ color: $panel-icon-color;
+
+ @include ltr-property("margin", 0.75em);
+
+ .fa {
+ font-size: inherit;
+ line-height: inherit;
+ }
+}
+++ /dev/null
-@import "../utilities/mixins"
-
-$tabs-border-bottom-color: $border !default
-$tabs-border-bottom-style: solid !default
-$tabs-border-bottom-width: 1px !default
-$tabs-link-color: $text !default
-$tabs-link-hover-border-bottom-color: $text-strong !default
-$tabs-link-hover-color: $text-strong !default
-$tabs-link-active-border-bottom-color: $link !default
-$tabs-link-active-color: $link !default
-$tabs-link-padding: 0.5em 1em !default
-
-$tabs-boxed-link-radius: $radius !default
-$tabs-boxed-link-hover-background-color: $background !default
-$tabs-boxed-link-hover-border-bottom-color: $border !default
-
-$tabs-boxed-link-active-background-color: $scheme-main !default
-$tabs-boxed-link-active-border-color: $border !default
-$tabs-boxed-link-active-border-bottom-color: transparent !default
-
-$tabs-toggle-link-border-color: $border !default
-$tabs-toggle-link-border-style: solid !default
-$tabs-toggle-link-border-width: 1px !default
-$tabs-toggle-link-hover-background-color: $background !default
-$tabs-toggle-link-hover-border-color: $border-hover !default
-$tabs-toggle-link-radius: $radius !default
-$tabs-toggle-link-active-background-color: $link !default
-$tabs-toggle-link-active-border-color: $link !default
-$tabs-toggle-link-active-color: $link-invert !default
-
-.tabs
- @extend %block
- +overflow-touch
- @extend %unselectable
- align-items: stretch
- display: flex
- font-size: $size-normal
- justify-content: space-between
- overflow: hidden
- overflow-x: auto
- white-space: nowrap
- a
- align-items: center
- border-bottom-color: $tabs-border-bottom-color
- border-bottom-style: $tabs-border-bottom-style
- border-bottom-width: $tabs-border-bottom-width
- color: $tabs-link-color
- display: flex
- justify-content: center
- margin-bottom: -#{$tabs-border-bottom-width}
- padding: $tabs-link-padding
- vertical-align: top
- &:hover
- border-bottom-color: $tabs-link-hover-border-bottom-color
- color: $tabs-link-hover-color
- li
- display: block
- &.is-active
- a
- border-bottom-color: $tabs-link-active-border-bottom-color
- color: $tabs-link-active-color
- ul
- align-items: center
- border-bottom-color: $tabs-border-bottom-color
- border-bottom-style: $tabs-border-bottom-style
- border-bottom-width: $tabs-border-bottom-width
- display: flex
- flex-grow: 1
- flex-shrink: 0
- justify-content: flex-start
- &.is-left
- padding-right: 0.75em
- &.is-center
- flex: none
- justify-content: center
- padding-left: 0.75em
- padding-right: 0.75em
- &.is-right
- justify-content: flex-end
- padding-left: 0.75em
- .icon
- &:first-child
- +ltr-property("margin", 0.5em)
- &:last-child
- +ltr-property("margin", 0.5em, false)
- // Alignment
- &.is-centered
- ul
- justify-content: center
- &.is-right
- ul
- justify-content: flex-end
- // Styles
- &.is-boxed
- a
- border: 1px solid transparent
- +ltr
- border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
- +rtl
- border-radius: 0 0 $tabs-boxed-link-radius $tabs-boxed-link-radius
- &:hover
- background-color: $tabs-boxed-link-hover-background-color
- border-bottom-color: $tabs-boxed-link-hover-border-bottom-color
- li
- &.is-active
- a
- background-color: $tabs-boxed-link-active-background-color
- border-color: $tabs-boxed-link-active-border-color
- border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important
- &.is-fullwidth
- li
- flex-grow: 1
- flex-shrink: 0
- &.is-toggle
- a
- border-color: $tabs-toggle-link-border-color
- border-style: $tabs-toggle-link-border-style
- border-width: $tabs-toggle-link-border-width
- margin-bottom: 0
- position: relative
- &:hover
- background-color: $tabs-toggle-link-hover-background-color
- border-color: $tabs-toggle-link-hover-border-color
- z-index: 2
- li
- & + li
- +ltr-property("margin", -#{$tabs-toggle-link-border-width}, false)
- &:first-child a
- +ltr
- border-top-left-radius: $tabs-toggle-link-radius
- border-bottom-left-radius: $tabs-toggle-link-radius
- +rtl
- border-top-right-radius: $tabs-toggle-link-radius
- border-bottom-right-radius: $tabs-toggle-link-radius
- &:last-child a
- +ltr
- border-top-right-radius: $tabs-toggle-link-radius
- border-bottom-right-radius: $tabs-toggle-link-radius
- +rtl
- border-top-left-radius: $tabs-toggle-link-radius
- border-bottom-left-radius: $tabs-toggle-link-radius
- &.is-active
- a
- background-color: $tabs-toggle-link-active-background-color
- border-color: $tabs-toggle-link-active-border-color
- color: $tabs-toggle-link-active-color
- z-index: 1
- ul
- border-bottom: none
- &.is-toggle-rounded
- li
- &:first-child a
- +ltr
- border-bottom-left-radius: $radius-rounded
- border-top-left-radius: $radius-rounded
- padding-left: 1.25em
- +rtl
- border-bottom-right-radius: $radius-rounded
- border-top-right-radius: $radius-rounded
- padding-right: 1.25em
- &:last-child a
- +ltr
- border-bottom-right-radius: $radius-rounded
- border-top-right-radius: $radius-rounded
- padding-right: 1.25em
- +rtl
- border-bottom-left-radius: $radius-rounded
- border-top-left-radius: $radius-rounded
- padding-left: 1.25em
- // Sizes
- &.is-small
- font-size: $size-small
- &.is-medium
- font-size: $size-medium
- &.is-large
- font-size: $size-large
--- /dev/null
+@import "../utilities/mixins";
+
+$tabs-border-bottom-color: $border !default;
+$tabs-border-bottom-style: solid !default;
+$tabs-border-bottom-width: 1px !default;
+$tabs-link-color: $text !default;
+$tabs-link-hover-border-bottom-color: $text-strong !default;
+$tabs-link-hover-color: $text-strong !default;
+$tabs-link-active-border-bottom-color: $link !default;
+$tabs-link-active-color: $link !default;
+$tabs-link-padding: 0.5em 1em !default;
+
+$tabs-boxed-link-radius: $radius !default;
+$tabs-boxed-link-hover-background-color: $background !default;
+$tabs-boxed-link-hover-border-bottom-color: $border !default;
+
+$tabs-boxed-link-active-background-color: $scheme-main !default;
+$tabs-boxed-link-active-border-color: $border !default;
+$tabs-boxed-link-active-border-bottom-color: transparent !default;
+
+$tabs-toggle-link-border-color: $border !default;
+$tabs-toggle-link-border-style: solid !default;
+$tabs-toggle-link-border-width: 1px !default;
+$tabs-toggle-link-hover-background-color: $background !default;
+$tabs-toggle-link-hover-border-color: $border-hover !default;
+$tabs-toggle-link-radius: $radius !default;
+$tabs-toggle-link-active-background-color: $link !default;
+$tabs-toggle-link-active-border-color: $link !default;
+$tabs-toggle-link-active-color: $link-invert !default;
+
+.tabs {
+ @extend %block;
+
+ @include overflow-touch;
+
+ @extend %unselectable;
+
+ align-items: stretch;
+ display: flex;
+ font-size: $size-normal;
+ justify-content: space-between;
+ overflow: hidden;
+ overflow-x: auto;
+ white-space: nowrap;
+
+ a {
+ align-items: center;
+ border-bottom-color: $tabs-border-bottom-color;
+ border-bottom-style: $tabs-border-bottom-style;
+ border-bottom-width: $tabs-border-bottom-width;
+ color: $tabs-link-color;
+ display: flex;
+ justify-content: center;
+ margin-bottom: -#{$tabs-border-bottom-width};
+ padding: $tabs-link-padding;
+ vertical-align: top;
+
+ &:hover {
+ border-bottom-color: $tabs-link-hover-border-bottom-color;
+ color: $tabs-link-hover-color;
+ }
+ }
+
+ li {
+ display: block;
+
+ &.is-active {
+ a {
+ border-bottom-color: $tabs-link-active-border-bottom-color;
+ color: $tabs-link-active-color;
+ }
+ }
+ }
+
+ ul {
+ align-items: center;
+ border-bottom-color: $tabs-border-bottom-color;
+ border-bottom-style: $tabs-border-bottom-style;
+ border-bottom-width: $tabs-border-bottom-width;
+ display: flex;
+ flex-grow: 1;
+ flex-shrink: 0;
+ justify-content: flex-start;
+
+ &.is-left {
+ padding-right: 0.75em;
+ }
+
+ &.is-center {
+ flex: none;
+ justify-content: center;
+ padding-left: 0.75em;
+ padding-right: 0.75em;
+ }
+
+ &.is-right {
+ justify-content: flex-end;
+ padding-left: 0.75em;
+ }
+ }
+
+ .icon {
+ &:first-child {
+ @include ltr-property("margin", 0.5em);
+ }
+
+ &:last-child {
+ @include ltr-property("margin", 0.5em, false);
+ }
+ }
+
+ // Alignment
+ &.is-centered {
+ ul {
+ justify-content: center;
+ }
+ }
+
+ &.is-right {
+ ul {
+ justify-content: flex-end;
+ }
+ }
+
+ // Styles
+ &.is-boxed {
+ a {
+ border: 1px solid transparent;
+
+ @include ltr {
+ border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0;
+ }
+
+
+ @include rtl {
+ border-radius: 0 0 $tabs-boxed-link-radius $tabs-boxed-link-radius;
+ }
+
+
+ &:hover {
+ background-color: $tabs-boxed-link-hover-background-color;
+ border-bottom-color: $tabs-boxed-link-hover-border-bottom-color;
+ }
+ }
+
+ li {
+ &.is-active {
+ a {
+ background-color: $tabs-boxed-link-active-background-color;
+ border-color: $tabs-boxed-link-active-border-color;
+ border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important;
+ }
+ }
+ }
+ }
+
+ &.is-fullwidth {
+ li {
+ flex-grow: 1;
+ flex-shrink: 0;
+ }
+ }
+
+ &.is-toggle {
+ a {
+ border-color: $tabs-toggle-link-border-color;
+ border-style: $tabs-toggle-link-border-style;
+ border-width: $tabs-toggle-link-border-width;
+ margin-bottom: 0;
+ position: relative;
+
+ &:hover {
+ background-color: $tabs-toggle-link-hover-background-color;
+ border-color: $tabs-toggle-link-hover-border-color;
+ z-index: 2;
+ }
+ }
+
+ li {
+ & + li {
+ @include ltr-property("margin", -#{$tabs-toggle-link-border-width}, false);
+ }
+
+ &:first-child a {
+ @include ltr {
+ border-top-left-radius: $tabs-toggle-link-radius;
+ border-bottom-left-radius: $tabs-toggle-link-radius;
+ }
+
+
+ @include rtl {
+ border-top-right-radius: $tabs-toggle-link-radius;
+ border-bottom-right-radius: $tabs-toggle-link-radius;
+ }
+ }
+
+ &:last-child a {
+ @include ltr {
+ border-top-right-radius: $tabs-toggle-link-radius;
+ border-bottom-right-radius: $tabs-toggle-link-radius;
+ }
+
+
+ @include rtl {
+ border-top-left-radius: $tabs-toggle-link-radius;
+ border-bottom-left-radius: $tabs-toggle-link-radius;
+ }
+ }
+
+ &.is-active {
+ a {
+ background-color: $tabs-toggle-link-active-background-color;
+ border-color: $tabs-toggle-link-active-border-color;
+ color: $tabs-toggle-link-active-color;
+ z-index: 1;
+ }
+ }
+ }
+
+ ul {
+ border-bottom: none;
+ }
+
+ &.is-toggle-rounded {
+ li {
+ &:first-child a {
+ @include ltr {
+ border-bottom-left-radius: $radius-rounded;
+ border-top-left-radius: $radius-rounded;
+ padding-left: 1.25em;
+ }
+
+
+ @include rtl {
+ border-bottom-right-radius: $radius-rounded;
+ border-top-right-radius: $radius-rounded;
+ padding-right: 1.25em;
+ }
+ }
+
+ &:last-child a {
+ @include ltr {
+ border-bottom-right-radius: $radius-rounded;
+ border-top-right-radius: $radius-rounded;
+ padding-right: 1.25em;
+ }
+
+
+ @include rtl {
+ border-bottom-left-radius: $radius-rounded;
+ border-top-left-radius: $radius-rounded;
+ padding-left: 1.25em;
+ }
+ }
+ }
+ }
+ }
+
+ // Sizes
+ &.is-small {
+ font-size: $size-small;
+ }
+
+ &.is-medium {
+ font-size: $size-medium;
+ }
+
+ &.is-large {
+ font-size: $size-large;
+ }
+}
+++ /dev/null
-/* Bulma Elements */
-@charset "utf-8"
-
-@import "box"
-@import "button"
-@import "container"
-@import "content"
-@import "icon"
-@import "image"
-@import "notification"
-@import "progress"
-@import "table"
-@import "tag"
-@import "title"
-
-@import "other"
--- /dev/null
+/* Bulma Elements */
+@charset "utf-8";
+
+@import "box";
+@import "button";
+@import "container";
+@import "content";
+@import "icon";
+@import "image";
+@import "notification";
+@import "progress";
+@import "table";
+@import "tag";
+@import "title";
+
+@import "other";
+++ /dev/null
-@import "../utilities/mixins"
-
-$box-color: $text !default
-$box-background-color: $scheme-main !default
-$box-radius: $radius-large !default
-$box-shadow: $shadow !default
-$box-padding: 1.25rem !default
-
-$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link !default
-$box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link !default
-
-.box
- @extend %block
- background-color: $box-background-color
- border-radius: $box-radius
- box-shadow: $box-shadow
- color: $box-color
- display: block
- padding: $box-padding
-
-a.box
- &:hover,
- &:focus
- box-shadow: $box-link-hover-shadow
- &:active
- box-shadow: $box-link-active-shadow
--- /dev/null
+@import "../utilities/mixins";
+
+$box-color: $text !default;
+$box-background-color: $scheme-main !default;
+$box-radius: $radius-large !default;
+$box-shadow: $shadow !default;
+$box-padding: 1.25rem !default;
+
+$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link !default;
+$box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link !default;
+
+.box {
+ @extend %block;
+
+ background-color: $box-background-color;
+ border-radius: $box-radius;
+ box-shadow: $box-shadow;
+ color: $box-color;
+ display: block;
+ padding: $box-padding;
+}
+
+a.box {
+ &:hover,
+ &:focus {
+ box-shadow: $box-link-hover-shadow;
+ }
+
+ &:active {
+ box-shadow: $box-link-active-shadow;
+ }
+}
+++ /dev/null
-@import "../utilities/controls"
-@import "../utilities/mixins"
-
-$button-color: $text-strong !default
-$button-background-color: $scheme-main !default
-$button-family: false !default
-
-$button-border-color: $border !default
-$button-border-width: $control-border-width !default
-
-$button-padding-vertical: calc(0.5em - #{$button-border-width}) !default
-$button-padding-horizontal: 1em !default
-
-$button-hover-color: $link-hover !default
-$button-hover-border-color: $link-hover-border !default
-
-$button-focus-color: $link-focus !default
-$button-focus-border-color: $link-focus-border !default
-$button-focus-box-shadow-size: 0 0 0 0.125em !default
-$button-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
-
-$button-active-color: $link-active !default
-$button-active-border-color: $link-active-border !default
-
-$button-text-color: $text !default
-$button-text-decoration: underline !default
-$button-text-hover-background-color: $background !default
-$button-text-hover-color: $text-strong !default
-
-$button-ghost-background: none !default
-$button-ghost-border-color: transparent !default
-$button-ghost-color: $link !default
-$button-ghost-decoration: none !default
-$button-ghost-hover-color: $link !default
-$button-ghost-hover-decoration: underline !default
-
-$button-disabled-background-color: $scheme-main !default
-$button-disabled-border-color: $border !default
-$button-disabled-shadow: none !default
-$button-disabled-opacity: 0.5 !default
-
-$button-static-color: $text-light !default
-$button-static-background-color: $scheme-main-ter !default
-$button-static-border-color: $border !default
-
-$button-colors: $colors !default
-$button-responsive-sizes: ("mobile": ("small": ($size-small * 0.75), "normal": ($size-small * 0.875), "medium": $size-small, "large": $size-normal), "tablet-only": ("small": ($size-small * 0.875), "normal": ($size-small), "medium": $size-normal, "large": $size-medium)) !default
-
-// The button sizes use mixins so they can be used at different breakpoints
-=button-small
- &:not(.is-rounded)
- border-radius: $radius-small
- font-size: $size-small
-=button-normal
- font-size: $size-normal
-=button-medium
- font-size: $size-medium
-=button-large
- font-size: $size-large
-
-.button
- @extend %control
- @extend %unselectable
- background-color: $button-background-color
- border-color: $button-border-color
- border-width: $button-border-width
- color: $button-color
- cursor: pointer
- @if $button-family
- font-family: $button-family
- justify-content: center
- padding-bottom: $button-padding-vertical
- padding-left: $button-padding-horizontal
- padding-right: $button-padding-horizontal
- padding-top: $button-padding-vertical
- text-align: center
- white-space: nowrap
- strong
- color: inherit
- .icon
- &,
- &.is-small,
- &.is-medium,
- &.is-large
- height: 1.5em
- width: 1.5em
- &:first-child:not(:last-child)
- +ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}), false)
- +ltr-property("margin", $button-padding-horizontal * 0.25)
- &:last-child:not(:first-child)
- +ltr-property("margin", $button-padding-horizontal * 0.25, false)
- +ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}))
- &:first-child:last-child
- margin-left: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
- margin-right: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width})
- // States
- &:hover,
- &.is-hovered
- border-color: $button-hover-border-color
- color: $button-hover-color
- &:focus,
- &.is-focused
- border-color: $button-focus-border-color
- color: $button-focus-color
- &:not(:active)
- box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color
- &:active,
- &.is-active
- border-color: $button-active-border-color
- color: $button-active-color
- // Colors
- &.is-text
- background-color: transparent
- border-color: transparent
- color: $button-text-color
- text-decoration: $button-text-decoration
- &:hover,
- &.is-hovered,
- &:focus,
- &.is-focused
- background-color: $button-text-hover-background-color
- color: $button-text-hover-color
- &:active,
- &.is-active
- background-color: bulmaDarken($button-text-hover-background-color, 5%)
- color: $button-text-hover-color
- &[disabled],
- fieldset[disabled] &
- background-color: transparent
- border-color: transparent
- box-shadow: none
- &.is-ghost
- background: $button-ghost-background
- border-color: $button-ghost-border-color
- color: $button-ghost-color
- text-decoration: $button-ghost-decoration
- &:hover,
- &.is-hovered
- color: $button-ghost-hover-color
- text-decoration: $button-ghost-hover-decoration
- @each $name, $pair in $button-colors
- $color: nth($pair, 1)
- $color-invert: nth($pair, 2)
- &.is-#{$name}
- background-color: $color
- border-color: transparent
- color: $color-invert
- &:hover,
- &.is-hovered
- background-color: bulmaDarken($color, 2.5%)
- border-color: transparent
- color: $color-invert
- &:focus,
- &.is-focused
- border-color: transparent
- color: $color-invert
- &:not(:active)
- box-shadow: $button-focus-box-shadow-size bulmaRgba($color, 0.25)
- &:active,
- &.is-active
- background-color: bulmaDarken($color, 5%)
- border-color: transparent
- color: $color-invert
- &[disabled],
- fieldset[disabled] &
- background-color: $color
- border-color: $color
- box-shadow: none
- &.is-inverted
- background-color: $color-invert
- color: $color
- &:hover,
- &.is-hovered
- background-color: bulmaDarken($color-invert, 5%)
- &[disabled],
- fieldset[disabled] &
- background-color: $color-invert
- border-color: transparent
- box-shadow: none
- color: $color
- &.is-loading
- &::after
- border-color: transparent transparent $color-invert $color-invert !important
- &.is-outlined
- background-color: transparent
- border-color: $color
- color: $color
- &:hover,
- &.is-hovered,
- &:focus,
- &.is-focused
- background-color: $color
- border-color: $color
- color: $color-invert
- &.is-loading
- &::after
- border-color: transparent transparent $color $color !important
- &:hover,
- &.is-hovered,
- &:focus,
- &.is-focused
- &::after
- border-color: transparent transparent $color-invert $color-invert !important
- &[disabled],
- fieldset[disabled] &
- background-color: transparent
- border-color: $color
- box-shadow: none
- color: $color
- &.is-inverted.is-outlined
- background-color: transparent
- border-color: $color-invert
- color: $color-invert
- &:hover,
- &.is-hovered,
- &:focus,
- &.is-focused
- background-color: $color-invert
- color: $color
- &.is-loading
- &:hover,
- &.is-hovered,
- &:focus,
- &.is-focused
- &::after
- border-color: transparent transparent $color $color !important
- &[disabled],
- fieldset[disabled] &
- background-color: transparent
- border-color: $color-invert
- box-shadow: none
- color: $color-invert
- // If light and dark colors are provided
- @if length($pair) >= 4
- $color-light: nth($pair, 3)
- $color-dark: nth($pair, 4)
- &.is-light
- background-color: $color-light
- color: $color-dark
- &:hover,
- &.is-hovered
- background-color: bulmaDarken($color-light, 2.5%)
- border-color: transparent
- color: $color-dark
- &:active,
- &.is-active
- background-color: bulmaDarken($color-light, 5%)
- border-color: transparent
- color: $color-dark
- // Sizes
- &.is-small
- +button-small
- &.is-normal
- +button-normal
- &.is-medium
- +button-medium
- &.is-large
- +button-large
- // Modifiers
- &[disabled],
- fieldset[disabled] &
- background-color: $button-disabled-background-color
- border-color: $button-disabled-border-color
- box-shadow: $button-disabled-shadow
- opacity: $button-disabled-opacity
- &.is-fullwidth
- display: flex
- width: 100%
- &.is-loading
- color: transparent !important
- pointer-events: none
- &::after
- @extend %loader
- +center(1em)
- position: absolute !important
- &.is-static
- background-color: $button-static-background-color
- border-color: $button-static-border-color
- color: $button-static-color
- box-shadow: none
- pointer-events: none
- &.is-rounded
- border-radius: $radius-rounded
- padding-left: calc(#{$button-padding-horizontal} + 0.25em)
- padding-right: calc(#{$button-padding-horizontal} + 0.25em)
-
-.buttons
- align-items: center
- display: flex
- flex-wrap: wrap
- justify-content: flex-start
- .button
- margin-bottom: 0.5rem
- &:not(:last-child):not(.is-fullwidth)
- +ltr-property("margin", 0.5rem)
- &:last-child
- margin-bottom: -0.5rem
- &:not(:last-child)
- margin-bottom: 1rem
- // Sizes
- &.are-small
- .button:not(.is-normal):not(.is-medium):not(.is-large)
- +button-small
- &.are-medium
- .button:not(.is-small):not(.is-normal):not(.is-large)
- +button-medium
- &.are-large
- .button:not(.is-small):not(.is-normal):not(.is-medium)
- +button-large
- &.has-addons
- .button
- &:not(:first-child)
- border-bottom-left-radius: 0
- border-top-left-radius: 0
- &:not(:last-child)
- border-bottom-right-radius: 0
- border-top-right-radius: 0
- +ltr-property("margin", -1px)
- &:last-child
- +ltr-property("margin", 0)
- &:hover,
- &.is-hovered
- z-index: 2
- &:focus,
- &.is-focused,
- &:active,
- &.is-active,
- &.is-selected
- z-index: 3
- &:hover
- z-index: 4
- &.is-expanded
- flex-grow: 1
- flex-shrink: 1
- &.is-centered
- justify-content: center
- &:not(.has-addons)
- .button:not(.is-fullwidth)
- margin-left: 0.25rem
- margin-right: 0.25rem
- &.is-right
- justify-content: flex-end
- &:not(.has-addons)
- .button:not(.is-fullwidth)
- margin-left: 0.25rem
- margin-right: 0.25rem
-
-@each $bp-name, $bp-sizes in $button-responsive-sizes
- +breakpoint($bp-name)
- @each $size, $value in $bp-sizes
- @if $size != "normal"
- .button.is-responsive.is-#{$size}
- font-size: $value
- @else
- .button.is-responsive,
- .button.is-responsive.is-normal
- font-size: $value
--- /dev/null
+@import "../utilities/controls";
+@import "../utilities/mixins";
+
+$button-color: $text-strong !default;
+$button-background-color: $scheme-main !default;
+$button-family: false !default;
+
+$button-border-color: $border !default;
+$button-border-width: $control-border-width !default;
+
+$button-padding-vertical: calc(0.5em - #{$button-border-width}) !default;
+$button-padding-horizontal: 1em !default;
+
+$button-hover-color: $link-hover !default;
+$button-hover-border-color: $link-hover-border !default;
+
+$button-focus-color: $link-focus !default;
+$button-focus-border-color: $link-focus-border !default;
+$button-focus-box-shadow-size: 0 0 0 0.125em !default;
+$button-focus-box-shadow-color: bulmaRgba($link, 0.25) !default;
+
+$button-active-color: $link-active !default;
+$button-active-border-color: $link-active-border !default;
+
+$button-text-color: $text !default;
+$button-text-decoration: underline !default;
+$button-text-hover-background-color: $background !default;
+$button-text-hover-color: $text-strong !default;
+
+$button-ghost-background: none !default;
+$button-ghost-border-color: transparent !default;
+$button-ghost-color: $link !default;
+$button-ghost-decoration: none !default;
+$button-ghost-hover-color: $link !default;
+$button-ghost-hover-decoration: underline !default;
+
+$button-disabled-background-color: $scheme-main !default;
+$button-disabled-border-color: $border !default;
+$button-disabled-shadow: none !default;
+$button-disabled-opacity: 0.5 !default;
+
+$button-static-color: $text-light !default;
+$button-static-background-color: $scheme-main-ter !default;
+$button-static-border-color: $border !default;
+
+$button-colors: $colors !default;
+$button-responsive-sizes: ("mobile": ("small": $size-small * 0.75, "normal": $size-small * 0.875, "medium": $size-small, "large": $size-normal), "tablet-only": ("small": $size-small * 0.875, "normal": $size-small, "medium": $size-normal, "large": $size-medium)) !default;
+
+// The button sizes use mixins so they can be used at different breakpoints
+@mixin button-small {
+ &:not(.is-rounded) {
+ border-radius: $radius-small;
+ }
+
+ font-size: $size-small;
+}
+
+@mixin button-normal {
+ font-size: $size-normal;
+}
+
+@mixin button-medium {
+ font-size: $size-medium;
+}
+
+@mixin button-large {
+ font-size: $size-large;
+}
+
+.button {
+ @extend %control;
+
+ @extend %unselectable;
+
+ background-color: $button-background-color;
+ border-color: $button-border-color;
+ border-width: $button-border-width;
+ color: $button-color;
+ cursor: pointer;
+
+ @if $button-family {
+ font-family: $button-family;
+ }
+
+ justify-content: center;
+ padding-bottom: $button-padding-vertical;
+ padding-left: $button-padding-horizontal;
+ padding-right: $button-padding-horizontal;
+ padding-top: $button-padding-vertical;
+ text-align: center;
+ white-space: nowrap;
+
+ strong {
+ color: inherit;
+ }
+
+ .icon {
+ &,
+ &.is-small,
+ &.is-medium,
+ &.is-large {
+ height: 1.5em;
+ width: 1.5em;
+ }
+
+ &:first-child:not(:last-child) {
+ @include ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}), false);
+ @include ltr-property("margin", $button-padding-horizontal * 0.25);
+ }
+
+ &:last-child:not(:first-child) {
+ @include ltr-property("margin", $button-padding-horizontal * 0.25, false);
+ @include ltr-property("margin", calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width}));
+ }
+
+ &:first-child:last-child {
+ margin-left: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width});
+ margin-right: calc(#{-0.5 * $button-padding-horizontal} - #{$button-border-width});
+ }
+ }
+
+ // States
+ &:hover,
+ &.is-hovered {
+ border-color: $button-hover-border-color;
+ color: $button-hover-color;
+ }
+
+ &:focus,
+ &.is-focused {
+ border-color: $button-focus-border-color;
+ color: $button-focus-color;
+
+ &:not(:active) {
+ box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color;
+ }
+ }
+
+ &:active,
+ &.is-active {
+ border-color: $button-active-border-color;
+ color: $button-active-color;
+ }
+
+ // Colors
+ &.is-text {
+ background-color: transparent;
+ border-color: transparent;
+ color: $button-text-color;
+ text-decoration: $button-text-decoration;
+
+ &:hover,
+ &.is-hovered,
+ &:focus,
+ &.is-focused {
+ background-color: $button-text-hover-background-color;
+ color: $button-text-hover-color;
+ }
+
+ &:active,
+ &.is-active {
+ background-color: bulmaDarken($button-text-hover-background-color, 5%);
+ color: $button-text-hover-color;
+ }
+
+ &[disabled],
+ fieldset[disabled] & {
+ background-color: transparent;
+ border-color: transparent;
+ box-shadow: none;
+ }
+ }
+
+ &.is-ghost {
+ background: $button-ghost-background;
+ border-color: $button-ghost-border-color;
+ color: $button-ghost-color;
+ text-decoration: $button-ghost-decoration;
+
+ &:hover,
+ &.is-hovered {
+ color: $button-ghost-hover-color;
+ text-decoration: $button-ghost-hover-decoration;
+ }
+ }
+
+ @each $name, $pair in $button-colors {
+ $color: nth($pair, 1);
+ $color-invert: nth($pair, 2);
+
+ &.is-#{$name} {
+ background-color: $color;
+ border-color: transparent;
+ color: $color-invert;
+
+ &:hover,
+ &.is-hovered {
+ background-color: bulmaDarken($color, 2.5%);
+ border-color: transparent;
+ color: $color-invert;
+ }
+
+ &:focus,
+ &.is-focused {
+ border-color: transparent;
+ color: $color-invert;
+
+ &:not(:active) {
+ box-shadow: $button-focus-box-shadow-size bulmaRgba($color, 0.25);
+ }
+ }
+
+ &:active,
+ &.is-active {
+ background-color: bulmaDarken($color, 5%);
+ border-color: transparent;
+ color: $color-invert;
+ }
+
+ &[disabled],
+ fieldset[disabled] & {
+ background-color: $color;
+ border-color: $color;
+ box-shadow: none;
+ }
+
+ &.is-inverted {
+ background-color: $color-invert;
+ color: $color;
+
+ &:hover,
+ &.is-hovered {
+ background-color: bulmaDarken($color-invert, 5%);
+ }
+
+ &[disabled],
+ fieldset[disabled] & {
+ background-color: $color-invert;
+ border-color: transparent;
+ box-shadow: none;
+ color: $color;
+ }
+ }
+
+ &.is-loading {
+ &::after {
+ border-color: transparent transparent $color-invert $color-invert !important;
+ }
+ }
+
+ &.is-outlined {
+ background-color: transparent;
+ border-color: $color;
+ color: $color;
+
+ &:hover,
+ &.is-hovered,
+ &:focus,
+ &.is-focused {
+ background-color: $color;
+ border-color: $color;
+ color: $color-invert;
+ }
+
+ &.is-loading {
+ &::after {
+ border-color: transparent transparent $color $color !important;
+ }
+
+ &:hover,
+ &.is-hovered,
+ &:focus,
+ &.is-focused {
+ &::after {
+ border-color: transparent transparent $color-invert $color-invert !important;
+ }
+ }
+ }
+
+ &[disabled],
+ fieldset[disabled] & {
+ background-color: transparent;
+ border-color: $color;
+ box-shadow: none;
+ color: $color;
+ }
+ }
+
+ &.is-inverted.is-outlined {
+ background-color: transparent;
+ border-color: $color-invert;
+ color: $color-invert;
+
+ &:hover,
+ &.is-hovered,
+ &:focus,
+ &.is-focused {
+ background-color: $color-invert;
+ color: $color;
+ }
+
+ &.is-loading {
+ &:hover,
+ &.is-hovered,
+ &:focus,
+ &.is-focused {
+ &::after {
+ border-color: transparent transparent $color $color !important;
+ }
+ }
+ }
+
+ &[disabled],
+ fieldset[disabled] & {
+ background-color: transparent;
+ border-color: $color-invert;
+ box-shadow: none;
+ color: $color-invert;
+ }
+ }
+
+ // If light and dark colors are provided
+ @if length($pair) >= 4 {
+ $color-light: nth($pair, 3);
+ $color-dark: nth($pair, 4);
+
+ &.is-light {
+ background-color: $color-light;
+ color: $color-dark;
+
+ &:hover,
+ &.is-hovered {
+ background-color: bulmaDarken($color-light, 2.5%);
+ border-color: transparent;
+ color: $color-dark;
+ }
+
+ &:active,
+ &.is-active {
+ background-color: bulmaDarken($color-light, 5%);
+ border-color: transparent;
+ color: $color-dark;
+ }
+ }
+ }
+ }
+ }
+
+ // Sizes
+ &.is-small {
+ @include button-small;
+ }
+
+ &.is-normal {
+ @include button-normal;
+ }
+
+ &.is-medium {
+ @include button-medium;
+ }
+
+ &.is-large {
+ @include button-large;
+ }
+
+ // Modifiers
+ &[disabled],
+ fieldset[disabled] & {
+ background-color: $button-disabled-background-color;
+ border-color: $button-disabled-border-color;
+ box-shadow: $button-disabled-shadow;
+ opacity: $button-disabled-opacity;
+ }
+
+ &.is-fullwidth {
+ display: flex;
+ width: 100%;
+ }
+
+ &.is-loading {
+ color: transparent !important;
+ pointer-events: none;
+
+ &::after {
+ @extend %loader;
+
+ @include center(1em);
+
+ position: absolute !important;
+ }
+ }
+
+ &.is-static {
+ background-color: $button-static-background-color;
+ border-color: $button-static-border-color;
+ color: $button-static-color;
+ box-shadow: none;
+ pointer-events: none;
+ }
+
+ &.is-rounded {
+ border-radius: $radius-rounded;
+ padding-left: calc(#{$button-padding-horizontal} + 0.25em);
+ padding-right: calc(#{$button-padding-horizontal} + 0.25em);
+ }
+}
+
+.buttons {
+ align-items: center;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+
+ .button {
+ margin-bottom: 0.5rem;
+
+ &:not(:last-child):not(.is-fullwidth) {
+ @include ltr-property("margin", 0.5rem);
+ }
+ }
+
+ &:last-child {
+ margin-bottom: -0.5rem;
+ }
+
+ &:not(:last-child) {
+ margin-bottom: 1rem;
+ }
+
+ // Sizes
+ &.are-small {
+ .button:not(.is-normal):not(.is-medium):not(.is-large) {
+ @include button-small;
+ }
+ }
+
+ &.are-medium {
+ .button:not(.is-small):not(.is-normal):not(.is-large) {
+ @include button-medium;
+ }
+ }
+
+ &.are-large {
+ .button:not(.is-small):not(.is-normal):not(.is-medium) {
+ @include button-large;
+ }
+ }
+
+ &.has-addons {
+ .button {
+ &:not(:first-child) {
+ border-bottom-left-radius: 0;
+ border-top-left-radius: 0;
+ }
+
+ &:not(:last-child) {
+ border-bottom-right-radius: 0;
+ border-top-right-radius: 0;
+
+ @include ltr-property("margin", -1px);
+ }
+
+ &:last-child {
+ @include ltr-property("margin", 0);
+ }
+
+ &:hover,
+ &.is-hovered {
+ z-index: 2;
+ }
+
+ &:focus,
+ &.is-focused,
+ &:active,
+ &.is-active,
+ &.is-selected {
+ z-index: 3;
+
+ &:hover {
+ z-index: 4;
+ }
+ }
+
+ &.is-expanded {
+ flex-grow: 1;
+ flex-shrink: 1;
+ }
+ }
+ }
+
+ &.is-centered {
+ justify-content: center;
+
+ &:not(.has-addons) {
+ .button:not(.is-fullwidth) {
+ margin-left: 0.25rem;
+ margin-right: 0.25rem;
+ }
+ }
+ }
+
+ &.is-right {
+ justify-content: flex-end;
+
+ &:not(.has-addons) {
+ .button:not(.is-fullwidth) {
+ margin-left: 0.25rem;
+ margin-right: 0.25rem;
+ }
+ }
+ }
+}
+
+@each $bp-name, $bp-sizes in $button-responsive-sizes {
+ @include breakpoint($bp-name) {
+ @each $size, $value in $bp-sizes {
+ @if $size != "normal" {
+ .button.is-responsive.is-#{$size} {
+ font-size: $value;
+ }
+ }
+ @else {
+ .button.is-responsive,
+ .button.is-responsive.is-normal {
+ font-size: $value;
+ }
+ }
+ }
+ }
+}
+++ /dev/null
-@import "../utilities/mixins"
-
-$container-offset: (2 * $gap) !default
-$container-max-width: $fullhd !default
-
-.container
- flex-grow: 1
- margin: 0 auto
- position: relative
- width: auto
- &.is-fluid
- max-width: none !important
- padding-left: $gap
- padding-right: $gap
- width: 100%
- +desktop
- max-width: $desktop - $container-offset
- +until-widescreen
- &.is-widescreen:not(.is-max-desktop)
- max-width: min($widescreen, $container-max-width) - $container-offset
- +until-fullhd
- &.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen)
- max-width: min($fullhd, $container-max-width) - $container-offset
- +widescreen
- &:not(.is-max-desktop)
- max-width: min($widescreen, $container-max-width) - $container-offset
- +fullhd
- &:not(.is-max-desktop):not(.is-max-widescreen)
- max-width: min($fullhd, $container-max-width) - $container-offset
--- /dev/null
+@import "../utilities/mixins";
+
+$container-offset: 2 * $gap !default;
+$container-max-width: $fullhd !default;
+
+.container {
+ flex-grow: 1;
+ margin: 0 auto;
+ position: relative;
+ width: auto;
+
+ &.is-fluid {
+ max-width: none !important;
+ padding-left: $gap;
+ padding-right: $gap;
+ width: 100%;
+ }
+
+ @include desktop {
+ max-width: $desktop - $container-offset;
+ }
+
+
+ @include until-widescreen {
+ &.is-widescreen:not(.is-max-desktop) {
+ max-width: min($widescreen, $container-max-width) - $container-offset;
+ }
+ }
+
+
+ @include until-fullhd {
+ &.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen) {
+ max-width: min($fullhd, $container-max-width) - $container-offset;
+ }
+ }
+
+
+ @include widescreen {
+ &:not(.is-max-desktop) {
+ max-width: min($widescreen, $container-max-width) - $container-offset;
+ }
+ }
+
+
+ @include fullhd {
+ &:not(.is-max-desktop):not(.is-max-widescreen) {
+ max-width: min($fullhd, $container-max-width) - $container-offset;
+ }
+ }
+}
+++ /dev/null
-@import "../utilities/mixins"
-
-$content-heading-color: $text-strong !default
-$content-heading-weight: $weight-semibold !default
-$content-heading-line-height: 1.125 !default
-
-$content-block-margin-bottom: 1em !default
-
-$content-blockquote-background-color: $background !default
-$content-blockquote-border-left: 5px solid $border !default
-$content-blockquote-padding: 1.25em 1.5em !default
-
-$content-pre-padding: 1.25em 1.5em !default
-
-$content-table-cell-border: 1px solid $border !default
-$content-table-cell-border-width: 0 0 1px !default
-$content-table-cell-padding: 0.5em 0.75em !default
-$content-table-cell-heading-color: $text-strong !default
-$content-table-head-cell-border-width: 0 0 2px !default
-$content-table-head-cell-color: $text-strong !default
-$content-table-body-last-row-cell-border-bottom-width: 0 !default
-$content-table-foot-cell-border-width: 2px 0 0 !default
-$content-table-foot-cell-color: $text-strong !default
-
-.content
- @extend %block
- // Inline
- li + li
- margin-top: 0.25em
- // Block
- p,
- dl,
- ol,
- ul,
- blockquote,
- pre,
- table
- &:not(:last-child)
- margin-bottom: $content-block-margin-bottom
- h1,
- h2,
- h3,
- h4,
- h5,
- h6
- color: $content-heading-color
- font-weight: $content-heading-weight
- line-height: $content-heading-line-height
- h1
- font-size: 2em
- margin-bottom: 0.5em
- &:not(:first-child)
- margin-top: 1em
- h2
- font-size: 1.75em
- margin-bottom: 0.5714em
- &:not(:first-child)
- margin-top: 1.1428em
- h3
- font-size: 1.5em
- margin-bottom: 0.6666em
- &:not(:first-child)
- margin-top: 1.3333em
- h4
- font-size: 1.25em
- margin-bottom: 0.8em
- h5
- font-size: 1.125em
- margin-bottom: 0.8888em
- h6
- font-size: 1em
- margin-bottom: 1em
- blockquote
- background-color: $content-blockquote-background-color
- +ltr-property("border", $content-blockquote-border-left, false)
- padding: $content-blockquote-padding
- ol
- list-style-position: outside
- +ltr-property("margin", 2em, false)
- margin-top: 1em
- &:not([type])
- list-style-type: decimal
- &.is-lower-alpha
- list-style-type: lower-alpha
- &.is-lower-roman
- list-style-type: lower-roman
- &.is-upper-alpha
- list-style-type: upper-alpha
- &.is-upper-roman
- list-style-type: upper-roman
- ul
- list-style: disc outside
- +ltr-property("margin", 2em, false)
- margin-top: 1em
- ul
- list-style-type: circle
- margin-top: 0.5em
- ul
- list-style-type: square
- dd
- +ltr-property("margin", 2em, false)
- figure
- margin-left: 2em
- margin-right: 2em
- text-align: center
- &:not(:first-child)
- margin-top: 2em
- &:not(:last-child)
- margin-bottom: 2em
- img
- display: inline-block
- figcaption
- font-style: italic
- pre
- +overflow-touch
- overflow-x: auto
- padding: $content-pre-padding
- white-space: pre
- word-wrap: normal
- sup,
- sub
- font-size: 75%
- table
- width: 100%
- td,
- th
- border: $content-table-cell-border
- border-width: $content-table-cell-border-width
- padding: $content-table-cell-padding
- vertical-align: top
- th
- color: $content-table-cell-heading-color
- &:not([align])
- text-align: inherit
- thead
- td,
- th
- border-width: $content-table-head-cell-border-width
- color: $content-table-head-cell-color
- tfoot
- td,
- th
- border-width: $content-table-foot-cell-border-width
- color: $content-table-foot-cell-color
- tbody
- tr
- &:last-child
- td,
- th
- border-bottom-width: $content-table-body-last-row-cell-border-bottom-width
- .tabs
- li + li
- margin-top: 0
- // Sizes
- &.is-small
- font-size: $size-small
- &.is-normal
- font-size: $size-normal
- &.is-medium
- font-size: $size-medium
- &.is-large
- font-size: $size-large
--- /dev/null
+@import "../utilities/mixins";
+
+$content-heading-color: $text-strong !default;
+$content-heading-weight: $weight-semibold !default;
+$content-heading-line-height: 1.125 !default;
+
+$content-block-margin-bottom: 1em !default;
+
+$content-blockquote-background-color: $background !default;
+$content-blockquote-border-left: 5px solid $border !default;
+$content-blockquote-padding: 1.25em 1.5em !default;
+
+$content-pre-padding: 1.25em 1.5em !default;
+
+$content-table-cell-border: 1px solid $border !default;
+$content-table-cell-border-width: 0 0 1px !default;
+$content-table-cell-padding: 0.5em 0.75em !default;
+$content-table-cell-heading-color: $text-strong !default;
+$content-table-head-cell-border-width: 0 0 2px !default;
+$content-table-head-cell-color: $text-strong !default;
+$content-table-body-last-row-cell-border-bottom-width: 0 !default;
+$content-table-foot-cell-border-width: 2px 0 0 !default;
+$content-table-foot-cell-color: $text-strong !default;
+
+.content {
+ @extend %block;
+
+ // Inline
+ li + li {
+ margin-top: 0.25em;
+ }
+
+ // Block
+ p,
+ dl,
+ ol,
+ ul,
+ blockquote,
+ pre,
+ table {
+ &:not(:last-child) {
+ margin-bottom: $content-block-margin-bottom;
+ }
+ }
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ color: $content-heading-color;
+ font-weight: $content-heading-weight;
+ line-height: $content-heading-line-height;
+ }
+
+ h1 {
+ font-size: 2em;
+ margin-bottom: 0.5em;
+
+ &:not(:first-child) {
+ margin-top: 1em;
+ }
+ }
+
+ h2 {
+ font-size: 1.75em;
+ margin-bottom: 0.5714em;
+
+ &:not(:first-child) {
+ margin-top: 1.1428em;
+ }
+ }
+
+ h3 {
+ font-size: 1.5em;
+ margin-bottom: 0.6666em;
+
+ &:not(:first-child) {
+ margin-top: 1.3333em;
+ }
+ }
+
+ h4 {
+ font-size: 1.25em;
+ margin-bottom: 0.8em;
+ }
+
+ h5 {
+ font-size: 1.125em;
+ margin-bottom: 0.8888em;
+ }
+
+ h6 {
+ font-size: 1em;
+ margin-bottom: 1em;
+ }
+
+ blockquote {
+ background-color: $content-blockquote-background-color;
+
+ @include ltr-property("border", $content-blockquote-border-left, false);
+
+ padding: $content-blockquote-padding;
+ }
+
+ ol {
+ list-style-position: outside;
+
+ @include ltr-property("margin", 2em, false);
+
+ margin-top: 1em;
+
+ &:not([type]) {
+ list-style-type: decimal;
+
+ &.is-lower-alpha {
+ list-style-type: lower-alpha;
+ }
+
+ &.is-lower-roman {
+ list-style-type: lower-roman;
+ }
+
+ &.is-upper-alpha {
+ list-style-type: upper-alpha;
+ }
+
+ &.is-upper-roman {
+ list-style-type: upper-roman;
+ }
+ }
+ }
+
+ ul {
+ list-style: disc outside;
+
+ @include ltr-property("margin", 2em, false);
+
+ margin-top: 1em;
+
+ ul {
+ list-style-type: circle;
+ margin-top: 0.5em;
+
+ ul {
+ list-style-type: square;
+ }
+ }
+ }
+
+ dd {
+ @include ltr-property("margin", 2em, false);
+ }
+
+ figure {
+ margin-left: 2em;
+ margin-right: 2em;
+ text-align: center;
+
+ &:not(:first-child) {
+ margin-top: 2em;
+ }
+
+ &:not(:last-child) {
+ margin-bottom: 2em;
+ }
+
+ img {
+ display: inline-block;
+ }
+
+ figcaption {
+ font-style: italic;
+ }
+ }
+
+ pre {
+ @include overflow-touch;
+
+ overflow-x: auto;
+ padding: $content-pre-padding;
+ white-space: pre;
+ word-wrap: normal;
+ }
+
+ sup,
+ sub {
+ font-size: 75%;
+ }
+
+ table {
+ width: 100%;
+
+ td,
+ th {
+ border: $content-table-cell-border;
+ border-width: $content-table-cell-border-width;
+ padding: $content-table-cell-padding;
+ vertical-align: top;
+ }
+
+ th {
+ color: $content-table-cell-heading-color;
+
+ &:not([align]) {
+ text-align: inherit;
+ }
+ }
+
+ thead {
+ td,
+ th {
+ border-width: $content-table-head-cell-border-width;
+ color: $content-table-head-cell-color;
+ }
+ }
+
+ tfoot {
+ td,
+ th {
+ border-width: $content-table-foot-cell-border-width;
+ color: $content-table-foot-cell-color;
+ }
+ }
+
+ tbody {
+ tr {
+ &:last-child {
+ td,
+ th {
+ border-bottom-width: $content-table-body-last-row-cell-border-bottom-width;
+ }
+ }
+ }
+ }
+ }
+
+ .tabs {
+ li + li {
+ margin-top: 0;
+ }
+ }
+
+ // Sizes
+ &.is-small {
+ font-size: $size-small;
+ }
+
+ &.is-normal {
+ font-size: $size-normal;
+ }
+
+ &.is-medium {
+ font-size: $size-medium;
+ }
+
+ &.is-large {
+ font-size: $size-large;
+ }
+}
+++ /dev/null
-@warn "The form.sass file is DEPRECATED. It has moved into its own /form folder. Please import sass/form/_all instead."
--- /dev/null
+@warn "The form.scss file is DEPRECATED. It has moved into its own /form folder. Please import sass/form/_all instead.";
+++ /dev/null
-$icon-dimensions: 1.5rem !default
-$icon-dimensions-small: 1rem !default
-$icon-dimensions-medium: 2rem !default
-$icon-dimensions-large: 3rem !default
-$icon-text-spacing: 0.25em !default
-
-.icon
- align-items: center
- display: inline-flex
- justify-content: center
- height: $icon-dimensions
- width: $icon-dimensions
- // Sizes
- &.is-small
- height: $icon-dimensions-small
- width: $icon-dimensions-small
- &.is-medium
- height: $icon-dimensions-medium
- width: $icon-dimensions-medium
- &.is-large
- height: $icon-dimensions-large
- width: $icon-dimensions-large
-
-.icon-text
- align-items: flex-start
- color: inherit
- display: inline-flex
- flex-wrap: wrap
- line-height: $icon-dimensions
- vertical-align: top
- .icon
- flex-grow: 0
- flex-shrink: 0
- &:not(:last-child)
- +ltr
- margin-right: $icon-text-spacing
- +rtl
- margin-left: $icon-text-spacing
- &:not(:first-child)
- +ltr
- margin-left: $icon-text-spacing
- +rtl
- margin-right: $icon-text-spacing
-
-div.icon-text
- display: flex
--- /dev/null
+$icon-dimensions: 1.5rem !default;
+$icon-dimensions-small: 1rem !default;
+$icon-dimensions-medium: 2rem !default;
+$icon-dimensions-large: 3rem !default;
+$icon-text-spacing: 0.25em !default;
+
+.icon {
+ align-items: center;
+ display: inline-flex;
+ justify-content: center;
+ height: $icon-dimensions;
+ width: $icon-dimensions;
+
+ // Sizes
+ &.is-small {
+ height: $icon-dimensions-small;
+ width: $icon-dimensions-small;
+ }
+
+ &.is-medium {
+ height: $icon-dimensions-medium;
+ width: $icon-dimensions-medium;
+ }
+
+ &.is-large {
+ height: $icon-dimensions-large;
+ width: $icon-dimensions-large;
+ }
+}
+
+.icon-text {
+ align-items: flex-start;
+ color: inherit;
+ display: inline-flex;
+ flex-wrap: wrap;
+ line-height: $icon-dimensions;
+ vertical-align: top;
+
+ .icon {
+ flex-grow: 0;
+ flex-shrink: 0;
+
+ &:not(:last-child) {
+ @include ltr {
+ margin-right: $icon-text-spacing;
+ }
+
+
+ @include rtl {
+ margin-left: $icon-text-spacing;
+ }
+ }
+
+ &:not(:first-child) {
+ @include ltr {
+ margin-left: $icon-text-spacing;
+ }
+
+
+ @include rtl {
+ margin-right: $icon-text-spacing;
+ }
+ }
+ }
+}
+
+div.icon-text {
+ display: flex;
+}
+++ /dev/null
-@import "../utilities/mixins"
-
-$dimensions: 16 24 32 48 64 96 128 !default
-
-.image
- display: block
- position: relative
- img
- display: block
- height: auto
- width: 100%
- &.is-rounded
- border-radius: $radius-rounded
- &.is-fullwidth
- width: 100%
- // Ratio
- &.is-square,
- &.is-1by1,
- &.is-5by4,
- &.is-4by3,
- &.is-3by2,
- &.is-5by3,
- &.is-16by9,
- &.is-2by1,
- &.is-3by1,
- &.is-4by5,
- &.is-3by4,
- &.is-2by3,
- &.is-3by5,
- &.is-9by16,
- &.is-1by2,
- &.is-1by3
- img,
- .has-ratio
- @extend %overlay
- height: 100%
- width: 100%
- &.is-square,
- &.is-1by1
- padding-top: 100%
- &.is-5by4
- padding-top: 80%
- &.is-4by3
- padding-top: 75%
- &.is-3by2
- padding-top: 66.6666%
- &.is-5by3
- padding-top: 60%
- &.is-16by9
- padding-top: 56.25%
- &.is-2by1
- padding-top: 50%
- &.is-3by1
- padding-top: 33.3333%
- &.is-4by5
- padding-top: 125%
- &.is-3by4
- padding-top: 133.3333%
- &.is-2by3
- padding-top: 150%
- &.is-3by5
- padding-top: 166.6666%
- &.is-9by16
- padding-top: 177.7777%
- &.is-1by2
- padding-top: 200%
- &.is-1by3
- padding-top: 300%
- // Sizes
- @each $dimension in $dimensions
- &.is-#{$dimension}x#{$dimension}
- height: $dimension * 1px
- width: $dimension * 1px
--- /dev/null
+@import "../utilities/mixins";
+
+$dimensions: 16 24 32 48 64 96 128 !default;
+
+.image {
+ display: block;
+ position: relative;
+
+ img {
+ display: block;
+ height: auto;
+ width: 100%;
+
+ &.is-rounded {
+ border-radius: $radius-rounded;
+ }
+ }
+
+ &.is-fullwidth {
+ width: 100%;
+ }
+
+ // Ratio
+ &.is-square,
+ &.is-1by1,
+ &.is-5by4,
+ &.is-4by3,
+ &.is-3by2,
+ &.is-5by3,
+ &.is-16by9,
+ &.is-2by1,
+ &.is-3by1,
+ &.is-4by5,
+ &.is-3by4,
+ &.is-2by3,
+ &.is-3by5,
+ &.is-9by16,
+ &.is-1by2,
+ &.is-1by3 {
+ img,
+ .has-ratio {
+ @extend %overlay;
+
+ height: 100%;
+ width: 100%;
+ }
+ }
+
+ &.is-square,
+ &.is-1by1 {
+ padding-top: 100%;
+ }
+
+ &.is-5by4 {
+ padding-top: 80%;
+ }
+
+ &.is-4by3 {
+ padding-top: 75%;
+ }
+
+ &.is-3by2 {
+ padding-top: 66.6666%;
+ }
+
+ &.is-5by3 {
+ padding-top: 60%;
+ }
+
+ &.is-16by9 {
+ padding-top: 56.25%;
+ }
+
+ &.is-2by1 {
+ padding-top: 50%;
+ }
+
+ &.is-3by1 {
+ padding-top: 33.3333%;
+ }
+
+ &.is-4by5 {
+ padding-top: 125%;
+ }
+
+ &.is-3by4 {
+ padding-top: 133.3333%;
+ }
+
+ &.is-2by3 {
+ padding-top: 150%;
+ }
+
+ &.is-3by5 {
+ padding-top: 166.6666%;
+ }
+
+ &.is-9by16 {
+ padding-top: 177.7777%;
+ }
+
+ &.is-1by2 {
+ padding-top: 200%;
+ }
+
+ &.is-1by3 {
+ padding-top: 300%;
+ }
+
+ // Sizes
+ @each $dimension in $dimensions {
+ &.is-#{$dimension}x#{$dimension} {
+ height: $dimension * 1px;
+ width: $dimension * 1px;
+ }
+ }
+}
+++ /dev/null
-@import "../utilities/mixins"
-
-$notification-background-color: $background !default
-$notification-code-background-color: $scheme-main !default
-$notification-radius: $radius !default
-$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
-$notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default
-$notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default
-
-$notification-colors: $colors !default
-
-.notification
- @extend %block
- background-color: $notification-background-color
- border-radius: $notification-radius
- position: relative
- +ltr
- padding: $notification-padding-ltr
- +rtl
- padding: $notification-padding-rtl
- a:not(.button):not(.dropdown-item)
- color: currentColor
- text-decoration: underline
- strong
- color: currentColor
- code,
- pre
- background: $notification-code-background-color
- pre code
- background: transparent
- & > .delete
- +ltr-position(0.5rem)
- position: absolute
- top: 0.5rem
- .title,
- .subtitle,
- .content
- color: currentColor
- // Colors
- @each $name, $pair in $notification-colors
- $color: nth($pair, 1)
- $color-invert: nth($pair, 2)
- &.is-#{$name}
- background-color: $color
- color: $color-invert
- // If light and dark colors are provided
- @if length($pair) >= 4
- $color-light: nth($pair, 3)
- $color-dark: nth($pair, 4)
- &.is-light
- background-color: $color-light
- color: $color-dark
--- /dev/null
+@import "../utilities/mixins";
+
+$notification-background-color: $background !default;
+$notification-code-background-color: $scheme-main !default;
+$notification-radius: $radius !default;
+$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default;
+$notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default;
+$notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default;
+
+$notification-colors: $colors !default;
+
+.notification {
+ @extend %block;
+
+ background-color: $notification-background-color;
+ border-radius: $notification-radius;
+ position: relative;
+
+ @include ltr {
+ padding: $notification-padding-ltr;
+ }
+
+
+ @include rtl {
+ padding: $notification-padding-rtl;
+ }
+
+
+ a:not(.button):not(.dropdown-item) {
+ color: currentColor;
+ text-decoration: underline;
+ }
+
+ strong {
+ color: currentColor;
+ }
+
+ code,
+ pre {
+ background: $notification-code-background-color;
+ }
+
+ pre code {
+ background: transparent;
+ }
+
+ & > .delete {
+ @include ltr-position(0.5rem);
+
+ position: absolute;
+ top: 0.5rem;
+ }
+
+ .title,
+ .subtitle,
+ .content {
+ color: currentColor;
+ }
+
+ // Colors
+ @each $name, $pair in $notification-colors {
+ $color: nth($pair, 1);
+ $color-invert: nth($pair, 2);
+
+ &.is-#{$name} {
+ background-color: $color;
+ color: $color-invert;
+
+ // If light and dark colors are provided
+ @if length($pair) >= 4 {
+ $color-light: nth($pair, 3);
+ $color-dark: nth($pair, 4);
+
+ &.is-light {
+ background-color: $color-light;
+ color: $color-dark;
+ }
+ }
+ }
+ }
+}
+++ /dev/null
-@import "../utilities/mixins"
-
-.block
- @extend %block
-
-.delete
- @extend %delete
-
-.heading
- display: block
- font-size: 11px
- letter-spacing: 1px
- margin-bottom: 5px
- text-transform: uppercase
-
-.loader
- @extend %loader
-
-.number
- align-items: center
- background-color: $background
- border-radius: $radius-rounded
- display: inline-flex
- font-size: $size-medium
- height: 2em
- justify-content: center
- margin-right: 1.5rem
- min-width: 2.5em
- padding: 0.25rem 0.5rem
- text-align: center
- vertical-align: top
--- /dev/null
+@import "../utilities/mixins";
+
+.block {
+ @extend %block;
+}
+
+.delete {
+ @extend %delete;
+}
+
+.heading {
+ display: block;
+ font-size: 11px;
+ letter-spacing: 1px;
+ margin-bottom: 5px;
+ text-transform: uppercase;
+}
+
+.loader {
+ @extend %loader;
+}
+
+.number {
+ align-items: center;
+ background-color: $background;
+ border-radius: $radius-rounded;
+ display: inline-flex;
+ font-size: $size-medium;
+ height: 2em;
+ justify-content: center;
+ margin-right: 1.5rem;
+ min-width: 2.5em;
+ padding: 0.25rem 0.5rem;
+ text-align: center;
+ vertical-align: top;
+}
+++ /dev/null
-@import "../utilities/mixins"
-
-$progress-bar-background-color: $border-light !default
-$progress-value-background-color: $text !default
-$progress-border-radius: $radius-rounded !default
-
-$progress-indeterminate-duration: 1.5s !default
-
-$progress-colors: $colors !default
-
-.progress
- @extend %block
- -moz-appearance: none
- -webkit-appearance: none
- border: none
- border-radius: $progress-border-radius
- display: block
- height: $size-normal
- overflow: hidden
- padding: 0
- width: 100%
- &::-webkit-progress-bar
- background-color: $progress-bar-background-color
- &::-webkit-progress-value
- background-color: $progress-value-background-color
- &::-moz-progress-bar
- background-color: $progress-value-background-color
- &::-ms-fill
- background-color: $progress-value-background-color
- border: none
- // Colors
- @each $name, $pair in $progress-colors
- $color: nth($pair, 1)
- &.is-#{$name}
- &::-webkit-progress-value
- background-color: $color
- &::-moz-progress-bar
- background-color: $color
- &::-ms-fill
- background-color: $color
- &:indeterminate
- background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%)
-
- &:indeterminate
- animation-duration: $progress-indeterminate-duration
- animation-iteration-count: infinite
- animation-name: moveIndeterminate
- animation-timing-function: linear
- background-color: $progress-bar-background-color
- background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%)
- background-position: top left
- background-repeat: no-repeat
- background-size: 150% 150%
- &::-webkit-progress-bar
- background-color: transparent
- &::-moz-progress-bar
- background-color: transparent
- &::-ms-fill
- animation-name: none
-
- // Sizes
- &.is-small
- height: $size-small
- &.is-medium
- height: $size-medium
- &.is-large
- height: $size-large
-
-@keyframes moveIndeterminate
- from
- background-position: 200% 0
- to
- background-position: -200% 0
--- /dev/null
+@import "../utilities/mixins";
+
+$progress-bar-background-color: $border-light !default;
+$progress-value-background-color: $text !default;
+$progress-border-radius: $radius-rounded !default;
+
+$progress-indeterminate-duration: 1.5s !default;
+
+$progress-colors: $colors !default;
+
+.progress {
+ @extend %block;
+
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ border: none;
+ border-radius: $progress-border-radius;
+ display: block;
+ height: $size-normal;
+ overflow: hidden;
+ padding: 0;
+ width: 100%;
+
+ &::-webkit-progress-bar {
+ background-color: $progress-bar-background-color;
+ }
+
+ &::-webkit-progress-value {
+ background-color: $progress-value-background-color;
+ }
+
+ &::-moz-progress-bar {
+ background-color: $progress-value-background-color;
+ }
+
+ &::-ms-fill {
+ background-color: $progress-value-background-color;
+ border: none;
+ }
+
+ // Colors
+ @each $name, $pair in $progress-colors {
+ $color: nth($pair, 1);
+
+ &.is-#{$name} {
+ &::-webkit-progress-value {
+ background-color: $color;
+ }
+
+ &::-moz-progress-bar {
+ background-color: $color;
+ }
+
+ &::-ms-fill {
+ background-color: $color;
+ }
+
+ &:indeterminate {
+ background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%);
+ }
+ }
+ }
+
+ &:indeterminate {
+ animation-duration: $progress-indeterminate-duration;
+ animation-iteration-count: infinite;
+ animation-name: moveIndeterminate;
+ animation-timing-function: linear;
+ background-color: $progress-bar-background-color;
+ background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%);
+ background-position: top left;
+ background-repeat: no-repeat;
+ background-size: 150% 150%;
+
+ &::-webkit-progress-bar {
+ background-color: transparent;
+ }
+
+ &::-moz-progress-bar {
+ background-color: transparent;
+ }
+
+ &::-ms-fill {
+ animation-name: none;
+ }
+ }
+
+ // Sizes
+ &.is-small {
+ height: $size-small;
+ }
+
+ &.is-medium {
+ height: $size-medium;
+ }
+
+ &.is-large {
+ height: $size-large;
+ }
+}
+
+@keyframes moveIndeterminate {
+ from {
+ background-position: 200% 0;
+ }
+
+ to {
+ background-position: (-200%) 0;
+ }
+}
+++ /dev/null
-@import "../utilities/mixins"
-
-$table-color: $text-strong !default
-$table-background-color: $scheme-main !default
-
-$table-cell-border: 1px solid $border !default
-$table-cell-border-width: 0 0 1px !default
-$table-cell-padding: 0.5em 0.75em !default
-$table-cell-heading-color: $text-strong !default
-$table-cell-text-align: left !default
-
-$table-head-cell-border-width: 0 0 2px !default
-$table-head-cell-color: $text-strong !default
-$table-foot-cell-border-width: 2px 0 0 !default
-$table-foot-cell-color: $text-strong !default
-
-$table-head-background-color: transparent !default
-$table-body-background-color: transparent !default
-$table-foot-background-color: transparent !default
-
-$table-row-hover-background-color: $scheme-main-bis !default
-
-$table-row-active-background-color: $primary !default
-$table-row-active-color: $primary-invert !default
-
-$table-striped-row-even-background-color: $scheme-main-bis !default
-$table-striped-row-even-hover-background-color: $scheme-main-ter !default
-
-$table-colors: $colors !default
-
-.table
- @extend %block
- background-color: $table-background-color
- color: $table-color
- td,
- th
- border: $table-cell-border
- border-width: $table-cell-border-width
- padding: $table-cell-padding
- vertical-align: top
- // Colors
- @each $name, $pair in $table-colors
- $color: nth($pair, 1)
- $color-invert: nth($pair, 2)
- &.is-#{$name}
- background-color: $color
- border-color: $color
- color: $color-invert
- // Modifiers
- &.is-narrow
- white-space: nowrap
- width: 1%
- &.is-selected
- background-color: $table-row-active-background-color
- color: $table-row-active-color
- a,
- strong
- color: currentColor
- &.is-vcentered
- vertical-align: middle
- th
- color: $table-cell-heading-color
- &:not([align])
- text-align: $table-cell-text-align
- tr
- &.is-selected
- background-color: $table-row-active-background-color
- color: $table-row-active-color
- a,
- strong
- color: currentColor
- td,
- th
- border-color: $table-row-active-color
- color: currentColor
- thead
- background-color: $table-head-background-color
- td,
- th
- border-width: $table-head-cell-border-width
- color: $table-head-cell-color
- tfoot
- background-color: $table-foot-background-color
- td,
- th
- border-width: $table-foot-cell-border-width
- color: $table-foot-cell-color
- tbody
- background-color: $table-body-background-color
- tr
- &:last-child
- td,
- th
- border-bottom-width: 0
- // Modifiers
- &.is-bordered
- td,
- th
- border-width: 1px
- tr
- &:last-child
- td,
- th
- border-bottom-width: 1px
- &.is-fullwidth
- width: 100%
- &.is-hoverable
- tbody
- tr:not(.is-selected)
- &:hover
- background-color: $table-row-hover-background-color
- &.is-striped
- tbody
- tr:not(.is-selected)
- &:hover
- background-color: $table-row-hover-background-color
- &:nth-child(even)
- background-color: $table-striped-row-even-hover-background-color
- &.is-narrow
- td,
- th
- padding: 0.25em 0.5em
- &.is-striped
- tbody
- tr:not(.is-selected)
- &:nth-child(even)
- background-color: $table-striped-row-even-background-color
-
-.table-container
- @extend %block
- +overflow-touch
- overflow: auto
- overflow-y: hidden
- max-width: 100%
--- /dev/null
+@import "../utilities/mixins";
+
+$table-color: $text-strong !default;
+$table-background-color: $scheme-main !default;
+
+$table-cell-border: 1px solid $border !default;
+$table-cell-border-width: 0 0 1px !default;
+$table-cell-padding: 0.5em 0.75em !default;
+$table-cell-heading-color: $text-strong !default;
+$table-cell-text-align: left !default;
+
+$table-head-cell-border-width: 0 0 2px !default;
+$table-head-cell-color: $text-strong !default;
+$table-foot-cell-border-width: 2px 0 0 !default;
+$table-foot-cell-color: $text-strong !default;
+
+$table-head-background-color: transparent !default;
+$table-body-background-color: transparent !default;
+$table-foot-background-color: transparent !default;
+
+$table-row-hover-background-color: $scheme-main-bis !default;
+
+$table-row-active-background-color: $primary !default;
+$table-row-active-color: $primary-invert !default;
+
+$table-striped-row-even-background-color: $scheme-main-bis !default;
+$table-striped-row-even-hover-background-color: $scheme-main-ter !default;
+
+$table-colors: $colors !default;
+
+.table {
+ @extend %block;
+
+ background-color: $table-background-color;
+ color: $table-color;
+
+ td,
+ th {
+ border: $table-cell-border;
+ border-width: $table-cell-border-width;
+ padding: $table-cell-padding;
+ vertical-align: top;
+
+ // Colors
+ @each $name, $pair in $table-colors {
+ $color: nth($pair, 1);
+ $color-invert: nth($pair, 2);
+
+ &.is-#{$name} {
+ background-color: $color;
+ border-color: $color;
+ color: $color-invert;
+ }
+ }
+
+ // Modifiers
+ &.is-narrow {
+ white-space: nowrap;
+ width: 1%;
+ }
+
+ &.is-selected {
+ background-color: $table-row-active-background-color;
+ color: $table-row-active-color;
+
+ a,
+ strong {
+ color: currentColor;
+ }
+ }
+
+ &.is-vcentered {
+ vertical-align: middle;
+ }
+ }
+
+ th {
+ color: $table-cell-heading-color;
+
+ &:not([align]) {
+ text-align: $table-cell-text-align;
+ }
+ }
+
+ tr {
+ &.is-selected {
+ background-color: $table-row-active-background-color;
+ color: $table-row-active-color;
+
+ a,
+ strong {
+ color: currentColor;
+ }
+
+ td,
+ th {
+ border-color: $table-row-active-color;
+ color: currentColor;
+ }
+ }
+ }
+
+ thead {
+ background-color: $table-head-background-color;
+
+ td,
+ th {
+ border-width: $table-head-cell-border-width;
+ color: $table-head-cell-color;
+ }
+ }
+
+ tfoot {
+ background-color: $table-foot-background-color;
+
+ td,
+ th {
+ border-width: $table-foot-cell-border-width;
+ color: $table-foot-cell-color;
+ }
+ }
+
+ tbody {
+ background-color: $table-body-background-color;
+
+ tr {
+ &:last-child {
+ td,
+ th {
+ border-bottom-width: 0;
+ }
+ }
+ }
+ }
+
+ // Modifiers
+ &.is-bordered {
+ td,
+ th {
+ border-width: 1px;
+ }
+
+ tr {
+ &:last-child {
+ td,
+ th {
+ border-bottom-width: 1px;
+ }
+ }
+ }
+ }
+
+ &.is-fullwidth {
+ width: 100%;
+ }
+
+ &.is-hoverable {
+ tbody {
+ tr:not(.is-selected) {
+ &:hover {
+ background-color: $table-row-hover-background-color;
+ }
+ }
+ }
+
+ &.is-striped {
+ tbody {
+ tr:not(.is-selected) {
+ &:hover {
+ background-color: $table-row-hover-background-color;
+
+ &:nth-child(even) {
+ background-color: $table-striped-row-even-hover-background-color;
+ }
+ }
+ }
+ }
+ }
+ }
+
+ &.is-narrow {
+ td,
+ th {
+ padding: 0.25em 0.5em;
+ }
+ }
+
+ &.is-striped {
+ tbody {
+ tr:not(.is-selected) {
+ &:nth-child(even) {
+ background-color: $table-striped-row-even-background-color;
+ }
+ }
+ }
+ }
+}
+
+.table-container {
+ @extend %block;
+
+ @include overflow-touch;
+
+ overflow: auto;
+ overflow-y: hidden;
+ max-width: 100%;
+}
+++ /dev/null
-@import "../utilities/mixins"
-
-$tag-background-color: $background !default
-$tag-color: $text !default
-$tag-radius: $radius !default
-$tag-delete-margin: 1px !default
-
-$tag-colors: $colors !default
-
-.tags
- align-items: center
- display: flex
- flex-wrap: wrap
- justify-content: flex-start
- .tag
- margin-bottom: 0.5rem
- &:not(:last-child)
- +ltr-property("margin", 0.5rem)
- &:last-child
- margin-bottom: -0.5rem
- &:not(:last-child)
- margin-bottom: 1rem
- // Sizes
- &.are-medium
- .tag:not(.is-normal):not(.is-large)
- font-size: $size-normal
- &.are-large
- .tag:not(.is-normal):not(.is-medium)
- font-size: $size-medium
- &.is-centered
- justify-content: center
- .tag
- margin-right: 0.25rem
- margin-left: 0.25rem
- &.is-right
- justify-content: flex-end
- .tag
- &:not(:first-child)
- margin-left: 0.5rem
- &:not(:last-child)
- margin-right: 0
- &.has-addons
- .tag
- +ltr-property("margin", 0)
- &:not(:first-child)
- +ltr-property("margin", 0, false)
- +ltr
- border-top-left-radius: 0
- border-bottom-left-radius: 0
- +rtl
- border-top-right-radius: 0
- border-bottom-right-radius: 0
- &:not(:last-child)
- +ltr
- border-top-right-radius: 0
- border-bottom-right-radius: 0
- +rtl
- border-top-left-radius: 0
- border-bottom-left-radius: 0
-
-.tag:not(body)
- align-items: center
- background-color: $tag-background-color
- border-radius: $tag-radius
- color: $tag-color
- display: inline-flex
- font-size: $size-small
- height: 2em
- justify-content: center
- line-height: 1.5
- padding-left: 0.75em
- padding-right: 0.75em
- white-space: nowrap
- .delete
- +ltr-property("margin", 0.25rem, false)
- +ltr-property("margin", -0.375rem)
- // Colors
- @each $name, $pair in $tag-colors
- $color: nth($pair, 1)
- $color-invert: nth($pair, 2)
- &.is-#{$name}
- background-color: $color
- color: $color-invert
- // If a light and dark colors are provided
- @if length($pair) > 3
- $color-light: nth($pair, 3)
- $color-dark: nth($pair, 4)
- &.is-light
- background-color: $color-light
- color: $color-dark
- // Sizes
- &.is-normal
- font-size: $size-small
- &.is-medium
- font-size: $size-normal
- &.is-large
- font-size: $size-medium
- .icon
- &:first-child:not(:last-child)
- +ltr-property("margin", -0.375em, false)
- +ltr-property("margin", 0.1875em)
- &:last-child:not(:first-child)
- +ltr-property("margin", 0.1875em, false)
- +ltr-property("margin", -0.375em)
- &:first-child:last-child
- +ltr-property("margin", -0.375em, false)
- +ltr-property("margin", -0.375em)
- // Modifiers
- &.is-delete
- +ltr-property("margin", $tag-delete-margin, false)
- padding: 0
- position: relative
- width: 2em
- &::before,
- &::after
- background-color: currentColor
- content: ""
- display: block
- left: 50%
- position: absolute
- top: 50%
- transform: translateX(-50%) translateY(-50%) rotate(45deg)
- transform-origin: center center
- &::before
- height: 1px
- width: 50%
- &::after
- height: 50%
- width: 1px
- &:hover,
- &:focus
- background-color: darken($tag-background-color, 5%)
- &:active
- background-color: darken($tag-background-color, 10%)
- &.is-rounded
- border-radius: $radius-rounded
-
-a.tag
- &:hover
- text-decoration: underline
--- /dev/null
+@import "../utilities/mixins";
+
+$tag-background-color: $background !default;
+$tag-color: $text !default;
+$tag-radius: $radius !default;
+$tag-delete-margin: 1px !default;
+
+$tag-colors: $colors !default;
+
+.tags {
+ align-items: center;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+
+ .tag {
+ margin-bottom: 0.5rem;
+
+ &:not(:last-child) {
+ @include ltr-property("margin", 0.5rem);
+ }
+ }
+
+ &:last-child {
+ margin-bottom: -0.5rem;
+ }
+
+ &:not(:last-child) {
+ margin-bottom: 1rem;
+ }
+
+ // Sizes
+ &.are-medium {
+ .tag:not(.is-normal):not(.is-large) {
+ font-size: $size-normal;
+ }
+ }
+
+ &.are-large {
+ .tag:not(.is-normal):not(.is-medium) {
+ font-size: $size-medium;
+ }
+ }
+
+ &.is-centered {
+ justify-content: center;
+
+ .tag {
+ margin-right: 0.25rem;
+ margin-left: 0.25rem;
+ }
+ }
+
+ &.is-right {
+ justify-content: flex-end;
+
+ .tag {
+ &:not(:first-child) {
+ margin-left: 0.5rem;
+ }
+
+ &:not(:last-child) {
+ margin-right: 0;
+ }
+ }
+ }
+
+ &.has-addons {
+ .tag {
+ @include ltr-property("margin", 0);
+
+ &:not(:first-child) {
+ @include ltr-property("margin", 0, false);
+ @include ltr {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+
+
+ @include rtl {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+ }
+
+ &:not(:last-child) {
+ @include ltr {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+
+
+ @include rtl {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+ }
+ }
+ }
+ }
+}
+
+.tag:not(body) {
+ align-items: center;
+ background-color: $tag-background-color;
+ border-radius: $tag-radius;
+ color: $tag-color;
+ display: inline-flex;
+ font-size: $size-small;
+ height: 2em;
+ justify-content: center;
+ line-height: 1.5;
+ padding-left: 0.75em;
+ padding-right: 0.75em;
+ white-space: nowrap;
+
+ .delete {
+ @include ltr-property("margin", 0.25rem, false);
+ @include ltr-property("margin", -0.375rem);
+ }
+
+ // Colors
+ @each $name, $pair in $tag-colors {
+ $color: nth($pair, 1);
+ $color-invert: nth($pair, 2);
+
+ &.is-#{$name} {
+ background-color: $color;
+ color: $color-invert;
+
+ // If a light and dark colors are provided
+ @if length($pair) > 3 {
+ $color-light: nth($pair, 3);
+ $color-dark: nth($pair, 4);
+
+ &.is-light {
+ background-color: $color-light;
+ color: $color-dark;
+ }
+ }
+ }
+ }
+
+ // Sizes
+ &.is-normal {
+ font-size: $size-small;
+ }
+
+ &.is-medium {
+ font-size: $size-normal;
+ }
+
+ &.is-large {
+ font-size: $size-medium;
+ }
+
+ .icon {
+ &:first-child:not(:last-child) {
+ @include ltr-property("margin", -0.375em, false);
+ @include ltr-property("margin", 0.1875em);
+ }
+
+ &:last-child:not(:first-child) {
+ @include ltr-property("margin", 0.1875em, false);
+ @include ltr-property("margin", -0.375em);
+ }
+
+ &:first-child:last-child {
+ @include ltr-property("margin", -0.375em, false);
+ @include ltr-property("margin", -0.375em);
+ }
+ }
+
+ // Modifiers
+ &.is-delete {
+ @include ltr-property("margin", $tag-delete-margin, false);
+
+ padding: 0;
+ position: relative;
+ width: 2em;
+
+ &::before,
+ &::after {
+ background-color: currentColor;
+ content: "";
+ display: block;
+ left: 50%;
+ position: absolute;
+ top: 50%;
+ transform: translateX(-50%) translateY(-50%) rotate(45deg);
+ transform-origin: center center;
+ }
+
+ &::before {
+ height: 1px;
+ width: 50%;
+ }
+
+ &::after {
+ height: 50%;
+ width: 1px;
+ }
+
+ &:hover,
+ &:focus {
+ background-color: darken($tag-background-color, 5%);
+ }
+
+ &:active {
+ background-color: darken($tag-background-color, 10%);
+ }
+ }
+
+ &.is-rounded {
+ border-radius: $radius-rounded;
+ }
+}
+
+a.tag {
+ &:hover {
+ text-decoration: underline;
+ }
+}
+++ /dev/null
-@import "../utilities/mixins"
-
-$title-color: $text-strong !default
-$title-family: false !default
-$title-size: $size-3 !default
-$title-weight: $weight-semibold !default
-$title-line-height: 1.125 !default
-$title-strong-color: inherit !default
-$title-strong-weight: inherit !default
-$title-sub-size: 0.75em !default
-$title-sup-size: 0.75em !default
-
-$subtitle-color: $text !default
-$subtitle-family: false !default
-$subtitle-size: $size-5 !default
-$subtitle-weight: $weight-normal !default
-$subtitle-line-height: 1.25 !default
-$subtitle-strong-color: $text-strong !default
-$subtitle-strong-weight: $weight-semibold !default
-$subtitle-negative-margin: -1.25rem !default
-
-.title,
-.subtitle
- @extend %block
- word-break: break-word
- em,
- span
- font-weight: inherit
- sub
- font-size: $title-sub-size
- sup
- font-size: $title-sup-size
- .tag
- vertical-align: middle
-
-.title
- color: $title-color
- @if $title-family
- font-family: $title-family
- font-size: $title-size
- font-weight: $title-weight
- line-height: $title-line-height
- strong
- color: $title-strong-color
- font-weight: $title-strong-weight
- &:not(.is-spaced) + .subtitle
- margin-top: $subtitle-negative-margin
- // Sizes
- @each $size in $sizes
- $i: index($sizes, $size)
- &.is-#{$i}
- font-size: $size
-
-.subtitle
- color: $subtitle-color
- @if $subtitle-family
- font-family: $subtitle-family
- font-size: $subtitle-size
- font-weight: $subtitle-weight
- line-height: $subtitle-line-height
- strong
- color: $subtitle-strong-color
- font-weight: $subtitle-strong-weight
- &:not(.is-spaced) + .title
- margin-top: $subtitle-negative-margin
- // Sizes
- @each $size in $sizes
- $i: index($sizes, $size)
- &.is-#{$i}
- font-size: $size
--- /dev/null
+@import "../utilities/mixins";
+
+$title-color: $text-strong !default;
+$title-family: false !default;
+$title-size: $size-3 !default;
+$title-weight: $weight-semibold !default;
+$title-line-height: 1.125 !default;
+$title-strong-color: inherit !default;
+$title-strong-weight: inherit !default;
+$title-sub-size: 0.75em !default;
+$title-sup-size: 0.75em !default;
+
+$subtitle-color: $text !default;
+$subtitle-family: false !default;
+$subtitle-size: $size-5 !default;
+$subtitle-weight: $weight-normal !default;
+$subtitle-line-height: 1.25 !default;
+$subtitle-strong-color: $text-strong !default;
+$subtitle-strong-weight: $weight-semibold !default;
+$subtitle-negative-margin: -1.25rem !default;
+
+.title,
+.subtitle {
+ @extend %block;
+
+ word-break: break-word;
+
+ em,
+ span {
+ font-weight: inherit;
+ }
+
+ sub {
+ font-size: $title-sub-size;
+ }
+
+ sup {
+ font-size: $title-sup-size;
+ }
+
+ .tag {
+ vertical-align: middle;
+ }
+}
+
+.title {
+ color: $title-color;
+
+ @if $title-family {
+ font-family: $title-family;
+ }
+
+ font-size: $title-size;
+ font-weight: $title-weight;
+ line-height: $title-line-height;
+
+ strong {
+ color: $title-strong-color;
+ font-weight: $title-strong-weight;
+ }
+
+ &:not(.is-spaced) + .subtitle {
+ margin-top: $subtitle-negative-margin;
+ }
+
+ // Sizes
+ @each $size in $sizes {
+ $i: index($sizes, $size);
+
+ &.is-#{$i} {
+ font-size: $size;
+ }
+ }
+}
+
+.subtitle {
+ color: $subtitle-color;
+
+ @if $subtitle-family {
+ font-family: $subtitle-family;
+ }
+
+ font-size: $subtitle-size;
+ font-weight: $subtitle-weight;
+ line-height: $subtitle-line-height;
+
+ strong {
+ color: $subtitle-strong-color;
+ font-weight: $subtitle-strong-weight;
+ }
+
+ &:not(.is-spaced) + .title {
+ margin-top: $subtitle-negative-margin;
+ }
+
+ // Sizes
+ @each $size in $sizes {
+ $i: index($sizes, $size);
+
+ &.is-#{$i} {
+ font-size: $size;
+ }
+ }
+}
+++ /dev/null
-/* Bulma Form */
-@charset "utf-8"
-
-@import "shared"
-@import "input-textarea"
-@import "checkbox-radio"
-@import "select"
-@import "file"
-@import "tools"
--- /dev/null
+/* Bulma Form */
+@charset "utf-8";
+
+@import "shared";
+@import "input-textarea";
+@import "checkbox-radio";
+@import "select";
+@import "file";
+@import "tools";
+++ /dev/null
-%checkbox-radio
- cursor: pointer
- display: inline-block
- line-height: 1.25
- position: relative
- input
- cursor: pointer
- &:hover
- color: $input-hover-color
- &[disabled],
- fieldset[disabled] &,
- input[disabled]
- color: $input-disabled-color
- cursor: not-allowed
-
-.checkbox
- @extend %checkbox-radio
-
-.radio
- @extend %checkbox-radio
- & + .radio
- +ltr-property("margin", 0.5em, false)
--- /dev/null
+%checkbox-radio {
+ cursor: pointer;
+ display: inline-block;
+ line-height: 1.25;
+ position: relative;
+
+ input {
+ cursor: pointer;
+ }
+
+ &:hover {
+ color: $input-hover-color;
+ }
+
+ &[disabled],
+ fieldset[disabled] &,
+ input[disabled] {
+ color: $input-disabled-color;
+ cursor: not-allowed;
+ }
+}
+
+.checkbox {
+ @extend %checkbox-radio;
+}
+
+.radio {
+ @extend %checkbox-radio;
+
+ & + .radio {
+ @include ltr-property("margin", 0.5em, false);
+ }
+}
+++ /dev/null
-$file-border-color: $border !default
-$file-radius: $radius !default
-
-$file-cta-background-color: $scheme-main-ter !default
-$file-cta-color: $text !default
-$file-cta-hover-color: $text-strong !default
-$file-cta-active-color: $text-strong !default
-
-$file-name-border-color: $border !default
-$file-name-border-style: solid !default
-$file-name-border-width: 1px 1px 1px 0 !default
-$file-name-max-width: 16em !default
-
-$file-colors: $form-colors !default
-
-.file
- @extend %unselectable
- align-items: stretch
- display: flex
- justify-content: flex-start
- position: relative
- // Colors
- @each $name, $pair in $file-colors
- $color: nth($pair, 1)
- $color-invert: nth($pair, 2)
- &.is-#{$name}
- .file-cta
- background-color: $color
- border-color: transparent
- color: $color-invert
- &:hover,
- &.is-hovered
- .file-cta
- background-color: bulmaDarken($color, 2.5%)
- border-color: transparent
- color: $color-invert
- &:focus,
- &.is-focused
- .file-cta
- border-color: transparent
- box-shadow: 0 0 0.5em bulmaRgba($color, 0.25)
- color: $color-invert
- &:active,
- &.is-active
- .file-cta
- background-color: bulmaDarken($color, 5%)
- border-color: transparent
- color: $color-invert
- // Sizes
- &.is-small
- font-size: $size-small
- &.is-normal
- font-size: $size-normal
- &.is-medium
- font-size: $size-medium
- .file-icon
- .fa
- font-size: 21px
- &.is-large
- font-size: $size-large
- .file-icon
- .fa
- font-size: 28px
- // Modifiers
- &.has-name
- .file-cta
- border-bottom-right-radius: 0
- border-top-right-radius: 0
- .file-name
- border-bottom-left-radius: 0
- border-top-left-radius: 0
- &.is-empty
- .file-cta
- border-radius: $file-radius
- .file-name
- display: none
- &.is-boxed
- .file-label
- flex-direction: column
- .file-cta
- flex-direction: column
- height: auto
- padding: 1em 3em
- .file-name
- border-width: 0 1px 1px
- .file-icon
- height: 1.5em
- width: 1.5em
- .fa
- font-size: 21px
- &.is-small
- .file-icon .fa
- font-size: 14px
- &.is-medium
- .file-icon .fa
- font-size: 28px
- &.is-large
- .file-icon .fa
- font-size: 35px
- &.has-name
- .file-cta
- border-radius: $file-radius $file-radius 0 0
- .file-name
- border-radius: 0 0 $file-radius $file-radius
- border-width: 0 1px 1px
- &.is-centered
- justify-content: center
- &.is-fullwidth
- .file-label
- width: 100%
- .file-name
- flex-grow: 1
- max-width: none
- &.is-right
- justify-content: flex-end
- .file-cta
- border-radius: 0 $file-radius $file-radius 0
- .file-name
- border-radius: $file-radius 0 0 $file-radius
- border-width: 1px 0 1px 1px
- order: -1
-
-.file-label
- align-items: stretch
- display: flex
- cursor: pointer
- justify-content: flex-start
- overflow: hidden
- position: relative
- &:hover
- .file-cta
- background-color: bulmaDarken($file-cta-background-color, 2.5%)
- color: $file-cta-hover-color
- .file-name
- border-color: bulmaDarken($file-name-border-color, 2.5%)
- &:active
- .file-cta
- background-color: bulmaDarken($file-cta-background-color, 5%)
- color: $file-cta-active-color
- .file-name
- border-color: bulmaDarken($file-name-border-color, 5%)
-
-.file-input
- height: 100%
- left: 0
- opacity: 0
- outline: none
- position: absolute
- top: 0
- width: 100%
-
-.file-cta,
-.file-name
- @extend %control
- border-color: $file-border-color
- border-radius: $file-radius
- font-size: 1em
- padding-left: 1em
- padding-right: 1em
- white-space: nowrap
-
-.file-cta
- background-color: $file-cta-background-color
- color: $file-cta-color
-
-.file-name
- border-color: $file-name-border-color
- border-style: $file-name-border-style
- border-width: $file-name-border-width
- display: block
- max-width: $file-name-max-width
- overflow: hidden
- text-align: inherit
- text-overflow: ellipsis
-
-.file-icon
- align-items: center
- display: flex
- height: 1em
- justify-content: center
- +ltr-property("margin", 0.5em)
- width: 1em
- .fa
- font-size: 14px
--- /dev/null
+$file-border-color: $border !default;
+$file-radius: $radius !default;
+
+$file-cta-background-color: $scheme-main-ter !default;
+$file-cta-color: $text !default;
+$file-cta-hover-color: $text-strong !default;
+$file-cta-active-color: $text-strong !default;
+
+$file-name-border-color: $border !default;
+$file-name-border-style: solid !default;
+$file-name-border-width: 1px 1px 1px 0 !default;
+$file-name-max-width: 16em !default;
+
+$file-colors: $form-colors !default;
+
+.file {
+ @extend %unselectable;
+
+ align-items: stretch;
+ display: flex;
+ justify-content: flex-start;
+ position: relative;
+
+ // Colors
+ @each $name, $pair in $file-colors {
+ $color: nth($pair, 1);
+ $color-invert: nth($pair, 2);
+
+ &.is-#{$name} {
+ .file-cta {
+ background-color: $color;
+ border-color: transparent;
+ color: $color-invert;
+ }
+
+ &:hover,
+ &.is-hovered {
+ .file-cta {
+ background-color: bulmaDarken($color, 2.5%);
+ border-color: transparent;
+ color: $color-invert;
+ }
+ }
+
+ &:focus,
+ &.is-focused {
+ .file-cta {
+ border-color: transparent;
+ box-shadow: 0 0 0.5em bulmaRgba($color, 0.25);
+ color: $color-invert;
+ }
+ }
+
+ &:active,
+ &.is-active {
+ .file-cta {
+ background-color: bulmaDarken($color, 5%);
+ border-color: transparent;
+ color: $color-invert;
+ }
+ }
+ }
+ }
+
+ // Sizes
+ &.is-small {
+ font-size: $size-small;
+ }
+
+ &.is-normal {
+ font-size: $size-normal;
+ }
+
+ &.is-medium {
+ font-size: $size-medium;
+
+ .file-icon {
+ .fa {
+ font-size: 21px;
+ }
+ }
+ }
+
+ &.is-large {
+ font-size: $size-large;
+
+ .file-icon {
+ .fa {
+ font-size: 28px;
+ }
+ }
+ }
+
+ // Modifiers
+ &.has-name {
+ .file-cta {
+ border-bottom-right-radius: 0;
+ border-top-right-radius: 0;
+ }
+
+ .file-name {
+ border-bottom-left-radius: 0;
+ border-top-left-radius: 0;
+ }
+
+ &.is-empty {
+ .file-cta {
+ border-radius: $file-radius;
+ }
+
+ .file-name {
+ display: none;
+ }
+ }
+ }
+
+ &.is-boxed {
+ .file-label {
+ flex-direction: column;
+ }
+
+ .file-cta {
+ flex-direction: column;
+ height: auto;
+ padding: 1em 3em;
+ }
+
+ .file-name {
+ border-width: 0 1px 1px;
+ }
+
+ .file-icon {
+ height: 1.5em;
+ width: 1.5em;
+
+ .fa {
+ font-size: 21px;
+ }
+ }
+
+ &.is-small {
+ .file-icon .fa {
+ font-size: 14px;
+ }
+ }
+
+ &.is-medium {
+ .file-icon .fa {
+ font-size: 28px;
+ }
+ }
+
+ &.is-large {
+ .file-icon .fa {
+ font-size: 35px;
+ }
+ }
+
+ &.has-name {
+ .file-cta {
+ border-radius: $file-radius $file-radius 0 0;
+ }
+
+ .file-name {
+ border-radius: 0 0 $file-radius $file-radius;
+ border-width: 0 1px 1px;
+ }
+ }
+ }
+
+ &.is-centered {
+ justify-content: center;
+ }
+
+ &.is-fullwidth {
+ .file-label {
+ width: 100%;
+ }
+
+ .file-name {
+ flex-grow: 1;
+ max-width: none;
+ }
+ }
+
+ &.is-right {
+ justify-content: flex-end;
+
+ .file-cta {
+ border-radius: 0 $file-radius $file-radius 0;
+ }
+
+ .file-name {
+ border-radius: $file-radius 0 0 $file-radius;
+ border-width: 1px 0 1px 1px;
+ order: -1;
+ }
+ }
+}
+
+.file-label {
+ align-items: stretch;
+ display: flex;
+ cursor: pointer;
+ justify-content: flex-start;
+ overflow: hidden;
+ position: relative;
+
+ &:hover {
+ .file-cta {
+ background-color: bulmaDarken($file-cta-background-color, 2.5%);
+ color: $file-cta-hover-color;
+ }
+
+ .file-name {
+ border-color: bulmaDarken($file-name-border-color, 2.5%);
+ }
+ }
+
+ &:active {
+ .file-cta {
+ background-color: bulmaDarken($file-cta-background-color, 5%);
+ color: $file-cta-active-color;
+ }
+
+ .file-name {
+ border-color: bulmaDarken($file-name-border-color, 5%);
+ }
+ }
+}
+
+.file-input {
+ height: 100%;
+ left: 0;
+ opacity: 0;
+ outline: none;
+ position: absolute;
+ top: 0;
+ width: 100%;
+}
+
+.file-cta,
+.file-name {
+ @extend %control;
+
+ border-color: $file-border-color;
+ border-radius: $file-radius;
+ font-size: 1em;
+ padding-left: 1em;
+ padding-right: 1em;
+ white-space: nowrap;
+}
+
+.file-cta {
+ background-color: $file-cta-background-color;
+ color: $file-cta-color;
+}
+
+.file-name {
+ border-color: $file-name-border-color;
+ border-style: $file-name-border-style;
+ border-width: $file-name-border-width;
+ display: block;
+ max-width: $file-name-max-width;
+ overflow: hidden;
+ text-align: inherit;
+ text-overflow: ellipsis;
+}
+
+.file-icon {
+ align-items: center;
+ display: flex;
+ height: 1em;
+ justify-content: center;
+
+ @include ltr-property("margin", 0.5em);
+
+ width: 1em;
+
+ .fa {
+ font-size: 14px;
+ }
+}
+++ /dev/null
-$textarea-padding: $control-padding-horizontal !default
-$textarea-max-height: 40em !default
-$textarea-min-height: 8em !default
-
-$textarea-colors: $form-colors !default
-
-%input-textarea
- @extend %input
- box-shadow: $input-shadow
- max-width: 100%
- width: 100%
- &[readonly]
- box-shadow: none
- // Colors
- @each $name, $pair in $textarea-colors
- $color: nth($pair, 1)
- &.is-#{$name}
- border-color: $color
- &:focus,
- &.is-focused,
- &:active,
- &.is-active
- box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
- // Sizes
- &.is-small
- +control-small
- &.is-medium
- +control-medium
- &.is-large
- +control-large
- // Modifiers
- &.is-fullwidth
- display: block
- width: 100%
- &.is-inline
- display: inline
- width: auto
-
-.input
- @extend %input-textarea
- &.is-rounded
- border-radius: $radius-rounded
- padding-left: calc(#{$control-padding-horizontal} + 0.375em)
- padding-right: calc(#{$control-padding-horizontal} + 0.375em)
- &.is-static
- background-color: transparent
- border-color: transparent
- box-shadow: none
- padding-left: 0
- padding-right: 0
-
-.textarea
- @extend %input-textarea
- display: block
- max-width: 100%
- min-width: 100%
- padding: $textarea-padding
- resize: vertical
- &:not([rows])
- max-height: $textarea-max-height
- min-height: $textarea-min-height
- &[rows]
- height: initial
- // Modifiers
- &.has-fixed-size
- resize: none
--- /dev/null
+$textarea-padding: $control-padding-horizontal !default;
+$textarea-max-height: 40em !default;
+$textarea-min-height: 8em !default;
+
+$textarea-colors: $form-colors !default;
+
+%input-textarea {
+ @extend %input;
+
+ box-shadow: $input-shadow;
+ max-width: 100%;
+ width: 100%;
+
+ &[readonly] {
+ box-shadow: none;
+ }
+
+ // Colors
+ @each $name, $pair in $textarea-colors {
+ $color: nth($pair, 1);
+
+ &.is-#{$name} {
+ border-color: $color;
+
+ &:focus,
+ &.is-focused,
+ &:active,
+ &.is-active {
+ box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25);
+ }
+ }
+ }
+
+ // Sizes
+ &.is-small {
+ @include control-small;
+ }
+
+ &.is-medium {
+ @include control-medium;
+ }
+
+ &.is-large {
+ @include control-large;
+ }
+
+ // Modifiers
+ &.is-fullwidth {
+ display: block;
+ width: 100%;
+ }
+
+ &.is-inline {
+ display: inline;
+ width: auto;
+ }
+}
+
+.input {
+ @extend %input-textarea;
+
+ &.is-rounded {
+ border-radius: $radius-rounded;
+ padding-left: calc(#{$control-padding-horizontal} + 0.375em);
+ padding-right: calc(#{$control-padding-horizontal} + 0.375em);
+ }
+
+ &.is-static {
+ background-color: transparent;
+ border-color: transparent;
+ box-shadow: none;
+ padding-left: 0;
+ padding-right: 0;
+ }
+}
+
+.textarea {
+ @extend %input-textarea;
+
+ display: block;
+ max-width: 100%;
+ min-width: 100%;
+ padding: $textarea-padding;
+ resize: vertical;
+
+ &:not([rows]) {
+ max-height: $textarea-max-height;
+ min-height: $textarea-min-height;
+ }
+
+ &[rows] {
+ height: initial;
+ }
+
+ // Modifiers
+ &.has-fixed-size {
+ resize: none;
+ }
+}
+++ /dev/null
-$select-colors: $form-colors !default
-
-.select
- display: inline-block
- max-width: 100%
- position: relative
- vertical-align: top
- &:not(.is-multiple)
- height: $input-height
- &:not(.is-multiple):not(.is-loading)
- &::after
- @extend %arrow
- border-color: $input-arrow
- +ltr-position(1.125em)
- z-index: 4
- &.is-rounded
- select
- border-radius: $radius-rounded
- +ltr-property("padding", 1em, false)
- select
- @extend %input
- cursor: pointer
- display: block
- font-size: 1em
- max-width: 100%
- outline: none
- &::-ms-expand
- display: none
- &[disabled]:hover,
- fieldset[disabled] &:hover
- border-color: $input-disabled-border-color
- &:not([multiple])
- +ltr-property("padding", 2.5em)
- &[multiple]
- height: auto
- padding: 0
- option
- padding: 0.5em 1em
- // States
- &:not(.is-multiple):not(.is-loading):hover
- &::after
- border-color: $input-hover-color
- // Colors
- @each $name, $pair in $select-colors
- $color: nth($pair, 1)
- &.is-#{$name}
- &:not(:hover)::after
- border-color: $color
- select
- border-color: $color
- &:hover,
- &.is-hovered
- border-color: bulmaDarken($color, 5%)
- &:focus,
- &.is-focused,
- &:active,
- &.is-active
- box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
- // Sizes
- &.is-small
- +control-small
- &.is-medium
- +control-medium
- &.is-large
- +control-large
- // Modifiers
- &.is-disabled
- &::after
- border-color: $input-disabled-color !important
- opacity: 0.5
- &.is-fullwidth
- width: 100%
- select
- width: 100%
- &.is-loading
- &::after
- @extend %loader
- margin-top: 0
- position: absolute
- +ltr-position(0.625em)
- top: 0.625em
- transform: none
- &.is-small:after
- font-size: $size-small
- &.is-medium:after
- font-size: $size-medium
- &.is-large:after
- font-size: $size-large
--- /dev/null
+$select-colors: $form-colors !default;
+
+.select {
+ display: inline-block;
+ max-width: 100%;
+ position: relative;
+ vertical-align: top;
+
+ &:not(.is-multiple) {
+ height: $input-height;
+ }
+
+ &:not(.is-multiple):not(.is-loading) {
+ &::after {
+ @extend %arrow;
+
+ border-color: $input-arrow;
+
+ @include ltr-position(1.125em);
+
+ z-index: 4;
+ }
+ }
+
+ &.is-rounded {
+ select {
+ border-radius: $radius-rounded;
+
+ @include ltr-property("padding", 1em, false);
+ }
+ }
+
+ select {
+ @extend %input;
+
+ cursor: pointer;
+ display: block;
+ font-size: 1em;
+ max-width: 100%;
+ outline: none;
+
+ &::-ms-expand {
+ display: none;
+ }
+
+ &[disabled]:hover,
+ fieldset[disabled] &:hover {
+ border-color: $input-disabled-border-color;
+ }
+
+ &:not([multiple]) {
+ @include ltr-property("padding", 2.5em);
+ }
+
+ &[multiple] {
+ height: auto;
+ padding: 0;
+
+ option {
+ padding: 0.5em 1em;
+ }
+ }
+ }
+
+ // States
+ &:not(.is-multiple):not(.is-loading):hover {
+ &::after {
+ border-color: $input-hover-color;
+ }
+ }
+
+ // Colors
+ @each $name, $pair in $select-colors {
+ $color: nth($pair, 1);
+
+ &.is-#{$name} {
+ &:not(:hover)::after {
+ border-color: $color;
+ }
+
+ select {
+ border-color: $color;
+
+ &:hover,
+ &.is-hovered {
+ border-color: bulmaDarken($color, 5%);
+ }
+
+ &:focus,
+ &.is-focused,
+ &:active,
+ &.is-active {
+ box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25);
+ }
+ }
+ }
+ }
+
+ // Sizes
+ &.is-small {
+ @include control-small;
+ }
+
+ &.is-medium {
+ @include control-medium;
+ }
+
+ &.is-large {
+ @include control-large;
+ }
+
+ // Modifiers
+ &.is-disabled {
+ &::after {
+ border-color: $input-disabled-color !important;
+ opacity: 0.5;
+ }
+ }
+
+ &.is-fullwidth {
+ width: 100%;
+
+ select {
+ width: 100%;
+ }
+ }
+
+ &.is-loading {
+ &::after {
+ @extend %loader;
+
+ margin-top: 0;
+ position: absolute;
+
+ @include ltr-position(0.625em);
+
+ top: 0.625em;
+ transform: none;
+ }
+
+ &.is-small:after {
+ font-size: $size-small;
+ }
+
+ &.is-medium:after {
+ font-size: $size-medium;
+ }
+
+ &.is-large:after {
+ font-size: $size-large;
+ }
+ }
+}
+++ /dev/null
-@import "../utilities/controls"
-@import "../utilities/mixins"
-
-$form-colors: $colors !default
-
-$input-color: $text-strong !default
-$input-background-color: $scheme-main !default
-$input-border-color: $border !default
-$input-height: $control-height !default
-$input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default
-$input-placeholder-color: bulmaRgba($input-color, 0.3) !default
-
-$input-hover-color: $text-strong !default
-$input-hover-border-color: $border-hover !default
-
-$input-focus-color: $text-strong !default
-$input-focus-border-color: $link !default
-$input-focus-box-shadow-size: 0 0 0 0.125em !default
-$input-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
-
-$input-disabled-color: $text-light !default
-$input-disabled-background-color: $background !default
-$input-disabled-border-color: $background !default
-$input-disabled-placeholder-color: bulmaRgba($input-disabled-color, 0.3) !default
-
-$input-arrow: $link !default
-
-$input-icon-color: $border !default
-$input-icon-active-color: $text !default
-
-$input-radius: $radius !default
-
-=input
- @extend %control
- background-color: $input-background-color
- border-color: $input-border-color
- border-radius: $input-radius
- color: $input-color
- +placeholder
- color: $input-placeholder-color
- &:hover,
- &.is-hovered
- border-color: $input-hover-border-color
- &:focus,
- &.is-focused,
- &:active,
- &.is-active
- border-color: $input-focus-border-color
- box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
- &[disabled],
- fieldset[disabled] &
- background-color: $input-disabled-background-color
- border-color: $input-disabled-border-color
- box-shadow: none
- color: $input-disabled-color
- +placeholder
- color: $input-disabled-placeholder-color
-
-%input
- +input
--- /dev/null
+@import "../utilities/controls";
+@import "../utilities/mixins";
+
+$form-colors: $colors !default;
+
+$input-color: $text-strong !default;
+$input-background-color: $scheme-main !default;
+$input-border-color: $border !default;
+$input-height: $control-height !default;
+$input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default;
+$input-placeholder-color: bulmaRgba($input-color, 0.3) !default;
+
+$input-hover-color: $text-strong !default;
+$input-hover-border-color: $border-hover !default;
+
+$input-focus-color: $text-strong !default;
+$input-focus-border-color: $link !default;
+$input-focus-box-shadow-size: 0 0 0 0.125em !default;
+$input-focus-box-shadow-color: bulmaRgba($link, 0.25) !default;
+
+$input-disabled-color: $text-light !default;
+$input-disabled-background-color: $background !default;
+$input-disabled-border-color: $background !default;
+$input-disabled-placeholder-color: bulmaRgba($input-disabled-color, 0.3) !default;
+
+$input-arrow: $link !default;
+
+$input-icon-color: $border !default;
+$input-icon-active-color: $text !default;
+
+$input-radius: $radius !default;
+
+@mixin input {
+ @extend %control;
+
+ background-color: $input-background-color;
+ border-color: $input-border-color;
+ border-radius: $input-radius;
+ color: $input-color;
+
+ @include placeholder {
+ color: $input-placeholder-color;
+ }
+
+
+ &:hover,
+ &.is-hovered {
+ border-color: $input-hover-border-color;
+ }
+
+ &:focus,
+ &.is-focused,
+ &:active,
+ &.is-active {
+ border-color: $input-focus-border-color;
+ box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color;
+ }
+
+ &[disabled],
+ fieldset[disabled] & {
+ background-color: $input-disabled-background-color;
+ border-color: $input-disabled-border-color;
+ box-shadow: none;
+ color: $input-disabled-color;
+
+ @include placeholder {
+ color: $input-disabled-placeholder-color;
+ }
+ }
+}
+
+%input {
+ @include input;
+}
+++ /dev/null
-$label-color: $text-strong !default
-$label-weight: $weight-bold !default
-
-$help-size: $size-small !default
-
-$label-colors: $form-colors !default
-
-.label
- color: $label-color
- display: block
- font-size: $size-normal
- font-weight: $label-weight
- &:not(:last-child)
- margin-bottom: 0.5em
- // Sizes
- &.is-small
- font-size: $size-small
- &.is-medium
- font-size: $size-medium
- &.is-large
- font-size: $size-large
-
-.help
- display: block
- font-size: $help-size
- margin-top: 0.25rem
- @each $name, $pair in $label-colors
- $color: nth($pair, 1)
- &.is-#{$name}
- color: $color
-
-// Containers
-
-.field
- &:not(:last-child)
- margin-bottom: 0.75rem
- // Modifiers
- &.has-addons
- display: flex
- justify-content: flex-start
- .control
- &:not(:last-child)
- +ltr-property("margin", -1px)
- &:not(:first-child):not(:last-child)
- .button,
- .input,
- .select select
- border-radius: 0
- &:first-child:not(:only-child)
- .button,
- .input,
- .select select
- +ltr
- border-bottom-right-radius: 0
- border-top-right-radius: 0
- +rtl
- border-bottom-left-radius: 0
- border-top-left-radius: 0
- &:last-child:not(:only-child)
- .button,
- .input,
- .select select
- +ltr
- border-bottom-left-radius: 0
- border-top-left-radius: 0
- +rtl
- border-bottom-right-radius: 0
- border-top-right-radius: 0
- .button,
- .input,
- .select select
- &:not([disabled])
- &:hover,
- &.is-hovered
- z-index: 2
- &:focus,
- &.is-focused,
- &:active,
- &.is-active
- z-index: 3
- &:hover
- z-index: 4
- &.is-expanded
- flex-grow: 1
- flex-shrink: 1
- &.has-addons-centered
- justify-content: center
- &.has-addons-right
- justify-content: flex-end
- &.has-addons-fullwidth
- .control
- flex-grow: 1
- flex-shrink: 0
- &.is-grouped
- display: flex
- justify-content: flex-start
- & > .control
- flex-shrink: 0
- &:not(:last-child)
- margin-bottom: 0
- +ltr-property("margin", 0.75rem)
- &.is-expanded
- flex-grow: 1
- flex-shrink: 1
- &.is-grouped-centered
- justify-content: center
- &.is-grouped-right
- justify-content: flex-end
- &.is-grouped-multiline
- flex-wrap: wrap
- & > .control
- &:last-child,
- &:not(:last-child)
- margin-bottom: 0.75rem
- &:last-child
- margin-bottom: -0.75rem
- &:not(:last-child)
- margin-bottom: 0
- &.is-horizontal
- +tablet
- display: flex
-
-.field-label
- .label
- font-size: inherit
- +mobile
- margin-bottom: 0.5rem
- +tablet
- flex-basis: 0
- flex-grow: 1
- flex-shrink: 0
- +ltr-property("margin", 1.5rem)
- text-align: right
- &.is-small
- font-size: $size-small
- padding-top: 0.375em
- &.is-normal
- padding-top: 0.375em
- &.is-medium
- font-size: $size-medium
- padding-top: 0.375em
- &.is-large
- font-size: $size-large
- padding-top: 0.375em
-
-.field-body
- .field .field
- margin-bottom: 0
- +tablet
- display: flex
- flex-basis: 0
- flex-grow: 5
- flex-shrink: 1
- .field
- margin-bottom: 0
- & > .field
- flex-shrink: 1
- &:not(.is-narrow)
- flex-grow: 1
- &:not(:last-child)
- +ltr-property("margin", 0.75rem)
-
-.control
- box-sizing: border-box
- clear: both
- font-size: $size-normal
- position: relative
- text-align: inherit
- // Modifiers
- &.has-icons-left,
- &.has-icons-right
- .input,
- .select
- &:focus
- & ~ .icon
- color: $input-icon-active-color
- &.is-small ~ .icon
- font-size: $size-small
- &.is-medium ~ .icon
- font-size: $size-medium
- &.is-large ~ .icon
- font-size: $size-large
- .icon
- color: $input-icon-color
- height: $input-height
- pointer-events: none
- position: absolute
- top: 0
- width: $input-height
- z-index: 4
- &.has-icons-left
- .input,
- .select select
- padding-left: $input-height
- .icon.is-left
- left: 0
- &.has-icons-right
- .input,
- .select select
- padding-right: $input-height
- .icon.is-right
- right: 0
- &.is-loading
- &::after
- @extend %loader
- position: absolute !important
- +ltr-position(0.625em)
- top: 0.625em
- z-index: 4
- &.is-small:after
- font-size: $size-small
- &.is-medium:after
- font-size: $size-medium
- &.is-large:after
- font-size: $size-large
--- /dev/null
+$label-color: $text-strong !default;
+$label-weight: $weight-bold !default;
+
+$help-size: $size-small !default;
+
+$label-colors: $form-colors !default;
+
+.label {
+ color: $label-color;
+ display: block;
+ font-size: $size-normal;
+ font-weight: $label-weight;
+
+ &:not(:last-child) {
+ margin-bottom: 0.5em;
+ }
+
+ // Sizes
+ &.is-small {
+ font-size: $size-small;
+ }
+
+ &.is-medium {
+ font-size: $size-medium;
+ }
+
+ &.is-large {
+ font-size: $size-large;
+ }
+}
+
+.help {
+ display: block;
+ font-size: $help-size;
+ margin-top: 0.25rem;
+
+ @each $name, $pair in $label-colors {
+ $color: nth($pair, 1);
+
+ &.is-#{$name} {
+ color: $color;
+ }
+ }
+}
+
+// Containers
+
+.field {
+ &:not(:last-child) {
+ margin-bottom: 0.75rem;
+ }
+
+ // Modifiers
+ &.has-addons {
+ display: flex;
+ justify-content: flex-start;
+
+ .control {
+ &:not(:last-child) {
+ @include ltr-property("margin", -1px);
+ }
+
+ &:not(:first-child):not(:last-child) {
+ .button,
+ .input,
+ .select select {
+ border-radius: 0;
+ }
+ }
+
+ &:first-child:not(:only-child) {
+ .button,
+ .input,
+ .select select {
+ @include ltr {
+ border-bottom-right-radius: 0;
+ border-top-right-radius: 0;
+ }
+
+
+ @include rtl {
+ border-bottom-left-radius: 0;
+ border-top-left-radius: 0;
+ }
+ }
+ }
+
+ &:last-child:not(:only-child) {
+ .button,
+ .input,
+ .select select {
+ @include ltr {
+ border-bottom-left-radius: 0;
+ border-top-left-radius: 0;
+ }
+
+
+ @include rtl {
+ border-bottom-right-radius: 0;
+ border-top-right-radius: 0;
+ }
+ }
+ }
+
+ .button,
+ .input,
+ .select select {
+ &:not([disabled]) {
+ &:hover,
+ &.is-hovered {
+ z-index: 2;
+ }
+
+ &:focus,
+ &.is-focused,
+ &:active,
+ &.is-active {
+ z-index: 3;
+
+ &:hover {
+ z-index: 4;
+ }
+ }
+ }
+ }
+
+ &.is-expanded {
+ flex-grow: 1;
+ flex-shrink: 1;
+ }
+ }
+
+ &.has-addons-centered {
+ justify-content: center;
+ }
+
+ &.has-addons-right {
+ justify-content: flex-end;
+ }
+
+ &.has-addons-fullwidth {
+ .control {
+ flex-grow: 1;
+ flex-shrink: 0;
+ }
+ }
+ }
+
+ &.is-grouped {
+ display: flex;
+ justify-content: flex-start;
+
+ & > .control {
+ flex-shrink: 0;
+
+ &:not(:last-child) {
+ margin-bottom: 0;
+
+ @include ltr-property("margin", 0.75rem);
+ }
+
+ &.is-expanded {
+ flex-grow: 1;
+ flex-shrink: 1;
+ }
+ }
+
+ &.is-grouped-centered {
+ justify-content: center;
+ }
+
+ &.is-grouped-right {
+ justify-content: flex-end;
+ }
+
+ &.is-grouped-multiline {
+ flex-wrap: wrap;
+
+ & > .control {
+ &:last-child,
+ &:not(:last-child) {
+ margin-bottom: 0.75rem;
+ }
+ }
+
+ &:last-child {
+ margin-bottom: -0.75rem;
+ }
+
+ &:not(:last-child) {
+ margin-bottom: 0;
+ }
+ }
+ }
+
+ &.is-horizontal {
+ @include tablet {
+ display: flex;
+ }
+ }
+}
+
+.field-label {
+ .label {
+ font-size: inherit;
+ }
+
+ @include mobile {
+ margin-bottom: 0.5rem;
+ }
+
+
+ @include tablet {
+ flex-basis: 0;
+ flex-grow: 1;
+ flex-shrink: 0;
+
+ @include ltr-property("margin", 1.5rem);
+
+ text-align: right;
+
+ &.is-small {
+ font-size: $size-small;
+ padding-top: 0.375em;
+ }
+
+ &.is-normal {
+ padding-top: 0.375em;
+ }
+
+ &.is-medium {
+ font-size: $size-medium;
+ padding-top: 0.375em;
+ }
+
+ &.is-large {
+ font-size: $size-large;
+ padding-top: 0.375em;
+ }
+ }
+}
+
+.field-body {
+ .field .field {
+ margin-bottom: 0;
+ }
+
+ @include tablet {
+ display: flex;
+ flex-basis: 0;
+ flex-grow: 5;
+ flex-shrink: 1;
+
+ .field {
+ margin-bottom: 0;
+ }
+
+ & > .field {
+ flex-shrink: 1;
+
+ &:not(.is-narrow) {
+ flex-grow: 1;
+ }
+
+ &:not(:last-child) {
+ @include ltr-property("margin", 0.75rem);
+ }
+ }
+ }
+}
+
+.control {
+ box-sizing: border-box;
+ clear: both;
+ font-size: $size-normal;
+ position: relative;
+ text-align: inherit;
+
+ // Modifiers
+ &.has-icons-left,
+ &.has-icons-right {
+ .input,
+ .select {
+ &:focus {
+ & ~ .icon {
+ color: $input-icon-active-color;
+ }
+ }
+
+ &.is-small ~ .icon {
+ font-size: $size-small;
+ }
+
+ &.is-medium ~ .icon {
+ font-size: $size-medium;
+ }
+
+ &.is-large ~ .icon {
+ font-size: $size-large;
+ }
+ }
+
+ .icon {
+ color: $input-icon-color;
+ height: $input-height;
+ pointer-events: none;
+ position: absolute;
+ top: 0;
+ width: $input-height;
+ z-index: 4;
+ }
+ }
+
+ &.has-icons-left {
+ .input,
+ .select select {
+ padding-left: $input-height;
+ }
+
+ .icon.is-left {
+ left: 0;
+ }
+ }
+
+ &.has-icons-right {
+ .input,
+ .select select {
+ padding-right: $input-height;
+ }
+
+ .icon.is-right {
+ right: 0;
+ }
+ }
+
+ &.is-loading {
+ &::after {
+ @extend %loader;
+
+ position: absolute !important;
+
+ @include ltr-position(0.625em);
+
+ top: 0.625em;
+ z-index: 4;
+ }
+
+ &.is-small:after {
+ font-size: $size-small;
+ }
+
+ &.is-medium:after {
+ font-size: $size-medium;
+ }
+
+ &.is-large:after {
+ font-size: $size-large;
+ }
+ }
+}
+++ /dev/null
-/* Bulma Grid */
-@charset "utf-8"
-
-@import "columns"
-@import "tiles"
--- /dev/null
+/* Bulma Grid */
+@charset "utf-8";
+
+@import "columns";
+@import "tiles";
+++ /dev/null
-@import "../utilities/mixins"
-
-$column-gap: 0.75rem !default
-
-.column
- display: block
- flex-basis: 0
- flex-grow: 1
- flex-shrink: 1
- padding: $column-gap
- .columns.is-mobile > &.is-narrow
- flex: none
- width: unset
- .columns.is-mobile > &.is-full
- flex: none
- width: 100%
- .columns.is-mobile > &.is-three-quarters
- flex: none
- width: 75%
- .columns.is-mobile > &.is-two-thirds
- flex: none
- width: 66.6666%
- .columns.is-mobile > &.is-half
- flex: none
- width: 50%
- .columns.is-mobile > &.is-one-third
- flex: none
- width: 33.3333%
- .columns.is-mobile > &.is-one-quarter
- flex: none
- width: 25%
- .columns.is-mobile > &.is-one-fifth
- flex: none
- width: 20%
- .columns.is-mobile > &.is-two-fifths
- flex: none
- width: 40%
- .columns.is-mobile > &.is-three-fifths
- flex: none
- width: 60%
- .columns.is-mobile > &.is-four-fifths
- flex: none
- width: 80%
- .columns.is-mobile > &.is-offset-three-quarters
- +ltr-property("margin", 75%, false)
- .columns.is-mobile > &.is-offset-two-thirds
- +ltr-property("margin", 66.6666%, false)
- .columns.is-mobile > &.is-offset-half
- +ltr-property("margin", 50%, false)
- .columns.is-mobile > &.is-offset-one-third
- +ltr-property("margin", 33.3333%, false)
- .columns.is-mobile > &.is-offset-one-quarter
- +ltr-property("margin", 25%, false)
- .columns.is-mobile > &.is-offset-one-fifth
- +ltr-property("margin", 20%, false)
- .columns.is-mobile > &.is-offset-two-fifths
- +ltr-property("margin", 40%, false)
- .columns.is-mobile > &.is-offset-three-fifths
- +ltr-property("margin", 60%, false)
- .columns.is-mobile > &.is-offset-four-fifths
- +ltr-property("margin", 80%, false)
- @for $i from 0 through 12
- .columns.is-mobile > &.is-#{$i}
- flex: none
- width: percentage(divide($i, 12))
- .columns.is-mobile > &.is-offset-#{$i}
- +ltr-property("margin", percentage(divide($i, 12)), false)
- +mobile
- &.is-narrow-mobile
- flex: none
- width: unset
- &.is-full-mobile
- flex: none
- width: 100%
- &.is-three-quarters-mobile
- flex: none
- width: 75%
- &.is-two-thirds-mobile
- flex: none
- width: 66.6666%
- &.is-half-mobile
- flex: none
- width: 50%
- &.is-one-third-mobile
- flex: none
- width: 33.3333%
- &.is-one-quarter-mobile
- flex: none
- width: 25%
- &.is-one-fifth-mobile
- flex: none
- width: 20%
- &.is-two-fifths-mobile
- flex: none
- width: 40%
- &.is-three-fifths-mobile
- flex: none
- width: 60%
- &.is-four-fifths-mobile
- flex: none
- width: 80%
- &.is-offset-three-quarters-mobile
- +ltr-property("margin", 75%, false)
- &.is-offset-two-thirds-mobile
- +ltr-property("margin", 66.6666%, false)
- &.is-offset-half-mobile
- +ltr-property("margin", 50%, false)
- &.is-offset-one-third-mobile
- +ltr-property("margin", 33.3333%, false)
- &.is-offset-one-quarter-mobile
- +ltr-property("margin", 25%, false)
- &.is-offset-one-fifth-mobile
- +ltr-property("margin", 20%, false)
- &.is-offset-two-fifths-mobile
- +ltr-property("margin", 40%, false)
- &.is-offset-three-fifths-mobile
- +ltr-property("margin", 60%, false)
- &.is-offset-four-fifths-mobile
- +ltr-property("margin", 80%, false)
- @for $i from 0 through 12
- &.is-#{$i}-mobile
- flex: none
- width: percentage(divide($i, 12))
- &.is-offset-#{$i}-mobile
- +ltr-property("margin", percentage(divide($i, 12)), false)
- +tablet
- &.is-narrow,
- &.is-narrow-tablet
- flex: none
- width: unset
- &.is-full,
- &.is-full-tablet
- flex: none
- width: 100%
- &.is-three-quarters,
- &.is-three-quarters-tablet
- flex: none
- width: 75%
- &.is-two-thirds,
- &.is-two-thirds-tablet
- flex: none
- width: 66.6666%
- &.is-half,
- &.is-half-tablet
- flex: none
- width: 50%
- &.is-one-third,
- &.is-one-third-tablet
- flex: none
- width: 33.3333%
- &.is-one-quarter,
- &.is-one-quarter-tablet
- flex: none
- width: 25%
- &.is-one-fifth,
- &.is-one-fifth-tablet
- flex: none
- width: 20%
- &.is-two-fifths,
- &.is-two-fifths-tablet
- flex: none
- width: 40%
- &.is-three-fifths,
- &.is-three-fifths-tablet
- flex: none
- width: 60%
- &.is-four-fifths,
- &.is-four-fifths-tablet
- flex: none
- width: 80%
- &.is-offset-three-quarters,
- &.is-offset-three-quarters-tablet
- +ltr-property("margin", 75%, false)
- &.is-offset-two-thirds,
- &.is-offset-two-thirds-tablet
- +ltr-property("margin", 66.6666%, false)
- &.is-offset-half,
- &.is-offset-half-tablet
- +ltr-property("margin", 50%, false)
- &.is-offset-one-third,
- &.is-offset-one-third-tablet
- +ltr-property("margin", 33.3333%, false)
- &.is-offset-one-quarter,
- &.is-offset-one-quarter-tablet
- +ltr-property("margin", 25%, false)
- &.is-offset-one-fifth,
- &.is-offset-one-fifth-tablet
- +ltr-property("margin", 20%, false)
- &.is-offset-two-fifths,
- &.is-offset-two-fifths-tablet
- +ltr-property("margin", 40%, false)
- &.is-offset-three-fifths,
- &.is-offset-three-fifths-tablet
- +ltr-property("margin", 60%, false)
- &.is-offset-four-fifths,
- &.is-offset-four-fifths-tablet
- +ltr-property("margin", 80%, false)
- @for $i from 0 through 12
- &.is-#{$i},
- &.is-#{$i}-tablet
- flex: none
- width: percentage(divide($i, 12))
- &.is-offset-#{$i},
- &.is-offset-#{$i}-tablet
- +ltr-property("margin", percentage(divide($i, 12)), false)
- +touch
- &.is-narrow-touch
- flex: none
- width: unset
- &.is-full-touch
- flex: none
- width: 100%
- &.is-three-quarters-touch
- flex: none
- width: 75%
- &.is-two-thirds-touch
- flex: none
- width: 66.6666%
- &.is-half-touch
- flex: none
- width: 50%
- &.is-one-third-touch
- flex: none
- width: 33.3333%
- &.is-one-quarter-touch
- flex: none
- width: 25%
- &.is-one-fifth-touch
- flex: none
- width: 20%
- &.is-two-fifths-touch
- flex: none
- width: 40%
- &.is-three-fifths-touch
- flex: none
- width: 60%
- &.is-four-fifths-touch
- flex: none
- width: 80%
- &.is-offset-three-quarters-touch
- +ltr-property("margin", 75%, false)
- &.is-offset-two-thirds-touch
- +ltr-property("margin", 66.6666%, false)
- &.is-offset-half-touch
- +ltr-property("margin", 50%, false)
- &.is-offset-one-third-touch
- +ltr-property("margin", 33.3333%, false)
- &.is-offset-one-quarter-touch
- +ltr-property("margin", 25%, false)
- &.is-offset-one-fifth-touch
- +ltr-property("margin", 20%, false)
- &.is-offset-two-fifths-touch
- +ltr-property("margin", 40%, false)
- &.is-offset-three-fifths-touch
- +ltr-property("margin", 60%, false)
- &.is-offset-four-fifths-touch
- +ltr-property("margin", 80%, false)
- @for $i from 0 through 12
- &.is-#{$i}-touch
- flex: none
- width: percentage(divide($i, 12))
- &.is-offset-#{$i}-touch
- +ltr-property("margin", percentage(divide($i, 12)), false)
- +desktop
- &.is-narrow-desktop
- flex: none
- width: unset
- &.is-full-desktop
- flex: none
- width: 100%
- &.is-three-quarters-desktop
- flex: none
- width: 75%
- &.is-two-thirds-desktop
- flex: none
- width: 66.6666%
- &.is-half-desktop
- flex: none
- width: 50%
- &.is-one-third-desktop
- flex: none
- width: 33.3333%
- &.is-one-quarter-desktop
- flex: none
- width: 25%
- &.is-one-fifth-desktop
- flex: none
- width: 20%
- &.is-two-fifths-desktop
- flex: none
- width: 40%
- &.is-three-fifths-desktop
- flex: none
- width: 60%
- &.is-four-fifths-desktop
- flex: none
- width: 80%
- &.is-offset-three-quarters-desktop
- +ltr-property("margin", 75%, false)
- &.is-offset-two-thirds-desktop
- +ltr-property("margin", 66.6666%, false)
- &.is-offset-half-desktop
- +ltr-property("margin", 50%, false)
- &.is-offset-one-third-desktop
- +ltr-property("margin", 33.3333%, false)
- &.is-offset-one-quarter-desktop
- +ltr-property("margin", 25%, false)
- &.is-offset-one-fifth-desktop
- +ltr-property("margin", 20%, false)
- &.is-offset-two-fifths-desktop
- +ltr-property("margin", 40%, false)
- &.is-offset-three-fifths-desktop
- +ltr-property("margin", 60%, false)
- &.is-offset-four-fifths-desktop
- +ltr-property("margin", 80%, false)
- @for $i from 0 through 12
- &.is-#{$i}-desktop
- flex: none
- width: percentage(divide($i, 12))
- &.is-offset-#{$i}-desktop
- +ltr-property("margin", percentage(divide($i, 12)), false)
- +widescreen
- &.is-narrow-widescreen
- flex: none
- width: unset
- &.is-full-widescreen
- flex: none
- width: 100%
- &.is-three-quarters-widescreen
- flex: none
- width: 75%
- &.is-two-thirds-widescreen
- flex: none
- width: 66.6666%
- &.is-half-widescreen
- flex: none
- width: 50%
- &.is-one-third-widescreen
- flex: none
- width: 33.3333%
- &.is-one-quarter-widescreen
- flex: none
- width: 25%
- &.is-one-fifth-widescreen
- flex: none
- width: 20%
- &.is-two-fifths-widescreen
- flex: none
- width: 40%
- &.is-three-fifths-widescreen
- flex: none
- width: 60%
- &.is-four-fifths-widescreen
- flex: none
- width: 80%
- &.is-offset-three-quarters-widescreen
- +ltr-property("margin", 75%, false)
- &.is-offset-two-thirds-widescreen
- +ltr-property("margin", 66.6666%, false)
- &.is-offset-half-widescreen
- +ltr-property("margin", 50%, false)
- &.is-offset-one-third-widescreen
- +ltr-property("margin", 33.3333%, false)
- &.is-offset-one-quarter-widescreen
- +ltr-property("margin", 25%, false)
- &.is-offset-one-fifth-widescreen
- +ltr-property("margin", 20%, false)
- &.is-offset-two-fifths-widescreen
- +ltr-property("margin", 40%, false)
- &.is-offset-three-fifths-widescreen
- +ltr-property("margin", 60%, false)
- &.is-offset-four-fifths-widescreen
- +ltr-property("margin", 80%, false)
- @for $i from 0 through 12
- &.is-#{$i}-widescreen
- flex: none
- width: percentage(divide($i, 12))
- &.is-offset-#{$i}-widescreen
- +ltr-property("margin", percentage(divide($i, 12)), false)
- +fullhd
- &.is-narrow-fullhd
- flex: none
- width: unset
- &.is-full-fullhd
- flex: none
- width: 100%
- &.is-three-quarters-fullhd
- flex: none
- width: 75%
- &.is-two-thirds-fullhd
- flex: none
- width: 66.6666%
- &.is-half-fullhd
- flex: none
- width: 50%
- &.is-one-third-fullhd
- flex: none
- width: 33.3333%
- &.is-one-quarter-fullhd
- flex: none
- width: 25%
- &.is-one-fifth-fullhd
- flex: none
- width: 20%
- &.is-two-fifths-fullhd
- flex: none
- width: 40%
- &.is-three-fifths-fullhd
- flex: none
- width: 60%
- &.is-four-fifths-fullhd
- flex: none
- width: 80%
- &.is-offset-three-quarters-fullhd
- +ltr-property("margin", 75%, false)
- &.is-offset-two-thirds-fullhd
- +ltr-property("margin", 66.6666%, false)
- &.is-offset-half-fullhd
- +ltr-property("margin", 50%, false)
- &.is-offset-one-third-fullhd
- +ltr-property("margin", 33.3333%, false)
- &.is-offset-one-quarter-fullhd
- +ltr-property("margin", 25%, false)
- &.is-offset-one-fifth-fullhd
- +ltr-property("margin", 20%, false)
- &.is-offset-two-fifths-fullhd
- +ltr-property("margin", 40%, false)
- &.is-offset-three-fifths-fullhd
- +ltr-property("margin", 60%, false)
- &.is-offset-four-fifths-fullhd
- +ltr-property("margin", 80%, false)
- @for $i from 0 through 12
- &.is-#{$i}-fullhd
- flex: none
- width: percentage(divide($i, 12))
- &.is-offset-#{$i}-fullhd
- +ltr-property("margin", percentage(divide($i, 12)), false)
-
-.columns
- +ltr-property("margin", (-$column-gap), false)
- +ltr-property("margin", (-$column-gap))
- margin-top: (-$column-gap)
- &:last-child
- margin-bottom: (-$column-gap)
- &:not(:last-child)
- margin-bottom: calc(1.5rem - #{$column-gap})
- // Modifiers
- &.is-centered
- justify-content: center
- &.is-gapless
- +ltr-property("margin", 0, false)
- +ltr-property("margin", 0)
- margin-top: 0
- & > .column
- margin: 0
- padding: 0 !important
- &:not(:last-child)
- margin-bottom: 1.5rem
- &:last-child
- margin-bottom: 0
- &.is-mobile
- display: flex
- &.is-multiline
- flex-wrap: wrap
- &.is-vcentered
- align-items: center
- // Responsiveness
- +tablet
- &:not(.is-desktop)
- display: flex
- +desktop
- // Modifiers
- &.is-desktop
- display: flex
-
-@if $variable-columns
- .columns.is-variable
- --columnGap: 0.75rem
- +ltr-property("margin", calc(-1 * var(--columnGap)), false)
- +ltr-property("margin", calc(-1 * var(--columnGap)))
- > .column
- padding-left: var(--columnGap)
- padding-right: var(--columnGap)
- @for $i from 0 through 8
- &.is-#{$i}
- --columnGap: #{$i * 0.25rem}
- +mobile
- &.is-#{$i}-mobile
- --columnGap: #{$i * 0.25rem}
- +tablet
- &.is-#{$i}-tablet
- --columnGap: #{$i * 0.25rem}
- +tablet-only
- &.is-#{$i}-tablet-only
- --columnGap: #{$i * 0.25rem}
- +touch
- &.is-#{$i}-touch
- --columnGap: #{$i * 0.25rem}
- +desktop
- &.is-#{$i}-desktop
- --columnGap: #{$i * 0.25rem}
- +desktop-only
- &.is-#{$i}-desktop-only
- --columnGap: #{$i * 0.25rem}
- +widescreen
- &.is-#{$i}-widescreen
- --columnGap: #{$i * 0.25rem}
- +widescreen-only
- &.is-#{$i}-widescreen-only
- --columnGap: #{$i * 0.25rem}
- +fullhd
- &.is-#{$i}-fullhd
- --columnGap: #{$i * 0.25rem}
--- /dev/null
+@import "../utilities/mixins";
+
+$column-gap: 0.75rem !default;
+
+.column {
+ display: block;
+ flex-basis: 0;
+ flex-grow: 1;
+ flex-shrink: 1;
+ padding: $column-gap;
+
+ .columns.is-mobile > &.is-narrow {
+ flex: none;
+ width: unset;
+ }
+
+ .columns.is-mobile > &.is-full {
+ flex: none;
+ width: 100%;
+ }
+
+ .columns.is-mobile > &.is-three-quarters {
+ flex: none;
+ width: 75%;
+ }
+
+ .columns.is-mobile > &.is-two-thirds {
+ flex: none;
+ width: 66.6666%;
+ }
+
+ .columns.is-mobile > &.is-half {
+ flex: none;
+ width: 50%;
+ }
+
+ .columns.is-mobile > &.is-one-third {
+ flex: none;
+ width: 33.3333%;
+ }
+
+ .columns.is-mobile > &.is-one-quarter {
+ flex: none;
+ width: 25%;
+ }
+
+ .columns.is-mobile > &.is-one-fifth {
+ flex: none;
+ width: 20%;
+ }
+
+ .columns.is-mobile > &.is-two-fifths {
+ flex: none;
+ width: 40%;
+ }
+
+ .columns.is-mobile > &.is-three-fifths {
+ flex: none;
+ width: 60%;
+ }
+
+ .columns.is-mobile > &.is-four-fifths {
+ flex: none;
+ width: 80%;
+ }
+
+ .columns.is-mobile > &.is-offset-three-quarters {
+ @include ltr-property("margin", 75%, false);
+ }
+
+ .columns.is-mobile > &.is-offset-two-thirds {
+ @include ltr-property("margin", 66.6666%, false);
+ }
+
+ .columns.is-mobile > &.is-offset-half {
+ @include ltr-property("margin", 50%, false);
+ }
+
+ .columns.is-mobile > &.is-offset-one-third {
+ @include ltr-property("margin", 33.3333%, false);
+ }
+
+ .columns.is-mobile > &.is-offset-one-quarter {
+ @include ltr-property("margin", 25%, false);
+ }
+
+ .columns.is-mobile > &.is-offset-one-fifth {
+ @include ltr-property("margin", 20%, false);
+ }
+
+ .columns.is-mobile > &.is-offset-two-fifths {
+ @include ltr-property("margin", 40%, false);
+ }
+
+ .columns.is-mobile > &.is-offset-three-fifths {
+ @include ltr-property("margin", 60%, false);
+ }
+
+ .columns.is-mobile > &.is-offset-four-fifths {
+ @include ltr-property("margin", 80%, false);
+ }
+
+ @for $i from 0 through 12 {
+ .columns.is-mobile > &.is-#{$i} {
+ flex: none;
+ width: percentage(divide($i, 12));
+ }
+
+ .columns.is-mobile > &.is-offset-#{$i} {
+ @include ltr-property("margin", percentage(divide($i, 12)), false);
+ }
+ }
+
+ @include mobile {
+ &.is-narrow-mobile {
+ flex: none;
+ width: unset;
+ }
+
+ &.is-full-mobile {
+ flex: none;
+ width: 100%;
+ }
+
+ &.is-three-quarters-mobile {
+ flex: none;
+ width: 75%;
+ }
+
+ &.is-two-thirds-mobile {
+ flex: none;
+ width: 66.6666%;
+ }
+
+ &.is-half-mobile {
+ flex: none;
+ width: 50%;
+ }
+
+ &.is-one-third-mobile {
+ flex: none;
+ width: 33.3333%;
+ }
+
+ &.is-one-quarter-mobile {
+ flex: none;
+ width: 25%;
+ }
+
+ &.is-one-fifth-mobile {
+ flex: none;
+ width: 20%;
+ }
+
+ &.is-two-fifths-mobile {
+ flex: none;
+ width: 40%;
+ }
+
+ &.is-three-fifths-mobile {
+ flex: none;
+ width: 60%;
+ }
+
+ &.is-four-fifths-mobile {
+ flex: none;
+ width: 80%;
+ }
+
+ &.is-offset-three-quarters-mobile {
+ @include ltr-property("margin", 75%, false);
+ }
+
+ &.is-offset-two-thirds-mobile {
+ @include ltr-property("margin", 66.6666%, false);
+ }
+
+ &.is-offset-half-mobile {
+ @include ltr-property("margin", 50%, false);
+ }
+
+ &.is-offset-one-third-mobile {
+ @include ltr-property("margin", 33.3333%, false);
+ }
+
+ &.is-offset-one-quarter-mobile {
+ @include ltr-property("margin", 25%, false);
+ }
+
+ &.is-offset-one-fifth-mobile {
+ @include ltr-property("margin", 20%, false);
+ }
+
+ &.is-offset-two-fifths-mobile {
+ @include ltr-property("margin", 40%, false);
+ }
+
+ &.is-offset-three-fifths-mobile {
+ @include ltr-property("margin", 60%, false);
+ }
+
+ &.is-offset-four-fifths-mobile {
+ @include ltr-property("margin", 80%, false);
+ }
+
+ @for $i from 0 through 12 {
+ &.is-#{$i}-mobile {
+ flex: none;
+ width: percentage(divide($i, 12));
+ }
+
+ &.is-offset-#{$i}-mobile {
+ @include ltr-property("margin", percentage(divide($i, 12)), false);
+ }
+ }
+ }
+
+
+ @include tablet {
+ &.is-narrow,
+ &.is-narrow-tablet {
+ flex: none;
+ width: unset;
+ }
+
+ &.is-full,
+ &.is-full-tablet {
+ flex: none;
+ width: 100%;
+ }
+
+ &.is-three-quarters,
+ &.is-three-quarters-tablet {
+ flex: none;
+ width: 75%;
+ }
+
+ &.is-two-thirds,
+ &.is-two-thirds-tablet {
+ flex: none;
+ width: 66.6666%;
+ }
+
+ &.is-half,
+ &.is-half-tablet {
+ flex: none;
+ width: 50%;
+ }
+
+ &.is-one-third,
+ &.is-one-third-tablet {
+ flex: none;
+ width: 33.3333%;
+ }
+
+ &.is-one-quarter,
+ &.is-one-quarter-tablet {
+ flex: none;
+ width: 25%;
+ }
+
+ &.is-one-fifth,
+ &.is-one-fifth-tablet {
+ flex: none;
+ width: 20%;
+ }
+
+ &.is-two-fifths,
+ &.is-two-fifths-tablet {
+ flex: none;
+ width: 40%;
+ }
+
+ &.is-three-fifths,
+ &.is-three-fifths-tablet {
+ flex: none;
+ width: 60%;
+ }
+
+ &.is-four-fifths,
+ &.is-four-fifths-tablet {
+ flex: none;
+ width: 80%;
+ }
+
+ &.is-offset-three-quarters,
+ &.is-offset-three-quarters-tablet {
+ @include ltr-property("margin", 75%, false);
+ }
+
+ &.is-offset-two-thirds,
+ &.is-offset-two-thirds-tablet {
+ @include ltr-property("margin", 66.6666%, false);
+ }
+
+ &.is-offset-half,
+ &.is-offset-half-tablet {
+ @include ltr-property("margin", 50%, false);
+ }
+
+ &.is-offset-one-third,
+ &.is-offset-one-third-tablet {
+ @include ltr-property("margin", 33.3333%, false);
+ }
+
+ &.is-offset-one-quarter,
+ &.is-offset-one-quarter-tablet {
+ @include ltr-property("margin", 25%, false);
+ }
+
+ &.is-offset-one-fifth,
+ &.is-offset-one-fifth-tablet {
+ @include ltr-property("margin", 20%, false);
+ }
+
+ &.is-offset-two-fifths,
+ &.is-offset-two-fifths-tablet {
+ @include ltr-property("margin", 40%, false);
+ }
+
+ &.is-offset-three-fifths,
+ &.is-offset-three-fifths-tablet {
+ @include ltr-property("margin", 60%, false);
+ }
+
+ &.is-offset-four-fifths,
+ &.is-offset-four-fifths-tablet {
+ @include ltr-property("margin", 80%, false);
+ }
+
+ @for $i from 0 through 12 {
+ &.is-#{$i},
+ &.is-#{$i}-tablet {
+ flex: none;
+ width: percentage(divide($i, 12));
+ }
+
+ &.is-offset-#{$i},
+ &.is-offset-#{$i}-tablet {
+ @include ltr-property("margin", percentage(divide($i, 12)), false);
+ }
+ }
+ }
+
+
+ @include touch {
+ &.is-narrow-touch {
+ flex: none;
+ width: unset;
+ }
+
+ &.is-full-touch {
+ flex: none;
+ width: 100%;
+ }
+
+ &.is-three-quarters-touch {
+ flex: none;
+ width: 75%;
+ }
+
+ &.is-two-thirds-touch {
+ flex: none;
+ width: 66.6666%;
+ }
+
+ &.is-half-touch {
+ flex: none;
+ width: 50%;
+ }
+
+ &.is-one-third-touch {
+ flex: none;
+ width: 33.3333%;
+ }
+
+ &.is-one-quarter-touch {
+ flex: none;
+ width: 25%;
+ }
+
+ &.is-one-fifth-touch {
+ flex: none;
+ width: 20%;
+ }
+
+ &.is-two-fifths-touch {
+ flex: none;
+ width: 40%;
+ }
+
+ &.is-three-fifths-touch {
+ flex: none;
+ width: 60%;
+ }
+
+ &.is-four-fifths-touch {
+ flex: none;
+ width: 80%;
+ }
+
+ &.is-offset-three-quarters-touch {
+ @include ltr-property("margin", 75%, false);
+ }
+
+ &.is-offset-two-thirds-touch {
+ @include ltr-property("margin", 66.6666%, false);
+ }
+
+ &.is-offset-half-touch {
+ @include ltr-property("margin", 50%, false);
+ }
+
+ &.is-offset-one-third-touch {
+ @include ltr-property("margin", 33.3333%, false);
+ }
+
+ &.is-offset-one-quarter-touch {
+ @include ltr-property("margin", 25%, false);
+ }
+
+ &.is-offset-one-fifth-touch {
+ @include ltr-property("margin", 20%, false);
+ }
+
+ &.is-offset-two-fifths-touch {
+ @include ltr-property("margin", 40%, false);
+ }
+
+ &.is-offset-three-fifths-touch {
+ @include ltr-property("margin", 60%, false);
+ }
+
+ &.is-offset-four-fifths-touch {
+ @include ltr-property("margin", 80%, false);
+ }
+
+ @for $i from 0 through 12 {
+ &.is-#{$i}-touch {
+ flex: none;
+ width: percentage(divide($i, 12));
+ }
+
+ &.is-offset-#{$i}-touch {
+ @include ltr-property("margin", percentage(divide($i, 12)), false);
+ }
+ }
+ }
+
+
+ @include desktop {
+ &.is-narrow-desktop {
+ flex: none;
+ width: unset;
+ }
+
+ &.is-full-desktop {
+ flex: none;
+ width: 100%;
+ }
+
+ &.is-three-quarters-desktop {
+ flex: none;
+ width: 75%;
+ }
+
+ &.is-two-thirds-desktop {
+ flex: none;
+ width: 66.6666%;
+ }
+
+ &.is-half-desktop {
+ flex: none;
+ width: 50%;
+ }
+
+ &.is-one-third-desktop {
+ flex: none;
+ width: 33.3333%;
+ }
+
+ &.is-one-quarter-desktop {
+ flex: none;
+ width: 25%;
+ }
+
+ &.is-one-fifth-desktop {
+ flex: none;
+ width: 20%;
+ }
+
+ &.is-two-fifths-desktop {
+ flex: none;
+ width: 40%;
+ }
+
+ &.is-three-fifths-desktop {
+ flex: none;
+ width: 60%;
+ }
+
+ &.is-four-fifths-desktop {
+ flex: none;
+ width: 80%;
+ }
+
+ &.is-offset-three-quarters-desktop {
+ @include ltr-property("margin", 75%, false);
+ }
+
+ &.is-offset-two-thirds-desktop {
+ @include ltr-property("margin", 66.6666%, false);
+ }
+
+ &.is-offset-half-desktop {
+ @include ltr-property("margin", 50%, false);
+ }
+
+ &.is-offset-one-third-desktop {
+ @include ltr-property("margin", 33.3333%, false);
+ }
+
+ &.is-offset-one-quarter-desktop {
+ @include ltr-property("margin", 25%, false);
+ }
+
+ &.is-offset-one-fifth-desktop {
+ @include ltr-property("margin", 20%, false);
+ }
+
+ &.is-offset-two-fifths-desktop {
+ @include ltr-property("margin", 40%, false);
+ }
+
+ &.is-offset-three-fifths-desktop {
+ @include ltr-property("margin", 60%, false);
+ }
+
+ &.is-offset-four-fifths-desktop {
+ @include ltr-property("margin", 80%, false);
+ }
+
+ @for $i from 0 through 12 {
+ &.is-#{$i}-desktop {
+ flex: none;
+ width: percentage(divide($i, 12));
+ }
+
+ &.is-offset-#{$i}-desktop {
+ @include ltr-property("margin", percentage(divide($i, 12)), false);
+ }
+ }
+ }
+
+
+ @include widescreen {
+ &.is-narrow-widescreen {
+ flex: none;
+ width: unset;
+ }
+
+ &.is-full-widescreen {
+ flex: none;
+ width: 100%;
+ }
+
+ &.is-three-quarters-widescreen {
+ flex: none;
+ width: 75%;
+ }
+
+ &.is-two-thirds-widescreen {
+ flex: none;
+ width: 66.6666%;
+ }
+
+ &.is-half-widescreen {
+ flex: none;
+ width: 50%;
+ }
+
+ &.is-one-third-widescreen {
+ flex: none;
+ width: 33.3333%;
+ }
+
+ &.is-one-quarter-widescreen {
+ flex: none;
+ width: 25%;
+ }
+
+ &.is-one-fifth-widescreen {
+ flex: none;
+ width: 20%;
+ }
+
+ &.is-two-fifths-widescreen {
+ flex: none;
+ width: 40%;
+ }
+
+ &.is-three-fifths-widescreen {
+ flex: none;
+ width: 60%;
+ }
+
+ &.is-four-fifths-widescreen {
+ flex: none;
+ width: 80%;
+ }
+
+ &.is-offset-three-quarters-widescreen {
+ @include ltr-property("margin", 75%, false);
+ }
+
+ &.is-offset-two-thirds-widescreen {
+ @include ltr-property("margin", 66.6666%, false);
+ }
+
+ &.is-offset-half-widescreen {
+ @include ltr-property("margin", 50%, false);
+ }
+
+ &.is-offset-one-third-widescreen {
+ @include ltr-property("margin", 33.3333%, false);
+ }
+
+ &.is-offset-one-quarter-widescreen {
+ @include ltr-property("margin", 25%, false);
+ }
+
+ &.is-offset-one-fifth-widescreen {
+ @include ltr-property("margin", 20%, false);
+ }
+
+ &.is-offset-two-fifths-widescreen {
+ @include ltr-property("margin", 40%, false);
+ }
+
+ &.is-offset-three-fifths-widescreen {
+ @include ltr-property("margin", 60%, false);
+ }
+
+ &.is-offset-four-fifths-widescreen {
+ @include ltr-property("margin", 80%, false);
+ }
+
+ @for $i from 0 through 12 {
+ &.is-#{$i}-widescreen {
+ flex: none;
+ width: percentage(divide($i, 12));
+ }
+
+ &.is-offset-#{$i}-widescreen {
+ @include ltr-property("margin", percentage(divide($i, 12)), false);
+ }
+ }
+ }
+
+
+ @include fullhd {
+ &.is-narrow-fullhd {
+ flex: none;
+ width: unset;
+ }
+
+ &.is-full-fullhd {
+ flex: none;
+ width: 100%;
+ }
+
+ &.is-three-quarters-fullhd {
+ flex: none;
+ width: 75%;
+ }
+
+ &.is-two-thirds-fullhd {
+ flex: none;
+ width: 66.6666%;
+ }
+
+ &.is-half-fullhd {
+ flex: none;
+ width: 50%;
+ }
+
+ &.is-one-third-fullhd {
+ flex: none;
+ width: 33.3333%;
+ }
+
+ &.is-one-quarter-fullhd {
+ flex: none;
+ width: 25%;
+ }
+
+ &.is-one-fifth-fullhd {
+ flex: none;
+ width: 20%;
+ }
+
+ &.is-two-fifths-fullhd {
+ flex: none;
+ width: 40%;
+ }
+
+ &.is-three-fifths-fullhd {
+ flex: none;
+ width: 60%;
+ }
+
+ &.is-four-fifths-fullhd {
+ flex: none;
+ width: 80%;
+ }
+
+ &.is-offset-three-quarters-fullhd {
+ @include ltr-property("margin", 75%, false);
+ }
+
+ &.is-offset-two-thirds-fullhd {
+ @include ltr-property("margin", 66.6666%, false);
+ }
+
+ &.is-offset-half-fullhd {
+ @include ltr-property("margin", 50%, false);
+ }
+
+ &.is-offset-one-third-fullhd {
+ @include ltr-property("margin", 33.3333%, false);
+ }
+
+ &.is-offset-one-quarter-fullhd {
+ @include ltr-property("margin", 25%, false);
+ }
+
+ &.is-offset-one-fifth-fullhd {
+ @include ltr-property("margin", 20%, false);
+ }
+
+ &.is-offset-two-fifths-fullhd {
+ @include ltr-property("margin", 40%, false);
+ }
+
+ &.is-offset-three-fifths-fullhd {
+ @include ltr-property("margin", 60%, false);
+ }
+
+ &.is-offset-four-fifths-fullhd {
+ @include ltr-property("margin", 80%, false);
+ }
+
+ @for $i from 0 through 12 {
+ &.is-#{$i}-fullhd {
+ flex: none;
+ width: percentage(divide($i, 12));
+ }
+
+ &.is-offset-#{$i}-fullhd {
+ @include ltr-property("margin", percentage(divide($i, 12)), false);
+ }
+ }
+ }
+}
+
+.columns {
+ @include ltr-property("margin", -$column-gap, false);
+ @include ltr-property("margin", -$column-gap);
+
+ margin-top: -$column-gap;
+
+ &:last-child {
+ margin-bottom: -$column-gap;
+ }
+
+ &:not(:last-child) {
+ margin-bottom: calc(1.5rem - #{$column-gap});
+ }
+
+ // Modifiers
+ &.is-centered {
+ justify-content: center;
+ }
+
+ &.is-gapless {
+ @include ltr-property("margin", 0, false);
+ @include ltr-property("margin", 0);
+
+ margin-top: 0;
+
+ & > .column {
+ margin: 0;
+ padding: 0 !important;
+ }
+
+ &:not(:last-child) {
+ margin-bottom: 1.5rem;
+ }
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ &.is-mobile {
+ display: flex;
+ }
+
+ &.is-multiline {
+ flex-wrap: wrap;
+ }
+
+ &.is-vcentered {
+ align-items: center;
+ }
+
+ // Responsiveness
+ @include tablet {
+ &:not(.is-desktop) {
+ display: flex;
+ }
+ }
+
+
+ @include desktop {
+ // Modifiers
+ &.is-desktop {
+ display: flex;
+ }
+ }
+}
+
+@if $variable-columns {
+ .columns.is-variable {
+ --columnGap: 0.75rem;
+
+ @include ltr-property("margin", calc(-1 * var(--columnGap)), false);
+ @include ltr-property("margin", calc(-1 * var(--columnGap)));
+
+ > .column {
+ padding-left: var(--columnGap);
+ padding-right: var(--columnGap);
+ }
+
+ @for $i from 0 through 8 {
+ &.is-#{$i} {
+ --columnGap: #{$i * 0.25rem};
+ }
+
+ @include mobile {
+ &.is-#{$i}-mobile {
+ --columnGap: #{$i * 0.25rem};
+ }
+ }
+
+
+ @include tablet {
+ &.is-#{$i}-tablet {
+ --columnGap: #{$i * 0.25rem};
+ }
+ }
+
+
+ @include tablet-only {
+ &.is-#{$i}-tablet-only {
+ --columnGap: #{$i * 0.25rem};
+ }
+ }
+
+
+ @include touch {
+ &.is-#{$i}-touch {
+ --columnGap: #{$i * 0.25rem};
+ }
+ }
+
+
+ @include desktop {
+ &.is-#{$i}-desktop {
+ --columnGap: #{$i * 0.25rem};
+ }
+ }
+
+
+ @include desktop-only {
+ &.is-#{$i}-desktop-only {
+ --columnGap: #{$i * 0.25rem};
+ }
+ }
+
+
+ @include widescreen {
+ &.is-#{$i}-widescreen {
+ --columnGap: #{$i * 0.25rem};
+ }
+ }
+
+
+ @include widescreen-only {
+ &.is-#{$i}-widescreen-only {
+ --columnGap: #{$i * 0.25rem};
+ }
+ }
+
+
+ @include fullhd {
+ &.is-#{$i}-fullhd {
+ --columnGap: #{$i * 0.25rem};
+ }
+ }
+ }
+ }
+}
+++ /dev/null
-@import "../utilities/mixins"
-
-$tile-spacing: 0.75rem !default
-
-.tile
- align-items: stretch
- display: block
- flex-basis: 0
- flex-grow: 1
- flex-shrink: 1
- min-height: min-content
- // Modifiers
- &.is-ancestor
- margin-left: $tile-spacing * -1
- margin-right: $tile-spacing * -1
- margin-top: $tile-spacing * -1
- &:last-child
- margin-bottom: $tile-spacing * -1
- &:not(:last-child)
- margin-bottom: $tile-spacing
- &.is-child
- margin: 0 !important
- &.is-parent
- padding: $tile-spacing
- &.is-vertical
- flex-direction: column
- & > .tile.is-child:not(:last-child)
- margin-bottom: 1.5rem !important
- // Responsiveness
- +tablet
- &:not(.is-child)
- display: flex
- @for $i from 1 through 12
- &.is-#{$i}
- flex: none
- width: (divide($i, 12)) * 100%
--- /dev/null
+@import "../utilities/mixins";
+
+$tile-spacing: 0.75rem !default;
+
+.tile {
+ align-items: stretch;
+ display: block;
+ flex-basis: 0;
+ flex-grow: 1;
+ flex-shrink: 1;
+ min-height: min-content;
+
+ // Modifiers
+ &.is-ancestor {
+ margin-left: $tile-spacing * -1;
+ margin-right: $tile-spacing * -1;
+ margin-top: $tile-spacing * -1;
+
+ &:last-child {
+ margin-bottom: $tile-spacing * -1;
+ }
+
+ &:not(:last-child) {
+ margin-bottom: $tile-spacing;
+ }
+ }
+
+ &.is-child {
+ margin: 0 !important;
+ }
+
+ &.is-parent {
+ padding: $tile-spacing;
+ }
+
+ &.is-vertical {
+ flex-direction: column;
+
+ & > .tile.is-child:not(:last-child) {
+ margin-bottom: 1.5rem !important;
+ }
+ }
+
+ // Responsiveness
+ @include tablet {
+ &:not(.is-child) {
+ display: flex;
+ }
+
+ @for $i from 1 through 12 {
+ &.is-#{$i} {
+ flex: none;
+ width: divide($i, 12) * 100%;
+ }
+ }
+ }
+}
+++ /dev/null
-/* Bulma Helpers */
-@charset "utf-8"
-
-@import "color"
-@import "flexbox"
-@import "float"
-@import "other"
-@import "overflow"
-@import "position"
-@import "spacing"
-@import "typography"
-@import "visibility"
--- /dev/null
+/* Bulma Helpers */
+@charset "utf-8";
+
+@import "color";
+@import "flexbox";
+@import "float";
+@import "other";
+@import "overflow";
+@import "position";
+@import "spacing";
+@import "typography";
+@import "visibility";
+++ /dev/null
-@import "../utilities/derived-variables"
-
-@each $name, $pair in $colors
- $color: nth($pair, 1)
- .has-text-#{$name}
- color: $color !important
- a.has-text-#{$name}
- &:hover,
- &:focus
- color: bulmaDarken($color, 10%) !important
- .has-background-#{$name}
- background-color: $color !important
- @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}
- color: $shade !important
- .has-background-#{$name}
- background-color: $shade !important
--- /dev/null
+@import "../utilities/derived-variables";
+
+@each $name, $pair in $colors {
+ $color: nth($pair, 1);
+
+ .has-text-#{$name} {
+ color: $color !important;
+ }
+
+ a.has-text-#{$name} {
+ &:hover,
+ &:focus {
+ color: bulmaDarken($color, 10%) !important;
+ }
+ }
+
+ .has-background-#{$name} {
+ background-color: $color !important;
+ }
+
+ @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} {
+ color: $shade !important;
+ }
+
+ .has-background-#{$name} {
+ background-color: $shade !important;
+ }
+}
+++ /dev/null
-$flex-direction-values: row, row-reverse, column, column-reverse
-@each $value in $flex-direction-values
- .is-flex-direction-#{$value}
- flex-direction: $value !important
-
-$flex-wrap-values: nowrap, wrap, wrap-reverse
-@each $value in $flex-wrap-values
- .is-flex-wrap-#{$value}
- flex-wrap: $value !important
-
-$justify-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, start, end, left, right
-@each $value in $justify-content-values
- .is-justify-content-#{$value}
- justify-content: $value !important
-
-$align-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch, start, end, baseline
-@each $value in $align-content-values
- .is-align-content-#{$value}
- align-content: $value !important
-
-$align-items-values: stretch, flex-start, flex-end, center, baseline, start, end, self-start, self-end
-@each $value in $align-items-values
- .is-align-items-#{$value}
- align-items: $value !important
-
-$align-self-values: auto, flex-start, flex-end, center, baseline, stretch
-@each $value in $align-self-values
- .is-align-self-#{$value}
- align-self: $value !important
-
-$flex-operators: grow, shrink
-@each $operator in $flex-operators
- @for $i from 0 through 5
- .is-flex-#{$operator}-#{$i}
- flex-#{$operator}: $i !important
--- /dev/null
+$flex-direction-values: row, row-reverse, column, column-reverse;
+
+@each $value in $flex-direction-values {
+ .is-flex-direction-#{$value} {
+ flex-direction: $value !important;
+ }
+}
+
+$flex-wrap-values: nowrap, wrap, wrap-reverse;
+
+@each $value in $flex-wrap-values {
+ .is-flex-wrap-#{$value} {
+ flex-wrap: $value !important;
+ }
+}
+
+$justify-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, start, end, left, right;
+
+@each $value in $justify-content-values {
+ .is-justify-content-#{$value} {
+ justify-content: $value !important;
+ }
+}
+
+$align-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch, start, end, baseline;
+
+@each $value in $align-content-values {
+ .is-align-content-#{$value} {
+ align-content: $value !important;
+ }
+}
+
+$align-items-values: stretch, flex-start, flex-end, center, baseline, start, end, self-start, self-end;
+
+@each $value in $align-items-values {
+ .is-align-items-#{$value} {
+ align-items: $value !important;
+ }
+}
+
+$align-self-values: auto, flex-start, flex-end, center, baseline, stretch;
+
+@each $value in $align-self-values {
+ .is-align-self-#{$value} {
+ align-self: $value !important;
+ }
+}
+
+$flex-operators: grow, shrink;
+
+@each $operator in $flex-operators {
+ @for $i from 0 through 5 {
+ .is-flex-#{$operator}-#{$i} {
+ flex-#{$operator}: $i !important;
+ }
+ }
+}
+++ /dev/null
-@import "../utilities/mixins"
-
-.is-clearfix
- +clearfix
-
-.is-pulled-left
- float: left !important
-
-.is-pulled-right
- float: right !important
--- /dev/null
+@import "../utilities/mixins";
+
+.is-clearfix {
+ @include clearfix;
+}
+
+.is-pulled-left {
+ float: left !important;
+}
+
+.is-pulled-right {
+ float: right !important;
+}
+++ /dev/null
-@import "../utilities/mixins"
-
-.is-radiusless
- border-radius: 0 !important
-
-.is-shadowless
- box-shadow: none !important
-
-.is-clickable
- cursor: pointer !important
- pointer-events: all !important
-
-.is-unselectable
- @extend %unselectable
--- /dev/null
+@import "../utilities/mixins";
+
+.is-radiusless {
+ border-radius: 0 !important;
+}
+
+.is-shadowless {
+ box-shadow: none !important;
+}
+
+.is-clickable {
+ cursor: pointer !important;
+ pointer-events: all !important;
+}
+
+.is-unselectable {
+ @extend %unselectable;
+}
+++ /dev/null
-.is-clipped
- overflow: hidden !important
--- /dev/null
+.is-clipped {
+ overflow: hidden !important;
+}
+++ /dev/null
-@import "../utilities/mixins"
-
-.is-overlay
- @extend %overlay
-
-.is-relative
- position: relative !important
--- /dev/null
+@import "../utilities/mixins";
+
+.is-overlay {
+ @extend %overlay;
+}
+
+.is-relative {
+ position: relative !important;
+}
+++ /dev/null
-.is-marginless
- margin: 0 !important
-
-.is-paddingless
- padding: 0 !important
-
-$spacing-shortcuts: ("margin": "m", "padding": "p") !default
-$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default
-$spacing-horizontal: "x" !default
-$spacing-vertical: "y" !default
-$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto) !default
-
-@each $property, $shortcut in $spacing-shortcuts
- @each $name, $value in $spacing-values
- // All directions
- .#{$shortcut}-#{$name}
- #{$property}: $value !important
- // Cardinal directions
- @each $direction, $suffix in $spacing-directions
- .#{$shortcut}#{$suffix}-#{$name}
- #{$property}-#{$direction}: $value !important
- // Horizontal axis
- @if $spacing-horizontal != null
- .#{$shortcut}#{$spacing-horizontal}-#{$name}
- #{$property}-left: $value !important
- #{$property}-right: $value !important
- // Vertical axis
- @if $spacing-vertical != null
- .#{$shortcut}#{$spacing-vertical}-#{$name}
- #{$property}-top: $value !important
- #{$property}-bottom: $value !important
--- /dev/null
+.is-marginless {
+ margin: 0 !important;
+}
+
+.is-paddingless {
+ padding: 0 !important;
+}
+
+$spacing-shortcuts: ("margin": "m", "padding": "p") !default;
+$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default;
+$spacing-horizontal: "x" !default;
+$spacing-vertical: "y" !default;
+$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto) !default;
+
+@each $property, $shortcut in $spacing-shortcuts {
+ @each $name, $value in $spacing-values {
+ // All directions
+ .#{$shortcut}-#{$name} {
+ #{$property}: $value !important;
+ }
+
+ // Cardinal directions
+ @each $direction, $suffix in $spacing-directions {
+ .#{$shortcut}#{$suffix}-#{$name} {
+ #{$property}-#{$direction}: $value !important;
+ }
+ }
+
+ // Horizontal axis
+ @if $spacing-horizontal != null {
+ .#{$shortcut}#{$spacing-horizontal}-#{$name} {
+ #{$property}-left: $value !important;
+ #{$property}-right: $value !important;
+ }
+ }
+
+ // Vertical axis
+ @if $spacing-vertical != null {
+ .#{$shortcut}#{$spacing-vertical}-#{$name} {
+ #{$property}-top: $value !important;
+ #{$property}-bottom: $value !important;
+ }
+ }
+ }
+}
+++ /dev/null
-@import "../utilities/mixins"
-
-=typography-size($target:'')
- @each $size in $sizes
- $i: index($sizes, $size)
- .is-size-#{$i}#{if($target == '', '', '-' + $target)}
- font-size: $size !important
-
-+typography-size()
-
-+mobile
- +typography-size('mobile')
-
-+tablet
- +typography-size('tablet')
-
-+touch
- +typography-size('touch')
-
-+desktop
- +typography-size('desktop')
-
-+widescreen
- +typography-size('widescreen')
-
-+fullhd
- +typography-size('fullhd')
-
-$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right')
-
-@each $alignment, $text-align in $alignments
- .has-text-#{$alignment}
- text-align: #{$text-align} !important
-
-@each $alignment, $text-align in $alignments
- +mobile
- .has-text-#{$alignment}-mobile
- text-align: #{$text-align} !important
- +tablet
- .has-text-#{$alignment}-tablet
- text-align: #{$text-align} !important
- +tablet-only
- .has-text-#{$alignment}-tablet-only
- text-align: #{$text-align} !important
- +touch
- .has-text-#{$alignment}-touch
- text-align: #{$text-align} !important
- +desktop
- .has-text-#{$alignment}-desktop
- text-align: #{$text-align} !important
- +desktop-only
- .has-text-#{$alignment}-desktop-only
- text-align: #{$text-align} !important
- +widescreen
- .has-text-#{$alignment}-widescreen
- text-align: #{$text-align} !important
- +widescreen-only
- .has-text-#{$alignment}-widescreen-only
- text-align: #{$text-align} !important
- +fullhd
- .has-text-#{$alignment}-fullhd
- text-align: #{$text-align} !important
-
-.is-capitalized
- text-transform: capitalize !important
-
-.is-lowercase
- text-transform: lowercase !important
-
-.is-uppercase
- text-transform: uppercase !important
-
-.is-italic
- font-style: italic !important
-
-.is-underlined
- text-decoration: underline !important
-
-.has-text-weight-light
- font-weight: $weight-light !important
-.has-text-weight-normal
- font-weight: $weight-normal !important
-.has-text-weight-medium
- font-weight: $weight-medium !important
-.has-text-weight-semibold
- font-weight: $weight-semibold !important
-.has-text-weight-bold
- font-weight: $weight-bold !important
-
-.is-family-primary
- font-family: $family-primary !important
-
-.is-family-secondary
- font-family: $family-secondary !important
-
-.is-family-sans-serif
- font-family: $family-sans-serif !important
-
-.is-family-monospace
- font-family: $family-monospace !important
-
-.is-family-code
- font-family: $family-code !important
--- /dev/null
+@import "../utilities/mixins";
+
+@mixin typography-size($target: "") {
+ @each $size in $sizes {
+ $i: index($sizes, $size);
+
+ .is-size-#{$i}#{if($target == "", "", "-" + $target)} {
+ font-size: $size !important;
+ }
+ }
+}
+
+@include typography-size;
+
+@include mobile {
+ @include typography-size("mobile");
+}
+
+
+@include tablet {
+ @include typography-size("tablet");
+}
+
+
+@include touch {
+ @include typography-size("touch");
+}
+
+
+@include desktop {
+ @include typography-size("desktop");
+}
+
+
+@include widescreen {
+ @include typography-size("widescreen");
+}
+
+
+@include fullhd {
+ @include typography-size("fullhd");
+}
+
+
+$alignments: ("centered": "center", "justified": "justify", "left": "left", "right": "right");
+
+@each $alignment, $text-align in $alignments {
+ .has-text-#{$alignment} {
+ text-align: #{$text-align} !important;
+ }
+}
+
+@each $alignment, $text-align in $alignments {
+ @include mobile {
+ .has-text-#{$alignment}-mobile {
+ text-align: #{$text-align} !important;
+ }
+ }
+
+
+ @include tablet {
+ .has-text-#{$alignment}-tablet {
+ text-align: #{$text-align} !important;
+ }
+ }
+
+
+ @include tablet-only {
+ .has-text-#{$alignment}-tablet-only {
+ text-align: #{$text-align} !important;
+ }
+ }
+
+
+ @include touch {
+ .has-text-#{$alignment}-touch {
+ text-align: #{$text-align} !important;
+ }
+ }
+
+
+ @include desktop {
+ .has-text-#{$alignment}-desktop {
+ text-align: #{$text-align} !important;
+ }
+ }
+
+
+ @include desktop-only {
+ .has-text-#{$alignment}-desktop-only {
+ text-align: #{$text-align} !important;
+ }
+ }
+
+
+ @include widescreen {
+ .has-text-#{$alignment}-widescreen {
+ text-align: #{$text-align} !important;
+ }
+ }
+
+
+ @include widescreen-only {
+ .has-text-#{$alignment}-widescreen-only {
+ text-align: #{$text-align} !important;
+ }
+ }
+
+
+ @include fullhd {
+ .has-text-#{$alignment}-fullhd {
+ text-align: #{$text-align} !important;
+ }
+ }
+}
+
+.is-capitalized {
+ text-transform: capitalize !important;
+}
+
+.is-lowercase {
+ text-transform: lowercase !important;
+}
+
+.is-uppercase {
+ text-transform: uppercase !important;
+}
+
+.is-italic {
+ font-style: italic !important;
+}
+
+.is-underlined {
+ text-decoration: underline !important;
+}
+
+.has-text-weight-light {
+ font-weight: $weight-light !important;
+}
+
+.has-text-weight-normal {
+ font-weight: $weight-normal !important;
+}
+
+.has-text-weight-medium {
+ font-weight: $weight-medium !important;
+}
+
+.has-text-weight-semibold {
+ font-weight: $weight-semibold !important;
+}
+
+.has-text-weight-bold {
+ font-weight: $weight-bold !important;
+}
+
+.is-family-primary {
+ font-family: $family-primary !important;
+}
+
+.is-family-secondary {
+ font-family: $family-secondary !important;
+}
+
+.is-family-sans-serif {
+ font-family: $family-sans-serif !important;
+}
+
+.is-family-monospace {
+ font-family: $family-monospace !important;
+}
+
+.is-family-code {
+ font-family: $family-code !important;
+}
+++ /dev/null
-@import "../utilities/mixins"
-
-$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
-
-@each $display in $displays
- .is-#{$display}
- display: #{$display} !important
- +mobile
- .is-#{$display}-mobile
- display: #{$display} !important
- +tablet
- .is-#{$display}-tablet
- display: #{$display} !important
- +tablet-only
- .is-#{$display}-tablet-only
- display: #{$display} !important
- +touch
- .is-#{$display}-touch
- display: #{$display} !important
- +desktop
- .is-#{$display}-desktop
- display: #{$display} !important
- +desktop-only
- .is-#{$display}-desktop-only
- display: #{$display} !important
- +widescreen
- .is-#{$display}-widescreen
- display: #{$display} !important
- +widescreen-only
- .is-#{$display}-widescreen-only
- display: #{$display} !important
- +fullhd
- .is-#{$display}-fullhd
- display: #{$display} !important
-
-.is-hidden
- display: none !important
-
-.is-sr-only
- border: none !important
- clip: rect(0, 0, 0, 0) !important
- height: 0.01em !important
- overflow: hidden !important
- padding: 0 !important
- position: absolute !important
- white-space: nowrap !important
- width: 0.01em !important
-
-+mobile
- .is-hidden-mobile
- display: none !important
-
-+tablet
- .is-hidden-tablet
- display: none !important
-
-+tablet-only
- .is-hidden-tablet-only
- display: none !important
-
-+touch
- .is-hidden-touch
- display: none !important
-
-+desktop
- .is-hidden-desktop
- display: none !important
-
-+desktop-only
- .is-hidden-desktop-only
- display: none !important
-
-+widescreen
- .is-hidden-widescreen
- display: none !important
-
-+widescreen-only
- .is-hidden-widescreen-only
- display: none !important
-
-+fullhd
- .is-hidden-fullhd
- display: none !important
-
-.is-invisible
- visibility: hidden !important
-
-+mobile
- .is-invisible-mobile
- visibility: hidden !important
-
-+tablet
- .is-invisible-tablet
- visibility: hidden !important
-
-+tablet-only
- .is-invisible-tablet-only
- visibility: hidden !important
-
-+touch
- .is-invisible-touch
- visibility: hidden !important
-
-+desktop
- .is-invisible-desktop
- visibility: hidden !important
-
-+desktop-only
- .is-invisible-desktop-only
- visibility: hidden !important
-
-+widescreen
- .is-invisible-widescreen
- visibility: hidden !important
-
-+widescreen-only
- .is-invisible-widescreen-only
- visibility: hidden !important
-
-+fullhd
- .is-invisible-fullhd
- visibility: hidden !important
--- /dev/null
+@import "../utilities/mixins";
+
+$displays: "block" "flex" "inline" "inline-block" "inline-flex";
+
+@each $display in $displays {
+ .is-#{$display} {
+ display: #{$display} !important;
+ }
+
+ @include mobile {
+ .is-#{$display}-mobile {
+ display: #{$display} !important;
+ }
+ }
+
+
+ @include tablet {
+ .is-#{$display}-tablet {
+ display: #{$display} !important;
+ }
+ }
+
+
+ @include tablet-only {
+ .is-#{$display}-tablet-only {
+ display: #{$display} !important;
+ }
+ }
+
+
+ @include touch {
+ .is-#{$display}-touch {
+ display: #{$display} !important;
+ }
+ }
+
+
+ @include desktop {
+ .is-#{$display}-desktop {
+ display: #{$display} !important;
+ }
+ }
+
+
+ @include desktop-only {
+ .is-#{$display}-desktop-only {
+ display: #{$display} !important;
+ }
+ }
+
+
+ @include widescreen {
+ .is-#{$display}-widescreen {
+ display: #{$display} !important;
+ }
+ }
+
+
+ @include widescreen-only {
+ .is-#{$display}-widescreen-only {
+ display: #{$display} !important;
+ }
+ }
+
+
+ @include fullhd {
+ .is-#{$display}-fullhd {
+ display: #{$display} !important;
+ }
+ }
+}
+
+.is-hidden {
+ display: none !important;
+}
+
+.is-sr-only {
+ border: none !important;
+ clip: rect(0, 0, 0, 0) !important;
+ height: 0.01em !important;
+ overflow: hidden !important;
+ padding: 0 !important;
+ position: absolute !important;
+ white-space: nowrap !important;
+ width: 0.01em !important;
+}
+
+@include mobile {
+ .is-hidden-mobile {
+ display: none !important;
+ }
+}
+
+
+@include tablet {
+ .is-hidden-tablet {
+ display: none !important;
+ }
+}
+
+
+@include tablet-only {
+ .is-hidden-tablet-only {
+ display: none !important;
+ }
+}
+
+
+@include touch {
+ .is-hidden-touch {
+ display: none !important;
+ }
+}
+
+
+@include desktop {
+ .is-hidden-desktop {
+ display: none !important;
+ }
+}
+
+
+@include desktop-only {
+ .is-hidden-desktop-only {
+ display: none !important;
+ }
+}
+
+
+@include widescreen {
+ .is-hidden-widescreen {
+ display: none !important;
+ }
+}
+
+
+@include widescreen-only {
+ .is-hidden-widescreen-only {
+ display: none !important;
+ }
+}
+
+
+@include fullhd {
+ .is-hidden-fullhd {
+ display: none !important;
+ }
+}
+
+
+.is-invisible {
+ visibility: hidden !important;
+}
+
+@include mobile {
+ .is-invisible-mobile {
+ visibility: hidden !important;
+ }
+}
+
+
+@include tablet {
+ .is-invisible-tablet {
+ visibility: hidden !important;
+ }
+}
+
+
+@include tablet-only {
+ .is-invisible-tablet-only {
+ visibility: hidden !important;
+ }
+}
+
+
+@include touch {
+ .is-invisible-touch {
+ visibility: hidden !important;
+ }
+}
+
+
+@include desktop {
+ .is-invisible-desktop {
+ visibility: hidden !important;
+ }
+}
+
+
+@include desktop-only {
+ .is-invisible-desktop-only {
+ visibility: hidden !important;
+ }
+}
+
+
+@include widescreen {
+ .is-invisible-widescreen {
+ visibility: hidden !important;
+ }
+}
+
+
+@include widescreen-only {
+ .is-invisible-widescreen-only {
+ visibility: hidden !important;
+ }
+}
+
+
+@include fullhd {
+ .is-invisible-fullhd {
+ visibility: hidden !important;
+ }
+}
+++ /dev/null
-/* Bulma Layout */
-@charset "utf-8"
-
-@import "hero"
-@import "section"
-@import "footer"
--- /dev/null
+/* Bulma Layout */
+@charset "utf-8";
+
+@import "hero";
+@import "section";
+@import "footer";
+++ /dev/null
-@import "../utilities/derived-variables"
-
-$footer-background-color: $scheme-main-bis !default
-$footer-color: false !default
-$footer-padding: 3rem 1.5rem 6rem !default
-
-.footer
- background-color: $footer-background-color
- padding: $footer-padding
- @if $footer-color
- color: $footer-color
--- /dev/null
+@import "../utilities/derived-variables";
+
+$footer-background-color: $scheme-main-bis !default;
+$footer-color: false !default;
+$footer-padding: 3rem 1.5rem 6rem !default;
+
+.footer {
+ background-color: $footer-background-color;
+ padding: $footer-padding;
+
+ @if $footer-color {
+ color: $footer-color;
+ }
+}
+++ /dev/null
-@import "../utilities/mixins"
-
-$hero-body-padding: 3rem 1.5rem !default
-$hero-body-padding-tablet: 3rem 3rem !default
-$hero-body-padding-small: 1.5rem !default
-$hero-body-padding-medium: 9rem 4.5rem !default
-$hero-body-padding-large: 18rem 6rem !default
-
-$hero-colors: $colors !default
-
-// Main container
-.hero
- align-items: stretch
- display: flex
- flex-direction: column
- justify-content: space-between
- .navbar
- background: none
- .tabs
- ul
- border-bottom: none
- // Colors
- @each $name, $pair in $hero-colors
- $color: nth($pair, 1)
- $color-invert: nth($pair, 2)
- &.is-#{$name}
- background-color: $color
- color: $color-invert
- a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
- strong
- color: inherit
- .title
- color: $color-invert
- .subtitle
- color: bulmaRgba($color-invert, 0.9)
- a:not(.button),
- strong
- color: $color-invert
- .navbar-menu
- +touch
- background-color: $color
- .navbar-item,
- .navbar-link
- color: bulmaRgba($color-invert, 0.7)
- a.navbar-item,
- .navbar-link
- &:hover,
- &.is-active
- background-color: bulmaDarken($color, 5%)
- color: $color-invert
- .tabs
- a
- color: $color-invert
- opacity: 0.9
- &:hover
- opacity: 1
- li
- &.is-active a
- color: $color !important
- opacity: 1
- &.is-boxed,
- &.is-toggle
- a
- color: $color-invert
- &:hover
- background-color: bulmaRgba($scheme-invert, 0.1)
- li.is-active a
- &,
- &:hover
- background-color: $color-invert
- border-color: $color-invert
- color: $color
- // Modifiers
- @if type-of($color) == 'color'
- &.is-bold
- $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
- $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
- background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
- +mobile
- .navbar-menu
- background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
- // Sizes
- &.is-small
- .hero-body
- padding: $hero-body-padding-small
- &.is-medium
- +tablet
- .hero-body
- padding: $hero-body-padding-medium
- &.is-large
- +tablet
- .hero-body
- padding: $hero-body-padding-large
- &.is-halfheight,
- &.is-fullheight,
- &.is-fullheight-with-navbar
- .hero-body
- align-items: center
- display: flex
- & > .container
- flex-grow: 1
- flex-shrink: 1
- &.is-halfheight
- min-height: 50vh
- &.is-fullheight
- min-height: 100vh
-
-// Components
-
-.hero-video
- @extend %overlay
- overflow: hidden
- video
- left: 50%
- min-height: 100%
- min-width: 100%
- position: absolute
- top: 50%
- transform: translate3d(-50%, -50%, 0)
- // Modifiers
- &.is-transparent
- opacity: 0.3
- // Responsiveness
- +mobile
- display: none
-
-.hero-buttons
- margin-top: 1.5rem
- // Responsiveness
- +mobile
- .button
- display: flex
- &:not(:last-child)
- margin-bottom: 0.75rem
- +tablet
- display: flex
- justify-content: center
- .button:not(:last-child)
- +ltr-property("margin", 1.5rem)
-
-// Containers
-
-.hero-head,
-.hero-foot
- flex-grow: 0
- flex-shrink: 0
-
-.hero-body
- flex-grow: 1
- flex-shrink: 0
- padding: $hero-body-padding
- +tablet
- padding: $hero-body-padding-tablet
--- /dev/null
+@import "../utilities/mixins";
+
+$hero-body-padding: 3rem 1.5rem !default;
+$hero-body-padding-tablet: 3rem 3rem !default;
+$hero-body-padding-small: 1.5rem !default;
+$hero-body-padding-medium: 9rem 4.5rem !default;
+$hero-body-padding-large: 18rem 6rem !default;
+
+$hero-colors: $colors !default;
+
+// Main container
+.hero {
+ align-items: stretch;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ .navbar {
+ background: none;
+ }
+
+ .tabs {
+ ul {
+ border-bottom: none;
+ }
+ }
+
+ // Colors
+ @each $name, $pair in $hero-colors {
+ $color: nth($pair, 1);
+ $color-invert: nth($pair, 2);
+
+ &.is-#{$name} {
+ background-color: $color;
+ color: $color-invert;
+
+ a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
+ strong {
+ color: inherit;
+ }
+
+ .title {
+ color: $color-invert;
+ }
+
+ .subtitle {
+ color: bulmaRgba($color-invert, 0.9);
+
+ a:not(.button),
+ strong {
+ color: $color-invert;
+ }
+ }
+
+ .navbar-menu {
+ @include touch {
+ background-color: $color;
+ }
+ }
+
+ .navbar-item,
+ .navbar-link {
+ color: bulmaRgba($color-invert, 0.7);
+ }
+
+ a.navbar-item,
+ .navbar-link {
+ &:hover,
+ &.is-active {
+ background-color: bulmaDarken($color, 5%);
+ color: $color-invert;
+ }
+ }
+
+ .tabs {
+ a {
+ color: $color-invert;
+ opacity: 0.9;
+
+ &:hover {
+ opacity: 1;
+ }
+ }
+
+ li {
+ &.is-active a {
+ color: $color !important;
+ opacity: 1;
+ }
+ }
+
+ &.is-boxed,
+ &.is-toggle {
+ a {
+ color: $color-invert;
+
+ &:hover {
+ background-color: bulmaRgba($scheme-invert, 0.1);
+ }
+ }
+
+ li.is-active a {
+ &,
+ &:hover {
+ background-color: $color-invert;
+ border-color: $color-invert;
+ color: $color;
+ }
+ }
+ }
+ }
+
+ // Modifiers
+ @if type-of($color) == "color" {
+ &.is-bold {
+ $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%);
+ $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%);
+
+ background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%);
+
+ @include mobile {
+ .navbar-menu {
+ background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%);
+ }
+ }
+ }
+ }
+ }
+ }
+
+ // Sizes
+ &.is-small {
+ .hero-body {
+ padding: $hero-body-padding-small;
+ }
+ }
+
+ &.is-medium {
+ @include tablet {
+ .hero-body {
+ padding: $hero-body-padding-medium;
+ }
+ }
+ }
+
+ &.is-large {
+ @include tablet {
+ .hero-body {
+ padding: $hero-body-padding-large;
+ }
+ }
+ }
+
+ &.is-halfheight,
+ &.is-fullheight,
+ &.is-fullheight-with-navbar {
+ .hero-body {
+ align-items: center;
+ display: flex;
+
+ & > .container {
+ flex-grow: 1;
+ flex-shrink: 1;
+ }
+ }
+ }
+
+ &.is-halfheight {
+ min-height: 50vh;
+ }
+
+ &.is-fullheight {
+ min-height: 100vh;
+ }
+}
+
+// Components
+
+.hero-video {
+ @extend %overlay;
+
+ overflow: hidden;
+
+ video {
+ left: 50%;
+ min-height: 100%;
+ min-width: 100%;
+ position: absolute;
+ top: 50%;
+ transform: translate3d(-50%, -50%, 0);
+ }
+
+ // Modifiers
+ &.is-transparent {
+ opacity: 0.3;
+ }
+
+ // Responsiveness
+ @include mobile {
+ display: none;
+ }
+}
+
+.hero-buttons {
+ margin-top: 1.5rem;
+
+ // Responsiveness
+ @include mobile {
+ .button {
+ display: flex;
+
+ &:not(:last-child) {
+ margin-bottom: 0.75rem;
+ }
+ }
+ }
+
+
+ @include tablet {
+ display: flex;
+ justify-content: center;
+
+ .button:not(:last-child) {
+ @include ltr-property("margin", 1.5rem);
+ }
+ }
+}
+
+// Containers
+
+.hero-head,
+.hero-foot {
+ flex-grow: 0;
+ flex-shrink: 0;
+}
+
+.hero-body {
+ flex-grow: 1;
+ flex-shrink: 0;
+ padding: $hero-body-padding;
+
+ @include tablet {
+ padding: $hero-body-padding-tablet;
+ }
+}
+++ /dev/null
-@import "../utilities/mixins"
-
-$section-padding: 3rem 1.5rem !default
-$section-padding-desktop: 3rem 3rem !default
-$section-padding-medium: 9rem 4.5rem !default
-$section-padding-large: 18rem 6rem !default
-
-.section
- padding: $section-padding
- // Responsiveness
- +desktop
- padding: $section-padding-desktop
- // Sizes
- &.is-medium
- padding: $section-padding-medium
- &.is-large
- padding: $section-padding-large
--- /dev/null
+@import "../utilities/mixins";
+
+$section-padding: 3rem 1.5rem !default;
+$section-padding-desktop: 3rem 3rem !default;
+$section-padding-medium: 9rem 4.5rem !default;
+$section-padding-large: 18rem 6rem !default;
+
+.section {
+ padding: $section-padding;
+
+ // Responsiveness
+ @include desktop {
+ padding: $section-padding-desktop;
+
+ // Sizes
+ &.is-medium {
+ padding: $section-padding-medium;
+ }
+
+ &.is-large {
+ padding: $section-padding-large;
+ }
+ }
+}
+++ /dev/null
-/* Bulma Utilities */
-@charset "utf-8"
-
-@import "initial-variables"
-@import "functions"
-@import "derived-variables"
-@import "mixins"
-@import "controls"
-@import "extends"
--- /dev/null
+/* Bulma Utilities */
+@charset "utf-8";
+
+@import "initial-variables";
+@import "functions";
+@import "derived-variables";
+@import "mixins";
+@import "controls";
+@import "extends";
+++ /dev/null
-@warn "The animations.sass file has MOVED. It is now in the /base folder. Please import sass/base/animations instead."
--- /dev/null
+@warn "The animations.scss file has MOVED. It is now in the /base folder. Please import sass/base/animations instead.";
+++ /dev/null
-@import "derived-variables"
-
-$control-radius: $radius !default
-$control-radius-small: $radius-small !default
-
-$control-border-width: 1px !default
-
-$control-height: 2.5em !default
-$control-line-height: 1.5 !default
-
-$control-padding-vertical: calc(0.5em - #{$control-border-width}) !default
-$control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default
-
-=control
- -moz-appearance: none
- -webkit-appearance: none
- align-items: center
- border: $control-border-width solid transparent
- border-radius: $control-radius
- box-shadow: none
- display: inline-flex
- font-size: $size-normal
- height: $control-height
- justify-content: flex-start
- line-height: $control-line-height
- padding-bottom: $control-padding-vertical
- padding-left: $control-padding-horizontal
- padding-right: $control-padding-horizontal
- padding-top: $control-padding-vertical
- position: relative
- vertical-align: top
- // States
- &:focus,
- &.is-focused,
- &:active,
- &.is-active
- outline: none
- &[disabled],
- fieldset[disabled] &
- cursor: not-allowed
-
-// The controls sizes use mixins so they can be used at different breakpoints
-=control-small
- border-radius: $control-radius-small
- font-size: $size-small
-=control-medium
- font-size: $size-medium
-=control-large
- font-size: $size-large
--- /dev/null
+@import "derived-variables";
+
+$control-radius: $radius !default;
+$control-radius-small: $radius-small !default;
+
+$control-border-width: 1px !default;
+
+$control-height: 2.5em !default;
+$control-line-height: 1.5 !default;
+
+$control-padding-vertical: calc(0.5em - #{$control-border-width}) !default;
+$control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default;
+
+@mixin control {
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ align-items: center;
+ border: $control-border-width solid transparent;
+ border-radius: $control-radius;
+ box-shadow: none;
+ display: inline-flex;
+ font-size: $size-normal;
+ height: $control-height;
+ justify-content: flex-start;
+ line-height: $control-line-height;
+ padding-bottom: $control-padding-vertical;
+ padding-left: $control-padding-horizontal;
+ padding-right: $control-padding-horizontal;
+ padding-top: $control-padding-vertical;
+ position: relative;
+ vertical-align: top;
+
+ // States
+ &:focus,
+ &.is-focused,
+ &:active,
+ &.is-active {
+ outline: none;
+ }
+
+ &[disabled],
+ fieldset[disabled] & {
+ cursor: not-allowed;
+ }
+}
+
+// The controls sizes use mixins so they can be used at different breakpoints
+@mixin control-small {
+ border-radius: $control-radius-small;
+ font-size: $size-small;
+}
+
+@mixin control-medium {
+ font-size: $size-medium;
+}
+
+@mixin control-large {
+ font-size: $size-large;
+}
+++ /dev/null
-@import "initial-variables"
-@import "functions"
-
-$primary: $turquoise !default
-
-$info: $cyan !default
-$success: $green !default
-$warning: $yellow !default
-$danger: $red !default
-
-$light: $white-ter !default
-$dark: $grey-darker !default
-
-// Invert colors
-
-$orange-invert: findColorInvert($orange) !default
-$yellow-invert: findColorInvert($yellow) !default
-$green-invert: findColorInvert($green) !default
-$turquoise-invert: findColorInvert($turquoise) !default
-$cyan-invert: findColorInvert($cyan) !default
-$blue-invert: findColorInvert($blue) !default
-$purple-invert: findColorInvert($purple) !default
-$red-invert: findColorInvert($red) !default
-
-$primary-invert: findColorInvert($primary) !default
-$primary-light: findLightColor($primary) !default
-$primary-dark: findDarkColor($primary) !default
-$info-invert: findColorInvert($info) !default
-$info-light: findLightColor($info) !default
-$info-dark: findDarkColor($info) !default
-$success-invert: findColorInvert($success) !default
-$success-light: findLightColor($success) !default
-$success-dark: findDarkColor($success) !default
-$warning-invert: findColorInvert($warning) !default
-$warning-light: findLightColor($warning) !default
-$warning-dark: findDarkColor($warning) !default
-$danger-invert: findColorInvert($danger) !default
-$danger-light: findLightColor($danger) !default
-$danger-dark: findDarkColor($danger) !default
-$light-invert: findColorInvert($light) !default
-$dark-invert: findColorInvert($dark) !default
-
-// General colors
-
-$scheme-main: $white !default
-$scheme-main-bis: $white-bis !default
-$scheme-main-ter: $white-ter !default
-$scheme-invert: $black !default
-$scheme-invert-bis: $black-bis !default
-$scheme-invert-ter: $black-ter !default
-
-$background: $white-ter !default
-
-$border: $grey-lighter !default
-$border-hover: $grey-light !default
-$border-light: $grey-lightest !default
-$border-light-hover: $grey-light !default
-
-// Text colors
-
-$text: $grey-dark !default
-$text-invert: findColorInvert($text) !default
-$text-light: $grey !default
-$text-strong: $grey-darker !default
-
-// Code colors
-
-$code: darken($red, 15%) !default
-$code-background: $background !default
-
-$pre: $text !default
-$pre-background: $background !default
-
-// Link colors
-
-$link: $blue !default
-$link-invert: findColorInvert($link) !default
-$link-light: findLightColor($link) !default
-$link-dark: findDarkColor($link) !default
-$link-visited: $purple !default
-
-$link-hover: $grey-darker !default
-$link-hover-border: $grey-light !default
-
-$link-focus: $grey-darker !default
-$link-focus-border: $blue !default
-
-$link-active: $grey-darker !default
-$link-active-border: $grey-dark !default
-
-// Typography
-
-$family-primary: $family-sans-serif !default
-$family-secondary: $family-sans-serif !default
-$family-code: $family-monospace !default
-
-$size-small: $size-7 !default
-$size-normal: $size-6 !default
-$size-medium: $size-5 !default
-$size-large: $size-4 !default
-
-// Effects
-
-$shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
-
-// Lists and maps
-$custom-colors: null !default
-$custom-shades: null !default
-
-$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default
-
-$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default
-
-$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default
--- /dev/null
+@import "initial-variables";
+@import "functions";
+
+$primary: $turquoise !default;
+
+$info: $cyan !default;
+$success: $green !default;
+$warning: $yellow !default;
+$danger: $red !default;
+
+$light: $white-ter !default;
+$dark: $grey-darker !default;
+
+// Invert colors
+
+$orange-invert: findColorInvert($orange) !default;
+$yellow-invert: findColorInvert($yellow) !default;
+$green-invert: findColorInvert($green) !default;
+$turquoise-invert: findColorInvert($turquoise) !default;
+$cyan-invert: findColorInvert($cyan) !default;
+$blue-invert: findColorInvert($blue) !default;
+$purple-invert: findColorInvert($purple) !default;
+$red-invert: findColorInvert($red) !default;
+
+$primary-invert: findColorInvert($primary) !default;
+$primary-light: findLightColor($primary) !default;
+$primary-dark: findDarkColor($primary) !default;
+$info-invert: findColorInvert($info) !default;
+$info-light: findLightColor($info) !default;
+$info-dark: findDarkColor($info) !default;
+$success-invert: findColorInvert($success) !default;
+$success-light: findLightColor($success) !default;
+$success-dark: findDarkColor($success) !default;
+$warning-invert: findColorInvert($warning) !default;
+$warning-light: findLightColor($warning) !default;
+$warning-dark: findDarkColor($warning) !default;
+$danger-invert: findColorInvert($danger) !default;
+$danger-light: findLightColor($danger) !default;
+$danger-dark: findDarkColor($danger) !default;
+$light-invert: findColorInvert($light) !default;
+$dark-invert: findColorInvert($dark) !default;
+
+// General colors
+
+$scheme-main: $white !default;
+$scheme-main-bis: $white-bis !default;
+$scheme-main-ter: $white-ter !default;
+$scheme-invert: $black !default;
+$scheme-invert-bis: $black-bis !default;
+$scheme-invert-ter: $black-ter !default;
+
+$background: $white-ter !default;
+
+$border: $grey-lighter !default;
+$border-hover: $grey-light !default;
+$border-light: $grey-lightest !default;
+$border-light-hover: $grey-light !default;
+
+// Text colors
+
+$text: $grey-dark !default;
+$text-invert: findColorInvert($text) !default;
+$text-light: $grey !default;
+$text-strong: $grey-darker !default;
+
+// Code colors
+
+$code: darken($red, 15%) !default;
+$code-background: $background !default;
+
+$pre: $text !default;
+$pre-background: $background !default;
+
+// Link colors
+
+$link: $blue !default;
+$link-invert: findColorInvert($link) !default;
+$link-light: findLightColor($link) !default;
+$link-dark: findDarkColor($link) !default;
+$link-visited: $purple !default;
+
+$link-hover: $grey-darker !default;
+$link-hover-border: $grey-light !default;
+
+$link-focus: $grey-darker !default;
+$link-focus-border: $blue !default;
+
+$link-active: $grey-darker !default;
+$link-active-border: $grey-dark !default;
+
+// Typography
+
+$family-primary: $family-sans-serif !default;
+$family-secondary: $family-sans-serif !default;
+$family-code: $family-monospace !default;
+
+$size-small: $size-7 !default;
+$size-normal: $size-6 !default;
+$size-medium: $size-5 !default;
+$size-large: $size-4 !default;
+
+// Effects
+
+$shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default;
+
+// Lists and maps
+$custom-colors: null !default;
+$custom-shades: null !default;
+
+$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default;
+
+$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default;
+
+$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default;
+++ /dev/null
-@import "mixins"
-
-%control
- +control
-
-%unselectable
- +unselectable
-
-%arrow
- +arrow
-
-%block
- +block
-
-%delete
- +delete
-
-%loader
- +loader
-
-%overlay
- +overlay
-
-%reset
- +reset
--- /dev/null
+@import "mixins";
+
+%control {
+ @include control;
+}
+
+%unselectable {
+ @include unselectable;
+}
+
+%arrow {
+ @include arrow;
+}
+
+%block {
+ @include block;
+}
+
+%delete {
+ @include delete;
+}
+
+%loader {
+ @include loader;
+}
+
+%overlay {
+ @include overlay;
+}
+
+%reset {
+ @include reset;
+}
+++ /dev/null
-@function mergeColorMaps($bulma-colors, $custom-colors)
- // We return at least Bulma's hard-coded colors
- $merged-colors: $bulma-colors
-
- // We want a map as input
- @if type-of($custom-colors) == 'map'
- @each $name, $components in $custom-colors
- // The color name should be a string
- // and the components either a single color
- // or a colors list with at least one element
- @if type-of($name) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1
- $color-base: null
- $color-invert: null
- $color-light: null
- $color-dark: null
- $value: null
-
- // The param can either be a single color
- // or a list of 2 colors
- @if type-of($components) == 'color'
- $color-base: $components
- $color-invert: findColorInvert($color-base)
- $color-light: findLightColor($color-base)
- $color-dark: findDarkColor($color-base)
- @else if type-of($components) == 'list'
- $color-base: nth($components, 1)
- // If Invert, Light and Dark are provided
- @if length($components) > 3
- $color-invert: nth($components, 2)
- $color-light: nth($components, 3)
- $color-dark: nth($components, 4)
- // If only Invert and Light are provided
- @else if length($components) > 2
- $color-invert: nth($components, 2)
- $color-light: nth($components, 3)
- $color-dark: findDarkColor($color-base)
- // If only Invert is provided
- @else
- $color-invert: nth($components, 2)
- $color-light: findLightColor($color-base)
- $color-dark: findDarkColor($color-base)
-
- $value: ($color-base, $color-invert, $color-light, $color-dark)
-
- // We only want to merge the map if the color base is an actual color
- @if type-of($color-base) == 'color'
- // We merge this colors elements as map with Bulma's colors map
- // (we can override them this way, no multiple definition for the same name)
- // $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark)))
- $merged-colors: map_merge($merged-colors, ($name: $value))
-
- @return $merged-colors
-
-@function powerNumber($number, $exp)
- $value: 1
- @if $exp > 0
- @for $i from 1 through $exp
- $value: $value * $number
- @else if $exp < 0
- @for $i from 1 through -$exp
- $value: divide($value, $number)
- @return $value
-
-@function colorLuminance($color)
- @if type-of($color) != 'color'
- @return 0.55
- $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
- @each $name, $value in $color-rgb
- $adjusted: 0
- $value: divide($value, 255)
- @if $value < 0.03928
- $value: divide($value, 12.92)
- @else
- $value: divide(($value + .055), 1.055)
- $value: powerNumber($value, 2)
- $color-rgb: map-merge($color-rgb, ($name: $value))
- @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
-
-@function findColorInvert($color)
- @if (colorLuminance($color) > 0.55)
- @return rgba(#000, 0.7)
- @else
- @return #fff
-
-@function findLightColor($color, $l: 96%)
- @if type-of($color) == 'color'
- $l: 96%
- @if lightness($color) > 96%
- $l: lightness($color)
- @return change-color($color, $lightness: $l)
- @return $background
-
-@function findDarkColor($color, $base-l: 29%)
- @if type-of($color) == 'color'
- $luminance: colorLuminance($color)
- $luminance-delta: (0.53 - $luminance)
- $target-l: round($base-l + ($luminance-delta * 53))
- @return change-color($color, $lightness: max($base-l, $target-l))
- @return $text-strong
-
-@function bulmaRgba($color, $alpha)
- @if type-of($color) != 'color'
- @return $color
- @return rgba($color, $alpha)
-
-@function bulmaDarken($color, $amount)
- @if type-of($color) != 'color'
- @return $color
- @return darken($color, $amount)
-
-@function bulmaLighten($color, $amount)
- @if type-of($color) != 'color'
- @return $color
- @return lighten($color, $amount)
-
-// Custom divide function by @mdo from https://github.com/twbs/bootstrap/pull/34245
-// Replaces old slash division deprecated in Dart Sass
-@function divide($dividend, $divisor, $precision: 10)
- $sign: if($dividend > 0 and $divisor > 0, 1, -1)
- $dividend: abs($dividend)
- $divisor: abs($divisor)
- $quotient: 0
- $remainder: $dividend
- @if $dividend == 0
- @return 0
- @if $divisor == 0
- @error "Cannot divide by 0"
- @if $divisor == 1
- @return $dividend
- @while $remainder >= $divisor
- $quotient: $quotient + 1
- $remainder: $remainder - $divisor
- @if $remainder > 0 and $precision > 0
- $remainder: divide($remainder * 10, $divisor, $precision - 1) * .1
- @return ($quotient + $remainder) * $sign
--- /dev/null
+@function mergeColorMaps($bulma-colors, $custom-colors) {
+ // We return at least Bulma's hard-coded colors
+ $merged-colors: $bulma-colors;
+
+ // We want a map as input
+ @if type-of($custom-colors) == "map" {
+ @each $name, $components in $custom-colors {
+ // The color name should be a string
+ // and the components either a single color
+ // or a colors list with at least one element
+ @if type-of($name) == "string" and (type-of($components) == "list" or type-of($components) == "color") and length($components) >= 1 {
+ $color-base: null;
+ $color-invert: null;
+ $color-light: null;
+ $color-dark: null;
+ $value: null;
+
+ // The param can either be a single color
+ // or a list of 2 colors
+ @if type-of($components) == "color" {
+ $color-base: $components;
+ $color-invert: findColorInvert($color-base);
+ $color-light: findLightColor($color-base);
+ $color-dark: findDarkColor($color-base);
+ }
+ @else if type-of($components) == "list" {
+ $color-base: nth($components, 1);
+
+ // If Invert, Light and Dark are provided
+ @if length($components) > 3 {
+ $color-invert: nth($components, 2);
+ $color-light: nth($components, 3);
+ $color-dark: nth($components, 4);
+
+ // If only Invert and Light are provided
+ }
+ @else if length($components) > 2 {
+ $color-invert: nth($components, 2);
+ $color-light: nth($components, 3);
+ $color-dark: findDarkColor($color-base);
+
+ // If only Invert is provided
+ }
+ @else {
+ $color-invert: nth($components, 2);
+ $color-light: findLightColor($color-base);
+ $color-dark: findDarkColor($color-base);
+ }
+ }
+
+ $value: $color-base, $color-invert, $color-light, $color-dark;
+
+ // We only want to merge the map if the color base is an actual color
+ @if type-of($color-base) == "color" {
+ // We merge this colors elements as map with Bulma's colors map
+ // (we can override them this way, no multiple definition for the same name)
+ // $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark)))
+ $merged-colors: map_merge($merged-colors, ($name: $value));
+ }
+ }
+ }
+ }
+
+ @return $merged-colors;
+}
+
+@function powerNumber($number, $exp) {
+ $value: 1;
+
+ @if $exp > 0 {
+ @for $i from 1 through $exp {
+ $value: $value * $number;
+ }
+ }
+ @else if $exp < 0 {
+ @for $i from 1 through -$exp {
+ $value: divide($value, $number);
+ }
+ }
+
+ @return $value;
+}
+
+@function colorLuminance($color) {
+ @if type-of($color) != "color" {
+ @return 0.55;
+ }
+
+ $color-rgb: ("red": red($color), "green": green($color), "blue": blue($color));
+
+ @each $name, $value in $color-rgb {
+ $adjusted: 0;
+ $value: divide($value, 255);
+
+ @if $value < 0.03928 {
+ $value: divide($value, 12.92);
+ }
+ @else {
+ $value: divide($value + 0.055, 1.055);
+ $value: powerNumber($value, 2);
+ }
+
+ $color-rgb: map-merge($color-rgb, ($name: $value));
+ }
+
+ @return map-get($color-rgb, "red") * 0.2126 + map-get($color-rgb, "green") * 0.7152 + map-get($color-rgb, "blue") * 0.0722;
+}
+
+@function findColorInvert($color) {
+ @if colorLuminance($color) > 0.55 {
+ @return rgba(#000, 0.7);
+ }
+ @else {
+ @return #fff;
+ }
+}
+
+@function findLightColor($color, $l: 96%) {
+ @if type-of($color) == "color" {
+ $l: 96%;
+
+ @if lightness($color) > 96% {
+ $l: lightness($color);
+ }
+
+ @return change-color($color, $lightness: $l);
+ }
+
+ @return $background;
+}
+
+@function findDarkColor($color, $base-l: 29%) {
+ @if type-of($color) == "color" {
+ $luminance: colorLuminance($color);
+ $luminance-delta: 0.53 - $luminance;
+ $target-l: round($base-l + $luminance-delta * 53);
+
+ @return change-color($color, $lightness: max($base-l, $target-l));
+ }
+
+ @return $text-strong;
+}
+
+@function bulmaRgba($color, $alpha) {
+ @if type-of($color) != "color" {
+ @return $color;
+ }
+
+ @return rgba($color, $alpha);
+}
+
+@function bulmaDarken($color, $amount) {
+ @if type-of($color) != "color" {
+ @return $color;
+ }
+
+ @return darken($color, $amount);
+}
+
+@function bulmaLighten($color, $amount) {
+ @if type-of($color) != "color" {
+ @return $color;
+ }
+
+ @return lighten($color, $amount);
+}
+
+// Custom divide function by @mdo from https://github.com/twbs/bootstrap/pull/34245
+// Replaces old slash division deprecated in Dart Sass
+@function divide($dividend, $divisor, $precision: 10) {
+ $sign: if($dividend > 0 and $divisor > 0, 1, -1);
+ $dividend: abs($dividend);
+ $divisor: abs($divisor);
+ $quotient: 0;
+ $remainder: $dividend;
+
+ @if $dividend == 0 {
+ @return 0;
+ }
+
+ @if $divisor == 0 {
+ @error "Cannot divide by 0";
+ }
+
+ @if $divisor == 1 {
+ @return $dividend;
+ }
+
+ @while $remainder >= $divisor {
+ $quotient: $quotient + 1;
+ $remainder: $remainder - $divisor;
+ }
+
+ @if $remainder > 0 and $precision > 0 {
+ $remainder: divide($remainder * 10, $divisor, $precision - 1) * 0.1;
+ }
+
+ @return ($quotient + $remainder) * $sign;
+}
+++ /dev/null
-// Colors
-
-$black: hsl(0, 0%, 4%) !default
-$black-bis: hsl(0, 0%, 7%) !default
-$black-ter: hsl(0, 0%, 14%) !default
-
-$grey-darker: hsl(0, 0%, 21%) !default
-$grey-dark: hsl(0, 0%, 29%) !default
-$grey: hsl(0, 0%, 48%) !default
-$grey-light: hsl(0, 0%, 71%) !default
-$grey-lighter: hsl(0, 0%, 86%) !default
-$grey-lightest: hsl(0, 0%, 93%) !default
-
-$white-ter: hsl(0, 0%, 96%) !default
-$white-bis: hsl(0, 0%, 98%) !default
-$white: hsl(0, 0%, 100%) !default
-
-$orange: hsl(14, 100%, 53%) !default
-$yellow: hsl(44, 100%, 77%) !default
-$green: hsl(153, 53%, 53%) !default
-$turquoise: hsl(171, 100%, 41%) !default
-$cyan: hsl(207, 61%, 53%) !default
-$blue: hsl(229, 53%, 53%) !default
-$purple: hsl(271, 100%, 71%) !default
-$red: hsl(348, 86%, 61%) !default
-
-// Typography
-
-$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
-$family-monospace: monospace !default
-$render-mode: optimizeLegibility !default
-
-$size-1: 3rem !default
-$size-2: 2.5rem !default
-$size-3: 2rem !default
-$size-4: 1.5rem !default
-$size-5: 1.25rem !default
-$size-6: 1rem !default
-$size-7: 0.75rem !default
-
-$weight-light: 300 !default
-$weight-normal: 400 !default
-$weight-medium: 500 !default
-$weight-semibold: 600 !default
-$weight-bold: 700 !default
-
-// Spacing
-
-$block-spacing: 1.5rem !default
-
-// Responsiveness
-
-// The container horizontal gap, which acts as the offset for breakpoints
-$gap: 32px !default
-// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
-$tablet: 769px !default
-// 960px container + 4rem
-$desktop: 960px + (2 * $gap) !default
-// 1152px container + 4rem
-$widescreen: 1152px + (2 * $gap) !default
-$widescreen-enabled: true !default
-// 1344px container + 4rem
-$fullhd: 1344px + (2 * $gap) !default
-$fullhd-enabled: true !default
-$breakpoints: ("mobile": ("until": $tablet), "tablet": ("from": $tablet), "tablet-only": ("from": $tablet, "until": $desktop), "touch": ("from": $desktop), "desktop": ("from": $desktop), "desktop-only": ("from": $desktop, "until": $widescreen), "until-widescreen": ("until": $widescreen), "widescreen": ("from": $widescreen), "widescreen-only": ("from": $widescreen, "until": $fullhd), "until-fullhd": ("until": $fullhd), "fullhd": ("from": $fullhd)) !default
-
-// Miscellaneous
-
-$easing: ease-out !default
-$radius-small: 2px !default
-$radius: 4px !default
-$radius-large: 6px !default
-$radius-rounded: 9999px !default
-$speed: 86ms !default
-
-// Flags
-
-$variable-columns: true !default
-$rtl: false !default
--- /dev/null
+// Colors
+
+$black: hsl(0, 0%, 4%) !default;
+$black-bis: hsl(0, 0%, 7%) !default;
+$black-ter: hsl(0, 0%, 14%) !default;
+
+$grey-darker: hsl(0, 0%, 21%) !default;
+$grey-dark: hsl(0, 0%, 29%) !default;
+$grey: hsl(0, 0%, 48%) !default;
+$grey-light: hsl(0, 0%, 71%) !default;
+$grey-lighter: hsl(0, 0%, 86%) !default;
+$grey-lightest: hsl(0, 0%, 93%) !default;
+
+$white-ter: hsl(0, 0%, 96%) !default;
+$white-bis: hsl(0, 0%, 98%) !default;
+$white: hsl(0, 0%, 100%) !default;
+
+$orange: hsl(14, 100%, 53%) !default;
+$yellow: hsl(44, 100%, 77%) !default;
+$green: hsl(153, 53%, 53%) !default;
+$turquoise: hsl(171, 100%, 41%) !default;
+$cyan: hsl(207, 61%, 53%) !default;
+$blue: hsl(229, 53%, 53%) !default;
+$purple: hsl(271, 100%, 71%) !default;
+$red: hsl(348, 86%, 61%) !default;
+
+// Typography
+
+$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
+$family-monospace: monospace !default;
+$render-mode: optimizeLegibility !default;
+
+$size-1: 3rem !default;
+$size-2: 2.5rem !default;
+$size-3: 2rem !default;
+$size-4: 1.5rem !default;
+$size-5: 1.25rem !default;
+$size-6: 1rem !default;
+$size-7: 0.75rem !default;
+
+$weight-light: 300 !default;
+$weight-normal: 400 !default;
+$weight-medium: 500 !default;
+$weight-semibold: 600 !default;
+$weight-bold: 700 !default;
+
+// Spacing
+
+$block-spacing: 1.5rem !default;
+
+// Responsiveness
+
+// The container horizontal gap, which acts as the offset for breakpoints
+$gap: 32px !default;
+
+// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
+$tablet: 769px !default;
+
+// 960px container + 4rem
+$desktop: 960px + 2 * $gap !default;
+
+// 1152px container + 4rem
+$widescreen: 1152px + 2 * $gap !default;
+$widescreen-enabled: true !default;
+
+// 1344px container + 4rem
+$fullhd: 1344px + 2 * $gap !default;
+$fullhd-enabled: true !default;
+$breakpoints: ("mobile": ("until": $tablet), "tablet": ("from": $tablet), "tablet-only": ("from": $tablet, "until": $desktop), "touch": ("from": $desktop), "desktop": ("from": $desktop), "desktop-only": ("from": $desktop, "until": $widescreen), "until-widescreen": ("until": $widescreen), "widescreen": ("from": $widescreen), "widescreen-only": ("from": $widescreen, "until": $fullhd), "until-fullhd": ("until": $fullhd), "fullhd": ("from": $fullhd)) !default;
+
+// Miscellaneous
+
+$easing: ease-out !default;
+$radius-small: 2px !default;
+$radius: 4px !default;
+$radius-large: 6px !default;
+$radius-rounded: 9999px !default;
+$speed: 86ms !default;
+
+// Flags
+
+$variable-columns: true !default;
+$rtl: false !default;
+++ /dev/null
-@import "derived-variables"
-
-=clearfix
- &::after
- clear: both
- content: " "
- display: table
-
-=center($width, $height: 0)
- position: absolute
- @if $height != 0
- left: calc(50% - (#{$width} * 0.5))
- top: calc(50% - (#{$height} * 0.5))
- @else
- left: calc(50% - (#{$width} * 0.5))
- top: calc(50% - (#{$width} * 0.5))
-
-=fa($size, $dimensions)
- display: inline-block
- font-size: $size
- height: $dimensions
- line-height: $dimensions
- text-align: center
- vertical-align: top
- width: $dimensions
-
-=hamburger($dimensions)
- -moz-appearance: none
- -webkit-appearance: none
- appearance: none
- background: none
- border: none
- cursor: pointer
- display: block
- height: $dimensions
- position: relative
- width: $dimensions
- span
- background-color: currentColor
- display: block
- height: 1px
- left: calc(50% - 8px)
- position: absolute
- transform-origin: center
- transition-duration: $speed
- transition-property: background-color, opacity, transform
- transition-timing-function: $easing
- width: 16px
- &:nth-child(1)
- top: calc(50% - 6px)
- &:nth-child(2)
- top: calc(50% - 1px)
- &:nth-child(3)
- top: calc(50% + 4px)
- &:hover
- background-color: bulmaRgba(black, 0.05)
- // Modifers
- &.is-active
- span
- &:nth-child(1)
- transform: translateY(5px) rotate(45deg)
- &:nth-child(2)
- opacity: 0
- &:nth-child(3)
- transform: translateY(-5px) rotate(-45deg)
-
-=overflow-touch
- -webkit-overflow-scrolling: touch
-
-=placeholder
- $placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
- @each $placeholder in $placeholders
- &:#{$placeholder}-placeholder
- @content
-
-=reset
- -moz-appearance: none
- -webkit-appearance: none
- appearance: none
- background: none
- border: none
- color: currentColor
- font-family: inherit
- font-size: 1em
- margin: 0
- padding: 0
-
-// Responsiveness
-
-=from($device)
- @media screen and (min-width: $device)
- @content
-
-=until($device)
- @media screen and (max-width: $device - 1px)
- @content
-
-=between($from, $until)
- @media screen and (min-width: $from) and (max-width: $until - 1px)
- @content
-
-=mobile
- @media screen and (max-width: $tablet - 1px)
- @content
-
-=tablet
- @media screen and (min-width: $tablet), print
- @content
-
-=tablet-only
- @media screen and (min-width: $tablet) and (max-width: $desktop - 1px)
- @content
-
-=touch
- @media screen and (max-width: $desktop - 1px)
- @content
-
-=desktop
- @media screen and (min-width: $desktop)
- @content
-
-=desktop-only
- @if $widescreen-enabled
- @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
- @content
-
-=until-widescreen
- @if $widescreen-enabled
- @media screen and (max-width: $widescreen - 1px)
- @content
-
-=widescreen
- @if $widescreen-enabled
- @media screen and (min-width: $widescreen)
- @content
-
-=widescreen-only
- @if $widescreen-enabled and $fullhd-enabled
- @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)
- @content
-
-=until-fullhd
- @if $fullhd-enabled
- @media screen and (max-width: $fullhd - 1px)
- @content
-
-=fullhd
- @if $fullhd-enabled
- @media screen and (min-width: $fullhd)
- @content
-
-=breakpoint($name)
- $breakpoint: map-get($breakpoints, $name)
- @if $breakpoint
- $from: map-get($breakpoint, "from")
- $until: map-get($breakpoint, "until")
- @if $from and $until
- +between($from, $until)
- @content
- @else if $from
- +from($from)
- @content
- @else if $until
- +until($until)
- @content
-
-=ltr
- @if not $rtl
- @content
-
-=rtl
- @if $rtl
- @content
-
-=ltr-property($property, $spacing, $right: true)
- $normal: if($right, "right", "left")
- $opposite: if($right, "left", "right")
- @if $rtl
- #{$property}-#{$opposite}: $spacing
- @else
- #{$property}-#{$normal}: $spacing
-
-=ltr-position($spacing, $right: true)
- $normal: if($right, "right", "left")
- $opposite: if($right, "left", "right")
- @if $rtl
- #{$opposite}: $spacing
- @else
- #{$normal}: $spacing
-
-// Placeholders
-
-=unselectable
- -webkit-touch-callout: none
- -webkit-user-select: none
- -moz-user-select: none
- -ms-user-select: none
- user-select: none
-
-=arrow($color: transparent)
- border: 3px solid $color
- border-radius: 2px
- border-right: 0
- border-top: 0
- content: " "
- display: block
- height: 0.625em
- margin-top: -0.4375em
- pointer-events: none
- position: absolute
- top: 50%
- transform: rotate(-45deg)
- transform-origin: center
- width: 0.625em
-
-=block($spacing: $block-spacing)
- &:not(:last-child)
- margin-bottom: $spacing
-
-=delete
- +unselectable
- -moz-appearance: none
- -webkit-appearance: none
- background-color: bulmaRgba($scheme-invert, 0.2)
- border: none
- border-radius: $radius-rounded
- cursor: pointer
- pointer-events: auto
- display: inline-block
- flex-grow: 0
- flex-shrink: 0
- font-size: 0
- height: 20px
- max-height: 20px
- max-width: 20px
- min-height: 20px
- min-width: 20px
- outline: none
- position: relative
- vertical-align: top
- width: 20px
- &::before,
- &::after
- background-color: $scheme-main
- content: ""
- display: block
- left: 50%
- position: absolute
- top: 50%
- transform: translateX(-50%) translateY(-50%) rotate(45deg)
- transform-origin: center center
- &::before
- height: 2px
- width: 50%
- &::after
- height: 50%
- width: 2px
- &:hover,
- &:focus
- background-color: bulmaRgba($scheme-invert, 0.3)
- &:active
- background-color: bulmaRgba($scheme-invert, 0.4)
- // Sizes
- &.is-small
- height: 16px
- max-height: 16px
- max-width: 16px
- min-height: 16px
- min-width: 16px
- width: 16px
- &.is-medium
- height: 24px
- max-height: 24px
- max-width: 24px
- min-height: 24px
- min-width: 24px
- width: 24px
- &.is-large
- height: 32px
- max-height: 32px
- max-width: 32px
- min-height: 32px
- min-width: 32px
- width: 32px
-
-=loader
- animation: spinAround 500ms infinite linear
- border: 2px solid $grey-lighter
- border-radius: $radius-rounded
- border-right-color: transparent
- border-top-color: transparent
- content: ""
- display: block
- height: 1em
- position: relative
- width: 1em
-
-=overlay($offset: 0)
- bottom: $offset
- left: $offset
- position: absolute
- right: $offset
- top: $offset
--- /dev/null
+@import "derived-variables";
+
+@mixin clearfix {
+ &::after {
+ clear: both;
+ content: " ";
+ display: table;
+ }
+}
+
+@mixin center($width, $height: 0) {
+ position: absolute;
+
+ @if $height != 0 {
+ left: calc(50% - (#{$width} * 0.5));
+ top: calc(50% - (#{$height} * 0.5));
+ }
+ @else {
+ left: calc(50% - (#{$width} * 0.5));
+ top: calc(50% - (#{$width} * 0.5));
+ }
+}
+
+@mixin fa($size, $dimensions) {
+ display: inline-block;
+ font-size: $size;
+ height: $dimensions;
+ line-height: $dimensions;
+ text-align: center;
+ vertical-align: top;
+ width: $dimensions;
+}
+
+@mixin hamburger($dimensions) {
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ appearance: none;
+ background: none;
+ border: none;
+ cursor: pointer;
+ display: block;
+ height: $dimensions;
+ position: relative;
+ width: $dimensions;
+
+ span {
+ background-color: currentColor;
+ display: block;
+ height: 1px;
+ left: calc(50% - 8px);
+ position: absolute;
+ transform-origin: center;
+ transition-duration: $speed;
+ transition-property: background-color, opacity, transform;
+ transition-timing-function: $easing;
+ width: 16px;
+
+ &:nth-child(1) {
+ top: calc(50% - 6px);
+ }
+
+ &:nth-child(2) {
+ top: calc(50% - 1px);
+ }
+
+ &:nth-child(3) {
+ top: calc(50% + 4px);
+ }
+ }
+
+ &:hover {
+ background-color: bulmaRgba(black, 0.05);
+ }
+
+ // Modifers
+ &.is-active {
+ span {
+ &:nth-child(1) {
+ transform: translateY(5px) rotate(45deg);
+ }
+
+ &:nth-child(2) {
+ opacity: 0;
+ }
+
+ &:nth-child(3) {
+ transform: translateY(-5px) rotate(-45deg);
+ }
+ }
+ }
+}
+
+@mixin overflow-touch {
+ -webkit-overflow-scrolling: touch;
+}
+
+@mixin placeholder {
+ $placeholders: ":-moz" ":-webkit-input" "-moz" "-ms-input";
+
+ @each $placeholder in $placeholders {
+ &:#{$placeholder}-placeholder {
+ @content;
+ }
+ }
+}
+
+@mixin reset {
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ appearance: none;
+ background: none;
+ border: none;
+ color: currentColor;
+ font-family: inherit;
+ font-size: 1em;
+ margin: 0;
+ padding: 0;
+}
+
+// Responsiveness
+
+@mixin from($device) {
+ @media screen and (min-width: $device) {
+ @content;
+ }
+}
+
+@mixin until($device) {
+ @media screen and (max-width: $device - 1px) {
+ @content;
+ }
+}
+
+@mixin between($from, $until) {
+ @media screen and (min-width: $from) and (max-width: $until - 1px) {
+ @content;
+ }
+}
+
+@mixin mobile {
+ @media screen and (max-width: $tablet - 1px) {
+ @content;
+ }
+}
+
+@mixin tablet {
+ @media screen and (min-width: $tablet), print {
+ @content;
+ }
+}
+
+@mixin tablet-only {
+ @media screen and (min-width: $tablet) and (max-width: $desktop - 1px) {
+ @content;
+ }
+}
+
+@mixin touch {
+ @media screen and (max-width: $desktop - 1px) {
+ @content;
+ }
+}
+
+@mixin desktop {
+ @media screen and (min-width: $desktop) {
+ @content;
+ }
+}
+
+@mixin desktop-only {
+ @if $widescreen-enabled {
+ @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px) {
+ @content;
+ }
+ }
+}
+
+@mixin until-widescreen {
+ @if $widescreen-enabled {
+ @media screen and (max-width: $widescreen - 1px) {
+ @content;
+ }
+ }
+}
+
+@mixin widescreen {
+ @if $widescreen-enabled {
+ @media screen and (min-width: $widescreen) {
+ @content;
+ }
+ }
+}
+
+@mixin widescreen-only {
+ @if $widescreen-enabled and $fullhd-enabled {
+ @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px) {
+ @content;
+ }
+ }
+}
+
+@mixin until-fullhd {
+ @if $fullhd-enabled {
+ @media screen and (max-width: $fullhd - 1px) {
+ @content;
+ }
+ }
+}
+
+@mixin fullhd {
+ @if $fullhd-enabled {
+ @media screen and (min-width: $fullhd) {
+ @content;
+ }
+ }
+}
+
+@mixin breakpoint($name) {
+ $breakpoint: map-get($breakpoints, $name);
+
+ @if $breakpoint {
+ $from: map-get($breakpoint, "from");
+ $until: map-get($breakpoint, "until");
+
+ @if $from and $until {
+ @include between($from, $until) {
+ @content;
+ }
+ }
+ @else if $from {
+ @include from($from) {
+ @content;
+ }
+ }
+ @else if $until {
+ @include until($until) {
+ @content;
+ }
+ }
+ }
+}
+
+@mixin ltr {
+ @if not $rtl {
+ @content;
+ }
+}
+
+@mixin rtl {
+ @if $rtl {
+ @content;
+ }
+}
+
+@mixin ltr-property($property, $spacing, $right: true) {
+ $normal: if($right, "right", "left");
+ $opposite: if($right, "left", "right");
+
+ @if $rtl {
+ #{$property}-#{$opposite}: $spacing;
+ }
+ @else {
+ #{$property}-#{$normal}: $spacing;
+ }
+}
+
+@mixin ltr-position($spacing, $right: true) {
+ $normal: if($right, "right", "left");
+ $opposite: if($right, "left", "right");
+
+ @if $rtl {
+ #{$opposite}: $spacing;
+ }
+ @else {
+ #{$normal}: $spacing;
+ }
+}
+
+// Placeholders
+
+@mixin unselectable {
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+@mixin arrow($color: transparent) {
+ border: 3px solid $color;
+ border-radius: 2px;
+ border-right: 0;
+ border-top: 0;
+ content: " ";
+ display: block;
+ height: 0.625em;
+ margin-top: -0.4375em;
+ pointer-events: none;
+ position: absolute;
+ top: 50%;
+ transform: rotate(-45deg);
+ transform-origin: center;
+ width: 0.625em;
+}
+
+@mixin block($spacing: $block-spacing) {
+ &:not(:last-child) {
+ margin-bottom: $spacing;
+ }
+}
+
+@mixin delete {
+ @include unselectable;
+
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ background-color: bulmaRgba($scheme-invert, 0.2);
+ border: none;
+ border-radius: $radius-rounded;
+ cursor: pointer;
+ pointer-events: auto;
+ display: inline-block;
+ flex-grow: 0;
+ flex-shrink: 0;
+ font-size: 0;
+ height: 20px;
+ max-height: 20px;
+ max-width: 20px;
+ min-height: 20px;
+ min-width: 20px;
+ outline: none;
+ position: relative;
+ vertical-align: top;
+ width: 20px;
+
+ &::before,
+ &::after {
+ background-color: $scheme-main;
+ content: "";
+ display: block;
+ left: 50%;
+ position: absolute;
+ top: 50%;
+ transform: translateX(-50%) translateY(-50%) rotate(45deg);
+ transform-origin: center center;
+ }
+
+ &::before {
+ height: 2px;
+ width: 50%;
+ }
+
+ &::after {
+ height: 50%;
+ width: 2px;
+ }
+
+ &:hover,
+ &:focus {
+ background-color: bulmaRgba($scheme-invert, 0.3);
+ }
+
+ &:active {
+ background-color: bulmaRgba($scheme-invert, 0.4);
+ }
+
+ // Sizes
+ &.is-small {
+ height: 16px;
+ max-height: 16px;
+ max-width: 16px;
+ min-height: 16px;
+ min-width: 16px;
+ width: 16px;
+ }
+
+ &.is-medium {
+ height: 24px;
+ max-height: 24px;
+ max-width: 24px;
+ min-height: 24px;
+ min-width: 24px;
+ width: 24px;
+ }
+
+ &.is-large {
+ height: 32px;
+ max-height: 32px;
+ max-width: 32px;
+ min-height: 32px;
+ min-width: 32px;
+ width: 32px;
+ }
+}
+
+@mixin loader {
+ animation: spinAround 500ms infinite linear;
+ border: 2px solid $grey-lighter;
+ border-radius: $radius-rounded;
+ border-right-color: transparent;
+ border-top-color: transparent;
+ content: "";
+ display: block;
+ height: 1em;
+ position: relative;
+ width: 1em;
+}
+
+@mixin overlay($offset: 0) {
+ bottom: $offset;
+ left: $offset;
+ position: absolute;
+ right: $offset;
+ top: $offset;
+}
-const fs = require('fs');
-const path = require('path');
-const sass = require('sass');
-const utils = require('../utils');
+const fs = require("fs");
+const path = require("path");
+const sass = require("sass");
+const utils = require("../utils");
-const DART_BASE_PATH = 'test/dart-sass/build/';
+const DART_BASE_PATH = "test/dart-sass/build/";
fs.mkdir(DART_BASE_PATH, { recursive: true }, (err) => {
if (err) throw err;
});
const exportDartCSS = (filepath, options) => {
- utils.exportCSS(sass, fs, DART_BASE_PATH, filepath, options)
-}
+ utils.exportCSS(sass, fs, DART_BASE_PATH, filepath, options);
+};
// Full import
-exportDartCSS('bulma', {
- file: './bulma.sass',
+exportDartCSS("bulma", {
+ file: "./bulma.scss",
});
-exportDartCSS('bulma-rtl', {
- file: './bulma-rtl.sass',
+exportDartCSS("bulma-rtl", {
+ file: "./bulma-rtl.scss",
});
// Custom import
if (err) throw err;
});
-utils.exportCSS(sass, fs, DART_BASE_PATH, 'custom/navbar', {
- data: '@use "./sass/components/navbar.sass" with ( $scheme-main: red );',
+utils.exportCSS(sass, fs, DART_BASE_PATH, "custom/navbar", {
+ data: '@use "./sass/components/navbar.scss" with ( $scheme-main: red );',
});
// Single imports
-const fs = require('fs');
-const path = require('path');
-const sass = require('node-sass');
-const utils = require('../utils');
+const fs = require("fs");
+const path = require("path");
+const sass = require("node-sass");
+const utils = require("../utils");
-const NODE_SASS_BASE_PATH = 'test/node-sass/build/';
+const NODE_SASS_BASE_PATH = "test/node-sass/build/";
fs.mkdir(NODE_SASS_BASE_PATH, { recursive: true }, (err) => {
if (err) throw err;
});
const exportNodeSassCSS = (filepath, options) => {
- utils.exportCSS(sass, fs, NODE_SASS_BASE_PATH, filepath, options)
-}
+ utils.exportCSS(sass, fs, NODE_SASS_BASE_PATH, filepath, options);
+};
// Full import
-exportNodeSassCSS('bulma', {
- file: './bulma.sass',
+exportNodeSassCSS("bulma", {
+ file: "./bulma.scss",
});
-exportNodeSassCSS('bulma-rtl', {
- file: './bulma-rtl.sass',
+exportNodeSassCSS("bulma-rtl", {
+ file: "./bulma-rtl.scss",
});
// Single imports
utils.SOURCES.forEach((source) => {
const parsed = path.parse(source);
- fs.mkdir(`${NODE_SASS_BASE_PATH}${parsed.dir}`, { recursive: true }, (err) => {
- if (err) throw err;
- });
+ fs.mkdir(
+ `${NODE_SASS_BASE_PATH}${parsed.dir}`,
+ { recursive: true },
+ (err) => {
+ if (err) throw err;
+ }
+ );
exportNodeSassCSS(`${parsed.dir}/${parsed.name}`, {
data: `@import "${BULMA_IMPORT_PATH}${source}";`,
@charset "utf-8";
// Import a Google Font
-@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
+@import url("https://fonts.googleapis.com/css?family=Nunito:400,700");
// Set your brand colors
-$purple: #8A4D76;
-$pink: #FA7C91;
+$purple: #8a4d76;
+$pink: #fa7c91;
$brown: #757763;
-$beige-light: #D0D1CD;
-$beige-lighter: #EFF0EB;
+$beige-light: #d0d1cd;
+$beige-lighter: #eff0eb;
// Update Bulma's global variables
$family-sans-serif: "Nunito", sans-serif;
$input-shadow: none;
// Import only what you need from Bulma
-@import "../../../sass/utilities/_all.sass";
-@import "../../../sass/base/_all.sass";
-@import "../../../sass/elements/button.sass";
-@import "../../../sass/elements/container.sass";
-@import "../../../sass/elements/title.sass";
-@import "../../../sass/form/_all.sass";
-@import "../../../sass/components/navbar.sass";
-@import "../../../sass/layout/hero.sass";
-@import "../../../sass/layout/section.sass";
+@import "../../../sass/utilities/_all";
+@import "../../../sass/base/_all";
+@import "../../../sass/elements/button";
+@import "../../../sass/elements/container";
+@import "../../../sass/elements/title";
+@import "../../../sass/form/_all";
+@import "../../../sass/components/navbar";
+@import "../../../sass/layout/hero";
+@import "../../../sass/layout/section";
@charset "utf-8";
// Import the variables
-@import "../../../sass/utilities/initial-variables.sass";
+@import "../../../sass/utilities/initial-variables";
$blue: #00f;
-$purple: #8A4D76;
-$pink: #FA7C91;
+$purple: #8a4d76;
+$pink: #fa7c91;
$brown: #757763;
-$beige-light: #D0D1CD;
-$beige-lighter: #EFF0EB;
+$beige-light: #d0d1cd;
+$beige-lighter: #eff0eb;
$grey-dark: $brown;
$grey-light: $beige-light;
$lavender-dark: hsl(240, 31%, 24%);
$custom-colors: (
- "lime": (lime),
- "tomato": (tomato, white),
- "orange": ($orange, $orange-invert, $orange-light),
- "lavender": ($lavender, $lavender-invert, $lavender-light, $lavender-dark)
+ "lime": (
+ lime
+ ),
+ "tomato": (
+ tomato,
+ white
+ ),
+ "orange": (
+ $orange,
+ $orange-invert,
+ $orange-light
+ ),
+ "lavender": (
+ $lavender,
+ $lavender-invert,
+ $lavender-light,
+ $lavender-dark
+ )
);
-$spacing-shortcuts: ("margin": "mg");
+$spacing-shortcuts: (
+ "margin": "mg"
+);
$spacing-horizontal: "h";
$spacing-vertical: null;
-$spacing-values: ("small": 10px, "medium": 30px, "large": 60px);
+$spacing-values: (
+ "small": 10px,
+ "medium": 30px,
+ "large": 60px
+);
// Import the rest of Bulma
@import "../../../bulma";
projects / thirdparty / bulma.git / commitdiff
