diff options
author | Jeremy Thomas <bbxdesign@gmail.com> | 2022-02-06 18:57:04 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-02-06 18:57:04 +0300 |
commit | d773f4dcd51c2742da495701603f7c1e2b8232e4 (patch) | |
tree | fd69e93d868c35f0e1346cbfaff2176a2e34f023 /sass | |
parent | 80e0396424cc44a93db0223446e8b6029d77dd53 (diff) |
Add responsive button sizes (#3484)
* Add responsive button sizes
* Clean up code
* Add responsive buttons playground
Diffstat (limited to 'sass')
-rw-r--r-- | sass/elements/button.sass | 12 | ||||
-rw-r--r-- | sass/utilities/initial-variables.sass | 1 | ||||
-rw-r--r-- | sass/utilities/mixins.sass | 19 |
3 files changed, 32 insertions, 0 deletions
diff --git a/sass/elements/button.sass b/sass/elements/button.sass index 63f822bc..d7dfad91 100644 --- a/sass/elements/button.sass +++ b/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
\ No newline at end of file diff --git a/sass/utilities/initial-variables.sass b/sass/utilities/initial-variables.sass index 2ec79858..3c2d2827 100644 --- a/sass/utilities/initial-variables.sass +++ b/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 diff --git a/sass/utilities/mixins.sass b/sass/utilities/mixins.sass index 4d2e5b53..10cbae30 100644 --- a/sass/utilities/mixins.sass +++ b/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 |