Rename bulma folder to sass

sass/elements/buttons.sass

@@ -0,0 +1,111 @@
+=button-small
+  border-radius: 2px
+  font-size: 11px
+  height: 24px
+  line-height: 16px
+  padding: 3px 6px
+=button-medium
+  font-size: 18px
+  height: 40px
+  padding: 7px 14px
+=button-large
+  font-size: 22px
+  height: 48px
+  padding: 11px 20px
+
+.button
+  +control
+  +unselectable
+  justify-content: center
+  padding: 3px 10px
+  text-align: center
+  white-space: nowrap
+  strong
+    color: inherit
+  small
+    display: block
+    font-size: $size-small
+    line-height: 1
+    margin-top: 5px
+  .icon,
+  .tag
+    &:first-child
+      margin-left: -2px
+      margin-right: 4px
+    &:last-child
+      margin-left: 4px
+      margin-right: -2px
+  &:hover
+    color: $control-hover
+  &:active
+    box-shadow: inset 0 1px 2px rgba(black, 0.2)
+  // Colors
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}
+      background: $color
+      border-color: transparent
+      color: $color-invert
+      &:hover,
+      &:focus
+        background: darken($color, 10%)
+        border-color: transparent
+        color: $color-invert
+      &:active
+        border-color: transparent
+      &.is-inverted
+        background: $color-invert
+        color: $color
+        &:hover
+          background: darken($color-invert, 5%)
+        &.is-outlined
+          background-color: transparent
+          border-color: $color-invert
+          color: $color-invert
+          &:hover
+            background: rgba(black, 0.05)
+            border-color: $color-invert
+            color: $color-invert
+      &.is-loading
+        &:after
+          border-color: transparent transparent $color-invert $color-invert !important
+      &.is-outlined
+        background: transparent
+        border-color: $color
+        color: $color
+        &:hover,
+        &:focus
+          border-color: darken($color, 10%)
+          color: darken($color, 10%)
+  &.is-link
+    border-color: transparent
+    color: $text
+    text-decoration: underline
+    &:hover,
+    &:focus
+      background: $border
+      color: $text-strong
+  // Sizes
+  &.is-small
+    +button-small
+  &.is-medium
+    +button-medium
+  &.is-large
+    +button-large
+  // Modifiers
+  &[disabled],
+  &.is-disabled
+    opacity: 0.5
+  &.is-flexible
+    height: auto
+  &.is-fullwidth
+    display: block
+    width: 100%
+  &.is-loading
+    color: transparent
+    pointer-events: none
+    &:after
+      @extend .loader
+      +center(16px)
+      position: absolute !important

sass/elements/controls.sass

