From f31beed9d0f2d47ddbb3de4f2860ac3ad52b4e77 Mon Sep 17 00:00:00 2001
From: Jim Campbell <jwcampbell@gmail.com>
Date: Mon, 16 Apr 2018 22:24:45 -0500
Subject: [PATCH] Bulma SCSS 0.7.0

Converted from: https://github.com/jgthms/bulma/releases/tag/0.7.0

Many thanks to Jeremy Thomas (@jgthms) and other Bulma contributors
---
 README.md                         |  10 +-
 base/_generic.scss                |   4 +-
 base/_helpers.scss                |  10 +
 base/_minireset.scss              |  12 +-
 bulma.scss                        |   2 +-
 components/_breadcrumb.scss       |  25 +--
 components/_card.scss             |   7 +
 components/_message.scss          |  17 +-
 components/_navbar.scss           | 138 ++++++++----
 elements/_button.scss             |  30 ++-
 elements/_container.scss          |  10 +-
 elements/_content.scss            |   9 +-
 elements/_form.scss               |  31 ++-
 elements/_image.scss              |  52 ++++-
 elements/_table.scss              |  12 +-
 elements/_tag.scss                |  12 +-
 elements/_title.scss              |  11 +-
 grid/_columns.scss                |  28 +--
 layout/_footer.scss               |   2 +-
 utilities/_controls.scss          |  14 +-
 utilities/_derived-variables.scss |   6 +-
 utilities/_functions.scss         |  44 ++++
 utilities/_initial-variables.scss |   8 +-
 utilities/_mixins.scss            | 344 ++++++++++++++++++------------
 24 files changed, 554 insertions(+), 284 deletions(-)

