bulma-rails 0.2.3 → 0.3.0

data/app/assets/stylesheets/sass/elements/icon.sass

@@ -0,0 +1,12 @@
+.icon
+  +fa(21px, 1.5rem)
+  .fa
+    font-size: inherit
+    line-height: inherit
+  // Sizes
+  &.is-small
+    +fa(14px, 1rem)
+  &.is-medium
+    +fa(28px, 2rem)
+  &.is-large
+    +fa(42px, 3rem)

data/app/assets/stylesheets/sass/elements/notification.sass

@@ -1,14 +1,18 @@
 .notification
   +block
-  +clearfix
   background-color: $background
   border-radius: $radius
-  padding: 16px 20px
+  padding: 1.25rem 2.5rem 1.25rem 1.5rem
   position: relative
+  code,
+  pre
+    background: $white
+  pre code
+    background: transparent
   .delete
-    border-radius: 0 $radius
-    float: right
-    margin: -16px -20px 0 20px
+    position: absolute
+    right: 0.5em
+    top: 0.5em
   .title,
   .subtitle,
   .content

data/app/assets/stylesheets/sass/elements/other.sass

@@ -5,13 +5,13 @@
   position: relative
   +desktop
     margin: 0 auto
-    max-width: 960px
+    max-width: $desktop - 40px // 960px
     // Modifiers
     &.is-fluid
       margin: 0 20px
       max-width: none
   +widescreen
-    max-width: 1200px
+    max-width: $widescreen - 40px // 1152px
 
 .delete
   +delete
@@ -21,19 +21,6 @@
   text-align: center
   vertical-align: top
 
-.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)
-
 .heading
   display: block
   font-size: 11px
@@ -43,8 +30,7 @@
 
 .highlight
   +block
-  font-size: 12px
-  font-weight: normal
+  font-weight: $weight-normal
   max-width: 100%
   overflow: hidden
   padding: 0
@@ -56,53 +42,15 @@
   +loader
 
 .number
-  background-color: $background
-  border-radius: 290486px
-  display: inline-block
-  font-size: $size-medium
-  vertical-align: top
-
-.tag
   align-items: center
   background-color: $background
   border-radius: 290486px
-  color: $text
   display: inline-flex
-  font-size: 12px
-  height: 24px
+  font-size: $size-medium
+  height: 2em
   justify-content: center
-  line-height: 16px
-  padding-left: 10px
-  padding-right: 10px
+  margin-right: 1.5rem
+  min-width: 2.5em
+  padding: 0.25rem 0.5rem
+  text-align: center
   vertical-align: top
-  white-space: nowrap
-  .delete
-    margin-left: 4px
-    margin-right: -6px
-  // Colors
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    $color-invert: nth($pair, 2)
-    &.is-#{$name}
-      background-color: $color
-      color: $color-invert
-  // Sizes
-  &.is-small
-    font-size: $size-small
-    height: 20px
-    padding-left: 8px
-    padding-right: 8px
-  &.is-medium
-    font-size: $size-normal
-    height: 32px
-    padding-left: 14px
-    padding-right: 14px
-  &.is-large
-    font-size: $size-5
-    height: 40px
-    line-height: 24px
-    padding-left: 18px
-    padding-right: 18px
-    .delete
-      margin-left: 4px
-      margin-right: -8px

data/app/assets/stylesheets/sass/elements/progress.sass

@@ -5,7 +5,7 @@
   border: none
   border-radius: 290486px
   display: block
-  height: 12px
+  height: $size-normal
   overflow: hidden
   padding: 0
   width: 100%
@@ -25,8 +25,8 @@
         background-color: $color
   // Sizes
   &.is-small
-    height: 8px
+    height: $size-small
   &.is-medium
-    height: 16px
+    height: $size-medium
   &.is-large
-    height: 20px
+    height: $size-large

data/app/assets/stylesheets/sass/elements/table.sass

@@ -1,43 +1,25 @@
-$table: $text-strong !default
-$table-background: $white !default
-$table-border: $border !default
+$table:                           $grey-darker !default
+$table-background:                $white !default
+$table-border:                    $grey-lighter !default
 
-$table-head: $text-light !default
+$table-head:                      $grey !default
 
-$table-row-hover-background: $white-ter !default
-$table-row-even-background: $white-bis !default
+$table-row-hover-background:      $white-bis !default
+$table-row-even-background:       $white-bis !default
+$table-row-even-hover-background: $white-ter !default
 
 .table
   background-color: $table-background
   color: $table
-  margin-bottom: 20px
+  margin-bottom: 1.5rem
   width: 100%
   td,
   th
     border: 1px solid $table-border
     border-width: 0 0 1px
-    padding: 8px 10px
+    padding: 0.5em 0.75em
     vertical-align: top
     // Modifiers
-    &.is-icon
-      padding: 5px
-      text-align: center
-      white-space: nowrap
-      width: 1%
-      .fa
-        +fa(21px, 24px)
-      &.is-link
-        padding: 0
-        & > a
-          padding: 5px
-    &.is-link
-      padding: 0
-      & > a
-        display: block
-        padding: 8px 10px
-        &:hover
-          background-color: $link
-          color: $link-invert
     &.is-narrow
       white-space: nowrap
       width: 1%
@@ -52,17 +34,17 @@ $table-row-even-background: $white-bis !default
     th
       border-width: 0 0 2px
       color: $table-head
+  tfoot
+    td,
+    th
+      border-width: 2px 0 0
+      color: $table-head
   tbody
     tr
       &:last-child
         td,
         th
           border-bottom-width: 0