@@ -0,0 +1,287 @@
+=control
+  -moz-appearance: none
+  -webkit-appearance: none
+  align-items: center
+  background: $control-background
+  border: 1px solid $control-border
+  border-radius: $radius
+  color: $control
+  display: inline-flex
+  font-size: $size-normal
+  height: 32px
+  line-height: 24px
+  padding: 3px 8px
+  position: relative
+  vertical-align: top
+  &:hover
+    border-color: $control-hover-border
+  &:active,
+  &:focus
+    border-color: $control-active-border
+    outline: none
+  &[disabled],
+  &.is-disabled
+    background: $background
+    border-color: $control-border
+    cursor: not-allowed
+    pointer-events: none
+    +placeholder
+      color: rgba($control, 0.3)
+
+=form-control
+  +control
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    &.is-#{$name}
+      border-color: $color
+
+=control-small
+  border-radius: 2px
+  font-size: 11px
+  height: 24px
+  line-height: 16px
+  padding: 3px 6px
+=control-medium
+  font-size: 18px
+  height: 40px
+  line-height: 32px
+  padding: 3px 10px
+=control-large
+  font-size: 24px
+  height: 48px
+  line-height: 40px
+  padding: 3px 12px
+
+.input
+  +form-control
+  box-shadow: inset 0 1px 2px rgba(black, 0.1)
+  display: block
+  max-width: 100%
+  width: 100%
+  &[type="search"]
+    border-radius: 290486px
+  // Sizes
+  &.is-small
+    +control-small
+    &.is-flat
+      padding: 4px 6px
+  &.is-medium
+    +control-medium
+    &.is-flat
+      padding: 4px 10px
+  &.is-large
+    +control-large
+    &.is-flat
+      padding: 4px 12px
+  // Modifiers
+  &.is-flat
+    border: none
+    box-shadow: none
+    padding: 4px 8px
+  &.is-fullwidth
+    display: block
+    width: 100%
+  &.is-inline
+    display: inline
+    width: auto
+
+.textarea
+  @extend .input
+  line-height: 1.2
+  max-height: 600px
+  max-width: 100%
+  min-height: 120px
+  min-width: 100%
+  padding: 10px
+  resize: vertical
+
+%control-with-element
+  cursor: pointer
+  display: inline-block
+  line-height: 16px
+  position: relative
+  vertical-align: top
+  input
+    cursor: pointer
+  &:hover
+    color: $control-hover
+  &.is-disabled
+    color: $text-light
+    pointer-events: none
+    input
+      pointer-events: none
+
+.checkbox
+  @extend %control-with-element
+
+.radio
+  @extend %control-with-element
+  & + .radio
+    margin-left: 10px
+
+.select
+  display: inline-block
+  height: 32px
+  position: relative
+  vertical-align: top
+  select
+    +form-control
+    cursor: pointer
+    display: block
+    outline: none
+    padding-right: 36px
+    &:hover
+      border-color: $control-hover-border
+    &::ms-expand
+      display: none
+  &.is-fullwidth
+    width: 100%
+    select
+      width: 100%
+  &:after
+    +arrow($link)
+    margin-top: -6px
+    right: 16px
+    top: 50%
+  &:hover
+    &:after
+      border-color: $link-hover
+
+.label
+  color: $text-strong
+  display: block
+  font-weight: bold
+  &:not(:last-child)
+    margin-bottom: 5px
+
+.help
+  display: block
+  font-size: $size-small
+  margin-top: 5px
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    &.is-#{$name}
+      color: $color
+
+// Containers
+
+.control-label
+  +mobile
+    margin-bottom: 5px
+  +tablet
+    flex: 1
+    margin-right: 20px
+    padding-top: 7px
+    text-align: right
+
+.control
+  position: relative
+  text-align: left
+  &:not(:last-child)
+    margin-bottom: 10px
+  // Modifiers
+  &.has-addons
+    display: flex
+    justify-content: flex-start
+    .button,
+    .input,
+    .select
+      border-radius: 0
+      margin-right: -1px
+      &:hover
+        z-index: 2
+      &:active,
+      &:focus
+        z-index: 3
+      &:first-child
+        border-radius: $radius 0 0 $radius
+        select
+          border-radius: $radius 0 0 $radius
+      &:last-child
+        border-radius: 0 $radius $radius 0
+        select
+          border-radius: 0 $radius $radius 0
+    &.has-addons-centered
+      justify-content: center
+    &.has-addons-right
+      justify-content: flex-end
+  &.has-icon
+    & > .fa
+      +fa(14px, 24px)
+      color: $text-light
+      pointer-events: none
+      position: absolute
+      top: 4px
+      z-index: 4
+    .input
+      &:focus + .fa
+        color: $text-strong
+      &.is-small + .fa
+        font-size: 10.5px
+        top: 0
+      &.is-medium + .fa
+        font-size: 21px
+        top: 8px
+      &.is-large + .fa
+        font-size: 21px
+        top: 12px
+    &:not(.has-icon-right)
+      & > .fa
+        left: 4px
+      .input
+        padding-left: 32px
+        &.is-small
+          padding-left: 24px
+          & + .fa
+            left: 0
+        &.is-medium
+          padding-left: 40px
+          & + .fa
+            left: 8px
+        &.is-large
+          padding-left: 48px
+          & + .fa
+            left: 12px
+    &.has-icon-right
+      & > .fa
+        right: 4px
+      .input
+        padding-right: 32px
+        &.is-small
+          padding-right: 24px
+          & + .fa
+            right: 0
+        &.is-medium
+          padding-right: 40px
+          & + .fa
+            right: 8px
+        &.is-large
+          padding-right: 48px
+          & + .fa
+            right: 12px
+  &.is-grouped
+    display: flex
+    justify-content: flex-start
+    & > .button,
+    & > .input,
+    & > .select
+      &:not(:last-child)
+        margin-right: 10px
+    & > .input
+      flex: 1
+    &.is-grouped-centered
+      justify-content: center
+    &.is-grouped-right
+      justify-content: flex-end
+  &.is-horizontal
+    +tablet
+      display: flex
+      & > .control
+        display: flex
+        flex: 5
+  &.is-loading
+    &:after
+      @extend .loader
+      position: absolute !important
+      right: 8px
+      top: 8px

