Add focus variables

CHANGELOG.md

@@ -2,9 +2,14 @@
 
 ## 0.5.2
 
+### New features
+
+* Added `$button-focus-box-shadow-size` and `$button-focus-box-shadow-color` for customization
+* Added `$input-focus-box-shadow-size` and `$input-focus-box-shadow-color` for customization
+
 ### Issues closed
 
-* #1063 `$family-primary` customisation
+* #1063 `$family-primary` customization
 
 ## 0.5.1
 

docs/documentation/elements/button.html

@@ -18,6 +18,10 @@ variables:
   value: $link-focus
 - name: $button-focus-border-color
   value: $link-focus-border
+- name: $button-focus-box-shadow-size
+  value: 0 0 0 0.125em
+- name: $button-focus-box-shadow-color
+  value: rgba($link, 0.25)
 - name: $button-active-color
   value: $link-active
 - name: $button-active-border-color
@@ -50,6 +54,13 @@ variables:
 <a class="button">Button</a>
 {% endcapture %}
 
+{% capture button_tags_example %}
+<a class="button">Anchor</a>
+<button class="button">Button</button>
+<input class="button" type="submit" value="Submit input">
+<input class="button" type="reset" value="Reset input">
+{% endcapture %}
+
 {% capture button_colors_a_example %}
 <a class="button is-white">White</a>
 <a class="button is-light">Light</a>
@@ -408,6 +419,12 @@ variables:
 
     <hr>
 
+    <div class="content">
+      <p>
+        The <strong>button</strong> is an essential element of any design. It's meant to look an behave as an <strong>interactive</strong> element of your page.
+      </p>
+    </div>
+
     <div class="columns">
       <div class="column">
         {{button_example}}
@@ -417,6 +434,35 @@ variables:
       </div>
     </div>
 
+    <div class="content">
+      <p>
+        The <code>.button</code> class can be used on:
+      </p>
+      <ul>
+        <li>
+          <code>&lt;a&gt;</code> anchor links
+        </li>
+        <li>
+          <code>&lt;button&gt;</code> form buttons
+        </li>
+        <li>
+          <code>&lt;input type="submit"&gt;</code> submit inputs
+        </li>
+        <li>
+          <code>&lt;input type="reset"&gt;</code> reset inputs
+        </li>
+      </ul>
+    </div>
+
+    <div class="columns">
+      <div class="column">
+        {{button_tags_example}}
+      </div>
+      <div class="column">
+        {% highlight html %}{{button_tags_example}}{% endhighlight %}
+      </div>
+    </div>
+
     {% include anchor.html name="Colors" %}
 
     <div class="columns">

sass/elements/button.sass

@@ -7,6 +7,8 @@ $button-hover-border-color: $link-hover-border !default
 
 $button-focus-color: $link-focus !default
 $button-focus-border-color: $link-focus-border !default
+$button-focus-box-shadow-size: 0 0 0 0.125em !default
+$button-focus-box-shadow-color: rgba($link, 0.25) !default
 
 $button-active-color: $link-active !default
 $button-active-border-color: $link-active-border !default
@@ -24,8 +26,6 @@ $button-static-color: $grey !default
 $button-static-background-color: $white-ter !default
 $button-static-border-color: $grey-lighter !default
 
-$button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
-
 // The button sizes use mixins so they can be used at different breakpoints
 =button-small
   border-radius: $radius-small
@@ -73,12 +73,12 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
   &:focus,
   &.is-focused
     border-color: $button-focus-border-color
-    // box-shadow: 0 0 0.5em rgba($button-focus-border-color, 0.25)
     color: $button-focus-color
+    &:not(:active)
+      box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color
   &:active,
   &.is-active
     border-color: $button-active-border-color
-    box-shadow: $button-shadow-inset
     color: $button-active-color
   // Colors
   &.is-link
@@ -89,10 +89,12 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
     &:hover,
     &.is-hovered,
     &:focus,
-    &.is-focused,
+    &.is-focused
+      background-color: $button-link-hover-background-color
+      color: $button-link-hover-color
     &:active,
     &.is-active
-      background-color: $button-link-hover-background-color
+      background-color: darken($button-link-hover-background-color, 5%)
       color: $button-link-hover-color
     &[disabled]
       background-color: transparent
@@ -113,13 +115,13 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2) !default
       &:focus,
       &.is-focused
         border-color: transparent
-        box-shadow: 0 0 0.5em rgba($color, 0.25)
         color: $color-invert
+        &:not(:active)
+          box-shadow: $button-focus-box-shadow-size rgba($color, 0.25)
       &:active,
       &.is-active
         background-color: darken($color, 5%)
         border-color: transparent
-        box-shadow: $button-shadow-inset
         color: $color-invert
       &[disabled]
         background-color: $color

sass/elements/form.sass

@@ -8,6 +8,8 @@ $input-hover-border-color: $grey-light !default
 
 $input-focus-color: $grey-darker !default
 $input-focus-border-color: $link !default
+$input-focus-box-shadow-size: 0 0 0 0.125em !default
+$input-focus-box-shadow-color: rgba($link, 0.25) !default
 
 $input-disabled-color: $text-light !default
 $input-disabled-background-color: $background !default
@@ -51,6 +53,7 @@ $help-size: $size-small !default
   &:active,
   &.is-active
     border-color: $input-focus-border-color
+    box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
   &[disabled]
     background-color: $input-disabled-background-color
     border-color: $input-disabled-border-color
@@ -140,13 +143,6 @@ $help-size: $size-small !default
     font-size: 1em
     max-width: 100%
     outline: none
-    &:hover
-      border-color: $input-hover-border-color
-    &:focus,
-    &.is-focused,
-    &:active,
-    &.is-active
-      border-color: $input-focus-border-color
     &::-ms-expand
       display: none
     &[disabled]:hover
@@ -167,6 +163,11 @@ $help-size: $size-small !default
     $color: nth($pair, 1)
     &.is-#{$name} select
       border-color: $color
+      &:focus,
+      &.is-focused,
+      &:active,
+      &.is-active
+        box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
   // Sizes
   &.is-small
     +control-small