Add control and button border variables

CHANGELOG.md

@@ -1,9 +1,10 @@
 # Bulma Changelog
 
-## 0.6.3
+## 0.7.0
 
 ### New features
 
+* New variables `$control-border-width` and `$button-border-width`
 * 🎉 #1624 Add some common photography aspect ratios and portrait ratios
 * 🎉 #1747 New `$custom-colors` and `$custom-shades` variable for adding your own colors and shades to Bulma's `$colors` and `$shades` maps respectively
 

docs/_data/variables/elements/button.json

@@ -21,6 +21,21 @@
       "name": "$button-border-color",
       "value": "$grey-lighter"
     },
+    "button-border-width": {
+      "id": "button-border-width",
+      "name": "$button-border-width",
+      "value": "$control-border-width"
+    },
+    "button-padding-vertical": {
+      "id": "button-padding-vertical",
+      "name": "$button-padding-vertical",
+      "value": "calc(0.375em - #{$button-border-width})"
+    },
+    "button-padding-horizontal": {
+      "id": "button-padding-horizontal",
+      "name": "$button-padding-horizontal",
+      "value": "0.75em"
+    },
     "button-hover-color": {
       "id": "button-hover-color",
       "name": "$button-hover-color",
@@ -112,4 +127,4 @@
       "value": "$grey-lighter"
     }
   }
-}
+}

docs/_data/variables/utilities/controls.json

@@ -16,15 +16,20 @@
       "name": "$control-radius-small",
       "value": "$radius-small"
     },
+    "control-border-width": {
+      "id": "control-border-width",
+      "name": "$control-border-width",
+      "value": "1px"
+    },
     "control-padding-vertical": {
       "id": "control-padding-vertical",
       "name": "$control-padding-vertical",
-      "value": "calc(0.375em - 1px)"
+      "value": "calc(0.375em - #{$control-border-width})"
     },
     "control-padding-horizontal": {
       "id": "control-padding-horizontal",
       "name": "$control-padding-horizontal",
-      "value": "calc(0.625em - 1px)"
+      "value": "calc(0.625em - #{$control-border-width})"
     }
   }
-}
+}

docs/bulma-docs.sass

@@ -10,8 +10,6 @@ $amazon: #ffd863
 $bleeding-green: #ABF47C
 $bleeding-red: #CA1F26
 
-// $custom-colors: ("test": $bootstrap, "alt": ($bleeding-red, "jfoeij"), "debug": (pink, black))
-
 @import "../bulma"
 @import "./_sass/highlight"
 @import "./_sass/override"

docs/css/bulma-docs.css

@@ -1534,13 +1534,16 @@ a.box:active {
 .button {
   background-color: white;
   border-color: #dbdbdb;
+  border-width: 1px;
   color: #363636;
   cursor: pointer;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
+  padding-bottom: calc(0.375em - 1px);
   padding-left: 0.75em;
   padding-right: 0.75em;
+  padding-top: calc(0.375em - 1px);
   text-align: center;
   white-space: nowrap;
 }

sass/elements/button.sass

@@ -1,6 +1,11 @@
 $button-color: $grey-darker !default
 $button-background-color: $white !default
+
 $button-border-color: $grey-lighter !default
+$button-border-width: $control-border-width !default
+
+$button-padding-vertical: calc(0.375em - #{$button-border-width}) !default
+$button-padding-horizontal: 0.75em !default
 
 $button-hover-color: $link-hover !default
 $button-hover-border-color: $link-hover-border !default
@@ -40,11 +45,14 @@ $button-static-border-color: $grey-lighter !default
   +unselectable
   background-color: $button-background-color
   border-color: $button-border-color
+  border-width: $button-border-width
   color: $button-color
   cursor: pointer
   justify-content: center
-  padding-left: 0.75em
+  padding-bottom: $button-padding-vertical
-  padding-right: 0.75em
+  padding-left: $button-padding-horizontal
+  padding-right: $button-padding-horizontal
+  padding-top: $button-padding-vertical
   text-align: center
   white-space: nowrap
   strong
@@ -57,14 +65,14 @@ $button-static-border-color: $grey-lighter !default
       height: 1.5em
       width: 1.5em
     &:first-child:not(:last-child)
-      margin-left: calc(-0.375em - 1px)
+      margin-left: calc(-0.375em - #{$button-border-width})
       margin-right: 0.1875em
     &:last-child:not(:first-child)
       margin-left: 0.1875em
-      margin-right: calc(-0.375em - 1px)
+      margin-right: calc(-0.375em - #{$button-border-width})
     &:first-child:last-child
-      margin-left: calc(-0.375em - 1px)
+      margin-left: calc(-0.375em - #{$button-border-width})
-      margin-right: calc(-0.375em - 1px)
+      margin-right: calc(-0.375em - #{$button-border-width})
   // States
   &:hover,
   &.is-hovered

sass/utilities/controls.sass

@@ -1,14 +1,16 @@
 $control-radius: $radius !default
 $control-radius-small: $radius-small !default
 
-$control-padding-vertical: calc(0.375em - 1px) !default
+$control-border-width: 1px !default
-$control-padding-horizontal: calc(0.625em - 1px) !default
+
+$control-padding-vertical: calc(0.375em - #{$control-border-width}) !default
+$control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default
 
 %control
   -moz-appearance: none
   -webkit-appearance: none
   align-items: center
-  border: 1px solid transparent
+  border: $control-border-width solid transparent
   border-radius: $control-radius
   box-shadow: none
   display: inline-flex