bulma-rails 0.1.2 → 0.2.3

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

@@ -0,0 +1,32 @@
+.tile
+  align-items: stretch
+  display: block
+  flex-basis: auto
+  flex-grow: 1
+  flex-shrink: 1
+  min-height: min-content
+  // Modifiers
+  &.is-ancestor
+    margin-left: -10px
+    margin-right: -10px
+    margin-top: -10px
+    &:last-child
+      margin-bottom: -10px
+    &:not(:last-child)
+      margin-bottom: 10px
+  &.is-child
+    margin: 0 !important
+  &.is-parent
+    padding: 10px
+  &.is-vertical
+    flex-direction: column
+    & > .tile.is-child:not(:last-child)
+      margin-bottom: 20px !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/hero.sass

@@ -39,9 +39,10 @@
 
 .hero-body
   flex-grow: 1
+  flex-shrink: 0
   padding: 40px 20px
   // Responsiveness
-  +desktop
+  +from(1240px)
     padding-left: 0
     padding-right: 0
 
@@ -72,7 +73,7 @@
         strong
           color: inherit
       .subtitle
-        color: rgba($color-invert, 0.7)
+        color: rgba($color-invert, 0.9)
         a,
         strong
           color: $color-invert
@@ -83,14 +84,14 @@
           background-color: $color
       a.nav-item,
       .nav-item a:not(.button)
-        color: rgba($color-invert, 0.5)
+        color: rgba($color-invert, 0.7)
         &:hover,
         &.is-active
           color: $color-invert
       .tabs
         a
           color: $color-invert
-          opacity: 0.5
+          opacity: 0.9
           &:hover
             opacity: 1
         li
@@ -144,3 +145,4 @@
       display: flex
       & > .container
         flex-grow: 1
+        flex-shrink: 1

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

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

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

@@ -1,13 +1,36 @@
+$control: $text-strong !default
+$control-background: $text-invert !default
+$control-border: $border !default
+
+$control-hover: $link-hover !default
+$control-hover-border: $border-hover !default
+
+$control-active: $link !default
+$control-active-background: $link !default
+$control-active-background-invert: $link-invert !default
+$control-active-border: $link !default
+
+$control-disabled: $border !default
+$control-disabled-background: $background !default
+
+$control-radius: $radius !default
+$control-radius-small: $radius-small !default
+$control-size: $size-normal !default
+$control-size-small: $size-small !default
+
+$control-icon: $grey-lighter !default
+$control-icon-active: $grey-light !default
+
 =control
   -moz-appearance: none
   -webkit-appearance: none
   align-items: center
   background-color: $control-background
   border: 1px solid $control-border
-  border-radius: $radius
+  border-radius: $control-radius
   color: $control
   display: inline-flex
-  font-size: $size-normal
+  font-size: $control-size
   height: 32px
   justify-content: flex-start
   line-height: 24px
@@ -24,15 +47,15 @@
     outline: none
   &[disabled],
   &.is-disabled
-    background-color: $background
-    border-color: $control-border
+    background-color: $control-disabled-background
+    border-color: $control-disabled
     cursor: not-allowed
     pointer-events: none
     +placeholder
       color: rgba($control, 0.3)
 
 =control-small
-  border-radius: $radius-small
+  border-radius: $control-radius-small
   font-size: 11px
   height: 24px
   line-height: 16px

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

@@ -21,14 +21,8 @@
     $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 closestEvenNumber($number)
-  @if ($number % 2 == 0px)
-    @return $number
-  @else
-    @return ($number + 1px)
-
 @function findColorInvert($color)
-  @if (colorLuminance($color) > 0.8)
-    @return rgba($black, 0.5)
+  @if (colorLuminance($color) > 0.55)
+    @return rgba(black, 0.7)
   @else
     @return white

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

@@ -10,6 +10,10 @@
   transform: rotate(-45deg)
   width: 7px
 
+=block
+  &:not(:last-child)
+    margin-bottom: 20px
+
 =clearfix
   &:after
     clear: both
@@ -23,6 +27,49 @@
   position: absolute
   top: 50%
 
+=delete
+  +unselectable
+  -moz-appearance: none
+  -webkit-appearance: none
+  background-color: rgba($black, 0.1)
+  border: none
+  border-radius: 290486px
+  cursor: pointer
+  display: inline-block
+  height: 24px
+  outline: none
+  position: relative
+  vertical-align: top
+  width: 24px
+  &:before,
+  &:after
+    background-color: $white
+    content: ""
+    display: block
+    height: 2px
+    left: 50%
+    margin-left: -25%
+    margin-top: -1px
+    position: absolute
+    top: 50%
+    width: 50%
+  &:before
+    transform: rotate(45deg)
+  &:after
+    transform: rotate(-45deg)
+  &:hover
+    background-color: rgba($black, 0.2)
+  // Sizes
+  &.is-small
+    height: 16px
+    width: 16px
+  &.is-medium
+    height: 32px
+    width: 32px
+  &.is-large
+    height: 40px
+    width: 40px
+
 =fa($size, $dimensions)
   display: inline-block
   font-size: $size
