bulma-rails 0.0.4.1

data/app/assets/stylesheets/bulma/elements/titles.sass

@@ -0,0 +1,57 @@
+.title,
+.subtitle
+  font-weight: 300
+  &:not(:last-child)
+    margin-bottom: 20px
+
+.title
+  color: $text-strong
+  font-size: $size-large
+  line-height: 1
+  strong
+    color: inherit
+  code
+    display: inline-block
+    font-size: $size-large
+  & + .subtitle
+    margin-top: -10px
+  & + .highlight
+    margin-top: -10px
+  &.is-normal
+    font-weight: 400
+    strong
+      font-weight: 700
+  @each $size in $sizes
+    $i: index($sizes, $size)
+    &.is-#{$i}
+      font-size: $size
+      code
+        font-size: nth($sizes, min($i + 1, 6))
+  +tablet
+    & + .subtitle
+      margin-top: -15px
+
+.subtitle
+  font-size: $size-medium
+  line-height: 1.125
+  strong
+    color: $text-strong
+    font-weight: 400
+  code
+    border-radius: $radius
+    display: inline-block
+    font-size: $size-normal
+    padding: 2px 3px
+    vertical-align: top
+  & + .text
+    margin-top: 20px
+  &.is-normal
+    font-weight: 400
+    strong
+      font-weight: 700
+  @each $size in $sizes
+    $i: index($sizes, $size)
+    &.is-#{$i}
+      font-size: $size
+      code
+        font-size: nth($sizes, min($i + 1, 6))

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

@@ -0,0 +1,11 @@
+.footer
+  background: $background
+  padding: 40px 20px 80px
+  a
+    color: $text
+    &:hover
+      color: $text-strong
+    &:not(.icon)
+      border-bottom: 1px solid $border
+      &:hover
+        border-bottom-color: $link

data/app/assets/stylesheets/bulma/layout/header.sass

@@ -0,0 +1,145 @@
+.header
+  +clearfix
+  background: white
+  box-shadow: 0 1px 2px rgba(black, 0.1)
+  display: flex
+  height: $header-height
+  line-height: 24px
+  position: relative
+  text-align: center
+  z-index: 2
+  .container
+    align-items: stretch
+    box-shadow: 0 1px 0 rgba($border, 0.3)
+    display: flex
+    width: 100%
+
+.header-toggle
+  @extend .hamburger
+  +tablet
+    display: none
+
+// Elements
+
+.header-item
+  align-items: center
+  display: flex
+  padding: 10px
+  img
+    max-height: 24px
+  a
+    color: $text
+    &:hover
+      color: $link-hover
+    &.is-active
+      color: $link-active
+  .fa
+    font-size: 21px
+    line-height: 24px
+
+.header-icon
+  +fa(14px, 24px)
+  color: $text
+  margin: 0 5px
+  &:hover
+    color: $link-hover
+
+.header-tab
+  align-items: center
+  border-bottom: 1px solid transparent
+  color: $text
+  display: block
+  height: $header-height
+  line-height: 24px
+  padding: 13px 15px
+  &:hover
+    border-bottom: 1px solid $link
+  &.is-active
+    border-bottom: 3px solid $link
+    color: $link
+
+// Containers
+
+.header-left
+  align-items: stretch
+  display: flex
+  flex: 1
+  overflow: hidden
+  overflow-x: auto
+  white-space: nowrap
+  +desktop
+    .header-item:first-child
+      padding-left: 0
+
+.header-center
+  align-items: stretch
+  display: flex
+  left: 50%
+  position: absolute
+  transform: translateX(-50%)
+
+.header-right
+  align-items: stretch
+  +tablet
+    display: flex
+  +desktop
+    .header-item:last-child
+      padding-right: 0
+
+.header-full
+  align-items: stretch
+  display: flex
+  justify-content: center
+  text-align: center
+  width: 100%
+  & > .header-item
+    align-items: stretch
+    display: flex
+    flex: 1
+    justify-content: center
+    padding: 0
+    & > a
+      align-items: center
+      display: flex
+      justify-content: center
+      width: 100%
+
+.header-menu
+  +mobile
+    background: white
+    box-shadow: 0 4px 7px rgba(black, 0.1)
+    display: none
+    position: absolute
+    right: 0
+    top: $header-height
+    z-index: 100
+    .header-item
+      border-top: 1px solid rgba($border, 0.5)
+      padding: 10px
+    &.is-active
+      display: block
+
+// States
+
+.header.is-centered
+  justify-content: center
+  .header-left,
+  .header-center,
+  .header-right
+    justify-content: center
+
+.header.is-small
+  background: $background
+  box-shadow: none
+  height: 40px
+  z-index: 1
+  .container
+    height: 40px
+  .header-tab
+    font-size: 13px
+    height: 40px
+    padding: 8px 10px
+    &:hover,
+    &.is-active
+      border-bottom-width: 2px
+

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

