Upgrade bulma to 0.9.2 and reduce imported styles (#102)

* Upgrade bulma to 0.7.5

* Upgrade bulma to 0.8.2

* Upgrade bulma to 0.9.2

* Reduce features

* Remove ';' from sass

assets/styles/bulma/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2017 Jeremy Thomas
+Copyright (c) 2020 Jeremy Thomas
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

assets/styles/bulma/base/_all.sass

@@ -1,5 +1,6 @@
+/* Bulma Base */
 @charset "utf-8"
 
-@import "minireset.sass"
+@import "minireset"
-@import "generic.sass"
+@import "generic"
-@import "helpers.sass"
+@import "animations"

assets/styles/bulma/base/animations.sass

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

assets/styles/bulma/base/generic.sass

@@ -1,8 +1,15 @@
-$body-background-color: $white !default
+@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
 
@@ -11,21 +18,27 @@ $code-padding: 0.25em 0.5em 0.25em !default
 $code-weight: normal !default
 $code-size: 0.875em !default
 
-$hr-background-color: $border !default
+$small-font-size: 0.875em !default
-$hr-height: 1px !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: 300px
+  min-width: $body-min-width
-  overflow-x: hidden
+  overflow-x: $body-overflow-x
-  overflow-y: scroll
+  overflow-y: $body-overflow-y
   text-rendering: $body-rendering
   text-size-adjust: 100%
 
@@ -41,6 +54,7 @@ section
 body,
 button,
 input,
+optgroup,
 select,
 textarea
   font-family: $body-family
@@ -53,7 +67,7 @@ pre
 
 body
   color: $body-color
-  font-size: 1rem
+  font-size: $body-font-size
   font-weight: $body-weight
   line-height: $body-line-height
 
@@ -91,7 +105,7 @@ input[type="radio"]
   vertical-align: baseline
 
 small
-  font-size: 0.875em
+  font-size: $small-font-size
 
 span
   font-style: inherit
@@ -103,25 +117,29 @@ strong
 
 // Block
 
+fieldset
+  border: none
+
 pre
   +overflow-touch
   background-color: $pre-background
   color: $pre
-  font-size: 0.875em
+  font-size: $pre-font-size
   overflow-x: auto
-  padding: 1.25rem 1.5rem
+  padding: $pre-padding
   white-space: pre
   word-wrap: normal
   code
     background-color: transparent
     color: currentColor
-    font-size: 1em
+    font-size: $pre-code-font-size
     padding: 0
 
 table
   td,
   th
-    text-align: left
     vertical-align: top
+    &:not([align])
+      text-align: inherit
   th
     color: $text-strong

assets/styles/bulma/base/helpers.sass

@@ -1,245 +1 @@
-// Float
+@warn "The helpers.sass file is DEPRECATED. It has moved into its own /helpers folder. Please import sass/helpers/_all instead."
-
-.is-clearfix
-  +clearfix
-
-.is-pulled-left
-  float: left !important
-
-.is-pulled-right
-  float: right !important
-
-// Overflow
-
-.is-clipped
-  overflow: hidden !important
-
-// Overlay
-
-.is-overlay
-  +overlay
-
-// Typography
-
-=typography-size($target:'')
-  @each $size in $sizes
-    $i: index($sizes, $size)
-    .is-size-#{$i}#{if($target == '', '', '-' + $target)}
-      font-size: $size !important
-
-+typography-size()
-
-+mobile
-  +typography-size('mobile')
-
-+tablet
-  +typography-size('tablet')
-
-+touch
-  +typography-size('touch')
-
-+desktop
-  +typography-size('desktop')
-
-+widescreen
-  +typography-size('widescreen')
-
-+fullhd
-  +typography-size('fullhd')
-
-$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right')
-
-@each $alignment, $text-align in $alignments
-  .has-text-#{$alignment}
-    text-align: #{$text-align} !important
-  +mobile
-    .has-text-#{$alignment}-mobile
-      text-align: #{$text-align} !important
-  +tablet
-    .has-text-#{$alignment}-tablet
-      text-align: #{$text-align} !important
-  +tablet-only
-    .has-text-#{$alignment}-tablet-only
-      text-align: #{$text-align} !important
-  +touch
-    .has-text-#{$alignment}-touch
-      text-align: #{$text-align} !important
-  +desktop
-    .has-text-#{$alignment}-desktop
-      text-align: #{$text-align} !important
-  +desktop-only
-    .has-text-#{$alignment}-desktop-only
-      text-align: #{$text-align} !important
-  +widescreen
-    .has-text-#{$alignment}-widescreen
-      text-align: #{$text-align} !important
-  +widescreen-only
-    .has-text-#{$alignment}-widescreen-only
-      text-align: #{$text-align} !important
-  +fullhd
-    .has-text-#{$alignment}-fullhd
-      text-align: #{$text-align} !important
-
-.is-capitalized
-  text-transform: capitalize !important
-
-.is-lowercase
-  text-transform: lowercase !important
-
-.is-uppercase
-  text-transform: uppercase !important
-
-.is-italic
-  font-style: italic !important
-
-@each $name, $pair in $colors
-  $color: nth($pair, 1)
-  .has-text-#{$name}
-    color: $color !important
-  a.has-text-#{$name}
-    &:hover,
-    &:focus
-      color: darken($color, 10%) !important
-
-@each $name, $shade in $shades
-  .has-text-#{$name}
-    color: $shade !important
-
-.has-text-weight-light
-  font-weight: $weight-light !important
-.has-text-weight-normal
-  font-weight: $weight-normal !important
-.has-text-weight-semibold
-  font-weight: $weight-semibold !important
-.has-text-weight-bold
-  font-weight: $weight-bold !important
-
-// Visibility
-
-$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
-
-@each $display in $displays
-  .is-#{$display}
-    display: #{$display} !important
-  +mobile
-    .is-#{$display}-mobile
-      display: #{$display} !important
-  +tablet
-    .is-#{$display}-tablet
-      display: #{$display} !important
-  +tablet-only
-    .is-#{$display}-tablet-only
-      display: #{$display} !important
-  +touch
-    .is-#{$display}-touch
-      display: #{$display} !important
-  +desktop
-    .is-#{$display}-desktop
-      display: #{$display} !important
-  +desktop-only
-    .is-#{$display}-desktop-only
-      display: #{$display} !important
-  +widescreen
-    .is-#{$display}-widescreen
-      display: #{$display} !important
-  +widescreen-only
-    .is-#{$display}-widescreen-only
-      display: #{$display} !important
-  +fullhd
-    .is-#{$display}-fullhd
-      display: #{$display} !important
-
-.is-hidden
-  display: none !important
-
-+mobile
-  .is-hidden-mobile
-    display: none !important
-
-+tablet
-  .is-hidden-tablet
-    display: none !important
-
-+tablet-only
-  .is-hidden-tablet-only
-    display: none !important
-
-+touch
-  .is-hidden-touch
-    display: none !important
-
-+desktop
-  .is-hidden-desktop
-    display: none !important
-
-+desktop-only
-  .is-hidden-desktop-only
-    display: none !important
-
-+widescreen
-  .is-hidden-widescreen
-    display: none !important
-
-+widescreen-only
-  .is-hidden-widescreen-only
-    display: none !important
-
-+fullhd
-  .is-hidden-fullhd
-    display: none !important
-
-.is-invisible
-  visibility: hidden !important
-
-+mobile
-  .is-invisible-mobile
-    visibility: hidden !important
-
-+tablet
-  .is-invisible-tablet
-    visibility: hidden !important
-
-+tablet-only
-  .is-invisible-tablet-only
-    visibility: hidden !important
-
-+touch
-  .is-invisible-touch
-    visibility: hidden !important
-
-+desktop
-  .is-invisible-desktop
-    visibility: hidden !important
-
-+desktop-only
-  .is-invisible-desktop-only
-    visibility: hidden !important
-
-+widescreen
-  .is-invisible-widescreen
-    visibility: hidden !important
-
-+widescreen-only
-  .is-invisible-widescreen-only
-    visibility: hidden !important
-
-+fullhd
-  .is-invisible-fullhd
-    visibility: hidden !important
-
-// Other
-
-.is-marginless
-  margin: 0 !important
-
-.is-paddingless
-  padding: 0 !important
-
-.is-radiusless
-  border-radius: 0 !important
-
-.is-shadowless
-  box-shadow: none !important
-
-.is-unselectable
-  +unselectable

assets/styles/bulma/base/minireset.sass

@@ -1,4 +1,4 @@
-/*! minireset.css v0.0.2 | MIT License | github.com/jgthms/minireset.css */
+/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
 // Blocks
 html,
 body,
@@ -52,17 +52,15 @@ html
   box-sizing: border-box
 
 *
-  box-sizing: inherit
+  &,
-  &:before,
+  &::before,
-  &:after
+  &::after
     box-sizing: inherit
 
 // Media
 img,
-embed,
-object,
-audio,
 video
+  height: auto
   max-width: 100%
 
 // Iframe
@@ -77,4 +75,5 @@ table
 td,
 th
   padding: 0
-  text-align: left
+  &:not([align])
+    text-align: inherit

assets/styles/bulma/components/_all.sass

@@ -1,14 +1,15 @@
+/* Bulma Components */
 @charset "utf-8"
 
-@import "breadcrumb.sass"
+@import "breadcrumb"
-@import "card.sass"
+@import "card"
-@import "dropdown.sass"
+@import "dropdown"
-@import "level.sass"
+@import "level"
-@import "media.sass"
+@import "media"
-@import "menu.sass"
+@import "menu"
-@import "message.sass"
+@import "message"
-@import "modal.sass"
+@import "modal"
-@import "navbar.sass"
+@import "navbar"
-@import "pagination.sass"
+@import "pagination"
-@import "panel.sass"
+@import "panel"
-@import "tabs.sass"
+@import "tabs"

assets/styles/bulma/components/breadcrumb.sass

@@ -1,31 +1,32 @@
+@import "../utilities/mixins"
+
 $breadcrumb-item-color: $link !default
 $breadcrumb-item-hover-color: $link-hover !default
 $breadcrumb-item-active-color: $text-strong !default
 
-$breadcrumb-item-separator-color: $text !default
+$breadcrumb-item-padding-vertical: 0 !default
+$breadcrumb-item-padding-horizontal: 0.75em !default
+
+$breadcrumb-item-separator-color: $border-hover !default
 
 .breadcrumb
-  +block
+  @extend %block
-  +unselectable
+  @extend %unselectable
-  align-items: stretch
-  display: flex
   font-size: $size-normal
-  overflow: hidden
-  overflow-x: auto
   white-space: nowrap
   a
     align-items: center
     color: $breadcrumb-item-color
     display: flex
     justify-content: center
-    padding: 0.5em 0.75em
+    padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal
     &:hover
       color: $breadcrumb-item-hover-color
   li
     align-items: center
     display: flex
     &:first-child a
-      padding-left: 0
+      +ltr-property("padding", 0, false)
     &.is-active
       a
         color: $breadcrumb-item-active-color
@@ -34,23 +35,25 @@ $breadcrumb-item-separator-color: $text !default
     & + li::before
       color: $breadcrumb-item-separator-color
       content: "\0002f"
-  ul, ol
+  ul,
-    align-items: center
+  ol
+    align-items: flex-start
     display: flex
-    flex-grow: 1
+    flex-wrap: wrap
-    flex-shrink: 0
     justify-content: flex-start
   .icon
     &:first-child
-      margin-right: 0.5em
+      +ltr-property("margin", 0.5em)
     &:last-child
-      margin-left: 0.5em
+      +ltr-property("margin", 0.5em, false)
   // Alignment
   &.is-centered
-    ol, ul
+    ol,
+    ul
       justify-content: center
   &.is-right
-    ol, ul
+    ol,
+    ul
       justify-content: flex-end
   // Sizes
   &.is-small

assets/styles/bulma/components/card.sass

@@ -1,21 +1,44 @@
-$card-color: $text !default
+@import "../utilities/mixins"
-$card-background-color: $white !default
-$card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
 
+$card-color: $text !default
+$card-background-color: $scheme-main !default
+$card-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
+$card-radius: 0.25rem !default
+
+$card-header-background-color: transparent !default
 $card-header-color: $text-strong !default
-$card-header-shadow: 0 1px 2px rgba($black, 0.1) !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-footer-border-top: 1px solid $border !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
@@ -26,7 +49,7 @@ $card-footer-border-top: 1px solid $border !default
   display: flex
   flex-grow: 1
   font-weight: $card-header-weight
-  padding: 0.75rem
+  padding: $card-header-padding
   &.is-centered
     justify-content: center
 
@@ -35,16 +58,28 @@ $card-footer-border-top: 1px solid $border !default
   cursor: pointer
   display: flex
   justify-content: center
-  padding: 0.75rem
+  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
-  padding: 1.5rem
+  @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
@@ -56,12 +91,12 @@ $card-footer-border-top: 1px solid $border !default
   flex-grow: 1
   flex-shrink: 0
   justify-content: center
-  padding: 0.75rem
+  padding: $card-footer-padding
   &:not(:last-child)
-    border-right: $card-footer-border-top
+    +ltr-property("border", $card-footer-border-top)
 
 // Combinations
 
 .card
   .media:not(:last-child)
-    margin-bottom: 0.75rem
+    margin-bottom: $card-media-margin

assets/styles/bulma/components/dropdown.sass

@@ -1,17 +1,23 @@
-$dropdown-content-background-color: $white !default
+@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: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+$dropdown-content-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
 $dropdown-content-z: 20 !default
 
-$dropdown-item-color: $grey-dark !default
+$dropdown-item-color: $text !default
-$dropdown-item-hover-color: $black !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 !default
+$dropdown-divider-background-color: $border-light !default
 
 .dropdown
   display: inline-flex
@@ -29,13 +35,13 @@ $dropdown-divider-background-color: $border !default
     .dropdown-menu
       bottom: 100%
       padding-bottom: $dropdown-content-offset
-      padding-top: unset
+      padding-top: initial
       top: auto
 
 .dropdown-menu
   display: none
-  left: 0
+  +ltr-position(0, false)
-  min-width: 12rem
+  min-width: $dropdown-menu-min-width
   padding-top: $dropdown-content-offset
   position: absolute
   top: 100%
@@ -45,8 +51,8 @@ $dropdown-divider-background-color: $border !default
   background-color: $dropdown-content-background-color
   border-radius: $dropdown-content-radius
   box-shadow: $dropdown-content-shadow
-  padding-bottom: 0.5rem
+  padding-bottom: $dropdown-content-padding-bottom
-  padding-top: 0.5rem
+  padding-top: $dropdown-content-padding-top
 
 .dropdown-item
   color: $dropdown-item-color
@@ -56,9 +62,12 @@ $dropdown-divider-background-color: $border !default
   padding: 0.375rem 1rem
   position: relative
 
-a.dropdown-item
+a.dropdown-item,
-  padding-right: 3rem
+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

assets/styles/bulma/components/level.sass

@@ -1,5 +1,9 @@
+@import "../utilities/mixins"
+
+$level-item-spacing: ($block-spacing / 2) !default
+
 .level
-  +block
+  @extend %block
   align-items: center
   justify-content: space-between
   code
@@ -18,9 +22,9 @@
     .level-item
       &:not(:last-child)
         margin-bottom: 0
+        +ltr-property("margin", $level-item-spacing)
       &:not(.is-narrow)
         flex-grow: 1
-      margin-right: 0.75rem
   // Responsiveness
   +tablet
     display: flex
@@ -41,7 +45,7 @@
   // Responsiveness
   +mobile
     &:not(:last-child)
-      margin-bottom: 0.75rem
+      margin-bottom: $level-item-spacing
 
 .level-left,
 .level-right
@@ -55,7 +59,7 @@
     // Responsiveness
     +tablet
       &:not(:last-child)
-        margin-right: 0.75rem
+        +ltr-property("margin", $level-item-spacing)
 
 .level-left
   align-items: center

assets/styles/bulma/components/media.sass

@@ -1,29 +1,40 @@
+@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: left
+  text-align: inherit
   .content:not(:last-child)
-    margin-bottom: 0.75rem
+    margin-bottom: $media-content-spacing
   .media
-    border-top: 1px solid rgba($border, 0.5)
+    border-top: $media-border-size solid $media-border-color
     display: flex
-    padding-top: 0.75rem
+    padding-top: $media-level-1-spacing
     .content:not(:last-child),
     .control:not(:last-child)
-      margin-bottom: 0.5rem
+      margin-bottom: $media-level-1-content-spacing
     .media
-      padding-top: 0.5rem
+      padding-top: $media-level-2-spacing
       & + .media
-        margin-top: 0.5rem
+        margin-top: $media-level-2-spacing
   & + .media
-    border-top: 1px solid rgba($border, 0.5)
+    border-top: $media-border-size solid $media-border-color
-    margin-top: 1rem
+    margin-top: $media-spacing
-    padding-top: 1rem
+    padding-top: $media-spacing
   // Sizes
   &.is-large
     & + .media
-      margin-top: 1.5rem
+      margin-top: $media-spacing-large
-      padding-top: 1.5rem
+      padding-top: $media-spacing-large
 
 .media-left,
 .media-right
@@ -32,14 +43,17 @@
   flex-shrink: 0
 
 .media-left
-  margin-right: 1rem
+  +ltr-property("margin", $media-spacing)
 
 .media-right
-  margin-left: 1rem
+  +ltr-property("margin", $media-spacing, false)
 
 .media-content
   flex-basis: auto
   flex-grow: 1
   flex-shrink: 1
-  overflow: auto
+  text-align: inherit
-  text-align: left
+
++mobile
+  .media-content
+    overflow-x: auto

assets/styles/bulma/components/menu.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $menu-item-color: $text !default
 $menu-item-radius: $radius-small !default
 $menu-item-hover-color: $text-strong !default
@@ -6,8 +8,15 @@ $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
@@ -20,12 +29,12 @@ $menu-label-color: $text-light !default
     font-size: $size-large
 
 .menu-list
-  line-height: 1.25
+  line-height: $menu-list-line-height
   a
     border-radius: $menu-item-radius
     color: $menu-item-color
     display: block
-    padding: 0.5em 0.75em
+    padding: $menu-list-link-padding
     &:hover
       background-color: $menu-item-hover-background-color
       color: $menu-item-hover-color
@@ -35,16 +44,16 @@ $menu-label-color: $text-light !default
       color: $menu-item-active-color
   li
     ul
-      border-left: $menu-list-border-left
+      +ltr-property("border", $menu-list-border-left, false)
-      margin: 0.75em
+      margin: $menu-nested-list-margin
-      padding-left: 0.75em
+      +ltr-property("padding", $menu-nested-list-padding-left, false)
 
 .menu-label
   color: $menu-label-color
-  font-size: 0.75em
+  font-size: $menu-label-font-size
-  letter-spacing: 0.1em
+  letter-spacing: $menu-label-letter-spacing
   text-transform: uppercase
   &:not(:first-child)
-    margin-top: 1em
+    margin-top: $menu-label-spacing
   &:not(:last-child)
-    margin-bottom: 1em
+    margin-bottom: $menu-label-spacing

assets/styles/bulma/components/message.sass

@@ -1,27 +1,34 @@
+@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-padding: 0.5em 0.75em !default
+$message-header-weight: $weight-bold !default
+$message-header-padding: 0.75em 1em !default
 $message-header-radius: $radius !default
 
-$message-body-border: 1px solid $border !default
+$message-body-border-color: $border !default
+$message-body-border-width: 0 0 0 4px !default
 $message-body-color: $text !default
-$message-body-padding: 1em 1.25em !default
+$message-body-padding: 1.25em 1.5em !default
 $message-body-radius: $radius !default
 
-$message-body-pre-background-color: $white !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
-  +block
+  @extend %block
   background-color: $message-background-color
   border-radius: $message-radius
   font-size: $size-normal
   strong
     color: currentColor
-  a:not(.button):not(.tag)
+  a:not(.button):not(.tag):not(.dropdown-item)
     color: currentColor
     text-decoration: underline
   // Sizes
@@ -32,21 +39,33 @@ $message-body-pre-code-background-color: transparent !default
   &.is-large
     font-size: $size-large
   // Colors
-  @each $name, $pair in $colors
+  @each $name, $components in $message-colors
-    $color: nth($pair, 1)
+    $color: nth($components, 1)
-    $color-invert: nth($pair, 2)
+    $color-invert: nth($components, 2)
-    $color-lightning: max((100% - lightness($color)) - 2%, 0%)
+    $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: lighten($color, $color-lightning)
+      background-color: $color-light
       .message-header
         background-color: $color
         color: $color-invert
       .message-body
         border-color: $color
-        color: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
+        color: $color-dark
 
 .message-header
   align-items: center
@@ -54,6 +73,7 @@ $message-body-pre-code-background-color: transparent !default
   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
@@ -61,15 +81,17 @@ $message-body-pre-code-background-color: transparent !default
   .delete
     flex-grow: 0
     flex-shrink: 0
-    margin-left: 0.75em
+    +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
-    border-top: none
 
 .message-body
-  border: $message-body-border
+  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,

assets/styles/bulma/components/modal.sass

@@ -1,6 +1,8 @@
+@import "../utilities/mixins"
+
 $modal-z: 40 !default
 
-$modal-background-background-color: rgba($black, 0.86) !default
+$modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default
 
 $modal-content-width: 640px !default
 $modal-content-margin-mobile: 20px !default
@@ -25,13 +27,16 @@ $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: $white !default
+$modal-card-body-background-color: $scheme-main !default
 $modal-card-body-padding: 20px !default
 
+$modal-breakpoint: $tablet !default
+
 .modal
-  +overlay
+  @extend %overlay
   align-items: center
   display: none
+  flex-direction: column
   justify-content: center
   overflow: hidden
   position: fixed
@@ -41,7 +46,7 @@ $modal-card-body-padding: 20px !default
     display: flex
 
 .modal-background
-  +overlay
+  @extend %overlay
   background-color: $modal-background-background-color
 
 .modal-content,
@@ -52,17 +57,17 @@ $modal-card-body-padding: 20px !default
   position: relative
   width: 100%
   // Responsiveness
-  +tablet
+  +from($modal-breakpoint)
     margin: 0 auto
     max-height: calc(100vh - #{$modal-content-spacing-tablet})
     width: $modal-content-width
 
 .modal-close
-  +delete
+  @extend %delete
   background: none
   height: $modal-close-dimensions
   position: fixed
-  right: $modal-close-right
+  +ltr-position($modal-close-right)
   top: $modal-close-top
   width: $modal-close-dimensions
 
@@ -71,6 +76,7 @@ $modal-card-body-padding: 20px !default
   flex-direction: column
   max-height: calc(100vh - #{$modal-card-spacing})
   overflow: hidden
+  -ms-overflow-y: visible
 
 .modal-card-head,
 .modal-card-foot
@@ -100,7 +106,7 @@ $modal-card-body-padding: 20px !default
   border-top: $modal-card-foot-border-top
   .button
     &:not(:last-child)
-      margin-right: 10px
+      +ltr-property("margin", 0.5em)
 
 .modal-card-body
   +overflow-touch

assets/styles/bulma/components/navbar.sass

@@ -1,14 +1,23 @@
-$navbar-background-color: $white !default
+@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: $grey-dark !default
+$navbar-item-color: $text !default
 $navbar-item-hover-color: $link !default
-$navbar-item-hover-background-color: $background !default
+$navbar-item-hover-background-color: $scheme-main-bis !default
-$navbar-item-active-color: $black !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
@@ -17,22 +26,29 @@ $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: $white !default
+$navbar-dropdown-background-color: $scheme-main !default
-$navbar-dropdown-border-top: 1px solid $border !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 rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !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: $black !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: $border !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
@@ -40,16 +56,12 @@ $navbar-divider-background-color: $border !default
   right: 0
   z-index: $navbar-fixed-z
 
-=navbar-fixed-html
-  left: 0
-  position: fixed
-  right: 0
-
 .navbar
   background-color: $navbar-background-color
   min-height: $navbar-height
   position: relative
-  @each $name, $pair in $colors
+  z-index: $navbar-z
+  @each $name, $pair in $navbar-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}
@@ -61,14 +73,17 @@ $navbar-divider-background-color: $border !default
           color: $color-invert
         & > a.navbar-item,
         .navbar-link
+          &:focus,
           &:hover,
           &.is-active
-            background-color: darken($color, 5%)
+            background-color: bulmaDarken($color, 5%)
             color: $color-invert
         .navbar-link
           &::after
             border-color: $color-invert
-      +desktop
+      .navbar-burger
+        color: $color-invert
+      +from($navbar-breakpoint)
         .navbar-start,
         .navbar-end
           & > .navbar-item,
@@ -76,16 +91,18 @@ $navbar-divider-background-color: $border !default
             color: $color-invert
           & > a.navbar-item,
           .navbar-link
+            &:focus,
             &:hover,
             &.is-active
-              background-color: darken($color, 5%)
+              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: darken($color, 5%)
+          background-color: bulmaDarken($color, 5%)
           color: $color-invert
         .navbar-dropdown
           a.navbar-item
@@ -98,21 +115,22 @@ $navbar-divider-background-color: $border !default
     min-height: $navbar-height
     width: 100%
   &.has-shadow
-    box-shadow: 0 2px 3px rgba($black, 0.1)
+    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: 0 -2px 3px rgba($black, 0.1)
+      box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color
   &.is-fixed-top
     top: 0
 
-html.has-navbar-fixed-top
+html,
+body
+  &.has-navbar-fixed-top
     padding-top: $navbar-height
-
+  &.has-navbar-fixed-bottom
-html.has-navbar-fixed-bottom
     padding-bottom: $navbar-height
 
 .navbar-brand,
@@ -122,6 +140,12 @@ html.has-navbar-fixed-bottom
   flex-shrink: 0
   min-height: $navbar-height
 
+.navbar-brand
+  a.navbar-item
+    &:focus,
+    &:hover
+      background-color: transparent
+
 .navbar-tabs
   +overflow-touch
   max-width: 100vw
@@ -129,8 +153,9 @@ html.has-navbar-fixed-bottom
   overflow-y: hidden
 
 .navbar-burger
+  color: $navbar-burger-color
   +hamburger($navbar-height)
-  margin-left: auto
+  +ltr-property("margin", auto, false)
 
 .navbar-menu
   display: none
@@ -140,11 +165,18 @@ html.has-navbar-fixed-bottom
   color: $navbar-item-color
   display: block
   line-height: 1.5
-  padding: 0.5rem 1rem
+  padding: 0.5rem 0.75rem
   position: relative
+  .icon
+    &:only-child
+      margin-left: -0.25rem
+      margin-right: -0.25rem
 
 a.navbar-item,
-a.navbar-link
+.navbar-link
+  cursor: pointer
+  &:focus,
+  &:focus-within,
   &:hover,
   &.is-active
     background-color: $navbar-item-hover-background-color
@@ -164,6 +196,7 @@ a.navbar-link
     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
@@ -179,8 +212,13 @@ a.navbar-link
   flex-grow: 1
   flex-shrink: 1
 
-.navbar-link
+.navbar-link:not(.is-arrowless)
-  padding-right: 2.5em
+  +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
@@ -194,10 +232,10 @@ a.navbar-link
   background-color: $navbar-divider-background-color
   border: none
   display: none
-  height: 1px
+  height: $navbar-divider-height
   margin: 0.5rem 0
 
-+touch
++until($navbar-breakpoint)
   .navbar > .container
     display: block
   .navbar-brand,
@@ -205,9 +243,12 @@ a.navbar-link
     .navbar-item
       align-items: center
       display: flex
+  .navbar-link
+    &::after
+      display: none
   .navbar-menu
     background-color: $navbar-background-color
-    box-shadow: 0 8px 16px rgba($black, 0.1)
+    box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1)
     padding: 0.5rem 0
     &.is-active
       display: block
@@ -219,7 +260,7 @@ a.navbar-link
     &.is-fixed-bottom-touch
       bottom: 0
       &.has-shadow
-        box-shadow: 0 -2px 3px rgba($black, 0.1)
+        box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
     &.is-fixed-top-touch
       top: 0
     &.is-fixed-top,
@@ -228,12 +269,14 @@ a.navbar-link
         +overflow-touch
         max-height: calc(100vh - #{$navbar-height})
         overflow: auto
-  html.has-navbar-fixed-top-touch
+  html,
+  body
+    &.has-navbar-fixed-top-touch
       padding-top: $navbar-height
-  html.has-navbar-fixed-bottom-touch
+    &.has-navbar-fixed-bottom-touch
       padding-bottom: $navbar-height
 
-+desktop
++from($navbar-breakpoint)
   .navbar,
   .navbar-menu,
   .navbar-start,
@@ -242,19 +285,31 @@ a.navbar-link
     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,
-      a.navbar-link
+      .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
@@ -278,40 +333,37 @@ a.navbar-link
         border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
         border-top: none
         bottom: 100%
-        box-shadow: 0 -8px 8px rgba($black, 0.1)
+        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-link
-    &::after
-      +arrow($navbar-dropdown-arrow)
-      margin-top: -0.375em
-      right: 1.125em
-      top: 50%
   .navbar-menu
     flex-grow: 1
     flex-shrink: 0
   .navbar-start
     justify-content: flex-start
-    margin-right: auto
+    +ltr-property("margin", auto)
   .navbar-end
     justify-content: flex-end
-    margin-left: auto
+    +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 rgba($black, 0.1)
+    box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1)
     display: none
     font-size: 0.875rem
-    left: 0
+    +ltr-position(0, false)
     min-width: 100%
     position: absolute
     top: 100%
@@ -320,13 +372,15 @@ a.navbar-link
       padding: 0.375rem 1rem
       white-space: nowrap
     a.navbar-item
-      padding-right: 3rem
+      +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
@@ -346,9 +400,9 @@ a.navbar-link
   .navbar > .container,
   .container > .navbar
     .navbar-brand
-      margin-left: -1rem
+      +ltr-property("margin", -.75rem, false)
     .navbar-menu
-      margin-right: -1rem
+      +ltr-property("margin", -.75rem)
   // Fixed navbar
   .navbar
     &.is-fixed-bottom-desktop,
@@ -357,22 +411,35 @@ a.navbar-link
     &.is-fixed-bottom-desktop
       bottom: 0
       &.has-shadow
-        box-shadow: 0 -2px 3px rgba($black, 0.1)
+        box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
     &.is-fixed-top-desktop
       top: 0
-  html.has-navbar-fixed-top-desktop
+  html,
+  body
+    &.has-navbar-fixed-top-desktop
       padding-top: $navbar-height
-  html.has-navbar-fixed-bottom-desktop
+    &.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,
-  a.navbar-link
+  .navbar-link
     &.is-active
       color: $navbar-item-active-color
-    &.is-active:not(:hover)
+    &.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})