sass/elements/elements.sass

@@ -0,0 +1,191 @@
+@charset "utf-8"
+
+@import "controls"
+@import "buttons"
+@import "titles"
+@import "images"
+@import "messages"
+@import "notifications"
+@import "progress"
+
+.delete
+  +unselectable
+  -moz-appearance: none
+  -webkit-appearance: none
+  background: rgba(black, 0.2)
+  border: none
+  border-radius: 290486px
+  cursor: pointer
+  display: inline-block
+  height: 24px
+  position: relative
+  vertical-align: top
+  width: 24px
+  &:before,
+  &:after
+    background: 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: rgba(black, 0.5)
+  // Sizes
+  &.is-small
+    height: 16px
+    width: 16px
+  &.is-medium
+    height: 32px
+    width: 32px
+  &.is-large
+    height: 40px
+    width: 40px
+
+.icon
+  +fa(21px, 24px)
+  .fa
+    font-size: inherit
+    line-height: inherit
+  // Sizes
+  &.is-small
+    +fa(14px, 16px)
+  &.is-medium
+    +fa(28px, 32px)
+  &.is-large
+    +fa(42px, 48px)
+
+.hamburger
+  cursor: pointer
+  display: block
+  height: 50px
+  position: relative
+  width: 50px
+  span
+    background: $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: $background
+  // Modifers
+  &.is-active
+    span
+      background: $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
+  +tablet
+    height: $header-height
+    width: $header-height
+
+.heading
+  display: block
+  font-size: 11px
+  letter-spacing: 1px
+  margin-bottom: 5px
+  text-transform: uppercase
+
+.highlight
+  @extend .block
+  font-size: 12px
+  font-weight: normal
+  max-width: 100%
+  overflow: hidden
+  padding: 0
+  pre
+    overflow: auto
+    max-width: 100%
+
+.loader
+  animation: spin-around 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
+
+.number
+  background: $background
+  border-radius: 290486px
+  display: inline-block
+  font-size: $size-medium
+  vertical-align: top
+
+.tag
+  align-items: center
+  background: $background
+  border-radius: 290486px
+  color: $text
+  display: inline-flex
+  font-size: 12px
+  height: 24px
+  justify-content: center
+  line-height: 16px
+  padding: 4px 10px
+  vertical-align: top
+  white-space: nowrap
+  .delete
+    margin-left: 4px
+    margin-right: -6px
+  &:not(.is-large)
+    .delete
+      @extend .delete.is-small
+  // Colors
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}
+      background: $color
+      color: $color-invert
+  &.is-dark
+    background: $text
+    color: $text-invert
+  // Sizes
+  &.is-small
+    font-size: $size-small
+    height: 20px
+    padding: 2px 8px
+  &.is-medium
+    font-size: $size-normal
+    height: 32px
+    padding: 8px 14px
+  &.is-large
+    font-size: $size-5
+    height: 40px
+    line-height: 24px
+    padding: 8px 18px
+    .delete
+      margin-left: 4px
+      margin-right: -8px

