Mercurial > nebulaweb3
diff default/assets/scss/vendors/bootstrap/mixins/_buttons.scss @ 0:1d038bc9b3d2 default tip
Up:default
author | Liny <dev@neowd.com> |
---|---|
date | Sat, 31 May 2025 09:21:51 +0800 |
parents | |
children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/default/assets/scss/vendors/bootstrap/mixins/_buttons.scss Sat May 31 09:21:51 2025 +0800 @@ -0,0 +1,83 @@ +// Button variants +// +// Easily pump out default styles, as well as :hover, :focus, :active, +// and disabled options for all buttons + +@mixin button-variant($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%)) { + @include color-yiq($background); + background-color: $background; + border-color: $border; + @include box-shadow($btn-box-shadow); + + &:hover { + @include color-yiq($background); + background-color: $active-background; + border-color: $active-border; + } + + &:focus, + &.focus { + // Avoid using mixin so we can pass custom focus shadow properly + @if $enable-shadows { + box-shadow: $btn-box-shadow, 0 0 0 3px rgba($border, .5); + } @else { + box-shadow: 0 0 0 3px rgba($border, .5); + } + } + + // Disabled comes first so active can properly restyle + &.disabled, + &:disabled { + background-color: $background; + border-color: $border; + } + + &:active, + &.active, + .show > &.dropdown-toggle { + background-color: $active-background; + background-image: none; // Remove the gradient for the pressed/active state + border-color: $active-border; + @include box-shadow($btn-active-box-shadow); + } +} + +@mixin button-outline-variant($color, $color-hover: #fff) { + color: $color; + background-color: transparent; + background-image: none; + border-color: $color; + + @include hover { + color: $color-hover; + background-color: $color; + border-color: $color; + } + + &:focus, + &.focus { + box-shadow: 0 0 0 3px rgba($color, .5); + } + + &.disabled, + &:disabled { + color: $color; + background-color: transparent; + } + + &:active, + &.active, + .show > &.dropdown-toggle { + color: $color-hover; + background-color: $color; + border-color: $color; + } +} + +// Button sizes +@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) { + padding: $padding-y $padding-x; + font-size: $font-size; + line-height: $line-height; + @include border-radius($border-radius); +}