Rename bulma folder to sass

sass/components/card.sass

@@ -0,0 +1,59 @@
+.card-header
+  align-items: stretch
+  box-shadow: 0 1px 2px rgba(black, 0.1)
+  display: flex
+  min-height: 40px
+
+.card-header-title
+  align-items: flex-start
+  color: $text-strong
+  display: flex
+  flex: 1
+  font-weight: bold
+  padding: 10px
+
+.card-header-icon
+  align-items: center
+  cursor: pointer
+  display: flex
+  justify-content: center
+  width: 40px
+
+.card-image
+  display: block
+  position: relative
+
+.card-content
+  padding: 20px
+  .title + .subtitle
+    margin-top: -20px
+
+.card-footer
+  background: $background
+  border-top: 1px solid $border
+  align-items: stretch
+  display: flex
+
+.card-footer-item
+  align-items: center
+  display: flex
+  flex: 1
+  justify-content: center
+  padding: 10px
+  &:not(:last-child)
+    border-right: 1px solid $border
+
+.card
+  background: white
+  box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
+  color: $text
+  max-width: 100%
+  position: relative
+  width: 300px
+  .media:not(:last-child)
+    margin-bottom: 10px
+  // Modifiers
+  &.is-fullwidth
+    width: 100%
+  &.is-rounded
+    border-radius: 5px

sass/components/components.sass

@@ -0,0 +1,28 @@
+@charset "utf-8"
+
+@import "grid"
+@import "navbar"
+@import "card"
+@import "table"
+@import "tabs"
+@import "media"
+@import "menu"
+@import "pagination"
+@import "panel"
+@import "modal"
+
+.box
+  @extend .block
+  background: white
+  border-radius: 5px
+  box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
+  display: block
+  padding: 20px
+
+a.box
+  &:hover,
+  &:focus
+    box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px $link
+  &:active
+    box-shadow: inset 0 1px 2px rgba(black, 0.2), 0 0 0 1px $link
+

sass/components/grid.sass