assets/styles/bulma/components/pagination.sass

@@ -1,6 +1,18 @@
-$pagination-color: $grey-darker !default
+@import "../utilities/controls"
-$pagination-border-color: $grey-lighter !default
+@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
@@ -11,9 +23,9 @@ $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: $grey !default
+$pagination-disabled-color: $text-light !default
-$pagination-disabled-background-color: $grey-lighter !default
+$pagination-disabled-background-color: $border !default
-$pagination-disabled-border-color: $grey-lighter !default
+$pagination-disabled-border-color: $border !default
 
 $pagination-current-color: $link-invert !default
 $pagination-current-background-color: $link !default
@@ -21,9 +33,10 @@ $pagination-current-border-color: $link !default
 
 $pagination-ellipsis-color: $grey-light !default
 
-$pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
+$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2) !default
 
 .pagination
+  @extend %block
   font-size: $size-normal
   margin: $pagination-margin
   // Sizes
@@ -53,13 +66,13 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
 .pagination-next,
 .pagination-link,
 .pagination-ellipsis
-  +control
+  @extend %control
-  +unselectable
+  @extend %unselectable
-  font-size: 1em
+  font-size: $pagination-item-font-size
-  padding-left: 0.5em
-  padding-right: 0.5em
   justify-content: center
-  margin: 0.25rem
+  margin: $pagination-item-margin
+  padding-left: $pagination-item-padding-left
+  padding-right: $pagination-item-padding-right
   text-align: center
 
 .pagination-previous,