sass/elements/images.sass

@@ -0,0 +1,34 @@
+$dimensions: 16 24 32 48 64 96 128
+
+.image
+  display: block
+  position: relative
+  img
+    display: block
+  // Ratio
+  &.is-square,
+  &.is-1by1,
+  &.is-4by3,
+  &.is-3by2,
+  &.is-16by9,
+  &.is-2by1
+    img
+      +overlay
+      height: 100%
+      width: 100%
+  &.is-square,
+  &.is-1by1
+    padding-top: 100%
+  &.is-4by3
+    padding-top: 75%
+  &.is-3by2
+    padding-top: 66.6666%
+  &.is-16by9
+    padding-top: 56.25%
+  &.is-2by1
+    padding-top: 50%
+  // Sizes
+  @each $dimension in $dimensions
+    &.is-#{$dimension}x#{$dimension}
+      height: $dimension * 1px
+      width: $dimension * 1px

sass/elements/messages.sass

@@ -0,0 +1,39 @@
+.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
+  padding: 7px 10px
+  strong
+    color: inherit
+  & + .message-body
+    border-radius: 0 0 $radius $radius
+    border-top: none
+
+.message
+  @extend .block
+  background: $background
+  border-radius: $radius
+  // Colors
+  @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%)

sass/elements/notifications.sass

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

sass/elements/progress.sass

@@ -0,0 +1,32 @@
+.progress
+  @extend .block
+  -moz-appearance: none
+  -webkit-appearance: none
+  border: none
+  border-radius: 290486px
+  display: block
+  height: 12px
+  overflow: hidden
+  padding: 0
+  width: 100%
+  &::-webkit-progress-bar
+    background: $border
+  &::-webkit-progress-value
+    background: $text
+  &::-moz-progress-bar
+    background: $text
+  // Colors
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    &.is-#{$name}
+      &::-webkit-progress-value
+        background: $color
+      &::-moz-progress-bar
+        background: $color
+  // Sizes
+  &.is-small
+    height: 8px
+  &.is-medium
+    height: 16px
+  &.is-large
+    height: 20px

sass/elements/titles.sass

@@ -0,0 +1,72 @@
+.title,
+.subtitle
+  @extend .block
+  font-weight: $weight-title-normal
+  word-break: break-all
+  em,
+  span
+    font-weight: $weight-title-normal
+  a
+    &:hover
+      border-bottom: 1px solid
+  strong
+    font-weight: $weight-title-bold
+  .tag
+    vertical-align: bottom
+
+.title
+  color: $text-strong
+  font-size: $size-large
+  line-height: 1
+  code
+    display: inline-block
+    font-size: $size-large
+  strong
+    color: inherit
+  & + .highlight
+    margin-top: -10px
+  & + .subtitle
+    margin-top: -10px
+  // Colors
+  @each $size in $sizes
+    $i: index($sizes, $size)
+    &.is-#{$i}
+      font-size: $size
+      code
+        font-size: nth($sizes, min($i + 1, 6))
+  // Modifiers
+  &.is-normal
+    font-weight: 400
+    strong
+      font-weight: 700
+  // Responsiveness
+  +tablet
+    & + .subtitle
+      margin-top: -15px
+
+.subtitle
+  color: $text
+  font-size: $size-medium
+  line-height: 1.125
+  code
+    border-radius: $radius
+    display: inline-block
+    font-size: $size-normal
+    padding: 2px 3px
+    vertical-align: top
+  strong
+    color: $text-strong
+  & + .title
+    margin-top: -20px
+  // Colors
+  @each $size in $sizes
+    $i: index($sizes, $size)
+    &.is-#{$i}
+      font-size: $size
+      code
+        font-size: nth($sizes, min($i + 1, 6))
+  // Modifiers
+  &.is-normal
+    font-weight: 400
+    strong
+      font-weight: 700