Restructure controls, Remove vertical padding from controls, Fix panel

diff --git a/README.md b/README.md
index ab5771e66e173f85680aa15135ef2e3005e2c039..8eed3c53186eeb7ec0458ac50800e48d12ce8bb0 100644 (file)
--- a/README.md
+++ b/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).

diff --git a/sass/components/card.sass b/sass/components/card.sass
index 4cb32fa434386d05ad193ffda4fd7f3b4f19df4d..991c630595bc4f7e950609315dd13ce8cae3187d 100644 (file)
--- a/sass/components/card.sass
+++ b/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

diff --git a/sass/components/panel.sass b/sass/components/panel.sass
index 32af2acd84b6dd1175ab8d9074a5d5b9dbb40089..f66dd3cef787ddb453f7acb7cc571b460c84623d 100644 (file)
--- a/sass/components/panel.sass
+++ b/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

diff --git a/sass/elements/button.sass b/sass/elements/button.sass
index 82fe7ce10ffcc69a83762fd158d3ed7356d156ba..db9e3d4771232b740317310493af2cac249fa89d 100644 (file)
--- a/sass/elements/button.sass
+++ b/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

diff --git a/sass/elements/elements.sass b/sass/elements/elements.sass
index bdb807988b0b3b66ec05e7064011732eff682ad3..b1d20059b0788823a2f10cf05fa13dc0ed8890f5 100644 (file)
--- a/sass/elements/elements.sass
+++ b/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"

diff --git a/sass/elements/controls.sass b/sass/elements/form.sass
similarity index 82%
rename from sass/elements/controls.sass
rename to sass/elements/form.sass
index d8c762f25f76388138dea391f4a2377431b0f5da..9a9bed083c1336e756aec5ffbdd95b8faf6760bc 100644 (file)
--- a/sass/elements/controls.sass
+++ b/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%

diff --git a/sass/elements/other.sass b/sass/elements/other.sass
index 9156b675d2350e0006f587ab81bbcccf64388051..42642e46e3fa02c2a3ddb1f39dc706bcaf054fce 100644 (file)
--- a/sass/elements/other.sass
+++ b/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

diff --git a/sass/utilities/controls.sass b/sass/utilities/controls.sass
new file mode 100644 (file)
index 0000000..18feb0b
--- /dev/null
+++ b/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

diff --git a/sass/utilities/utilities.sass b/sass/utilities/utilities.sass
index d94914dcf7db60e57f2799a4a01123c3d08eaae7..75cda48d64d3a537827e1f6e042e548c37e4c880 100644 (file)
--- a/sass/utilities/utilities.sass
+++ b/sass/utilities/utilities.sass
@@ -4,4 +4,5 @@
 @import "functions"
 @import "mixins"
 @import "animations"
+@import "controls"
 @import "variables"