@@ -67,7 +80,7 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
 .pagination-link
   border-color: $pagination-border-color
   color: $pagination-color
-  min-width: 2.25em
+  min-width: $pagination-min-width
   &:hover
     border-color: $pagination-hover-border-color
     color: $pagination-hover-color
@@ -84,8 +97,8 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
 
 .pagination-previous,
 .pagination-next
-  padding-left: 0.75em
+  padding-left: $pagination-nav-padding-left
-  padding-right: 0.75em
+  padding-right: $pagination-nav-padding-right
   white-space: nowrap
 
 .pagination-link
@@ -100,6 +113,8 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
 
 .pagination-list
   flex-wrap: wrap
+  li
+    list-style: none
 
 +mobile
   .pagination

assets/styles/bulma/components/panel.sass

@@ -1,13 +1,19 @@
-$panel-item-border: 1px solid $border !default
+@import "../utilities/mixins"
 
-$panel-heading-background-color: $background !default
+$panel-margin: $block-spacing !default
+$panel-item-border: 1px solid $border-light !default
+$panel-radius: $radius-large !default
+$panel-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !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.5em 0.75em !default
+$panel-heading-padding: 0.75em 1em !default
 $panel-heading-radius: $radius !default
 $panel-heading-size: 1.25em !default
-$panel-heading-weight: $weight-light !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
@@ -22,24 +28,35 @@ $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: 1.5rem
+    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-heading,
 .panel-tabs,
 .panel-block
+  &:not(:last-child)
     border-bottom: $panel-item-border
-  border-left: $panel-item-border
-  border-right: $panel-item-border
-  &:first-child
-    border-top: $panel-item-border
 
 .panel-heading
   background-color: $panel-heading-background-color
-  border-radius: $panel-heading-radius $panel-heading-radius 0 0
+  border-radius: $panel-radius $panel-radius 0 0
   color: $panel-heading-color
   font-size: $panel-heading-size
   font-weight: $panel-heading-weight
@@ -49,7 +66,7 @@ $panel-icon-color: $text-light !default
 .panel-tabs
   align-items: flex-end
   display: flex
-  font-size: 0.875em
+  font-size: $panel-tabs-font-size
   justify-content: center
   a
     border-bottom: $panel-tab-border-bottom
@@ -73,7 +90,7 @@ $panel-icon-color: $text-light !default
   justify-content: flex-start
   padding: 0.5em 0.75em
   input[type="checkbox"]
-    margin-right: 0.75em
+    +ltr-property("margin", 0.75em)
   & > .control
     flex-grow: 1
     flex-shrink: 1
@@ -85,6 +102,9 @@ $panel-icon-color: $text-light !default
     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
@@ -95,7 +115,7 @@ label.panel-block
 .panel-icon
   +fa(14px, 1em)
   color: $panel-icon-color
-  margin-right: 0.75em
+  +ltr-property("margin", 0.75em)
   .fa
     font-size: inherit
     line-height: inherit

assets/styles/bulma/components/tabs.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $tabs-border-bottom-color: $border !default
 $tabs-border-bottom-style: solid !default
 $tabs-border-bottom-width: 1px !default
@@ -12,7 +14,7 @@ $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: $white !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
 
@@ -27,9 +29,9 @@ $tabs-toggle-link-active-border-color: $link !default
 $tabs-toggle-link-active-color: $link-invert !default
 
 .tabs
-  +block
+  @extend %block
   +overflow-touch
-  +unselectable
+  @extend %unselectable
   align-items: stretch
   display: flex
   font-size: $size-normal
@@ -78,9 +80,9 @@ $tabs-toggle-link-active-color: $link-invert !default
       padding-left: 0.75em
   .icon
     &:first-child
-      margin-right: 0.5em
+      +ltr-property("margin", 0.5em)
     &:last-child
-      margin-left: 0.5em
+      +ltr-property("margin", 0.5em, false)
   // Alignment
   &.is-centered
     ul
@@ -92,7 +94,10 @@ $tabs-toggle-link-active-color: $link-invert !default
   &.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
@@ -119,11 +124,21 @@ $tabs-toggle-link-active-color: $link-invert !default
         z-index: 2
     li
       & + li
-        margin-left: -#{$tabs-toggle-link-border-width}
+        +ltr-property("margin", -#{$tabs-toggle-link-border-width}, false)
       &:first-child a
-        border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius
+        +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
-        border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0
+        +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
@@ -135,13 +150,23 @@ $tabs-toggle-link-active-color: $link-invert !default
     &.is-toggle-rounded
       li
         &:first-child a
+          +ltr
             border-bottom-left-radius: $radius-rounded
             border-top-left-radius: $radius-rounded
             padding-left: 1.25em
-        &:last-child a
+          +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

assets/styles/bulma/elements/_all.sass

@@ -1,16 +1,16 @@
+/* Bulma Elements */
 @charset "utf-8"
 
-@import "box.sass"
+@import "box"
-@import "button.sass"
+@import "button"
-@import "container.sass"
+@import "container"
-@import "content.sass"
+@import "content"
-@import "form.sass"
+@import "icon"
-@import "icon.sass"
+@import "image"
-@import "image.sass"
+@import "notification"
-@import "notification.sass"
+@import "progress"
-@import "progress.sass"
+@import "table"
-@import "table.sass"
+@import "tag"
-@import "tag.sass"
+@import "title"
-@import "title.sass"
 
-@import "other.sass"
+@import "other"

assets/styles/bulma/elements/box.sass

@@ -1,14 +1,16 @@
+@import "../utilities/mixins"
+
 $box-color: $text !default
-$box-background-color: $white !default
+$box-background-color: $scheme-main !default
 $box-radius: $radius-large !default
-$box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+$box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
 $box-padding: 1.25rem !default
 
-$box-link-hover-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link !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($black, 0.2), 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
-  +block
+  @extend %block
   background-color: $box-background-color
   border-radius: $box-radius
   box-shadow: $box-shadow

assets/styles/bulma/elements/button.sass

@@ -1,6 +1,15 @@
-$button-color: $grey-darker !default
+@import "../utilities/controls"
-$button-background-color: $white !default
+@import "../utilities/mixins"
-$button-border-color: $grey-lighter !default
+
+$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
@@ -8,43 +17,61 @@ $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: rgba($link, 0.25) !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-disabled-background-color: $white !default
+$button-ghost-background: none !default
-$button-disabled-border-color: $grey-lighter !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: $grey !default
+$button-static-color: $text-light !default
-$button-static-background-color: $white-ter !default
+$button-static-background-color: $scheme-main-ter !default
-$button-static-border-color: $grey-lighter !default
+$button-static-border-color: $border !default
+
+$button-colors: $colors !default
 
 // The button sizes use mixins so they can be used at different breakpoints
 =button-small
+  &: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
-  +control
+  @extend %control
-  +unselectable
+  @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-left: 0.75em
+  padding-bottom: $button-padding-vertical
-  padding-right: 0.75em
+  padding-left: $button-padding-horizontal
+  padding-right: $button-padding-horizontal
+  padding-top: $button-padding-vertical
   text-align: center
   white-space: nowrap
   strong
@@ -57,14 +84,14 @@ $button-static-border-color: $grey-lighter !default
       height: 1.5em
       width: 1.5em
     &:first-child:not(:last-child)
-      margin-left: calc(-0.375em - 1px)
+      +ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}), false)
-      margin-right: 0.1875em
+      +ltr-property("margin", $button-padding-horizontal / 4)
     &:last-child:not(:first-child)
-      margin-left: 0.1875em
+      +ltr-property("margin", $button-padding-horizontal / 4, false)
-      margin-right: calc(-0.375em - 1px)
+      +ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}))
     &:first-child:last-child
-      margin-left: calc(-0.375em - 1px)
+      margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
-      margin-right: calc(-0.375em - 1px)
+      margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
   // States
   &:hover,
   &.is-hovered
@@ -85,7 +112,7 @@ $button-static-border-color: $grey-lighter !default
     background-color: transparent
     border-color: transparent
     color: $button-text-color
-    text-decoration: underline
+    text-decoration: $button-text-decoration
     &:hover,
     &.is-hovered,
     &:focus,
@@ -94,13 +121,23 @@ $button-static-border-color: $grey-lighter !default
       color: $button-text-hover-color
     &:active,
     &.is-active
-      background-color: darken($button-text-hover-background-color, 5%)
+      background-color: bulmaDarken($button-text-hover-background-color, 5%)
       color: $button-text-hover-color
-    &[disabled]
+    &[disabled],
+    fieldset[disabled] &
       background-color: transparent
       border-color: transparent
       box-shadow: none
-  @each $name, $pair in $colors
+  &.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}
@@ -109,7 +146,7 @@ $button-static-border-color: $grey-lighter !default
       color: $color-invert
       &:hover,
       &.is-hovered
-        background-color: darken($color, 2.5%)
+        background-color: bulmaDarken($color, 2.5%)
         border-color: transparent
         color: $color-invert
       &:focus,
@@ -117,42 +154,54 @@ $button-static-border-color: $grey-lighter !default
         border-color: transparent
         color: $color-invert
         &:not(:active)
-          box-shadow: $button-focus-box-shadow-size rgba($color, 0.25)
+          box-shadow: $button-focus-box-shadow-size bulmaRgba($color, 0.25)
       &:active,
       &.is-active
-        background-color: darken($color, 5%)
+        background-color: bulmaDarken($color, 5%)
         border-color: transparent
         color: $color-invert
-      &[disabled]
+      &[disabled],
+      fieldset[disabled] &
         background-color: $color
         border-color: transparent
         box-shadow: none
       &.is-inverted
         background-color: $color-invert
         color: $color
-        &:hover
+        &:hover,
-          background-color: darken($color-invert, 5%)
+        &.is-hovered
-        &[disabled]
+          background-color: bulmaDarken($color-invert, 5%)
+        &[disabled],
+        fieldset[disabled] &
           background-color: $color-invert
           border-color: transparent
           box-shadow: none
           color: $color
       &.is-loading
