bulma-sass 0.0.1

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

@@ -0,0 +1,41 @@
+.message-body
+  border: 1px solid $border
+  border-radius: $radius
+  padding: 12px 15px
+  strong
+    color: inherit
+
+.message-header
+  background: $text
+  border-radius: $radius $radius 0 0
+  color: $text-invert
+  font-size: 10px
+  font-weight: bold
+  letter-spacing: 1px
+  padding: 3px 8px
+  text-transform: uppercase
+  & + .message-body
+    border-radius: 0 0 $radius $radius
+    border-top: none
+
+.message
+  background: $background
+  border-radius: $radius
+  &:not(:last-child)
+    margin-bottom: 20px
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    $lightning: (100% - lightness($color)) - 4%
+    $darkness: max(lightness($color) - 10%, lightness($color))
+    &.is-#{$name}
+      background: lighten($color, $lightning)
+      .message-header
+        background: $color
+        color: $color-invert
+      .message-body
+        border-color: $color
+        @if (colorLuminance($color) > 0.8)
+          color: desaturate(lighten(darken($color, 100%), 40%), 40%)
+        @else
+          color: desaturate(lighten(darken($color, 100%), 50%), 30%)

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

@@ -0,0 +1,20 @@
+.notification
+  +clearfix
+  background: $background
+  border-radius: $radius
+  padding: 16px 20px
+  position: relative
+  &:not(:last-child)
+    margin-bottom: 20px
+  .title
+    color: inherit
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}
+      background: $color
+      color: $color-invert
+  .delete
+    border-radius: 0 $radius
+    float: right
+    margin: -16px -20px 0 20px

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,149 @@
+.header
+  +clearfix
+  background: white
+  box-shadow: 0 1px 2px rgba(black, 0.1)
+  height: $header-height
+  line-height: 24px
+  position: relative
+  text-align: center
+  z-index: 2
+  .container
+    align-items: center
+    box-shadow: 0 1px 0 rgba($border, 0.3)
+    display: flex
+    height: $header-height
+
+.header-toggle
+  @extend .hamburger
+  +tablet
+    display: none
+
+// Elements
+
+.header-item
+  display: block
+  padding: 0 10px
+  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
+  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
+
+.header-logo
+  align-items: center
+  display: flex
+  img
+    max-height: 24px
+  +touch
+    padding: 0 10px
+  +tablet
+    padding-right: 10px
+
+// Containers
+
+.header-left
+  align-items: center
+  display: flex
+  flex: 1
+  overflow: hidden
+  overflow-x: auto
+  white-space: nowrap
+
+.header-center
+  align-items: center
+  display: flex
+  height: $header-height
+  left: 50%
+  position: absolute
+  transform: translateX(-50%)
+
+.header-right
+  align-items: center
+  +tablet
+    display: flex
+  +desktop
+    .header-item:last-child
+      padding-right: 0
+
+.header-full
+  align-items: stretch
+  display: flex
+  height: $header-height
+  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,143 @@
+.hero
+  background: white
+  text-align: center
+  & > .container
+    padding: 40px 20px
+  a
+    color: inherit
+  .header
+    background: none
+    box-shadow: none
+  .tabs
+    ul
+      border-bottom: none
+    a
+      border: none
+      margin-bottom: 0
+      padding: 0 0 10px
+    &.is-boxed
+      a
+        border: none
+        padding: 6px 12px
+  +desktop
+    & > .container
+      padding: 40px 0
+  &.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
+        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
+          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-medium,
+  &.is-large
+    +tablet
+      .title
+        font-size: $size-huge
+      .subtitle
+        font-size: $size-large
+      .tabs
+        font-size: $size-medium
+        a
+          padding-bottom: 15px
+        &.is-boxed
+          a
+            padding: 12px 16px
+  &.is-fullheight
+    align-items: center
+    display: flex
+    height: 100vh
+    .tabs
+      white-space: normal
+  &.is-medium
+    +tablet
+      & > .container
+        padding: 120px 20px
+      .title
+        font-size: 40px
+      .subtitle
+        font-size: 24px
+      .tabs
+        font-size: 16px
+    +desktop
+      & > .container
+        padding: 120px 0
+  &.is-large
+    +tablet
+      & > .container
+        padding: 240px 20px
+    +desktop
+      & > .container
+        padding: 240px 0
+  &.is-left
+    text-align: left
+  &.is-right
+    text-align: right
+
+.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

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