diff options
author | Matthew Lemon <y@yulqen.org> | 2024-10-15 21:01:31 +0100 |
---|---|---|
committer | Matthew Lemon <y@yulqen.org> | 2024-10-15 21:01:31 +0100 |
commit | eeaddb27560d723ca7d61359744ceb2709fccd2d (patch) | |
tree | 04ddbc49ae7b73d5f5a9e1716d7227aecd3b9f85 /alphabetlearning/static/bootstrap/scss/mixins/_buttons.scss | |
parent | 7a3044c859043837e6c7c95bb4894d04e9b2cbc2 (diff) |
Renamed from pyblackbird_cc to alphabetlearning - everywhere
Diffstat (limited to 'alphabetlearning/static/bootstrap/scss/mixins/_buttons.scss')
-rw-r--r-- | alphabetlearning/static/bootstrap/scss/mixins/_buttons.scss | 133 |
1 files changed, 133 insertions, 0 deletions
diff --git a/alphabetlearning/static/bootstrap/scss/mixins/_buttons.scss b/alphabetlearning/static/bootstrap/scss/mixins/_buttons.scss new file mode 100644 index 0000000..b674996 --- /dev/null +++ b/alphabetlearning/static/bootstrap/scss/mixins/_buttons.scss @@ -0,0 +1,133 @@ +// Button variants +// +// Easily pump out default styles, as well as :hover, :focus, :active, +// and disabled options for all buttons + +// scss-docs-start btn-variant-mixin +@mixin button-variant( + $background, + $border, + $color: color-contrast($background), + $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)), + $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)), + $hover-color: color-contrast($hover-background), + $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)), + $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)), + $active-color: color-contrast($active-background), + $disabled-background: $background, + $disabled-border: $border, + $disabled-color: color-contrast($disabled-background) +) { + color: $color; + @include gradient-bg($background); + border-color: $border; + @include box-shadow($btn-box-shadow); + + &:hover { + color: $hover-color; + @include gradient-bg($hover-background); + border-color: $hover-border; + } + + .btn-check:focus + &, + &:focus { + color: $hover-color; + @include gradient-bg($hover-background); + border-color: $hover-border; + @if $enable-shadows { + @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5)); + } @else { + // Avoid using mixin so we can pass custom focus shadow properly + box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5); + } + } + + .btn-check:checked + &, + .btn-check:active + &, + &:active, + &.active, + .show > &.dropdown-toggle { + color: $active-color; + background-color: $active-background; + // Remove CSS gradients if they're enabled + background-image: if($enable-gradients, none, null); + border-color: $active-border; + + &:focus { + @if $enable-shadows { + @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5)); + } @else { + // Avoid using mixin so we can pass custom focus shadow properly + box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5); + } + } + } + + &:disabled, + &.disabled { + color: $disabled-color; + background-color: $disabled-background; + // Remove CSS gradients if they're enabled + background-image: if($enable-gradients, none, null); + border-color: $disabled-border; + } +} +// scss-docs-end btn-variant-mixin + +// scss-docs-start btn-outline-variant-mixin +@mixin button-outline-variant( + $color, + $color-hover: color-contrast($color), + $active-background: $color, + $active-border: $color, + $active-color: color-contrast($active-background) +) { + color: $color; + border-color: $color; + + &:hover { + color: $color-hover; + background-color: $active-background; + border-color: $active-border; + } + + .btn-check:focus + &, + &:focus { + box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); + } + + .btn-check:checked + &, + .btn-check:active + &, + &:active, + &.active, + &.dropdown-toggle.show { + color: $active-color; + background-color: $active-background; + border-color: $active-border; + + &:focus { + @if $enable-shadows { + @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5)); + } @else { + // Avoid using mixin so we can pass custom focus shadow properly + box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); + } + } + } + + &:disabled, + &.disabled { + color: $color; + background-color: transparent; + } +} +// scss-docs-end btn-outline-variant-mixin + +// scss-docs-start btn-size-mixin +@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) { + padding: $padding-y $padding-x; + @include font-size($font-size); + // Manually declare to provide an override to the browser default + @include border-radius($border-radius, 0); +} +// scss-docs-end btn-size-mixin |