Mercurial > nebulaweb3

comparison default/assets/scss/vendors/bootstrap/_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 // scss-lint:disable QualifyingElement
2
3 //
4 // Base styles
5 //
6
7 .btn {
8 display: inline-block;
9 font-weight: $btn-font-weight;
10 text-align: center;
11 white-space: nowrap;
12 vertical-align: middle;
13 user-select: none;
14 border: $input-btn-border-width solid transparent;
15 @include button-size($input-btn-padding-y, $input-btn-padding-x, $font-size-base, $input-btn-line-height, $btn-border-radius);
16 @include transition($btn-transition);
17
18 // Share hover and focus styles
19 @include hover-focus {
20 text-decoration: none;
21 }
22 &:focus,
23 &.focus {
24 outline: 0;
25 box-shadow: $btn-focus-box-shadow;
26 }
27
28 // Disabled comes first so active can properly restyle
29 &.disabled,
30 &:disabled {
31 opacity: .65;
32 @include box-shadow(none);
33 }
34
35 &:active,
36 &.active {
37 background-image: none;
38 @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
39 }
40 }
41
42 // Future-proof disabling of clicks on `<a>` elements
43 a.btn.disabled,
44 fieldset[disabled] a.btn {
45 pointer-events: none;
46 }
47
48
49 //
50 // Alternate buttons
51 //
52
53 @each $color, $value in $theme-colors {
54 .btn-#{$color} {
55 @include button-variant($value, $value);
56 }
57 }
58
59 @each $color, $value in $theme-colors {
60 .btn-outline-#{$color} {
61 @include button-outline-variant($value, #fff);
62 }
63 }
64
65
66 //
67 // Link buttons
68 //
69
70 // Make a button look and behave like a link
71 .btn-link {
72 font-weight: $font-weight-normal;
73 color: $link-color;
74 border-radius: 0;
75
76 &,
77 &:active,
78 &.active,
79 &:disabled {
80 background-color: transparent;
81 @include box-shadow(none);
82 }
83 &,
84 &:focus,
85 &:active {
86 border-color: transparent;
87 box-shadow: none;
88 }
89 @include hover {
90 border-color: transparent;
91 }
92 @include hover-focus {
93 color: $link-hover-color;
94 text-decoration: $link-hover-decoration;
95 background-color: transparent;
96 }
97 &:disabled {
98 color: $btn-link-disabled-color;
99
100 @include hover-focus {
101 text-decoration: none;
102 }
103 }
104 }
105
106
107 //
108 // Button Sizes
109 //
110
111 .btn-lg {
112 @include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
113 }
114
115 .btn-sm {
116 @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
117 }
118
119
120 //
121 // Block button
122 //
123
124 .btn-block {
125 display: block;
126 width: 100%;
127 }
128
129 // Vertically space out multiple block buttons
130 .btn-block + .btn-block {
131 margin-top: $btn-block-spacing-y;
132 }
133
134 // Specificity overrides
135 input[type="submit"],
136 input[type="reset"],
137 input[type="button"] {
138 &.btn-block {
139 width: 100%;
140 }
141 }