Restructure controls, Remove vertical padding from controls, Fix panel

README.md

@@ -26,7 +26,7 @@ bower install bulma
 
 ### CDN
 
-[https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.24/css/bulma.min.css](https://cdnjs.cloudflare.com/ajax/libs/bulma/0.0.24/css/bulma.min.css)
+[https://cdnjs.cloudflare.com/ajax/libs/bulma](https://cdnjs.cloudflare.com/ajax/libs/bulma)
 
 Feel free to raise an issue or submit a pull request.
 
@@ -46,7 +46,7 @@ It's more a tasklist than a roadmap, but it will give you an overview of where t
 
 ## Documentation website
 
-This repository is **only** for the Bulma source files.  
+This repository is **only** for the Bulma source files.
 The [website](http://bulma.io) (which includes the [documentation](http://bulma.io/documentation/overview/start/)) is in another repo: [https://github.com/jgthms/bulma-website](https://github.com/jgthms/bulma-website)
 
 If you encounter a typo or a lack of documentation, submit an issue [there](https://github.com/jgthms/bulma-website/issues).

sass/components/card.sass

@@ -29,7 +29,6 @@
     margin-top: -20px
 
 .card-footer
-  background: $background
   border-top: 1px solid $border
   align-items: stretch
   display: flex

sass/components/panel.sass

@@ -43,11 +43,13 @@
   display: block
   line-height: 16px
   padding: 10px
-  &:hover
-    background: $background
   &:not(:last-child)
     border-bottom: 1px solid $border
 
+a.panel-block
+  &:hover
+    background: $background
+
 .panel
   border: 1px solid $border
   border-radius: 5px

sass/elements/button.sass

@@ -3,21 +3,25 @@
   font-size: 11px
   height: 24px
   line-height: 16px
-  padding: 3px 6px
+  padding-left: 6px
+  padding-right: 6px
 =button-medium
   font-size: 18px
   height: 40px
-  padding: 7px 14px
+  padding-left: 14px
+  padding-right: 14px
 =button-large
   font-size: 22px
   height: 48px
-  padding: 11px 20px
+  padding-left: 20px
+  padding-right: 20px
 
 .button
   +control
   +unselectable
   justify-content: center
-  padding: 3px 10px
+  padding-left: 10px
+  padding-right: 10px
   text-align: center
   white-space: nowrap
   strong

sass/elements/elements.sass

@@ -1,10 +1,9 @@
 @charset "utf-8"
 
-@import "controls"
-
 @import "box"
 @import "button"
 @import "content"
+@import "form"
 @import "image"
 @import "notification"
 @import "progress"

sass/elements/controls.sass → sass/elements/form.sass

@@ -1,33 +1,3 @@
-=control
-  -moz-appearance: none
-  -webkit-appearance: none
-  align-items: center
-  background: $control-background
-  border: 1px solid $control-border
-  border-radius: $radius
-  color: $control
-  display: inline-flex
-  font-size: $size-normal
-  height: 32px
-  line-height: 24px
-  padding: 3px 8px
-  position: relative
-  vertical-align: top
-  &:hover
-    border-color: $control-hover-border
-  &:active,
-  &:focus
-    border-color: $control-active-border
-    outline: none
-  &[disabled],
-  &.is-disabled
-    background: $background
-    border-color: $control-border
-    cursor: not-allowed
-    pointer-events: none
-    +placeholder
-      color: rgba($control, 0.3)
-
 =form-control
   +control
   @each $name, $pair in $colors
@@ -35,27 +5,9 @@
     &.is-#{$name}
       border-color: $color
 
-=control-small
-  border-radius: 2px
-  font-size: 11px
-  height: 24px
-  line-height: 16px
-  padding: 3px 6px
-=control-medium
-  font-size: 18px
-  height: 40px
-  line-height: 32px
-  padding: 3px 10px
-=control-large
-  font-size: 24px
-  height: 48px
-  line-height: 40px
-  padding: 3px 12px
-
 .input
   +form-control
   box-shadow: inset 0 1px 2px rgba(black, 0.1)
-  display: block
   max-width: 100%
   width: 100%
   &[type="search"]
@@ -77,7 +29,6 @@
   &.is-flat
     border: none
     box-shadow: none
-    padding: 4px 8px
   &.is-fullwidth
     display: block
     width: 100%
@@ -87,6 +38,7 @@
 
 .textarea
   @extend .input
+  display: block
   line-height: 1.2
   max-height: 600px
   max-width: 100%

sass/elements/other.sass

@@ -143,7 +143,8 @@
   height: 24px
   justify-content: center
   line-height: 16px
-  padding: 4px 10px
+  padding-left: 10px
+  padding-right: 10px
   vertical-align: top
   white-space: nowrap
   .delete
@@ -166,16 +167,19 @@
   &.is-small
     font-size: $size-small
     height: 20px
-    padding: 2px 8px
+    padding-left: 8px
+    padding-right: 8px
   &.is-medium
     font-size: $size-normal
     height: 32px
-    padding: 8px 14px
+    padding-left: 14px
+    padding-right: 14px
   &.is-large
     font-size: $size-5
     height: 40px
     line-height: 24px
-    padding: 8px 18px
+    padding-left: 18px
+    padding-right: 18px
     .delete
       margin-left: 4px
       margin-right: -8px

sass/utilities/controls.sass

@@ -0,0 +1,50 @@
+=control
+  -moz-appearance: none
+  -webkit-appearance: none
+  align-items: center
+  background: $control-background
+  border: 1px solid $control-border
+  border-radius: $radius
+  color: $control
+  display: inline-flex
+  font-size: $size-normal
+  height: 32px
+  line-height: 24px
+  padding-left: 8px
+  padding-right: 8px
+  position: relative
+  vertical-align: top
+  &:hover
+    border-color: $control-hover-border
+  &:active,
+  &:focus
+    border-color: $control-active-border
+    outline: none
+  &[disabled],
+  &.is-disabled
+    background: $background
+    border-color: $control-border
+    cursor: not-allowed
+    pointer-events: none
+    +placeholder
+      color: rgba($control, 0.3)
+
+=control-small
+  border-radius: 2px
+  font-size: 11px
+  height: 24px
+  line-height: 16px
+  padding-left: 6px
+  padding-right: 6px
+=control-medium
+  font-size: 18px
+  height: 40px
+  line-height: 32px
+  padding-left: 10px
+  padding-right: 10px
+=control-large
+  font-size: 24px
+  height: 48px
+  line-height: 40px
+  padding-left: 12px
+  padding-right: 12px

sass/utilities/utilities.sass

@@ -4,4 +4,5 @@
 @import "functions"
 @import "mixins"
 @import "animations"
+@import "controls"
 @import "variables"