@@ -0,0 +1,147 @@
+.hero-video
+  +overlay
+  overflow: hidden
+  &.is-transparent
+    opacity: 0.3
+  video
+    left: 50%
+    min-height: 100%
+    min-width: 100%
+    position: absolute
+    top: 50%
+    transform: translate3d(-50%, -50%, 0)
+  +mobile
+    display: none
+
+.hero-content
+  padding: 40px 20px
+  +desktop
+    padding: 40px 0
+
+.hero-buttons
+  margin-top: 20px
+  +mobile
+    .button
+      display: block
+      &:not(:last-child)
+        margin-bottom: 10px
+  +tablet
+    display: flex
+    justify-content: center
+    .button:not(:last-child)
+      margin-right: 20px
+
+.hero
+  background: white
+  text-align: center
+  .header
+    background: none
+    box-shadow: none
+  .tabs
+    a
+      border: none
+    ul
+      border-bottom: none
+  &.is-alt
+    background: $background
+    color: $text-light
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}
+      background: $color
+      color: $color-invert
+      .title
+        color: $color-invert
+        a,
+        strong
+          color: inherit
+      .subtitle
+        color: rgba($color-invert, 0.7)
+        strong
+          color: $color-invert
+      .header .container
+        box-shadow: 0 1px 0 rgba($color-invert, 0.2)
+      .header-icon,
+      .header-item > a:not(.button)
+        color: $color-invert
+        opacity: 0.5
+        &:hover,
+        &.is-active
+          opacity: 1
+      .tabs
+        a
+          color: $color-invert
+          opacity: 0.5
+          &:hover
+            opacity: 1
+        li.is-active a
+          opacity: 1
+        &.is-boxed,
+        &.is-toggle
+          a
+            color: $color-invert
+            &:hover
+              background: rgba(black, 0.1)
+          li.is-active a
+            &,
+            &:hover
+              background: $color-invert
+              color: $color
+      &.is-bold
+        $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
+        $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
+        background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
+      +mobile
+        .header-toggle
+          span
+            background: $color-invert
+          &:hover
+            background: rgba(black, 0.1)
+          &.is-active
+            span
+              background: $color-invert
+        .header-menu
+          background: $color
+          .header-item
+            border-top-color: rgba($color-invert, 0.2)
+  &.is-fullheight,
+  &.is-large
+    +tablet
+      .tabs
+        font-size: $size-medium
+  &.is-medium
+    +tablet
+      .hero-content
+        padding: 120px 20px
+    +desktop
+      .hero-content
+        padding: 120px 0
+  &.is-large
+    .tabs
+      a
+        padding: 10px 15px
+    +tablet
+      .hero-content
+        padding: 240px 20px
+    +desktop
+      .hero-content
+        padding: 240px 0
+  &.is-fullheight
+    align-items: stretch
+    display: flex
+    flex-direction: column
+    height: 100vh
+    justify-content: space-between
+    .tabs
+      a
+        padding: 15px 20px
+    .hero-content
+      display: flex
+      flex: 1
+      flex-direction: column
+      justify-content: center
+  &.is-left
+    text-align: left
+  &.is-right
+    text-align: right

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

@@ -0,0 +1,6 @@
+@charset "utf-8"
+
+@import header
+@import hero
+@import section
+@import footer

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

@@ -0,0 +1,11 @@
+.section
+  background: white
+  padding: 40px 20px
+  & + .section
+    border-top: 1px solid rgba($border, 0.5)
+  +desktop
+    padding: 40px 0
+    &.is-medium
+      padding: 120px 0
+    &.is-large
+      padding: 240px 0

data/app/assets/stylesheets/bulma/utilities/animations.sass

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

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

@@ -0,0 +1,34 @@
+@function powerNumber($number, $exp)
+  $value: 1
+  @if $exp > 0
+    @for $i from 1 through $exp
+      $value: $value * $number
+  @else if $exp < 0
+    @for $i from 1 through -$exp
+      $value: $value / $number
+  @return $value
+
+@function colorLuminance($color)
+  $colors: ('red': red($color),'green': green($color),'blue': blue($color))
+  @each $name, $value in $colors
+    $adjusted: 0
+    $value: $value / 255
+    @if $value < 0.03928
+      $value: $value / 12.92
+    @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)
+
+@function findColorInvert($color)
+  @if (colorLuminance($color) > 0.8)
+    @return rgba(black, 0.5)
+  @else
+    @return white

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

@@ -0,0 +1,83 @@
+=arrow($color)
+  border: 1px solid $color
+  border-right: 0
+  border-top: 0
+  content: " "
+  display: block
+  height: 7px
+  pointer-events: none
+  position: absolute
+  transform: rotate(-45deg)
+  width: 7px
+
+=clearfix
+  &:after
+    clear: both
+    content: " "
+    display: table
+
+=center($size)
+  left: 50%
+  margin-left: -($size / 2)
+  margin-top: -($size / 2)
+  position: absolute
+  top: 50%
+
+=fa($size, $dimensions)
+  display: inline-block
+  font-size: $size
+  height: $dimensions
+  line-height: $dimensions
+  text-align: center
+  vertical-align: top
+  width: $dimensions
+
+=overlay($offset: 0)
+  bottom: $offset
+  left: $offset
+  position: absolute
+  right: $offset
+  top: $offset
+
+=placeholder
+  $placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
+  @each $placeholder in $placeholders
+    &:#{$placeholder}-placeholder
+      @content
+
+=replace($background, $width, $height)
+  background: $background center center no-repeat
+  background-size: $width $height
+  display: block
+  height: $height
+  outline: none
+  overflow: hidden
+  text-indent: -290486px
+  width: $width
+
+$tablet: 769px
+$desktop: 980px
+
+=from($device)
+  @media screen and (min-width: $device)
+    @content
+
+=until($device)
+  @media screen and (max-width: $device - 1px)
+    @content
+
+=mobile
+  @media screen and (max-width: $tablet - 1px)
+    @content
+
+=tablet
+  @media screen and (min-width: $tablet)
+    @content
+
+=touch
+  @media screen and (max-width: $desktop - 1px)
+    @content
+
+=desktop
+  @media screen and (min-width: $desktop)
+    @content