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