]>
Commit | Line | Data |
---|---|---|
7b869721 S |
1 | // |
2 | // Buttons | |
3 | // -------------------------------------------------- | |
4 | ||
5 | ||
6 | // Base styles | |
7 | // -------------------------------------------------- | |
8 | ||
9 | // Core styles | |
10 | .btn { | |
11 | display: inline-block; | |
12 | margin-bottom: 0; // For input.btn | |
13 | font-weight: @btn-font-weight; | |
14 | text-align: center; | |
15 | vertical-align: middle; | |
16 | cursor: pointer; | |
17 | background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 | |
18 | border: 1px solid transparent; | |
19 | white-space: nowrap; | |
20 | .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @border-radius-base); | |
21 | .user-select(none); | |
22 | ||
23 | &:focus { | |
24 | .tab-focus(); | |
25 | } | |
26 | ||
27 | &:hover, | |
28 | &:focus { | |
29 | color: @btn-default-color; | |
30 | text-decoration: none; | |
31 | } | |
32 | ||
33 | &:active, | |
34 | &.active { | |
35 | outline: 0; | |
36 | background-image: none; | |
37 | .box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); | |
38 | } | |
39 | ||
40 | &.disabled, | |
41 | &[disabled], | |
42 | fieldset[disabled] & { | |
43 | cursor: not-allowed; | |
44 | pointer-events: none; // Future-proof disabling of clicks | |
45 | .opacity(.65); | |
46 | .box-shadow(none); | |
47 | } | |
48 | ||
49 | } | |
50 | ||
51 | ||
52 | // Alternate buttons | |
53 | // -------------------------------------------------- | |
54 | ||
55 | .btn-default { | |
56 | .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border); | |
57 | } | |
58 | .btn-primary { | |
59 | .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border); | |
60 | } | |
61 | // Warning appears as orange | |
62 | .btn-warning { | |
63 | .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border); | |
64 | } | |
65 | // Danger and error appear as red | |
66 | .btn-danger { | |
67 | .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border); | |
68 | } | |
69 | // Success appears as green | |
70 | .btn-success { | |
71 | .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border); | |
72 | } | |
73 | // Info appears as blue-green | |
74 | .btn-info { | |
75 | .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border); | |
76 | } | |
77 | ||
78 | ||
79 | // Link buttons | |
80 | // ------------------------- | |
81 | ||
82 | // Make a button look and behave like a link | |
83 | .btn-link { | |
84 | color: @link-color; | |
85 | font-weight: normal; | |
86 | cursor: pointer; | |
87 | border-radius: 0; | |
88 | ||
89 | &, | |
90 | &:active, | |
91 | &[disabled], | |
92 | fieldset[disabled] & { | |
93 | background-color: transparent; | |
94 | .box-shadow(none); | |
95 | } | |
96 | &, | |
97 | &:hover, | |
98 | &:focus, | |
99 | &:active { | |
100 | border-color: transparent; | |
101 | } | |
102 | &:hover, | |
103 | &:focus { | |
104 | color: @link-hover-color; | |
105 | text-decoration: underline; | |
106 | background-color: transparent; | |
107 | } | |
108 | &[disabled], | |
109 | fieldset[disabled] & { | |
110 | &:hover, | |
111 | &:focus { | |
112 | color: @btn-link-disabled-color; | |
113 | text-decoration: none; | |
114 | } | |
115 | } | |
116 | } | |
117 | ||
118 | ||
119 | // Button Sizes | |
120 | // -------------------------------------------------- | |
121 | ||
122 | .btn-lg { | |
123 | // line-height: ensure even-numbered height of button next to large input | |
124 | .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large); | |
125 | } | |
126 | .btn-sm, | |
127 | .btn-xs { | |
128 | // line-height: ensure proper height of button next to small input | |
129 | .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small); | |
130 | } | |
131 | .btn-xs { | |
132 | padding: 1px 5px; | |
133 | } | |
134 | ||
135 | ||
136 | // Block button | |
137 | // -------------------------------------------------- | |
138 | ||
139 | .btn-block { | |
140 | display: block; | |
141 | width: 100%; | |
142 | padding-left: 0; | |
143 | padding-right: 0; | |
144 | } | |
145 | ||
146 | // Vertically space out multiple block buttons | |
147 | .btn-block + .btn-block { | |
148 | margin-top: 5px; | |
149 | } | |
150 | ||
151 | // Specificity overrides | |
152 | input[type="submit"], | |
153 | input[type="reset"], | |
154 | input[type="button"] { | |
155 | &.btn-block { | |
156 | width: 100%; | |
157 | } | |
158 | } |