Add responsive button sizes (#3484)

* Add responsive button sizes

* Clean up code

* Add responsive buttons playground

sass/elements/button.sass

@@ -44,6 +44,7 @@ $button-static-background-color: $scheme-main-ter !default
 $button-static-border-color: $border !default
 
 $button-colors: $colors !default
+$button-responsive-sizes: ("mobile": ("small": ($size-small * 0.75), "normal": ($size-small * 0.875), "medium": $size-small, "large": $size-normal), "tablet-only": ("small": ($size-small * 0.875), "normal": ($size-small), "medium": $size-normal, "large": $size-medium)) !default
 
 // The button sizes use mixins so they can be used at different breakpoints
 =button-small
@@ -343,3 +344,14 @@ $button-colors: $colors !default
       .button:not(.is-fullwidth)
         margin-left: 0.25rem
         margin-right: 0.25rem
+
+@each $bp-name, $bp-sizes in $button-responsive-sizes
+  +breakpoint($bp-name)
+    @each $size, $value in $bp-sizes
+      @if $size != "normal"
+        .button.is-responsive.is-#{$size}
+          font-size: $value
+      @else
+        .button.is-responsive,
+        .button.is-responsive.is-normal
+          font-size: $value

sass/utilities/initial-variables.sass

@@ -62,6 +62,7 @@ $widescreen-enabled: true !default
 // 1344px container + 4rem
 $fullhd: 1344px + (2 * $gap) !default
 $fullhd-enabled: true !default
+$breakpoints: ("mobile": ("until": $tablet), "tablet": ("from": $tablet), "tablet-only": ("from": $tablet, "until": $desktop), "touch": ("from": $desktop), "desktop": ("from": $desktop), "desktop-only": ("from": $desktop, "until": $widescreen), "until-widescreen": ("until": $widescreen), "widescreen": ("from": $widescreen), "widescreen-only": ("from": $widescreen, "until": $fullhd), "until-fullhd": ("until": $fullhd), "fullhd": ("from": $fullhd)) !default
 
 // Miscellaneous
 

sass/utilities/mixins.sass

@@ -95,6 +95,10 @@
   @media screen and (max-width: $device - 1px)
     @content
 
+=between($from, $until)
+  @media screen and (min-width: $from) and (max-width: $until - 1px)
+    @content
+
 =mobile
   @media screen and (max-width: $tablet - 1px)
     @content
@@ -145,6 +149,21 @@
     @media screen and (min-width: $fullhd)
       @content
 
+=breakpoint($name)
+  $breakpoint: map-get($breakpoints, $name)
+  @if $breakpoint
+    $from: map-get($breakpoint, "from")
+    $until: map-get($breakpoint, "until")
+    @if $from and $until
+      +between($from, $until)
+        @content
+    @else if $from
+      +from($from)
+        @content
+    @else if $until
+      +until($until)
+        @content
+
 =ltr
   @if not $rtl
     @content