diff --git a/README.md b/README.md
index 5c1b628..2e87ae9 100644
--- a/README.md
+++ b/README.md
@@ -3,10 +3,6 @@
 This is a port of the [Bulma](https://github.com/jgthms/bulma) project SASS
 files to the SCSS syntax.
 
-Currently, these files are based on Bulma version 0.6.2, and will be updated
-with later releases.
-
-I've converted these files using
-[this script](https://gist.github.com/Prezto/e72e77e0f35352f5fcf5881b73b7d81b),
-so you are free to perform the conversion yourself - I only thought I would
-save others the trouble.
+Currently, these files are based on Bulma version 0.7.0, and will be updated
+with later releases. The files are converted to SCSS with
+[this script](https://gist.github.com/Prezto/e72e77e0f35352f5fcf5881b73b7d81b).
diff --git a/base/_generic.scss b/base/_generic.scss
index e5c3fd6..a6f5366 100644
--- a/base/_generic.scss
+++ b/base/_generic.scss
@@ -11,8 +11,8 @@ $code-padding: 0.25em 0.5em 0.25em !default;
 $code-weight: normal !default;
 $code-size: 0.875em !default;
 
-$hr-background-color: $border !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;
diff --git a/base/_helpers.scss b/base/_helpers.scss
index 4dc02c9..d208da4 100644
--- a/base/_helpers.scss
+++ b/base/_helpers.scss
@@ -74,7 +74,9 @@ $alignments: ("centered": "center", "justified": "justify", "left": "left", "rig
   .has-text-#{$alignment} {
     text-align: #{$text-align} !important;
   }
+}
 
+@each $alignment, $text-align in $alignments {
   @include mobile {
     .has-text-#{$alignment}-mobile {
       text-align: #{$text-align} !important;
@@ -167,12 +169,20 @@ $alignments: ("centered": "center", "justified": "justify", "left": "left", "rig
       color: darken($color, 10%) !important;
     }
   }
+
+  .has-background-#{$name} {
+    background-color: $color !important;
+  }
 }
 
 @each $name, $shade in $shades {
   .has-text-#{$name} {
     color: $shade !important;
   }
+
+  .has-background-#{$name} {
+    background-color: $shade !important;
+  }
 }
 
 .has-text-weight-light {
diff --git a/base/_minireset.scss b/base/_minireset.scss
index cbc21b0..7902c21 100644
--- a/base/_minireset.scss
+++ b/base/_minireset.scss
@@ -1,4 +1,4 @@
-/*! minireset.css v0.0.2 | MIT License | github.com/jgthms/minireset.css */
+/*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */
 // Blocks
 html,
 body,
@@ -57,20 +57,18 @@ html {
 }
 
 * {
-  box-sizing: inherit;
-
-  &:before,
-  &:after {
+  &,
+  &::before,
+  &::after {
     box-sizing: inherit;
   }
 }
 
 // Media
 img,
-embed,
-object,
 audio,
 video {
+  height: auto;
   max-width: 100%;
 }
 
diff --git a/bulma.scss b/bulma.scss
index 958c016..016ec01 100644
--- a/bulma.scss
+++ b/bulma.scss
@@ -1,4 +1,4 @@
-/*! bulma.io v0.6.2 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v0.7.0 | MIT License | github.com/jgthms/bulma */
 @import "utilities/_all";
 @import "base/_all";
 @import "elements/_all";
diff --git a/components/_breadcrumb.scss b/components/_breadcrumb.scss
index 27b5a28..7b0f4f3 100644
--- a/components/_breadcrumb.scss
+++ b/components/_breadcrumb.scss
@@ -2,17 +2,16 @@ $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: $grey-light !default;
 
 .breadcrumb {
   @include block;
   @include unselectable;
 
-  align-items: stretch;
-  display: flex;
   font-size: $size-normal;
-  overflow: hidden;
-  overflow-x: auto;
   white-space: nowrap;
 
   a {
@@ -20,7 +19,7 @@ $breadcrumb-item-separator-color: $text !default;
     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;
@@ -49,11 +48,11 @@ $breadcrumb-item-separator-color: $text !default;
     }
   }
 
-  ul, ol {
-    align-items: center;
+  ul,
+  ol {
+    align-items: flex-start;
     display: flex;
-    flex-grow: 1;
-    flex-shrink: 0;
+    flex-wrap: wrap;
     justify-content: flex-start;
   }
 
@@ -69,13 +68,15 @@ $breadcrumb-item-separator-color: $text !default;
 
   // Alignment
   &.is-centered {
-    ol, ul {
+    ol,
+    ul {
       justify-content: center;
     }
   }
 
   &.is-right {
-    ol, ul {
+    ol,
+    ul {
       justify-content: flex-end;
     }
   }
diff --git a/components/_card.scss b/components/_card.scss
index cbfe959..b8d3023 100644
--- a/components/_card.scss
+++ b/components/_card.scss
@@ -2,10 +2,14 @@ $card-color: $text !default;
 $card-background-color: $white !default;
 $card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default;
 
+$card-header-background-color: none !default;
 $card-header-color: $text-strong !default;
 $card-header-shadow: 0 1px 2px rgba($black, 0.1) !default;
 $card-header-weight: $weight-bold !default;
 
+$card-content-background-color: none !default;
+
+$card-footer-background-color: none !default;
 $card-footer-border-top: 1px solid $border !default;
 
 .card {
@@ -17,6 +21,7 @@ $card-footer-border-top: 1px solid $border !default;
 }
 
 .card-header {
+  background-color: $card-header-background-color;
   align-items: stretch;
   box-shadow: $card-header-shadow;
   display: flex;
@@ -49,10 +54,12 @@ $card-footer-border-top: 1px solid $border !default;
 }
 
 .card-content {
+  background-color: $card-content-background-color;
   padding: 1.5rem;
 }
 
 .card-footer {
+  background-color: $card-footer-background-color;
   border-top: $card-footer-border-top;
   align-items: stretch;
   display: flex;
diff --git a/components/_message.scss b/components/_message.scss
index 5ff3ed9..5310e2c 100644
--- a/components/_message.scss
+++ b/components/_message.scss
@@ -3,17 +3,21 @@ $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-code-background-color: transparent !default;
 
+$message-header-body-border-width: 0 !default;
+
 .message {
   @include block;
 
@@ -74,6 +78,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;
@@ -86,15 +91,17 @@ $message-body-pre-code-background-color: transparent !default;
   }
 
   & + .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;
 
diff --git a/components/_navbar.scss b/components/_navbar.scss
index 1ac3d5d..748f0af 100644
--- a/components/_navbar.scss
+++ b/components/_navbar.scss
@@ -1,10 +1,15 @@
 $navbar-background-color: $white !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-hover-color: $link !default;
-$navbar-item-hover-background-color: $background !default;
+$navbar-item-hover-background-color: $white-bis !default;
 $navbar-item-active-color: $black !default;
 $navbar-item-active-background-color: transparent !default;
 $navbar-item-img-max-height: 1.75rem !default;
@@ -18,7 +23,7 @@ $navbar-tab-active-border-bottom-style: solid !default;
 $navbar-tab-active-border-bottom-width: 3px !default;
 
 $navbar-dropdown-background-color: $white !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;
@@ -32,7 +37,8 @@ $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;
 
 @mixin navbar-fixed {
   left: 0;
@@ -41,16 +47,12 @@ $navbar-divider-background-color: $border !default;
   z-index: $navbar-fixed-z;
 }
 
-@mixin navbar-fixed-html {
-  left: 0;
-  position: fixed;
-  right: 0;
-}
-
 .navbar {
   background-color: $navbar-background-color;
+  box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color;
   min-height: $navbar-height;
   position: relative;
+  z-index: $navbar-z;
 
   @each $name, $pair in $colors {
     $color: nth($pair, 1);
@@ -153,14 +155,15 @@ $navbar-divider-background-color: $border !default;
   }
 }
 
-html.has-navbar-fixed-top,
-body.has-navbar-fixed-top {
-  padding-top: $navbar-height;
-}
+html,
+body {
+  &.has-navbar-fixed-top {
+    padding-top: $navbar-height;
+  }
 
-html.has-navbar-fixed-bottom,
-body.has-navbar-fixed-bottom {
-  padding-bottom: $navbar-height;
+  &.has-navbar-fixed-bottom {
+    padding-bottom: $navbar-height;
+  }
 }
 
 .navbar-brand,
@@ -171,6 +174,14 @@ body.has-navbar-fixed-bottom {
   min-height: $navbar-height;
 }
 
+.navbar-brand {
+  a.navbar-item {
+    &:hover {
+      background-color: transparent;
+    }
+  }
+}
+
 .navbar-tabs {
   @include overflow-touch;
 
@@ -194,12 +205,21 @@ body.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;
+
   &:hover,
   &.is-active {
     background-color: $navbar-item-hover-background-color;
@@ -208,6 +228,7 @@ a.navbar-link {
 }
 
 .navbar-item {
+  display: block;
   flex-grow: 0;
   flex-shrink: 0;
 
@@ -252,6 +273,13 @@ a.navbar-link {
 
 .navbar-link {
   padding-right: 2.5em;
+
+  &::after {
+    @include arrow($navbar-dropdown-arrow);
+
+    margin-top: -0.375em;
+    right: 1.125em;
+  }
 }
 
 .navbar-dropdown {
@@ -269,7 +297,7 @@ a.navbar-link {
   background-color: $navbar-divider-background-color;
   border: none;
   display: none;
-  height: 1px;
+  height: $navbar-divider-height;
   margin: 0.5rem 0;
 }
 
@@ -286,6 +314,12 @@ a.navbar-link {
     }
   }
 
+  .navbar-link {
+    &::after {
+      display: none;
+    }
+  }
+
   .navbar-menu {
     background-color: $navbar-background-color;
     box-shadow: 0 8px 16px rgba($black, 0.1);
@@ -326,12 +360,15 @@ a.navbar-link {
     }
   }
 
-  html.has-navbar-fixed-top-touch {
-    padding-top: $navbar-height;
-  }
+  html,
+  body {
+    &.has-navbar-fixed-top-touch {
+      padding-top: $navbar-height;
+    }
 
-  html.has-navbar-fixed-bottom-touch {
-    padding-bottom: $navbar-height;
+    &.has-navbar-fixed-bottom-touch {
+      padding-bottom: $navbar-height;
+    }
   }
 }
 
@@ -348,9 +385,23 @@ a.navbar-link {
   .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 {
         &:hover,
         &.is-active {
           background-color: transparent !important;
@@ -393,6 +444,8 @@ a.navbar-link {
   }
 
   .navbar-item {
+    display: flex;
+
     &.has-dropdown {
       align-items: stretch;
     }
@@ -417,6 +470,7 @@ a.navbar-link {
       .navbar-dropdown {
         display: block;
 
+        .navbar.is-spaced &,
         &.is-boxed {
           opacity: 1;
           pointer-events: auto;
@@ -426,16 +480,6 @@ a.navbar-link {
     }
   }
 
-  .navbar-link {
-    &::after {
-      @include arrow($navbar-dropdown-arrow);
-
-      margin-top: -0.375em;
-      right: 1.125em;
-      top: 50%;
-    }
-  }
-
   .navbar-menu {
     flex-grow: 1;
     flex-shrink: 0;
@@ -484,6 +528,7 @@ a.navbar-link {
       }
     }
 
+    .navbar.is-spaced &,
     &.is-boxed {
       border-radius: $navbar-dropdown-boxed-radius;
       border-top: none;
@@ -538,17 +583,28 @@ a.navbar-link {
     }
   }
 
-  html.has-navbar-fixed-top-desktop {
-    padding-top: $navbar-height;
-  }
+  html,
+  body {
+    &.has-navbar-fixed-top-desktop {
+      padding-top: $navbar-height;
+    }
 
-  html.has-navbar-fixed-bottom-desktop {
-    padding-bottom: $navbar-height;
+    &.has-navbar-fixed-bottom-desktop {
+      padding-bottom: $navbar-height;
+    }
+
+    &.has-spaced-navbar-fixed-top {
+      padding-top: $navbar-height + $navbar-padding-vertical * 2;
+    }
+
+    &.has-spaced-navbar-fixed-bottom {
+      padding-bottom: $navbar-height + $navbar-padding-vertical * 2;
+    }
   }
 
   // Hover/Active states
   a.navbar-item,
-  a.navbar-link {
+  .navbar-link {
     &.is-active {
       color: $navbar-item-active-color;
     }
diff --git a/elements/_button.scss b/elements/_button.scss
index b679aec..17b46ac 100644
--- a/elements/_button.scss
+++ b/elements/_button.scss
@@ -1,6 +1,11 @@
 $button-color: $grey-darker !default;
 $button-background-color: $white !default;
+
 $button-border-color: $grey-lighter !default;
+$button-border-width: $control-border-width !default;
+
+$button-padding-vertical: calc(0.375em - #{$button-border-width}) !default;
+$button-padding-horizontal: 0.75em !default;
 
 $button-hover-color: $link-hover !default;
 $button-hover-border-color: $link-hover-border !default;
@@ -46,11 +51,14 @@ $button-static-border-color: $grey-lighter !default;
 
   background-color: $button-background-color;
   border-color: $button-border-color;
+  border-width: $button-border-width;
   color: $button-color;
   cursor: pointer;
   justify-content: center;
-  padding-left: 0.75em;
-  padding-right: 0.75em;
+  padding-bottom: $button-padding-vertical;
+  padding-left: $button-padding-horizontal;
+  padding-right: $button-padding-horizontal;
+  padding-top: $button-padding-vertical;
   text-align: center;
   white-space: nowrap;
 
@@ -68,18 +76,18 @@ $button-static-border-color: $grey-lighter !default;
     }
 
     &:first-child:not(:last-child) {
-      margin-left: calc(-0.375em - 1px);
+      margin-left: calc(-0.375em - #{$button-border-width});
       margin-right: 0.1875em;
     }
 
     &:last-child:not(:first-child) {
       margin-left: 0.1875em;
-      margin-right: calc(-0.375em - 1px);
+      margin-right: calc(-0.375em - #{$button-border-width});
     }
 
     &:first-child:last-child {
-      margin-left: calc(-0.375em - 1px);
-      margin-right: calc(-0.375em - 1px);
+      margin-left: calc(-0.375em - #{$button-border-width});
+      margin-right: calc(-0.375em - #{$button-border-width});
     }
   }
 
@@ -190,7 +198,7 @@ $button-static-border-color: $grey-lighter !default;
       }
 
       &.is-loading {
-        &:after {
+        &::after {
           border-color: transparent transparent $color-invert $color-invert !important;
         }
       }
@@ -208,7 +216,7 @@ $button-static-border-color: $grey-lighter !default;
         }
 
         &.is-loading {
-          &:after {
+          &::after {
             border-color: transparent transparent $color $color !important;
           }
         }
@@ -272,7 +280,7 @@ $button-static-border-color: $grey-lighter !default;
     color: transparent !important;
     pointer-events: none;
 
-    &:after {
+    &::after {
       @include loader;
       @include center(1em);
 
@@ -350,6 +358,10 @@ $button-static-border-color: $grey-lighter !default;
           z-index: 4;
         }
       }
+
+      &.is-expanded {
+        flex-grow: 1;
+      }
     }
   }
 
diff --git a/elements/_container.scss b/elements/_container.scss
index 6ba9e3b..416e53b 100644
--- a/elements/_container.scss
+++ b/elements/_container.scss
@@ -2,7 +2,7 @@
   margin: 0 auto;
   position: relative;
 
-  @include from($desktop) {
+  @include desktop {
     max-width: $desktop - 2 * $gap;
     width: $desktop - 2 * $gap;
 
@@ -15,7 +15,7 @@
   }
 
 
-  @include until($widescreen) {
+  @include until-widescreen {
     &.is-widescreen {
       max-width: $widescreen - 2 * $gap;
       width: auto;
@@ -23,7 +23,7 @@
   }
 
 
-  @include until($fullhd) {
+  @include until-fullhd {
     &.is-fullhd {
       max-width: $fullhd - 2 * $gap;
       width: auto;
@@ -31,13 +31,13 @@
   }
 
 
-  @include from($widescreen) {
+  @include widescreen {
     max-width: $widescreen - 2 * $gap;
     width: $widescreen - 2 * $gap;
   }
 
 
-  @include from($fullhd) {
+  @include fullhd {
     max-width: $fullhd - 2 * $gap;
     width: $fullhd - 2 * $gap;
   }
diff --git a/elements/_content.scss b/elements/_content.scss
index 0bd23a3..ec760e8 100644
--- a/elements/_content.scss
+++ b/elements/_content.scss
@@ -1,5 +1,5 @@
 $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,7 +12,6 @@ $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;
@@ -175,12 +174,6 @@ $content-table-foot-cell-color: $text-strong !default;
       text-align: left;
     }
 
-    tr {
-      &:hover {
-        background-color: $content-table-row-hover-background-color;
-      }
-    }
-
     thead {
       td,
       th {
diff --git a/elements/_form.scss b/elements/_form.scss
index a265e65..ad1a6d9 100644
--- a/elements/_form.scss
+++ b/elements/_form.scss
@@ -203,13 +203,13 @@ $help-size: $size-small !default;
 
   &:not(.is-multiple) {
     height: 2.25em;
+  }
 
+  &:not(.is-multiple):not(.is-loading) {
     &::after {
       @include arrow($input-arrow);
 
-      margin-top: -0.375em;
       right: 1.125em;
-      top: 50%;
       z-index: 4;
     }
   }
@@ -253,7 +253,7 @@ $help-size: $size-small !default;
   }
 
   // States
-  &:hover {
+  &:not(.is-multiple):not(.is-loading):hover {
     &::after {
       border-color: $input-hover-color;
     }
@@ -263,14 +263,25 @@ $help-size: $size-small !default;
   @each $name, $pair in $colors {
     $color: nth($pair, 1);
 
-    &.is-#{$name} select {
-      border-color: $color;
+    &.is-#{$name} {
+      &:not(:hover)::after {
+        border-color: $color;
+      }
 
-      &:focus,
-      &.is-focused,
-      &:active,
-      &.is-active {
-        box-shadow: $input-focus-box-shadow-size rgba($color, 0.25);
+      select {
+        border-color: $color;
+
+        &:hover,
+        &.is-hovered {
+          border-color: darken($color, 5%);
+        }
+
+        &:focus,
+        &.is-focused,
+        &:active,
+        &.is-active {
+          box-shadow: $input-focus-box-shadow-size rgba($color, 0.25);
+        }
       }
     }
   }
diff --git a/elements/_image.scss b/elements/_image.scss
index 0109ee6..f764c2d 100644
--- a/elements/_image.scss
+++ b/elements/_image.scss
@@ -17,10 +17,20 @@ $dimensions: 16 24 32 48 64 96 128 !default;
   // Ratio
   &.is-square,
   &.is-1by1,
+  &.is-5by4,
   &.is-4by3,
   &.is-3by2,
+  &.is-5by3,
   &.is-16by9,
-  &.is-2by1 {
+  &.is-2by1,
+  &.is-3by1,
+  &.is-4by5,
+  &.is-3by4,
+  &.is-2by3,
+  &.is-3by5,
+  &.is-9by16,
+  &.is-1by2,
+  &.is-1by3 {
     img {
       @include overlay;
 
@@ -34,6 +44,10 @@ $dimensions: 16 24 32 48 64 96 128 !default;
     padding-top: 100%;
   }
 
+  &.is-5by4 {
+    padding-top: 80%;
+  }
+
   &.is-4by3 {
     padding-top: 75%;
   }
@@ -42,6 +56,10 @@ $dimensions: 16 24 32 48 64 96 128 !default;
     padding-top: 66.6666%;
   }
 
+  &.is-5by3 {
+    padding-top: 60%;
+  }
+
   &.is-16by9 {
     padding-top: 56.25%;
   }
@@ -50,6 +68,38 @@ $dimensions: 16 24 32 48 64 96 128 !default;
     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} {
diff --git a/elements/_table.scss b/elements/_table.scss
index eaff935..1c9f9c4 100644
--- a/elements/_table.scss
+++ b/elements/_table.scss
@@ -20,9 +20,10 @@ $table-striped-row-even-background-color: $white-bis !default;
 $table-striped-row-even-hover-background-color: $white-ter !default;
 
 .table {
+  @include block;
+
   background-color: $table-background-color;
   color: $table-color;
-  margin-bottom: 1.5rem;
 
   td,
   th {
@@ -168,3 +169,12 @@ $table-striped-row-even-hover-background-color: $white-ter !default;
     }
   }
 }
+
+.table-container {
+  @include block;
+  @include overflow-touch;
+
+  overflow: auto;
+  overflow-y: hidden;
+  max-width: 100%;
+}
diff --git a/elements/_tag.scss b/elements/_tag.scss
index 12f8717..938e35e 100644
--- a/elements/_tag.scss
+++ b/elements/_tag.scss
@@ -80,8 +80,8 @@ $tag-delete-margin: 1px !default;
   white-space: nowrap;
 
   .delete {
-    margin-left: 0.25em;
-    margin-right: -0.375em;
+    margin-left: 0.25rem;
+    margin-right: -0.375rem;
   }
 
   // Colors
@@ -128,8 +128,8 @@ $tag-delete-margin: 1px !default;
     position: relative;
     width: 2em;
 
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       background-color: currentColor;
       content: "";
       display: block;
@@ -140,12 +140,12 @@ $tag-delete-margin: 1px !default;
       transform-origin: center center;
     }
 
-    &:before {
+    &::before {
       height: 1px;
       width: 50%;
     }
 
-    &:after {
+    &::after {
       height: 50%;
       width: 1px;
     }
diff --git a/elements/_title.scss b/elements/_title.scss
index b72044a..6d05a42 100644
--- a/elements/_title.scss
+++ b/elements/_title.scss
@@ -1,6 +1,7 @@
 $title-color: $grey-darker !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;
@@ -9,8 +10,10 @@ $title-sup-size: 0.75em !default;
 $subtitle-color: $grey-dark !default;
 $subtitle-size: $size-5 !default;
 $subtitle-weight: $weight-normal !default;
+$subtitle-line-height: 1.25 !default;
 $subtitle-strong-color: $grey-darker !default;
 $subtitle-strong-weight: $weight-semibold !default;
+$subtitle-negative-margin: -1.25rem !default;
 
 .title,
 .subtitle {
@@ -40,7 +43,7 @@ $subtitle-strong-weight: $weight-semibold !default;
   color: $title-color;
   font-size: $title-size;
   font-weight: $title-weight;
-  line-height: 1.125;
+  line-height: $title-line-height;
 
   strong {
     color: $title-strong-color;
@@ -52,7 +55,7 @@ $subtitle-strong-weight: $weight-semibold !default;
   }
 
   &:not(.is-spaced) + .subtitle {
-    margin-top: -1.5rem;
+    margin-top: $subtitle-negative-margin;
   }
 
   // Sizes
@@ -69,7 +72,7 @@ $subtitle-strong-weight: $weight-semibold !default;
   color: $subtitle-color;
   font-size: $subtitle-size;
   font-weight: $subtitle-weight;
-  line-height: 1.25;
+  line-height: $subtitle-line-height;
 
   strong {
     color: $subtitle-strong-color;
@@ -77,7 +80,7 @@ $subtitle-strong-weight: $weight-semibold !default;
   }
 
   &:not(.is-spaced) + .title {
-    margin-top: -1.5rem;
+    margin-top: $subtitle-negative-margin;
   }
 
   // Sizes
diff --git a/grid/_columns.scss b/grid/_columns.scss
index 9bfb1b4..2779ee9 100644
--- a/grid/_columns.scss
+++ b/grid/_columns.scss
@@ -100,11 +100,11 @@ $column-gap: 0.75rem !default;
   @for $i from 1 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%;
+      margin-left: percentage($i / 12);
     }
   }
 
@@ -202,11 +202,11 @@ $column-gap: 0.75rem !default;
     @for $i from 1 through 12 {
       &.is-#{$i}-mobile {
         flex: none;
-        width: $i / 12 * 100%;
+        width: percentage($i / 12);
       }
 
       &.is-offset-#{$i}-mobile {
-        margin-left: $i / 12 * 100%;
+        margin-left: percentage($i / 12);
       }
     }
   }
@@ -327,12 +327,12 @@ $column-gap: 0.75rem !default;
       &.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%;
+        margin-left: percentage($i / 12);
       }
     }
   }
@@ -432,11 +432,11 @@ $column-gap: 0.75rem !default;
     @for $i from 1 through 12 {
       &.is-#{$i}-touch {
         flex: none;
-        width: $i / 12 * 100%;
+        width: percentage($i / 12);
       }
 
       &.is-offset-#{$i}-touch {
-        margin-left: $i / 12 * 100%;
+        margin-left: percentage($i / 12);
       }
     }
   }
@@ -536,11 +536,11 @@ $column-gap: 0.75rem !default;
     @for $i from 1 through 12 {
       &.is-#{$i}-desktop {
         flex: none;
-        width: $i / 12 * 100%;
+        width: percentage($i / 12);
       }
 
       &.is-offset-#{$i}-desktop {
-        margin-left: $i / 12 * 100%;
+        margin-left: percentage($i / 12);
       }
     }
   }
@@ -640,11 +640,11 @@ $column-gap: 0.75rem !default;
     @for $i from 1 through 12 {
       &.is-#{$i}-widescreen {
         flex: none;
-        width: $i / 12 * 100%;
+        width: percentage($i / 12);
       }
 
       &.is-offset-#{$i}-widescreen {
-        margin-left: $i / 12 * 100%;
+        margin-left: percentage($i / 12);
       }
     }
   }
@@ -744,11 +744,11 @@ $column-gap: 0.75rem !default;
     @for $i from 1 through 12 {
       &.is-#{$i}-fullhd {
         flex: none;
-        width: $i / 12 * 100%;
+        width: percentage($i / 12);
       }
 
       &.is-offset-#{$i}-fullhd {
-        margin-left: $i / 12 * 100%;
+        margin-left: percentage($i / 12);
       }
     }
   }
diff --git a/layout/_footer.scss b/layout/_footer.scss
index 3f4adfa..01e9ea2 100644
--- a/layout/_footer.scss
+++ b/layout/_footer.scss
@@ -1,4 +1,4 @@
-$footer-background-color: $background !default;
+$footer-background-color: $white-bis !default;
 
 .footer {
   background-color: $footer-background-color;
diff --git a/utilities/_controls.scss b/utilities/_controls.scss
index 9f15d5a..cd178bd 100644
--- a/utilities/_controls.scss
+++ b/utilities/_controls.scss
@@ -1,14 +1,16 @@
 $control-radius: $radius !default;
 $control-radius-small: $radius-small !default;
 
-$control-padding-vertical: calc(0.375em - 1px) !default;
-$control-padding-horizontal: calc(0.625em - 1px) !default;
+$control-border-width: 1px !default;
 
-@mixin control {
+$control-padding-vertical: calc(0.375em - #{$control-border-width}) !default;
+$control-padding-horizontal: calc(0.625em - #{$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;
@@ -36,6 +38,10 @@ $control-padding-horizontal: calc(0.625em - 1px) !default;
   }
 }
 
+@mixin control {
+  @extend %control;
+}
+
 // The controls sizes use mixins so they can be used at different breakpoints
 @mixin control-small {
   border-radius: $control-radius-small;
diff --git a/utilities/_derived-variables.scss b/utilities/_derived-variables.scss
index 9550704..e264666 100644
--- a/utilities/_derived-variables.scss
+++ b/utilities/_derived-variables.scss
@@ -75,8 +75,10 @@ $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;
-$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;
+$colors: mergeColorMaps(("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)), $custom-colors) !default;
+$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default;
 
 $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default;
diff --git a/utilities/_functions.scss b/utilities/_functions.scss
index 0fe653c..f46222e 100644
--- a/utilities/_functions.scss
+++ b/utilities/_functions.scss
@@ -1,3 +1,47 @@
+@function mergeColorMaps($bulma-colors, $custom-colors) {
+  // we return at least bulma hardcoded colors
+  $merged-colors: $bulma-colors;
+
+  // we want a map as input
+  @if type-of($custom-colors) == "map" {
+    @each $name, $components in $custom-colors {
+      // color name should be a string and colors pair a 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;
+
+        // the param can either be a single color
+        // or a list of 2 colors
+        @if type-of($components) == "color" {
+          $color-base: $components;
+        }
+        @else if type-of($components) == "list" {
+          $color-base: nth($components, 1);
+        }
+
+        $color-invert: null;
+
+        // is an inverted color provided in the list
+        @if length($components) > 1 {
+          $color-invert: nth($components, 2);
+        }
+
+        // we only want a color as base color
+        @if type-of($color-base) == "color" {
+          // if inverted color is not provided or is not a color we compute it
+          @if type-of($color-invert) != "color" {
+            $color-invert: findColorInvert($color-base);
+          }
+
+          // we merge this colors elements as map with bulma colors (we can override them this way, no multiple definition for the same name)
+          $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert)));
+        }
+      }
+    }
+  }
+
+  @return $merged-colors;
+}
+
 @function powerNumber($number, $exp) {
   $value: 1;
 
diff --git a/utilities/_initial-variables.scss b/utilities/_initial-variables.scss
index 73f5f9f..da1d0d5 100644
--- a/utilities/_initial-variables.scss
+++ b/utilities/_initial-variables.scss
@@ -46,7 +46,7 @@ $weight-bold: 700 !default;
 // Responsiveness
 
 // The container horizontal gap, which acts as the offset for breakpoints
-$gap: 32px !default;
+$gap: 64px !default;
 
 // 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
 $tablet: 769px !default;
@@ -56,16 +56,18 @@ $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-large: 5px !default;
+$radius: 4px !default;
+$radius-large: 6px !default;
 $radius-rounded: 290486px !default;
 $speed: 86ms !default;
 
diff --git a/utilities/_mixins.scss b/utilities/_mixins.scss
index 1565daf..2e44c60 100644
--- a/utilities/_mixins.scss
+++ b/utilities/_mixins.scss
@@ -1,27 +1,7 @@
 @import "initial-variables";
 
-@mixin 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;
-}
-
-@mixin block {
-  &:not(:last-child) {
-    margin-bottom: 1.5rem;
-  }
-}
-
 @mixin clearfix {
-  &:after {
+  &::after {
     clear: both;
     content: " ";
     display: table;
@@ -41,89 +21,6 @@
   }
 }
 
-@mixin delete {
-  @include 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;
-  }
-}
-
 @mixin fa($size, $dimensions) {
   display: inline-block;
   font-size: $size;
@@ -188,31 +85,10 @@
   }
 }
 
-@mixin 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;
-}
-
 @mixin overflow-touch {
   -webkit-overflow-scrolling: touch;
 }
 
-@mixin overlay($offset: 0) {
-  bottom: $offset;
-  left: $offset;
-  position: absolute;
-  right: $offset;
-  top: $offset;
-}
-
 @mixin placeholder {
   $placeholders: ":-moz" ":-webkit-input" "-moz" "-ms-input";
 
@@ -223,14 +99,6 @@
   }
 }
 
-@mixin unselectable {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
 // Responsiveness
 
 @mixin from($device) {
@@ -276,25 +144,219 @@
 }
 
 @mixin desktop-only {
-  @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px) {
-    @content;
+  @if $widescreen-enabled {
+    @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px) {
+      @content;
+    }
+  }
+}
+
+@mixin until-widescreen {
+  @if $widescreen-enabled {
+    @media screen and (max-width: $widescreen - 1px) {
+      @content;
+    }
   }
 }
 
 @mixin widescreen {
-  @media screen and (min-width: $widescreen) {
-    @content;
+  @if $widescreen-enabled {
+    @media screen and (min-width: $widescreen) {
+      @content;
+    }
   }
 }
 
 @mixin widescreen-only {
-  @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px) {
-    @content;
+  @if $widescreen-enabled and $fullhd-enabled {
+    @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px) {
+      @content;
+    }
+  }
+}
+
+@mixin until-fullhd {
+  @if $fullhd-enabled {
+    @media screen and (max-width: $fullhd - 1px) {
+      @content;
+    }
   }
 }
 
 @mixin fullhd {
-  @media screen and (min-width: $fullhd) {
-    @content;
+  @if $fullhd-enabled {
+    @media screen and (min-width: $fullhd) {
+      @content;
+    }
+  }
+}
+
+// Placeholders
+
+%unselectable {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+@mixin unselectable {
+  @extend %unselectable;
+}
+
+%arrow {
+  border: 3px solid transparent;
+  border-radius: 2px;
+  border-right: 0;
+  border-top: 0;
+  content: " ";
+  display: block;
+  height: 0.625em;
+  margin-top: -0.4375em;
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  transform: rotate(-45deg);
+  transform-origin: center;
+  width: 0.625em;
+}
+
+@mixin arrow($color) {
+  @extend %arrow;
+
+  border-color: $color;
+}
+
+%block {
+  &:not(:last-child) {
+    margin-bottom: 1.5rem;
+  }
+}
+
+@mixin block {
+  @extend %block;
+}
+
+%delete {
+  @extend %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;
+  }
+}
+
+@mixin delete {
+  @extend %delete;
+}
+
+%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;
+}
+
+@mixin loader {
+  @extend %loader;
+}
+
+%overlay {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+@mixin overlay($offset: 0) {
+  @extend %overlay;
+
+  @if $offset != 0 {
+    bottom: $offset;
+    left: $offset;
+    right: $offset;
+    top: $offset;
   }
 }