less-rails-bootstrap 2.3.3 → 3.0.0.rc1
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +1 -0
- data/CHANGELOG.md +4 -0
- data/README.md +7 -11
- data/lib/less/rails/bootstrap/version.rb +1 -1
- data/scripts/update_bootstrap.sh +37 -8
- data/test/cases/usage_css_spec.rb +15 -12
- data/test/cases/usage_js_spec.rb +4 -4
- data/test/dummy_app/app/assets/stylesheets/fonts.css.less +2 -0
- data/test/dummy_app/app/assets/stylesheets/framework.css.less +4 -2
- data/test/dummy_app/app/assets/stylesheets/individual.css.less +2 -2
- data/test/spec_helper.rb +1 -2
- data/vendor/assets/javascripts/twitter/bootstrap.js +0 -1
- data/vendor/assets/javascripts/twitter/bootstrap/affix.js +58 -49
- data/vendor/assets/javascripts/twitter/bootstrap/alert.js +36 -37
- data/vendor/assets/javascripts/twitter/bootstrap/button.js +41 -39
- data/vendor/assets/javascripts/twitter/bootstrap/carousel.js +131 -125
- data/vendor/assets/javascripts/twitter/bootstrap/collapse.js +108 -96
- data/vendor/assets/javascripts/twitter/bootstrap/dropdown.js +72 -87
- data/vendor/assets/javascripts/twitter/bootstrap/modal.js +149 -155
- data/vendor/assets/javascripts/twitter/bootstrap/popover.js +60 -59
- data/vendor/assets/javascripts/twitter/bootstrap/scrollspy.js +103 -107
- data/vendor/assets/javascripts/twitter/bootstrap/tab.js +73 -82
- data/vendor/assets/javascripts/twitter/bootstrap/tooltip.js +258 -255
- data/vendor/assets/javascripts/twitter/bootstrap/transition.js +34 -38
- data/vendor/frameworks/twitter/bootstrap/accordion.less +9 -12
- data/vendor/frameworks/twitter/bootstrap/alerts.less +43 -53
- data/vendor/frameworks/twitter/bootstrap/bootstrap.less +21 -21
- data/vendor/frameworks/twitter/bootstrap/breadcrumbs.less +7 -8
- data/vendor/frameworks/twitter/bootstrap/button-groups.less +93 -151
- data/vendor/frameworks/twitter/bootstrap/buttons.less +93 -164
- data/vendor/frameworks/twitter/bootstrap/carousel.less +110 -63
- data/vendor/frameworks/twitter/bootstrap/close.less +18 -17
- data/vendor/frameworks/twitter/bootstrap/code.less +14 -20
- data/vendor/frameworks/twitter/bootstrap/component-animations.less +10 -3
- data/vendor/frameworks/twitter/bootstrap/dropdowns.less +66 -143
- data/vendor/frameworks/twitter/bootstrap/forms.less +281 -548
- data/vendor/frameworks/twitter/bootstrap/grid.less +194 -11
- data/vendor/frameworks/twitter/bootstrap/media.less +8 -7
- data/vendor/frameworks/twitter/bootstrap/mixins.less +290 -446
- data/vendor/frameworks/twitter/bootstrap/modals.less +92 -51
- data/vendor/frameworks/twitter/bootstrap/navbar.less +285 -402
- data/vendor/frameworks/twitter/bootstrap/navs.less +176 -348
- data/vendor/frameworks/twitter/bootstrap/pager.less +45 -33
- data/vendor/frameworks/twitter/bootstrap/pagination.less +89 -104
- data/vendor/frameworks/twitter/bootstrap/popovers.less +53 -51
- data/vendor/frameworks/twitter/bootstrap/progress-bars.less +28 -45
- data/vendor/frameworks/twitter/bootstrap/responsive-utilities.less +92 -32
- data/vendor/frameworks/twitter/bootstrap/scaffolding.less +60 -18
- data/vendor/frameworks/twitter/bootstrap/tables.less +131 -164
- data/vendor/frameworks/twitter/bootstrap/thumbnails.less +20 -31
- data/vendor/frameworks/twitter/bootstrap/tooltip.less +45 -20
- data/vendor/frameworks/twitter/bootstrap/type.less +84 -99
- data/vendor/frameworks/twitter/bootstrap/utilities.less +17 -5
- data/vendor/frameworks/twitter/bootstrap/variables.less +446 -179
- data/vendor/frameworks/twitter/bootstrap/wells.less +5 -5
- metadata +41 -44
- data/vendor/assets/images/twitter/bootstrap/glyphicons-halflings-white.png +0 -0
- data/vendor/assets/images/twitter/bootstrap/glyphicons-halflings.png +0 -0
- data/vendor/assets/javascripts/twitter/bootstrap/typeahead.js +0 -335
- data/vendor/assets/stylesheets/twitter/bootstrap-responsive.css.less +0 -1
- data/vendor/assets/stylesheets/twitter/bootstrap.css.less +0 -1
- data/vendor/frameworks/twitter/bootstrap.less +0 -1
- data/vendor/frameworks/twitter/bootstrap/hero-unit.less +0 -25
- data/vendor/frameworks/twitter/bootstrap/labels-badges.less +0 -84
- data/vendor/frameworks/twitter/bootstrap/layouts.less +0 -16
- data/vendor/frameworks/twitter/bootstrap/reset.less +0 -216
- data/vendor/frameworks/twitter/bootstrap/responsive-1200px-min.less +0 -28
- data/vendor/frameworks/twitter/bootstrap/responsive-767px-max.less +0 -193
- data/vendor/frameworks/twitter/bootstrap/responsive-768px-979px.less +0 -19
- data/vendor/frameworks/twitter/bootstrap/responsive-navbar.less +0 -189
- data/vendor/frameworks/twitter/bootstrap/responsive.less +0 -48
- data/vendor/frameworks/twitter/bootstrap/sprites.less +0 -197
@@ -2,20 +2,203 @@
|
|
2
2
|
// Grid system
|
3
3
|
// --------------------------------------------------
|
4
4
|
|
5
|
+
// Set the container width, and override it for fixed navbars in media queries
|
6
|
+
.container {
|
7
|
+
.container-fixed();
|
8
|
+
}
|
9
|
+
|
10
|
+
// Mobile-first defaults
|
11
|
+
.row {
|
12
|
+
.make-row();
|
13
|
+
}
|
14
|
+
|
15
|
+
// Common styles for small and large grid columns
|
16
|
+
.col-1,
|
17
|
+
.col-2,
|
18
|
+
.col-3,
|
19
|
+
.col-4,
|
20
|
+
.col-5,
|
21
|
+
.col-6,
|
22
|
+
.col-7,
|
23
|
+
.col-8,
|
24
|
+
.col-9,
|
25
|
+
.col-10,
|
26
|
+
.col-11,
|
27
|
+
.col-12,
|
28
|
+
.col-sm-1,
|
29
|
+
.col-sm-2,
|
30
|
+
.col-sm-3,
|
31
|
+
.col-sm-4,
|
32
|
+
.col-sm-5,
|
33
|
+
.col-sm-6,
|
34
|
+
.col-sm-7,
|
35
|
+
.col-sm-8,
|
36
|
+
.col-sm-9,
|
37
|
+
.col-sm-10,
|
38
|
+
.col-sm-11,
|
39
|
+
.col-sm-12,
|
40
|
+
.col-lg-1,
|
41
|
+
.col-lg-2,
|
42
|
+
.col-lg-3,
|
43
|
+
.col-lg-4,
|
44
|
+
.col-lg-5,
|
45
|
+
.col-lg-6,
|
46
|
+
.col-lg-7,
|
47
|
+
.col-lg-8,
|
48
|
+
.col-lg-9,
|
49
|
+
.col-lg-10,
|
50
|
+
.col-lg-11,
|
51
|
+
.col-lg-12 {
|
52
|
+
position: relative;
|
53
|
+
// Prevent columns from collapsing when empty
|
54
|
+
min-height: 1px;
|
55
|
+
// Inner gutter via padding
|
56
|
+
padding-left: (@grid-gutter-width / 2);
|
57
|
+
padding-right: (@grid-gutter-width / 2);
|
58
|
+
}
|
59
|
+
|
60
|
+
|
61
|
+
|
62
|
+
//
|
63
|
+
// Container and grid column sizing
|
64
|
+
//
|
65
|
+
|
66
|
+
// Tiny device columns (smartphones)
|
67
|
+
.col-1,
|
68
|
+
.col-2,
|
69
|
+
.col-3,
|
70
|
+
.col-4,
|
71
|
+
.col-5,
|
72
|
+
.col-6,
|
73
|
+
.col-7,
|
74
|
+
.col-8,
|
75
|
+
.col-9,
|
76
|
+
.col-10,
|
77
|
+
.col-11,
|
78
|
+
.col-12 {
|
79
|
+
float: left;
|
80
|
+
}
|
81
|
+
.col-1 { width: percentage((1 / @grid-columns)); }
|
82
|
+
.col-2 { width: percentage((2 / @grid-columns)); }
|
83
|
+
.col-3 { width: percentage((3 / @grid-columns)); }
|
84
|
+
.col-4 { width: percentage((4 / @grid-columns)); }
|
85
|
+
.col-5 { width: percentage((5 / @grid-columns)); }
|
86
|
+
.col-6 { width: percentage((6 / @grid-columns)); }
|
87
|
+
.col-7 { width: percentage((7 / @grid-columns)); }
|
88
|
+
.col-8 { width: percentage((8 / @grid-columns)); }
|
89
|
+
.col-9 { width: percentage((9 / @grid-columns)); }
|
90
|
+
.col-10 { width: percentage((10/ @grid-columns)); }
|
91
|
+
.col-11 { width: percentage((11/ @grid-columns)); }
|
92
|
+
.col-12 { width: 100%; }
|
5
93
|
|
6
|
-
//
|
7
|
-
|
94
|
+
// Small device columns (phones to tablets)
|
95
|
+
@media (min-width: @screen-tablet) {
|
96
|
+
.container {
|
97
|
+
max-width: @container-tablet;
|
98
|
+
}
|
99
|
+
|
100
|
+
.col-sm-1,
|
101
|
+
.col-sm-2,
|
102
|
+
.col-sm-3,
|
103
|
+
.col-sm-4,
|
104
|
+
.col-sm-5,
|
105
|
+
.col-sm-6,
|
106
|
+
.col-sm-7,
|
107
|
+
.col-sm-8,
|
108
|
+
.col-sm-9,
|
109
|
+
.col-sm-10,
|
110
|
+
.col-sm-11,
|
111
|
+
.col-sm-12 {
|
112
|
+
float: left;
|
113
|
+
}
|
114
|
+
.col-sm-1 { width: percentage((1 / @grid-columns)); }
|
115
|
+
.col-sm-2 { width: percentage((2 / @grid-columns)); }
|
116
|
+
.col-sm-3 { width: percentage((3 / @grid-columns)); }
|
117
|
+
.col-sm-4 { width: percentage((4 / @grid-columns)); }
|
118
|
+
.col-sm-5 { width: percentage((5 / @grid-columns)); }
|
119
|
+
.col-sm-6 { width: percentage((6 / @grid-columns)); }
|
120
|
+
.col-sm-7 { width: percentage((7 / @grid-columns)); }
|
121
|
+
.col-sm-8 { width: percentage((8 / @grid-columns)); }
|
122
|
+
.col-sm-9 { width: percentage((9 / @grid-columns)); }
|
123
|
+
.col-sm-10 { width: percentage((10/ @grid-columns)); }
|
124
|
+
.col-sm-11 { width: percentage((11/ @grid-columns)); }
|
125
|
+
.col-sm-12 { width: 100%; }
|
126
|
+
|
127
|
+
// Push and pull columns for source order changes
|
128
|
+
.col-push-1 { left: percentage((1 / @grid-columns)); }
|
129
|
+
.col-push-2 { left: percentage((2 / @grid-columns)); }
|
130
|
+
.col-push-3 { left: percentage((3 / @grid-columns)); }
|
131
|
+
.col-push-4 { left: percentage((4 / @grid-columns)); }
|
132
|
+
.col-push-5 { left: percentage((5 / @grid-columns)); }
|
133
|
+
.col-push-6 { left: percentage((6 / @grid-columns)); }
|
134
|
+
.col-push-7 { left: percentage((7 / @grid-columns)); }
|
135
|
+
.col-push-8 { left: percentage((8 / @grid-columns)); }
|
136
|
+
.col-push-9 { left: percentage((9 / @grid-columns)); }
|
137
|
+
.col-push-10 { left: percentage((10/ @grid-columns)); }
|
138
|
+
.col-push-11 { left: percentage((11/ @grid-columns)); }
|
139
|
+
|
140
|
+
.col-pull-1 { right: percentage((1 / @grid-columns)); }
|
141
|
+
.col-pull-2 { right: percentage((2 / @grid-columns)); }
|
142
|
+
.col-pull-3 { right: percentage((3 / @grid-columns)); }
|
143
|
+
.col-pull-4 { right: percentage((4 / @grid-columns)); }
|
144
|
+
.col-pull-5 { right: percentage((5 / @grid-columns)); }
|
145
|
+
.col-pull-6 { right: percentage((6 / @grid-columns)); }
|
146
|
+
.col-pull-7 { right: percentage((7 / @grid-columns)); }
|
147
|
+
.col-pull-8 { right: percentage((8 / @grid-columns)); }
|
148
|
+
.col-pull-9 { right: percentage((9 / @grid-columns)); }
|
149
|
+
.col-pull-10 { right: percentage((10/ @grid-columns)); }
|
150
|
+
.col-pull-11 { right: percentage((11/ @grid-columns)); }
|
151
|
+
}
|
8
152
|
|
9
|
-
//
|
10
|
-
|
153
|
+
// Medium and large device columns (desktop and up)
|
154
|
+
@media (min-width: @screen-desktop) {
|
155
|
+
.container {
|
156
|
+
max-width: @container-desktop;
|
157
|
+
}
|
158
|
+
.col-lg-1,
|
159
|
+
.col-lg-2,
|
160
|
+
.col-lg-3,
|
161
|
+
.col-lg-4,
|
162
|
+
.col-lg-5,
|
163
|
+
.col-lg-6,
|
164
|
+
.col-lg-7,
|
165
|
+
.col-lg-8,
|
166
|
+
.col-lg-9,
|
167
|
+
.col-lg-10,
|
168
|
+
.col-lg-11,
|
169
|
+
.col-lg-12 {
|
170
|
+
float: left;
|
171
|
+
}
|
172
|
+
.col-lg-1 { width: percentage((1 / @grid-columns)); }
|
173
|
+
.col-lg-2 { width: percentage((2 / @grid-columns)); }
|
174
|
+
.col-lg-3 { width: percentage((3 / @grid-columns)); }
|
175
|
+
.col-lg-4 { width: percentage((4 / @grid-columns)); }
|
176
|
+
.col-lg-5 { width: percentage((5 / @grid-columns)); }
|
177
|
+
.col-lg-6 { width: percentage((6 / @grid-columns)); }
|
178
|
+
.col-lg-7 { width: percentage((7 / @grid-columns)); }
|
179
|
+
.col-lg-8 { width: percentage((8 / @grid-columns)); }
|
180
|
+
.col-lg-9 { width: percentage((9 / @grid-columns)); }
|
181
|
+
.col-lg-10 { width: percentage((10/ @grid-columns)); }
|
182
|
+
.col-lg-11 { width: percentage((11/ @grid-columns)); }
|
183
|
+
.col-lg-12 { width: 100%; }
|
11
184
|
|
12
|
-
//
|
13
|
-
|
14
|
-
.
|
15
|
-
|
185
|
+
// Offsets
|
186
|
+
.col-offset-1 { margin-left: percentage((1 / @grid-columns)); }
|
187
|
+
.col-offset-2 { margin-left: percentage((2 / @grid-columns)); }
|
188
|
+
.col-offset-3 { margin-left: percentage((3 / @grid-columns)); }
|
189
|
+
.col-offset-4 { margin-left: percentage((4 / @grid-columns)); }
|
190
|
+
.col-offset-5 { margin-left: percentage((5 / @grid-columns)); }
|
191
|
+
.col-offset-6 { margin-left: percentage((6 / @grid-columns)); }
|
192
|
+
.col-offset-7 { margin-left: percentage((7 / @grid-columns)); }
|
193
|
+
.col-offset-8 { margin-left: percentage((8 / @grid-columns)); }
|
194
|
+
.col-offset-9 { margin-left: percentage((9 / @grid-columns)); }
|
195
|
+
.col-offset-10 { margin-left: percentage((10/ @grid-columns)); }
|
196
|
+
.col-offset-11 { margin-left: percentage((11/ @grid-columns)); }
|
16
197
|
}
|
17
198
|
|
18
|
-
|
19
|
-
|
20
|
-
|
199
|
+
// Large desktops and up
|
200
|
+
@media (min-width: @screen-large-desktop) {
|
201
|
+
.container {
|
202
|
+
max-width: @container-large-desktop;
|
203
|
+
}
|
21
204
|
}
|
@@ -10,7 +10,6 @@
|
|
10
10
|
.media,
|
11
11
|
.media-body {
|
12
12
|
overflow: hidden;
|
13
|
-
*overflow: visible;
|
14
13
|
zoom: 1;
|
15
14
|
}
|
16
15
|
|
@@ -37,11 +36,13 @@
|
|
37
36
|
// Media image alignment
|
38
37
|
// -------------------------
|
39
38
|
|
40
|
-
.media
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
39
|
+
.media {
|
40
|
+
> .pull-left {
|
41
|
+
margin-right: 10px;
|
42
|
+
}
|
43
|
+
> .pull-right {
|
44
|
+
margin-left: 10px;
|
45
|
+
}
|
45
46
|
}
|
46
47
|
|
47
48
|
|
@@ -50,6 +51,6 @@
|
|
50
51
|
|
51
52
|
// Undo default ul/ol styles
|
52
53
|
.media-list {
|
53
|
-
|
54
|
+
padding-left: 0;
|
54
55
|
list-style: none;
|
55
56
|
}
|
@@ -3,21 +3,24 @@
|
|
3
3
|
// --------------------------------------------------
|
4
4
|
|
5
5
|
|
6
|
-
//
|
7
|
-
//
|
6
|
+
// Utilities
|
7
|
+
// -------------------------
|
8
8
|
|
9
9
|
// Clearfix
|
10
|
-
//
|
11
|
-
//
|
12
|
-
|
13
|
-
|
10
|
+
// Source: http://nicolasgallagher.com/micro-clearfix-hack/
|
11
|
+
//
|
12
|
+
// For modern browsers
|
13
|
+
// 1. The space content is one way to avoid an Opera bug when the
|
14
|
+
// contenteditable attribute is included anywhere else in the document.
|
15
|
+
// Otherwise it causes space to appear at the top and bottom of elements
|
16
|
+
// that are clearfixed.
|
17
|
+
// 2. The use of `table` rather than `block` is only necessary if using
|
18
|
+
// `:before` to contain the top-margins of child elements.
|
19
|
+
.clearfix() {
|
14
20
|
&:before,
|
15
21
|
&:after {
|
16
|
-
|
17
|
-
|
18
|
-
// Fixes Opera/contenteditable bug:
|
19
|
-
// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
|
20
|
-
line-height: 0;
|
22
|
+
content: " "; /* 1 */
|
23
|
+
display: table; /* 2 */
|
21
24
|
}
|
22
25
|
&:after {
|
23
26
|
clear: both;
|
@@ -25,7 +28,6 @@
|
|
25
28
|
}
|
26
29
|
|
27
30
|
// Webkit-style focus
|
28
|
-
// ------------------
|
29
31
|
.tab-focus() {
|
30
32
|
// Default
|
31
33
|
outline: thin dotted #333;
|
@@ -35,41 +37,14 @@
|
|
35
37
|
}
|
36
38
|
|
37
39
|
// Center-align a block level element
|
38
|
-
// ----------------------------------
|
39
40
|
.center-block() {
|
40
41
|
display: block;
|
41
42
|
margin-left: auto;
|
42
43
|
margin-right: auto;
|
43
44
|
}
|
44
45
|
|
45
|
-
// IE7 inline-block
|
46
|
-
// ----------------
|
47
|
-
.ie7-inline-block() {
|
48
|
-
*display: inline; /* IE7 inline-block hack */
|
49
|
-
*zoom: 1;
|
50
|
-
}
|
51
|
-
|
52
|
-
// IE7 likes to collapse whitespace on either side of the inline-block elements.
|
53
|
-
// Ems because we're attempting to match the width of a space character. Left
|
54
|
-
// version is for form buttons, which typically come after other elements, and
|
55
|
-
// right version is for icons, which come before. Applying both is ok, but it will
|
56
|
-
// mean that space between those elements will be .6em (~2 space characters) in IE7,
|
57
|
-
// instead of the 1 space in other browsers.
|
58
|
-
.ie7-restore-left-whitespace() {
|
59
|
-
*margin-left: .3em;
|
60
|
-
|
61
|
-
&:first-child {
|
62
|
-
*margin-left: 0;
|
63
|
-
}
|
64
|
-
}
|
65
|
-
|
66
|
-
.ie7-restore-right-whitespace() {
|
67
|
-
*margin-right: .3em;
|
68
|
-
}
|
69
|
-
|
70
46
|
// Sizing shortcuts
|
71
|
-
|
72
|
-
.size(@height, @width) {
|
47
|
+
.size(@width, @height) {
|
73
48
|
width: @width;
|
74
49
|
height: @height;
|
75
50
|
}
|
@@ -78,21 +53,14 @@
|
|
78
53
|
}
|
79
54
|
|
80
55
|
// Placeholder text
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
}
|
86
|
-
&:-ms-input-placeholder {
|
87
|
-
color: @color;
|
88
|
-
}
|
89
|
-
&::-webkit-input-placeholder {
|
90
|
-
color: @color;
|
91
|
-
}
|
56
|
+
.placeholder(@color: @input-color-placeholder) {
|
57
|
+
&:-moz-placeholder { color: @color; } // Firefox 4-18
|
58
|
+
&::-moz-placeholder { color: @color; } // Firefox 19+
|
59
|
+
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
|
60
|
+
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
|
92
61
|
}
|
93
62
|
|
94
63
|
// Text overflow
|
95
|
-
// -------------------------
|
96
64
|
// Requires inline-block or block for proper styling
|
97
65
|
.text-overflow() {
|
98
66
|
overflow: hidden;
|
@@ -101,10 +69,9 @@
|
|
101
69
|
}
|
102
70
|
|
103
71
|
// CSS image replacement
|
104
|
-
// -------------------------
|
105
72
|
// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
|
106
|
-
.hide-text {
|
107
|
-
font: 0/0 a;
|
73
|
+
.hide-text() {
|
74
|
+
font: ~"0/0" a;
|
108
75
|
color: transparent;
|
109
76
|
text-shadow: none;
|
110
77
|
background-color: transparent;
|
@@ -112,209 +79,83 @@
|
|
112
79
|
}
|
113
80
|
|
114
81
|
|
115
|
-
// FONTS
|
116
|
-
// --------------------------------------------------
|
117
|
-
|
118
|
-
#font {
|
119
|
-
#family {
|
120
|
-
.serif() {
|
121
|
-
font-family: @serifFontFamily;
|
122
|
-
}
|
123
|
-
.sans-serif() {
|
124
|
-
font-family: @sansFontFamily;
|
125
|
-
}
|
126
|
-
.monospace() {
|
127
|
-
font-family: @monoFontFamily;
|
128
|
-
}
|
129
|
-
}
|
130
|
-
.shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
|
131
|
-
font-size: @size;
|
132
|
-
font-weight: @weight;
|
133
|
-
line-height: @lineHeight;
|
134
|
-
}
|
135
|
-
.serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
|
136
|
-
#font > #family > .serif;
|
137
|
-
#font > .shorthand(@size, @weight, @lineHeight);
|
138
|
-
}
|
139
|
-
.sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
|
140
|
-
#font > #family > .sans-serif;
|
141
|
-
#font > .shorthand(@size, @weight, @lineHeight);
|
142
|
-
}
|
143
|
-
.monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
|
144
|
-
#font > #family > .monospace;
|
145
|
-
#font > .shorthand(@size, @weight, @lineHeight);
|
146
|
-
}
|
147
|
-
}
|
148
|
-
|
149
|
-
|
150
|
-
// FORMS
|
151
|
-
// --------------------------------------------------
|
152
|
-
|
153
|
-
// Block level inputs
|
154
|
-
.input-block-level {
|
155
|
-
display: block;
|
156
|
-
width: 100%;
|
157
|
-
min-height: @inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
|
158
|
-
.box-sizing(border-box); // Makes inputs behave like true block-level elements
|
159
|
-
}
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
// Mixin for form field states
|
164
|
-
.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
|
165
|
-
// Set the text color
|
166
|
-
.control-label,
|
167
|
-
.help-block,
|
168
|
-
.help-inline {
|
169
|
-
color: @textColor;
|
170
|
-
}
|
171
|
-
// Style inputs accordingly
|
172
|
-
.checkbox,
|
173
|
-
.radio,
|
174
|
-
input,
|
175
|
-
select,
|
176
|
-
textarea {
|
177
|
-
color: @textColor;
|
178
|
-
}
|
179
|
-
input,
|
180
|
-
select,
|
181
|
-
textarea {
|
182
|
-
border-color: @borderColor;
|
183
|
-
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
|
184
|
-
&:focus {
|
185
|
-
border-color: darken(@borderColor, 10%);
|
186
|
-
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
|
187
|
-
.box-shadow(@shadow);
|
188
|
-
}
|
189
|
-
}
|
190
|
-
// Give a small background color for input-prepend/-append
|
191
|
-
.input-prepend .add-on,
|
192
|
-
.input-append .add-on {
|
193
|
-
color: @textColor;
|
194
|
-
background-color: @backgroundColor;
|
195
|
-
border-color: @textColor;
|
196
|
-
}
|
197
|
-
}
|
198
|
-
|
199
|
-
|
200
82
|
|
201
83
|
// CSS3 PROPERTIES
|
202
84
|
// --------------------------------------------------
|
203
85
|
|
204
|
-
//
|
205
|
-
.border-radius(@radius) {
|
206
|
-
-webkit-border-radius: @radius;
|
207
|
-
-moz-border-radius: @radius;
|
208
|
-
border-radius: @radius;
|
209
|
-
}
|
210
|
-
|
211
|
-
// Single Corner Border Radius
|
212
|
-
.border-top-left-radius(@radius) {
|
213
|
-
-webkit-border-top-left-radius: @radius;
|
214
|
-
-moz-border-radius-topleft: @radius;
|
215
|
-
border-top-left-radius: @radius;
|
216
|
-
}
|
217
|
-
.border-top-right-radius(@radius) {
|
218
|
-
-webkit-border-top-right-radius: @radius;
|
219
|
-
-moz-border-radius-topright: @radius;
|
220
|
-
border-top-right-radius: @radius;
|
221
|
-
}
|
222
|
-
.border-bottom-right-radius(@radius) {
|
223
|
-
-webkit-border-bottom-right-radius: @radius;
|
224
|
-
-moz-border-radius-bottomright: @radius;
|
225
|
-
border-bottom-right-radius: @radius;
|
226
|
-
}
|
227
|
-
.border-bottom-left-radius(@radius) {
|
228
|
-
-webkit-border-bottom-left-radius: @radius;
|
229
|
-
-moz-border-radius-bottomleft: @radius;
|
230
|
-
border-bottom-left-radius: @radius;
|
231
|
-
}
|
232
|
-
|
233
|
-
// Single Side Border Radius
|
86
|
+
// Single side border-radius
|
234
87
|
.border-top-radius(@radius) {
|
235
|
-
|
236
|
-
|
88
|
+
border-top-right-radius: @radius;
|
89
|
+
border-top-left-radius: @radius;
|
237
90
|
}
|
238
91
|
.border-right-radius(@radius) {
|
239
|
-
|
240
|
-
|
92
|
+
border-bottom-right-radius: @radius;
|
93
|
+
border-top-right-radius: @radius;
|
241
94
|
}
|
242
95
|
.border-bottom-radius(@radius) {
|
243
|
-
|
244
|
-
|
96
|
+
border-bottom-right-radius: @radius;
|
97
|
+
border-bottom-left-radius: @radius;
|
245
98
|
}
|
246
99
|
.border-left-radius(@radius) {
|
247
|
-
|
248
|
-
|
100
|
+
border-bottom-left-radius: @radius;
|
101
|
+
border-top-left-radius: @radius;
|
249
102
|
}
|
250
103
|
|
251
104
|
// Drop shadows
|
252
105
|
.box-shadow(@shadow) {
|
253
|
-
-webkit-box-shadow: @shadow;
|
254
|
-
-moz-box-shadow: @shadow;
|
106
|
+
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
|
255
107
|
box-shadow: @shadow;
|
256
108
|
}
|
257
109
|
|
258
110
|
// Transitions
|
259
111
|
.transition(@transition) {
|
260
112
|
-webkit-transition: @transition;
|
261
|
-
-moz-transition: @transition;
|
262
|
-
-o-transition: @transition;
|
263
113
|
transition: @transition;
|
264
114
|
}
|
265
115
|
.transition-delay(@transition-delay) {
|
266
116
|
-webkit-transition-delay: @transition-delay;
|
267
|
-
-moz-transition-delay: @transition-delay;
|
268
|
-
-o-transition-delay: @transition-delay;
|
269
117
|
transition-delay: @transition-delay;
|
270
118
|
}
|
271
119
|
.transition-duration(@transition-duration) {
|
272
120
|
-webkit-transition-duration: @transition-duration;
|
273
|
-
-moz-transition-duration: @transition-duration;
|
274
|
-
-o-transition-duration: @transition-duration;
|
275
121
|
transition-duration: @transition-duration;
|
276
122
|
}
|
123
|
+
.transition-transform(@transition) {
|
124
|
+
-webkit-transition: -webkit-transform @transition;
|
125
|
+
-moz-transition: -moz-transform @transition;
|
126
|
+
-o-transition: -o-transform @transition;
|
127
|
+
transition: transform @transition;
|
128
|
+
}
|
277
129
|
|
278
130
|
// Transformations
|
279
131
|
.rotate(@degrees) {
|
280
132
|
-webkit-transform: rotate(@degrees);
|
281
|
-
-moz-transform: rotate(@degrees);
|
282
133
|
-ms-transform: rotate(@degrees);
|
283
|
-
-o-transform: rotate(@degrees);
|
284
134
|
transform: rotate(@degrees);
|
285
135
|
}
|
286
136
|
.scale(@ratio) {
|
287
137
|
-webkit-transform: scale(@ratio);
|
288
|
-
-moz-transform: scale(@ratio);
|
289
138
|
-ms-transform: scale(@ratio);
|
290
|
-
-o-transform: scale(@ratio);
|
291
139
|
transform: scale(@ratio);
|
292
140
|
}
|
293
141
|
.translate(@x, @y) {
|
294
142
|
-webkit-transform: translate(@x, @y);
|
295
|
-
-moz-transform: translate(@x, @y);
|
296
143
|
-ms-transform: translate(@x, @y);
|
297
|
-
-o-transform: translate(@x, @y);
|
298
144
|
transform: translate(@x, @y);
|
299
145
|
}
|
300
146
|
.skew(@x, @y) {
|
301
147
|
-webkit-transform: skew(@x, @y);
|
302
|
-
|
303
|
-
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885
|
304
|
-
-o-transform: skew(@x, @y);
|
148
|
+
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885
|
305
149
|
transform: skew(@x, @y);
|
306
|
-
-webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
|
307
150
|
}
|
308
151
|
.translate3d(@x, @y, @z) {
|
309
152
|
-webkit-transform: translate3d(@x, @y, @z);
|
310
|
-
-moz-transform: translate3d(@x, @y, @z);
|
311
|
-
-o-transform: translate3d(@x, @y, @z);
|
312
153
|
transform: translate3d(@x, @y, @z);
|
313
154
|
}
|
314
155
|
|
315
156
|
// Backface visibility
|
316
157
|
// Prevent browsers from flickering when using CSS 3D transforms.
|
317
|
-
// Default value is `visible`, but can be changed to `hidden
|
158
|
+
// Default value is `visible`, but can be changed to `hidden`
|
318
159
|
// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
|
319
160
|
.backface-visibility(@visibility){
|
320
161
|
-webkit-backface-visibility: @visibility;
|
@@ -323,22 +164,15 @@
|
|
323
164
|
}
|
324
165
|
|
325
166
|
// Background clipping
|
326
|
-
// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
|
327
167
|
.background-clip(@clip) {
|
328
|
-
-webkit-background-clip: @clip;
|
329
|
-
-moz-background-clip: @clip;
|
330
168
|
background-clip: @clip;
|
331
169
|
}
|
332
170
|
|
333
171
|
// Background sizing
|
334
172
|
.background-size(@size) {
|
335
|
-
-webkit-background-size: @size;
|
336
|
-
-moz-background-size: @size;
|
337
|
-
-o-background-size: @size;
|
338
173
|
background-size: @size;
|
339
174
|
}
|
340
175
|
|
341
|
-
|
342
176
|
// Box sizing
|
343
177
|
.box-sizing(@boxmodel) {
|
344
178
|
-webkit-box-sizing: @boxmodel;
|
@@ -363,13 +197,13 @@
|
|
363
197
|
}
|
364
198
|
|
365
199
|
// CSS3 Content Columns
|
366
|
-
.content-columns(@
|
367
|
-
-webkit-column-count: @
|
368
|
-
-moz-column-count: @
|
369
|
-
column-count: @
|
370
|
-
-webkit-column-gap: @
|
371
|
-
-moz-column-gap: @
|
372
|
-
column-gap: @
|
200
|
+
.content-columns(@column-count, @column-gap: @grid-gutter-width) {
|
201
|
+
-webkit-column-count: @column-count;
|
202
|
+
-moz-column-count: @column-count;
|
203
|
+
column-count: @column-count;
|
204
|
+
-webkit-column-gap: @column-gap;
|
205
|
+
-moz-column-gap: @column-gap;
|
206
|
+
column-gap: @column-gap;
|
373
207
|
}
|
374
208
|
|
375
209
|
// Optional hyphenation
|
@@ -384,92 +218,79 @@
|
|
384
218
|
|
385
219
|
// Opacity
|
386
220
|
.opacity(@opacity) {
|
387
|
-
opacity: @opacity
|
388
|
-
filter
|
221
|
+
opacity: @opacity;
|
222
|
+
// IE8 filter
|
223
|
+
@opacity-ie: (@opacity * 100);
|
224
|
+
filter: ~"alpha(opacity=@{opacity-ie})";
|
389
225
|
}
|
390
226
|
|
391
227
|
|
392
228
|
|
393
|
-
//
|
229
|
+
// GRADIENTS
|
394
230
|
// --------------------------------------------------
|
395
231
|
|
396
|
-
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
|
397
|
-
#translucent {
|
398
|
-
.background(@color: @white, @alpha: 1) {
|
399
|
-
background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
|
400
|
-
}
|
401
|
-
.border(@color: @white, @alpha: 1) {
|
402
|
-
border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
|
403
|
-
.background-clip(padding-box);
|
404
|
-
}
|
405
|
-
}
|
406
|
-
|
407
|
-
// Gradient Bar Colors for buttons and alerts
|
408
|
-
.gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
|
409
|
-
color: @textColor;
|
410
|
-
text-shadow: @textShadow;
|
411
|
-
#gradient > .vertical(@primaryColor, @secondaryColor);
|
412
|
-
border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
|
413
|
-
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
|
414
|
-
}
|
415
|
-
|
416
|
-
// Gradients
|
417
232
|
#gradient {
|
418
|
-
|
419
|
-
|
420
|
-
|
421
|
-
|
422
|
-
|
423
|
-
|
424
|
-
background-
|
233
|
+
|
234
|
+
// Horizontal gradient, from left to right
|
235
|
+
//
|
236
|
+
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
237
|
+
// Color stops are not available in IE9 and below.
|
238
|
+
.horizontal(@start-color: #555; @start-percent: 0%; @end-color: #333; @end-percent: 100%) {
|
239
|
+
background-color: @end-color;
|
240
|
+
background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
|
241
|
+
background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+
|
242
|
+
background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
|
243
|
+
background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
|
425
244
|
background-repeat: repeat-x;
|
426
|
-
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@
|
245
|
+
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down
|
427
246
|
}
|
428
|
-
|
429
|
-
|
430
|
-
|
431
|
-
|
432
|
-
|
433
|
-
|
434
|
-
background-
|
247
|
+
|
248
|
+
// Vertical gradient, from top to bottom
|
249
|
+
//
|
250
|
+
// Creates two color stops, start and end, by specifying a color and position for each color stop.
|
251
|
+
// Color stops are not available in IE9 and below.
|
252
|
+
.vertical(@start-color: #555; @start-percent: 0%; @end-color: #333; @end-percent: 100%) {
|
253
|
+
background-color: @end-color;
|
254
|
+
background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
|
255
|
+
background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+
|
256
|
+
background-image: -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
|
257
|
+
background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
|
435
258
|
background-repeat: repeat-x;
|
436
|
-
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@
|
259
|
+
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
|
437
260
|
}
|
438
|
-
|
439
|
-
|
261
|
+
|
262
|
+
.directional(@start-color: #555, @end-color: #333, @deg: 45deg) {
|
263
|
+
background-color: @end-color;
|
440
264
|
background-repeat: repeat-x;
|
441
|
-
background-image: -
|
442
|
-
background-image: -
|
443
|
-
background-image:
|
444
|
-
background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
|
265
|
+
background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1+, Chrome 10+
|
266
|
+
background-image: -moz-linear-gradient(@deg, @start-color, @end-color); // FF 3.6+
|
267
|
+
background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10
|
445
268
|
}
|
446
|
-
.horizontal-three-colors(@
|
447
|
-
background-color: mix(@
|
448
|
-
background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@
|
449
|
-
background-image: -webkit-linear-gradient(left, @
|
450
|
-
background-image: -moz-linear-gradient(left, @
|
451
|
-
background-image:
|
452
|
-
background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor);
|
269
|
+
.horizontal-three-colors(@start-color: #00b3ee, @mid-color: #7a43b6, @color-stop: 50%, @end-color: #c3325f) {
|
270
|
+
background-color: mix(@mid-color, @end-color, 80%);
|
271
|
+
background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
|
272
|
+
background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
|
273
|
+
background-image: -moz-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color);
|
274
|
+
background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color);
|
453
275
|
background-repeat: no-repeat;
|
454
|
-
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=
|
276
|
+
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
|
455
277
|
}
|
456
278
|
|
457
|
-
.vertical-three-colors(@
|
458
|
-
background-color: mix(@
|
459
|
-
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@
|
460
|
-
background-image: -webkit-linear-gradient(@
|
461
|
-
background-image: -moz-linear-gradient(top, @
|
462
|
-
background-image:
|
463
|
-
background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
|
279
|
+
.vertical-three-colors(@start-color: #00b3ee, @mid-color: #7a43b6, @color-stop: 50%, @end-color: #c3325f) {
|
280
|
+
background-color: mix(@mid-color, @end-color, 80%);
|
281
|
+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color));
|
282
|
+
background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color);
|
283
|
+
background-image: -moz-linear-gradient(top, @start-color, @mid-color @color-stop, @end-color);
|
284
|
+
background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color);
|
464
285
|
background-repeat: no-repeat;
|
465
|
-
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@
|
286
|
+
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
|
466
287
|
}
|
467
|
-
.radial(@
|
468
|
-
background-color: @
|
469
|
-
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@
|
470
|
-
background-image: -webkit-radial-gradient(circle, @
|
471
|
-
background-image: -moz-radial-gradient(circle, @
|
472
|
-
background-image:
|
288
|
+
.radial(@inner-color: #555, @outer-color: #333) {
|
289
|
+
background-color: @outer-color;
|
290
|
+
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@inner-color), to(@outer-color));
|
291
|
+
background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color);
|
292
|
+
background-image: -moz-radial-gradient(circle, @inner-color, @outer-color);
|
293
|
+
background-image: radial-gradient(circle, @inner-color, @outer-color);
|
473
294
|
background-repeat: no-repeat;
|
474
295
|
}
|
475
296
|
.striped(@color: #555, @angle: 45deg) {
|
@@ -477,56 +298,107 @@
|
|
477
298
|
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
|
478
299
|
background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
|
479
300
|
background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
|
480
|
-
background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
|
481
301
|
background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
|
482
302
|
}
|
483
303
|
}
|
304
|
+
|
484
305
|
// Reset filters for IE
|
306
|
+
//
|
307
|
+
// When you need to remove a gradient background, don't forget to use this to reset
|
308
|
+
// the IE filter for IE9 and below.
|
485
309
|
.reset-filter() {
|
486
310
|
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
|
487
311
|
}
|
488
312
|
|
489
313
|
|
490
314
|
|
315
|
+
// RETINA IMAGE SUPPORT
|
316
|
+
// --------------------------------------------------
|
317
|
+
|
318
|
+
// Short retina mixin for setting background-image and -size
|
319
|
+
.img-retina(@file-1x, @file-2x, @width-1x, @height-1x) {
|
320
|
+
background-image: asset-url("@{file-1x}");
|
321
|
+
|
322
|
+
@media
|
323
|
+
only screen and (-webkit-min-device-pixel-ratio: 2),
|
324
|
+
only screen and ( min--moz-device-pixel-ratio: 2),
|
325
|
+
only screen and ( -o-min-device-pixel-ratio: 2/1),
|
326
|
+
only screen and ( min-device-pixel-ratio: 2),
|
327
|
+
only screen and ( min-resolution: 192dpi),
|
328
|
+
only screen and ( min-resolution: 2dppx) {
|
329
|
+
background-image: asset-url("@{file-2x}");
|
330
|
+
background-size: @width-1x @height-1x;
|
331
|
+
}
|
332
|
+
}
|
333
|
+
|
334
|
+
|
491
335
|
// COMPONENT MIXINS
|
492
336
|
// --------------------------------------------------
|
493
337
|
|
494
338
|
// Horizontal dividers
|
495
339
|
// -------------------------
|
496
340
|
// Dividers (basically an hr) within dropdowns and nav lists
|
497
|
-
.nav-divider(@
|
498
|
-
// IE7 needs a set width since we gave a height. Restricting just
|
499
|
-
// to IE7 to keep the 1px left/right space in other browsers.
|
500
|
-
// It is unclear where IE is getting the extra space that we need
|
501
|
-
// to negative-margin away, but so it goes.
|
502
|
-
*width: 100%;
|
341
|
+
.nav-divider(@color: #e5e5e5) {
|
503
342
|
height: 1px;
|
504
|
-
margin: ((@
|
505
|
-
*margin: -5px 0 5px;
|
343
|
+
margin: ((@line-height-computed / 2) - 1) 0;
|
506
344
|
overflow: hidden;
|
507
|
-
background-color: @
|
508
|
-
|
509
|
-
|
510
|
-
|
511
|
-
//
|
512
|
-
|
513
|
-
|
514
|
-
|
515
|
-
|
516
|
-
|
517
|
-
|
518
|
-
|
519
|
-
|
520
|
-
|
521
|
-
color: @textColor;
|
522
|
-
background-color: @endColor;
|
523
|
-
*background-color: darken(@endColor, 5%);
|
345
|
+
background-color: @color;
|
346
|
+
}
|
347
|
+
|
348
|
+
// Alerts
|
349
|
+
// -------------------------
|
350
|
+
.alert-variant(@background, @border, @text-color) {
|
351
|
+
background-color: @background;
|
352
|
+
border-color: @border;
|
353
|
+
color: @text-color;
|
354
|
+
hr {
|
355
|
+
border-top-color: darken(@border, 5%);
|
356
|
+
}
|
357
|
+
.alert-link {
|
358
|
+
color: darken(@text-color, 10%);
|
524
359
|
}
|
360
|
+
}
|
525
361
|
|
526
|
-
|
362
|
+
// Button pseudo states
|
363
|
+
// -------------------------
|
364
|
+
// Easily pump out default styles, as well as :hover, :focus, :active,
|
365
|
+
// and disabled options for all buttons
|
366
|
+
.btn-pseudo-states(@color, @background, @border) {
|
367
|
+
color: @color;
|
368
|
+
background-color: @background;
|
369
|
+
border-color: @border;
|
370
|
+
|
371
|
+
&:hover,
|
372
|
+
&:focus,
|
527
373
|
&:active,
|
528
374
|
&.active {
|
529
|
-
background-color: darken(@
|
375
|
+
background-color: darken(@background, 5%);
|
376
|
+
border-color: darken(@border, 10%);
|
377
|
+
}
|
378
|
+
|
379
|
+
&.disabled,
|
380
|
+
&[disabled],
|
381
|
+
fieldset[disabled] & {
|
382
|
+
&,
|
383
|
+
&:hover,
|
384
|
+
&:focus,
|
385
|
+
&:active,
|
386
|
+
&.active {
|
387
|
+
background-color: @background;
|
388
|
+
border-color: @border
|
389
|
+
}
|
390
|
+
}
|
391
|
+
}
|
392
|
+
|
393
|
+
// Labels
|
394
|
+
// -------------------------
|
395
|
+
.label-variant(@color) {
|
396
|
+
background-color: @color;
|
397
|
+
&[href] {
|
398
|
+
&:hover,
|
399
|
+
&:focus {
|
400
|
+
background-color: darken(@color, 10%);
|
401
|
+
}
|
530
402
|
}
|
531
403
|
}
|
532
404
|
|
@@ -534,11 +406,36 @@
|
|
534
406
|
// -------------------------
|
535
407
|
// Vertically center elements in the navbar.
|
536
408
|
// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
|
537
|
-
.
|
538
|
-
margin-top: (@
|
409
|
+
.navbar-vertical-align(@element-height) {
|
410
|
+
margin-top: ((@navbar-height - @element-height) / 2);
|
411
|
+
margin-bottom: ((@navbar-height - @element-height) / 2);
|
539
412
|
}
|
540
413
|
|
414
|
+
// Progress bars
|
415
|
+
// -------------------------
|
416
|
+
.progress-bar-variant(@color) {
|
417
|
+
background-color: @color;
|
418
|
+
.progress-striped & {
|
419
|
+
#gradient > .striped(@color);
|
420
|
+
}
|
421
|
+
}
|
541
422
|
|
423
|
+
// Responsive utilities
|
424
|
+
// -------------------------
|
425
|
+
// More easily include all the states for responsive-utilities.less.
|
426
|
+
.responsive-visibility() {
|
427
|
+
display: block !important;
|
428
|
+
tr& { display: table-row !important; }
|
429
|
+
th&,
|
430
|
+
td& { display: table-cell !important; }
|
431
|
+
}
|
432
|
+
|
433
|
+
.responsive-invisibility() {
|
434
|
+
display: none !important;
|
435
|
+
tr& { display: none !important; }
|
436
|
+
th&,
|
437
|
+
td& { display: none !important; }
|
438
|
+
}
|
542
439
|
|
543
440
|
// Grid System
|
544
441
|
// -----------
|
@@ -550,153 +447,100 @@
|
|
550
447
|
.clearfix();
|
551
448
|
}
|
552
449
|
|
553
|
-
//
|
554
|
-
.
|
555
|
-
|
556
|
-
width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
|
557
|
-
margin-left: 0; // undo default grid column styles
|
558
|
-
}
|
559
|
-
|
560
|
-
// Make a Grid
|
561
|
-
// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
|
562
|
-
.makeRow() {
|
563
|
-
margin-left: @gridGutterWidth * -1;
|
450
|
+
// Creates a wrapper for a series of columns
|
451
|
+
.make-row() {
|
452
|
+
// Then clear the floated columns
|
564
453
|
.clearfix();
|
565
|
-
}
|
566
|
-
.makeColumn(@columns: 1, @offset: 0) {
|
567
|
-
float: left;
|
568
|
-
margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2);
|
569
|
-
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
|
570
|
-
}
|
571
|
-
|
572
|
-
// The Grid
|
573
|
-
#grid {
|
574
|
-
|
575
|
-
.core (@gridColumnWidth, @gridGutterWidth) {
|
576
|
-
|
577
|
-
.spanX (@index) when (@index > 0) {
|
578
|
-
.span@{index} { .span(@index); }
|
579
|
-
.spanX(@index - 1);
|
580
|
-
}
|
581
|
-
.spanX (0) {}
|
582
|
-
|
583
|
-
.offsetX (@index) when (@index > 0) {
|
584
|
-
.offset@{index} { .offset(@index); }
|
585
|
-
.offsetX(@index - 1);
|
586
|
-
}
|
587
|
-
.offsetX (0) {}
|
588
|
-
|
589
|
-
.offset (@columns) {
|
590
|
-
margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
|
591
|
-
}
|
592
|
-
|
593
|
-
.span (@columns) {
|
594
|
-
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
|
595
|
-
}
|
596
|
-
|
597
|
-
.row {
|
598
|
-
margin-left: @gridGutterWidth * -1;
|
599
|
-
.clearfix();
|
600
|
-
}
|
601
|
-
|
602
|
-
[class*="span"] {
|
603
|
-
float: left;
|
604
|
-
min-height: 1px; // prevent collapsing columns
|
605
|
-
margin-left: @gridGutterWidth;
|
606
|
-
}
|
607
|
-
|
608
|
-
// Set the container width, and override it for fixed navbars in media queries
|
609
|
-
.container,
|
610
|
-
.navbar-static-top .container,
|
611
|
-
.navbar-fixed-top .container,
|
612
|
-
.navbar-fixed-bottom .container { .span(@gridColumns); }
|
613
|
-
|
614
|
-
// generate .spanX and .offsetX
|
615
|
-
.spanX (@gridColumns);
|
616
|
-
.offsetX (@gridColumns);
|
617
454
|
|
455
|
+
@media (min-width: @screen-small) {
|
456
|
+
margin-left: (@grid-gutter-width / -2);
|
457
|
+
margin-right: (@grid-gutter-width / -2);
|
618
458
|
}
|
619
459
|
|
620
|
-
|
621
|
-
|
622
|
-
|
623
|
-
|
624
|
-
|
625
|
-
|
626
|
-
.spanX (0) {}
|
627
|
-
|
628
|
-
.offsetX (@index) when (@index > 0) {
|
629
|
-
.offset@{index} { .offset(@index); }
|
630
|
-
.offset@{index}:first-child { .offsetFirstChild(@index); }
|
631
|
-
.offsetX(@index - 1);
|
632
|
-
}
|
633
|
-
.offsetX (0) {}
|
634
|
-
|
635
|
-
.offset (@columns) {
|
636
|
-
margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2);
|
637
|
-
*margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%);
|
638
|
-
}
|
639
|
-
|
640
|
-
.offsetFirstChild (@columns) {
|
641
|
-
margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
|
642
|
-
*margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
|
643
|
-
}
|
460
|
+
// Negative margin nested rows out to align the content of columns
|
461
|
+
.row {
|
462
|
+
margin-left: (@grid-gutter-width / -2);
|
463
|
+
margin-right: (@grid-gutter-width / -2);
|
464
|
+
}
|
465
|
+
}
|
644
466
|
|
645
|
-
|
646
|
-
|
647
|
-
|
648
|
-
|
649
|
-
|
650
|
-
|
651
|
-
|
652
|
-
|
653
|
-
[class*="span"] {
|
654
|
-
.input-block-level();
|
655
|
-
float: left;
|
656
|
-
margin-left: @fluidGridGutterWidth;
|
657
|
-
*margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
|
658
|
-
}
|
659
|
-
[class*="span"]:first-child {
|
660
|
-
margin-left: 0;
|
661
|
-
}
|
662
|
-
|
663
|
-
// Space grid-sized controls properly if multiple per line
|
664
|
-
.controls-row [class*="span"] + [class*="span"] {
|
665
|
-
margin-left: @fluidGridGutterWidth;
|
666
|
-
}
|
667
|
-
|
668
|
-
// generate .spanX and .offsetX
|
669
|
-
.spanX (@gridColumns);
|
670
|
-
.offsetX (@gridColumns);
|
671
|
-
}
|
467
|
+
// Generate the columns
|
468
|
+
.make-column(@columns) {
|
469
|
+
position: relative;
|
470
|
+
// Prevent columns from collapsing when empty
|
471
|
+
min-height: 1px;
|
472
|
+
// Inner gutter via padding
|
473
|
+
padding-left: (@grid-gutter-width / 2);
|
474
|
+
padding-right: (@grid-gutter-width / 2);
|
672
475
|
|
476
|
+
// Calculate width based on number of columns available
|
477
|
+
@media (min-width: @grid-float-breakpoint) {
|
478
|
+
float: left;
|
479
|
+
width: percentage((@columns / @grid-columns));
|
673
480
|
}
|
481
|
+
}
|
674
482
|
|
675
|
-
|
483
|
+
// Generate the column offsets
|
484
|
+
.make-column-offset(@columns) {
|
485
|
+
@media (min-width: @grid-float-breakpoint) {
|
486
|
+
margin-left: percentage((@columns / @grid-columns));
|
487
|
+
}
|
488
|
+
}
|
489
|
+
.make-column-push(@columns) {
|
490
|
+
@media (min-width: @grid-float-breakpoint) {
|
491
|
+
left: percentage((@columns / @grid-columns));
|
492
|
+
}
|
493
|
+
}
|
494
|
+
.make-column-pull(@columns) {
|
495
|
+
@media (min-width: @grid-float-breakpoint) {
|
496
|
+
right: percentage((@columns / @grid-columns));
|
497
|
+
}
|
498
|
+
}
|
676
499
|
|
677
|
-
|
678
|
-
|
679
|
-
|
680
|
-
|
681
|
-
|
500
|
+
// Generate the small columns
|
501
|
+
.make-small-column(@columns) {
|
502
|
+
position: relative;
|
503
|
+
float: left;
|
504
|
+
// Prevent columns from collapsing when empty
|
505
|
+
min-height: 1px;
|
506
|
+
// Inner gutter via padding
|
507
|
+
padding-left: (@grid-gutter-width / 2);
|
508
|
+
padding-right: (@grid-gutter-width / 2);
|
509
|
+
@max-width: (@grid-float-breakpoint - 1);
|
510
|
+
|
511
|
+
// Calculate width based on number of columns available
|
512
|
+
@media (max-width: @max-width) {
|
513
|
+
width: percentage((@columns / @grid-columns));
|
514
|
+
}
|
515
|
+
}
|
682
516
|
|
683
|
-
.span(@columns) {
|
684
|
-
width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 14;
|
685
|
-
}
|
686
517
|
|
687
|
-
|
688
|
-
|
689
|
-
|
690
|
-
|
691
|
-
}
|
518
|
+
// Form validation states
|
519
|
+
//
|
520
|
+
// Used in forms.less to generate the form validation CSS for warnings, errors,
|
521
|
+
// and successes.
|
692
522
|
|
693
|
-
|
694
|
-
|
695
|
-
|
523
|
+
.form-control-validation(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) {
|
524
|
+
// Color the label and help text
|
525
|
+
.help-block,
|
526
|
+
.control-label {
|
527
|
+
color: @text-color;
|
528
|
+
}
|
529
|
+
// Set the border and box shadow on specific inputs to match
|
530
|
+
.form-control {
|
531
|
+
padding-right: 32px; // to account for the feedback icon
|
532
|
+
border-color: @border-color;
|
533
|
+
.box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
|
534
|
+
&:focus {
|
535
|
+
border-color: darken(@border-color, 10%);
|
536
|
+
@shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
|
537
|
+
.box-shadow(@shadow);
|
696
538
|
}
|
697
|
-
|
698
|
-
|
699
|
-
|
700
|
-
|
539
|
+
}
|
540
|
+
// Set validation states also for addons
|
541
|
+
.input-group-addon {
|
542
|
+
color: @text-color;
|
543
|
+
border-color: @border-color;
|
544
|
+
background-color: @background-color;
|
701
545
|
}
|
702
546
|
}
|