Mercurial > wikked

comparison static/bootstrap/less/buttons.less @ 61:130eccd396d8

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Now using Boostrap with LESS.
author Ludovic Chabant <ludovic@chabant.com>
date Wed, 06 Feb 2013 08:22:31 -0800
parents
children a5a3d454eac9
comparison
equal deleted inserted replaced
60:8250c977bc50 61:130eccd396d8
1 //
2 // Buttons
3 // --------------------------------------------------
4
5
6 // Base styles
7 // --------------------------------------------------
8
9 // Core
10 .btn {
11 display: inline-block;
12 .ie7-inline-block();
13 padding: 4px 12px;
14 margin-bottom: 0; // For input.btn
15 font-size: @baseFontSize;
16 line-height: @baseLineHeight;
17 text-align: center;
18 vertical-align: middle;
19 cursor: pointer;
20 .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
21 border: 1px solid @btnBorder;
22 *border: 0; // Remove the border to prevent IE7's black border on input:focus
23 border-bottom-color: darken(@btnBorder, 10%);
24 .border-radius(@baseBorderRadius);
25 .ie7-restore-left-whitespace(); // Give IE7 some love
26 .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
27
28 // Hover state
29 &:hover {
30 color: @grayDark;
31 text-decoration: none;
32 background-position: 0 -15px;
33
34 // transition is only when going to hover, otherwise the background
35 // behind the gradient (there for IE<=9 fallback) gets mismatched
36 .transition(background-position .1s linear);
37 }
38
39 // Focus state for keyboard and accessibility
40 &:focus {
41 .tab-focus();
42 }
43
44 // Active state
45 &.active,
46 &:active {
47 background-image: none;
48 outline: 0;
49 .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)");
50 }
51
52 // Disabled state
53 &.disabled,
54 &[disabled] {
55 cursor: default;
56 background-image: none;
57 .opacity(65);
58 .box-shadow(none);
59 }
60
61 }
62
63
64
65 // Button Sizes
66 // --------------------------------------------------
67
68 // Large
69 .btn-large {
70 padding: @paddingLarge;
71 font-size: @fontSizeLarge;
72 .border-radius(@borderRadiusLarge);
73 }
74 .btn-large [class^="icon-"],
75 .btn-large [class*=" icon-"] {
76 margin-top: 4px;
77 }
78
79 // Small
80 .btn-small {
81 padding: @paddingSmall;
82 font-size: @fontSizeSmall;
83 .border-radius(@borderRadiusSmall);
84 }
85 .btn-small [class^="icon-"],
86 .btn-small [class*=" icon-"] {
87 margin-top: 0;
88 }
89 .btn-mini [class^="icon-"],
90 .btn-mini [class*=" icon-"] {
91 margin-top: -1px;
92 }
93
94 // Mini
95 .btn-mini {
96 padding: @paddingMini;
97 font-size: @fontSizeMini;
98 .border-radius(@borderRadiusSmall);
99 }
100
101
102 // Block button
103 // -------------------------
104
105 .btn-block {
106 display: block;
107 width: 100%;
108 padding-left: 0;
109 padding-right: 0;
110 .box-sizing(border-box);
111 }
112
113 // Vertically space out multiple block buttons
114 .btn-block + .btn-block {
115 margin-top: 5px;
116 }
117
118 // Specificity overrides
119 input[type="submit"],
120 input[type="reset"],
121 input[type="button"] {
122 &.btn-block {
123 width: 100%;
124 }
125 }
126
127
128
129 // Alternate buttons
130 // --------------------------------------------------
131
132 // Provide *some* extra contrast for those who can get it
133 .btn-primary.active,
134 .btn-warning.active,
135 .btn-danger.active,
136 .btn-success.active,
137 .btn-info.active,
138 .btn-inverse.active {
139 color: rgba(255,255,255,.75);
140 }
141
142 // Set the backgrounds
143 // -------------------------
144 .btn {
145 // reset here as of 2.0.3 due to Recess property order
146 border-color: #c5c5c5;
147 border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25);
148 }
149 .btn-primary {
150 .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
151 }
152 // Warning appears are orange
153 .btn-warning {
154 .buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight);
155 }
156 // Danger and error appear as red
157 .btn-danger {
158 .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight);
159 }
160 // Success appears as green
161 .btn-success {
162 .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight);
163 }
164 // Info appears as a neutral blue
165 .btn-info {
166 .buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight);
167 }
168 // Inverse appears as dark gray
169 .btn-inverse {
170 .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight);
171 }
172
173
174 // Cross-browser Jank
175 // --------------------------------------------------
176
177 button.btn,
178 input[type="submit"].btn {
179
180 // Firefox 3.6 only I believe
181 &::-moz-focus-inner {
182 padding: 0;
183 border: 0;
184 }
185
186 // IE7 has some default padding on button controls
187 *padding-top: 3px;
188 *padding-bottom: 3px;
189
190 &.btn-large {
191 *padding-top: 7px;
192 *padding-bottom: 7px;
193 }
194 &.btn-small {
195 *padding-top: 3px;
196 *padding-bottom: 3px;
197 }
198 &.btn-mini {
199 *padding-top: 1px;
200 *padding-bottom: 1px;
201 }
202 }
203
204
205 // Link buttons
206 // --------------------------------------------------
207
208 // Make a button look and behave like a link
209 .btn-link,
210 .btn-link:active,
211 .btn-link[disabled] {
212 background-color: transparent;
213 background-image: none;
214 .box-shadow(none);
215 }
216 .btn-link {
217 border-color: transparent;
218 cursor: pointer;
219 color: @linkColor;
220 .border-radius(0);
221 }
222 .btn-link:hover {
223 color: @linkColorHover;
224 text-decoration: underline;
225 background-color: transparent;
226 }
227 .btn-link[disabled]:hover {
228 color: @grayDark;
229 text-decoration: none;
230 }