Add panel, Rename menu

CHANGELOG.md

@@ -0,0 +1,3 @@
+## 0.0.17
+
+* `.control.is-inline` for horizontal forms

bulma/components/card.sass

@@ -1,3 +1,21 @@
+.card-header
+  align-items: stretch
+  box-shadow: 0 1px 2px rgba(black, 0.1)
+  display: flex
+  min-height: 36px
+
+.card-header-title
+  align-items: center
+  color: $text-strong
+  display: flex
+  flex: 1
+  font-weight: bold
+  padding: 0 10px
+
+.card-header-icon
+  +fa(14px, 36px)
+  cursor: pointer
+
 .card-image
   display: block
   position: relative
@@ -9,7 +27,10 @@
 
 .card-footer
   background: $background
-  display: block
+  align-items: center
+  display: flex
+  font-size: $size-small
+  justify-content: center
   padding: 10px
 
 .card

bulma/components/components.sass

@@ -7,4 +7,12 @@
 @import "tabs"
 @import "media"
 @import "menu"
+@import "panel"
 @import "modal"
+
+.box
+  @extend .block
+  background: white
+  border-radius: 5px
+  box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
+  padding: 20px

bulma/components/menu.sass

@@ -1,76 +1,31 @@
-.menu-icon
+.menu-nav
-  +fa(14px, 16px)
+  a
-  color: $text-light
+    display: block
-  float: left
+    padding: 5px 10px
-  margin: 0 4px 0 -2px
-  .fa
-    font-size: inherit
-    line-height: inherit
-
-.menu-heading
-  background: $background
-  border-bottom: 1px solid $border
-  border-radius: 4px 4px 0 0
-  color: $text-strong
-  font-size: $size-medium
-  font-weight: 300
-  padding: 10px
 
 .menu-list
   a
+    border-radius: 2px
     color: $text
-    &:hover
-      color: $link
-
-.menu-tabs
-  display: flex
-  font-size: $size-small
-  padding: 5px 10px 0
-  justify-content: center
-  &:not(:last-child)
-    border-bottom: 1px solid $border
-  a
-    border-bottom: 1px solid $border
-    margin-bottom: -1px
-    padding: 5px
-    &.is-active
-      border-bottom-color: $link-active-border
-      color: $link-active
-
-.menu-block
-  color: $text-strong
     display: block
-  line-height: 16px
+    padding: 4px 8px
-  padding: 10px
-  &:not(:last-child)
-    border-bottom: 1px solid $border
-  .checkbox
-    border: 1px solid transparent
-    border-radius: $radius
-    display: block
-    padding: 8px
-    padding-left: 32px
-    input
-      left: 9px
-      top: 9px
     &:hover
-      border-color: $link
-
-a.menu-block:hover
       background: $background
+      color: $link
+    &.is-active
+      background: $link
+      color: $link-invert
+  li ul
+    border-left: 1px solid $border
+    margin: 8px
+    padding-left: 8px
 
-.menu-checkbox
+.menu-label
-  @extend .checkbox
+  color: $text-light
-  display: block
+  font-size: $size-small
-  padding: 9px 10px 9px 30px
+  letter-spacing: 1px
-  &:not(:last-child)
+  margin-bottom: 5px
-    border-bottom: 1px solid $border
+  padding-left: 8px
-  input
+  text-transform: uppercase
-    left: 8px
+  &:not(:first-child)
-    top: 10px
+    margin-top: 20px
-
-.menu
-  border: 1px solid $border
-  border-radius: 5px
-  &:not(:last-child)
-    margin-bottom: 20px

bulma/components/panel.sass

