Add card header, Add button group, Add menu

CHANGELOG.md

@@ -1,3 +1,9 @@
 ## 0.0.17
 
+### Added
+
 * `.control.is-inline` for horizontal forms
+
+### Updated
+
+* `.control.is-grouped` renamed to `.control.has-addons`

bulma/components/card.sass

@@ -2,19 +2,22 @@
   align-items: stretch
   box-shadow: 0 1px 2px rgba(black, 0.1)
   display: flex
-  min-height: 36px
+  min-height: 40px
 
 .card-header-title
-  align-items: center
+  align-items: flex-start
   color: $text-strong
   display: flex
   flex: 1
   font-weight: bold
-  padding: 0 10px
+  padding: 10px
 
 .card-header-icon
-  +fa(14px, 36px)
+  align-items: center
   cursor: pointer
+  display: flex
+  justify-content: center
+  width: 40px
 
 .card-image
   display: block
@@ -27,11 +30,18 @@
 
 .card-footer
   background: $background
+  border-top: 1px solid $border
+  align-items: stretch
+  display: flex
+
+.card-footer-item
   align-items: center
   display: flex
-  font-size: $size-small
+  flex: 1
   justify-content: center
   padding: 10px
+  &:not(:last-child)
+    border-right: 1px solid $border
 
 .card
   background: white
@@ -43,3 +53,5 @@
     margin-bottom: 10px
   &.is-rounded
     border-radius: 5px
+  &.is-fullwidth
+    width: 100%

bulma/components/menu.sass

@@ -8,7 +8,7 @@
     border-radius: 2px
     color: $text
     display: block
-    padding: 4px 8px
+    padding: 5px 10px
     &:hover
       background: $background
       color: $link
@@ -17,15 +17,14 @@
       color: $link-invert
   li ul
     border-left: 1px solid $border
-    margin: 8px
+    margin: 10px
-    padding-left: 8px
+    padding-left: 10px
 
 .menu-label
   color: $text-light
   font-size: $size-small
   letter-spacing: 1px
   margin-bottom: 5px
-  padding-left: 8px
   text-transform: uppercase
   &:not(:first-child)
     margin-top: 20px

bulma/elements/buttons.sass

@@ -26,10 +26,8 @@
     font-size: $size-small
     line-height: 1
     margin-top: 5px
-  .fa
+  .icon.is-small
-    line-height: 24px
+    margin: 4px 0
-    margin: 0 -2px
-    width: 24px
   &:hover
     color: $control-hover
   &:active
@@ -71,10 +69,14 @@
         border-color: transparent transparent $color-invert $color-invert !important
   &.is-small
     +button-small
+    .icon.is-small
+      margin: 0
   &.is-medium
     +button-medium
   &.is-large
     +button-large
+    .icon.is-medium
+      margin: -4px 0px -4px -4px
   &.is-fullwidth
     display: block
     width: 100%

bulma/elements/controls.sass

@@ -172,6 +172,10 @@
       border-color: $control-hover-border
     &::ms-expand
       display: none
+  &.is-fullwidth
+    width: 100%
+    select
+      width: 100%
   &:after
     +arrow($link)
     margin-top: -6px
@@ -193,12 +197,6 @@
   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
@@ -223,7 +221,7 @@
       padding-left: 32px
       &:focus + .fa
         color: $control-active
-  &.is-grouped
+  &.has-addons
     display: flex
     .input,
     .button,
@@ -243,7 +241,7 @@
         border-radius: 0 $radius $radius 0
     &.is-centered
       justify-content: center
-  &.is-horizontal
+  &.is-grouped
     display: flex
     & > .button,
     & > .input,
@@ -252,5 +250,8 @@
         margin-right: 10px
     & > .input
       flex: 1
-  &.is-inline
+  &.is-horizontal
     display: flex
+    & > .control
+      display: flex
+      flex: 5

bulma/elements/elements.sass

@@ -54,7 +54,7 @@
     font-size: inherit
     line-height: inherit
   &.is-small
-    +fa(14px, 20px)
+    +fa(14px, 16px)
   &.is-medium
     +fa(28px, 32px)
   &.is-large