-        &:after
+        &::after
           border-color: transparent transparent $color-invert $color-invert !important
       &.is-outlined
         background-color: transparent
         border-color: $color
         color: $color
         &:hover,
-        &:focus
+        &.is-hovered,
+        &:focus,
+        &.is-focused
           background-color: $color
           border-color: $color
           color: $color-invert
         &.is-loading
-          &:after
+          &::after
             border-color: transparent transparent $color $color !important
-        &[disabled]
+          &: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
@@ -162,23 +211,53 @@ $button-static-border-color: $grey-lighter !default
         border-color: $color-invert
         color: $color-invert
         &:hover,
-        &:focus
+        &.is-hovered,
+        &:focus,
+        &.is-focused
           background-color: $color-invert
           color: $color
-        &[disabled]
+        &.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]
+  &[disabled],
+  fieldset[disabled] &
     background-color: $button-disabled-background-color
     border-color: $button-disabled-border-color
     box-shadow: $button-disabled-shadow
@@ -189,8 +268,8 @@ $button-static-border-color: $grey-lighter !default
   &.is-loading
     color: transparent !important
     pointer-events: none
-    &:after
+    &::after
-      +loader
+      @extend %loader
       +center(1em)
       position: absolute !important
   &.is-static
@@ -201,8 +280,8 @@ $button-static-border-color: $grey-lighter !default
     pointer-events: none
   &.is-rounded
     border-radius: $radius-rounded
-    padding-left: 1em
+    padding-left: calc(#{$button-padding-horizontal} + 0.25em)
-    padding-right: 1em
+    padding-right: calc(#{$button-padding-horizontal} + 0.25em)
 
 .buttons
   align-items: center
@@ -211,12 +290,22 @@ $button-static-border-color: $grey-lighter !default
   justify-content: flex-start
   .button
     margin-bottom: 0.5rem
-    &:not(:last-child)
+    &:not(:last-child):not(.is-fullwidth)
-      margin-right: 0.5rem
+      +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)
@@ -225,9 +314,9 @@ $button-static-border-color: $grey-lighter !default
       &:not(:last-child)
         border-bottom-right-radius: 0
         border-top-right-radius: 0
-        margin-right: -1px
+        +ltr-property("margin", -1px)
       &:last-child
-        margin-right: 0
+        +ltr-property("margin", 0)
       &:hover,
       &.is-hovered
         z-index: 2
@@ -239,7 +328,18 @@ $button-static-border-color: $grey-lighter !default
         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

assets/styles/bulma/elements/container.sass

@@ -1,25 +1,29 @@
+@import "../utilities/mixins"
+
+$container-offset: (2 * $gap) !default
+$container-max-width: $fullhd !default
+
 .container
+  flex-grow: 1
   margin: 0 auto
   position: relative
-  +from($desktop)
+  width: auto
-    max-width: $desktop - (2 * $gap)
-    width: $desktop - (2 * $gap)
   &.is-fluid
-      margin-left: $gap
+    max-width: none !important
-      margin-right: $gap
+    padding-left: $gap
-      max-width: none
+    padding-right: $gap
-      width: auto
+    width: 100%
-  +until($widescreen)
+  +desktop
-    &.is-widescreen
+    max-width: $desktop - $container-offset
-      max-width: $widescreen - (2 * $gap)
+  +until-widescreen
-      width: auto
+    &.is-widescreen:not(.is-max-desktop)
-  +until($fullhd)
+      max-width: min($widescreen, $container-max-width) - $container-offset
-    &.is-fullhd
+  +until-fullhd
-      max-width: $fullhd - (2 * $gap)
+    &.is-fullhd:not(.is-max-desktop):not(.is-max-widescreen)
-      width: auto
+      max-width: min($fullhd, $container-max-width) - $container-offset
-  +from($widescreen)
+  +widescreen
-    max-width: $widescreen - (2 * $gap)
+    &:not(.is-max-desktop)
-    width: $widescreen - (2 * $gap)
+      max-width: min($widescreen, $container-max-width) - $container-offset
-  +from($fullhd)
+  +fullhd
-    max-width: $fullhd - (2 * $gap)
+    &:not(.is-max-desktop):not(.is-max-widescreen)
-    width: $fullhd - (2 * $gap)
+      max-width: min($fullhd, $container-max-width) - $container-offset

assets/styles/bulma/elements/content.sass

@@ -1,5 +1,7 @@
+@import "../utilities/mixins"
+
 $content-heading-color: $text-strong !default
-$content-heading-weight: $weight-normal !default
+$content-heading-weight: $weight-semibold !default
 $content-heading-line-height: 1.125 !default
 
 $content-blockquote-background-color: $background !default
@@ -12,14 +14,13 @@ $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-row-hover-background-color: $background !default
 $content-table-head-cell-border-width: 0 0 2px !default
 $content-table-head-cell-color: $text-strong !default
 $content-table-foot-cell-border-width: 2px 0 0 !default
 $content-table-foot-cell-color: $text-strong !default
 
 .content
-  +block
+  @extend %block
   // Inline
   li + li
     margin-top: 0.25em
@@ -68,15 +69,25 @@ $content-table-foot-cell-color: $text-strong !default
     margin-bottom: 1em
   blockquote
     background-color: $content-blockquote-background-color
-    border-left: $content-blockquote-border-left
+    +ltr-property("border", $content-blockquote-border-left, false)
     padding: $content-blockquote-padding
   ol
-    list-style: decimal outside
+    list-style-position: outside
-    margin-left: 2em
+    +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
-    margin-left: 2em
+    +ltr-property("margin", 2em, false)
     margin-top: 1em
     ul
       list-style-type: circle
@@ -84,7 +95,7 @@ $content-table-foot-cell-color: $text-strong !default
       ul
         list-style-type: square
   dd
-    margin-left: 2em
+    +ltr-property("margin", 2em, false)
   figure
     margin-left: 2em
     margin-right: 2em
@@ -116,10 +127,8 @@ $content-table-foot-cell-color: $text-strong !default
       vertical-align: top
     th
       color: $content-table-cell-heading-color
-      text-align: left
+      &:not([align])
-    tr
+        text-align: inherit
-      &:hover
-        background-color: $content-table-row-hover-background-color
     thead
       td,
       th
@@ -136,6 +145,9 @@ $content-table-foot-cell-color: $text-strong !default
           td,
           th
             border-bottom-width: 0
+  .tabs
+    li + li
+      margin-top: 0
   // Sizes
   &.is-small
     font-size: $size-small

assets/styles/bulma/elements/form.sass

@@ -1,620 +1 @@
-$input-color: $grey-darker !default
+@warn "The form.sass file is DEPRECATED. It has moved into its own /form folder. Please import sass/form/_all instead."
-$input-background-color: $white !default
-$input-border-color: $grey-lighter !default
-$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default
-
-$input-hover-color: $grey-darker !default
-$input-hover-border-color: $grey-light !default
-
-$input-focus-color: $grey-darker !default
-$input-focus-border-color: $link !default
-$input-focus-box-shadow-size: 0 0 0 0.125em !default
-$input-focus-box-shadow-color: rgba($link, 0.25) !default
-
-$input-disabled-color: $text-light !default
-$input-disabled-background-color: $background !default
-$input-disabled-border-color: $background !default
-
-$input-arrow: $link !default
-
-$input-icon-color: $grey-lighter !default
-$input-icon-active-color: $grey !default
-
-$input-radius: $radius !default
-
-$file-border-color: $border !default
-$file-radius: $radius !default
-
-$file-cta-background-color: $white-ter !default
-$file-cta-color: $grey-dark !default
-$file-cta-hover-color: $grey-darker !default
-$file-cta-active-color: $grey-darker !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
-
-$label-color: $grey-darker !default
-$label-weight: $weight-bold !default
-
-$help-size: $size-small !default
-
-=input
-  +control
-  background-color: $input-background-color
-  border-color: $input-border-color
-  color: $input-color
-  +placeholder
-    color: rgba($input-color, 0.3)
-  &: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]
-    background-color: $input-disabled-background-color
-    border-color: $input-disabled-border-color
-    box-shadow: none
-    color: $input-disabled-color
-    +placeholder
-      color: rgba($input-disabled-color, 0.3)
-
-.input,
-.textarea
-  +input
-  box-shadow: $input-shadow
-  max-width: 100%
-  width: 100%
-  &[readonly]
-    box-shadow: none
-  // Colors
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    &.is-#{$name}
-      border-color: $color
-      &:focus,
-      &.is-focused,
-      &:active,
-      &.is-active
-        box-shadow: $input-focus-box-shadow-size rgba($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
-  &.is-rounded
-    border-radius: $radius-rounded
-    padding-left: 1em
-    padding-right: 1em
-  &.is-static
-    background-color: transparent
-    border-color: transparent
-    box-shadow: none
-    padding-left: 0
-    padding-right: 0
-
-.textarea
-  display: block
-  max-width: 100%
-  min-width: 100%
-  padding: 0.625em
-  resize: vertical
-  &:not([rows])
-    max-height: 600px
-    min-height: 120px
-  &[rows]
-    height: unset
-  // Modifiers
-  &.has-fixed-size
-    resize: none
-
-.checkbox,
-.radio
-  cursor: pointer
-  display: inline-block
-  line-height: 1.25
-  position: relative
-  input
-    cursor: pointer
-  &:hover
-    color: $input-hover-color
-  &[disabled]
-    color: $input-disabled-color
-    cursor: not-allowed
-
-.radio
-  & + .radio
-    margin-left: 0.5em
-
-.select
-  display: inline-block
-  max-width: 100%
-  position: relative
-  vertical-align: top
-  &:not(.is-multiple)
-    height: 2.25em
-    &::after
-      +arrow($input-arrow)
-      margin-top: -0.375em
-      right: 1.125em
-      top: 50%
-      z-index: 4
-  &.is-rounded
-    select
-      border-radius: $radius-rounded
-      padding-left: 1em
-  select
-    +input
-    cursor: pointer
-    display: block
-    font-size: 1em
-    max-width: 100%
-    outline: none
-    &::-ms-expand
-      display: none
-    &[disabled]:hover
-      border-color: $input-disabled-border-color
-    &:not([multiple])
-      padding-right: 2.5em
-    &[multiple]
-      height: unset
-      padding: 0
-      option
-        padding: 0.5em 1em
-  // States
-  &:hover
-    &::after
-      border-color: $input-hover-color
-  // Colors
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    &.is-#{$name} select
-      border-color: $color
-      &:focus,
-      &.is-focused,
-      &:active,
-      &.is-active
-        box-shadow: $input-focus-box-shadow-size rgba($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
-  &.is-fullwidth
-    width: 100%
-    select
-      width: 100%
-  &.is-loading
-    &::after
-      +loader
-      margin-top: 0
-      position: absolute
-      right: 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
-
-.file
-  +unselectable
-  align-items: stretch
-  display: flex
-  justify-content: flex-start
-  position: relative
-  // Colors
-  @each $name, $pair in $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: darken($color, 2.5%)
-          border-color: transparent
-          color: $color-invert
-      &:focus,
-      &.is-focused
-        .file-cta
-          border-color: transparent
-          box-shadow: 0 0 0.5em rgba($color, 0.25)
-          color: $color-invert
-      &:active,
-      &.is-active
-        .file-cta
-          background-color: darken($color, 5%)
-          border-color: transparent
-          color: $color-invert
-  // Sizes
-  &.is-small
-    font-size: $size-small
-  &.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: darken($file-cta-background-color, 2.5%)
-      color: $file-cta-hover-color
-    .file-name
-      border-color: darken($file-name-border-color, 2.5%)
-  &:active
-    .file-cta
-      background-color: darken($file-cta-background-color, 5%)
-      color: $file-cta-active-color
-    .file-name
-      border-color: darken($file-name-border-color, 5%)
-
-.file-input
-  height: 0.01em
-  left: 0
-  outline: none
-  position: absolute
-  top: 0
-  width: 0.01em
-
-.file-cta,
-.file-name
-  +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: left
-  text-overflow: ellipsis
-
-.file-icon
-  align-items: center
-  display: flex
-  height: 1em
-  justify-content: center
-  margin-right: 0.5em
-  width: 1em
-  .fa
-    font-size: 14px
-
-.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 $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)
-        margin-right: -1px
-      &:not(:first-child):not(:last-child)
-        .button,
-        .input,
-        .select select
-          border-radius: 0
-      &:first-child
-        .button,
-        .input,
-        .select select
-          border-bottom-right-radius: 0
-          border-top-right-radius: 0
-      &:last-child
-        .button,
-        .input,
-        .select select
-          border-bottom-left-radius: 0
-          border-top-left-radius: 0
-      .button,
-      .input,
-      .select select
-        &:hover,
-        &.is-hovered
-          z-index: 2
-        &:focus,
-        &.is-focused,
-        &:active,
-        &.is-active
-          z-index: 3
-          &:hover
-            z-index: 4
-      &.is-expanded
-        flex-grow: 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
-        margin-right: 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
-    margin-right: 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)
-        margin-right: 0.75rem
-
-.control
-  font-size: $size-normal
-  position: relative
-  text-align: left
-  // Modifiers
-  // DEPRECATED
-  &.has-icon
-    .icon
-      color: $input-icon-color
-      height: 2.25em
-      pointer-events: none
-      position: absolute
-      top: 0
-      width: 2.25em
-      z-index: 4
-    .input
-      &: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
-    &:not(.has-icon-right)
-      .icon
-        left: 0
-      .input
-        padding-left: 2.25em
-    &.has-icon-right
-      .icon
-        right: 0
-      .input
-        padding-right: 2.25em
-  &.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: 2.25em
-      pointer-events: none
-      position: absolute
-      top: 0
-      width: 2.25em
-      z-index: 4
-  &.has-icons-left
-    .input,
-    .select select
-      padding-left: 2.25em
-    .icon.is-left
-      left: 0
-  &.has-icons-right
-    .input,
-    .select select
-      padding-right: 2.25em
-    .icon.is-right
-      right: 0
-  &.is-loading
-    &::after
-      +loader
-      position: absolute !important
-      right: 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

assets/styles/bulma/elements/icon.sass

@@ -2,6 +2,7 @@ $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
@@ -19,3 +20,21 @@ $icon-dimensions-large: 3rem !default
   &.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)
