twitter-bootstrap-rails 1.3.1 → 1.4.0

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.

Potentially problematic release.


This version of twitter-bootstrap-rails might be problematic. Click here for more details.

@@ -1,218 +1,223 @@
1
- /* Variables.less
2
- * Snippets of reusable CSS to develop faster and keep code readable
3
- * ----------------------------------------------------------------- */
4
-
5
-
6
- // Clearfix for clearing floats like a boss h5bp.com/q
7
- .clearfix() {
8
- zoom: 1;
9
- &:before,
10
- &:after {
11
- display: table;
12
- content: "";
13
- zoom: 1;
14
- *display: inline;
15
- }
16
- &:after {
17
- clear: both;
18
- }
19
- }
20
-
21
- // Center-align a block level element
22
- .center-block() {
23
- display: block;
24
- margin-left: auto;
25
- margin-right: auto;
26
- }
27
-
28
- // Sizing shortcuts
29
- .size(@height: 5px, @width: 5px) {
30
- height: @height;
31
- width: @width;
32
- }
33
- .square(@size: 5px) {
34
- .size(@size, @size);
35
- }
36
-
37
- // Input placeholder text
38
- .placeholder(@color: @grayLight) {
39
- :-moz-placeholder {
40
- color: @color;
41
- }
42
- ::-webkit-input-placeholder {
43
- color: @color;
44
- }
45
- }
46
-
47
- // Font Stacks
48
- #font {
49
- .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
50
- font-size: @size;
51
- font-weight: @weight;
52
- line-height: @lineHeight;
53
- }
54
- .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
55
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
56
- font-size: @size;
57
- font-weight: @weight;
58
- line-height: @lineHeight;
59
- }
60
- .serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
61
- font-family: "Georgia", Times New Roman, Times, serif;
62
- font-size: @size;
63
- font-weight: @weight;
64
- line-height: @lineHeight;
65
- }
66
- .monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
67
- font-family: "Monaco", Courier New, monospace;
68
- font-size: @size;
69
- font-weight: @weight;
70
- line-height: @lineHeight;
71
- }
72
- }
73
-
74
- // Grid System
75
- .fixed-container() {
76
- width: @siteWidth;
77
- margin-left: auto;
78
- margin-right: auto;
79
- .clearfix();
80
- }
81
- .columns(@columnSpan: 1) {
82
- width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
83
- }
84
- .offset(@columnOffset: 1) {
85
- margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
86
- }
87
- // Necessary grid styles for every column to make them appear next to each other horizontally
88
- .gridColumn() {
89
- display: inline;
90
- float: left;
91
- margin-left: @gridGutterWidth;
92
- }
93
- // makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
94
- .makeColumn(@columnSpan: 1) {
95
- .gridColumn();
96
- .columns(@columnSpan);
97
- }
98
-
99
- // Border Radius
100
- .border-radius(@radius: 5px) {
101
- -webkit-border-radius: @radius;
102
- -moz-border-radius: @radius;
103
- border-radius: @radius;
104
- }
105
-
106
- // Drop shadows
107
- .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
108
- -webkit-box-shadow: @shadow;
109
- -moz-box-shadow: @shadow;
110
- box-shadow: @shadow;
111
- }
112
-
113
- // Transitions
114
- .transition(@transition) {
115
- -webkit-transition: @transition;
116
- -moz-transition: @transition;
117
- -ms-transition: @transition;
118
- -o-transition: @transition;
119
- transition: @transition;
120
- }
121
-
122
- // Background clipping
123
- .background-clip(@clip) {
124
- -webkit-background-clip: @clip;
125
- -moz-background-clip: @clip;
126
- background-clip: @clip;
127
- }
128
-
129
- // CSS3 Content Columns
130
- .content-columns(@columnCount, @columnGap: 20px) {
131
- -webkit-column-count: @columnCount;
132
- -moz-column-count: @columnCount;
133
- column-count: @columnCount;
134
- -webkit-column-gap: @columnGap;
135
- -moz-column-gap: @columnGap;
136
- column-gap: @columnGap;
137
- }
138
-
139
- // Add an alphatransparency value to any background or border color (via Elyse Holladay)
140
- #translucent {
141
- .background(@color: @white, @alpha: 1) {
142
- background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
143
- }
144
- .border(@color: @white, @alpha: 1) {
145
- border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
146
- background-clip: padding-box;
147
- }
148
- }
149
-
150
- // Gradient Bar Colors for buttons and allerts
151
- .gradientBar(@primaryColor, @secondaryColor) {
152
- #gradient > .vertical(@primaryColor, @secondaryColor);
153
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
154
- border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
155
- border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
156
- }
157
-
158
- // Gradients
159
- #gradient {
160
- .horizontal (@startColor: #555, @endColor: #333) {
161
- background-color: @endColor;
162
- background-repeat: repeat-x;
163
- background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
164
- background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
165
- background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
166
- background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
167
- background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
168
- background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
169
- background-image: linear-gradient(left, @startColor, @endColor); // Le standard
170
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
171
- }
172
- .vertical (@startColor: #555, @endColor: #333) {
173
- background-color: @endColor;
174
- background-repeat: repeat-x;
175
- background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
176
- background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
177
- background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
178
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
179
- background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
180
- background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
181
- background-image: linear-gradient(top, @startColor, @endColor); // The standard
182
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
183
- }
184
- .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
185
- background-color: @endColor;
186
- background-repeat: repeat-x;
187
- background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
188
- background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
189
- background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
190
- background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
191
- background-image: linear-gradient(@deg, @startColor, @endColor); // The standard
192
- }
193
- .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
194
- background-color: @endColor;
195
- background-repeat: no-repeat;
196
- background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
197
- background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
198
- background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
199
- background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
200
- background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
201
- background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
202
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
203
- }
204
- }
205
-
206
- // Reset filters for IE
207
- .reset-filter() {
208
- filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
209
- }
210
-
211
- // Opacity
212
- .opacity(@opacity: 100) {
213
- filter: e(%("alpha(opacity=%d)", @opacity));
214
- -khtml-opacity: @opacity / 100;
215
- -moz-opacity: @opacity / 100;
216
- opacity: @opacity / 100;
217
- }
218
-
1
+ /* Mixins.less
2
+ * Snippets of reusable CSS to develop faster and keep code readable
3
+ * ----------------------------------------------------------------- */
4
+
5
+
6
+ // Clearfix for clearing floats like a boss h5bp.com/q
7
+ .clearfix() {
8
+ zoom: 1;
9
+ &:before,
10
+ &:after {
11
+ display: table;
12
+ content: "";
13
+ zoom: 1;
14
+ }
15
+ &:after {
16
+ clear: both;
17
+ }
18
+ }
19
+
20
+ // Center-align a block level element
21
+ .center-block() {
22
+ display: block;
23
+ margin-left: auto;
24
+ margin-right: auto;
25
+ }
26
+
27
+ // Sizing shortcuts
28
+ .size(@height: 5px, @width: 5px) {
29
+ height: @height;
30
+ width: @width;
31
+ }
32
+ .square(@size: 5px) {
33
+ .size(@size, @size);
34
+ }
35
+
36
+ // Input placeholder text
37
+ .placeholder(@color: @grayLight) {
38
+ :-moz-placeholder {
39
+ color: @color;
40
+ }
41
+ ::-webkit-input-placeholder {
42
+ color: @color;
43
+ }
44
+ }
45
+
46
+ // Font Stacks
47
+ #font {
48
+ .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
49
+ font-size: @size;
50
+ font-weight: @weight;
51
+ line-height: @lineHeight;
52
+ }
53
+ .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
54
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
55
+ font-size: @size;
56
+ font-weight: @weight;
57
+ line-height: @lineHeight;
58
+ }
59
+ .serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
60
+ font-family: "Georgia", Times New Roman, Times, serif;
61
+ font-size: @size;
62
+ font-weight: @weight;
63
+ line-height: @lineHeight;
64
+ }
65
+ .monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
66
+ font-family: "Monaco", Courier New, monospace;
67
+ font-size: @size;
68
+ font-weight: @weight;
69
+ line-height: @lineHeight;
70
+ }
71
+ }
72
+
73
+ // Grid System
74
+ .fixed-container() {
75
+ width: @siteWidth;
76
+ margin-left: auto;
77
+ margin-right: auto;
78
+ .clearfix();
79
+ }
80
+ .columns(@columnSpan: 1) {
81
+ width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
82
+ }
83
+ .offset(@columnOffset: 1) {
84
+ margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
85
+ }
86
+ // Necessary grid styles for every column to make them appear next to each other horizontally
87
+ .gridColumn() {
88
+ display: inline;
89
+ float: left;
90
+ margin-left: @gridGutterWidth;
91
+ }
92
+ // makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
93
+ .makeColumn(@columnSpan: 1) {
94
+ .gridColumn();
95
+ .columns(@columnSpan);
96
+ }
97
+
98
+ // Border Radius
99
+ .border-radius(@radius: 5px) {
100
+ -webkit-border-radius: @radius;
101
+ -moz-border-radius: @radius;
102
+ border-radius: @radius;
103
+ }
104
+
105
+ // Drop shadows
106
+ .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
107
+ -webkit-box-shadow: @shadow;
108
+ -moz-box-shadow: @shadow;
109
+ box-shadow: @shadow;
110
+ }
111
+
112
+ // Transitions
113
+ .transition(@transition) {
114
+ -webkit-transform-style: e(%("preserve-3d"));
115
+ -webkit-transition: @transition;
116
+ -moz-transition: @transition;
117
+ -ms-transition: @transition;
118
+ -o-transition: @transition;
119
+ transition: @transition;
120
+ }
121
+
122
+ // Background clipping
123
+ .background-clip(@clip) {
124
+ -webkit-background-clip: @clip;
125
+ -moz-background-clip: @clip;
126
+ background-clip: @clip;
127
+ }
128
+
129
+ // CSS3 Content Columns
130
+ .content-columns(@columnCount, @columnGap: 20px) {
131
+ -webkit-column-count: @columnCount;
132
+ -moz-column-count: @columnCount;
133
+ column-count: @columnCount;
134
+ -webkit-column-gap: @columnGap;
135
+ -moz-column-gap: @columnGap;
136
+ column-gap: @columnGap;
137
+ }
138
+
139
+ // Make any element resizable for prototyping
140
+ .resizable(@direction: both) {
141
+ resize: @direction; // Options are horizontal, vertical, both
142
+ overflow: auto; // Safari fix
143
+ }
144
+
145
+ // Add an alphatransparency value to any background or border color (via Elyse Holladay)
146
+ #translucent {
147
+ .background(@color: @white, @alpha: 1) {
148
+ background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
149
+ }
150
+ .border(@color: @white, @alpha: 1) {
151
+ border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
152
+ background-clip: padding-box;
153
+ }
154
+ }
155
+
156
+ // Gradient Bar Colors for buttons and allerts
157
+ .gradientBar(@primaryColor, @secondaryColor) {
158
+ #gradient > .vertical(@primaryColor, @secondaryColor);
159
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
160
+ border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
161
+ border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
162
+ }
163
+
164
+ // Gradients
165
+ #gradient {
166
+ .horizontal (@startColor: #555, @endColor: #333) {
167
+ background-color: @endColor;
168
+ background-repeat: repeat-x;
169
+ background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
170
+ background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
171
+ background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
172
+ background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
173
+ background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
174
+ background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
175
+ background-image: linear-gradient(left, @startColor, @endColor); // Le standard
176
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
177
+ }
178
+ .vertical (@startColor: #555, @endColor: #333) {
179
+ background-color: @endColor;
180
+ background-repeat: repeat-x;
181
+ background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
182
+ background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
183
+ background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
184
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
185
+ background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
186
+ background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
187
+ background-image: linear-gradient(top, @startColor, @endColor); // The standard
188
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
189
+ }
190
+ .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
191
+ background-color: @endColor;
192
+ background-repeat: repeat-x;
193
+ background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
194
+ background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10
195
+ background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
196
+ background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
197
+ background-image: linear-gradient(@deg, @startColor, @endColor); // The standard
198
+ }
199
+ .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
200
+ background-color: @endColor;
201
+ background-repeat: no-repeat;
202
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
203
+ background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
204
+ background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
205
+ background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor);
206
+ background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
207
+ background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
208
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback
209
+ }
210
+ }
211
+
212
+ // Reset filters for IE
213
+ .reset-filter() {
214
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
215
+ }
216
+
217
+ // Opacity
218
+ .opacity(@opacity: 100) {
219
+ filter: e(%("alpha(opacity=%d)", @opacity));
220
+ -khtml-opacity: @opacity / 100;
221
+ -moz-opacity: @opacity / 100;
222
+ opacity: @opacity / 100;
223
+ }
@@ -1,1007 +1,1058 @@
1
- /* Patterns.less
2
- * Repeatable UI elements outside the base styles provided from the scaffolding
3
- * ---------------------------------------------------------------------------- */
4
-
5
-
6
- // TOPBAR
7
- // ------
8
-
9
- // Topbar for Branding and Nav
10
- .topbar {
11
- height: 40px;
12
- position: fixed;
13
- top: 0;
14
- left: 0;
15
- right: 0;
16
- z-index: 10000;
17
- overflow: visible;
18
-
19
- // Links get text shadow
20
- a {
21
- color: @grayLight;
22
- text-shadow: 0 -1px 0 rgba(0,0,0,.25);
23
- }
24
-
25
- // Hover and active states
26
- // h3 for backwards compatibility
27
- h3 a:hover,
28
- .brand a:hover,
29
- ul .active > a {
30
- background-color: #333;
31
- background-color: rgba(255,255,255,.05);
32
- color: @white;
33
- text-decoration: none;
34
- }
35
-
36
- // Website name
37
- // h3 left for backwards compatibility
38
- h3 {
39
- position: relative;
40
- }
41
- h3 a,
42
- .brand {
43
- float: left;
44
- display: block;
45
- padding: 8px 20px 12px;
46
- margin-left: -20px; // negative indent to left-align the text down the page
47
- color: @white;
48
- font-size: 20px;
49
- font-weight: 200;
50
- line-height: 1;
51
- }
52
-
53
- // Plain text in topbar
54
- p {
55
- margin: 0;
56
- line-height: 40px;
57
- a:hover {
58
- background-color: transparent;
59
- color: @white;
60
- }
61
- }
62
-
63
- // Search Form
64
- form {
65
- float: left;
66
- margin: 5px 0 0 0;
67
- position: relative;
68
- .opacity(100);
69
- }
70
- // Todo: remove from v2.0 when ready, added for legacy
71
- form.pull-right {
72
- float: right;
73
- }
74
- input {
75
- background-color: #444;
76
- background-color: rgba(255,255,255,.3);
77
- #font > .sans-serif(13px, normal, 1);
78
- padding: 4px 9px;
79
- color: @white;
80
- color: rgba(255,255,255,.75);
81
- border: 1px solid #111;
82
- .border-radius(4px);
83
- @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
84
- .box-shadow(@shadow);
85
- .transition(none);
86
-
87
- // Placeholder text gets special styles; can't be bundled together though for some reason
88
- &:-moz-placeholder {
89
- color: @grayLighter;
90
- }
91
- &::-webkit-input-placeholder {
92
- color: @grayLighter;
93
- }
94
- // Hover states
95
- &:hover {
96
- background-color: @grayLight;
97
- background-color: rgba(255,255,255,.5);
98
- color: @white;
99
- }
100
- // Focus states (we use .focused since IE8 and down doesn't support :focus)
101
- &:focus,
102
- &.focused {
103
- outline: 0;
104
- background-color: @white;
105
- color: @grayDark;
106
- text-shadow: 0 1px 0 @white;
107
- border: 0;
108
- padding: 5px 10px;
109
- .box-shadow(0 0 3px rgba(0,0,0,.15));
110
- }
111
- }
112
- }
113
-
114
- // gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
115
- // For backwards compatibility, include .topbar .fill
116
- .topbar-inner,
117
- .topbar .fill {
118
- background-color: #222;
119
- #gradient > .vertical(#333, #222);
120
- @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
121
- .box-shadow(@shadow);
122
- }
123
-
124
-
125
- // NAVIGATION
126
- // ----------
127
-
128
- // Topbar Nav
129
- // ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
130
- // For backwards compatibility, leave in .topbar div > ul
131
- .topbar div > ul,
132
- .nav {
133
- display: block;
134
- float: left;
135
- margin: 0 10px 0 0;
136
- position: relative;
137
- left: 0;
138
- > li {
139
- display: block;
140
- float: left;
141
- }
142
- a {
143
- display: block;
144
- float: none;
145
- padding: 10px 10px 11px;
146
- line-height: 19px;
147
- text-decoration: none;
148
- &:hover {
149
- color: @white;
150
- text-decoration: none;
151
- }
152
- }
153
- .active > a {
154
- background-color: #222;
155
- background-color: rgba(0,0,0,.5);
156
- }
157
-
158
- // Secondary (floated right) nav in topbar
159
- &.secondary-nav {
160
- float: right;
161
- margin-left: 10px;
162
- margin-right: 0;
163
- // backwards compatibility
164
- .menu-dropdown,
165
- .dropdown-menu {
166
- right: 0;
167
- border: 0;
168
- }
169
- }
170
- // Dropdowns within the .nav
171
- // a.menu:hover and li.open .menu for backwards compatibility
172
- a.menu:hover,
173
- li.open .menu,
174
- .dropdown-toggle:hover,
175
- .dropdown.open .dropdown-toggle {
176
- background: #444;
177
- background: rgba(255,255,255,.05);
178
- }
179
- // .menu-dropdown for backwards compatibility
180
- .menu-dropdown,
181
- .dropdown-menu {
182
- background-color: #333;
183
- // a.menu for backwards compatibility
184
- a.menu,
185
- .dropdown-toggle {
186
- color: @white;
187
- &.open {
188
- background: #444;
189
- background: rgba(255,255,255,.05);
190
- }
191
- }
192
- li a {
193
- color: #999;
194
- text-shadow: 0 1px 0 rgba(0,0,0,.5);
195
- &:hover {
196
- #gradient > .vertical(#292929,#191919);
197
- color: @white;
198
- }
199
- }
200
- .active a {
201
- color: @white;
202
- }
203
- .divider {
204
- background-color: #222;
205
- border-color: #444;
206
- }
207
- }
208
- }
209
-
210
- // For backwards compatibility with new dropdowns, redeclare dropdown link padding
211
- .topbar ul .menu-dropdown li a,
212
- .topbar ul .dropdown-menu li a {
213
- padding: 4px 15px;
214
- }
215
-
216
- // Dropdown Menus
217
- // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
218
- // li.menu for backwards compatibility
219
- li.menu,
220
- .dropdown {
221
- position: relative;
222
- }
223
- // The link that is clicked to toggle the dropdown
224
- // a.menu for backwards compatibility
225
- a.menu:after,
226
- .dropdown-toggle:after {
227
- width: 0;
228
- height: 0;
229
- display: inline-block;
230
- content: "&darr;";
231
- text-indent: -99999px;
232
- vertical-align: top;
233
- margin-top: 8px;
234
- margin-left: 4px;
235
- border-left: 4px solid transparent;
236
- border-right: 4px solid transparent;
237
- border-top: 4px solid @white;
238
- .opacity(50);
239
- }
240
- // The dropdown menu (ul)
241
- // .menu-dropdown for backwards compatibility
242
- .menu-dropdown,
243
- .dropdown-menu {
244
- background-color: @white;
245
- float: left;
246
- display: none; // None by default, but block on "open" of the menu
247
- position: absolute;
248
- top: 40px;
249
- z-index: 900;
250
- min-width: 160px;
251
- max-width: 220px;
252
- _width: 160px;
253
- margin-left: 0; // override default ul styles
254
- margin-right: 0;
255
- padding: 6px 0;
256
- zoom: 1; // do we need this?
257
- border-color: #999;
258
- border-color: rgba(0,0,0,.2);
259
- border-style: solid;
260
- border-width: 0 1px 1px;
261
- .border-radius(0 0 6px 6px);
262
- .box-shadow(0 2px 4px rgba(0,0,0,.2));
263
- .background-clip(padding-box);
264
-
265
- // Unfloat any li's to make them stack
266
- li {
267
- float: none;
268
- display: block;
269
- background-color: none;
270
- }
271
- // Dividers (basically an hr) within the dropdown
272
- .divider {
273
- height: 1px;
274
- margin: 5px 0;
275
- overflow: hidden;
276
- background-color: #eee;
277
- border-bottom: 1px solid @white;
278
- }
279
- }
280
-
281
- .topbar .dropdown-menu, .dropdown-menu {
282
- // Links within the dropdown menu
283
- a {
284
- display: block;
285
- padding: 4px 15px;
286
- clear: both;
287
- font-weight: normal;
288
- line-height: 18px;
289
- color: @gray;
290
- text-shadow: 0 1px 0 @white;
291
- // Hover state
292
- &:hover {
293
- #gradient > .vertical(#eeeeee, #dddddd);
294
- color: @grayDark;
295
- text-decoration: none;
296
- @shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
297
- .box-shadow(@shadow);
298
- }
299
- }
300
- }
301
-
302
- // Open state for the dropdown
303
- // .open for backwards compatibility
304
- .open,
305
- .dropdown.open {
306
- // .menu for backwards compatibility
307
- .menu,
308
- .dropdown-toggle {
309
- color: @white;
310
- background: #ccc;
311
- background: rgba(0,0,0,.3);
312
- }
313
- // .menu-dropdown for backwards compatibility
314
- .menu-dropdown,
315
- .dropdown-menu {
316
- display: block;
317
- }
318
- }
319
-
320
-
321
- // Tabs and Pills
322
- .tabs,
323
- .pills {
324
- margin: 0 0 20px;
325
- padding: 0;
326
- list-style: none;
327
- .clearfix();
328
- > li {
329
- float: left;
330
- > a {
331
- display: block;
332
- }
333
- }
334
- }
335
-
336
- // Basic Tabs
337
- .tabs {
338
- float: left;
339
- width: 100%;
340
- border-bottom: 1px solid #ddd;
341
- > li {
342
- position: relative; // For the dropdowns mostly
343
- top: 1px;
344
- > a {
345
- padding: 0 15px;
346
- margin-right: 2px;
347
- line-height: @baseline * 2;
348
- border: 1px solid transparent;
349
- .border-radius(4px 4px 0 0);
350
- &:hover {
351
- text-decoration: none;
352
- background-color: #eee;
353
- border-color: #eee #eee #ddd;
354
- }
355
- }
356
- &.active > a {
357
- color: @gray;
358
- background-color: @white;
359
- border: 1px solid #ddd;
360
- border-bottom-color: transparent;
361
- }
362
- }
363
- // first one for backwards compatibility
364
- .menu-dropdown,
365
- .dropdown-menu {
366
- top: 35px;
367
- border-width: 1px;
368
- .border-radius(0 6px 6px 6px);
369
- }
370
- // first one for backwards compatibility
371
- a.menu:after,
372
- .dropdown-toggle:after {
373
- border-top-color: #999;
374
- margin-top: 15px;
375
- margin-left: 5px;
376
- }
377
- // first one for backwards compatibility
378
- li.open.menu .menu,
379
- .open.dropdown .dropdown-toggle {
380
- border-color: #999;
381
- }
382
- // first one for backwards compatibility
383
- li.open a.menu:after,
384
- .dropdown.open .dropdown-toggle:after {
385
- border-top-color: #555;
386
- }
387
- }
388
- .tab-content {
389
- clear: both;
390
- }
391
-
392
- // Basic pill nav
393
- .pills {
394
- a {
395
- margin: 5px 3px 5px 0;
396
- padding: 0 15px;
397
- text-shadow: 0 1px 1px @white;
398
- line-height: 30px;
399
- .border-radius(15px);
400
- &:hover {
401
- background: @linkColorHover;
402
- color: @white;
403
- text-decoration: none;
404
- text-shadow: 0 1px 1px rgba(0,0,0,.25);
405
- }
406
- }
407
- .active a {
408
- background: @linkColor;
409
- color: @white;
410
- text-shadow: 0 1px 1px rgba(0,0,0,.25);
411
- }
412
- }
413
-
414
- .tab-content > *,
415
- .pill-content > * {
416
- display: none;
417
- }
418
-
419
- .tab-content > .active,
420
- .pill-content > .active {
421
- display:block;
422
- }
423
-
424
-
425
- // BREADCRUMBS
426
- // -----------
427
-
428
- .breadcrumb {
429
- margin: 0 0 @baseline;
430
- padding: 7px 14px;
431
- #gradient > .vertical(#ffffff, #f5f5f5);
432
- border: 1px solid #ddd;
433
- .border-radius(3px);
434
- .box-shadow(inset 0 1px 0 @white);
435
- li {
436
- display: inline;
437
- text-shadow: 0 1px 0 @white;
438
- }
439
- .divider {
440
- padding: 0 5px;
441
- color: @grayLight;
442
- }
443
- a {
444
- }
445
- .active a {
446
- color: @grayDark;
447
- }
448
- }
449
-
450
-
451
- // PAGE HEADERS
452
- // ------------
453
-
454
- .hero-unit {
455
- background-color: #f5f5f5;
456
- margin-bottom: 30px;
457
- padding: 60px;
458
- .border-radius(6px);
459
- h1 {
460
- margin-bottom: 0;
461
- font-size: 60px;
462
- line-height: 1;
463
- letter-spacing: -1px;
464
- }
465
- p {
466
- font-size: 18px;
467
- font-weight: 200;
468
- line-height: @baseline * 1.5;
469
- }
470
- }
471
- footer {
472
- margin-top: @baseline - 1;
473
- padding-top: @baseline - 1;
474
- border-top: 1px solid #eee;
475
- }
476
-
477
-
478
- // PAGE HEADERS
479
- // ------------
480
-
481
- .page-header {
482
- margin-bottom: @baseline - 1;
483
- border-bottom: 1px solid #ddd;
484
- .box-shadow(0 1px 0 rgba(255,255,255,.5));
485
- h1 {
486
- margin-bottom: (@baseline / 2) - 1px;
487
- }
488
- }
489
-
490
-
491
- // BUTTON STYLES
492
- // -------------
493
-
494
- // Shared colors for buttons and alerts
495
- .btn,
496
- .alert-message {
497
- // Set text color
498
- &.danger,
499
- &.danger:hover,
500
- &.error,
501
- &.error:hover,
502
- &.success,
503
- &.success:hover,
504
- &.info,
505
- &.info:hover {
506
- color: @white
507
- }
508
- // Danger and error appear as red
509
- &.danger,
510
- &.error {
511
- .gradientBar(#ee5f5b, #c43c35);
512
- }
513
- // Success appears as green
514
- &.success {
515
- .gradientBar(#62c462, #57a957);
516
- }
517
- // Info appears as a neutral blue
518
- &.info {
519
- .gradientBar(#5bc0de, #339bb9);
520
- }
521
- }
522
-
523
- // Base .btn styles
524
- .btn {
525
- // Button Base
526
- cursor: pointer;
527
- display: inline-block;
528
- #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
529
- padding: 5px 14px 6px;
530
- text-shadow: 0 1px 1px rgba(255,255,255,.75);
531
- color: #333;
532
- font-size: @basefont;
533
- line-height: normal;
534
- border: 1px solid #ccc;
535
- border-bottom-color: #bbb;
536
- .border-radius(4px);
537
- @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
538
- .box-shadow(@shadow);
539
-
540
- &:hover {
541
- background-position: 0 -15px;
542
- color: #333;
543
- text-decoration: none;
544
- }
545
-
546
- // Focus state for keyboard and accessibility
547
- &:focus {
548
- outline: 1px dotted #666;
549
- }
550
-
551
- // Primary Button Type
552
- &.primary {
553
- color: @white;
554
- .gradientBar(@blue, @blueDark)
555
- }
556
-
557
- // Transitions
558
- .transition(.1s linear all);
559
-
560
- // Active and Disabled states
561
- &:active {
562
- @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
563
- .box-shadow(@shadow);
564
- }
565
- &.disabled {
566
- cursor: default;
567
- background-image: none;
568
- .reset-filter();
569
- .opacity(65);
570
- .box-shadow(none);
571
- }
572
- &[disabled] {
573
- // disabled pseudo can't be included with .disabled
574
- // def because IE8 and below will drop it ;_;
575
- cursor: default;
576
- background-image: none;
577
- .reset-filter();
578
- .opacity(65);
579
- .box-shadow(none);
580
- }
581
-
582
- // Button Sizes
583
- &.large {
584
- font-size: @basefont + 2px;
585
- line-height: normal;
586
- padding: 9px 14px 9px;
587
- .border-radius(6px);
588
- }
589
- &.small {
590
- padding: 7px 9px 7px;
591
- font-size: @basefont - 2px;
592
- }
593
- }
594
- // Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
595
- :root .alert-message,
596
- :root .btn {
597
- border-radius: 0 \0;
598
- }
599
-
600
- // Help Firefox not be a jerk about adding extra padding to buttons
601
- button.btn,
602
- input[type=submit].btn {
603
- &::-moz-focus-inner {
604
- padding: 0;
605
- border: 0;
606
- }
607
- }
608
-
609
-
610
- // CLOSE ICONS
611
- // -----------
612
- .close {
613
- float: right;
614
- color: @black;
615
- font-size: 20px;
616
- font-weight: bold;
617
- line-height: @baseline * .75;
618
- text-shadow: 0 1px 0 rgba(255,255,255,1);
619
- .opacity(20);
620
- &:hover {
621
- color: @black;
622
- text-decoration: none;
623
- .opacity(40);
624
- }
625
- }
626
-
627
-
628
- // ERROR STYLES
629
- // ------------
630
-
631
- // Base alert styles
632
- .alert-message {
633
- position: relative;
634
- padding: 7px 15px;
635
- margin-bottom: @baseline;
636
- color: @grayDark;
637
- .gradientBar(#fceec1, #eedc94); // warning by default
638
- text-shadow: 0 1px 0 rgba(255,255,255,.5);
639
- border-width: 1px;
640
- border-style: solid;
641
- .border-radius(4px);
642
- .box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
643
-
644
- // Adjust close icon
645
- .close {
646
- *margin-top: 3px; /* IE7 spacing */
647
- }
648
-
649
- // Remove extra margin from content
650
- h5 {
651
- line-height: @baseline;
652
- }
653
- p {
654
- margin-bottom: 0;
655
- }
656
- div {
657
- margin-top: 5px;
658
- margin-bottom: 2px;
659
- line-height: 28px;
660
- }
661
- .btn {
662
- // Provide actions with buttons
663
- .box-shadow(0 1px 0 rgba(255,255,255,.25));
664
- }
665
-
666
- &.block-message {
667
- background-image: none;
668
- background-color: lighten(#fceec1, 5%);
669
- .reset-filter();
670
- padding: 14px;
671
- border-color: #fceec1;
672
- .box-shadow(none);
673
- ul, p {
674
- margin-right: 30px;
675
- }
676
- ul {
677
- margin-bottom: 0;
678
- }
679
- li {
680
- color: @grayDark;
681
- }
682
- .alert-actions {
683
- margin-top: 5px;
684
- }
685
- &.error,
686
- &.success,
687
- &.info {
688
- color: @grayDark;
689
- text-shadow: 0 1px 0 rgba(255,255,255,.5);
690
- }
691
- &.error {
692
- background-color: lighten(#f56a66, 25%);
693
- border-color: lighten(#f56a66, 20%);
694
- }
695
- &.success {
696
- background-color: lighten(#62c462, 30%);
697
- border-color: lighten(#62c462, 25%);
698
- }
699
- &.info {
700
- background-color: lighten(#6bd0ee, 25%);
701
- border-color: lighten(#6bd0ee, 20%);
702
- }
703
- }
704
- }
705
-
706
-
707
- // PAGINATION
708
- // ----------
709
-
710
- .pagination {
711
- height: @baseline * 2;
712
- margin: @baseline 0;
713
- ul {
714
- float: left;
715
- margin: 0;
716
- border: 1px solid #ddd;
717
- border: 1px solid rgba(0,0,0,.15);
718
- .border-radius(3px);
719
- .box-shadow(0 1px 2px rgba(0,0,0,.05));
720
- }
721
- li {
722
- display: inline;
723
- }
724
- a {
725
- float: left;
726
- padding: 0 14px;
727
- line-height: (@baseline * 2) - 2;
728
- border-right: 1px solid;
729
- border-right-color: #ddd;
730
- border-right-color: rgba(0,0,0,.15);
731
- *border-right-color: #ddd; /* IE6-7 */
732
- text-decoration: none;
733
- }
734
- a:hover,
735
- .active a {
736
- background-color: lighten(@blue, 45%);
737
- }
738
- .disabled a,
739
- .disabled a:hover {
740
- background-color: transparent;
741
- color: @grayLight;
742
- }
743
- .next a {
744
- border: 0;
745
- }
746
- }
747
-
748
-
749
- // WELLS
750
- // -----
751
-
752
- .well {
753
- background-color: #f5f5f5;
754
- margin-bottom: 20px;
755
- padding: 19px;
756
- min-height: 20px;
757
- border: 1px solid #eee;
758
- border: 1px solid rgba(0,0,0,.05);
759
- .border-radius(4px);
760
- .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
761
- blockquote {
762
- border-color: #ddd;
763
- border-color: rgba(0,0,0,.15);
764
- }
765
-
766
- }
767
-
768
-
769
- // MODALS
770
- // ------
771
-
772
- .modal-backdrop {
773
- background-color: @black;
774
- position: fixed;
775
- top: 0;
776
- left: 0;
777
- right: 0;
778
- bottom: 0;
779
- z-index: 10000;
780
- // Fade for backdrop
781
- &.fade { opacity: 0; }
782
- }
783
-
784
- .modal-backdrop, .modal-backdrop.fade.in {
785
- .opacity(80);
786
- }
787
-
788
- .modal {
789
- position: fixed;
790
- top: 50%;
791
- left: 50%;
792
- z-index: 11000;
793
- width: 560px;
794
- margin: -250px 0 0 -250px;
795
- background-color: @white;
796
- border: 1px solid #999;
797
- border: 1px solid rgba(0,0,0,.3);
798
- *border: 1px solid #999; /* IE6-7 */
799
- .border-radius(6px);
800
- .box-shadow(0 3px 7px rgba(0,0,0,0.3));
801
- .background-clip(padding-box);
802
- .close { margin-top: 7px; }
803
- &.fade {
804
- .transition(e('opacity .3s linear, top .3s ease-out'));
805
- top: -25%;
806
- }
807
- &.fade.in { top: 50%; }
808
- }
809
- .modal-header {
810
- border-bottom: 1px solid #eee;
811
- padding: 5px 15px;
812
- }
813
- .modal-body {
814
- padding: 15px;
815
- }
816
- .modal-footer {
817
- background-color: #f5f5f5;
818
- padding: 14px 15px 15px;
819
- border-top: 1px solid #ddd;
820
- .border-radius(0 0 6px 6px);
821
- .box-shadow(inset 0 1px 0 @white);
822
- .clearfix();
823
- margin-bottom: 0;
824
- .btn {
825
- float: right;
826
- margin-left: 5px;
827
- }
828
- }
829
-
830
-
831
- // POPOVER ARROWS
832
- // --------------
833
-
834
- #popoverArrow {
835
- .above(@arrowWidth: 5px) {
836
- bottom: 0;
837
- left: 50%;
838
- margin-left: -@arrowWidth;
839
- border-left: @arrowWidth solid transparent;
840
- border-right: @arrowWidth solid transparent;
841
- border-top: @arrowWidth solid @black;
842
- }
843
- .left(@arrowWidth: 5px) {
844
- top: 50%;
845
- right: 0;
846
- margin-top: -@arrowWidth;
847
- border-top: @arrowWidth solid transparent;
848
- border-bottom: @arrowWidth solid transparent;
849
- border-left: @arrowWidth solid @black;
850
- }
851
- .below(@arrowWidth: 5px) {
852
- top: 0;
853
- left: 50%;
854
- margin-left: -@arrowWidth;
855
- border-left: @arrowWidth solid transparent;
856
- border-right: @arrowWidth solid transparent;
857
- border-bottom: @arrowWidth solid @black;
858
- }
859
- .right(@arrowWidth: 5px) {
860
- top: 50%;
861
- left: 0;
862
- margin-top: -@arrowWidth;
863
- border-top: @arrowWidth solid transparent;
864
- border-bottom: @arrowWidth solid transparent;
865
- border-right: @arrowWidth solid @black;
866
- }
867
- }
868
-
869
- // TWIPSY
870
- // ------
871
-
872
- .twipsy {
873
- display: block;
874
- position: absolute;
875
- visibility: visible;
876
- padding: 5px;
877
- font-size: 11px;
878
- z-index: 1000;
879
- .opacity(80);
880
- &.fade.in {
881
- .opacity(80);
882
- }
883
- &.above .twipsy-arrow { #popoverArrow > .above(); }
884
- &.left .twipsy-arrow { #popoverArrow > .left(); }
885
- &.below .twipsy-arrow { #popoverArrow > .below(); }
886
- &.right .twipsy-arrow { #popoverArrow > .right(); }
887
- }
888
- .twipsy-inner {
889
- padding: 3px 8px;
890
- background-color: @black;
891
- color: white;
892
- text-align: center;
893
- max-width: 200px;
894
- text-decoration: none;
895
- .border-radius(4px);
896
- }
897
- .twipsy-arrow {
898
- position: absolute;
899
- width: 0;
900
- height: 0;
901
- }
902
-
903
-
904
- // POPOVERS
905
- // --------
906
-
907
- .popover {
908
- position: absolute;
909
- top: 0;
910
- left: 0;
911
- z-index: 1000;
912
- padding: 5px;
913
- display: none;
914
- &.above .arrow { #popoverArrow > .above(); }
915
- &.right .arrow { #popoverArrow > .right(); }
916
- &.below .arrow { #popoverArrow > .below(); }
917
- &.left .arrow { #popoverArrow > .left(); }
918
- .arrow {
919
- position: absolute;
920
- width: 0;
921
- height: 0;
922
- }
923
- .inner {
924
- background-color: @black;
925
- background-color: rgba(0,0,0,.8);
926
- padding: 3px;
927
- overflow: hidden;
928
- width: 280px;
929
- .border-radius(6px);
930
- .box-shadow(0 3px 7px rgba(0,0,0,0.3));
931
- }
932
- .title {
933
- background-color: #f5f5f5;
934
- padding: 9px 15px;
935
- line-height: 1;
936
- .border-radius(3px 3px 0 0);
937
- border-bottom:1px solid #eee;
938
- }
939
- .content {
940
- background-color: @white;
941
- padding: 14px;
942
- .border-radius(0 0 3px 3px);
943
- .background-clip(padding-box);
944
- p, ul, ol {
945
- margin-bottom: 0;
946
- }
947
- }
948
- }
949
-
950
-
951
- // PATTERN ANIMATIONS
952
- // ------------------
953
-
954
- .fade {
955
- .transition(opacity .15s linear);
956
- opacity: 0;
957
- &.in {
958
- opacity: 1;
959
- }
960
- }
961
-
962
-
963
- // LABELS
964
- // ------
965
-
966
- .label {
967
- padding: 1px 3px 2px;
968
- background-color: @grayLight;
969
- font-size: @basefont * .75;
970
- font-weight: bold;
971
- color: @white;
972
- text-transform: uppercase;
973
- .border-radius(3px);
974
- &.important { background-color: #c43c35; }
975
- &.warning { background-color: @orange; }
976
- &.success { background-color: @green; }
977
- &.notice { background-color: lighten(@blue, 25%); }
978
- }
979
-
980
-
981
- // MEDIA GRIDS
982
- // -----------
983
-
984
- .media-grid {
985
- margin-left: -20px;
986
- margin-bottom: 0;
987
- .clearfix();
988
- li {
989
- display: inline;
990
- }
991
- a {
992
- float: left;
993
- padding: 4px;
994
- margin: 0 0 20px 20px;
995
- border: 1px solid #ddd;
996
- .border-radius(4px);
997
- .box-shadow(0 1px 1px rgba(0,0,0,.075));
998
- img {
999
- display: block;
1000
- }
1001
- &:hover {
1002
- border-color: @linkColor;
1003
- .box-shadow(0 1px 4px rgba(0,105,214,.25));
1004
- }
1005
- }
1006
- }
1007
-
1
+ /* Patterns.less
2
+ * Repeatable UI elements outside the base styles provided from the scaffolding
3
+ * ---------------------------------------------------------------------------- */
4
+
5
+
6
+ // TOPBAR
7
+ // ------
8
+
9
+ // Topbar for Branding and Nav
10
+ .topbar {
11
+ height: 40px;
12
+ position: fixed;
13
+ top: 0;
14
+ left: 0;
15
+ right: 0;
16
+ z-index: 10000;
17
+ overflow: visible;
18
+
19
+ // Links get text shadow
20
+ a {
21
+ color: @grayLight;
22
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
23
+ }
24
+
25
+ // Hover and active states
26
+ // h3 for backwards compatibility
27
+ h3 a:hover,
28
+ .brand:hover,
29
+ ul .active > a {
30
+ background-color: #333;
31
+ background-color: rgba(255,255,255,.05);
32
+ color: @white;
33
+ text-decoration: none;
34
+ }
35
+
36
+ // Website name
37
+ // h3 left for backwards compatibility
38
+ h3 {
39
+ position: relative;
40
+ }
41
+ h3 a,
42
+ .brand {
43
+ float: left;
44
+ display: block;
45
+ padding: 8px 20px 12px;
46
+ margin-left: -20px; // negative indent to left-align the text down the page
47
+ color: @white;
48
+ font-size: 20px;
49
+ font-weight: 200;
50
+ line-height: 1;
51
+ }
52
+
53
+ // Plain text in topbar
54
+ p {
55
+ margin: 0;
56
+ line-height: 40px;
57
+ a:hover {
58
+ background-color: transparent;
59
+ color: @white;
60
+ }
61
+ }
62
+
63
+ // Search Form
64
+ form {
65
+ float: left;
66
+ margin: 5px 0 0 0;
67
+ position: relative;
68
+ .opacity(100);
69
+ }
70
+ // Todo: remove from v2.0 when ready, added for legacy
71
+ form.pull-right {
72
+ float: right;
73
+ }
74
+ input {
75
+ background-color: #444;
76
+ background-color: rgba(255,255,255,.3);
77
+ #font > .sans-serif(13px, normal, 1);
78
+ padding: 4px 9px;
79
+ color: @white;
80
+ color: rgba(255,255,255,.75);
81
+ border: 1px solid #111;
82
+ .border-radius(4px);
83
+ @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
84
+ .box-shadow(@shadow);
85
+ .transition(none);
86
+
87
+ // Placeholder text gets special styles; can't be bundled together though for some reason
88
+ &:-moz-placeholder {
89
+ color: @grayLighter;
90
+ }
91
+ &::-webkit-input-placeholder {
92
+ color: @grayLighter;
93
+ }
94
+ // Hover states
95
+ &:hover {
96
+ background-color: @grayLight;
97
+ background-color: rgba(255,255,255,.5);
98
+ color: @white;
99
+ }
100
+ // Focus states (we use .focused since IE8 and down doesn't support :focus)
101
+ &:focus,
102
+ &.focused {
103
+ outline: 0;
104
+ background-color: @white;
105
+ color: @grayDark;
106
+ text-shadow: 0 1px 0 @white;
107
+ border: 0;
108
+ padding: 5px 10px;
109
+ .box-shadow(0 0 3px rgba(0,0,0,.15));
110
+ }
111
+ }
112
+ }
113
+
114
+ // gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
115
+ // For backwards compatibility, include .topbar .fill
116
+ .topbar-inner,
117
+ .topbar .fill {
118
+ background-color: #222;
119
+ #gradient > .vertical(#333, #222);
120
+ @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
121
+ .box-shadow(@shadow);
122
+ }
123
+
124
+
125
+ // NAVIGATION
126
+ // ----------
127
+
128
+ // Topbar Nav
129
+ // ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity
130
+ // For backwards compatibility, leave in .topbar div > ul
131
+ .topbar div > ul,
132
+ .nav {
133
+ display: block;
134
+ float: left;
135
+ margin: 0 10px 0 0;
136
+ position: relative;
137
+ left: 0;
138
+ > li {
139
+ display: block;
140
+ float: left;
141
+ }
142
+ a {
143
+ display: block;
144
+ float: none;
145
+ padding: 10px 10px 11px;
146
+ line-height: 19px;
147
+ text-decoration: none;
148
+ &:hover {
149
+ color: @white;
150
+ text-decoration: none;
151
+ }
152
+ }
153
+ .active > a {
154
+ background-color: #222;
155
+ background-color: rgba(0,0,0,.5);
156
+ }
157
+
158
+ // Secondary (floated right) nav in topbar
159
+ &.secondary-nav {
160
+ float: right;
161
+ margin-left: 10px;
162
+ margin-right: 0;
163
+ // backwards compatibility
164
+ .menu-dropdown,
165
+ .dropdown-menu {
166
+ right: 0;
167
+ border: 0;
168
+ }
169
+ }
170
+ // Dropdowns within the .nav
171
+ // a.menu:hover and li.open .menu for backwards compatibility
172
+ a.menu:hover,
173
+ li.open .menu,
174
+ .dropdown-toggle:hover,
175
+ .dropdown.open .dropdown-toggle {
176
+ background: #444;
177
+ background: rgba(255,255,255,.05);
178
+ }
179
+ // .menu-dropdown for backwards compatibility
180
+ .menu-dropdown,
181
+ .dropdown-menu {
182
+ background-color: #333;
183
+ // a.menu for backwards compatibility
184
+ a.menu,
185
+ .dropdown-toggle {
186
+ color: @white;
187
+ &.open {
188
+ background: #444;
189
+ background: rgba(255,255,255,.05);
190
+ }
191
+ }
192
+ li a {
193
+ color: #999;
194
+ text-shadow: 0 1px 0 rgba(0,0,0,.5);
195
+ &:hover {
196
+ #gradient > .vertical(#292929,#191919);
197
+ color: @white;
198
+ }
199
+ }
200
+ .active a {
201
+ color: @white;
202
+ }
203
+ .divider {
204
+ background-color: #222;
205
+ border-color: #444;
206
+ }
207
+ }
208
+ }
209
+
210
+ // For backwards compatibility with new dropdowns, redeclare dropdown link padding
211
+ .topbar ul .menu-dropdown li a,
212
+ .topbar ul .dropdown-menu li a {
213
+ padding: 4px 15px;
214
+ }
215
+
216
+ // Dropdown Menus
217
+ // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
218
+ // li.menu for backwards compatibility
219
+ li.menu,
220
+ .dropdown {
221
+ position: relative;
222
+ }
223
+ // The link that is clicked to toggle the dropdown
224
+ // a.menu for backwards compatibility
225
+ a.menu:after,
226
+ .dropdown-toggle:after {
227
+ width: 0;
228
+ height: 0;
229
+ display: inline-block;
230
+ content: "&darr;";
231
+ text-indent: -99999px;
232
+ vertical-align: top;
233
+ margin-top: 8px;
234
+ margin-left: 4px;
235
+ border-left: 4px solid transparent;
236
+ border-right: 4px solid transparent;
237
+ border-top: 4px solid @white;
238
+ .opacity(50);
239
+ }
240
+ // The dropdown menu (ul)
241
+ // .menu-dropdown for backwards compatibility
242
+ .menu-dropdown,
243
+ .dropdown-menu {
244
+ background-color: @white;
245
+ float: left;
246
+ display: none; // None by default, but block on "open" of the menu
247
+ position: absolute;
248
+ top: 40px;
249
+ z-index: 900;
250
+ min-width: 160px;
251
+ max-width: 220px;
252
+ _width: 160px;
253
+ margin-left: 0; // override default ul styles
254
+ margin-right: 0;
255
+ padding: 6px 0;
256
+ zoom: 1; // do we need this?
257
+ border-color: #999;
258
+ border-color: rgba(0,0,0,.2);
259
+ border-style: solid;
260
+ border-width: 0 1px 1px;
261
+ .border-radius(0 0 6px 6px);
262
+ .box-shadow(0 2px 4px rgba(0,0,0,.2));
263
+ .background-clip(padding-box);
264
+
265
+ // Unfloat any li's to make them stack
266
+ li {
267
+ float: none;
268
+ display: block;
269
+ background-color: none;
270
+ }
271
+ // Dividers (basically an hr) within the dropdown
272
+ .divider {
273
+ height: 1px;
274
+ margin: 5px 0;
275
+ overflow: hidden;
276
+ background-color: #eee;
277
+ border-bottom: 1px solid @white;
278
+ }
279
+ }
280
+
281
+ .topbar .dropdown-menu,
282
+ .dropdown-menu {
283
+ // Links within the dropdown menu
284
+ a {
285
+ display: block;
286
+ padding: 4px 15px;
287
+ clear: both;
288
+ font-weight: normal;
289
+ line-height: 18px;
290
+ color: @gray;
291
+ text-shadow: 0 1px 0 @white;
292
+ // Hover state
293
+ &:hover,
294
+ &.hover {
295
+ #gradient > .vertical(#eeeeee, #dddddd);
296
+ color: @grayDark;
297
+ text-decoration: none;
298
+ @shadow: inset 0 1px 0 rgba(0,0,0,.025), inset 0 -1px rgba(0,0,0,.025);
299
+ .box-shadow(@shadow);
300
+ }
301
+ }
302
+ }
303
+
304
+ // Open state for the dropdown
305
+ // .open for backwards compatibility
306
+ .open,
307
+ .dropdown.open {
308
+ // .menu for backwards compatibility
309
+ .menu,
310
+ .dropdown-toggle {
311
+ color: @white;
312
+ background: #ccc;
313
+ background: rgba(0,0,0,.3);
314
+ }
315
+ // .menu-dropdown for backwards compatibility
316
+ .menu-dropdown,
317
+ .dropdown-menu {
318
+ display: block;
319
+ }
320
+ }
321
+
322
+
323
+ // TABS AND PILLS
324
+ // --------------
325
+
326
+ // Common styles
327
+ .tabs,
328
+ .pills {
329
+ margin: 0 0 @baseline;
330
+ padding: 0;
331
+ list-style: none;
332
+ .clearfix();
333
+ > li {
334
+ float: left;
335
+ > a {
336
+ display: block;
337
+ }
338
+ }
339
+ }
340
+
341
+ // Tabs
342
+ .tabs {
343
+ border-color: #ddd;
344
+ border-style: solid;
345
+ border-width: 0 0 1px;
346
+ > li {
347
+ position: relative; // For the dropdowns mostly
348
+ margin-bottom: -1px;
349
+ > a {
350
+ padding: 0 15px;
351
+ margin-right: 2px;
352
+ line-height: (@baseline * 2) - 2;
353
+ border: 1px solid transparent;
354
+ .border-radius(4px 4px 0 0);
355
+ &:hover {
356
+ text-decoration: none;
357
+ background-color: #eee;
358
+ border-color: #eee #eee #ddd;
359
+ }
360
+ }
361
+ }
362
+ // Active state, and it's :hover to override normal :hover
363
+ .active > a,
364
+ .active > a:hover {
365
+ color: @gray;
366
+ background-color: @white;
367
+ border: 1px solid #ddd;
368
+ border-bottom-color: transparent;
369
+ cursor: default;
370
+ }
371
+ }
372
+
373
+ // Dropdowns in tabs
374
+ .tabs {
375
+ // first one for backwards compatibility
376
+ .menu-dropdown,
377
+ .dropdown-menu {
378
+ top: 35px;
379
+ border-width: 1px;
380
+ .border-radius(0 6px 6px 6px);
381
+ }
382
+ // first one for backwards compatibility
383
+ a.menu:after,
384
+ .dropdown-toggle:after {
385
+ border-top-color: #999;
386
+ margin-top: 15px;
387
+ margin-left: 5px;
388
+ }
389
+ // first one for backwards compatibility
390
+ li.open.menu .menu,
391
+ .open.dropdown .dropdown-toggle {
392
+ border-color: #999;
393
+ }
394
+ // first one for backwards compatibility
395
+ li.open a.menu:after,
396
+ .dropdown.open .dropdown-toggle:after {
397
+ border-top-color: #555;
398
+ }
399
+ }
400
+
401
+ // Pills
402
+ .pills {
403
+ a {
404
+ margin: 5px 3px 5px 0;
405
+ padding: 0 15px;
406
+ line-height: 30px;
407
+ text-shadow: 0 1px 1px @white;
408
+ .border-radius(15px);
409
+ &:hover {
410
+ color: @white;
411
+ text-decoration: none;
412
+ text-shadow: 0 1px 1px rgba(0,0,0,.25);
413
+ background-color: @linkColorHover;
414
+ }
415
+ }
416
+ .active a {
417
+ color: @white;
418
+ text-shadow: 0 1px 1px rgba(0,0,0,.25);
419
+ background-color: @linkColor;
420
+ }
421
+ }
422
+
423
+ // Stacked pills
424
+ .pills-vertical > li {
425
+ float: none;
426
+ }
427
+
428
+ // Tabbable areas
429
+ .tab-content,
430
+ .pill-content {
431
+ }
432
+ .tab-content > .tab-pane,
433
+ .pill-content > .pill-pane {
434
+ display: none;
435
+ }
436
+ .tab-content > .active,
437
+ .pill-content > .active {
438
+ display: block;
439
+ }
440
+
441
+
442
+ // BREADCRUMBS
443
+ // -----------
444
+
445
+ .breadcrumb {
446
+ padding: 7px 14px;
447
+ margin: 0 0 @baseline;
448
+ #gradient > .vertical(#ffffff, #f5f5f5);
449
+ border: 1px solid #ddd;
450
+ .border-radius(3px);
451
+ .box-shadow(inset 0 1px 0 @white);
452
+ li {
453
+ display: inline;
454
+ text-shadow: 0 1px 0 @white;
455
+ }
456
+ .divider {
457
+ padding: 0 5px;
458
+ color: @grayLight;
459
+ }
460
+ .active a {
461
+ color: @grayDark;
462
+ }
463
+ }
464
+
465
+
466
+ // PAGE HEADERS
467
+ // ------------
468
+
469
+ .hero-unit {
470
+ background-color: #f5f5f5;
471
+ margin-bottom: 30px;
472
+ padding: 60px;
473
+ .border-radius(6px);
474
+ h1 {
475
+ margin-bottom: 0;
476
+ font-size: 60px;
477
+ line-height: 1;
478
+ letter-spacing: -1px;
479
+ }
480
+ p {
481
+ font-size: 18px;
482
+ font-weight: 200;
483
+ line-height: @baseline * 1.5;
484
+ }
485
+ }
486
+ footer {
487
+ margin-top: @baseline - 1;
488
+ padding-top: @baseline - 1;
489
+ border-top: 1px solid #eee;
490
+ }
491
+
492
+
493
+ // PAGE HEADERS
494
+ // ------------
495
+
496
+ .page-header {
497
+ margin-bottom: @baseline - 1;
498
+ border-bottom: 1px solid #ddd;
499
+ .box-shadow(0 1px 0 rgba(255,255,255,.5));
500
+ h1 {
501
+ margin-bottom: (@baseline / 2) - 1px;
502
+ }
503
+ }
504
+
505
+
506
+ // BUTTON STYLES
507
+ // -------------
508
+
509
+ // Shared colors for buttons and alerts
510
+ .btn,
511
+ .alert-message {
512
+ // Set text color
513
+ &.danger,
514
+ &.danger:hover,
515
+ &.error,
516
+ &.error:hover,
517
+ &.success,
518
+ &.success:hover,
519
+ &.info,
520
+ &.info:hover {
521
+ color: @white
522
+ }
523
+ // Sets the close button to the middle of message
524
+ .close{
525
+ font-family: Arial, sans-serif;
526
+ line-height: 18px;
527
+ }
528
+ // Danger and error appear as red
529
+ &.danger,
530
+ &.error {
531
+ .gradientBar(#ee5f5b, #c43c35);
532
+ }
533
+ // Success appears as green
534
+ &.success {
535
+ .gradientBar(#62c462, #57a957);
536
+ }
537
+ // Info appears as a neutral blue
538
+ &.info {
539
+ .gradientBar(#5bc0de, #339bb9);
540
+ }
541
+ }
542
+
543
+ // Base .btn styles
544
+ .btn {
545
+ // Button Base
546
+ cursor: pointer;
547
+ display: inline-block;
548
+ #gradient > .vertical-three-colors(#ffffff, #ffffff, 25%, darken(#ffffff, 10%)); // Don't use .gradientbar() here since it does a three-color gradient
549
+ padding: 5px 14px 6px;
550
+ text-shadow: 0 1px 1px rgba(255,255,255,.75);
551
+ color: #333;
552
+ font-size: @basefont;
553
+ line-height: normal;
554
+ border: 1px solid #ccc;
555
+ border-bottom-color: #bbb;
556
+ .border-radius(4px);
557
+ @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
558
+ .box-shadow(@shadow);
559
+
560
+ &:hover {
561
+ background-position: 0 -15px;
562
+ color: #333;
563
+ text-decoration: none;
564
+ }
565
+
566
+ // Focus state for keyboard and accessibility
567
+ &:focus {
568
+ outline: 1px dotted #666;
569
+ }
570
+
571
+ // Primary Button Type
572
+ &.primary {
573
+ color: @white;
574
+ .gradientBar(@blue, @blueDark)
575
+ }
576
+
577
+ // Transitions
578
+ .transition(.1s linear all);
579
+
580
+ // Active and Disabled states
581
+ &.active,
582
+ :active {
583
+ @shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.05);
584
+ .box-shadow(@shadow);
585
+ }
586
+ &.disabled {
587
+ cursor: default;
588
+ background-image: none;
589
+ .reset-filter();
590
+ .opacity(65);
591
+ .box-shadow(none);
592
+ }
593
+ &[disabled] {
594
+ // disabled pseudo can't be included with .disabled
595
+ // def because IE8 and below will drop it ;_;
596
+ cursor: default;
597
+ background-image: none;
598
+ .reset-filter();
599
+ .opacity(65);
600
+ .box-shadow(none);
601
+ }
602
+
603
+ // Button Sizes
604
+ &.large {
605
+ font-size: @basefont + 2px;
606
+ line-height: normal;
607
+ padding: 9px 14px 9px;
608
+ .border-radius(6px);
609
+ }
610
+ &.small {
611
+ padding: 7px 9px 7px;
612
+ font-size: @basefont - 2px;
613
+ }
614
+ }
615
+ // Super jank hack for removing border-radius from IE9 so we can keep filter gradients on alerts and buttons
616
+ :root .alert-message,
617
+ :root .btn {
618
+ border-radius: 0 \0;
619
+ }
620
+
621
+ // Help Firefox not be a jerk about adding extra padding to buttons
622
+ button.btn,
623
+ input[type=submit].btn {
624
+ &::-moz-focus-inner {
625
+ padding: 0;
626
+ border: 0;
627
+ }
628
+ }
629
+
630
+
631
+ // CLOSE ICONS
632
+ // -----------
633
+ .close {
634
+ float: right;
635
+ color: @black;
636
+ font-size: 20px;
637
+ font-weight: bold;
638
+ line-height: @baseline * .75;
639
+ text-shadow: 0 1px 0 rgba(255,255,255,1);
640
+ .opacity(25);
641
+ &:hover {
642
+ color: @black;
643
+ text-decoration: none;
644
+ .opacity(40);
645
+ }
646
+ }
647
+
648
+
649
+ // ERROR STYLES
650
+ // ------------
651
+
652
+ // Base alert styles
653
+ .alert-message {
654
+ position: relative;
655
+ padding: 7px 15px;
656
+ margin-bottom: @baseline;
657
+ color: @grayDark;
658
+ .gradientBar(#fceec1, #eedc94); // warning by default
659
+ text-shadow: 0 1px 0 rgba(255,255,255,.5);
660
+ border-width: 1px;
661
+ border-style: solid;
662
+ .border-radius(4px);
663
+ .box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
664
+
665
+ // Adjust close icon
666
+ .close {
667
+ margin-top: 1px;
668
+ *margin-top: 0; // For IE7
669
+ }
670
+
671
+ // Make links same color as text and stand out more
672
+ a {
673
+ font-weight: bold;
674
+ color: @grayDark;
675
+ }
676
+ &.danger p a,
677
+ &.error p a,
678
+ &.success p a,
679
+ &.info p a {
680
+ color: @white;
681
+ }
682
+
683
+ // Remove extra margin from content
684
+ h5 {
685
+ line-height: @baseline;
686
+ }
687
+ p {
688
+ margin-bottom: 0;
689
+ }
690
+ div {
691
+ margin-top: 5px;
692
+ margin-bottom: 2px;
693
+ line-height: 28px;
694
+ }
695
+ .btn {
696
+ // Provide actions with buttons
697
+ .box-shadow(0 1px 0 rgba(255,255,255,.25));
698
+ }
699
+
700
+ &.block-message {
701
+ background-image: none;
702
+ background-color: lighten(#fceec1, 5%);
703
+ .reset-filter();
704
+ padding: 14px;
705
+ border-color: #fceec1;
706
+ .box-shadow(none);
707
+ ul, p {
708
+ margin-right: 30px;
709
+ }
710
+ ul {
711
+ margin-bottom: 0;
712
+ }
713
+ li {
714
+ color: @grayDark;
715
+ }
716
+ .alert-actions {
717
+ margin-top: 5px;
718
+ }
719
+ &.error,
720
+ &.success,
721
+ &.info {
722
+ color: @grayDark;
723
+ text-shadow: 0 1px 0 rgba(255,255,255,.5);
724
+ }
725
+ &.error {
726
+ background-color: lighten(#f56a66, 25%);
727
+ border-color: lighten(#f56a66, 20%);
728
+ }
729
+ &.success {
730
+ background-color: lighten(#62c462, 30%);
731
+ border-color: lighten(#62c462, 25%);
732
+ }
733
+ &.info {
734
+ background-color: lighten(#6bd0ee, 25%);
735
+ border-color: lighten(#6bd0ee, 20%);
736
+ }
737
+ // Change link color back
738
+ &.danger p a,
739
+ &.error p a,
740
+ &.success p a,
741
+ &.info p a {
742
+ color: @grayDark;
743
+ }
744
+
745
+ }
746
+ }
747
+
748
+
749
+ // PAGINATION
750
+ // ----------
751
+
752
+ .pagination {
753
+ height: @baseline * 2;
754
+ margin: @baseline 0;
755
+ ul {
756
+ float: left;
757
+ margin: 0;
758
+ border: 1px solid #ddd;
759
+ border: 1px solid rgba(0,0,0,.15);
760
+ .border-radius(3px);
761
+ .box-shadow(0 1px 2px rgba(0,0,0,.05));
762
+ }
763
+ li {
764
+ display: inline;
765
+ }
766
+ a {
767
+ float: left;
768
+ padding: 0 14px;
769
+ line-height: (@baseline * 2) - 2;
770
+ border-right: 1px solid;
771
+ border-right-color: #ddd;
772
+ border-right-color: rgba(0,0,0,.15);
773
+ *border-right-color: #ddd; /* IE6-7 */
774
+ text-decoration: none;
775
+ }
776
+ a:hover,
777
+ .active a {
778
+ background-color: lighten(@blue, 45%);
779
+ }
780
+ .disabled a,
781
+ .disabled a:hover {
782
+ background-color: transparent;
783
+ color: @grayLight;
784
+ }
785
+ .next a {
786
+ border: 0;
787
+ }
788
+ }
789
+
790
+
791
+ // WELLS
792
+ // -----
793
+
794
+ .well {
795
+ background-color: #f5f5f5;
796
+ margin-bottom: 20px;
797
+ padding: 19px;
798
+ min-height: 20px;
799
+ border: 1px solid #eee;
800
+ border: 1px solid rgba(0,0,0,.05);
801
+ .border-radius(4px);
802
+ .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
803
+ blockquote {
804
+ border-color: #ddd;
805
+ border-color: rgba(0,0,0,.15);
806
+ }
807
+ }
808
+
809
+
810
+ // MODALS
811
+ // ------
812
+
813
+ .modal-backdrop {
814
+ background-color: @black;
815
+ position: fixed;
816
+ top: 0;
817
+ left: 0;
818
+ right: 0;
819
+ bottom: 0;
820
+ z-index: 10000;
821
+ // Fade for backdrop
822
+ &.fade { opacity: 0; }
823
+ }
824
+
825
+ .modal-backdrop,
826
+ .modal-backdrop.fade.in {
827
+ .opacity(80);
828
+ }
829
+
830
+ .modal {
831
+ position: fixed;
832
+ top: 50%;
833
+ left: 50%;
834
+ z-index: 11000;
835
+ width: 560px;
836
+ margin: -250px 0 0 -280px;
837
+ background-color: @white;
838
+ border: 1px solid #999;
839
+ border: 1px solid rgba(0,0,0,.3);
840
+ *border: 1px solid #999; /* IE6-7 */
841
+ .border-radius(6px);
842
+ .box-shadow(0 3px 7px rgba(0,0,0,0.3));
843
+ .background-clip(padding-box);
844
+ .close { margin-top: 7px; }
845
+ &.fade {
846
+ .transition(e('opacity .3s linear, top .3s ease-out'));
847
+ top: -25%;
848
+ }
849
+ &.fade.in { top: 50%; }
850
+ }
851
+ .modal-header {
852
+ border-bottom: 1px solid #eee;
853
+ padding: 5px 15px;
854
+ }
855
+ .modal-body {
856
+ padding: 15px;
857
+ }
858
+ .modal-body form {
859
+ margin-bottom: 0;
860
+ }
861
+ .modal-footer {
862
+ background-color: #f5f5f5;
863
+ padding: 14px 15px 15px;
864
+ border-top: 1px solid #ddd;
865
+ .border-radius(0 0 6px 6px);
866
+ .box-shadow(inset 0 1px 0 @white);
867
+ .clearfix();
868
+ margin-bottom: 0;
869
+ .btn {
870
+ float: right;
871
+ margin-left: 5px;
872
+ }
873
+ }
874
+
875
+ // Fix the stacking of these components when in modals
876
+ .modal .popover,
877
+ .modal .twipsy {
878
+ z-index: 12000;
879
+ }
880
+
881
+
882
+ // POPOVER ARROWS
883
+ // --------------
884
+
885
+ #popoverArrow {
886
+ .above(@arrowWidth: 5px) {
887
+ bottom: 0;
888
+ left: 50%;
889
+ margin-left: -@arrowWidth;
890
+ border-left: @arrowWidth solid transparent;
891
+ border-right: @arrowWidth solid transparent;
892
+ border-top: @arrowWidth solid @black;
893
+ }
894
+ .left(@arrowWidth: 5px) {
895
+ top: 50%;
896
+ right: 0;
897
+ margin-top: -@arrowWidth;
898
+ border-top: @arrowWidth solid transparent;
899
+ border-bottom: @arrowWidth solid transparent;
900
+ border-left: @arrowWidth solid @black;
901
+ }
902
+ .below(@arrowWidth: 5px) {
903
+ top: 0;
904
+ left: 50%;
905
+ margin-left: -@arrowWidth;
906
+ border-left: @arrowWidth solid transparent;
907
+ border-right: @arrowWidth solid transparent;
908
+ border-bottom: @arrowWidth solid @black;
909
+ }
910
+ .right(@arrowWidth: 5px) {
911
+ top: 50%;
912
+ left: 0;
913
+ margin-top: -@arrowWidth;
914
+ border-top: @arrowWidth solid transparent;
915
+ border-bottom: @arrowWidth solid transparent;
916
+ border-right: @arrowWidth solid @black;
917
+ }
918
+ }
919
+
920
+ // TWIPSY
921
+ // ------
922
+
923
+ .twipsy {
924
+ display: block;
925
+ position: absolute;
926
+ visibility: visible;
927
+ padding: 5px;
928
+ font-size: 11px;
929
+ z-index: 1000;
930
+ .opacity(80);
931
+ &.fade.in {
932
+ .opacity(80);
933
+ }
934
+ &.above .twipsy-arrow { #popoverArrow > .above(); }
935
+ &.left .twipsy-arrow { #popoverArrow > .left(); }
936
+ &.below .twipsy-arrow { #popoverArrow > .below(); }
937
+ &.right .twipsy-arrow { #popoverArrow > .right(); }
938
+ }
939
+ .twipsy-inner {
940
+ padding: 3px 8px;
941
+ background-color: @black;
942
+ color: white;
943
+ text-align: center;
944
+ max-width: 200px;
945
+ text-decoration: none;
946
+ .border-radius(4px);
947
+ }
948
+ .twipsy-arrow {
949
+ position: absolute;
950
+ width: 0;
951
+ height: 0;
952
+ }
953
+
954
+
955
+ // POPOVERS
956
+ // --------
957
+
958
+ .popover {
959
+ position: absolute;
960
+ top: 0;
961
+ left: 0;
962
+ z-index: 1000;
963
+ padding: 5px;
964
+ display: none;
965
+ &.above .arrow { #popoverArrow > .above(); }
966
+ &.right .arrow { #popoverArrow > .right(); }
967
+ &.below .arrow { #popoverArrow > .below(); }
968
+ &.left .arrow { #popoverArrow > .left(); }
969
+ .arrow {
970
+ position: absolute;
971
+ width: 0;
972
+ height: 0;
973
+ }
974
+ .inner {
975
+ background: @black;
976
+ background: rgba(0,0,0,.8);
977
+ padding: 3px;
978
+ overflow: hidden;
979
+ width: 280px;
980
+ .border-radius(6px);
981
+ .box-shadow(0 3px 7px rgba(0,0,0,0.3));
982
+ }
983
+ .title {
984
+ background-color: #f5f5f5;
985
+ padding: 9px 15px;
986
+ line-height: 1;
987
+ .border-radius(3px 3px 0 0);
988
+ border-bottom:1px solid #eee;
989
+ }
990
+ .content {
991
+ background-color: @white;
992
+ padding: 14px;
993
+ .border-radius(0 0 3px 3px);
994
+ .background-clip(padding-box);
995
+ p, ul, ol {
996
+ margin-bottom: 0;
997
+ }
998
+ }
999
+ }
1000
+
1001
+
1002
+ // PATTERN ANIMATIONS
1003
+ // ------------------
1004
+
1005
+ .fade {
1006
+ .transition(opacity .15s linear);
1007
+ opacity: 0;
1008
+ &.in {
1009
+ opacity: 1;
1010
+ }
1011
+ }
1012
+
1013
+
1014
+ // LABELS
1015
+ // ------
1016
+
1017
+ .label {
1018
+ padding: 1px 3px 2px;
1019
+ font-size: @basefont * .75;
1020
+ font-weight: bold;
1021
+ color: @white;
1022
+ text-transform: uppercase;
1023
+ white-space: nowrap;
1024
+ background-color: @grayLight;
1025
+ .border-radius(3px);
1026
+ &.important { background-color: #c43c35; }
1027
+ &.warning { background-color: @orange; }
1028
+ &.success { background-color: @green; }
1029
+ &.notice { background-color: lighten(@blue, 25%); }
1030
+ }
1031
+
1032
+
1033
+ // MEDIA GRIDS
1034
+ // -----------
1035
+
1036
+ .media-grid {
1037
+ margin-left: -@gridGutterWidth;
1038
+ margin-bottom: 0;
1039
+ .clearfix();
1040
+ li {
1041
+ display: inline;
1042
+ }
1043
+ a {
1044
+ float: left;
1045
+ padding: 4px;
1046
+ margin: 0 0 @baseline @gridGutterWidth;
1047
+ border: 1px solid #ddd;
1048
+ .border-radius(4px);
1049
+ .box-shadow(0 1px 1px rgba(0,0,0,.075));
1050
+ img {
1051
+ display: block;
1052
+ }
1053
+ &:hover {
1054
+ border-color: @linkColor;
1055
+ .box-shadow(0 1px 4px rgba(0,105,214,.25));
1056
+ }
1057
+ }
1058
+ }