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