bulma-sass 0.0.2 → 0.6.0

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

@@ -0,0 +1,32 @@
+.tile
+  align-items: stretch
+  display: block
+  flex-basis: 0
+  flex-grow: 1
+  flex-shrink: 1
+  min-height: min-content
+  // Modifiers
+  &.is-ancestor
+    margin-left: -0.75rem
+    margin-right: -0.75rem
+    margin-top: -0.75rem
+    &:last-child
+      margin-bottom: -0.75rem
+    &:not(:last-child)
+      margin-bottom: 0.75rem
+  &.is-child
+    margin: 0 !important
+  &.is-parent
+    padding: 0.75rem
+  &.is-vertical
+    flex-direction: column
+    & > .tile.is-child:not(:last-child)
+      margin-bottom: 1.5rem !important
+  // Responsiveness
+  +tablet
+    &:not(.is-child)
+      display: flex
+    @for $i from 1 through 12
+      &.is-#{$i}
+        flex: none
+        width: ($i / 12) * 100%

data/app/assets/stylesheets/sass/layout/_all.sass

@@ -0,0 +1,5 @@
+@charset "utf-8"
+
+@import "hero.sass"
+@import "section.sass"
+@import "footer.sass"

data/app/assets/stylesheets/sass/layout/footer.sass

@@ -0,0 +1,5 @@
+$footer-background-color: $background !default
+
+.footer
+  background-color: $footer-background-color
+  padding: 3rem 1.5rem 6rem

data/app/assets/stylesheets/sass/layout/hero.sass

@@ -0,0 +1,155 @@
+// Main container
+
+.hero
+  align-items: stretch
+  display: flex
+  flex-direction: column
+  justify-content: space-between
+  .navbar
+    background: none
+  .tabs
+    ul
+      border-bottom: none
+  // Colors
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}
+      background-color: $color
+      color: $color-invert
+      a:not(.button),
+      strong
+        color: inherit
+      .title
+        color: $color-invert
+      .subtitle
+        color: rgba($color-invert, 0.9)
+        a:not(.button),
+        strong
+          color: $color-invert
+      .navbar-menu
+        +touch
+          background-color: $color
+      .navbar-item,
+      .navbar-link
+        color: rgba($color-invert, 0.7)
+      a.navbar-item,
+      .navbar-link
+        &:hover,
+        &.is-active
+          background-color: darken($color, 5%)
+          color: $color-invert
+      .tabs
+        a
+          color: $color-invert
+          opacity: 0.9
+          &:hover
+            opacity: 1
+        li
+          &.is-active a
+            opacity: 1
+        &.is-boxed,
+        &.is-toggle
+          a
+            color: $color-invert
+            &:hover
+              background-color: rgba($black, 0.1)
+          li.is-active a
+            &,
+            &:hover
+              background-color: $color-invert
+              border-color: $color-invert
+              color: $color
+      // Modifiers
+      &.is-bold
+        $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
+        $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
+        background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
+        +mobile
+          .navbar-menu
+            background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
+      // 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-top: 1.5rem
+  &.is-medium
+    +tablet
+      .hero-body
+        padding-bottom: 9rem
+        padding-top: 9rem
+  &.is-large
+    +tablet
+      .hero-body
+        padding-bottom: 18rem
+        padding-top: 18rem
+  &.is-halfheight,
+  &.is-fullheight
+    .hero-body
+      align-items: center
+      display: flex
+      & > .container
+        flex-grow: 1
+        flex-shrink: 1
+  &.is-halfheight
+    min-height: 50vh
+  &.is-fullheight
+    min-height: 100vh
+
+// Components
+
+.hero-video
+  +overlay
+  overflow: hidden
+  video
+    left: 50%
+    min-height: 100%
+    min-width: 100%
+    position: absolute
+    top: 50%
+    transform: translate3d(-50%, -50%, 0)
+  // Modifiers
+  &.is-transparent
+    opacity: 0.3
+  // Responsiveness
+  +mobile
+    display: none
+
+.hero-buttons
+  margin-top: 1.5rem
+  // Responsiveness
+  +mobile
+    .button
+      display: flex
+      &:not(:last-child)
+        margin-bottom: 0.75rem
+  +tablet
+    display: flex
+    justify-content: center
+    .button:not(:last-child)
+      margin-right: 1.5rem
+
+// Containers
+
+.hero-head,
+.hero-foot
+  flex-grow: 0
+  flex-shrink: 0
+
+.hero-body
+  flex-grow: 1
+  flex-shrink: 0
+  padding: 3rem 1.5rem

data/app/assets/stylesheets/sass/layout/section.sass

