bulma-rails 0.6.0 → 0.6.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d27e1586857f0c0974dd06625e8696ededf9fd71
-  data.tar.gz: 83044c809b9ea7ab8f45c762ffbcad7fdf136999
+  metadata.gz: 26be2ca12c9d47bcd329d2a97e46a45dac8e18a7
+  data.tar.gz: 86390307107024d31bdf3c2f96475c65229248fa
 SHA512:
-  metadata.gz: 22418e4cb5e256c443542ad5102a9d6080ae8e0a47c0c91be240bc547e3671352ff457d4ee36f784f50d464244d5a1ae2353d80e7fc295d4401859bd06eebf9e
-  data.tar.gz: 9d6333a192f6a1d369bb742877b51e26e7728189d773fed6b1bd14fe7a07d2cd3b909ba8083f84e1cab3fc1d4cb426e69c11ecb9cc614a763fa5c7954eb713d5
+  metadata.gz: 6ac2b4fea00ada7f05a5a0c8e697b2de5c704b1a29f3ff1ab9ebcc1d8265d02174a514c523bfcc4b345f62f920fc982c3d60b419728ec37e466927fba2660fec
+  data.tar.gz: bd9bcd883e2bbae9dbb2cc68272b32e23d9a2c7d37a827051858c8421f3c2b7e73b2ef175c6583d014a5a05f9580596ed112af9c82f5520627cc165a5b085047

data/README.md

@@ -8,7 +8,7 @@ A modern CSS framework based on Flexbox.
 
 Add this line to your application's Gemfile:
 
-    gem "bulma-rails", "~> 0.6.0"
+    gem "bulma-rails", "~> 0.6.1"
 
 And then execute:
 

data/app/assets/stylesheets/bulma.sass

@@ -1,5 +1,5 @@
 @charset "utf-8"
-/*! bulma.io v0.6.0 | MIT License | github.com/jgthms/bulma */
+/*! bulma.io v0.6.1 | MIT License | github.com/jgthms/bulma */
 @import "sass/utilities/_all"
 @import "sass/base/_all"
 @import "sass/elements/_all"

data/app/assets/stylesheets/sass/base/generic.sass

@@ -1,4 +1,4 @@
-$body-background-color: #fff !default
+$body-background-color: $white !default
 $body-size: 16px !default
 $body-rendering: optimizeLegibility !default
 $body-family: $family-primary !default

data/app/assets/stylesheets/sass/base/helpers.sass

@@ -185,6 +185,45 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
   .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

data/app/assets/stylesheets/sass/components/navbar.sass

@@ -1,8 +1,9 @@
 $navbar-background-color: $white !default
 $navbar-height: 3.25rem !default
+$navbar-fixed-z: 30 !default
 
 $navbar-item-color: $grey-dark !default
-$navbar-item-hover-color: $black !default
+$navbar-item-hover-color: $link !default
 $navbar-item-hover-background-color: $background !default
 $navbar-item-active-color: $black !default
 $navbar-item-active-background-color: transparent !default
@@ -33,6 +34,17 @@ $navbar-dropdown-item-active-background-color: $background !default
 
 $navbar-divider-background-color: $border !default
 
+=navbar-fixed
+  left: 0
+  position: fixed
+  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
@@ -87,6 +99,21 @@ $navbar-divider-background-color: $border !default
     width: 100%
   &.has-shadow
     box-shadow: 0 2px 3px rgba($black, 0.1)
+  &.is-fixed-bottom,
+  &.is-fixed-top
+    +navbar-fixed
+  &.is-fixed-bottom
+    bottom: 0
+    &.has-shadow
+      box-shadow: 0 -2px 3px rgba($black, 0.1)
+  &.is-fixed-top
+    top: 0
+
+html.has-navbar-fixed-top
+  padding-top: $navbar-height
+
+html.has-navbar-fixed-bottom
+  padding-bottom: $navbar-height
 
 .navbar-brand,
 .navbar-tabs
