Mercurial > nebulaweb3

comparison default/assets/scss/vendors/bootstrap/mixins/_buttons.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
1 // Button variants
2 //
3 // Easily pump out default styles, as well as :hover, :focus, :active,
4 // and disabled options for all buttons
5
6 @mixin button-variant($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%)) {
7 @include color-yiq($background);
8 background-color: $background;
9 border-color: $border;
10 @include box-shadow($btn-box-shadow);
11
12 &:hover {
13 @include color-yiq($background);
14 background-color: $active-background;
15 border-color: $active-border;
16 }
17
18 &:focus,
19 &.focus {
20 // Avoid using mixin so we can pass custom focus shadow properly
21 @if $enable-shadows {
22 box-shadow: $btn-box-shadow, 0 0 0 3px rgba($border, .5);
23 } @else {
24 box-shadow: 0 0 0 3px rgba($border, .5);
25 }
26 }
27
28 // Disabled comes first so active can properly restyle
29 &.disabled,
30 &:disabled {
31 background-color: $background;
32 border-color: $border;
33 }
34
35 &:active,
36 &.active,
37 .show > &.dropdown-toggle {
38 background-color: $active-background;
39 background-image: none; // Remove the gradient for the pressed/active state
40 border-color: $active-border;
41 @include box-shadow($btn-active-box-shadow);
42 }
43 }
44
45 @mixin button-outline-variant($color, $color-hover: #fff) {
46 color: $color;
47 background-color: transparent;
48 background-image: none;
49 border-color: $color;
50
51 @include hover {
52 color: $color-hover;
53 background-color: $color;
54 border-color: $color;
55 }
56
57 &:focus,
58 &.focus {
59 box-shadow: 0 0 0 3px rgba($color, .5);
60 }
61
62 &.disabled,
63 &:disabled {
64 color: $color;
65 background-color: transparent;
66 }
67
68 &:active,
69 &.active,
70 .show > &.dropdown-toggle {
71 color: $color-hover;
72 background-color: $color;
73 border-color: $color;
74 }
75 }
76
77 // Button sizes
78 @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
79 padding: $padding-y $padding-x;
80 font-size: $font-size;
81 line-height: $line-height;
82 @include border-radius($border-radius);
83 }