@@ -0,0 +1,13 @@
+$section-padding: 3rem 1.5rem !default
+$section-padding-medium: 9rem 1.5rem !default
+$section-padding-large: 18rem 1.5rem !default
+
+.section
+  padding: $section-padding
+  // Responsiveness
+  +desktop
+    // Sizes
+    &.is-medium
+      padding: $section-padding-medium
+    &.is-large
+      padding: $section-padding-large

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

@@ -0,0 +1,8 @@
+@charset "utf-8"
+
+@import "initial-variables.sass"
+@import "functions.sass"
+@import "derived-variables.sass"
+@import "animations.sass"
+@import "mixins.sass"
+@import "controls.sass"

data/app/assets/stylesheets/{bulma → sass}/utilities/animations.sass

@@ -1,4 +1,4 @@
-@keyframes spin-around
+@keyframes spinAround
   from
     transform: rotate(0deg)
   to

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

@@ -0,0 +1,41 @@
+$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
+  -moz-appearance: none
+  -webkit-appearance: none
+  align-items: center
+  border: 1px solid transparent
+  border-radius: $control-radius
+  box-shadow: none
+  display: inline-flex
+  font-size: $size-normal
+  height: 2.25em
+  justify-content: flex-start
+  line-height: 1.5
+  padding-bottom: $control-padding-vertical
+  padding-left: $control-padding-horizontal
+  padding-right: $control-padding-horizontal
+  padding-top: $control-padding-vertical
+  position: relative
+  vertical-align: top
+  // States
+  &:focus,
+  &.is-focused,
+  &:active,
+  &.is-active
+    outline: none
+  &[disabled]
+    cursor: not-allowed
+
+// The controls sizes use mixins so they can be used at different breakpoints
+=control-small
+  border-radius: $control-radius-small
+  font-size: $size-small
+=control-medium
+  font-size: $size-medium
+=control-large
+  font-size: $size-large

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

@@ -0,0 +1,82 @@
+$primary: $turquoise !default
+
+$info: $cyan !default
+$success: $green !default
+$warning: $yellow !default
+$danger: $red !default
+
+$light: $white-ter !default
+$dark: $grey-darker !default
+
+// Invert colors
+
+$orange-invert: findColorInvert($orange) !default
+$yellow-invert: findColorInvert($yellow) !default
+$green-invert: findColorInvert($green) !default
+$turquoise-invert: findColorInvert($turquoise) !default
+$cyan-invert: findColorInvert($cyan) !default
+$blue-invert: findColorInvert($blue) !default
+$purple-invert: findColorInvert($purple) !default
+$red-invert: findColorInvert($red) !default
+
+$primary-invert: $turquoise-invert !default
+$info-invert: $cyan-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: $blue !default
+$link-invert: $blue-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: $blue !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
+
+// Lists and maps
+
+$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
+
+$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default

data/app/assets/stylesheets/{bulma → sass}/utilities/functions.sass

@@ -9,8 +9,8 @@
   @return $value
 
 @function colorLuminance($color)
-  $colors: ('red': red($color),'green': green($color),'blue': blue($color))
-  @each $name, $value in $colors
+  $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
+  @each $name, $value in $color-rgb
     $adjusted: 0
     $value: $value / 255
     @if $value < 0.03928
@@ -18,17 +18,11 @@
     @else
       $value: ($value + .055) / 1.055
       $value: powerNumber($value, 2)
-    $colors: map-merge($colors, ($name: $value))
-  @return (map-get($colors, 'red') * .2126) + (map-get($colors, 'green') * .7152) + (map-get($colors, 'blue') * .0722)
-
-@function closestEvenNumber($number)
-  @if ($number % 2 == 0px)
-    @return $number
-  @else
-    @return ($number + 1px)
+    $color-rgb: map-merge($color-rgb, ($name: $value))
+  @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
 
 @function findColorInvert($color)
-  @if (colorLuminance($color) > 0.8)
-    @return rgba(black, 0.5)
+  @if (colorLuminance($color) > 0.55)
+    @return rgba(#000, 0.7)
   @else
-    @return white
+    @return #fff

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

@@ -0,0 +1,65 @@
+// 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
+$cyan:         hsl(204, 86%,  53%) !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-medium: 500 !default
+$weight-semibold: 600 !default
+$weight-bold: 700 !default
+
+// Responsiveness
+
+// The container horizontal gap, which acts as the offset for breakpoints
+$gap: 32px !default
+// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
+$tablet: 769px !default
+// 960px container + 3rem
+$desktop: 960px + (2 * $gap) !default
+// 1152px container + 3rem
+$widescreen: 1152px + (2 * $gap)  !default
+// 1344px container + 3rem
+$fullhd: 1344px + (2 * $gap)  !default
+
+// Miscellaneous
+
+$easing: ease-out !default
+$radius-small: 2px !default
+$radius: 3px !default
+$radius-large: 5px !default
+$speed: 86ms !default