+      margin-right: $icon-text-spacing
+    &:not(:first-child)
+      margin-left: $icon-text-spacing
+
+div.icon-text
+  display: flex

assets/styles/bulma/elements/image.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $dimensions: 16 24 32 48 64 96 128 !default
 
 .image
@@ -9,28 +11,61 @@ $dimensions: 16 24 32 48 64 96 128 !default
     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-2by1,
-    img
+  &.is-3by1,
-      +overlay
+  &.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}

assets/styles/bulma/elements/notification.sass

@@ -1,35 +1,52 @@
+@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
-  +block
+  @extend %block
   background-color: $notification-background-color
   border-radius: $notification-radius
-  padding: $notification-padding
   position: relative
-  a:not(.button)
+  +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: $white
+    background: $notification-code-background-color
   pre code
     background: transparent
   & > .delete
+    +ltr-position(0.5rem)
     position: absolute
-    right: 0.5rem
     top: 0.5rem
   .title,
   .subtitle,
   .content
     color: currentColor
   // Colors
-  @each $name, $pair in $colors
+  @each $name, $pair in $notification-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}
       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

assets/styles/bulma/elements/other.sass

@@ -1,8 +1,10 @@
+@import "../utilities/mixins"
+
 .block
-  +block
+  @extend %block
 
 .delete
-  +delete
+  @extend %delete
 
 .heading
   display: block
@@ -12,7 +14,7 @@
   text-transform: uppercase
 
 .highlight
-  +block
+  @extend %block
   font-weight: $weight-normal
   max-width: 100%
   overflow: hidden
@@ -22,7 +24,7 @@
     max-width: 100%
 
 .loader
-  +loader
+  @extend %loader
 
 .number
   align-items: center

assets/styles/bulma/elements/progress.sass

@@ -1,12 +1,19 @@
-$progress-bar-background-color: $border !default
+@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
-  +block
+  @extend %block
   -moz-appearance: none
   -webkit-appearance: none
   border: none
-  border-radius: $radius-rounded
+  border-radius: $progress-border-radius
   display: block
   height: $size-normal
   overflow: hidden
@@ -22,7 +29,7 @@ $progress-value-background-color: $text !default
     background-color: $progress-value-background-color
     border: none
   // Colors
-  @each $name, $pair in $colors
+  @each $name, $pair in $progress-colors
     $color: nth($pair, 1)
     &.is-#{$name}
       &::-webkit-progress-value
@@ -31,6 +38,26 @@ $progress-value-background-color: $text !default
         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
@@ -38,3 +65,9 @@ $progress-value-background-color: $text !default
     height: $size-medium
   &.is-large
     height: $size-large
+
+@keyframes moveIndeterminate
+  from
+    background-position: 200% 0
+  to
+    background-position: -200% 0

assets/styles/bulma/elements/table.sass

@@ -1,7 +1,9 @@
-$table-color: $grey-darker !default
+@import "../utilities/mixins"
-$table-background-color: $white !default
 
-$table-cell-border: 1px solid $grey-lighter !default
+$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
@@ -11,18 +13,24 @@ $table-head-cell-color: $text-strong !default
 $table-foot-cell-border-width: 2px 0 0 !default
 $table-foot-cell-color: $text-strong !default
 
-$table-row-hover-background-color: $white-bis !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: $white-bis !default
+$table-striped-row-even-background-color: $scheme-main-bis !default
-$table-striped-row-even-hover-background-color: $white-ter !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
-  margin-bottom: 1.5rem
   td,
   th
     border: $table-cell-border
@@ -30,7 +38,7 @@ $table-striped-row-even-hover-background-color: $white-ter !default
     padding: $table-cell-padding
     vertical-align: top
     // Colors
-    @each $name, $pair in $colors
+    @each $name, $pair in $table-colors
       $color: nth($pair, 1)
       $color-invert: nth($pair, 2)
       &.is-#{$name}
@@ -47,9 +55,12 @@ $table-striped-row-even-hover-background-color: $white-ter !default
       a,
       strong
         color: currentColor
+    &.is-vcentered
+      vertical-align: middle
   th
     color: $table-cell-heading-color
-    text-align: left
+    &:not([align])
+      text-align: inherit
   tr
     &.is-selected
       background-color: $table-row-active-background-color
@@ -62,16 +73,19 @@ $table-striped-row-even-hover-background-color: $white-ter !default
         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,
@@ -98,6 +112,8 @@ $table-striped-row-even-hover-background-color: $white-ter !default
       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,
@@ -108,3 +124,10 @@ $table-striped-row-even-hover-background-color: $white-ter !default
       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%

assets/styles/bulma/elements/tag.sass

@@ -1,8 +1,12 @@
+@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
@@ -11,20 +15,18 @@ $tag-delete-margin: 1px !default
   .tag
     margin-bottom: 0.5rem
     &:not(:last-child)
-      margin-right: 0.5rem
+      +ltr-property("margin", 0.5rem)
   &:last-child
     margin-bottom: -0.5rem
   &:not(:last-child)
     margin-bottom: 1rem
-  &.has-addons
+  // Sizes
-    .tag
+  &.are-medium
-      margin-right: 0
+    .tag:not(.is-normal):not(.is-large)
-      &:not(:first-child)
+      font-size: $size-normal
-        border-bottom-left-radius: 0
+  &.are-large
-        border-top-left-radius: 0
+    .tag:not(.is-normal):not(.is-medium)
-      &:not(:last-child)
+      font-size: $size-medium
-        border-bottom-right-radius: 0
-        border-top-right-radius: 0
   &.is-centered
     justify-content: center
     .tag
@@ -37,6 +39,24 @@ $tag-delete-margin: 1px !default
         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
@@ -52,38 +72,47 @@ $tag-delete-margin: 1px !default
   padding-right: 0.75em
   white-space: nowrap
   .delete
-    margin-left: 0.25em
+    +ltr-property("margin", 0.25rem, false)
-    margin-right: -0.375em
+    +ltr-property("margin", -0.375rem)
   // Colors
-  @each $name, $pair in $colors
+  @each $name, $pair in $tag-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}
       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)
-      margin-left: -0.375em
+      +ltr-property("margin", -0.375em, false)
-      margin-right: 0.1875em
+      +ltr-property("margin", 0.1875em)
     &:last-child:not(:first-child)
-      margin-left: 0.1875em
+      +ltr-property("margin", 0.1875em, false)
-      margin-right: -0.375em
+      +ltr-property("margin", -0.375em)
     &:first-child:last-child
-      margin-left: -0.375em
+      +ltr-property("margin", -0.375em, false)
-      margin-right: -0.375em
+      +ltr-property("margin", -0.375em)
   // Modifiers
   &.is-delete
-    margin-left: $tag-delete-margin
+    +ltr-property("margin", $tag-delete-margin, false)
     padding: 0
     position: relative
     width: 2em
-    &:before,
+    &::before,
-    &:after
+    &::after
       background-color: currentColor
       content: ""
       display: block
@@ -92,10 +121,10 @@ $tag-delete-margin: 1px !default
       top: 50%
       transform: translateX(-50%) translateY(-50%) rotate(45deg)
       transform-origin: center center
-    &:before
+    &::before
       height: 1px
       width: 50%
-    &:after
+    &::after
       height: 50%
       width: 1px
     &:hover,

assets/styles/bulma/elements/title.sass

@@ -1,20 +1,27 @@
-$title-color: $grey-darker !default
+@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: $grey-dark !default
+$subtitle-color: $text !default
+$subtitle-family: false !default
 $subtitle-size: $size-5 !default
 $subtitle-weight: $weight-normal !default
-$subtitle-strong-color: $grey-darker !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
-  +block
+  @extend %block
   word-break: break-word
   em,
   span
@@ -28,16 +35,18 @@ $subtitle-strong-weight: $weight-semibold !default
 
 .title
   color: $title-color
+  @if $title-family
+    font-family: $title-family
   font-size: $title-size
   font-weight: $title-weight
-  line-height: 1.125
+  line-height: $title-line-height
   strong
     color: $title-strong-color
     font-weight: $title-strong-weight
   & + .highlight
     margin-top: -0.75rem
   &:not(.is-spaced) + .subtitle
-    margin-top: -1.5rem
+    margin-top: $subtitle-negative-margin
   // Sizes
   @each $size in $sizes
     $i: index($sizes, $size)
@@ -46,14 +55,16 @@ $subtitle-strong-weight: $weight-semibold !default
 
 .subtitle
   color: $subtitle-color
+  @if $subtitle-family
+    font-family: $subtitle-family
   font-size: $subtitle-size
   font-weight: $subtitle-weight
-  line-height: 1.25
+  line-height: $subtitle-line-height
   strong
     color: $subtitle-strong-color
     font-weight: $subtitle-strong-weight
   &:not(.is-spaced) + .title
-    margin-top: -1.5rem
+    margin-top: $subtitle-negative-margin
   // Sizes
   @each $size in $sizes
     $i: index($sizes, $size)

assets/styles/bulma/form/_all.sass

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

assets/styles/bulma/form/checkbox-radio.sass

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

assets/styles/bulma/form/file.sass

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

assets/styles/bulma/form/input-textarea.sass

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

assets/styles/bulma/form/select.sass

@@ -0,0 +1,87 @@
+$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
+  &.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

assets/styles/bulma/form/shared.sass

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

assets/styles/bulma/form/tools.sass

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

assets/styles/bulma/grid/_all.sass

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

assets/styles/bulma/grid/columns.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $column-gap: 0.75rem !default
 
 .column
@@ -8,6 +10,7 @@ $column-gap: 0.75rem !default
   padding: $column-gap
   .columns.is-mobile > &.is-narrow
     flex: none
+    width: unset
   .columns.is-mobile > &.is-full
     flex: none
     width: 100%
@@ -39,32 +42,33 @@ $column-gap: 0.75rem !default
     flex: none
     width: 80%
   .columns.is-mobile > &.is-offset-three-quarters
-    margin-left: 75%
+    +ltr-property("margin", 75%, false)
   .columns.is-mobile > &.is-offset-two-thirds
-    margin-left: 66.6666%
+    +ltr-property("margin", 66.6666%, false)
   .columns.is-mobile > &.is-offset-half
-    margin-left: 50%
+    +ltr-property("margin", 50%, false)
   .columns.is-mobile > &.is-offset-one-third
-    margin-left: 33.3333%
+    +ltr-property("margin", 33.3333%, false)
   .columns.is-mobile > &.is-offset-one-quarter
-    margin-left: 25%
+    +ltr-property("margin", 25%, false)
   .columns.is-mobile > &.is-offset-one-fifth
-    margin-left: 20%
+    +ltr-property("margin", 20%, false)
   .columns.is-mobile > &.is-offset-two-fifths
-    margin-left: 40%
+    +ltr-property("margin", 40%, false)
   .columns.is-mobile > &.is-offset-three-fifths
-    margin-left: 60%
+    +ltr-property("margin", 60%, false)
   .columns.is-mobile > &.is-offset-four-fifths
-    margin-left: 80%
+    +ltr-property("margin", 80%, false)
-  @for $i from 1 through 12
+  @for $i from 0 through 12
     .columns.is-mobile > &.is-#{$i}
       flex: none
-      width: ($i / 12) * 100%
+      width: percentage($i / 12)
     .columns.is-mobile > &.is-offset-#{$i}
-      margin-left: ($i / 12) * 100%
+      +ltr-property("margin", percentage($i / 12), false)
   +mobile
     &.is-narrow-mobile
       flex: none
+      width: unset
     &.is-full-mobile
       flex: none
       width: 100%
@@ -96,33 +100,34 @@ $column-gap: 0.75rem !default
       flex: none
       width: 80%
     &.is-offset-three-quarters-mobile
-      margin-left: 75%
+      +ltr-property("margin", 75%, false)
     &.is-offset-two-thirds-mobile
-      margin-left: 66.6666%
+      +ltr-property("margin", 66.6666%, false)
     &.is-offset-half-mobile
-      margin-left: 50%
+      +ltr-property("margin", 50%, false)
     &.is-offset-one-third-mobile
-      margin-left: 33.3333%
+      +ltr-property("margin", 33.3333%, false)
     &.is-offset-one-quarter-mobile
-      margin-left: 25%
+      +ltr-property("margin", 25%, false)
     &.is-offset-one-fifth-mobile
-      margin-left: 20%
+      +ltr-property("margin", 20%, false)
     &.is-offset-two-fifths-mobile
-      margin-left: 40%
+      +ltr-property("margin", 40%, false)
     &.is-offset-three-fifths-mobile
-      margin-left: 60%
+      +ltr-property("margin", 60%, false)
     &.is-offset-four-fifths-mobile
-      margin-left: 80%
+      +ltr-property("margin", 80%, false)
-    @for $i from 1 through 12
+    @for $i from 0 through 12
       &.is-#{$i}-mobile
         flex: none
-        width: ($i / 12) * 100%
+        width: percentage($i / 12)
       &.is-offset-#{$i}-mobile
-        margin-left: ($i / 12) * 100%
+        +ltr-property("margin", percentage($i / 12), false)
   +tablet
     &.is-narrow,
     &.is-narrow-tablet
       flex: none
+      width: unset
     &.is-full,
     &.is-full-tablet
       flex: none
@@ -165,42 +170,43 @@ $column-gap: 0.75rem !default
       width: 80%
     &.is-offset-three-quarters,
     &.is-offset-three-quarters-tablet
-      margin-left: 75%
+      +ltr-property("margin", 75%, false)
     &.is-offset-two-thirds,
     &.is-offset-two-thirds-tablet
-      margin-left: 66.6666%
+      +ltr-property("margin", 66.6666%, false)
     &.is-offset-half,
     &.is-offset-half-tablet
-      margin-left: 50%
+      +ltr-property("margin", 50%, false)
     &.is-offset-one-third,
     &.is-offset-one-third-tablet
-      margin-left: 33.3333%
+      +ltr-property("margin", 33.3333%, false)
     &.is-offset-one-quarter,
     &.is-offset-one-quarter-tablet
-      margin-left: 25%
+      +ltr-property("margin", 25%, false)
     &.is-offset-one-fifth,
     &.is-offset-one-fifth-tablet
