bulma-rails 0.2.3 → 0.3.0

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

@@ -1,4 +1,4 @@
-$nav-height: 50px !default
+$nav-height: 3.5rem !default
 
 // Components
 
@@ -13,20 +13,21 @@ $nav-height: 50px !default
   display: flex
   flex-grow: 0
   flex-shrink: 0
+  font-size: $size-normal
   justify-content: center
-  padding: 10px
+  padding: 0.5rem 0.75rem
   a
     flex-grow: 1
     flex-shrink: 0
   img
-    max-height: 24px
+    max-height: 1.75rem
   .button + .button
-    margin-left: 10px
+    margin-left: 0.75rem
   .tag
-    &:first-child
-      margin-right: 5px
-    &:last-child
-      margin-left: 5px
+    &:first-child:not(:last-child)
+      margin-right: 0.5rem
+    &:last-child:not(:first-child)
+      margin-left: 0.5rem
   // Responsiveness
   +mobile
     justify-content: flex-start
@@ -42,15 +43,21 @@ a.nav-item
   &.is-tab
     border-bottom: 1px solid transparent
     border-top: 1px solid transparent
-    padding-left: 12px
-    padding-right: 12px
+    padding-bottom: calc(0.5rem - 1px)
+    padding-left: 1rem
+    padding-right: 1rem
+    padding-top: calc(0.5rem - 1px)
     &:hover
-      border-bottom: 1px solid $link
-      border-top: 1px solid transparent
+      border-bottom-color: $primary
+      border-top-color: transparent
     &.is-active
-      border-bottom: 3px solid $link
-      border-top: 3px solid transparent
-      color: $link
+      border-bottom: 3px solid $primary
+      color: $primary
+      padding-bottom: calc(0.5rem - 3px)
+  // Responsiveness
+  +desktop
+    &.is-brand
+      padding-left: 0
 
 // Containers
 
@@ -66,18 +73,22 @@ a.nav-item
     position: absolute
     .nav-item
       border-top: 1px solid rgba($border, 0.5)
-      padding: 10px
+      padding: 0.75rem
     &.is-active
       display: block
   +tablet-only
-    padding-right: 20px
+    padding-right: 1.5rem
 
-.nav-left
+
+.nav-left,
+.nav-right
   align-items: stretch
-  display: flex
   flex-basis: 0
   flex-grow: 1
   flex-shrink: 0
+
+.nav-left
+  display: flex
   justify-content: flex-start
   overflow: hidden
   overflow-x: auto
@@ -86,19 +97,17 @@ a.nav-item
 .nav-center
   align-items: stretch
   display: flex
+  flex-grow: 0
+  flex-shrink: 0
   justify-content: center
   margin-left: auto
   margin-right: auto
 
 .nav-right
+  justify-content: flex-end
   // Responsiveness
   +tablet
-    align-items: stretch
     display: flex
-    flex-basis: 0
-    flex-grow: 1
-    flex-shrink: 0
-    justify-content: flex-end
 
 // Main container
 
@@ -115,26 +124,6 @@ a.nav-item
     display: flex
     min-height: $nav-height
     width: 100%
-    & > .nav-left
-      & > .nav-item:first-child:not(.is-tab)
-        padding-left: 0
-    & > .nav-right
-      & > .nav-item:last-child:not(.is-tab)
-        padding-right: 0
-  .container > &
-    & > .nav-left
-      & > .nav-item:first-child:not(.is-tab)
-        padding-left: 0
-    & > .nav-right
-      & > .nav-item:last-child:not(.is-tab)
-        padding-right: 0
   // Modifiers
   &.has-shadow
     box-shadow: 0 2px 3px rgba($black, 0.1)
-  // Responsiveness
-  +touch
-    & > .container,
-    .container > &
-      & > .nav-left
-        & > .nav-item.is-brand:first-child
-          padding-left: 20px

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

@@ -1,37 +1,133 @@
-.pagination
+$pagination: $grey-darker !default
+$pagination-background: $white !default
+$pagination-border: $grey-lighter !default
+
+$pagination-hover: $link-hover !default
+$pagination-hover-border: $link-hover-border !default
+
+$pagination-focus: $link-focus !default
+$pagination-focus-border: $link-focus-border !default
+
+$pagination-active: $link-active !default
+$pagination-active-border: $link-active-border !default
+
+$pagination-disabled: $grey !default
+$pagination-disabled-background: $grey-lighter !default
+$pagination-disabled-border: $grey-lighter !default
+
+$pagination-current: $link-invert !default
+$pagination-current-background: $link !default
+$pagination-current-border: $link !default
+
+$pagination-ellipsis: $grey-light !default
+
+$pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
+
+.pagination,
+.pagination-list
   align-items: center
   display: flex
   justify-content: center
   text-align: center
