less-rails-bootstrap 2.3.3 → 3.0.0.rc1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|
}
|