-  tfoot
-    td,
-    th
-      border-width: 2px 0 0
-      color: $table-head
   // Modifiers
   &.is-bordered
     td,
@@ -76,22 +58,11 @@ $table-row-even-background: $white-bis !default
   &.is-narrow
     td,
     th
-      padding: 5px 10px
-      // Modifiers
-      &.is-icon
-        padding: 2px
-        &.is-link
-          padding: 0
-          & > a
-            padding: 2px
-      &.is-link
-        padding: 0
-        & > a
-          padding: 5px 10px
+      padding: 0.25em 0.5em
   &.is-striped
     tbody
       tr
         &:nth-child(even)
           background-color: $table-row-even-background
           &:hover
-            background-color: $table-row-hover-background
+            background-color: $table-row-even-hover-background

data/app/assets/stylesheets/sass/elements/tag.sass

@@ -0,0 +1,29 @@
+.tag
+  align-items: center
+  background-color: $background
+  border-radius: 290486px
+  color: $text
+  display: inline-flex
+  font-size: $size-small
+  height: 2em
+  justify-content: center
+  line-height: 1.5
+  padding-left: 0.875em
+  padding-right: 0.875em
+  vertical-align: top
+  white-space: nowrap
+  .delete
+    margin-left: 0.25em
+    margin-right: -0.5em
+  // Colors
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}
+      background-color: $color
+      color: $color-invert
+  // Sizes
+  &.is-medium
+    font-size: $size-normal
+  &.is-large
+    font-size: $size-medium

data/app/assets/stylesheets/sass/elements/title.sass

@@ -1,72 +1,53 @@
+$title:             $grey-darker !default
+$title-size:        $size-3 !default
+$title-weight:      $weight-light !default
+$title-weight-bold: $weight-semibold !default
+
+$subtitle:          $grey-dark !default
+$subtitle-size:     $size-5 !default
+$subtitle-strong:   $grey-darker !default
+$subtitle-weight:   $weight-light !default
+
 .title,
 .subtitle
   +block
-  font-weight: $weight-title-normal
   word-break: break-word
   em,
   span
-    font-weight: $weight-title-normal
-  a
-    &:hover
-      border-bottom: 1px solid
+    font-weight: $title-weight
   strong
-    font-weight: $weight-title-bold
+    font-weight: $title-weight-bold
   .tag
-    vertical-align: bottom
+    vertical-align: middle
 
 .title
-  color: $text-strong
-  font-size: $size-large
-  line-height: 1
-  code
-    display: inline-block
-    font-size: $size-large
+  color: $title
+  font-size: $title-size
+  font-weight: $title-weight
+  line-height: 1.125
   strong
     color: inherit
   & + .highlight
-    margin-top: -10px
+    margin-top: -0.75rem
   & + .subtitle
-    margin-top: -10px
+    margin-top: -1.25rem
   // 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
+  color: $subtitle
+  font-size: $subtitle-size
+  font-weight: $subtitle-weight
+  line-height: 1.25
   strong
-    color: $text-strong
+    color: $subtitle-strong
   & + .title
-    margin-top: -20px
+    margin-top: -1.5rem
   // 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

data/app/assets/stylesheets/sass/grid/columns.sass

@@ -3,7 +3,7 @@
   flex-basis: 0
   flex-grow: 1
   flex-shrink: 1
-  padding: 10px
+  padding: 0.75rem
   .columns.is-mobile > &.is-narrow
     flex: none
   .columns.is-mobile > &.is-full
@@ -204,13 +204,13 @@
         margin-left: ($i / 12) * 100%
 
 .columns
-  margin-left: -10px
-  margin-right: -10px
-  margin-top: -10px
+  margin-left: -0.75rem
+  margin-right: -0.75rem
+  margin-top: -0.75rem
   &:last-child
-    margin-bottom: -10px
+    margin-bottom: -0.75rem
   &:not(:last-child)
-    margin-bottom: 10px
+    margin-bottom: 0.75rem
   // Modifiers
   &.is-centered
     justify-content: center
@@ -221,7 +221,7 @@
     &:last-child
       margin-bottom: 0
     &:not(:last-child)
-      margin-bottom: 20px
+      margin-bottom: 1.5rem
     & > .column
       margin: 0
       padding: 0
@@ -231,7 +231,7 @@
       flex-wrap: wrap
       & > .column
         max-width: 33.3333%
-        padding: 10px
+        padding: 0.75rem
         width: 33.3333%
         & + .column
           margin-left: 0

data/app/assets/stylesheets/sass/grid/tiles.sass

@@ -1,27 +1,27 @@
 .tile
   align-items: stretch
   display: block
-  flex-basis: auto
+  flex-basis: 0
   flex-grow: 1
   flex-shrink: 1
   min-height: min-content
   // Modifiers
   &.is-ancestor
-    margin-left: -10px
-    margin-right: -10px
-    margin-top: -10px
+    margin-left: -0.75rem
+    margin-right: -0.75rem
+    margin-top: -0.75rem
     &:last-child
-      margin-bottom: -10px
+      margin-bottom: -0.75rem
     &:not(:last-child)
-      margin-bottom: 10px
+      margin-bottom: 0.75rem
   &.is-child
     margin: 0 !important
   &.is-parent
-    padding: 10px
+    padding: 0.75rem
   &.is-vertical
     flex-direction: column
     & > .tile.is-child:not(:last-child)
-      margin-bottom: 20px !important
+      margin-bottom: 1.5rem !important
   // Responsiveness
   +tablet
     &:not(.is-child)