-  a
-    display: block
-    min-width: 32px
-    padding: 3px 8px
-  span
-    color: $text-light
-    display: block
-    margin: 0 4px
+
+.pagination-previous,
+.pagination-next,
+.pagination-link,
+.pagination-ellipsis
+  +control
+  +unselectable
+  font-size: 0.875rem
+  padding-left: 0.5em
+  padding-right: 0.5em
+  justify-content: center
+  text-align: center
+
+.pagination-previous,
+.pagination-next,
+.pagination-link
+  border: 1px solid $pagination-border
+  min-width: 2.5em
+  &:hover
+    border-color: $pagination-hover-border
+    color: $pagination-hover
+  &:focus
+    border-color: $pagination-focus-border
+  &:active
+    box-shadow: $pagination-shadow-inset
+  &[disabled],
+  &.is-disabled
+    background: $pagination-disabled-background
+    color: $pagination-disabled
+    opacity: 0.5
+    pointer-events: none
+
+.pagination-previous,
+.pagination-next
+  padding-left: 0.75em
+  padding-right: 0.75em
+
+.pagination-link
+  &.is-current
+    background-color: $pagination-current-background
+    border-color: $pagination-current-border
+    color: $pagination-current
+
+.pagination-ellipsis
+  color: $pagination-ellipsis
+  pointer-events: none
+
+.pagination-list
   li
-    margin: 0 2px
-  ul
-    align-items: center
-    display: flex
-    flex-grow: 1
-    flex-shrink: 0
-    justify-content: center
-  // Responsiveness
-  +mobile
+    &:not(:first-child)
+      margin-left: 0.375rem
+
++mobile
+  .pagination
     flex-wrap: wrap
-    & > a
-      width: calc(50% - 5px)
-      &:not(:first-child)
-        margin-left: 10px
+  .pagination-previous,
+  .pagination-next
+    flex-grow: 1
+    flex-shrink: 1
+    width: calc(50% - 0.375rem)
+  .pagination-next
+    margin-left: 0.75rem
+  .pagination-list
+    margin-top: 0.75rem
     li
       flex-grow: 1
-      flex-shrink: 0
-    ul
-      margin-top: 10px
-  +tablet
-    & > a
-      &:not(:first-child)
+      flex-shrink: 1
+
++tablet
+  .pagination-list
+    flex-grow: 1
+    flex-shrink: 1
+    justify-content: flex-start
+    order: 1
+  .pagination-previous,
+  .pagination-next
+    margin-left: 0.75rem
+  .pagination-previous
+    order: 2
+  .pagination-next
+    order: 3
+  .pagination
+    justify-content: space-between
+    &.is-centered
+      .pagination-previous
+        margin-left: 0
+        order: 1
+      .pagination-list
+        justify-content: center
+        order: 2
+      .pagination-next
+        order: 3
+    &.is-right
+      .pagination-previous
+        margin-left: 0
         order: 1
+      .pagination-next
+        order: 2
+        margin-right: 0.75rem
+      .pagination-list
+        justify-content: flex-end
+        order: 3

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

@@ -1,57 +1,74 @@
-.panel-icon
-  +fa(14px, 16px)
-  color: $text-light
-  float: left
-  margin: 0 4px 0 -2px
-  .fa
-    font-size: inherit
-    line-height: inherit
+.panel
+  font-size: $size-normal
+  &:not(:last-child)
+    margin-bottom: 1.5rem
+
+.panel-heading,
+.panel-tabs,
+.panel-block
+  border-bottom: 1px solid $border
+  border-left: 1px solid $border
+  border-right: 1px solid $border
+  &:first-child
+    border-top: 1px solid $border
 
 .panel-heading
   background-color: $background
-  border-bottom: 1px solid $border
-  border-radius: 4px 4px 0 0
+  border-radius: $radius $radius 0 0
   color: $text-strong