@@ -0,0 +1,76 @@
+.panel-icon
+  +fa(14px, 16px)
+  color: $text-light
+  float: left
+  margin: 0 4px 0 -2px
+  .fa
+    font-size: inherit
+    line-height: inherit
+
+.panel-heading
+  background: $background
+  border-bottom: 1px solid $border
+  border-radius: 4px 4px 0 0
+  color: $text-strong
+  font-size: $size-medium
+  font-weight: 300
+  padding: 10px
+
+.panel-list
+  a
+    color: $text
+    &:hover
+      color: $link
+
+.panel-tabs
+  display: flex
+  font-size: $size-small
+  padding: 5px 10px 0
+  justify-content: center
+  &:not(:last-child)
+    border-bottom: 1px solid $border
+  a
+    border-bottom: 1px solid $border
+    margin-bottom: -1px
+    padding: 5px
+    &.is-active
+      border-bottom-color: $link-active-border
+      color: $link-active
+
+.panel-block
+  color: $text-strong
+  display: block
+  line-height: 16px
+  padding: 10px
+  &:not(:last-child)
+    border-bottom: 1px solid $border
+  .checkbox
+    border: 1px solid transparent
+    border-radius: $radius
+    display: block
+    padding: 8px
+    padding-left: 32px
+    input
+      left: 9px
+      top: 9px
+    &:hover
+      border-color: $link
+
+a.panel-block:hover
+  background: $background
+
+.panel-checkbox
+  @extend .checkbox
+  display: block
+  padding: 9px 10px 9px 30px
+  &:not(:last-child)
+    border-bottom: 1px solid $border
+  input
+    left: 8px
+    top: 10px
+
+.panel
+  border: 1px solid $border
+  border-radius: 5px
+  &:not(:last-child)
+    margin-bottom: 20px

bulma/elements/controls.sass

@@ -187,6 +187,18 @@
   &:not(:last-child)
     margin-bottom: 5px
 
+.control-label
+  flex: 1
+  margin-right: 20px
+  padding-top: 7px
+  text-align: right
+
+.control-element
+  display: flex
+  flex: 5
+  .input:not(:last-child)
+    margin-right: 10px
+
 .control
   position: relative
   text-align: left
@@ -211,15 +223,6 @@
       padding-left: 32px
       &:focus + .fa
         color: $control-active
-  &.is-horizontal
-    display: flex
-    & > .button,
-    & > .input,
-    & > .select
-      &:not(:last-child)
-        margin-right: 10px
-    & > .input
-      flex: 1
   &.is-grouped
     display: flex
     .input,
@@ -240,3 +243,14 @@
         border-radius: 0 $radius $radius 0
     &.is-centered
       justify-content: center
+  &.is-horizontal
+    display: flex
+    & > .button,
+    & > .input,
+    & > .select
+      &:not(:last-child)
+        margin-right: 10px
+    & > .input
+      flex: 1
+  &.is-inline
+    display: flex

bulma/elements/elements.sass

@@ -7,13 +7,6 @@
 @import "messages"
 @import "notifications"
 
-.box
-  @extend .block
-  background: white
-  border-radius: 5px
-  box-shadow: 0 2px 3px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.1)
-  padding: 20px
-
 .delete
   +unselectable
   -moz-appearance: none

bulma/layout/header.sass

@@ -35,12 +35,7 @@
   img
     max-height: 24px
   a
-    color: $text
     flex: 1
-    &:hover
-      color: $link-hover
-    &.is-active
-      color: $link-active
   .fa
     font-size: 21px
     line-height: 24px
@@ -49,6 +44,14 @@
   +mobile
     text-align: left
 
+.header-item a,
+a.header-item
+  color: $text
+  &:hover
+    color: $link-hover
+  &.is-active
+    color: $link-active
+
 .header-icon
   +fa(14px, 24px)
   color: $text

bulma/layout/hero.sass

@@ -64,12 +64,12 @@
       .header .container
         box-shadow: 0 1px 0 rgba($color-invert, 0.2)
       .header-icon,
+      a.header-item,
       .header-item > a:not(.button)
-        color: $color-invert
+        color: rgba($color-invert, 0.5)
-        opacity: 0.5
         &:hover,
         &.is-active
-          opacity: 1
+          color: $color-invert
       .tabs
         a
           color: $color-invert