@@ -32,6 +79,64 @@
   vertical-align: top
   width: $dimensions
 
+=hamburger($dimensions)
+  cursor: pointer
+  display: block
+  height: $dimensions
+  position: relative
+  width: $dimensions
+  span
+    background-color: $text
+    display: block
+    height: 1px
+    left: 50%
+    margin-left: -7px
+    position: absolute
+    top: 50%
+    transition: none $speed $easing
+    transition-property: background, left, opacity, transform
+    width: 15px
+    &:nth-child(1)
+      margin-top: -6px
+    &:nth-child(2)
+      margin-top: -1px
+    &:nth-child(3)
+      margin-top: 4px
+  &:hover
+    background-color: $background
+  // Modifers
+  &.is-active
+    span
+      background-color: $link
+      &:nth-child(1)
+        margin-left: -5px
+        transform: rotate(45deg)
+        transform-origin: left top
+      &:nth-child(2)
+        opacity: 0
+      &:nth-child(3)
+        margin-left: -5px
+        transform: rotate(-45deg)
+        transform-origin: left bottom
+
+@keyframes spinAround
+  from
+    transform: rotate(0deg)
+  to
+    transform: rotate(359deg)
+
+=loader
+  animation: spinAround 500ms infinite linear
+  border: 2px solid $border
+  border-radius: 290486px
+  border-right-color: transparent
+  border-top-color: transparent
+  content: ""
+  display: block
+  height: 16px
+  position: relative
+  width: 16px
+
 =overlay($offset: 0)
   bottom: $offset
   left: $offset
@@ -57,6 +162,19 @@
   text-indent: -290486px
   width: $width
 
+=unselectable
+  -webkit-touch-callout: none
+  -webkit-user-select: none
+  -moz-user-select: none
+  -ms-user-select: none
+  user-select: none
+
+// Responsiveness
+
+$tablet: 769px !default
+$desktop: 980px !default
+$widescreen: 1180px !default
+
 =from($device)
   @media screen and (min-width: $device)
     @content

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

@@ -1,27 +1,33 @@
+////////////////////////////////////////////////
+////////////////////////////////////////////////
 // 1. Initial variables
 
 // Colors
-
-$black: #111 !default
-$grey-darker: #222324 !default
-$grey-dark: #69707a !default
-$grey: #aeb1b5 !default
-$grey-light: #d3d6db !default
-$grey-lighter: #f5f7fa !default
-$white: #fff !default
-
-$blue: #42afe3 !default
-$green: #97cd76 !default
-$orange: #f68b39 !default
-$purple: #847bb9 !default
-$red: #ed6c63 !default
-$turquoise: #1fc8db !default
-$yellow: #fce473 !default
+$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: "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
-$family-monospace: "Source Code Pro", "Monaco", "Inconsolata", monospace !default
+$family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
+$family-monospace: "Inconsolata", "Consolas", "Monaco", monospace !default
 
 $size-1: 48px !default
 $size-2: 40px !default
@@ -37,26 +43,15 @@ $weight-bold: 700 !default
 $weight-title-normal: 300 !default
 $weight-title-bold: 500 !default
 
-// Breakpoints
-
-$tablet: 769px !default
-$desktop: 980px !default
-$widescreen: 1180px !default
-
-// Dimensions
-
-$column-gap: 20px !default
-
-$nav-height: 50px !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
@@ -66,15 +61,14 @@ $success: $green !default
 $warning: $yellow !default
 $danger: $red !default
 
-$light: $grey-lighter !default
-$dark: $grey-dark !default
+$light: $white-ter !default
+$dark: $grey-darker !default
 
-$text: $grey-dark !default
-
-// 3. Generated variables
+////////////////////////////////////////////////
+////////////////////////////////////////////////
+// 3. Applied variables
 
 // Invert colors
-
 $primary-invert: findColorInvert($primary) !default
 
 $info-invert: findColorInvert($info) !default
@@ -86,22 +80,20 @@ $light-invert: $dark !default
 $dark-invert: $light !default
 
 // General colors
+$body-background: $white-ter !default
 
-$body-background: $grey-lighter !default
+$background: $white-ter !default
 
-$background: $grey-lighter !default
-
-$border: $grey-light !default
-$border-hover: $grey !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
 
@@ -109,34 +101,18 @@ $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-background: $grey-lighter !default
+$link-hover-background: $white-ter !default
 $link-hover-border: $grey-darker !default
 
 $link-active: $grey-darker !default
 $link-active-border: $grey-darker !default
 
-// Control colors
-
-$control: $text-strong !default
-$control-background: $text-invert !default
-$control-border: $border !default
-
-$control-hover: $link-hover !default
-$control-hover-border: $border-hover !default
-
-$control-active: $link !default
-$control-active-background: $link !default
-$control-active-background-invert: $link-invert !default
-$control-active-border: $link !default
-
 // Typography
-
 $family-primary: $family-sans-serif !default
 $family-code: $family-monospace !default
 
@@ -146,6 +122,8 @@ $size-medium: $size-5 !default
 $size-large: $size-3 !default
 $size-huge: $size-1 !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