Convert sass files to scss files

.github/CONTRIBUTING.md

@@ -2,20 +2,20 @@ Thanks for helping out! 😇
 
 ### Raising an issue
 
-* Make sure the issue hasn't been raised yet
+- Make sure the issue hasn't been raised yet
-* Include **screenshots** and animated GIFs in your issue whenever possible
+- 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
+- Include **screenshots** and animated GIFs in your pull request whenever possible
-* Use the **present** tense ("Add feature" not "Added feature")
+- Use the **present** tense ("Add feature" not "Added feature")
-* Use the **imperative** mood ("Move cursor to..." not "Moves cursor to...")
+- Use the **imperative** mood ("Move cursor to..." not "Moves cursor to...")
-* Limit the first line to 72 characters or fewer
+- Limit the first line to 72 characters or fewer
-* Reference issues and pull requests liberally
+- 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
@@ -26,21 +26,21 @@ To see documentation changes check [the documentation readme](../docs/README.md)
 
 ### Bulma Sass styleguide
 
-* **No semi-colons** `;` or **curly braces** `{` `}`
+- **No semi-colons** `;` or **curly braces** `{` `}`
-* **No camelCase**
+- **No camelCase**
-* Use only **classes**
+- Use only **classes**
-* Order the CSS properties **alphabetically**
+- Order the CSS properties **alphabetically**
-* Order the CSS rule by
+- Order the CSS rule by
-  * direct styles
+  - direct styles
-  * nested tags
+  - nested tags
-  * pseudo-classes
+  - pseudo-classes
-  * color modifiers
+  - color modifiers
-  * size modifiers
+  - size modifiers
-  * modifiers
+  - modifiers
-  * responsive styles
+  - responsive styles
-* Add appropriate one-line comments for each of these sections within a CSS rule
+- Add appropriate one-line comments for each of these sections within a CSS rule
-* **No trailing space**
+- **No trailing space**
-* End files with a **newline**
+- End files with a **newline**
 
 ```sass
 .element

.github/PULL_REQUEST_TEMPLATE.md

@@ -2,7 +2,9 @@
 <!-- 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. -->
@@ -24,7 +26,7 @@ None.
 <!-- 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? -->

bower.json

@@ -4,8 +4,16 @@
   "homepage": "https://bulma.io",
   "authors": ["jgthms <bbxdesign@gmail.com>"],
   "description": "Modern CSS framework based on Flexbox",
-  "main": "bulma.sass",
+  "main": "bulma.scss",
-  "keywords": ["css", "sass", "flexbox", "responsive", "framework"],
+  "keywords": [
+    "css",
+    "sass",
+    "scss",
+    "modern",
+    "flexbox",
+    "responsive",
+    "framework"
+  ],
   "license": "MIT",
   "ignore": [
     "**/.*",

bulma-rtl.sass

@@ -1,3 +0,0 @@
-@charset "utf-8"
-$rtl: true
-@import "bulma"

bulma-rtl.scss

@@ -0,0 +1,5 @@
+@charset "utf-8";
+
+$rtl: true;
+
+@import "bulma";

bulma.sass

@@ -1,10 +0,0 @@
-@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"

bulma.scss

@@ -0,0 +1,11 @@
+@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";

package.json

@@ -8,7 +8,7 @@
     "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": {
@@ -19,6 +19,8 @@
   "keywords": [
     "css",
     "sass",
+    "scss",
+    "modern",
     "flexbox",
     "responsive",
     "framework"
@@ -37,10 +39,10 @@
     "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",
@@ -49,7 +51,8 @@
   "files": [
     "css",
     "sass",
-    "bulma.sass",
+    "bulma.scss",
+    "bulma-rtl.scss",
     "LICENSE",
     "README.md"
   ]

sass/base/_all.sass

@@ -1,6 +0,0 @@
-/* Bulma Base */
-@charset "utf-8"
-
-@import "minireset"
-@import "generic"
-@import "animations"

sass/base/_all.scss

@@ -0,0 +1,6 @@
+/* Bulma Base */
+@charset "utf-8";
+
+@import "minireset";
+@import "generic";
+@import "animations";

sass/base/animations.sass

@@ -1,5 +0,0 @@
-@keyframes spinAround
-  from
-    transform: rotate(0deg)
-  to
-    transform: rotate(359deg)

sass/base/animations.scss

@@ -0,0 +1,9 @@
+@keyframes spinAround {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(359deg);
+  }
+}

sass/base/generic.sass

@@ -1,145 +0,0 @@
-@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

sass/base/generic.scss

@@ -0,0 +1,173 @@
+@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;
+  }
+}

sass/base/helpers.sass

@@ -1 +0,0 @@
-@warn "The helpers.sass file is DEPRECATED. It has moved into its own /helpers folder. Please import sass/helpers/_all instead."

sass/base/helpers.scss

@@ -0,0 +1 @@
+@warn "The helpers.scss file is DEPRECATED. It has moved into its own /helpers folder. Please import sass/helpers/_all instead.";

sass/base/minireset.sass

@@ -1,79 +0,0 @@
-/*! 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

sass/base/minireset.scss

@@ -0,0 +1,92 @@
+/*! 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;
+  }
+}

sass/components/_all.sass

@@ -1,15 +0,0 @@
-/* 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"

sass/components/_all.scss

@@ -0,0 +1,15 @@
+/* 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";

sass/components/breadcrumb.sass

@@ -1,77 +0,0 @@
-@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"

sass/components/breadcrumb.scss

@@ -0,0 +1,124 @@
+@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: "≻";
+    }
+  }
+}

sass/components/card.sass

@@ -1,103 +0,0 @@
-@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

sass/components/card.scss

@@ -0,0 +1,131 @@
+@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;
+  }
+}

sass/components/dropdown.sass

@@ -1,83 +0,0 @@
-@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

sass/components/dropdown.scss

@@ -0,0 +1,105 @@
+@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;
+}

sass/components/level.sass

@@ -1,79 +0,0 @@
-@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

sass/components/level.scss

@@ -0,0 +1,125 @@
+@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;
+  }
+}

sass/components/media.sass

@@ -1,59 +0,0 @@
-@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

sass/components/media.scss

@@ -0,0 +1,81 @@
+@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;
+  }
+}

sass/components/menu.sass

@@ -1,59 +0,0 @@
-@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

sass/components/menu.scss

@@ -0,0 +1,83 @@
+@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;
+  }
+}

sass/components/message.sass

@@ -1,101 +0,0 @@
-@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

sass/components/message.scss

@@ -0,0 +1,136 @@
+@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;
+  }
+}

sass/components/modal.sass

@@ -1,117 +0,0 @@
-@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

sass/components/modal.scss

@@ -0,0 +1,140 @@
+@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;
+}

sass/components/navbar.sass

@@ -1,446 +0,0 @@
-@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})

sass/components/navbar.scss

@@ -0,0 +1,668 @@
+@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});
+  }
+}

sass/components/pagination.sass

@@ -1,167 +0,0 @@
-@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

sass/components/pagination.scss

@@ -0,0 +1,232 @@
+@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;
+      }
+    }
+  }
+}

sass/components/panel.sass

@@ -1,121 +0,0 @@
-@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

sass/components/panel.scss

@@ -0,0 +1,166 @@
+@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;
+  }
+}

sass/components/tabs.sass

@@ -1,176 +0,0 @@
-@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

sass/components/tabs.scss

@@ -0,0 +1,271 @@
+@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;
+  }
+}

sass/elements/_all.sass

@@ -1,16 +0,0 @@
-/* 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"

sass/elements/_all.scss

@@ -0,0 +1,16 @@
+/* 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";

sass/elements/box.sass

@@ -1,26 +0,0 @@
-@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

sass/elements/box.scss

@@ -0,0 +1,32 @@
+@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;
+  }
+}

sass/elements/button.sass

@@ -1,357 +0,0 @@
-@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

sass/elements/button.scss

@@ -0,0 +1,530 @@
+@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;
+        }
+      }
+    }
+  }
+}

sass/elements/container.sass

@@ -1,29 +0,0 @@
-@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

sass/elements/container.scss

@@ -0,0 +1,50 @@
+@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;
+    }
+  }
+}

sass/elements/content.sass

@@ -1,162 +0,0 @@
-@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

sass/elements/content.scss

@@ -0,0 +1,261 @@
+@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;
+  }
+}

sass/elements/form.sass

@@ -1 +0,0 @@
-@warn "The form.sass file is DEPRECATED. It has moved into its own /form folder. Please import sass/form/_all instead."

sass/elements/form.scss

@@ -0,0 +1 @@
+@warn "The form.scss file is DEPRECATED. It has moved into its own /form folder. Please import sass/form/_all instead.";

sass/elements/icon.sass

@@ -1,46 +0,0 @@
-$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

sass/elements/icon.scss

@@ -0,0 +1,69 @@
+$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;
+}

sass/elements/image.sass

@@ -1,73 +0,0 @@
-@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

sass/elements/image.scss

@@ -0,0 +1,117 @@
+@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;
+    }
+  }
+}

sass/elements/notification.sass

@@ -1,52 +0,0 @@
-@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

sass/elements/notification.scss

@@ -0,0 +1,81 @@
+@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;
+        }
+      }
+    }
+  }
+}

sass/elements/other.sass

@@ -1,31 +0,0 @@
-@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

sass/elements/other.scss

@@ -0,0 +1,36 @@
+@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;
+}

sass/elements/progress.sass

@@ -1,73 +0,0 @@
-@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

sass/elements/progress.scss

@@ -0,0 +1,110 @@
+@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;
+  }
+}

sass/elements/table.sass

@@ -1,134 +0,0 @@
-@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%

sass/elements/table.scss

@@ -0,0 +1,207 @@
+@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%;
+}

sass/elements/tag.sass

@@ -1,140 +0,0 @@
-@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

sass/elements/tag.scss

@@ -0,0 +1,222 @@
+@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;
+  }
+}

sass/elements/title.sass

@@ -1,70 +0,0 @@
-@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

sass/elements/title.scss

@@ -0,0 +1,104 @@
+@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;
+    }
+  }
+}

sass/form/_all.sass

@@ -1,9 +0,0 @@
-/* Bulma Form */
-@charset "utf-8"
-
-@import "shared"
-@import "input-textarea"
-@import "checkbox-radio"
-@import "select"
-@import "file"
-@import "tools"

sass/form/_all.scss

@@ -0,0 +1,9 @@
+/* Bulma Form */
+@charset "utf-8";
+
+@import "shared";
+@import "input-textarea";
+@import "checkbox-radio";
+@import "select";
+@import "file";
+@import "tools";

sass/form/checkbox-radio.sass

@@ -1,22 +0,0 @@
-%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)

sass/form/checkbox-radio.scss

@@ -0,0 +1,33 @@
+%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);
+  }
+}

sass/form/file.sass

@@ -1,184 +0,0 @@
-$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

sass/form/file.scss

@@ -0,0 +1,283 @@
+$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;
+  }
+}

sass/form/input-textarea.sass

@@ -1,66 +0,0 @@
-$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

sass/form/input-textarea.scss

@@ -0,0 +1,99 @@
+$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;
+  }
+}

sass/form/select.sass

@@ -1,88 +0,0 @@
-$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

sass/form/select.scss

@@ -0,0 +1,153 @@
+$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;
+    }
+  }
+}

sass/form/shared.sass

@@ -1,60 +0,0 @@
-@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

sass/form/shared.scss

@@ -0,0 +1,74 @@
+@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;
+}

sass/form/tools.sass

@@ -1,215 +0,0 @@
-$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

sass/form/tools.scss

@@ -0,0 +1,360 @@
+$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;
+    }
+  }
+}

sass/grid/_all.sass

@@ -1,5 +0,0 @@
-/* Bulma Grid */
-@charset "utf-8"
-
-@import "columns"
-@import "tiles"

sass/grid/_all.scss

@@ -0,0 +1,5 @@
+/* Bulma Grid */
+@charset "utf-8";
+
+@import "columns";
+@import "tiles";

sass/grid/columns.sass

@@ -1,513 +0,0 @@
-@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}

sass/grid/columns.scss

@@ -0,0 +1,913 @@
+@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};
+        }
+      }
+    }
+  }
+}

sass/grid/tiles.sass

@@ -1,36 +0,0 @@
-@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%

sass/grid/tiles.scss

@@ -0,0 +1,57 @@
+@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%;
+      }
+    }
+  }
+}

sass/helpers/_all.sass

@@ -1,12 +0,0 @@
-/* Bulma Helpers */
-@charset "utf-8"
-
-@import "color"
-@import "flexbox"
-@import "float"
-@import "other"
-@import "overflow"
-@import "position"
-@import "spacing"
-@import "typography"
-@import "visibility"

sass/helpers/_all.scss

@@ -0,0 +1,12 @@
+/* Bulma Helpers */
+@charset "utf-8";
+
+@import "color";
+@import "flexbox";
+@import "float";
+@import "other";
+@import "overflow";
+@import "position";
+@import "spacing";
+@import "typography";
+@import "visibility";

sass/helpers/color.sass

@@ -1,39 +0,0 @@
-@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

sass/helpers/color.scss

@@ -0,0 +1,67 @@
+@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;
+  }
+}

sass/helpers/flexbox.sass

@@ -1,35 +0,0 @@
-$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

sass/helpers/flexbox.scss

@@ -0,0 +1,57 @@
+$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;
+    }
+  }
+}

sass/helpers/float.sass

@@ -1,10 +0,0 @@
-@import "../utilities/mixins"
-
-.is-clearfix
-  +clearfix
-
-.is-pulled-left
-  float: left !important
-
-.is-pulled-right
-  float: right !important

sass/helpers/float.scss

@@ -0,0 +1,13 @@
+@import "../utilities/mixins";
+
+.is-clearfix {
+  @include clearfix;
+}
+
+.is-pulled-left {
+  float: left !important;
+}
+
+.is-pulled-right {
+  float: right !important;
+}