-  font-size: $size-medium
-  font-weight: 300
-  padding: 10px
-
-.panel-list
-  a
-    color: $text
-    &:hover
-      color: $link
+  font-size: 1.25em
+  font-weight: $weight-light
+  line-height: 1.25
+  padding: 0.5em 0.75em
 
 .panel-tabs
+  align-items: flex-end
   display: flex
-  font-size: $size-small
-  padding: 5px 10px 0
+  font-size: 0.875em
   justify-content: center
   a
     border-bottom: 1px solid $border
     margin-bottom: -1px
-    padding: 5px
+    padding: 0.5em
     // Modifiers
     &.is-active
       border-bottom-color: $link-active-border
       color: $link-active
-  &:not(:last-child)
-    border-bottom: 1px solid $border
+
+.panel-list
+  a
+    color: $text
+    &:hover
+      color: $link
 
 .panel-block
+  align-items: center
   color: $text-strong
-  display: block
-  line-height: 16px
-  padding: 10px
-  &:not(:last-child)
-    border-bottom: 1px solid $border
+  display: flex
+  justify-content: flex-start
+  padding: 0.5em 0.75em
+  input[type="checkbox"]
+    margin-right: 0.75em
+  & > .control
+    flex-grow: 1
+    flex-shrink: 1
+    width: 100%
+  &.is-active
+    border-left-color: $link
+    color: $link-active
+    .panel-icon
+      color: $link
 
-a.panel-block
+a.panel-block,
+label.panel-block
+  cursor: pointer
   &:hover
     background-color: $background
 
-.panel
-  border: 1px solid $border
-  border-radius: $radius-large
-  &:not(:last-child)
-    margin-bottom: 20px
+.panel-icon
+  +fa(14px, 1em)
+  color: $text-light
+  margin-right: 0.75em
+  .fa
+    font-size: inherit
+    line-height: inherit

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

@@ -3,8 +3,8 @@
   +unselectable
   align-items: stretch
   display: flex
+  font-size: $size-normal
   justify-content: space-between
-  line-height: 24px
   overflow: hidden
   overflow-x: auto
   white-space: nowrap
@@ -15,7 +15,7 @@
     display: flex
     justify-content: center
     margin-bottom: -1px
-    padding: 6px 12px
+    padding: 0.5em 1em
     vertical-align: top
     &:hover
       border-bottom-color: $text-strong
@@ -24,8 +24,8 @@
     display: block
     &.is-active
       a
-        border-bottom-color: $link
-        color: $link
+        border-bottom-color: $primary
+        color: $primary
   ul
     align-items: center
     border-bottom: 1px solid $border
@@ -34,20 +34,20 @@
     flex-shrink: 0
     justify-content: flex-start
     &.is-left
-      padding-right: 10px
+      padding-right: 0.75em
     &.is-center
       flex: none
       justify-content: center
-      padding-left: 10px
-      padding-right: 10px
+      padding-left: 0.75em
+      padding-right: 0.75em
     &.is-right
       justify-content: flex-end
-      padding-left: 10px
+      padding-left: 0.75em
   .icon
     &:first-child
-      margin-right: 8px
+      margin-right: 0.5em
     &:last-child
-      margin-left: 8px
+      margin-left: 0.5em
   // Alignment
   &.is-centered
     ul
@@ -60,8 +60,6 @@
     a
       border: 1px solid transparent
       border-radius: $radius $radius 0 0
-      padding-bottom: 5px
-      padding-top: 5px
       &:hover
         background-color: $background
         border-bottom-color: $border
@@ -79,8 +77,6 @@
     a
       border: 1px solid $border
       margin-bottom: 0
-      padding-bottom: 5px
-      padding-top: 5px
       position: relative
       &:hover
         background-color: $background
@@ -104,28 +100,7 @@
   // Sizes
   &.is-small
     font-size: $size-small
-    a
-      padding: 2px 8px
-    &.is-boxed,
-    &.is-toggle
-      a
-        padding-bottom: 1px
-        padding-top: 1px
   &.is-medium
     font-size: $size-medium
-    a
-      padding: 10px 16px
-    &.is-boxed,
-    &.is-toggle
-      a
-        padding-bottom: 9px
-        padding-top: 9px
   &.is-large
     font-size: $size-large
-    a
-      padding: 14px 20px
-    &.is-boxed,
-    &.is-toggle
-      a
-        padding-bottom: 13px
-        padding-top: 13px