Add responsive button sizes (#3484)

* Add responsive button sizes

* Clean up code

* Add responsive buttons playground

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Bulma Changelog
 
+## 0.9.4
+
+### New features
+
+- **Responsive buttons**: the size of a button will change for each breakpoint
+- `@mixin between`: takes 2 breakpoint values, outputs a media query for the range between these 2 values
+- `$breakpoints` Sass map: a map of named breakpoints and their type (`from`, `until` or both)
+- `@mixin breakpoint`: uses the new `$breakpoints` Sass map to output a media query
+
 ## 0.9.3
 
 ### New features

css/bulma-rtl.css

@@ -1891,6 +1891,38 @@ fieldset[disabled] .button {
   margin-right: 0.25rem;
 }
 
+@media screen and (max-width: 768px) {
+  .button.is-responsive.is-small {
+    font-size: 0.5625rem;
+  }
+  .button.is-responsive,
+  .button.is-responsive.is-normal {
+    font-size: 0.65625rem;
+  }
+  .button.is-responsive.is-medium {
+    font-size: 0.75rem;
+  }
+  .button.is-responsive.is-large {
+    font-size: 1rem;
+  }
+}
+
+@media screen and (min-width: 769px) and (max-width: 1023px) {
+  .button.is-responsive.is-small {
+    font-size: 0.65625rem;
+  }
+  .button.is-responsive,
+  .button.is-responsive.is-normal {
+    font-size: 0.75rem;
+  }
+  .button.is-responsive.is-medium {
+    font-size: 1rem;
+  }
+  .button.is-responsive.is-large {
+    font-size: 1.25rem;
+  }
+}
+
 .container {
   flex-grow: 1;
   margin: 0 auto;
@@ -6060,6 +6092,11 @@ body.has-navbar-fixed-bottom {
 
 .navbar-burger {
   color: #4a4a4a;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background: none;
+  border: none;
   cursor: pointer;
   display: block;
   height: 3.25rem;
@@ -6524,9 +6561,11 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
   box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
 }
 
-.pagination-previous[disabled],
+.pagination-previous[disabled], .pagination-previous.is-disabled,
 .pagination-next[disabled],
-.pagination-link[disabled] {
+.pagination-next.is-disabled,
+.pagination-link[disabled],
+.pagination-link.is-disabled {
   background-color: #dbdbdb;
   border-color: #dbdbdb;
   box-shadow: none;

css/bulma.css

@@ -1891,6 +1891,38 @@ fieldset[disabled] .button {
   margin-right: 0.25rem;
 }
 
+@media screen and (max-width: 768px) {
+  .button.is-responsive.is-small {
+    font-size: 0.5625rem;
+  }
+  .button.is-responsive,
+  .button.is-responsive.is-normal {
+    font-size: 0.65625rem;
+  }
+  .button.is-responsive.is-medium {
+    font-size: 0.75rem;
+  }
+  .button.is-responsive.is-large {
+    font-size: 1rem;
+  }
+}
+
+@media screen and (min-width: 769px) and (max-width: 1023px) {
+  .button.is-responsive.is-small {
+    font-size: 0.65625rem;
+  }
+  .button.is-responsive,
+  .button.is-responsive.is-normal {
+    font-size: 0.75rem;
+  }
+  .button.is-responsive.is-medium {
+    font-size: 1rem;
+  }
+  .button.is-responsive.is-large {
+    font-size: 1.25rem;
+  }
+}
+
 .container {
   flex-grow: 1;
   margin: 0 auto;
@@ -6060,6 +6092,11 @@ body.has-navbar-fixed-bottom {
 
 .navbar-burger {
   color: #4a4a4a;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background: none;
+  border: none;
   cursor: pointer;
   display: block;
   height: 3.25rem;
@@ -6524,9 +6561,11 @@ a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-i
   box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
 }
 
-.pagination-previous[disabled],
+.pagination-previous[disabled], .pagination-previous.is-disabled,
 .pagination-next[disabled],
-.pagination-link[disabled] {
+.pagination-next.is-disabled,
+.pagination-link[disabled],
+.pagination-link.is-disabled {
   background-color: #dbdbdb;
   border-color: #dbdbdb;
   box-shadow: none;

docs/_includes/elements/anchor.html

@@ -5,4 +5,9 @@
   <a class="bd-anchor-link" href="#{{ include.name | slugify }}">
     #
   </a>
+  {% if include.tag %}
+    <span class="tag is-success">
+      {{ include.tag }}
+    </span>
+  {% endif %}
 </h3>

docs/_includes/snippets/responsive-buttons.html

@@ -0,0 +1,35 @@
+{% assign sizes = "default,small,normal,medium,large" | split: "," %}
+
+<table class="table is-bordered">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Fixed size</th>
+      <th>Responsive size <small class="has-text-grey has-text-weight-normal">(resize window to see in action)</small></th>
+      <th>Code</th>
+    </tr>
+  </thead>
+  <tbody>
+    {% for size in sizes %}
+{% capture responsive_code %}
+<button class="button {% unless size == 'default' %}is-{{ size }} {% endunless %}is-responsive">
+  {{ size | capitalize }}
+</button>
+{% endcapture %}
+      <tr>
+        <td>{{ size | capitalize }}</td>
+        <td>
+          <button class="button is-{{ size }}">
+            {{ size | capitalize }}
+          </button>
+        </td>
+        <td>
+          {{ responsive_code }}
+        </td>
+        <td>
+          {% highlight html %}{{ responsive_code }}{% endhighlight %}
+        </td>
+      </tr>
+    {% endfor %}
+  </tbody>
+</table>

docs/_layouts/playground.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>{{ page.title }}</title>
+    <link rel="stylesheet" href="{{ site.url }}/css/{{ site.docs_file }}.css?v={{ site.time | date: "%Y%m%d%H%M" }}">
+  </head>
+  <body>
+    {{ content }}
+  </body>
+</html>

docs/css/bulma-docs.css

@@ -3370,6 +3370,38 @@ fieldset[disabled] .button {
   margin-right: 0.25rem;
 }
 
+@media screen and (max-width: 768px) {
+  .button.is-responsive.is-small {
+    font-size: 0.5625rem;
+  }
+  .button.is-responsive,
+  .button.is-responsive.is-normal {
+    font-size: 0.65625rem;
+  }
+  .button.is-responsive.is-medium {
+    font-size: 0.75rem;
+  }
+  .button.is-responsive.is-large {
+    font-size: 1rem;
+  }
+}
+
+@media screen and (min-width: 769px) and (max-width: 1023px) {
+  .button.is-responsive.is-small {
+    font-size: 0.65625rem;
+  }
+  .button.is-responsive,
+  .button.is-responsive.is-normal {
+    font-size: 0.75rem;
+  }
+  .button.is-responsive.is-medium {
+    font-size: 1rem;
+  }
+  .button.is-responsive.is-large {
+    font-size: 1.25rem;
+  }
+}
+
 .container {
   flex-grow: 1;
   margin: 0 auto;

docs/documentation/elements/button.html

@@ -609,6 +609,43 @@ meta:
 
 {% include elements/snippet.html content=buttons_small_normal_sizes_example %}
 
+<table class="table is-bordered">
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Fixed size</th>
+      <th>Responsive <small class="has-text-grey has-text-weight-normal">(resize window to see in action)</small></th>
+    </tr>
+  </thead>
+</table>
+
+{% include elements/anchor.html name="Responsive sizes" %}
+
+{% include elements/new-tag.html version="0.9.4" %}
+
+<div class="content">
+  <p>
+    If you want different button sizes for each breakpoint, you can use Bulma's <strong>responsive</strong> buttons. Simply append the <code>is-responsive</code> modifier:
+  </p>
+</div>
+
+{% include snippets/responsive-buttons.html %}
+
+<div class="block">
+  <a target="_blank" class="button is-small is-link is-outlined" href="{{ site.url }}/playground/responsive-buttons/">
+    <span>Open table in new window</span>
+    <span class="icon">
+      <i class="fa fa-external-link-alt"></i>
+    </span>
+  </a>
+</div>
+
+<div class="content">
+  <p>
+    You can customise the sizes by overwriting the <code>$button-responsive-sizes</code> Sass variable.
+  </p>
+</div>
+
 {% include elements/anchor.html name="Displays" %}
 
 {% include elements/snippet.html wrapper="buttons" content=button_displays_example %}

docs/package.json

@@ -26,6 +26,7 @@
     "js-watch": "npm run js-build -- --watch",
     "start": "npm run css-watch | npm run js-watch",
     "start-test": "npm run test-scss -- --watch",
-    "test-scss": "node-sass --output-style expanded bulma-test.scss css/bulma-test.css"
+    "test-scss": "node-sass --output-style expanded bulma-test.scss css/bulma-test.css",
+    "test-watch": "npm run test-scss -- --watch"
   }
 }

docs/playground/responsive-buttons.html

@@ -0,0 +1,7 @@
+---
+layout: playground
+---
+
+<section style="padding: 1.5rem;">
+  {% include snippets/responsive-buttons.html %}
+</section>

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