bulma-rails 0.4.3 → 0.5.1

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

@@ -1,24 +1,29 @@
+$icon-dimensions: 1.5rem !default
+$icon-dimensions-small: 1rem !default
+$icon-dimensions-medium: 2rem !default
+$icon-dimensions-large: 3rem !default
+
 .icon
   align-items: center
   display: inline-flex
   justify-content: center
-  height: 1.5rem
-  width: 1.5rem
+  height: $icon-dimensions
+  width: $icon-dimensions
   .fa
     font-size: 21px
   // Sizes
   &.is-small
-    height: 1rem
-    width: 1rem
+    height: $icon-dimensions-small
+    width: $icon-dimensions-small
     .fa
       font-size: 14px
   &.is-medium
-    height: 2rem
-    width: 2rem
+    height: $icon-dimensions-medium
+    width: $icon-dimensions-medium
     .fa
       font-size: 28px
   &.is-large
-    height: 3rem
-    width: 3rem
+    height: $icon-dimensions-large
+    width: $icon-dimensions-large
     .fa
       font-size: 42px

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

@@ -1,4 +1,4 @@
-$dimensions: 16 24 32 48 64 96 128
+$dimensions: 16 24 32 48 64 96 128 !default
 
 .image
   display: block

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

@@ -1,12 +1,18 @@
+$notification-background-color: $background !default
+$notification-radius: $radius !default
+$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
+
 .notification
   +block
-  background-color: $background
-  border-radius: $radius
-  padding: 1.25rem 2.5rem 1.25rem 1.5rem
+  background-color: $notification-background-color
+  border-radius: $notification-radius
+  padding: $notification-padding
   position: relative
   a:not(.button)
     color: currentColor
     text-decoration: underline
+  strong
+    color: currentColor
   code,
   pre
     background: $white
@@ -19,7 +25,7 @@
   .title,
   .subtitle,
   .content
-    color: inherit
+    color: currentColor
   // Colors
   @each $name, $pair in $colors
     $color: nth($pair, 1)

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

@@ -1,24 +1,6 @@
 .block
   +block
 
-.container
-  position: relative
-  +desktop
-    margin: 0 auto
-    max-width: $desktop - 40px
-    width: $desktop - 40px
-    // Modifiers
-    &.is-fluid
-      margin: 0 20px
-      max-width: none
-      width: auto
-  +widescreen
-    max-width: $widescreen - 40px
-    width: $widescreen - 40px
-  +fullhd
-    max-width: $fullhd - 40px
-    width: $fullhd - 40px
-
 .delete
   +delete
 

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

@@ -1,3 +1,6 @@
+$progress-bar-background-color: $border !default
+$progress-value-background-color: $text !default
+
 .progress
   +block
   -moz-appearance: none
@@ -10,11 +13,11 @@
   padding: 0
   width: 100%
   &::-webkit-progress-bar
-    background-color: $border
+    background-color: $progress-bar-background-color
   &::-webkit-progress-value
-    background-color: $text
+    background-color: $progress-value-background-color
   &::-moz-progress-bar
-    background-color: $text
+    background-color: $progress-value-background-color
   // Colors
   @each $name, $pair in $colors
     $color: nth($pair, 1)

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

@@ -1,58 +1,72 @@
-$table:                           $grey-darker !default
-$table-background:                $white !default
-$table-border:                    $grey-lighter !default
+$table-color: $grey-darker !default
+$table-background-color: $white !default
 
-$table-head:                      $grey !default
+$table-cell-border: 1px solid $grey-lighter !default
+$table-cell-border-width: 0 0 1px !default
+$table-cell-padding: 0.5em 0.75em !default
+$table-cell-heading-color: $text-strong !default
 
-$table-row-hover-background:      $white-bis !default
+$table-head-cell-border-width: 0 0 2px !default
+$table-head-cell-color: $text-strong !default
+$table-foot-cell-border-width: 2px 0 0 !default
+$table-foot-cell-color: $text-strong !default
 
-$table-row-active-background:     $primary !default
-$table-row-active:                $primary-invert !default
+$table-row-hover-background-color: $white-bis !default
 
-$table-row-even-background:       $white-bis !default
-$table-row-even-hover-background: $white-ter !default
+$table-row-active-background-color: $primary !default
+$table-row-active-color: $primary-invert !default
+
+$table-striped-row-even-background-color: $white-bis !default
+$table-striped-row-even-hover-background-color: $white-ter !default
 
 .table