-      margin-left: 20%
+      +ltr-property("margin", 20%, false)
     &.is-offset-two-fifths,
     &.is-offset-two-fifths-tablet
-      margin-left: 40%
+      +ltr-property("margin", 40%, false)
     &.is-offset-three-fifths,
     &.is-offset-three-fifths-tablet
-      margin-left: 60%
+      +ltr-property("margin", 60%, false)
     &.is-offset-four-fifths,
     &.is-offset-four-fifths-tablet
-      margin-left: 80%
+      +ltr-property("margin", 80%, false)
-    @for $i from 1 through 12
+    @for $i from 0 through 12
       &.is-#{$i},
       &.is-#{$i}-tablet
         flex: none
-        width: ($i / 12) * 100%
+        width: percentage($i / 12)
       &.is-offset-#{$i},
       &.is-offset-#{$i}-tablet
-        margin-left: ($i / 12) * 100%
+        +ltr-property("margin", percentage($i / 12), false)
   +touch
     &.is-narrow-touch
       flex: none
+      width: unset
     &.is-full-touch
       flex: none
       width: 100%
@@ -232,32 +238,33 @@ $column-gap: 0.75rem !default
       flex: none
       width: 80%
     &.is-offset-three-quarters-touch
-      margin-left: 75%
+      +ltr-property("margin", 75%, false)
     &.is-offset-two-thirds-touch
-      margin-left: 66.6666%
+      +ltr-property("margin", 66.6666%, false)
     &.is-offset-half-touch
-      margin-left: 50%
+      +ltr-property("margin", 50%, false)
     &.is-offset-one-third-touch
-      margin-left: 33.3333%
+      +ltr-property("margin", 33.3333%, false)
     &.is-offset-one-quarter-touch
-      margin-left: 25%
+      +ltr-property("margin", 25%, false)
     &.is-offset-one-fifth-touch
-      margin-left: 20%
+      +ltr-property("margin", 20%, false)
     &.is-offset-two-fifths-touch
-      margin-left: 40%
+      +ltr-property("margin", 40%, false)
     &.is-offset-three-fifths-touch
-      margin-left: 60%
+      +ltr-property("margin", 60%, false)
     &.is-offset-four-fifths-touch
-      margin-left: 80%
+      +ltr-property("margin", 80%, false)
-    @for $i from 1 through 12
+    @for $i from 0 through 12
       &.is-#{$i}-touch
         flex: none
-        width: ($i / 12) * 100%
+        width: percentage($i / 12)
       &.is-offset-#{$i}-touch
-        margin-left: ($i / 12) * 100%
+        +ltr-property("margin", percentage($i / 12), false)
   +desktop
     &.is-narrow-desktop
       flex: none
+      width: unset
     &.is-full-desktop
       flex: none
       width: 100%
@@ -289,32 +296,33 @@ $column-gap: 0.75rem !default
       flex: none
       width: 80%
     &.is-offset-three-quarters-desktop
-      margin-left: 75%
+      +ltr-property("margin", 75%, false)
     &.is-offset-two-thirds-desktop
-      margin-left: 66.6666%
+      +ltr-property("margin", 66.6666%, false)
     &.is-offset-half-desktop
-      margin-left: 50%
+      +ltr-property("margin", 50%, false)
     &.is-offset-one-third-desktop
-      margin-left: 33.3333%
+      +ltr-property("margin", 33.3333%, false)
     &.is-offset-one-quarter-desktop
-      margin-left: 25%
+      +ltr-property("margin", 25%, false)
     &.is-offset-one-fifth-desktop
-      margin-left: 20%
+      +ltr-property("margin", 20%, false)
     &.is-offset-two-fifths-desktop
-      margin-left: 40%
+      +ltr-property("margin", 40%, false)
     &.is-offset-three-fifths-desktop
-      margin-left: 60%
+      +ltr-property("margin", 60%, false)
     &.is-offset-four-fifths-desktop
-      margin-left: 80%
+      +ltr-property("margin", 80%, false)
-    @for $i from 1 through 12
+    @for $i from 0 through 12
       &.is-#{$i}-desktop
         flex: none
-        width: ($i / 12) * 100%
+        width: percentage($i / 12)
       &.is-offset-#{$i}-desktop
-        margin-left: ($i / 12) * 100%
+        +ltr-property("margin", percentage($i / 12), false)
   +widescreen
     &.is-narrow-widescreen
       flex: none
+      width: unset
     &.is-full-widescreen
       flex: none
       width: 100%
@@ -346,32 +354,33 @@ $column-gap: 0.75rem !default
       flex: none
       width: 80%
     &.is-offset-three-quarters-widescreen
-      margin-left: 75%
+      +ltr-property("margin", 75%, false)
     &.is-offset-two-thirds-widescreen
-      margin-left: 66.6666%
+      +ltr-property("margin", 66.6666%, false)
     &.is-offset-half-widescreen
-      margin-left: 50%
+      +ltr-property("margin", 50%, false)
     &.is-offset-one-third-widescreen
-      margin-left: 33.3333%
+      +ltr-property("margin", 33.3333%, false)
     &.is-offset-one-quarter-widescreen
-      margin-left: 25%
+      +ltr-property("margin", 25%, false)
     &.is-offset-one-fifth-widescreen
-      margin-left: 20%
+      +ltr-property("margin", 20%, false)
     &.is-offset-two-fifths-widescreen
-      margin-left: 40%
+      +ltr-property("margin", 40%, false)
     &.is-offset-three-fifths-widescreen
-      margin-left: 60%
+      +ltr-property("margin", 60%, false)
     &.is-offset-four-fifths-widescreen
-      margin-left: 80%
+      +ltr-property("margin", 80%, false)
-    @for $i from 1 through 12
+    @for $i from 0 through 12
       &.is-#{$i}-widescreen
         flex: none
-        width: ($i / 12) * 100%
+        width: percentage($i / 12)
       &.is-offset-#{$i}-widescreen
-        margin-left: ($i / 12) * 100%
+        +ltr-property("margin", percentage($i / 12), false)
   +fullhd
     &.is-narrow-fullhd
       flex: none
+      width: unset
     &.is-full-fullhd
       flex: none
       width: 100%
@@ -403,33 +412,33 @@ $column-gap: 0.75rem !default
       flex: none
       width: 80%
     &.is-offset-three-quarters-fullhd
-      margin-left: 75%
+      +ltr-property("margin", 75%, false)
     &.is-offset-two-thirds-fullhd
-      margin-left: 66.6666%
+      +ltr-property("margin", 66.6666%, false)
     &.is-offset-half-fullhd
-      margin-left: 50%
+      +ltr-property("margin", 50%, false)
     &.is-offset-one-third-fullhd
-      margin-left: 33.3333%
+      +ltr-property("margin", 33.3333%, false)
     &.is-offset-one-quarter-fullhd
-      margin-left: 25%
+      +ltr-property("margin", 25%, false)
     &.is-offset-one-fifth-fullhd
-      margin-left: 20%
+      +ltr-property("margin", 20%, false)
     &.is-offset-two-fifths-fullhd
-      margin-left: 40%
+      +ltr-property("margin", 40%, false)
     &.is-offset-three-fifths-fullhd
-      margin-left: 60%
+      +ltr-property("margin", 60%, false)
     &.is-offset-four-fifths-fullhd
-      margin-left: 80%
+      +ltr-property("margin", 80%, false)
-    @for $i from 1 through 12
+    @for $i from 0 through 12
       &.is-#{$i}-fullhd
         flex: none
-        width: ($i / 12) * 100%
+        width: percentage($i / 12)
       &.is-offset-#{$i}-fullhd
-        margin-left: ($i / 12) * 100%
+        +ltr-property("margin", percentage($i / 12), false)
 
 .columns
-  margin-left: (-$column-gap)
+  +ltr-property("margin", (-$column-gap), false)
-  margin-right: (-$column-gap)
+  +ltr-property("margin", (-$column-gap))
   margin-top: (-$column-gap)
   &:last-child
     margin-bottom: (-$column-gap)
@@ -439,8 +448,8 @@ $column-gap: 0.75rem !default
   &.is-centered
     justify-content: center
   &.is-gapless
-    margin-left: 0
+    +ltr-property("margin", 0, false)
-    margin-right: 0
+    +ltr-property("margin", 0)
     margin-top: 0
     & > .column
       margin: 0
@@ -467,11 +476,38 @@ $column-gap: 0.75rem !default
 @if $variable-columns
   .columns.is-variable
     --columnGap: 0.75rem
-    margin-left: calc(-1 * var(--columnGap))
+    +ltr-property("margin", calc(-1 * var(--columnGap)), false)
-    margin-right: calc(-1 * var(--columnGap))
+    +ltr-property("margin", calc(-1 * var(--columnGap)))
-    .column
+    > .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}

assets/styles/bulma/grid/tiles.sass

@@ -1,3 +1,7 @@
+@import "../utilities/mixins"
+
+$tile-spacing: 0.75rem !default
+
 .tile
   align-items: stretch
   display: block
@@ -7,17 +11,17 @@
   min-height: min-content
   // Modifiers
   &.is-ancestor
-    margin-left: -0.75rem
+    margin-left: $tile-spacing * -1
-    margin-right: -0.75rem
+    margin-right: $tile-spacing * -1
-    margin-top: -0.75rem
+    margin-top: $tile-spacing * -1
     &:last-child
-      margin-bottom: -0.75rem
+      margin-bottom: $tile-spacing * -1
     &:not(:last-child)
-      margin-bottom: 0.75rem
+      margin-bottom: $tile-spacing
   &.is-child
     margin: 0 !important
   &.is-parent
-    padding: 0.75rem
+    padding: $tile-spacing
   &.is-vertical
     flex-direction: column
     & > .tile.is-child:not(:last-child)

assets/styles/bulma/helpers/_all.sass

@@ -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"

assets/styles/bulma/helpers/color.sass

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

assets/styles/bulma/helpers/flexbox.sass

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

assets/styles/bulma/helpers/float.sass

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

assets/styles/bulma/helpers/other.sass

@@ -0,0 +1,14 @@
+@import "../utilities/mixins"
+
+.is-radiusless
+  border-radius: 0 !important
+
+.is-shadowless
+  box-shadow: none !important
+
+.is-clickable
+  cursor: pointer !important
+  pointer-events: all !important
+
+.is-unselectable
+  @extend %unselectable

assets/styles/bulma/helpers/overflow.sass

@@ -0,0 +1,2 @@
+.is-clipped
+  overflow: hidden !important

assets/styles/bulma/helpers/position.sass

@@ -0,0 +1,7 @@
+@import "../utilities/mixins"
+
+.is-overlay
+  @extend %overlay
+
+.is-relative
+  position: relative !important

assets/styles/bulma/helpers/spacing.sass

@@ -0,0 +1,31 @@
+.is-marginless
+  margin: 0 !important
+
+.is-paddingless
+  padding: 0 !important
+
+$spacing-shortcuts: ("margin": "m", "padding": "p") !default
+$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default
+$spacing-horizontal: "x" !default
+$spacing-vertical: "y" !default
+$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem) !default
+
+@each $property, $shortcut in $spacing-shortcuts
+  @each $name, $value in $spacing-values
+    // All directions
+    .#{$shortcut}-#{$name}
+      #{$property}: $value !important
+    // Cardinal directions
+    @each $direction, $suffix in $spacing-directions
+      .#{$shortcut}#{$suffix}-#{$name}
+        #{$property}-#{$direction}: $value !important
+    // Horizontal axis
+    @if $spacing-horizontal != null
+      .#{$shortcut}#{$spacing-horizontal}-#{$name}
+        #{$property}-left: $value !important
+        #{$property}-right: $value !important
+    // Vertical axis
+    @if $spacing-vertical != null
+      .#{$shortcut}#{$spacing-vertical}-#{$name}
+        #{$property}-top: $value !important
+        #{$property}-bottom: $value !important

assets/styles/bulma/helpers/typography.sass

@@ -0,0 +1,100 @@
+@import "../utilities/mixins"
+
+=typography-size($target:'')
+  @each $size in $sizes
+    $i: index($sizes, $size)
+    .is-size-#{$i}#{if($target == '', '', '-' + $target)}
+      font-size: $size !important
+
++typography-size()
+
++mobile
+  +typography-size('mobile')
+
++tablet
+  +typography-size('tablet')
+
++touch
+  +typography-size('touch')
+
++desktop
+  +typography-size('desktop')
+
++widescreen
+  +typography-size('widescreen')
+
++fullhd
+  +typography-size('fullhd')
+
+$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right')
+
+@each $alignment, $text-align in $alignments
+  .has-text-#{$alignment}
+    text-align: #{$text-align} !important
+
+@each $alignment, $text-align in $alignments
+  +mobile
+    .has-text-#{$alignment}-mobile
+      text-align: #{$text-align} !important
+  +tablet
+    .has-text-#{$alignment}-tablet
+      text-align: #{$text-align} !important
+  +tablet-only
+    .has-text-#{$alignment}-tablet-only
+      text-align: #{$text-align} !important
+  +touch
+    .has-text-#{$alignment}-touch
+      text-align: #{$text-align} !important
+  +desktop
+    .has-text-#{$alignment}-desktop
+      text-align: #{$text-align} !important
+  +desktop-only
+    .has-text-#{$alignment}-desktop-only
+      text-align: #{$text-align} !important
+  +widescreen
+    .has-text-#{$alignment}-widescreen
+      text-align: #{$text-align} !important
+  +widescreen-only
+    .has-text-#{$alignment}-widescreen-only
+      text-align: #{$text-align} !important
+  +fullhd
+    .has-text-#{$alignment}-fullhd
+      text-align: #{$text-align} !important
+
+.is-capitalized
+  text-transform: capitalize !important
+
+.is-lowercase
+  text-transform: lowercase !important
+
+.is-uppercase
+  text-transform: uppercase !important
+
+.is-italic
+  font-style: italic !important
+
+.has-text-weight-light
+  font-weight: $weight-light !important
+.has-text-weight-normal
+  font-weight: $weight-normal !important
+.has-text-weight-medium
+  font-weight: $weight-medium !important
+.has-text-weight-semibold
+  font-weight: $weight-semibold !important
+.has-text-weight-bold
+  font-weight: $weight-bold !important
+
+.is-family-primary
+  font-family: $family-primary !important
+
+.is-family-secondary
+  font-family: $family-secondary !important
+
+.is-family-sans-serif
+  font-family: $family-sans-serif !important
+
+.is-family-monospace
+  font-family: $family-monospace !important
+
+.is-family-code
+  font-family: $family-code !important

