bulma-rails 0.4.3 → 0.5.1

data/app/assets/stylesheets/sass/components/card.sass

@@ -1,14 +1,31 @@
+$card-color: $text !default
+$card-background-color: $white !default
+$card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+
+$card-header-color: $text-strong !default
+$card-header-shadow: 0 1px 2px rgba($black, 0.1) !default
+$card-header-weight: $weight-bold !default
+
+$card-footer-border-top: 1px solid $border !default
+
+.card
+  background-color: $card-background-color
+  box-shadow: $card-shadow
+  color: $card-color
+  max-width: 100%
+  position: relative
+
 .card-header
   align-items: stretch
-  box-shadow: 0 1px 2px rgba($black, 0.1)
+  box-shadow: $card-header-shadow
   display: flex
 
 .card-header-title
   align-items: center
-  color: $text-strong
+  color: $card-header-color
   display: flex
   flex-grow: 1
-  font-weight: $weight-bold
+  font-weight: $card-header-weight
   padding: 0.75rem
 
 .card-header-icon
@@ -26,7 +43,7 @@
   padding: 1.5rem
 
 .card-footer
-  border-top: 1px solid $border
+  border-top: $card-footer-border-top
   align-items: stretch
   display: flex
 
@@ -39,13 +56,10 @@
   justify-content: center
   padding: 0.75rem
   &:not(:last-child)
-    border-right: 1px solid $border
+    border-right: $card-footer-border-top
+
+// Combinations
 
 .card
-  background-color: $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
   .media:not(:last-child)
     margin-bottom: 0.75rem

data/app/assets/stylesheets/sass/components/dropdown.sass

@@ -0,0 +1,68 @@
+$dropdown-content-background-color: $white !default
+$dropdown-content-arrow: $link !default
+$dropdown-content-offset: 4px !default
+$dropdown-content-radius: $radius !default
+$dropdown-content-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+$dropdown-content-z: 20 !default
+
+$dropdown-item-color: $grey-dark !default
+$dropdown-item-hover-color: $black !default
+$dropdown-item-hover-background-color: $background !default
+$dropdown-item-active-color: $primary-invert !default
+$dropdown-item-active-background-color: $primary !default
+
+$dropdown-divider-background-color: $border !default
+
+.dropdown
+  display: inline-flex
+  position: relative
+  vertical-align: top
+  &.is-active,
+  &.is-hoverable:hover
+    .dropdown-menu
+      display: block
+  &.is-right
+    .dropdown-menu
+      left: auto
+      right: 0
+
+.dropdown-menu
+  display: none
+  left: 0
+  min-width: 12rem
+  padding-top: $dropdown-content-offset
+  position: absolute
+  top: 100%
+  z-index: $dropdown-content-z
+
+.dropdown-content
+  background-color: $dropdown-content-background-color
+  border-radius: $dropdown-content-radius
+  box-shadow: $dropdown-content-shadow
+  padding-bottom: 0.5rem
+  padding-top: 0.5rem
+
+.dropdown-item
+  color: $dropdown-item-color
+  display: block
+  font-size: 0.875rem
+  line-height: 1.5
+  padding: 0.375rem 1rem
+  position: relative
+
+a.dropdown-item
+  padding-right: 3rem
+  white-space: nowrap
+  &:hover
+    background-color: $dropdown-item-hover-background-color
+    color: $dropdown-item-hover-color
+  &.is-active
+    background-color: $dropdown-item-active-background-color
+    color: $dropdown-item-active-color
+
+.dropdown-divider
+  background-color: $dropdown-divider-background-color
+  border: none
+  display: block
+  height: 1px
+  margin: 0.5rem 0

data/app/assets/stylesheets/sass/components/level.sass

@@ -1,3 +1,32 @@
+.level
+  +block
+  align-items: center
+  justify-content: space-between
+  code
+    border-radius: $radius
+  img
+    display: inline-block
+    vertical-align: top
+  // Modifiers
+  &.is-mobile
+    display: flex
+    .level-left,
+    .level-right
+      display: flex
+    .level-left + .level-right
+      margin-top: 0
+    .level-item
+      &:not(:last-child)
+        margin-bottom: 0
+      &:not(.is-narrow)
+        flex-grow: 1
+  // Responsiveness
+  +tablet
+    display: flex
+    & > .level-item
+      &:not(.is-narrow)
+        flex-grow: 1
+
 .level-item
   align-items: center
   display: flex
@@ -41,32 +70,3 @@
   // Responsiveness
   +tablet
     display: flex