-  background-color: $table-background
-  color: $table
+  background-color: $table-background-color
+  color: $table-color
   margin-bottom: 1.5rem
-  width: 100%
   td,
   th
-    border: 1px solid $table-border
-    border-width: 0 0 1px
-    padding: 0.5em 0.75em
+    border: $table-cell-border
+    border-width: $table-cell-border-width
+    padding: $table-cell-padding
     vertical-align: top
+    // Colors
+    @each $name, $pair in $colors
+      $color: nth($pair, 1)
+      $color-invert: nth($pair, 2)
+      &.is-#{$name}
+        background-color: $color
+        border-color: $color
+        color: $color-invert
     // Modifiers
     &.is-narrow
       white-space: nowrap
       width: 1%
   th
-    color: $text-strong
+    color: $table-cell-heading-color
     text-align: left
   tr
     &:hover
-      background-color: $table-row-hover-background
+      background-color: $table-row-hover-background-color
     &.is-selected
-      background-color: $table-row-active-background
-      color: $table-row-active
+      background-color: $table-row-active-background-color
+      color: $table-row-active-color
       a,
       strong
         color: currentColor
       td,
       th
-        border-color: $table-row-active
+        border-color: $table-row-active-color
         color: currentColor
   thead
     td,
     th
-      border-width: 0 0 2px
-      color: $table-head
+      border-width: $table-head-cell-border-width
+      color: $table-head-cell-color
   tfoot
     td,
     th
-      border-width: 2px 0 0
-      color: $table-head
+      border-width: $table-foot-cell-border-width
+      color: $table-foot-cell-color
   tbody
     tr
       &:last-child
@@ -69,6 +83,8 @@ $table-row-even-hover-background: $white-ter !default
         td,
         th
           border-bottom-width: 1px
+  &.is-fullwidth
+    width: 100%
   &.is-narrow
     td,
     th
@@ -77,6 +93,6 @@ $table-row-even-hover-background: $white-ter !default
     tbody
       tr:not(.is-selected)
         &:nth-child(even)
-          background-color: $table-row-even-background
+          background-color: $table-striped-row-even-background-color
           &:hover
-            background-color: $table-row-even-hover-background
+            background-color: $table-striped-row-even-hover-background-color

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

@@ -1,15 +1,42 @@
+$tag-background-color: $background !default
+$tag-color: $text !default
+$tag-radius: $radius !default
+
+.tags
+  align-items: center
+  display: flex
+  flex-wrap: wrap
+  justify-content: flex-start
+  .tag
+    margin-bottom: 0.5rem
+    &:not(:last-child)
+      margin-right: 0.5rem
+  &:last-child
+    margin-bottom: -0.5rem
+  &:not(:last-child)
+    margin-bottom: 1rem
+  &.has-addons
+    .tag
+      margin-right: 0
+      &:not(:first-child)
+        border-bottom-left-radius: 0
+        border-top-left-radius: 0
+      &:not(:last-child)
+        border-bottom-right-radius: 0
+        border-top-right-radius: 0
+
 .tag
   align-items: center
-  background-color: $background
-  border-radius: 290486px
-  color: $text
+  background-color: $tag-background-color
+  border-radius: $tag-radius
+  color: $tag-color
   display: inline-flex
   font-size: $size-small
   height: 2em
   justify-content: center
   line-height: 1.5
-  padding-left: 0.875em
-  padding-right: 0.875em
+  padding-left: 0.75em
+  padding-right: 0.75em
   white-space: nowrap
   .delete
     margin-left: 0.25em
@@ -26,3 +53,36 @@
     font-size: $size-normal
   &.is-large
     font-size: $size-medium
+  // Modifiers
+  &.is-delete
+    margin-left: 1px
+    padding: 0
+    position: relative
+    width: 2em
+    &:before,
+    &:after
+      background-color: currentColor
+      content: ""
+      display: block
+      left: 50%
+      position: absolute
+      top: 50%
+      transform: translateX(-50%) translateY(-50%) rotate(45deg)
+      transform-origin: center center
+    &:before
+      height: 1px
+      width: 50%
+    &:after
+      height: 50%
+      width: 1px
+    &:hover,
+    &:focus
+      background-color: darken($tag-background-color, 5%)
+    &:active
+      background-color: darken($tag-background-color, 10%)
+  &.is-rounded
+    border-radius: 290486px
+
+a.tag
+  &:hover
+    text-decoration: underline

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