@@ -0,0 +1,254 @@
+.column
+  flex: 1
+  padding: 10px
+  .columns.is-mobile > &.is-narrow
+    flex: none
+  .columns.is-mobile > &.is-full
+    flex: none
+    width: 100%
+  .columns.is-mobile > &.is-three-quarters
+    flex: none
+    width: 75%
+  .columns.is-mobile > &.is-two-thirds
+    flex: none
+    width: 66.6666%
+  .columns.is-mobile > &.is-half
+    flex: none
+    width: 50%
+  .columns.is-mobile > &.is-one-third
+    flex: none
+    width: 33.3333%
+  .columns.is-mobile > &.is-one-quarter
+    flex: none
+    width: 25%
+  .columns.is-mobile > &.is-offset-three-quarters
+    margin-left: 75%
+  .columns.is-mobile > &.is-offset-two-thirds
+    margin-left: 66.6666%
+  .columns.is-mobile > &.is-offset-half
+    margin-left: 50%
+  .columns.is-mobile > &.is-offset-one-third
+    margin-left: 33.3333%
+  .columns.is-mobile > &.is-offset-one-quarter
+    margin-left: 25%
+  @for $i from 1 through 12
+    .columns.is-mobile > &.is-#{$i}
+      flex: none
+      width: ($i / 12) * 100%
+    .columns.is-mobile > &.is-offset-#{$i}
+      margin-left: ($i / 12) * 100%
+  +mobile
+    &.is-narrow-mobile
+      flex: none
+    &.is-full-mobile
+      flex: none
+      width: 100%
+    &.is-three-quarters-mobile
+      flex: none
+      width: 75%
+    &.is-two-thirds-mobile
+      flex: none
+      width: 66.6666%
+    &.is-half-mobile
+      flex: none
+      width: 50%
+    &.is-one-third-mobile
+      flex: none
+      width: 33.3333%
+    &.is-one-quarter-mobile
+      flex: none
+      width: 25%
+    &.is-offset-three-quarters-mobile
+      margin-left: 75%
+    &.is-offset-two-thirds-mobile
+      margin-left: 66.6666%
+    &.is-offset-half-mobile
+      margin-left: 50%
+    &.is-offset-one-third-mobile
+      margin-left: 33.3333%
+    &.is-offset-one-quarter-mobile
+      margin-left: 25%
+    @for $i from 1 through 12
+      &.is-#{$i}-mobile
+        flex: none
+        width: ($i / 12) * 100%
+      &.is-offset-#{$i}-mobile
+        margin-left: ($i / 12) * 100%
+  +tablet
+    &.is-narrow,
+    &.is-narrow-tablet
+      flex: none
+    &.is-full,
+    &.is-full-tablet
+      flex: none
+      width: 100%
+    &.is-three-quarters,
+    &.is-three-quarters-tablet
+      flex: none
+      width: 75%
+    &.is-two-thirds,
+    &.is-two-thirds-tablet
+      flex: none
+      width: 66.6666%
+    &.is-half,
+    &.is-half-tablet
+      flex: none
+      width: 50%
+    &.is-one-third,
+    &.is-one-third-tablet
+      flex: none
+      width: 33.3333%
+    &.is-one-quarter,
+    &.is-one-quarter-tablet
+      flex: none
+      width: 25%
+    &.is-offset-three-quarters,
+    &.is-offset-three-quarters-tablet
+      margin-left: 75%
+    &.is-offset-two-thirds,
+    &.is-offset-two-thirds-tablet
+      margin-left: 66.6666%
+    &.is-offset-half,
+    &.is-offset-half-tablet
+      margin-left: 50%
+    &.is-offset-one-third,
+    &.is-offset-one-third-tablet
+      margin-left: 33.3333%
+    &.is-offset-one-quarter,
+    &.is-offset-one-quarter-tablet
+      margin-left: 25%
+    @for $i from 1 through 12
+      &.is-#{$i},
+      &.is-#{$i}-tablet
+        flex: none
+        width: ($i / 12) * 100%
+      &.is-offset-#{$i},
+      &.is-offset-#{$i}-tablet
+        margin-left: ($i / 12) * 100%
+  +desktop
+    &.is-narrow-desktop
+      flex: none
+    &.is-full-desktop
+      flex: none
+      width: 100%
+    &.is-three-quarters-desktop
+      flex: none
+      width: 75%
+    &.is-two-thirds-desktop
+      flex: none
+      width: 66.6666%
+    &.is-half-desktop
+      flex: none
+      width: 50%
+    &.is-one-third-desktop
+      flex: none
+      width: 33.3333%
+    &.is-one-quarter-desktop
+      flex: none
+      width: 25%
+    &.is-offset-three-quarters-desktop
+      margin-left: 75%
+    &.is-offset-two-thirds-desktop
+      margin-left: 66.6666%
+    &.is-offset-half-desktop
+      margin-left: 50%
+    &.is-offset-one-third-desktop
+      margin-left: 33.3333%
+    &.is-offset-one-quarter-desktop
+      margin-left: 25%
+    @for $i from 1 through 12
+      &.is-#{$i}-desktop
+        flex: none
+        width: ($i / 12) * 100%
+      &.is-offset-#{$i}-desktop
+        margin-left: ($i / 12) * 100%
+
+.columns
+  margin-left: -10px
+  margin-right: -10px
+  margin-top: -10px
+  &:last-child
+    margin-bottom: -10px
+  &:not(:last-child)
+    margin-bottom: 10px
+  // Modifiers
+  &.is-centered
+    justify-content: center
+  &.is-gapless
+    margin-left: 0
+    margin-right: 0
+    margin-top: 0
+    &:last-child
+      margin-bottom: 0
+    &:not(:last-child)
+      margin-bottom: 20px
+    & > .column
+      margin: 0
+      padding: 0
+  &.is-grid
+    // Responsiveness
+    +tablet
+      flex-wrap: wrap
+      & > .column
+        flex-basis: 33.3333%
+        max-width: 33.3333%
+        padding: 10px
+        width: 33.3333%
+        & + .column
+          margin-left: 0
+  &.is-mobile
+    display: flex
+  &.is-multiline
+    flex-wrap: wrap
+  &.is-vcentered
+    align-items: center
+  // Responsiveness
+  +tablet
+    &:not(.is-desktop)
+      display: flex
+  +desktop
+    // Modifiers
+    &.is-desktop
+      display: flex
+
+.tilefiejsoif
+  flex: 1
+  // Modifiers
+  &.is-parent
+    padding: 10px
+  // Responsiveness
+  +tablet
+    // Sizes
+    @for $i from 1 through 12
+      &.is-#{$i}
+        flex: none
+        width: ($i / 12) * 100%
+
+.tile
+  align-items: stretch
+  flex: 1
+  // 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%

