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,81 +2,105 @@
|
|
2
2
|
// Modals
|
3
3
|
// --------------------------------------------------
|
4
4
|
|
5
|
-
//
|
6
|
-
.modal-
|
5
|
+
// .modal-open - body class for killing the scroll
|
6
|
+
// .modal - container to scroll within
|
7
|
+
// .modal-dialog - positioning shell for the actual modal
|
8
|
+
// .modal-content - actual modal w/ bg and corners and shit
|
9
|
+
|
10
|
+
// Kill the scroll on the body
|
11
|
+
.modal-open {
|
12
|
+
overflow: hidden;
|
13
|
+
}
|
14
|
+
|
15
|
+
// Container that the modal scrolls within
|
16
|
+
.modal {
|
17
|
+
display: none;
|
18
|
+
overflow: auto;
|
19
|
+
overflow-y: scroll;
|
7
20
|
position: fixed;
|
8
21
|
top: 0;
|
9
22
|
right: 0;
|
10
23
|
bottom: 0;
|
11
24
|
left: 0;
|
12
|
-
z-index: @
|
13
|
-
|
14
|
-
//
|
15
|
-
&.fade {
|
25
|
+
z-index: @zindex-modal-background;
|
26
|
+
|
27
|
+
// When fading in the modal, animate it to slide down
|
28
|
+
&.fade .modal-dialog {
|
29
|
+
.translate(0, -25%);
|
30
|
+
.transition-transform(~"0.3s ease-out");
|
31
|
+
}
|
32
|
+
&.fade.in .modal-dialog { .translate(0, 0)}
|
16
33
|
}
|
17
34
|
|
18
|
-
|
19
|
-
.modal-
|
20
|
-
|
35
|
+
// Shell div to position the modal with bottom padding
|
36
|
+
.modal-dialog {
|
37
|
+
position: relative;
|
38
|
+
top: 0;
|
39
|
+
left: 0;
|
40
|
+
right: 0;
|
41
|
+
width: auto;
|
42
|
+
padding: 10px;
|
43
|
+
z-index: (@zindex-modal-background + 10);
|
21
44
|
}
|
22
45
|
|
23
|
-
//
|
24
|
-
.modal {
|
25
|
-
position:
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
background-color: @white;
|
32
|
-
border: 1px solid #999;
|
33
|
-
border: 1px solid rgba(0,0,0,.3);
|
34
|
-
*border: 1px solid #999; /* IE6-7 */
|
35
|
-
.border-radius(6px);
|
36
|
-
.box-shadow(0 3px 7px rgba(0,0,0,0.3));
|
46
|
+
// Actual modal
|
47
|
+
.modal-content {
|
48
|
+
position: relative;
|
49
|
+
background-color: @modal-content-bg;
|
50
|
+
border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
|
51
|
+
border: 1px solid @modal-content-border-color;
|
52
|
+
border-radius: @border-radius-large;
|
53
|
+
.box-shadow(0 3px 9px rgba(0,0,0,.5));
|
37
54
|
.background-clip(padding-box);
|
38
55
|
// Remove focus outline from opened modal
|
39
56
|
outline: none;
|
57
|
+
}
|
40
58
|
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
59
|
+
// Modal background
|
60
|
+
.modal-backdrop {
|
61
|
+
position: fixed;
|
62
|
+
top: 0;
|
63
|
+
right: 0;
|
64
|
+
bottom: 0;
|
65
|
+
left: 0;
|
66
|
+
z-index: (@zindex-modal-background - 10);
|
67
|
+
background-color: @modal-backdrop-bg;
|
68
|
+
// Fade for backdrop
|
69
|
+
&.fade { .opacity(0); }
|
70
|
+
&.fade.in { .opacity(.5); }
|
46
71
|
}
|
72
|
+
|
73
|
+
// Modal header
|
74
|
+
// Top section of the modal w/ title and dismiss
|
47
75
|
.modal-header {
|
48
|
-
padding:
|
49
|
-
border-bottom: 1px solid
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
line-height: 30px;
|
56
|
-
}
|
76
|
+
padding: @modal-title-padding;
|
77
|
+
border-bottom: 1px solid @modal-header-border-color;
|
78
|
+
min-height: (@modal-title-padding + @modal-title-line-height);
|
79
|
+
}
|
80
|
+
// Close icon
|
81
|
+
.modal-header .close {
|
82
|
+
margin-top: -2px;
|
57
83
|
}
|
58
84
|
|
59
|
-
//
|
85
|
+
// Title text within header
|
86
|
+
.modal-title {
|
87
|
+
margin: 0;
|
88
|
+
line-height: @modal-title-line-height;
|
89
|
+
}
|
90
|
+
|
91
|
+
// Modal body
|
92
|
+
// Where all modal content resides (sibling of .modal-header and .modal-footer)
|
60
93
|
.modal-body {
|
61
94
|
position: relative;
|
62
|
-
|
63
|
-
max-height: 400px;
|
64
|
-
padding: 15px;
|
65
|
-
}
|
66
|
-
// Remove bottom margin if need be
|
67
|
-
.modal-form {
|
68
|
-
margin-bottom: 0;
|
95
|
+
padding: @modal-inner-padding;
|
69
96
|
}
|
70
97
|
|
71
98
|
// Footer (for actions)
|
72
99
|
.modal-footer {
|
73
|
-
|
74
|
-
|
100
|
+
margin-top: 15px;
|
101
|
+
padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding;
|
75
102
|
text-align: right; // right align buttons
|
76
|
-
|
77
|
-
border-top: 1px solid #ddd;
|
78
|
-
.border-radius(0 0 6px 6px);
|
79
|
-
.box-shadow(inset 0 1px 0 @white);
|
103
|
+
border-top: 1px solid @modal-footer-border-color;
|
80
104
|
.clearfix(); // clear it in case folks use .pull-* classes on buttons
|
81
105
|
|
82
106
|
// Properly space out buttons
|
@@ -93,3 +117,20 @@
|
|
93
117
|
margin-left: 0;
|
94
118
|
}
|
95
119
|
}
|
120
|
+
|
121
|
+
// Scale up the modal
|
122
|
+
@media screen and (min-width: @screen-tablet) {
|
123
|
+
|
124
|
+
.modal-dialog {
|
125
|
+
left: 50%;
|
126
|
+
right: auto;
|
127
|
+
width: 560px;
|
128
|
+
margin-left: -280px;
|
129
|
+
padding-top: 30px;
|
130
|
+
padding-bottom: 30px;
|
131
|
+
}
|
132
|
+
.modal-content {
|
133
|
+
.box-shadow(0 5px 15px rgba(0,0,0,.5));
|
134
|
+
}
|
135
|
+
|
136
|
+
}
|
@@ -1,497 +1,380 @@
|
|
1
1
|
//
|
2
|
-
// Navbars
|
2
|
+
// Navbars
|
3
3
|
// --------------------------------------------------
|
4
4
|
|
5
|
-
|
6
|
-
// COMMON STYLES
|
7
|
-
// -------------
|
8
|
-
|
9
|
-
// Base class and wrapper
|
5
|
+
// Wrapper and base class
|
10
6
|
.navbar {
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
// Inner for background effects
|
20
|
-
// Gradient is applied to its own element because overflow visible is not honored by IE when filter is present
|
21
|
-
.navbar-inner {
|
22
|
-
min-height: @navbarHeight;
|
23
|
-
padding-left: 20px;
|
24
|
-
padding-right: 20px;
|
25
|
-
#gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground);
|
26
|
-
border: 1px solid @navbarBorder;
|
27
|
-
.border-radius(@baseBorderRadius);
|
28
|
-
.box-shadow(0 1px 4px rgba(0,0,0,.065));
|
7
|
+
position: relative;
|
8
|
+
min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
|
9
|
+
margin-bottom: 20px;
|
10
|
+
padding-left: @navbar-padding-horizontal;
|
11
|
+
padding-right: @navbar-padding-horizontal;
|
12
|
+
background-color: @navbar-bg;
|
13
|
+
border-radius: @border-radius-base;
|
29
14
|
|
30
15
|
// Prevent floats from breaking the navbar
|
31
16
|
.clearfix();
|
32
17
|
}
|
33
18
|
|
34
|
-
//
|
35
|
-
// We then reset it for fixed navbars in the #gridSystem mixin
|
36
|
-
.navbar .container {
|
37
|
-
width: auto;
|
38
|
-
}
|
39
|
-
|
40
|
-
// Override the default collapsed state
|
41
|
-
.nav-collapse.collapse {
|
42
|
-
height: auto;
|
43
|
-
overflow: visible;
|
44
|
-
}
|
45
|
-
|
46
|
-
|
47
|
-
// Brand: website or project name
|
48
|
-
// -------------------------
|
49
|
-
.navbar .brand {
|
50
|
-
float: left;
|
51
|
-
display: block;
|
52
|
-
// Vertically center the text given @navbarHeight
|
53
|
-
padding: ((@navbarHeight - @baseLineHeight) / 2) 20px ((@navbarHeight - @baseLineHeight) / 2);
|
54
|
-
margin-left: -20px; // negative indent to left-align the text down the page
|
55
|
-
font-size: 20px;
|
56
|
-
font-weight: 200;
|
57
|
-
color: @navbarBrandColor;
|
58
|
-
text-shadow: 0 1px 0 @navbarBackgroundHighlight;
|
59
|
-
&:hover,
|
60
|
-
&:focus {
|
61
|
-
text-decoration: none;
|
62
|
-
}
|
63
|
-
}
|
64
|
-
|
65
|
-
// Plain text in topbar
|
66
|
-
// -------------------------
|
67
|
-
.navbar-text {
|
68
|
-
margin-bottom: 0;
|
69
|
-
line-height: @navbarHeight;
|
70
|
-
color: @navbarText;
|
71
|
-
}
|
72
|
-
|
73
|
-
// Janky solution for now to account for links outside the .nav
|
19
|
+
// Navbar nav links
|
74
20
|
// -------------------------
|
75
|
-
.navbar-link {
|
76
|
-
color: @navbarLinkColor;
|
77
|
-
&:hover,
|
78
|
-
&:focus {
|
79
|
-
color: @navbarLinkColorHover;
|
80
|
-
}
|
81
|
-
}
|
82
|
-
|
83
|
-
// Dividers in navbar
|
84
|
-
// -------------------------
|
85
|
-
.navbar .divider-vertical {
|
86
|
-
height: @navbarHeight;
|
87
|
-
margin: 0 9px;
|
88
|
-
border-left: 1px solid @navbarBackground;
|
89
|
-
border-right: 1px solid @navbarBackgroundHighlight;
|
90
|
-
}
|
91
|
-
|
92
|
-
// Buttons in navbar
|
93
|
-
// -------------------------
|
94
|
-
.navbar .btn,
|
95
|
-
.navbar .btn-group {
|
96
|
-
.navbarVerticalAlign(30px); // Vertically center in navbar
|
97
|
-
}
|
98
|
-
.navbar .btn-group .btn,
|
99
|
-
.navbar .input-prepend .btn,
|
100
|
-
.navbar .input-append .btn,
|
101
|
-
.navbar .input-prepend .btn-group,
|
102
|
-
.navbar .input-append .btn-group {
|
103
|
-
margin-top: 0; // then undo the margin here so we don't accidentally double it
|
104
|
-
}
|
105
21
|
|
106
|
-
|
107
|
-
//
|
108
|
-
|
109
|
-
margin-bottom:
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
22
|
+
.navbar-nav {
|
23
|
+
// Space out from .navbar .brand and .btn-navbar when stacked in mobile views
|
24
|
+
margin-top: 10px;
|
25
|
+
margin-bottom: 15px;
|
26
|
+
|
27
|
+
> li > a {
|
28
|
+
padding-top: ((@navbar-height - @line-height-computed) / 2);
|
29
|
+
padding-bottom: ((@navbar-height - @line-height-computed) / 2);
|
30
|
+
color: @navbar-link-color;
|
31
|
+
line-height: 20px;
|
32
|
+
border-radius: @border-radius-base;
|
33
|
+
&:hover,
|
34
|
+
&:focus {
|
35
|
+
color: @navbar-link-hover-color;
|
36
|
+
background-color: @navbar-link-hover-bg;
|
37
|
+
}
|
122
38
|
}
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
39
|
+
> .active > a {
|
40
|
+
&,
|
41
|
+
&:hover,
|
42
|
+
&:focus {
|
43
|
+
color: @navbar-link-active-color;
|
44
|
+
background-color: @navbar-link-active-bg;
|
45
|
+
}
|
127
46
|
}
|
128
|
-
.
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
47
|
+
> .disabled > a {
|
48
|
+
&,
|
49
|
+
&:hover,
|
50
|
+
&:focus {
|
51
|
+
color: @navbar-link-disabled-color;
|
52
|
+
background-color: @navbar-link-disabled-bg;
|
134
53
|
}
|
135
54
|
}
|
136
|
-
}
|
137
55
|
|
138
|
-
//
|
139
|
-
//
|
140
|
-
|
141
|
-
|
142
|
-
float: left;
|
143
|
-
.navbarVerticalAlign(30px); // Vertically center in navbar
|
144
|
-
margin-bottom: 0;
|
145
|
-
.search-query {
|
146
|
-
margin-bottom: 0;
|
147
|
-
padding: 4px 14px;
|
148
|
-
#font > .sans-serif(13px, normal, 1);
|
149
|
-
.border-radius(15px); // redeclare because of specificity of the type attribute
|
56
|
+
// Right aligned contents
|
57
|
+
// Make them full width first so that they align properly on mobile
|
58
|
+
&.pull-right {
|
59
|
+
width: 100%;
|
150
60
|
}
|
151
61
|
}
|
152
62
|
|
153
63
|
|
154
64
|
|
155
|
-
//
|
156
|
-
//
|
65
|
+
//
|
66
|
+
// Navbar alignment options
|
67
|
+
// --------------------------------------------------
|
157
68
|
|
69
|
+
// Static navbar
|
158
70
|
.navbar-static-top {
|
159
|
-
|
160
|
-
margin-bottom: 0; // remove 18px margin for default navbar
|
161
|
-
.navbar-inner {
|
162
|
-
.border-radius(0);
|
163
|
-
}
|
71
|
+
border-radius: 0;
|
164
72
|
}
|
165
73
|
|
166
|
-
|
167
|
-
|
168
|
-
// Fixed navbar
|
169
|
-
// -------------------------
|
170
|
-
|
171
|
-
// Shared (top/bottom) styles
|
74
|
+
// Fix the top/bottom navbars when screen real estate supports it
|
172
75
|
.navbar-fixed-top,
|
173
76
|
.navbar-fixed-bottom {
|
174
77
|
position: fixed;
|
175
78
|
right: 0;
|
176
79
|
left: 0;
|
177
|
-
z-index: @
|
178
|
-
|
179
|
-
}
|
180
|
-
.navbar-fixed-top .navbar-inner,
|
181
|
-
.navbar-static-top .navbar-inner {
|
182
|
-
border-width: 0 0 1px;
|
183
|
-
}
|
184
|
-
.navbar-fixed-bottom .navbar-inner {
|
185
|
-
border-width: 1px 0 0;
|
80
|
+
z-index: @zindex-navbar-fixed;
|
81
|
+
border-radius: 0;
|
186
82
|
}
|
187
|
-
.navbar-fixed-top .navbar-inner,
|
188
|
-
.navbar-fixed-bottom .navbar-inner {
|
189
|
-
padding-left: 0;
|
190
|
-
padding-right: 0;
|
191
|
-
.border-radius(0);
|
192
|
-
}
|
193
|
-
|
194
|
-
// Reset container width
|
195
|
-
// Required here as we reset the width earlier on and the grid mixins don't override early enough
|
196
|
-
.navbar-static-top .container,
|
197
|
-
.navbar-fixed-top .container,
|
198
|
-
.navbar-fixed-bottom .container {
|
199
|
-
#grid > .core > .span(@gridColumns);
|
200
|
-
}
|
201
|
-
|
202
|
-
// Fixed to top
|
203
83
|
.navbar-fixed-top {
|
204
84
|
top: 0;
|
205
85
|
}
|
206
|
-
.navbar-fixed-top,
|
207
|
-
.navbar-static-top {
|
208
|
-
.navbar-inner {
|
209
|
-
.box-shadow(~"0 1px 10px rgba(0,0,0,.1)");
|
210
|
-
}
|
211
|
-
}
|
212
|
-
|
213
|
-
// Fixed to bottom
|
214
86
|
.navbar-fixed-bottom {
|
215
87
|
bottom: 0;
|
216
|
-
.navbar
|
217
|
-
.box-shadow(~"0 -1px 10px rgba(0,0,0,.1)");
|
218
|
-
}
|
88
|
+
margin-bottom: 0; // override .navbar defaults
|
219
89
|
}
|
220
90
|
|
221
91
|
|
222
92
|
|
223
|
-
//
|
224
|
-
//
|
93
|
+
//
|
94
|
+
// Navbar optional components
|
95
|
+
// --------------------------------------------------
|
225
96
|
|
226
|
-
|
227
|
-
|
228
|
-
left: 0;
|
97
|
+
// Brand/project name
|
98
|
+
.navbar-brand {
|
229
99
|
display: block;
|
230
|
-
|
231
|
-
margin:
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
100
|
+
max-width: 200px;
|
101
|
+
margin-left: auto;
|
102
|
+
margin-right: auto;
|
103
|
+
padding: @navbar-padding-vertical @navbar-padding-horizontal;
|
104
|
+
font-size: @font-size-large;
|
105
|
+
font-weight: 500;
|
106
|
+
line-height: @line-height-computed;
|
107
|
+
color: @navbar-brand-color;
|
108
|
+
text-align: center;
|
109
|
+
&:hover,
|
110
|
+
&:focus {
|
111
|
+
color: @navbar-brand-hover-color;
|
112
|
+
text-decoration: none;
|
113
|
+
background-color: @navbar-brand-hover-bg;
|
114
|
+
}
|
239
115
|
}
|
240
116
|
|
241
|
-
//
|
242
|
-
.navbar
|
243
|
-
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
|
252
|
-
}
|
117
|
+
// Collapsible navbar toggle
|
118
|
+
.navbar-toggle {
|
119
|
+
position: absolute;
|
120
|
+
top: floor((@navbar-height - 32) / 2);
|
121
|
+
right: 10px;
|
122
|
+
width: 48px;
|
123
|
+
height: 32px;
|
124
|
+
padding: 8px 12px;
|
125
|
+
background-color: transparent;
|
126
|
+
border: 1px solid @navbar-toggle-border-color;
|
127
|
+
border-radius: @border-radius-base;
|
253
128
|
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
color: @navbarLinkColorHover;
|
259
|
-
text-decoration: none;
|
260
|
-
}
|
129
|
+
&:hover,
|
130
|
+
&:focus {
|
131
|
+
background-color: @navbar-toggle-hover-bg;
|
132
|
+
}
|
261
133
|
|
262
|
-
//
|
263
|
-
.
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
|
268
|
-
|
269
|
-
|
134
|
+
// Bars
|
135
|
+
.icon-bar {
|
136
|
+
display: block;
|
137
|
+
width: 22px;
|
138
|
+
height: 2px;
|
139
|
+
background-color: @navbar-toggle-icon-bar-bg;
|
140
|
+
border-radius: 1px;
|
141
|
+
}
|
142
|
+
.icon-bar + .icon-bar {
|
143
|
+
margin-top: 4px;
|
144
|
+
}
|
270
145
|
}
|
271
146
|
|
272
|
-
// Navbar
|
273
|
-
|
274
|
-
.
|
275
|
-
|
276
|
-
float: right;
|
277
|
-
padding: 7px 10px;
|
278
|
-
margin-left: 5px;
|
279
|
-
margin-right: 5px;
|
280
|
-
.buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%));
|
281
|
-
.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");
|
282
|
-
}
|
283
|
-
.navbar .btn-navbar .icon-bar {
|
284
|
-
display: block;
|
285
|
-
width: 18px;
|
286
|
-
height: 2px;
|
287
|
-
background-color: #f5f5f5;
|
288
|
-
.border-radius(1px);
|
289
|
-
.box-shadow(0 1px 0 rgba(0,0,0,.25));
|
290
|
-
}
|
291
|
-
.btn-navbar .icon-bar + .icon-bar {
|
292
|
-
margin-top: 3px;
|
147
|
+
// Navbar form
|
148
|
+
.navbar-form {
|
149
|
+
.form-inline();
|
150
|
+
.navbar-vertical-align(@input-height-base); // Vertically center in navbar
|
293
151
|
}
|
294
152
|
|
295
|
-
|
296
|
-
|
297
153
|
// Dropdown menus
|
298
|
-
// --------------
|
299
154
|
|
300
155
|
// Menu position and menu carets
|
301
|
-
.navbar
|
302
|
-
|
303
|
-
|
304
|
-
|
305
|
-
border-left: 7px solid transparent;
|
306
|
-
border-right: 7px solid transparent;
|
307
|
-
border-bottom: 7px solid #ccc;
|
308
|
-
border-bottom-color: @dropdownBorder;
|
309
|
-
position: absolute;
|
310
|
-
top: -7px;
|
311
|
-
left: 9px;
|
312
|
-
}
|
313
|
-
&:after {
|
314
|
-
content: '';
|
315
|
-
display: inline-block;
|
316
|
-
border-left: 6px solid transparent;
|
317
|
-
border-right: 6px solid transparent;
|
318
|
-
border-bottom: 6px solid @dropdownBackground;
|
319
|
-
position: absolute;
|
320
|
-
top: -6px;
|
321
|
-
left: 10px;
|
322
|
-
}
|
156
|
+
.navbar-nav > li > .dropdown-menu {
|
157
|
+
margin-top: 0;
|
158
|
+
border-top-left-radius: 0;
|
159
|
+
border-top-right-radius: 0;
|
323
160
|
}
|
324
161
|
// Menu position and menu caret support for dropups via extra dropup class
|
325
|
-
.navbar-fixed-bottom .nav > li > .dropdown-menu {
|
326
|
-
|
327
|
-
|
328
|
-
|
329
|
-
|
330
|
-
|
331
|
-
|
332
|
-
|
333
|
-
|
334
|
-
|
335
|
-
border-
|
336
|
-
bottom: -
|
337
|
-
top: auto;
|
162
|
+
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
|
163
|
+
border-bottom-left-radius: 0;
|
164
|
+
border-bottom-right-radius: 0;
|
165
|
+
}
|
166
|
+
|
167
|
+
// Dropdown menu items and carets
|
168
|
+
.navbar-nav {
|
169
|
+
// Caret should match text color on hover
|
170
|
+
> .dropdown > a:hover .caret,
|
171
|
+
> .dropdown > a:focus .caret {
|
172
|
+
border-top-color: @navbar-link-hover-color;
|
173
|
+
border-bottom-color: @navbar-link-hover-color;
|
338
174
|
}
|
339
|
-
}
|
340
|
-
|
341
|
-
// Caret should match text color on hover/focus
|
342
|
-
.navbar .nav li.dropdown > a:hover .caret,
|
343
|
-
.navbar .nav li.dropdown > a:focus .caret {
|
344
|
-
border-top-color: @navbarLinkColorHover;
|
345
|
-
border-bottom-color: @navbarLinkColorHover;
|
346
|
-
}
|
347
175
|
|
348
|
-
// Remove background color from open dropdown
|
349
|
-
|
350
|
-
|
351
|
-
|
352
|
-
|
353
|
-
|
354
|
-
|
355
|
-
.
|
356
|
-
|
357
|
-
|
358
|
-
}
|
359
|
-
|
360
|
-
|
361
|
-
|
362
|
-
|
363
|
-
|
176
|
+
// Remove background color from open dropdown
|
177
|
+
> .open > a {
|
178
|
+
&,
|
179
|
+
&:hover,
|
180
|
+
&:focus {
|
181
|
+
background-color: @navbar-link-active-bg;
|
182
|
+
color: @navbar-link-active-color;
|
183
|
+
.caret {
|
184
|
+
border-top-color: @navbar-link-active-color;
|
185
|
+
border-bottom-color: @navbar-link-active-color;
|
186
|
+
}
|
187
|
+
}
|
188
|
+
}
|
189
|
+
> .dropdown > a .caret {
|
190
|
+
border-top-color: @navbar-link-color;
|
191
|
+
border-bottom-color: @navbar-link-color;
|
192
|
+
}
|
364
193
|
}
|
365
194
|
|
366
195
|
// Right aligned menus need alt position
|
367
|
-
.navbar
|
368
|
-
.navbar
|
196
|
+
.navbar-nav.pull-right > li > .dropdown-menu,
|
197
|
+
.navbar-nav > li > .dropdown-menu.pull-right {
|
369
198
|
left: auto;
|
370
199
|
right: 0;
|
371
|
-
&:before {
|
372
|
-
left: auto;
|
373
|
-
right: 12px;
|
374
|
-
}
|
375
|
-
&:after {
|
376
|
-
left: auto;
|
377
|
-
right: 13px;
|
378
|
-
}
|
379
|
-
.dropdown-menu {
|
380
|
-
left: auto;
|
381
|
-
right: 100%;
|
382
|
-
margin-left: 0;
|
383
|
-
margin-right: -1px;
|
384
|
-
.border-radius(6px 0 6px 6px);
|
385
|
-
}
|
386
200
|
}
|
387
201
|
|
388
202
|
|
389
|
-
// Inverted navbar
|
390
|
-
// -------------------------
|
391
203
|
|
392
|
-
|
204
|
+
// Inverse navbar
|
205
|
+
// --------------------------------------------------
|
393
206
|
|
394
|
-
|
395
|
-
|
396
|
-
border-color: @navbarInverseBorder;
|
397
|
-
}
|
207
|
+
.navbar-inverse {
|
208
|
+
background-color: @navbar-inverse-bg;
|
398
209
|
|
399
|
-
.brand
|
400
|
-
|
401
|
-
color: @navbarInverseLinkColor;
|
402
|
-
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
210
|
+
.navbar-brand {
|
211
|
+
color: @navbar-inverse-brand-color;
|
403
212
|
&:hover,
|
404
213
|
&:focus {
|
405
|
-
color: @
|
214
|
+
color: @navbar-inverse-brand-hover-color;
|
215
|
+
background-color: @navbar-inverse-brand-hover-bg;
|
406
216
|
}
|
407
217
|
}
|
408
218
|
|
409
|
-
.brand {
|
410
|
-
color: @navbarInverseBrandColor;
|
411
|
-
}
|
412
|
-
|
413
219
|
.navbar-text {
|
414
|
-
color: @
|
220
|
+
color: @navbar-inverse-color;
|
415
221
|
}
|
416
222
|
|
417
|
-
.nav
|
418
|
-
|
419
|
-
|
420
|
-
color: @navbarInverseLinkColorHover;
|
421
|
-
}
|
223
|
+
.navbar-nav {
|
224
|
+
> li > a {
|
225
|
+
color: @navbar-inverse-link-color;
|
422
226
|
|
423
|
-
|
424
|
-
|
425
|
-
|
426
|
-
|
427
|
-
|
227
|
+
&:hover,
|
228
|
+
&:focus {
|
229
|
+
color: @navbar-inverse-link-hover-color;
|
230
|
+
background-color: @navbar-inverse-link-hover-bg;
|
231
|
+
}
|
232
|
+
}
|
233
|
+
> .active > a {
|
234
|
+
&,
|
235
|
+
&:hover,
|
236
|
+
&:focus {
|
237
|
+
color: @navbar-inverse-link-active-color;
|
238
|
+
background-color: @navbar-inverse-link-active-bg;
|
239
|
+
}
|
240
|
+
}
|
241
|
+
> .disabled > a {
|
242
|
+
&,
|
243
|
+
&:hover,
|
244
|
+
&:focus {
|
245
|
+
color: @navbar-inverse-link-disabled-color;
|
246
|
+
background-color: @navbar-inverse-link-disabled-bg;
|
247
|
+
}
|
248
|
+
}
|
428
249
|
}
|
429
250
|
|
430
|
-
//
|
431
|
-
.navbar-
|
432
|
-
color: @
|
251
|
+
// Darken the responsive nav toggle
|
252
|
+
.navbar-toggle {
|
253
|
+
border-color: @navbar-inverse-toggle-border-color;
|
433
254
|
&:hover,
|
434
255
|
&:focus {
|
435
|
-
color: @
|
256
|
+
background-color: @navbar-inverse-toggle-hover-bg;
|
257
|
+
}
|
258
|
+
.icon-bar {
|
259
|
+
background-color: @navbar-inverse-toggle-icon-bar-bg;
|
436
260
|
}
|
437
|
-
}
|
438
|
-
|
439
|
-
// Dividers in navbar
|
440
|
-
.divider-vertical {
|
441
|
-
border-left-color: @navbarInverseBackground;
|
442
|
-
border-right-color: @navbarInverseBackgroundHighlight;
|
443
261
|
}
|
444
262
|
|
445
263
|
// Dropdowns
|
446
|
-
.nav
|
447
|
-
|
448
|
-
|
449
|
-
|
450
|
-
|
451
|
-
|
452
|
-
|
453
|
-
|
454
|
-
|
455
|
-
|
456
|
-
|
457
|
-
|
458
|
-
|
459
|
-
|
264
|
+
.navbar-nav {
|
265
|
+
> .open > a {
|
266
|
+
&,
|
267
|
+
&:hover,
|
268
|
+
&:focus {
|
269
|
+
background-color: @navbar-inverse-link-active-bg;
|
270
|
+
color: @navbar-inverse-link-active-color;
|
271
|
+
}
|
272
|
+
}
|
273
|
+
> .dropdown > a:hover .caret {
|
274
|
+
border-top-color: @navbar-inverse-link-hover-color;
|
275
|
+
border-bottom-color: @navbar-inverse-link-hover-color;
|
276
|
+
}
|
277
|
+
> .dropdown > a .caret {
|
278
|
+
border-top-color: @navbar-inverse-link-color;
|
279
|
+
border-bottom-color: @navbar-inverse-link-color;
|
280
|
+
}
|
281
|
+
> .open > a {
|
282
|
+
&,
|
283
|
+
&:hover,
|
284
|
+
&:focus {
|
285
|
+
.caret {
|
286
|
+
border-top-color: @navbar-inverse-link-active-color;
|
287
|
+
border-bottom-color: @navbar-inverse-link-active-color;
|
288
|
+
}
|
289
|
+
}
|
290
|
+
}
|
460
291
|
}
|
461
|
-
|
462
|
-
|
463
|
-
|
464
|
-
|
465
|
-
|
292
|
+
}
|
293
|
+
|
294
|
+
|
295
|
+
|
296
|
+
// Responsive navbar
|
297
|
+
// --------------------------------------------------
|
298
|
+
|
299
|
+
@media screen and (min-width: @grid-float-breakpoint) {
|
300
|
+
|
301
|
+
.navbar-brand {
|
302
|
+
float: left;
|
303
|
+
margin-left: -(@navbar-padding-horizontal);
|
304
|
+
margin-right: 5px;
|
466
305
|
}
|
306
|
+
.navbar-nav {
|
307
|
+
float: left;
|
308
|
+
// undo margin to make nav extend full height of navbar
|
309
|
+
margin-top: 0;
|
310
|
+
margin-bottom: 0;
|
467
311
|
|
468
|
-
|
469
|
-
|
470
|
-
|
471
|
-
|
472
|
-
background-color: @navbarInverseSearchBackground;
|
473
|
-
border-color: @navbarInverseSearchBorder;
|
474
|
-
.box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)");
|
475
|
-
.transition(none);
|
476
|
-
.placeholder(@navbarInverseSearchPlaceholderColor);
|
477
|
-
|
478
|
-
// Focus states (we use .focused since IE7-8 and down doesn't support :focus)
|
479
|
-
&:focus,
|
480
|
-
&.focused {
|
481
|
-
padding: 5px 15px;
|
482
|
-
color: @grayDark;
|
483
|
-
text-shadow: 0 1px 0 @white;
|
484
|
-
background-color: @navbarInverseSearchBackgroundFocus;
|
485
|
-
border: 0;
|
486
|
-
.box-shadow(0 0 3px rgba(0,0,0,.15));
|
487
|
-
outline: 0;
|
312
|
+
> li {
|
313
|
+
float: left;
|
314
|
+
> a {
|
315
|
+
border-radius: 0;
|
488
316
|
}
|
489
317
|
}
|
318
|
+
|
319
|
+
&.pull-right {
|
320
|
+
float: right;
|
321
|
+
width: auto;
|
322
|
+
}
|
490
323
|
}
|
491
324
|
|
492
|
-
//
|
493
|
-
.
|
494
|
-
|
325
|
+
// Required to make the collapsing navbar work on regular desktops
|
326
|
+
.navbar-toggle {
|
327
|
+
position: relative;
|
328
|
+
top: auto;
|
329
|
+
left: auto;
|
330
|
+
display: none;
|
331
|
+
}
|
332
|
+
.nav-collapse.collapse {
|
333
|
+
display: block !important;
|
334
|
+
height: auto !important;
|
335
|
+
overflow: visible !important;
|
495
336
|
}
|
496
337
|
|
497
338
|
}
|
339
|
+
|
340
|
+
|
341
|
+
|
342
|
+
// Buttons in navbars
|
343
|
+
//
|
344
|
+
// Vertically center a button within a navbar (when *not* in a form).
|
345
|
+
|
346
|
+
.navbar-btn {
|
347
|
+
margin-top: ((@navbar-height - @input-height-base) / 2);
|
348
|
+
}
|
349
|
+
|
350
|
+
|
351
|
+
|
352
|
+
// Text in navbars
|
353
|
+
//
|
354
|
+
// Add a class to make any element properly align itself vertically within the navbars.
|
355
|
+
|
356
|
+
.navbar-text {
|
357
|
+
.navbar-vertical-align(@line-height-computed);
|
358
|
+
}
|
359
|
+
|
360
|
+
|
361
|
+
|
362
|
+
// Links in navbars
|
363
|
+
//
|
364
|
+
// Add a class to ensure links outside the navbar nav are colored correctly.
|
365
|
+
|
366
|
+
// Default navbar variables
|
367
|
+
.navbar-link {
|
368
|
+
color: @navbar-link-color;
|
369
|
+
&:hover {
|
370
|
+
color: @navbar-link-hover-color;
|
371
|
+
}
|
372
|
+
}
|
373
|
+
|
374
|
+
// Use the inverse navbar variables
|
375
|
+
.navbar-inverse .navbar-link {
|
376
|
+
color: @navbar-inverse-link-color;
|
377
|
+
&:hover {
|
378
|
+
color: @navbar-inverse-link-hover-color;
|
379
|
+
}
|
380
|
+
}
|