assets/styles/bulma/helpers/visibility.sass

@@ -0,0 +1,122 @@
+@import "../utilities/mixins"
+
+$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
+
+@each $display in $displays
+  .is-#{$display}
+    display: #{$display} !important
+  +mobile
+    .is-#{$display}-mobile
+      display: #{$display} !important
+  +tablet
+    .is-#{$display}-tablet
+      display: #{$display} !important
+  +tablet-only
+    .is-#{$display}-tablet-only
+      display: #{$display} !important
+  +touch
+    .is-#{$display}-touch
+      display: #{$display} !important
+  +desktop
+    .is-#{$display}-desktop
+      display: #{$display} !important
+  +desktop-only
+    .is-#{$display}-desktop-only
+      display: #{$display} !important
+  +widescreen
+    .is-#{$display}-widescreen
+      display: #{$display} !important
+  +widescreen-only
+    .is-#{$display}-widescreen-only
+      display: #{$display} !important
+  +fullhd
+    .is-#{$display}-fullhd
+      display: #{$display} !important
+
+.is-hidden
+  display: none !important
+
+.is-sr-only
+  border: none !important
+  clip: rect(0, 0, 0, 0) !important
+  height: 0.01em !important
+  overflow: hidden !important
+  padding: 0 !important
+  position: absolute !important
+  white-space: nowrap !important
+  width: 0.01em !important
+
++mobile
+  .is-hidden-mobile
+    display: none !important
+
++tablet
+  .is-hidden-tablet
+    display: none !important
+
++tablet-only
+  .is-hidden-tablet-only
+    display: none !important
+
++touch
+  .is-hidden-touch
+    display: none !important
+
++desktop
+  .is-hidden-desktop
+    display: none !important
+
++desktop-only
+  .is-hidden-desktop-only
+    display: none !important
+
++widescreen
+  .is-hidden-widescreen
+    display: none !important
+
++widescreen-only
+  .is-hidden-widescreen-only
+    display: none !important
+
++fullhd
+  .is-hidden-fullhd
+    display: none !important
+
+.is-invisible
+  visibility: hidden !important
+
++mobile
+  .is-invisible-mobile
+    visibility: hidden !important
+
++tablet
+  .is-invisible-tablet
+    visibility: hidden !important
+
++tablet-only
+  .is-invisible-tablet-only
+    visibility: hidden !important
+
++touch
+  .is-invisible-touch
+    visibility: hidden !important
+
++desktop
+  .is-invisible-desktop
+    visibility: hidden !important
+
++desktop-only
+  .is-invisible-desktop-only
+    visibility: hidden !important
+
++widescreen
+  .is-invisible-widescreen
+    visibility: hidden !important
+
++widescreen-only
+  .is-invisible-widescreen-only
+    visibility: hidden !important
+
++fullhd
+  .is-invisible-fullhd
+    visibility: hidden !important

assets/styles/bulma/layout/_all.sass

@@ -1,5 +1,6 @@
+/* Bulma Layout */
 @charset "utf-8"
 
-@import "hero.sass"
+@import "hero"
-@import "section.sass"
+@import "section"
-@import "footer.sass"
+@import "footer"

assets/styles/bulma/layout/footer.sass

@@ -1,5 +1,11 @@
-$footer-background-color: $background !default
+@import "../utilities/derived-variables"
+
+$footer-background-color: $scheme-main-bis !default
+$footer-color: false !default
+$footer-padding: 3rem 1.5rem 6rem !default
 
 .footer
   background-color: $footer-background-color
-  padding: 3rem 1.5rem 6rem
+  padding: $footer-padding
+  @if $footer-color
+    color: $footer-color

assets/styles/bulma/layout/hero.sass

@@ -1,5 +1,13 @@
-// Main container
+@import "../utilities/mixins"
 
+$hero-body-padding: 3rem 1.5rem !default
+$hero-body-padding-small: 1.5rem !default
+$hero-body-padding-medium: 9rem 1.5rem !default
+$hero-body-padding-large: 18rem 1.5rem !default
+
+$hero-colors: $colors !default
+
+// Main container
 .hero
   align-items: stretch
   display: flex
@@ -11,19 +19,19 @@
     ul
       border-bottom: none
   // Colors
-  @each $name, $pair in $colors
+  @each $name, $pair in $hero-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}
       background-color: $color
       color: $color-invert
-      a:not(.button):not(.dropdown-item):not(.tag),
+      a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
       strong
         color: inherit
       .title
         color: $color-invert
       .subtitle
-        color: rgba($color-invert, 0.9)
+        color: bulmaRgba($color-invert, 0.9)
         a:not(.button),
         strong
           color: $color-invert
@@ -32,12 +40,12 @@
           background-color: $color
       .navbar-item,
       .navbar-link
-        color: rgba($color-invert, 0.7)
+        color: bulmaRgba($color-invert, 0.7)
       a.navbar-item,
       .navbar-link
         &:hover,
         &.is-active
-          background-color: darken($color, 5%)
+          background-color: bulmaDarken($color, 5%)
           color: $color-invert
       .tabs
         a
@@ -53,7 +61,7 @@
           a
             color: $color-invert
             &:hover
-              background-color: rgba($black, 0.1)
+              background-color: bulmaRgba($scheme-invert, 0.1)
           li.is-active a
             &,
             &:hover
@@ -61,6 +69,7 @@
               border-color: $color-invert
               color: $color
       // Modifiers
+      @if type-of($color) == 'color'
         &.is-bold
           $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
           $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
@@ -68,36 +77,21 @@
           +mobile
             .navbar-menu
               background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
-      // Responsiveness
-      // +mobile
-      //   .nav-toggle
-      //     span
-      //       background-color: $color-invert
-      //     &:hover
-      //       background-color: rgba($black, 0.1)
-      //     &.is-active
-      //       span
-      //         background-color: $color-invert
-      //   .nav-menu
-      //     .nav-item
-      //       border-top-color: rgba($color-invert, 0.2)
   // Sizes
   &.is-small
     .hero-body
-      padding-bottom: 1.5rem
+      padding: $hero-body-padding-small
-      padding-top: 1.5rem
   &.is-medium
     +tablet
       .hero-body
-        padding-bottom: 9rem
+        padding: $hero-body-padding-medium
-        padding-top: 9rem
   &.is-large
     +tablet
       .hero-body
-        padding-bottom: 18rem
+        padding: $hero-body-padding-large
-        padding-top: 18rem
   &.is-halfheight,
-  &.is-fullheight
+  &.is-fullheight,
+  &.is-fullheight-with-navbar
     .hero-body
       align-items: center
       display: flex
@@ -112,7 +106,7 @@
 // Components
 
 .hero-video
-  +overlay
+  @extend %overlay
   overflow: hidden
   video
     left: 50%
@@ -140,7 +134,7 @@
     display: flex
     justify-content: center
     .button:not(:last-child)
-      margin-right: 1.5rem
+      +ltr-property("margin", 1.5rem)
 
 // Containers
 
@@ -152,4 +146,4 @@
 .hero-body
   flex-grow: 1
   flex-shrink: 0
-  padding: 3rem 1.5rem
+  padding: $hero-body-padding

assets/styles/bulma/layout/section.sass

@@ -1,3 +1,5 @@
+@import "../utilities/mixins"
+
 $section-padding: 3rem 1.5rem !default
 $section-padding-medium: 9rem 1.5rem !default
 $section-padding-large: 18rem 1.5rem !default

assets/styles/bulma/utilities/_all.sass

@@ -1,8 +1,9 @@
+/* Bulma Utilities */
 @charset "utf-8"
 
-@import "initial-variables.sass"
+@import "initial-variables"
-@import "functions.sass"
+@import "functions"
-@import "derived-variables.sass"
+@import "derived-variables"
-@import "animations.sass"
+@import "mixins"
-@import "mixins.sass"
+@import "controls"
-@import "controls.sass"
+@import "extends"

assets/styles/bulma/utilities/animations.sass

@@ -1,5 +1 @@
-@keyframes spinAround
+@warn "The animations.sass file has MOVED. It is now in the /base folder. Please import sass/base/animations instead."
-  from
-    transform: rotate(0deg)
-  to
-    transform: rotate(359deg)

assets/styles/bulma/utilities/controls.sass

@@ -1,21 +1,28 @@
+@import "derived-variables"
+
 $control-radius: $radius !default
 $control-radius-small: $radius-small !default
 
