]>
Commit | Line | Data |
---|---|---|
7b869721 S |
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 | } |