sass/components/media.sass

@@ -0,0 +1,63 @@
+.media-number
+  background: $background
+  border-radius: 290486px
+  display: inline-block
+  font-size: $size-medium
+  height: 32px
+  line-height: 24px
+  min-width: 32px
+  padding: 4px 8px
+  text-align: center
+  vertical-align: top
+  // Responsiveness
+  +mobile
+    margin-bottom: 10px
+  +tablet
+    margin-right: 10px
+
+.media-left
+  margin-right: 10px
+
+.media-right
+  margin-left: 10px
+
+.media-content
+  flex: 1
+  text-align: left
+
+.media
+  align-items: flex-start
+  display: flex
+  text-align: left
+  .content:not(:last-child)
+    margin-bottom: 10px
+  .media
+    border-top: 1px solid rgba($border, 0.5)
+    display: flex
+    padding-top: 10px
+    .textarea
+      +control-small
+    .button
+      +button-small
+    .content:not(:last-child),
+    .control:not(:last-child)
+      margin-bottom: 5px
+    .media
+      font-size: 12px
+      padding-top: 5px
+      & + .media
+        margin-top: 5px
+  & + .media
+    border-top: 1px solid rgba($border, 0.5)
+    margin-top: 10px
+    padding-top: 10px
+  // Sizes
+  &.is-large
+    & + .media
+      margin-top: 20px
+      padding-top: 20px
+  // Responsiveness
+  +tablet
+    &.is-large
+      .media-number
+        margin-right: 20px

sass/components/menu.sass

@@ -0,0 +1,32 @@
+.menu-nav
+  a
+    display: block
+    padding: 5px 10px
+
+.menu-list
+  a
+    border-radius: 2px
+    color: $text
+    display: block
+    padding: 5px 10px
+    &:hover
+      background: $background
+      color: $link
+    // Modifiers
+    &.is-active
+      background: $link
+      color: $link-invert
+  li
+    ul
+      border-left: 1px solid $border
+      margin: 10px
+      padding-left: 10px
+
+.menu-label
+  color: $text-light
+  font-size: $size-small
+  letter-spacing: 1px
+  margin-bottom: 5px
+  text-transform: uppercase
+  &:not(:first-child)
+    margin-top: 20px

sass/components/modal.sass

@@ -0,0 +1,36 @@
+.modal-background
+  +overlay
+  background: rgba(black, 0.86)
+
+.modal-content
+  margin: 0 20px
+  max-height: calc(100vh - 160px)
+  overflow: auto
+  position: relative
+  width: 100%
+  // Responsiveness
+  +tablet
+    margin: 0 auto
+    max-height: calc(100vh - 40px)
+    width: 640px
+
+.modal-close
+  @extend .delete
+  background: none
+  height: 40px
+  position: fixed
+  right: 20px
+  top: 20px
+  width: 40px
+
+.modal
+  +overlay
+  align-items: center
+  display: none
+  justify-content: center
+  overflow: hidden
+  position: fixed
+  z-index: 1986
+  // Modifiers
+  &.is-active
+    display: flex

