mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add responsive button sizes (#3484)
* Add responsive button sizes * Clean up code * Add responsive buttons playground
This commit is contained in:
Jeremy Thomas
GitHub
parent
80e0396424
commit
d773f4dcd5
@ -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
|
||||
|
||||
@ -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;
|
||||
|
||||
File diff suppressed because one or more lines are too long
2
css/bulma-rtl.min.css
vendored
2
css/bulma-rtl.min.css
vendored
File diff suppressed because one or more lines are too long
43
css/bulma.css
vendored
43
css/bulma.css
vendored
@ -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;
|
||||
|
||||
File diff suppressed because one or more lines are too long
2
css/bulma.min.css
vendored
2
css/bulma.min.css
vendored
File diff suppressed because one or more lines are too long
@ -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>
|
||||
|
||||
35
docs/_includes/snippets/responsive-buttons.html
Normal file
35
docs/_includes/snippets/responsive-buttons.html
Normal file
@ -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>
|
||||
13
docs/_layouts/playground.html
Normal file
13
docs/_layouts/playground.html
Normal file
@ -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>
|
||||
@ -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;
|
||||
|
||||
2
docs/css/bulma-docs.min.css
vendored
2
docs/css/bulma-docs.min.css
vendored
File diff suppressed because one or more lines are too long
@ -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 %}
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
7
docs/playground/responsive-buttons.html
Normal file
7
docs/playground/responsive-buttons.html
Normal file
@ -0,0 +1,7 @@
|
||||
---
|
||||
layout: playground
|
||||
---
|
||||
|
||||
<section style="padding: 1.5rem;">
|
||||
{% include snippets/responsive-buttons.html %}
|
||||
</section>
|
||||
@ -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
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user