Add responsive button sizes (#3484)

* Add responsive button sizes

* Clean up code

* Add responsive buttons playground
This commit is contained in:
Jeremy Thomas
2022-02-06 15:57:04 +00:00
committed by GitHub
parent 80e0396424
commit d773f4dcd5
18 changed files with 259 additions and 10 deletions

43
css/bulma.css vendored
View File

@@ -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;