sass/components/navbar.sass

@@ -0,0 +1,49 @@
+.navbar-item
+  .title,
+  .subtitle
+    margin-bottom: 0
+  // Responsiveness
+  +mobile
+    &:not(:last-child)
+      margin-bottom: 10px
+
+.navbar-left,
+.navbar-right
+  .navbar-item
+    &:not(:last-child)
+      margin-right: 10px
+    // Modifiers
+    &.is-flexible
+      flex: 1
+
+.navbar-left
+  // Responsiveness
+  +mobile
+    & + .navbar-right
+      margin-top: 20px
+  +tablet
+    align-items: center
+    display: flex
+
+.navbar-right
+  // Responsiveness
+  +tablet
+    align-items: center
+    display: flex
+    justify-content: flex-end
+
+.navbar
+  @extend .block
+  code
+    border-radius: $radius
+  img
+    display: inline-block
+    vertical-align: top
+  // Responsiveness
+  +tablet
+    align-items: center
+    display: flex
+    justify-content: space-between
+    & > .navbar-item
+      &:not(.is-narrow)
+        flex: 1

sass/components/pagination.sass

@@ -0,0 +1,41 @@
+.pagination
+  align-items: center
+  display: flex
+  justify-content: center
+  text-align: center
+  a
+    @extend .button
+    display: block
+    min-width: 32px
+    padding: 3px 8px
+    // Modifiers
+    &.is-active
+      background: $link
+      border-color: $link
+      color: $link-invert
+  span
+    color: $text-light
+    display: block
+    margin: 0 4px
+  li
+    margin: 0 2px
+  ul
+    align-items: center
+    display: flex
+    flex: 1
+    justify-content: center
+  // Responsiveness
+  +mobile
+    flex-wrap: wrap
+    & > a
+      width: calc(50% - 5px)
+      &:not(:first-child)
+        margin-left: 10px
+    li
+      flex: 1
+    ul
+      margin-top: 10px
+  +tablet
+    & > a
+      &:not(:first-child)
+        order: 1

sass/components/panel.sass

@@ -0,0 +1,55 @@
+.panel-icon
+  +fa(14px, 16px)
+  color: $text-light
+  float: left
+  margin: 0 4px 0 -2px
+  .fa
+    font-size: inherit
+    line-height: inherit
+
+.panel-heading
+  background: $background
+  border-bottom: 1px solid $border
+  border-radius: 4px 4px 0 0
+  color: $text-strong
+  font-size: $size-medium
+  font-weight: 300
+  padding: 10px
+
+.panel-list
+  a
+    color: $text
+    &:hover
+      color: $link
+
+.panel-tabs
+  display: flex
+  font-size: $size-small
+  padding: 5px 10px 0
+  justify-content: center
+  a
+    border-bottom: 1px solid $border
+    margin-bottom: -1px
+    padding: 5px
+    // Modifiers
+    &.is-active
+      border-bottom-color: $link-active-border
+      color: $link-active
+  &:not(:last-child)
+    border-bottom: 1px solid $border
+
+.panel-block
+  color: $text-strong
+  display: block
+  line-height: 16px
+  padding: 10px
+  &:hover
+    background: $background
+  &:not(:last-child)
+    border-bottom: 1px solid $border
+
+.panel
+  border: 1px solid $border
+  border-radius: 5px
+  &:not(:last-child)
+    margin-bottom: 20px

sass/components/table.sass