@@ -117,7 +144,7 @@ $navbar-divider-background-color: $border !default
   position: relative
 
 a.navbar-item,
-.navbar-link
+a.navbar-link
   &:hover,
   &.is-active
     background-color: $navbar-item-hover-background-color
@@ -130,6 +157,9 @@ a.navbar-item,
     max-height: $navbar-item-img-max-height
   &.has-dropdown
     padding: 0
+  &.is-expanded
+    flex-grow: 1
+    flex-shrink: 1
   &.is-tab
     border-bottom: 1px solid transparent
     min-height: $navbar-height
@@ -181,6 +211,27 @@ a.navbar-item,
     padding: 0.5rem 0
     &.is-active
       display: block
+  // Fixed navbar
+  .navbar
+    &.is-fixed-bottom-touch,
+    &.is-fixed-top-touch
+      +navbar-fixed
+    &.is-fixed-bottom-touch
+      bottom: 0
+      &.has-shadow
+        box-shadow: 0 -2px 3px rgba($black, 0.1)
+    &.is-fixed-top-touch
+      top: 0
+    &.is-fixed-top,
+    &.is-fixed-top-touch
+      .navbar-menu
+        +overflow-touch
+        max-height: calc(100vh - #{$navbar-height})
+        overflow: auto
+  html.has-navbar-fixed-top-touch
+    padding-top: $navbar-height
+  html.has-navbar-fixed-bottom-touch
+    padding-bottom: $navbar-height
 
 +desktop
   .navbar,
@@ -193,7 +244,7 @@ a.navbar-item,
     min-height: $navbar-height
     &.is-transparent
       a.navbar-item,
-      .navbar-link
+      a.navbar-link
         &:hover,
         &.is-active
           background-color: transparent !important
@@ -219,6 +270,16 @@ a.navbar-item,
   .navbar-item
     &.has-dropdown
       align-items: stretch
+    &.has-dropdown-up
+      .navbar-link::after
+        transform: rotate(135deg) translate(0.25em, -0.25em)
+      .navbar-dropdown
+        border-bottom: $navbar-dropdown-border-top
+        border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
+        border-top: none
+        bottom: 100%
+        box-shadow: 0 -8px 8px rgba($black, 0.1)
+        top: auto
     &.is-active,
     &.is-hoverable:hover
       .navbar-dropdown
@@ -282,14 +343,30 @@ a.navbar-item,
       right: 0
   .navbar-divider
     display: block
+  .navbar > .container,
   .container > .navbar
     .navbar-brand
       margin-left: -1rem
     .navbar-menu
       margin-right: -1rem
+  // Fixed navbar
+  .navbar
+    &.is-fixed-bottom-desktop,
+    &.is-fixed-top-desktop
+      +navbar-fixed
+    &.is-fixed-bottom-desktop
+      bottom: 0
+      &.has-shadow
+        box-shadow: 0 -2px 3px rgba($black, 0.1)
+    &.is-fixed-top-desktop
+      top: 0
+  html.has-navbar-fixed-top-desktop
+    padding-top: $navbar-height
+  html.has-navbar-fixed-bottom-desktop
+    padding-bottom: $navbar-height
   // Hover/Active states
   a.navbar-item,
-  .navbar-link
+  a.navbar-link
     &.is-active
       color: $navbar-item-active-color
     &.is-active:not(:hover)

data/app/assets/stylesheets/sass/elements/button.sass

@@ -199,3 +199,43 @@ $button-static-border-color: $grey-lighter !default
     color: $button-static-color
     box-shadow: none
     pointer-events: none
+
+.buttons
+  align-items: center
+  display: flex
+  flex-wrap: wrap
+  justify-content: flex-start
+  .button
+    margin-bottom: 0.5rem
+    &:not(:last-child)
+      margin-right: 0.5rem
+  &:last-child
+    margin-bottom: -0.5rem
+  &:not(:last-child)
+    margin-bottom: 1rem
+  &.has-addons
+    .button
+      &:not(:first-child)
+        border-bottom-left-radius: 0
+        border-top-left-radius: 0
+      &:not(:last-child)
+        border-bottom-right-radius: 0
+        border-top-right-radius: 0
+        margin-right: -1px
+      &:last-child
+        margin-right: 0
+      &:hover,
+      &.is-hovered
+        z-index: 2
+      &:focus,
+      &.is-focused,
+      &:active,
+      &.is-active,
+      &.is-selected
+        z-index: 3
+        &:hover
+          z-index: 4
+  &.is-centered
+    justify-content: center
+  &.is-right
+    justify-content: flex-end

data/app/assets/stylesheets/sass/elements/form.sass

@@ -269,6 +269,11 @@ $help-size: $size-small !default
     .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-centered
     justify-content: center
   &.is-right

data/app/assets/stylesheets/sass/elements/progress.sass

@@ -18,6 +18,9 @@ $progress-value-background-color: $text !default
     background-color: $progress-value-background-color
   &::-moz-progress-bar
     background-color: $progress-value-background-color
+  &::-ms-fill
+    background-color: $progress-value-background-color
+    border: none
   // Colors
   @each $name, $pair in $colors
     $color: nth($pair, 1)
@@ -26,6 +29,8 @@ $progress-value-background-color: $text !default
         background-color: $color
       &::-moz-progress-bar
         background-color: $color
+      &::-ms-fill
+        background-color: $color
   // Sizes
   &.is-small
     height: $size-small

data/app/assets/stylesheets/sass/elements/table.sass

@@ -41,6 +41,12 @@ $table-striped-row-even-hover-background-color: $white-ter !default
     &.is-narrow
       white-space: nowrap
       width: 1%
+    &.is-selected
+      background-color: $table-row-active-background-color
+      color: $table-row-active-color
+      a,
+      strong
+        color: currentColor
   th
     color: $table-cell-heading-color
     text-align: left
@@ -85,7 +91,7 @@ $table-striped-row-even-hover-background-color: $white-ter !default
     width: 100%
   &.is-hoverable
     tbody
-      tr
+      tr:not(.is-selected)
         &:hover
           background-color: $table-row-hover-background-color
     &.is-striped

data/app/assets/stylesheets/sass/elements/tag.sass

@@ -25,6 +25,18 @@ $tag-delete-margin: 1px !default
       &:not(:last-child)
         border-bottom-right-radius: 0
         border-top-right-radius: 0
+  &.is-centered
+    justify-content: center
+    .tag
+      margin-right: 0.25rem
+      margin-left: 0.25rem
+  &.is-right
+    justify-content: flex-end
+    .tag
+      &:not(:first-child)
+        margin-left: 0.5rem
+      &:not(:last-child)
+        margin-right: 0
 
 .tag:not(body)
   align-items: center
@@ -54,6 +66,16 @@ $tag-delete-margin: 1px !default
     font-size: $size-normal
   &.is-large
     font-size: $size-medium
+  .icon
+    &:first-child:not(:last-child)
+      margin-left: -0.375em
+      margin-right: 0.1875em
+    &:last-child:not(:first-child)
+      margin-left: 0.1875em
+      margin-right: -0.375em
+    &:first-child:last-child
+      margin-left: -0.375em
+      margin-right: -0.375em
   // Modifiers
   &.is-delete
     margin-left: $tag-delete-margin

data/app/assets/stylesheets/sass/grid/columns.sass

@@ -26,6 +26,18 @@ $column-gap: 0.75rem !default
   .columns.is-mobile > &.is-one-quarter
     flex: none
     width: 25%
+  .columns.is-mobile > &.is-one-fifth
+    flex: none
+    width: 20%
+  .columns.is-mobile > &.is-two-fifths
+    flex: none
+    width: 40%
+  .columns.is-mobile > &.is-three-fifths
+    flex: none
+    width: 60%
+  .columns.is-mobile > &.is-four-fifths
+    flex: none
+    width: 80%
   .columns.is-mobile > &.is-offset-three-quarters
     margin-left: 75%
   .columns.is-mobile > &.is-offset-two-thirds
@@ -36,6 +48,14 @@ $column-gap: 0.75rem !default
     margin-left: 33.3333%
   .columns.is-mobile > &.is-offset-one-quarter
     margin-left: 25%
+  .columns.is-mobile > &.is-offset-one-fifth
+    margin-left: 20%
+  .columns.is-mobile > &.is-offset-two-fifths
+    margin-left: 40%
+  .columns.is-mobile > &.is-offset-three-fifths
+    margin-left: 60%
+  .columns.is-mobile > &.is-offset-four-fifths
+    margin-left: 80%
   @for $i from 1 through 12
     .columns.is-mobile > &.is-#{$i}
       flex: none
@@ -63,6 +83,18 @@ $column-gap: 0.75rem !default
     &.is-one-quarter-mobile
       flex: none
       width: 25%
+    &.is-one-fifth-mobile
+      flex: none
+      width: 20%
+    &.is-two-fifths-mobile
+      flex: none
+      width: 40%
+    &.is-three-fifths-mobile
+      flex: none
+      width: 60%
+    &.is-four-fifths-mobile
+      flex: none
+      width: 80%
     &.is-offset-three-quarters-mobile
       margin-left: 75%
     &.is-offset-two-thirds-mobile
@@ -73,6 +105,14 @@ $column-gap: 0.75rem !default
       margin-left: 33.3333%
     &.is-offset-one-quarter-mobile
       margin-left: 25%
+    &.is-offset-one-fifth-mobile
+      margin-left: 20%
+    &.is-offset-two-fifths-mobile
+      margin-left: 40%
+    &.is-offset-three-fifths-mobile
+      margin-left: 60%
+    &.is-offset-four-fifths-mobile
+      margin-left: 80%
     @for $i from 1 through 12
       &.is-#{$i}-mobile
         flex: none
@@ -107,6 +147,22 @@ $column-gap: 0.75rem !default
     &.is-one-quarter-tablet
       flex: none
       width: 25%
+    &.is-one-fifth,
+    &.is-one-fifth-tablet
+      flex: none
+      width: 20%
+    &.is-two-fifths,
+    &.is-two-fifths-tablet
+      flex: none
+      width: 40%
+    &.is-three-fifths,
+    &.is-three-fifths-tablet
+      flex: none
+      width: 60%
+    &.is-four-fifths,
+    &.is-four-fifths-tablet
+      flex: none
+      width: 80%
     &.is-offset-three-quarters,
     &.is-offset-three-quarters-tablet
       margin-left: 75%
@@ -122,6 +178,18 @@ $column-gap: 0.75rem !default
     &.is-offset-one-quarter,
     &.is-offset-one-quarter-tablet
       margin-left: 25%
+    &.is-offset-one-fifth,
+    &.is-offset-one-fifth-tablet
+      margin-left: 20%
+    &.is-offset-two-fifths,
+    &.is-offset-two-fifths-tablet
+      margin-left: 40%
+    &.is-offset-three-fifths,
+    &.is-offset-three-fifths-tablet
+      margin-left: 60%
+    &.is-offset-four-fifths,
+    &.is-offset-four-fifths-tablet
+      margin-left: 80%
     @for $i from 1 through 12
       &.is-#{$i},
       &.is-#{$i}-tablet
@@ -151,6 +219,18 @@ $column-gap: 0.75rem !default
     &.is-one-quarter-touch
       flex: none
       width: 25%
+    &.is-one-fifth-touch
+      flex: none
+      width: 20%
+    &.is-two-fifths-touch
+      flex: none
+      width: 40%
+    &.is-three-fifths-touch
+      flex: none
+      width: 60%
+    &.is-four-fifths-touch
+      flex: none
+      width: 80%
     &.is-offset-three-quarters-touch
       margin-left: 75%
     &.is-offset-two-thirds-touch
@@ -161,6 +241,14 @@ $column-gap: 0.75rem !default
       margin-left: 33.3333%
     &.is-offset-one-quarter-touch
       margin-left: 25%
+    &.is-offset-one-fifth-touch
+      margin-left: 20%
+    &.is-offset-two-fifths-touch
+      margin-left: 40%
+    &.is-offset-three-fifths-touch
+      margin-left: 60%
+    &.is-offset-four-fifths-touch
+      margin-left: 80%
     @for $i from 1 through 12
       &.is-#{$i}-touch
         flex: none
@@ -188,6 +276,18 @@ $column-gap: 0.75rem !default
     &.is-one-quarter-desktop
       flex: none
       width: 25%
+    &.is-one-fifth-desktop
+      flex: none
+      width: 20%
+    &.is-two-fifths-desktop
+      flex: none
+      width: 40%
+    &.is-three-fifths-desktop
+      flex: none
+      width: 60%
+    &.is-four-fifths-desktop
+      flex: none
+      width: 80%
     &.is-offset-three-quarters-desktop
       margin-left: 75%
     &.is-offset-two-thirds-desktop
@@ -198,6 +298,14 @@ $column-gap: 0.75rem !default
       margin-left: 33.3333%
     &.is-offset-one-quarter-desktop
       margin-left: 25%
+    &.is-offset-one-fifth-desktop
+      margin-left: 20%
+    &.is-offset-two-fifths-desktop
+      margin-left: 40%
+    &.is-offset-three-fifths-desktop
+      margin-left: 60%
+    &.is-offset-four-fifths-desktop
+      margin-left: 80%
     @for $i from 1 through 12
       &.is-#{$i}-desktop
         flex: none
@@ -225,6 +333,18 @@ $column-gap: 0.75rem !default
     &.is-one-quarter-widescreen
       flex: none
       width: 25%
+    &.is-one-fifth-widescreen
+      flex: none
+      width: 20%
+    &.is-two-fifths-widescreen
+      flex: none
+      width: 40%
+    &.is-three-fifths-widescreen
+      flex: none
+      width: 60%
+    &.is-four-fifths-widescreen
+      flex: none
+      width: 80%
     &.is-offset-three-quarters-widescreen
       margin-left: 75%
     &.is-offset-two-thirds-widescreen
@@ -235,6 +355,14 @@ $column-gap: 0.75rem !default
       margin-left: 33.3333%
     &.is-offset-one-quarter-widescreen
       margin-left: 25%
+    &.is-offset-one-fifth-widescreen
+      margin-left: 20%
+    &.is-offset-two-fifths-widescreen
+      margin-left: 40%
+    &.is-offset-three-fifths-widescreen
+      margin-left: 60%
+    &.is-offset-four-fifths-widescreen
+      margin-left: 80%
     @for $i from 1 through 12
       &.is-#{$i}-widescreen
         flex: none
@@ -262,6 +390,18 @@ $column-gap: 0.75rem !default
     &.is-one-quarter-fullhd
       flex: none
       width: 25%
+    &.is-one-fifth-fullhd
+      flex: none
+      width: 20%
+    &.is-two-fifths-fullhd
+      flex: none
+      width: 40%
+    &.is-three-fifths-fullhd
+      flex: none
+      width: 60%
+    &.is-four-fifths-fullhd
+      flex: none
+      width: 80%
     &.is-offset-three-quarters-fullhd
       margin-left: 75%
     &.is-offset-two-thirds-fullhd
@@ -272,6 +412,14 @@ $column-gap: 0.75rem !default
       margin-left: 33.3333%
     &.is-offset-one-quarter-fullhd
       margin-left: 25%
+    &.is-offset-one-fifth-fullhd
+      margin-left: 20%
+    &.is-offset-two-fifths-fullhd
+      margin-left: 40%
+    &.is-offset-three-fifths-fullhd
+      margin-left: 60%
+    &.is-offset-four-fifths-fullhd
+      margin-left: 80%
     @for $i from 1 through 12
       &.is-#{$i}-fullhd
         flex: none
@@ -325,4 +473,4 @@ $column-gap: 0.75rem !default
     padding-right: var(--columnGap)
   @for $i from 0 through 8
     &.is-#{$i}
-      --columnGap: $i * 0.25rem
+      --columnGap: #{$i * 0.25rem}

data/app/assets/stylesheets/sass/utilities/mixins.sass

@@ -10,6 +10,7 @@
   pointer-events: none
   position: absolute
   transform: rotate(-45deg)
+  transform-origin: center
   width: 0.5em
 
 =block
@@ -42,7 +43,7 @@
   display: inline-block
   flex-grow: 0
   flex-shrink: 0
-  font-size: $size-normal
+  font-size: 0
   height: 20px
   max-height: 20px
   max-width: 20px
@@ -115,34 +116,30 @@
     background-color: currentColor
     display: block
     height: 1px
-    left: 50%
-    margin-left: -7px
+    left: calc(50% - 8px)
     position: absolute
-    top: 50%
-    transition: none $speed $easing
-    transition-property: background, left, opacity, transform
-    width: 15px
+    transform-origin: center
+    transition-duration: $speed
+    transition-property: background-color, opacity, transform
+    transition-timing-function: $easing
+    width: 16px
     &:nth-child(1)
-      margin-top: -6px
+      top: calc(50% - 6px)
     &:nth-child(2)
-      margin-top: -1px
+      top: calc(50% - 1px)
     &:nth-child(3)
-      margin-top: 4px
+      top: calc(50% + 4px)
   &:hover
     background-color: rgba(black, 0.05)
   // Modifers
   &.is-active
     span
       &:nth-child(1)
-        margin-left: -5px
-        transform: rotate(45deg)
-        transform-origin: left top
+        transform: translateY(5px) rotate(45deg)
       &:nth-child(2)
         opacity: 0
       &:nth-child(3)
-        margin-left: -5px
-        transform: rotate(-45deg)
-        transform-origin: left bottom
+        transform: translateY(-5px) rotate(-45deg)
 
 =loader
   animation: spinAround 500ms infinite linear

data/bulma-rails.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |gem|
   gem.name          = 'bulma-rails'
-  gem.version       = '0.6.0'
+  gem.version       = '0.6.1'
   gem.authors       = ["Joshua Jansen"]
   gem.email         = ["joshuajansen88@gmail.com"]
   gem.description   = %q{A modern CSS framework based on Flexbox}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bulma-rails
 version: !ruby/object:Gem::Version
-  version: 0.6.0
+  version: 0.6.1
 platform: ruby
 authors:
 - Joshua Jansen
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-10-25 00:00:00.000000000 Z
+date: 2017-11-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -47,7 +47,6 @@ files:
 - app/assets/stylesheets/sass/components/menu.sass
 - app/assets/stylesheets/sass/components/message.sass
 - app/assets/stylesheets/sass/components/modal.sass
-- app/assets/stylesheets/sass/components/nav.sass
 - app/assets/stylesheets/sass/components/navbar.sass
 - app/assets/stylesheets/sass/components/pagination.sass
 - app/assets/stylesheets/sass/components/panel.sass
@@ -80,7 +79,6 @@ files:
 - app/assets/stylesheets/sass/utilities/functions.sass
 - app/assets/stylesheets/sass/utilities/initial-variables.sass
 - app/assets/stylesheets/sass/utilities/mixins.sass
-- app/assets/stylesheets/sass/utilities/variables.sass
 - bulma-rails.gemspec
 - lib/bulma-rails.rb
 homepage: https://github.com/joshuajansen/bulma-rails

data/app/assets/stylesheets/sass/components/nav.sass

@@ -1,125 +0,0 @@
-$nav-height: 3.25rem !default
-
-// Components
-
-.nav-toggle
-  +hamburger($nav-height)
-  // Responsiveness
-  +tablet
-    display: none
-
-.nav-item
-  align-items: center
-  display: flex
-  flex-grow: 0
-  flex-shrink: 0
-  font-size: $size-normal
-  justify-content: center
-  line-height: 1.5
-  padding: 0.5rem 0.75rem
-  a
-    flex-grow: 1
-    flex-shrink: 0
-  img
-    max-height: 1.75rem
-  .tag
-    &:first-child:not(:last-child)
-      margin-right: 0.5rem
-    &:last-child:not(:first-child)
-      margin-left: 0.5rem
-  // Responsiveness
-  +mobile
-    justify-content: flex-start
-
-.nav-item a:not(.button),
-a.nav-item:not(.button)
-  color: $text-light
-  &:hover
-    color: $link-hover
-  // Modifiers
-  &.is-active
-    color: $link-active
-  &.is-tab
-    border-bottom: 1px solid transparent
-    border-top: 1px solid transparent
-    padding-bottom: calc(0.75rem - 1px)
-    padding-left: 1rem
-    padding-right: 1rem
-    padding-top: calc(0.75rem - 1px)
-    &:hover
-      border-bottom-color: $primary
-      border-top-color: transparent
-    &.is-active
-      border-bottom: 3px solid $primary
-      color: $primary
-      padding-bottom: calc(0.75rem - 3px)
-  // Responsiveness
-  +desktop
-    &.is-brand
-      padding-left: 0
-
-// Containers
-
-.nav-left,
-.nav-right
-  +overflow-touch
-  align-items: stretch
-  display: flex
-  flex-grow: 1
-  flex-shrink: 0
-  max-width: 100%
-  overflow: auto
-  +widescreen
-    flex-basis: 0
-
-.nav-left
-  justify-content: flex-start
-  white-space: nowrap
-
-.nav-right
-  justify-content: flex-end
-
-.nav-center
-  align-items: stretch
-  display: flex
-  flex-grow: 0
-  flex-shrink: 0
-  justify-content: center
-  margin-left: auto
-  margin-right: auto
-
-.nav-menu
-  // Responsiveness
-  +mobile
-    &.nav-right
-      background-color: $white
-      box-shadow: 0 4px 7px rgba($black, 0.1)
-      left: 0
-      display: none
-      right: 0
-      top: 100%
-      position: absolute
-      .nav-item
-        border-top: 1px solid rgba($border, 0.5)
-        padding: 0.75rem
-      &.is-active
-        display: block
-
-// Main container
-
-.nav
-  align-items: stretch
-  background-color: $white
-  display: flex
-  height: $nav-height
-  position: relative
-  text-align: center
-  z-index: 10
-  & > .container
-    align-items: stretch
-    display: flex
-    min-height: $nav-height
-    width: 100%
-  // Modifiers
-  &.has-shadow
-    box-shadow: 0 2px 3px rgba($black, 0.1)

data/app/assets/stylesheets/sass/utilities/variables.sass

@@ -1,150 +0,0 @@
-////////////////////////////////////////////////
-////////////////////////////////////////////////
-// 1. Initial variables
-
-// Colors
-$black:        hsl(0, 0%, 4%) !default
-$black-bis:    hsl(0, 0%, 7%) !default
-$black-ter:    hsl(0, 0%, 14%) !default
-
-$grey-darker:  hsl(0, 0%, 21%) !default
-$grey-dark:    hsl(0, 0%, 29%) !default
-$grey:         hsl(0, 0%, 48%) !default
-$grey-light:   hsl(0, 0%, 71%) !default
-$grey-lighter: hsl(0, 0%, 86%) !default
-
-$white-ter:    hsl(0, 0%, 96%) !default
-$white-bis:    hsl(0, 0%, 98%) !default
-$white:        hsl(0, 0%, 100%) !default
-
-$orange:       hsl(14,  100%, 53%) !default
-$yellow:       hsl(48,  100%, 67%) !default
-$green:        hsl(141, 71%,  48%) !default
-$turquoise:    hsl(171, 100%, 41%) !default
-$blue:         hsl(217, 71%,  53%) !default
-$purple:       hsl(271, 100%, 71%) !default
-$red:          hsl(348, 100%, 61%) !default
-
-// Typography
-$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
-$family-monospace: monospace !default
-$render-mode: optimizeLegibility !default
-
-$size-1: 3rem !default
-$size-2: 2.5rem !default
-$size-3: 2rem !default
-$size-4: 1.5rem !default
-$size-5: 1.25rem !default
-$size-6: 1rem !default
-$size-7: 0.75rem !default
-
-$weight-light: 300 !default
-$weight-normal: 400 !default
-$weight-semibold: 500 !default
-$weight-bold: 700 !default
-
-// Body
-$body-background: #fff !default
-$body-size: 16px !default
-
-// Responsiveness
-// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
-$tablet: 769px !default
-// 960px container + 40px
-$desktop: 1000px !default
-// 1152px container + 40
-$widescreen: 1192px !default
-// 1344px container + 40
-$fullhd: 1384px !default
-
-// Miscellaneous
-$easing: ease-out !default
-$radius-small: 2px !default
-$radius: 3px !default
-$radius-large: 5px !default
-$speed: 86ms !default
-
-////////////////////////////////////////////////
-////////////////////////////////////////////////
-// 2. Primary colors
-
-$primary: $turquoise !default
-
-$info: $blue !default
-$success: $green !default
-$warning: $yellow !default
-$danger: $red !default
-
-$light: $white-ter !default
-$dark: $grey-darker !default
-
-////////////////////////////////////////////////
-////////////////////////////////////////////////
-// 3. Applied variables
-
-// Invert colors
-$orange-invert: findColorInvert($orange) !default
-$yellow-invert: findColorInvert($yellow) !default
-$green-invert: findColorInvert($green) !default
-$turquoise-invert: findColorInvert($turquoise) !default
-$blue-invert: findColorInvert($blue) !default
-$purple-invert: findColorInvert($purple) !default
-$red-invert: findColorInvert($red) !default
-
-$primary-invert: $turquoise-invert !default
-$info-invert: $blue-invert !default
-$success-invert: $green-invert !default
-$warning-invert: $yellow-invert !default
-$danger-invert: $red-invert !default
-$light-invert: $dark !default
-$dark-invert: $light !default
-
-// General colors
-$background: $white-ter !default
-
-$border: $grey-lighter !default
-$border-hover: $grey-light !default
-
-// Text colors
-$text: $grey-dark !default
-$text-invert: findColorInvert($text) !default
-$text-light: $grey !default
-$text-strong: $grey-darker !default
-
-// Code colors
-$code: $red !default
-$code-background: $background !default
-
-$pre: $text !default
-$pre-background: $background !default
-
-// Link colors
-$link: $primary !default
-$link-invert: $primary-invert !default
-$link-visited: $purple !default
-
-$link-hover: $grey-darker !default
-$link-hover-border: $grey-light !default
-
-$link-focus: $grey-darker !default
-$link-focus-border: $primary !default
-
-$link-active: $grey-darker !default
-$link-active-border: $grey-dark !default
-
-// Typography
-$family-primary: $family-sans-serif !default
-$family-code: $family-monospace !default
-
-$size-small: $size-7 !default
-$size-normal: $size-6 !default
-$size-medium: $size-5 !default
-$size-large: $size-4 !default
-
-////////////////////////////////////////////////
-////////////////////////////////////////////////
-// 4. Lists and maps
-
-$colors: ("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)) !default
-
-$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default