@@ -1,12 +1,14 @@
-$title:             $grey-darker !default
-$title-size:        $size-3 !default
-$title-weight:      $weight-light !default
-$title-weight-bold: $weight-semibold !default
+$title-color: $grey-darker !default
+$title-size: $size-3 !default
+$title-weight: $weight-semibold !default
+$title-strong-color: inherit !default
+$title-strong-weight: inherit !default
 
-$subtitle:          $grey-dark !default
-$subtitle-size:     $size-5 !default
-$subtitle-strong:   $grey-darker !default
-$subtitle-weight:   $weight-light !default
+$subtitle-color: $grey-dark !default
+$subtitle-size: $size-5 !default
+$subtitle-weight: $weight-normal !default
+$subtitle-strong-color: $grey-darker !default
+$subtitle-strong-weight: $weight-semibold !default
 
 .title,
 .subtitle
@@ -14,19 +16,18 @@ $subtitle-weight:   $weight-light !default
   word-break: break-word
   em,
   span
-    font-weight: $title-weight
-  strong
-    font-weight: $title-weight-bold
+    font-weight: inherit
   .tag
     vertical-align: middle
 
 .title
-  color: $title
+  color: $title-color
   font-size: $title-size
   font-weight: $title-weight
   line-height: 1.125
   strong
-    color: inherit
+    color: $title-strong-color
+    font-weight: $title-strong-weight
   & + .highlight
     margin-top: -0.75rem
   &:not(.is-spaced) + .subtitle
@@ -38,12 +39,13 @@ $subtitle-weight:   $weight-light !default
       font-size: $size
 
 .subtitle
-  color: $subtitle
+  color: $subtitle-color
   font-size: $subtitle-size
   font-weight: $subtitle-weight
   line-height: 1.25
   strong
-    color: $subtitle-strong
+    color: $subtitle-strong-color
+    font-weight: $subtitle-strong-weight
   &:not(.is-spaced) + .title
     margin-top: -1.5rem
   // Sizes

data/app/assets/stylesheets/sass/layout/footer.sass

@@ -1,3 +1,5 @@
+$footer-background-color: $background !default
+
 .footer
-  background-color: $background
+  background-color: $footer-background-color
   padding: 3rem 1.5rem 6rem

data/app/assets/stylesheets/sass/layout/hero.sass

@@ -1,53 +1,7 @@
-// Components
-
-.hero-video
-  +overlay
-  overflow: hidden
-  video
-    left: 50%
-    min-height: 100%
-    min-width: 100%
-    position: absolute
-    top: 50%
-    transform: translate3d(-50%, -50%, 0)
-  // Modifiers
-  &.is-transparent
-    opacity: 0.3
-  // Responsiveness
-  +mobile
-    display: none
-
-.hero-buttons
-  margin-top: 1.5rem
-  // Responsiveness
-  +mobile
-    .button
-      display: flex
-      &:not(:last-child)
-        margin-bottom: 0.75rem
-  +tablet
-    display: flex
-    justify-content: center
-    .button:not(:last-child)
-      margin-right: 1.5rem
-
-// Containers
-
-.hero-head,
-.hero-foot
-  flex-grow: 0
-  flex-shrink: 0
-
-.hero-body
-  flex-grow: 1
-  flex-shrink: 0
-  padding: 3rem 1.5rem
-
 // Main container
 
 .hero
   align-items: stretch
-  background-color: $white
   display: flex
   flex-direction: column
   justify-content: space-between
@@ -150,3 +104,48 @@
     min-height: 50vh
   &.is-fullheight
     min-height: 100vh
+
+// Components
+
+.hero-video
+  +overlay
+  overflow: hidden
+  video
+    left: 50%
+    min-height: 100%
+    min-width: 100%
+    position: absolute
+    top: 50%
+    transform: translate3d(-50%, -50%, 0)
+  // Modifiers
+  &.is-transparent
+    opacity: 0.3
+  // Responsiveness
+  +mobile
+    display: none
+
+.hero-buttons
+  margin-top: 1.5rem
+  // Responsiveness
+  +mobile
+    .button
+      display: flex
+      &:not(:last-child)
+        margin-bottom: 0.75rem
+  +tablet
+    display: flex
+    justify-content: center
+    .button:not(:last-child)
+      margin-right: 1.5rem
+
+// Containers
+
+.hero-head,
+.hero-foot
+  flex-grow: 0
+  flex-shrink: 0
+
+.hero-body
+  flex-grow: 1
+  flex-shrink: 0
+  padding: 3rem 1.5rem