Mercurial > wikked

comparison static/bootstrap/less/theme.less @ 149:d29e2f337b00

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Updated to Bootstrap 3.0.
author Ludovic Chabant <ludovic@chabant.com>
date Thu, 12 Dec 2013 21:54:04 -0800
parents
children
comparison
equal deleted inserted replaced
148:f02e049d6546 149:d29e2f337b00
1
2 //
3 // Load core variables and mixins
4 // --------------------------------------------------
5
6 @import "variables.less";
7 @import "mixins.less";
8
9
10
11 //
12 // Buttons
13 // --------------------------------------------------
14
15 // Common styles
16 .btn-default,
17 .btn-primary,
18 .btn-success,
19 .btn-info,
20 .btn-warning,
21 .btn-danger {
22 text-shadow: 0 -1px 0 rgba(0,0,0,.2);
23 @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
24 .box-shadow(@shadow);
25
26 // Reset the shadow
27 &:active,
28 &.active {
29 .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
30 }
31 }
32
33 // Mixin for generating new styles
34 .btn-styles(@btn-color: #555) {
35 #gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 12%));
36 .reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners
37 background-repeat: repeat-x;
38 border-color: darken(@btn-color, 14%);
39
40 &:hover,
41 &:focus {
42 background-color: darken(@btn-color, 12%);
43 background-position: 0 -15px;
44 }
45
46 &:active,
47 &.active {
48 background-color: darken(@btn-color, 12%);
49 border-color: darken(@btn-color, 14%);
50 }
51 }
52
53 // Common styles
54 .btn {
55 // Remove the gradient for the pressed/active state
56 &:active,
57 &.active {
58 background-image: none;
59 }
60 }
61
62 // Apply the mixin to the buttons
63 .btn-default { .btn-styles(@btn-default-bg); text-shadow: 0 1px 0 #fff; border-color: #ccc; }
64 .btn-primary { .btn-styles(@btn-primary-bg); }
65 .btn-success { .btn-styles(@btn-success-bg); }
66 .btn-warning { .btn-styles(@btn-warning-bg); }
67 .btn-danger { .btn-styles(@btn-danger-bg); }
68 .btn-info { .btn-styles(@btn-info-bg); }
69
70
71
72 //
73 // Images
74 // --------------------------------------------------
75
76 .thumbnail,
77 .img-thumbnail {
78 .box-shadow(0 1px 2px rgba(0,0,0,.075));
79 }
80
81
82
83 //
84 // Dropdowns
85 // --------------------------------------------------
86
87 .dropdown-menu > li > a:hover,
88 .dropdown-menu > li > a:focus {
89 #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
90 background-color: darken(@dropdown-link-hover-bg, 5%);
91 }
92 .dropdown-menu > .active > a,
93 .dropdown-menu > .active > a:hover,
94 .dropdown-menu > .active > a:focus {
95 #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
96 background-color: darken(@dropdown-link-active-bg, 5%);
97 }
98
99
100
101 //
102 // Navbar
103 // --------------------------------------------------
104
105 // Default navbar
106 .navbar-default {
107 #gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg);
108 .reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
109 border-radius: @navbar-border-radius;
110 @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
111 .box-shadow(@shadow);
112
113 .navbar-nav > .active > a {
114 #gradient > .vertical(@start-color: darken(@navbar-default-bg, 5%); @end-color: darken(@navbar-default-bg, 2%));
115 .box-shadow(inset 0 3px 9px rgba(0,0,0,.075));
116 }
117 }
118 .navbar-brand,
119 .navbar-nav > li > a {
120 text-shadow: 0 1px 0 rgba(255,255,255,.25);
121 }
122
123 // Inverted navbar
124 .navbar-inverse {
125 #gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg);
126 .reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
127
128 .navbar-nav > .active > a {
129 #gradient > .vertical(@start-color: @navbar-inverse-bg; @end-color: lighten(@navbar-inverse-bg, 2.5%));
130 .box-shadow(inset 0 3px 9px rgba(0,0,0,.25));
131 }
132
133 .navbar-brand,
134 .navbar-nav > li > a {
135 text-shadow: 0 -1px 0 rgba(0,0,0,.25);
136 }
137 }
138
139 // Undo rounded corners in static and fixed navbars
140 .navbar-static-top,
141 .navbar-fixed-top,
142 .navbar-fixed-bottom {
143 border-radius: 0;
144 }
145
146
147
148 //
149 // Alerts
150 // --------------------------------------------------
151
152 // Common styles
153 .alert {
154 text-shadow: 0 1px 0 rgba(255,255,255,.2);
155 @shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05);
156 .box-shadow(@shadow);
157 }
158
159 // Mixin for generating new styles
160 .alert-styles(@color) {
161 #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 7.5%));
162 border-color: darken(@color, 15%);
163 }
164
165 // Apply the mixin to the alerts
166 .alert-success { .alert-styles(@alert-success-bg); }
167 .alert-info { .alert-styles(@alert-info-bg); }
168 .alert-warning { .alert-styles(@alert-warning-bg); }
169 .alert-danger { .alert-styles(@alert-danger-bg); }
170
171
172
173 //
174 // Progress bars
175 // --------------------------------------------------
176
177 // Give the progress background some depth
178 .progress {
179 #gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg)
180 }
181
182 // Mixin for generating new styles
183 .progress-bar-styles(@color) {
184 #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 10%));
185 }
186
187 // Apply the mixin to the progress bars
188 .progress-bar { .progress-bar-styles(@progress-bar-bg); }
189 .progress-bar-success { .progress-bar-styles(@progress-bar-success-bg); }
190 .progress-bar-info { .progress-bar-styles(@progress-bar-info-bg); }
191 .progress-bar-warning { .progress-bar-styles(@progress-bar-warning-bg); }
192 .progress-bar-danger { .progress-bar-styles(@progress-bar-danger-bg); }
193
194
195
196 //
197 // List groups
198 // --------------------------------------------------
199
200 .list-group {
201 border-radius: @border-radius-base;
202 .box-shadow(0 1px 2px rgba(0,0,0,.075));
203 }
204 .list-group-item.active,
205 .list-group-item.active:hover,
206 .list-group-item.active:focus {
207 text-shadow: 0 -1px 0 darken(@list-group-active-bg, 10%);
208 #gradient > .vertical(@start-color: @list-group-active-bg; @end-color: darken(@list-group-active-bg, 7.5%));
209 border-color: darken(@list-group-active-border, 7.5%);
210 }
211
212
213
214 //
215 // Panels
216 // --------------------------------------------------
217
218 // Common styles
219 .panel {
220 .box-shadow(0 1px 2px rgba(0,0,0,.05));
221 }
222
223 // Mixin for generating new styles
224 .panel-heading-styles(@color) {
225 #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 5%));
226 }
227
228 // Apply the mixin to the panel headings only
229 .panel-default > .panel-heading { .panel-heading-styles(@panel-default-heading-bg); }
230 .panel-primary > .panel-heading { .panel-heading-styles(@panel-primary-heading-bg); }
231 .panel-success > .panel-heading { .panel-heading-styles(@panel-success-heading-bg); }
232 .panel-info > .panel-heading { .panel-heading-styles(@panel-info-heading-bg); }
233 .panel-warning > .panel-heading { .panel-heading-styles(@panel-warning-heading-bg); }
234 .panel-danger > .panel-heading { .panel-heading-styles(@panel-danger-heading-bg); }
235
236
237
238 //
239 // Wells
240 // --------------------------------------------------
241
242 .well {
243 #gradient > .vertical(@start-color: darken(@well-bg, 5%); @end-color: @well-bg);
244 border-color: darken(@well-bg, 10%);
245 @shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
246 .box-shadow(@shadow);
247 }