Add responsive button sizes (#3484)

* Add responsive button sizes

* Clean up code

* Add responsive buttons playground

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