bulma-rails 0.0.4.1

data/app/assets/stylesheets/bulma/components/media.sass

@@ -0,0 +1,69 @@
+.media-image
+  &.is-32
+    width: 32px
+  &.is-40
+    width: 40px
+  +mobile
+    margin-bottom: 10px
+  +tablet
+    margin-right: 10px
+    width: 60px
+
+.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
+  +mobile
+    margin-bottom: 10px
+  +tablet
+    margin-right: 10px
+
+.media-content
+  flex: 1
+  .textarea
+    min-height: 60px
+
+.media
+  align-items: flex-start
+  .content:not(:last-child)
+    margin-bottom: 10px
+  .media
+    border-top: 1px solid rgba($border, 0.5)
+    display: flex
+    padding-top: 10px
+    .media-image
+      margin-bottom: 0
+      margin-right: 10px
+      width: 40px
+    .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
+  &.is-large
+    & + .media
+      margin-top: 20px
+      padding-top: 20px
+  +tablet
+    display: flex
+    &.is-large
+      .media-number
+        margin-right: 20px

data/app/assets/stylesheets/bulma/components/menu.sass

@@ -0,0 +1,25 @@
+.menu
+  border: 1px solid $border
+
+.menu-heading
+  @extend .heading
+  color: $text-strong
+
+.menu-list
+  a
+    color: $text
+    &:hover
+      color: $link
+
+.menu-block
+  .checkbox
+    border: 1px solid transparent
+    border-radius: $radius
+    display: block
+    padding: 8px
+    padding-left: 32px
+    input
+      left: 9px
+      top: 9px
+    &:hover
+      border-color: $link

data/app/assets/stylesheets/bulma/components/navbar.sass

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

data/app/assets/stylesheets/bulma/components/table.sass

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

data/app/assets/stylesheets/bulma/components/tabs.sass

@@ -0,0 +1,101 @@
+.tabs
+  line-height: 24px
+  overflow: hidden
+  overflow-x: auto
+  white-space: nowrap
+  &:not(:last-child)
+    margin-bottom: 20px
+  .fa
+    font-size: 14px
+    line-height: 20px
+    margin: 2px -2px
+    width: 20px
+  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
+    &.is-active
+      a
+        border-bottom-color: $link
+        color: $link
+  ul
+    border-bottom: 1px solid $border
+    display: flex
+  &.is-centered
+    a
+      padding: 5px 10px
+    li
+      & + li
+        margin-left: 0
+    ul
+      justify-content: center
+      text-align: center
+  &.is-right
+    ul
+      justify-content: flex-end
+  &.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
+      &.is-active
+        a
+          background: white
+          border-color: $border
+          border-bottom-color: transparent
+    &.is-centered
+      li
+        &,
+        & + li
+          margin: 0 2px
+  &.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
+      &.is-active
+        a
+          background: $primary
+          border-color: $primary
+          color: $primary-invert
+          z-index: 1
+    ul
+      border-bottom: none
+  &.is-fullwidth
+    +tablet
+      li
+        flex: 1
+        & + li
+          margin-left: 0
+      ul
+        justify-content: center
+        text-align: center

data/app/assets/stylesheets/bulma/config/generated-variables.sass

@@ -0,0 +1,74 @@
+// Colors
+
+$primary-invert: findColorInvert($primary)
+$info: $blue
+$info-invert: findColorInvert($info)
+$success: $green
+$success-invert: findColorInvert($success)
+$warning: $yellow
+$warning-invert: findColorInvert($warning)
+$danger: $red
+$danger-invert: findColorInvert($danger)
+
+$colors: (primary: ($primary, $primary-invert), info: ($info, $info-invert), success: ($success, $success-invert), warning: ($warning, $warning-invert), danger: ($danger, $danger-invert))
+
+$body-background: $grey-lighter
+
+$background: $grey-lighter
+
+$border: $grey-light
+$border-hover: $grey
+
+// Text
+
+$text: $grey-dark
+$text-invert: findColorInvert($text)
+$text-light: $grey
+$text-strong: $grey-darker
+
+// Code
+
+$code: $info
+$code-background: $background
+
+$pre: $text
+$pre-background: $background
+
+// Links
+
+$link: $primary
+$link-invert: $primary-invert
+$link-visited: $purple
+
+$link-hover: $grey-darker
+$link-hover-background: $grey-lighter
+$link-hover-border: $grey-darker
+
+$link-active: $grey-darker
+$link-active-border: $grey-darker
+
+// Controls
+
+$control: $text-strong
+$control-background: $text-invert
+$control-border: $border
+
+$control-hover: $link-hover
+$control-hover-border: $border-hover
+
+$control-active: $link
+$control-active-background: $link
+$control-active-background-invert: $link-invert
+$control-active-border: $link
+
+// Typography
+
+$family-primary: $family-sans-serif
+
+$size-small: $size-7
+$size-normal: $size-6
+$size-medium: $size-5
+$size-large: $size-3
+$size-huge: $size-1
+
+$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6

data/app/assets/stylesheets/bulma/config/variables.sass

@@ -0,0 +1,41 @@
+// Colors
+
+$grey-darker: #222324
+$grey-dark: #69707a
+$grey: #aeb1b5
+$grey-light: #d3d6db
+$grey-lighter: #ebeff5
+$grey-lighter: #f5f7fa
+
+$blue: #42afe3
+$green: #97cd76
+$orange: #f68b39
+$purple: #847bb9
+$red: #ed6c63
+$turquoise: #1fc8db
+$yellow: #fce473
+
+$primary: $turquoise
+
+// Typography
+
+$family-sans-serif: "Helvetica Neue", "Helvetica", "Arial", sans-serif
+
+$size-1: 48px
+$size-2: 40px
+$size-3: 28px
+$size-4: 24px
+$size-5: 18px
+$size-6: 14px
+
+$size-7: 11px
+
+// Dimensions
+
+$header-height: 50px
+
+// Miscellaneous
+
+$easing: ease-out
+$radius: 3px
+$speed: 86ms

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

@@ -0,0 +1,100 @@
+=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
+  padding: 3px 10px
+  white-space: nowrap
+  strong
+    color: inherit
+  small
+    display: block
+    font-size: $size-small
+    line-height: 1
+    margin-top: 5px
+  .fa
+    line-height: 24px
+    margin: 0 -2px
+    width: 24px
+  &:hover
+    color: $control-hover
+  &:active
+    box-shadow: inset 0 1px 2px rgba(black, 0.2)
+  @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-outlined
+        background: transparent
+        border-color: $color
+        color: $color
+        &:hover,
+        &:focus
+          border-color: darken($color, 10%)
+          color: darken($color, 10%)
+      &.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)
+      &.is-loading:after
+        border-color: transparent transparent $color-invert $color-invert !important
+  &.is-small
+    +button-small
+  &.is-medium
+    +button-medium
+  &.is-large
+    +button-large
+  &.is-fullwidth
+    display: block
+    width: 100%
+  &.is-flexible
+    height: auto
+  &.is-loading
+    color: transparent
+    pointer-events: none
+    &:after
+      @extend .loader
+      +center(16px)
+      position: absolute !important
+  &.is-disabled,
+  &[disabled]
+    opacity: 0.5
+    pointer-events: none
+  +tablet
+    small
+      color: $text
+      left: 0
+      margin-top: 10px
+      position: absolute
+      top: 100%
+      width: 100%
+