-$control-padding-vertical: calc(0.375em - 1px) !default
+$control-border-width: 1px !default
-$control-padding-horizontal: calc(0.625em - 1px) !default
+
+$control-height: 2.5em !default
+$control-line-height: 1.5 !default
+
+$control-padding-vertical: calc(0.5em - #{$control-border-width}) !default
+$control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default
 
 =control
   -moz-appearance: none
   -webkit-appearance: none
   align-items: center
-  border: 1px solid transparent
+  border: $control-border-width solid transparent
   border-radius: $control-radius
   box-shadow: none
   display: inline-flex
   font-size: $size-normal
-  height: 2.25em
+  height: $control-height
   justify-content: flex-start
-  line-height: 1.5
+  line-height: $control-line-height
   padding-bottom: $control-padding-vertical
   padding-left: $control-padding-horizontal
   padding-right: $control-padding-horizontal
@@ -28,7 +35,8 @@ $control-padding-horizontal: calc(0.625em - 1px) !default
   &:active,
   &.is-active
     outline: none
-  &[disabled]
+  &[disabled],
+  fieldset[disabled] &
     cursor: not-allowed
 
 // The controls sizes use mixins so they can be used at different breakpoints

assets/styles/bulma/utilities/derived-variables.sass

@@ -1,3 +1,6 @@
+@import "initial-variables"
+@import "functions"
+
 $primary: $turquoise !default
 
 $info: $cyan !default
@@ -19,20 +22,39 @@ $blue-invert: findColorInvert($blue) !default
 $purple-invert: findColorInvert($purple) !default
 $red-invert: findColorInvert($red) !default
 
-$primary-invert: $turquoise-invert !default
+$primary-invert: findColorInvert($primary) !default
-$info-invert: $cyan-invert !default
+$primary-light: findLightColor($primary) !default
-$success-invert: $green-invert !default
+$primary-dark: findDarkColor($primary) !default
-$warning-invert: $yellow-invert !default
+$info-invert: findColorInvert($info) !default
-$danger-invert: $red-invert !default
+$info-light: findLightColor($info) !default
-$light-invert: $dark !default
+$info-dark: findDarkColor($info) !default
-$dark-invert: $light !default
+$success-invert: findColorInvert($success) !default
+$success-light: findLightColor($success) !default
+$success-dark: findDarkColor($success) !default
+$warning-invert: findColorInvert($warning) !default
+$warning-light: findLightColor($warning) !default
+$warning-dark: findDarkColor($warning) !default
+$danger-invert: findColorInvert($danger) !default
+$danger-light: findLightColor($danger) !default
+$danger-dark: findDarkColor($danger) !default
+$light-invert: findColorInvert($light) !default
+$dark-invert: findColorInvert($dark) !default
 
 // General colors
 
+$scheme-main: $white !default
+$scheme-main-bis: $white-bis !default
+$scheme-main-ter: $white-ter !default
+$scheme-invert: $black !default
+$scheme-invert-bis: $black-bis !default
+$scheme-invert-ter: $black-ter !default
+
 $background: $white-ter !default
 
 $border: $grey-lighter !default
 $border-hover: $grey-light !default
+$border-light: $grey-lightest !default
+$border-light-hover: $grey-light !default
 
 // Text colors
 
@@ -43,7 +65,7 @@ $text-strong: $grey-darker !default
 
 // Code colors
 
-$code: $red !default
+$code: darken($red, 15%) !default
 $code-background: $background !default
 
 $pre: $text !default
@@ -52,7 +74,9 @@ $pre-background: $background !default
 // Link colors
 
 $link: $blue !default
-$link-invert: $blue-invert !default
+$link-invert: findColorInvert($link) !default
+$link-light: findLightColor($link) !default
+$link-dark: findDarkColor($link) !default
 $link-visited: $purple !default
 
 $link-hover: $grey-darker !default
@@ -67,6 +91,7 @@ $link-active-border: $grey-dark !default
 // Typography
 
 $family-primary: $family-sans-serif !default
+$family-secondary: $family-sans-serif !default
 $family-code: $family-monospace !default
 
 $size-small: $size-7 !default
@@ -75,8 +100,11 @@ $size-medium: $size-5 !default
 $size-large: $size-4 !default
 
 // Lists and maps
+$custom-colors: null !default
+$custom-shades: null !default
 
-$colors: ("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)) !default
+$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default
-$shades: ("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis) !default
+
+$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default
 
 $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default

assets/styles/bulma/utilities/extends.sass

@@ -0,0 +1,22 @@
+@import "mixins"
+
+%control
+  +control
+
+%unselectable
+  +unselectable
+
+%arrow
+  +arrow
+
+%block
+  +block
+
+%delete
+  +delete
+
+%loader
+  +loader
+
+%overlay
+  +overlay

assets/styles/bulma/utilities/functions.sass

@@ -1,3 +1,56 @@
+@function mergeColorMaps($bulma-colors, $custom-colors)
+  // We return at least Bulma's hard-coded colors
+  $merged-colors: $bulma-colors
+
+  // We want a map as input
+  @if type-of($custom-colors) == 'map'
+    @each $name, $components in $custom-colors
+      // The color name should be a string
+      // and the components either a single color
+      // or a colors list with at least one element
+      @if type-of($name) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1
+        $color-base: null
+        $color-invert: null
+        $color-light: null
+        $color-dark: null
+        $value: null
+
+        // The param can either be a single color
+        // or a list of 2 colors
+        @if type-of($components) == 'color'
+          $color-base: $components
+          $color-invert: findColorInvert($color-base)
+          $color-light: findLightColor($color-base)
+          $color-dark: findDarkColor($color-base)
+        @else if type-of($components) == 'list'
+          $color-base: nth($components, 1)
+          // If Invert, Light and Dark are provided
+          @if length($components) > 3
+            $color-invert: nth($components, 2)
+            $color-light: nth($components, 3)
+            $color-dark: nth($components, 4)
+            // If only Invert and Light are provided
+          @else if length($components) > 2
+            $color-invert: nth($components, 2)
+            $color-light: nth($components, 3)
+            $color-dark: findDarkColor($color-base)
+            // If only Invert is provided
+          @else
+            $color-invert: nth($components, 2)
+            $color-light: findLightColor($color-base)
+            $color-dark: findDarkColor($color-base)
+
+        $value: ($color-base, $color-invert, $color-light, $color-dark)
+
+        // We only want to merge the map if the color base is an actual color
+        @if type-of($color-base) == 'color'
+          // We merge this colors elements as map with Bulma's colors map
+          // (we can override them this way, no multiple definition for the same name)
+          // $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark)))
+          $merged-colors: map_merge($merged-colors, ($name: $value))
+
+  @return $merged-colors
+
 @function powerNumber($number, $exp)
   $value: 1
   @if $exp > 0
@@ -9,6 +62,8 @@
   @return $value
 
 @function colorLuminance($color)
+  @if type-of($color) != 'color'
+    @return 0.55
   $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
   @each $name, $value in $color-rgb
     $adjusted: 0
@@ -26,3 +81,35 @@
     @return rgba(#000, 0.7)
   @else
     @return #fff
+
+@function findLightColor($color)
+  @if type-of($color) == 'color'
+    $l: 96%
+    @if lightness($color) > 96%
+      $l: lightness($color)
+    @return change-color($color, $lightness: $l)
+  @return $background
+
+@function findDarkColor($color)
+  @if type-of($color) == 'color'
+    $base-l: 29%
+    $luminance: colorLuminance($color)
+    $luminance-delta: (0.53 - $luminance)
+    $target-l: round($base-l + ($luminance-delta * 53))
+    @return change-color($color, $lightness: max($base-l, $target-l))
+  @return $text-strong
+
+@function bulmaRgba($color, $alpha)
+  @if type-of($color) != 'color'
+    @return $color
+  @return rgba($color, $alpha)
+
+@function bulmaDarken($color, $amount)
+  @if type-of($color) != 'color'
+    @return $color
+  @return darken($color, $amount)
+
+@function bulmaLighten($color, $amount)
+  @if type-of($color) != 'color'
+    @return $color
+  @return lighten($color, $amount)

assets/styles/bulma/utilities/initial-variables.sass

@@ -9,6 +9,7 @@ $grey-dark:    hsl(0, 0%, 29%) !default
 $grey:         hsl(0, 0%, 48%) !default
 $grey-light:   hsl(0, 0%, 71%) !default
 $grey-lighter: hsl(0, 0%, 86%) !default
+$grey-lightest: hsl(0, 0%, 93%) !default
 
 $white-ter:    hsl(0, 0%, 96%) !default
 $white-bis:    hsl(0, 0%, 98%) !default
@@ -16,12 +17,12 @@ $white:        hsl(0, 0%, 100%) !default
 
 $orange:       hsl(14,  100%, 53%) !default
 $yellow:       hsl(48,  100%, 67%) !default
-$green:        hsl(141, 71%,  48%) !default
+$green:        hsl(141, 53%,  53%) !default
 $turquoise:    hsl(171, 100%, 41%) !default
-$cyan:         hsl(204, 86%,  53%) !default
+$cyan:         hsl(204, 71%,  53%) !default
 $blue:         hsl(217, 71%,  53%) !default
 $purple:       hsl(271, 100%, 71%) !default
-$red:          hsl(348, 100%, 61%) !default
+$red:          hsl(348, 86%, 61%) !default
 
 // Typography
 
@@ -43,6 +44,10 @@ $weight-medium: 500 !default
 $weight-semibold: 600 !default
 $weight-bold: 700 !default
 
+// Spacing
+
+$block-spacing: 1.5rem !default
+
 // Responsiveness
 
 // The container horizontal gap, which acts as the offset for breakpoints
@@ -53,18 +58,21 @@ $tablet: 769px !default
 $desktop: 960px + (2 * $gap) !default
 // 1152px container + 4rem
 $widescreen: 1152px + (2 * $gap) !default
+$widescreen-enabled: true !default
 // 1344px container + 4rem
 $fullhd: 1344px + (2 * $gap) !default
+$fullhd-enabled: true !default
 
 // Miscellaneous
 
 $easing: ease-out !default
 $radius-small: 2px !default
-$radius: 3px !default
+$radius: 4px !default
-$radius-large: 5px !default
+$radius-large: 6px !default
 $radius-rounded: 290486px !default
 $speed: 86ms !default
 
 // Flags
 
 $variable-columns: true !default
+$rtl: false !default

assets/styles/bulma/utilities/mixins.sass

@@ -1,24 +1,7 @@
-@import "initial-variables"
+@import "derived-variables"
-
-=arrow($color)
-  border: 1px solid $color
-  border-right: 0
-  border-top: 0
-  content: " "
-  display: block
-  height: 0.5em
-  pointer-events: none
-  position: absolute
-  transform: rotate(-45deg)
-  transform-origin: center
-  width: 0.5em
-
-=block
-  &:not(:last-child)
-    margin-bottom: 1.5rem
 
 =clearfix
-  &:after
+  &::after
     clear: both
     content: " "
     display: table
@@ -32,71 +15,6 @@
     left: calc(50% - (#{$width} / 2))
     top: calc(50% - (#{$width} / 2))
 
-=delete
-  +unselectable
-  -moz-appearance: none
-  -webkit-appearance: none
-  background-color: rgba($black, 0.2)
-  border: none
-  border-radius: $radius-rounded
-  cursor: pointer
-  display: inline-block
-  flex-grow: 0
-  flex-shrink: 0
-  font-size: 0
-  height: 20px
-  max-height: 20px
-  max-width: 20px
-  min-height: 20px
-  min-width: 20px
-  outline: none
-  position: relative
-  vertical-align: top
-  width: 20px
-  &:before,
-  &:after
-    background-color: $white
-    content: ""
-    display: block
-    left: 50%
-    position: absolute
-    top: 50%
-    transform: translateX(-50%) translateY(-50%) rotate(45deg)
-    transform-origin: center center
-  &:before
-    height: 2px
-    width: 50%
-  &:after
-    height: 50%
-    width: 2px
-  &:hover,
-  &:focus
-    background-color: rgba($black, 0.3)
-  &:active
-    background-color: rgba($black, 0.4)
-  // Sizes
-  &.is-small
-    height: 16px
-    max-height: 16px
-    max-width: 16px
-    min-height: 16px
-    min-width: 16px
-    width: 16px
-  &.is-medium
-    height: 24px
-    max-height: 24px
-    max-width: 24px
-    min-height: 24px
-    min-width: 24px
-    width: 24px
-  &.is-large
-    height: 32px
-    max-height: 32px
-    max-width: 32px
-    min-height: 32px
-    min-width: 32px
-    width: 32px
-
 =fa($size, $dimensions)
   display: inline-block
   font-size: $size
@@ -130,7 +48,7 @@
     &:nth-child(3)
       top: calc(50% + 4px)
   &:hover
-    background-color: rgba(black, 0.05)
+    background-color: bulmaRgba(black, 0.05)
   // Modifers
   &.is-active
     span
@@ -141,41 +59,15 @@
       &:nth-child(3)
         transform: translateY(-5px) rotate(-45deg)
 
-=loader
-  animation: spinAround 500ms infinite linear
-  border: 2px solid $border
-  border-radius: $radius-rounded
-  border-right-color: transparent
-  border-top-color: transparent
-  content: ""
-  display: block
-  height: 1em
-  position: relative
-  width: 1em
-
 =overflow-touch
   -webkit-overflow-scrolling: touch
 
-=overlay($offset: 0)
-  bottom: $offset
-  left: $offset
-  position: absolute
-  right: $offset
-  top: $offset
-
 =placeholder
   $placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
   @each $placeholder in $placeholders
     &:#{$placeholder}-placeholder
       @content
 
-=unselectable
-  -webkit-touch-callout: none
-  -webkit-user-select: none
-  -moz-user-select: none
-  -ms-user-select: none
-  user-select: none
-
 // Responsiveness
 
 =from($device)
@@ -207,17 +99,170 @@
     @content
 
 =desktop-only
+  @if $widescreen-enabled
     @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
       @content
 
+=until-widescreen
+  @if $widescreen-enabled
+    @media screen and (max-width: $widescreen - 1px)
+      @content
+
 =widescreen
+  @if $widescreen-enabled
     @media screen and (min-width: $widescreen)
       @content
 
 =widescreen-only
+  @if $widescreen-enabled and $fullhd-enabled
     @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)
       @content
 
+=until-fullhd
+  @if $fullhd-enabled
+    @media screen and (max-width: $fullhd - 1px)
+      @content
+
 =fullhd
+  @if $fullhd-enabled
     @media screen and (min-width: $fullhd)
       @content
+
+=ltr
+  @if not $rtl
+    @content
+
+=rtl
+  @if $rtl
+    @content
+
+=ltr-property($property, $spacing, $right: true)
+  $normal: if($right, "right", "left")
+  $opposite: if($right, "left", "right")
+  @if $rtl
+    #{$property}-#{$opposite}: $spacing
+  @else
+    #{$property}-#{$normal}: $spacing
+
+=ltr-position($spacing, $right: true)
+  $normal: if($right, "right", "left")
+  $opposite: if($right, "left", "right")
+  @if $rtl
+    #{$opposite}: $spacing
+  @else
+    #{$normal}: $spacing
+
+// Placeholders
+
+=unselectable
+  -webkit-touch-callout: none
+  -webkit-user-select: none
+  -moz-user-select: none
+  -ms-user-select: none
+  user-select: none
+
+=arrow($color: transparent)
+  border: 3px solid $color
+  border-radius: 2px
+  border-right: 0
+  border-top: 0
+  content: " "
+  display: block
+  height: 0.625em
+  margin-top: -0.4375em
+  pointer-events: none
+  position: absolute
+  top: 50%
+  transform: rotate(-45deg)
+  transform-origin: center
+  width: 0.625em
+
+=block($spacing: $block-spacing)
+  &:not(:last-child)
+    margin-bottom: $spacing
+
+=delete
+  +unselectable
+  -moz-appearance: none
+  -webkit-appearance: none
+  background-color: bulmaRgba($scheme-invert, 0.2)
+  border: none
+  border-radius: $radius-rounded
+  cursor: pointer
+  pointer-events: auto
+  display: inline-block
+  flex-grow: 0
+  flex-shrink: 0
+  font-size: 0
+  height: 20px
+  max-height: 20px
+  max-width: 20px
+  min-height: 20px
+  min-width: 20px
+  outline: none
+  position: relative
+  vertical-align: top
+  width: 20px
+  &::before,
+  &::after
+    background-color: $scheme-main
+    content: ""
+    display: block
+    left: 50%
+    position: absolute
+    top: 50%
+    transform: translateX(-50%) translateY(-50%) rotate(45deg)
+    transform-origin: center center
+  &::before
+    height: 2px
+    width: 50%
+  &::after
+    height: 50%
+    width: 2px
+  &:hover,
+  &:focus
+    background-color: bulmaRgba($scheme-invert, 0.3)
+  &:active
+    background-color: bulmaRgba($scheme-invert, 0.4)
+  // Sizes
+  &.is-small
+    height: 16px
+    max-height: 16px
+    max-width: 16px
+    min-height: 16px
+    min-width: 16px
+    width: 16px
+  &.is-medium
+    height: 24px
+    max-height: 24px
+    max-width: 24px
+    min-height: 24px
+    min-width: 24px
+    width: 24px
+  &.is-large
+    height: 32px
+    max-height: 32px
+    max-width: 32px
+    min-height: 32px
+    min-width: 32px
+    width: 32px
+
+=loader
+  animation: spinAround 500ms infinite linear
+  border: 2px solid $grey-lighter
+  border-radius: $radius-rounded
+  border-right-color: transparent
+  border-top-color: transparent
+  content: ""
+  display: block
+  height: 1em
+  position: relative
+  width: 1em
+
+=overlay($offset: 0)
+  bottom: $offset
+  left: $offset
+  position: absolute
+  right: $offset
+  top: $offset
+

assets/styles/main.sass

@@ -1,21 +1,38 @@
-@charset "utf-8";
+@charset "utf-8"
 
-@import "./fa.sass";
+@import "./fa.sass"
 
-@import "bulma/utilities/initial-variables";
+@import "bulma/utilities/initial-variables"
-@import "bulma/utilities/functions";
+@import "bulma/utilities/functions"
 
 // make view narrower
-$widescreen: $desktop;
+$widescreen: $desktop
-$fullhd: $desktop;
+$fullhd: $desktop
 
 // custom fonts
-$family-sans-serif: "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$family-sans-serif: "Fira Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
-$family-monospace: "Source Serif Pro", monospace;
+$family-monospace: "Source Serif Pro", monospace
 
-@import "bulma/utilities/_all";
+@import "bulma/utilities/_all"
-@import "bulma/base/_all";
+
-@import "bulma/elements/_all";
+@import "bulma/helpers/color"
-@import "bulma/components/_all";
+@import "bulma/helpers/typography"
-@import "bulma/grid/_all";
+@import "bulma/helpers/visibility"
-@import "bulma/layout/_all";
+
+@import "bulma/base/minireset"
+@import "bulma/base/generic"
+
+@import "bulma/elements/box"
+@import "bulma/elements/container"
+@import "bulma/elements/content"
+@import "bulma/elements/notification"
+@import "bulma/elements/table"
+@import "bulma/elements/tag"
+@import "bulma/elements/title"
+
+@import "bulma/components/level"
+@import "bulma/components/message"
+@import "bulma/components/navbar"
+
+@import "bulma/grid/columns"
+@import "bulma/layout/_all"