-
-.level
-  +block
-  align-items: center
-  justify-content: space-between
-  code
-    border-radius: $radius
-  img
-    display: inline-block
-    vertical-align: top
-  // Modifiers
-  &.is-mobile
-    display: flex
-    .level-left,
-    .level-right
-      display: flex
-    .level-left + .level-right
-      margin-top: 0
-    .level-item
-      &:not(:last-child)
-        margin-bottom: 0
-      &:not(.is-narrow)
-        flex-grow: 1
-  // Responsiveness
-  +tablet
-    display: flex
-    & > .level-item
-      &:not(.is-narrow)
-        flex-grow: 1

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

@@ -1,21 +1,3 @@
-.media-left,
-.media-right
-  flex-basis: auto
-  flex-grow: 0
-  flex-shrink: 0
-
-.media-left
-  margin-right: 1rem
-
-.media-right
-  margin-left: 1rem
-
-.media-content
-  flex-basis: auto
-  flex-grow: 1
-  flex-shrink: 1
-  text-align: left
-
 .media
   align-items: flex-start
   display: flex
@@ -42,3 +24,21 @@
     & + .media
       margin-top: 1.5rem
       padding-top: 1.5rem
+
+.media-left,
+.media-right
+  flex-basis: auto
+  flex-grow: 0
+  flex-shrink: 0
+
+.media-left
+  margin-right: 1rem
+
+.media-right
+  margin-left: 1rem
+
+.media-content
+  flex-basis: auto
+  flex-grow: 1
+  flex-shrink: 1
+  text-align: left

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

@@ -1,29 +1,47 @@
+$menu-item-color: $text !default
+$menu-item-radius: $radius-small !default
+$menu-item-hover-color: $text-strong !default
+$menu-item-hover-background-color: $background !default
+$menu-item-active-color: $link-invert !default
+$menu-item-active-background-color: $link !default
+
+$menu-list-border-left: 1px solid $border !default
+
+$menu-label-color: $text-light !default
+
 .menu
   font-size: $size-normal
+  // Sizes
+  &.is-small
+    font-size: $size-small
+  &.is-medium
+    font-size: $size-medium
+  &.is-large
+    font-size: $size-large
 
 .menu-list
   line-height: 1.25
   a
-    border-radius: $radius-small
-    color: $text
+    border-radius: $menu-item-radius
+    color: $menu-item-color
     display: block
     padding: 0.5em 0.75em
     &:hover
-      background-color: $background
-      color: $link
+      background-color: $menu-item-hover-background-color
+      color: $menu-item-hover-color
     // Modifiers
     &.is-active
-      background-color: $link
-      color: $link-invert
+      background-color: $menu-item-active-background-color
+      color: $menu-item-active-color
   li
     ul
-      border-left: 1px solid $border
+      border-left: $menu-list-border-left
       margin: 0.75em
       padding-left: 0.75em
 
 .menu-label
-  color: $text-light
-  font-size: 0.8em
+  color: $menu-label-color
+  font-size: 0.75em
   letter-spacing: 0.1em
   text-transform: uppercase
   &:not(:first-child)

data/app/assets/stylesheets/sass/components/message.sass

@@ -1,8 +1,31 @@
+$message-background-color: $background !default
+$message-radius: $radius !default
+
+$message-header-background-color: $text !default
+$message-header-color: $text-invert !default
+$message-header-padding: 0.5em 0.75em !default
+$message-header-radius: $radius !default
+
+$message-body-border: 1px solid $border !default
+$message-body-color: $text !default
+$message-body-padding: 1em 1.25em !default
+$message-body-radius: $radius !default
+
+$message-body-pre-background-color: $white !default
+$message-body-pre-code-background-color: transparent !default
+
 .message
   +block
-  background-color: $background
-  border-radius: $radius
+  background-color: $message-background-color
+  border-radius: $message-radius
   font-size: $size-normal
+  // Sizes
+  &.is-small
+    font-size: $size-small
+  &.is-medium
+    font-size: $size-medium
+  &.is-large
+    font-size: $size-large
   // Colors
   @each $name, $pair in $colors
     $color: nth($pair, 1)
@@ -22,18 +45,18 @@
 
 .message-header
   align-items: center
-  background-color: $text
-  border-radius: $radius $radius 0 0
-  color: $text-invert
+  background-color: $message-header-background-color
+  border-radius: $message-header-radius $message-header-radius 0 0
+  color: $message-header-color
   display: flex
   justify-content: space-between
   line-height: 1.25
-  padding: 0.5em 0.75em
+  padding: $message-header-padding
   position: relative
-  a,
+  a:not(.button),
   strong
-    color: inherit
-  a
+    color: currentColor
+  a:not(.button)
     text-decoration: underline
   .delete
     flex-grow: 0
@@ -45,17 +68,17 @@
     border-top: none
 
 .message-body