@@ -0,0 +1,89 @@
+.table
+  background: white
+  color: $text-strong
+  margin-bottom: 20px
+  width: 100%
+  td,
+  th
+    border: 1px solid $border
+    border-width: 0 0 1px
+    padding: 8px 10px
+    vertical-align: top
+    // Modifiers
+    &.table-icon
+      padding: 5px
+      text-align: center
+      white-space: nowrap
+      width: 1%
+      .fa
+        +fa(21px, 24px)
+      &.table-link
+        padding: 0
+        & > a
+          padding: 5px
+    &.table-link
+      padding: 0
+      & > a
+        display: block
+        padding: 8px 10px
+        &:hover
+          background: $link
+          color: $link-invert
+    &.table-narrow
+      white-space: nowrap
+      width: 1%
+  th
+    color: $text-strong
+    text-align: left
+  tr
+    &:hover
+      background: $background
+      color: $text-strong
+  thead
+    td,
+    th
+      border-width: 0 0 2px
+      color: $text-light
+  tbody
+    tr
+      &:last-child
+        td,
+        th
+          border-bottom-width: 0
+  tfoot
+    td,
+    th
+      border-width: 2px 0 0
+      color: $text-light
+  // Modifiers
+  &.is-bordered
+    td,
+    th
+      border-width: 1px
+    tr
+      &:last-child
+        td,
+        th
+          border-bottom-width: 1px
+  &.is-narrow
+    td,
+    th
+      padding: 5px 10px
+      // Modifiers
+      &.table-icon
+        padding: 2px
+        &.table-link
+          padding: 0
+          & > a
+            padding: 2px
+      &.table-link
+        padding: 0
+        & > a
+          padding: 5px 10px
+  &.is-striped
+    tbody
+      tr
+        &:nth-child(2n)
+          background: $background
+          &:hover
+            background: $border

sass/components/tabs.sass

@@ -0,0 +1,104 @@
+.tabs
+  @extend .block
+  line-height: 24px
+  overflow: hidden
+  overflow-x: auto
+  white-space: nowrap
+  a
+    border-bottom: 1px solid $border
+    color: $text
+    display: block
+    margin-bottom: -1px
+    padding: 5px 0
+    vertical-align: top
+    &:hover
+      border-bottom-color: $text-strong
+      color: $text-strong
+  li
+    display: block
+    vertical-align: top
+    & + li
+      margin-left: 20px
+    // Modifiers
+    &.is-active
+      a
+        border-bottom-color: $link
+        color: $link
+  ul
+    border-bottom: 1px solid $border
+    display: flex
+  .fa
+    font-size: 14px
+    line-height: 20px
+    margin: 2px -2px
+    width: 20px
+  // Modifiers
+  &.is-boxed
+    a
+      border: 1px solid transparent
+      border-radius: $radius $radius 0 0
+      padding: 5px 15px
+      &:hover
+        background: $background
+        border-bottom-color: $border
+    li
+      & + li
+        margin-left: 5px
+      // Modifiers
+      &.is-active
+        a
+          background: white
+          border-color: $border
+          border-bottom-color: transparent
+    // Modifiers
+    &.is-centered
+      li
+        &,
+        & + li
+          margin: 0 2px
+  &.is-centered
+    a
+      padding: 5px 10px
+    li
+      & + li
+        margin-left: 0
+    ul
+      justify-content: center
+      text-align: center
+  &.is-fullwidth
+    li
+      flex: 1
+      & + li
+        margin-left: 0
+    ul
+      justify-content: center
+      text-align: center
+  &.is-right
+    ul
+      justify-content: flex-end
+  &.is-toggle
+    a
+      border: 1px solid $border
+      margin-bottom: 0
+      padding: 5px 10px
+      position: relative
+      &:hover
+        background: $background
+        border-color: $border-hover
+        z-index: 2
+    li
+      & + li
+        margin-left: -1px
+      &:first-child a
+        border-radius: $radius 0 0 $radius
+      &:last-child a
+        border-radius: 0 $radius $radius 0
+      // Modifiers
+      &.is-active
+        a
+          background: $primary
+          border-color: $primary
+          color: $primary-invert
+          z-index: 1
+    ul
+      border-bottom: none