-  border: 1px solid $border
-  border-radius: $radius
-  color: $text
-  padding: 1em 1.25em
-  a,
+  border: $message-body-border
+  border-radius: $message-body-radius
+  color: $message-body-color
+  padding: $message-body-padding
+  a:not(.button),
   strong
-    color: inherit
-  a
+    color: currentColor
+  a:not(.button)
     text-decoration: underline
   code,
   pre
-    background: $white
+    background-color: $message-body-pre-background-color
   pre code
-    background: transparent
+    background-color: $message-body-pre-code-background-color

data/app/assets/stylesheets/sass/components/modal.sass

@@ -1,81 +1,111 @@
+$modal-z: 20 !default
+
+$modal-background-background-color: rgba($black, 0.86) !default
+
+$modal-content-width: 640px !default
+$modal-content-margin-mobile: 20px !default
+$modal-content-spacing-mobile: 160px !default
+$modal-content-spacing-tablet: 40px !default
+
+$modal-close-dimensions: 40px !default
+$modal-close-right: 20px !default
+$modal-close-top: 20px !default
+
+$modal-card-spacing: 40px !default
+
+$modal-card-head-background-color: $background !default
+$modal-card-head-border-bottom: 1px solid $border !default
+$modal-card-head-padding: 20px !default
+$modal-card-head-radius: $radius-large !default
+
+$modal-card-title-color: $text-strong !default
+$modal-card-title-line-height: 1 !default
+$modal-card-title-size: $size-4 !default
+
+$modal-card-foot-radius: $radius-large !default
+$modal-card-foot-border-top: 1px solid $border !default
+
+$modal-card-body-background-color: $white !default
+$modal-card-body-padding: 20px !default
+
+.modal
+  +overlay
+  align-items: center
+  display: none
+  justify-content: center
+  overflow: hidden
+  position: fixed
+  z-index: $modal-z
+  // Modifiers
+  &.is-active
+    display: flex
+
 .modal-background
   +overlay
-  background-color: rgba($black, 0.86)
+  background-color: $modal-background-background-color
 
 .modal-content,
 .modal-card
-  margin: 0 20px
-  max-height: calc(100vh - 160px)
+  margin: 0 $modal-content-margin-mobile
+  max-height: calc(100vh - #{$modal-content-spacing-mobile})
   overflow: auto
   position: relative
   width: 100%
   // Responsiveness
   +tablet
     margin: 0 auto
-    max-height: calc(100vh - 40px)
-    width: 640px
+    max-height: calc(100vh - #{$modal-content-spacing-tablet})
+    width: $modal-content-width
 
 .modal-close
   +delete
   background: none
-  height: 40px
+  height: $modal-close-dimensions
   position: fixed
-  right: 20px
-  top: 20px
-  width: 40px
+  right: $modal-close-right
+  top: $modal-close-top
+  width: $modal-close-dimensions
 
 .modal-card
   display: flex
   flex-direction: column
-  max-height: calc(100vh - 40px)
+  max-height: calc(100vh - #{$modal-card-spacing})
   overflow: hidden
 
 .modal-card-head,
 .modal-card-foot
   align-items: center
-  background-color: $background
+  background-color: $modal-card-head-background-color
   display: flex
   flex-shrink: 0
   justify-content: flex-start
-  padding: 20px
+  padding: $modal-card-head-padding
   position: relative
 
 .modal-card-head
-  border-bottom: 1px solid $border
-  border-top-left-radius: $radius-large
-  border-top-right-radius: $radius-large
+  border-bottom: $modal-card-head-border-bottom
+  border-top-left-radius: $modal-card-head-radius
+  border-top-right-radius: $modal-card-head-radius
 
 .modal-card-title
-  color: $text-strong
+  color: $modal-card-title-color
   flex-grow: 1
   flex-shrink: 0
-  font-size: $size-4
-  line-height: 1
+  font-size: $modal-card-title-size
+  line-height: $modal-card-title-line-height
 
 .modal-card-foot
-  border-bottom-left-radius: $radius-large
-  border-bottom-right-radius: $radius-large
-  border-top: 1px solid $border
+  border-bottom-left-radius: $modal-card-foot-radius
+  border-bottom-right-radius: $modal-card-foot-radius
+  border-top: $modal-card-foot-border-top
   .button
     &:not(:last-child)
       margin-right: 10px
 
 .modal-card-body
   +overflow-touch
-  background-color: $white
+  background-color: $modal-card-body-background-color
   flex-grow: 1
   flex-shrink: 1
   overflow: auto
-  padding: 20px
-
-.modal
-  +overlay
-  align-items: center
-  display: none
-  justify-content: center
-  overflow: hidden
-  position: fixed
-  z-index: 20
-  // Modifiers
-  &.is-active
-    display: flex
+  padding: $modal-card-body-padding