frontend 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +4 -0
- data/Gemfile +4 -0
- data/Rakefile +1 -0
- data/Readme.md +45 -0
- data/frontend.gemspec +23 -0
- data/lib/frontend.rb +6 -0
- data/lib/frontend/version.rb +3 -0
- data/vendor/assets/javascripts/frontend.js.coffee +5 -0
- data/vendor/assets/javascripts/vendor/backbone.localStorage.js +1 -0
- data/vendor/assets/javascripts/vendor/backrub.js.coffee +523 -0
- data/vendor/assets/javascripts/vendor/handlebars.js +1493 -0
- data/vendor/assets/javascripts/vendor/relational.js +1108 -0
- data/vendor/assets/stylesheets/bootstrap.css.scss +2 -0
- data/vendor/assets/stylesheets/bootstrap/bootstrap.scss +25 -0
- data/vendor/assets/stylesheets/bootstrap/forms.css.scss +368 -0
- data/vendor/assets/stylesheets/bootstrap/patterns.scss +769 -0
- data/vendor/assets/stylesheets/bootstrap/preboot.css.scss +275 -0
- data/vendor/assets/stylesheets/bootstrap/reset.scss +146 -0
- data/vendor/assets/stylesheets/bootstrap/scaffolding.scss +204 -0
- data/vendor/assets/stylesheets/bootstrap/tables.scss +148 -0
- data/vendor/assets/stylesheets/bootstrap/type.scss +192 -0
- metadata +90 -0
@@ -0,0 +1,275 @@
|
|
1
|
+
/* Preboot.scss
|
2
|
+
* Variables and mixins to pre-ignite any new web development project
|
3
|
+
* ------------------------------------------------------------------ */
|
4
|
+
|
5
|
+
|
6
|
+
// VARIABLES
|
7
|
+
// ---------
|
8
|
+
|
9
|
+
// Links
|
10
|
+
$linkColor: #0069d6;
|
11
|
+
$linkColorHover: darken($linkColor, 10);
|
12
|
+
|
13
|
+
// Grays
|
14
|
+
$black: #000;
|
15
|
+
$grayDark: lighten($black, 25%);
|
16
|
+
$gray: lighten($black, 50%);
|
17
|
+
$grayLight: lighten($black, 75%);
|
18
|
+
$grayLighter: lighten($black, 90%);
|
19
|
+
$white: #fff;
|
20
|
+
|
21
|
+
// Accent Colors
|
22
|
+
$blue: #049CDB;
|
23
|
+
$blueDark: #0064CD;
|
24
|
+
$green: #46a546;
|
25
|
+
$red: #9d261d;
|
26
|
+
$yellow: #ffc40d;
|
27
|
+
$orange: #f89406;
|
28
|
+
$pink: #c3325f;
|
29
|
+
$purple: #7a43b6;
|
30
|
+
|
31
|
+
// Baseline grid
|
32
|
+
$basefont: 13px;
|
33
|
+
$baseline: 18px;
|
34
|
+
|
35
|
+
// Griditude
|
36
|
+
$gridColumns: 16;
|
37
|
+
$gridColumnWidth: 40px;
|
38
|
+
$gridGutterWidth: 20px;
|
39
|
+
$extraSpace: 40px;
|
40
|
+
$siteWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
|
41
|
+
|
42
|
+
// Color Scheme
|
43
|
+
$baseColor: $blue; // Set a base color
|
44
|
+
$complement: complement($baseColor); // Determine a complementary color
|
45
|
+
$split1: adjust-hue($baseColor, 158); // Split complements
|
46
|
+
$split2: adjust-hue($baseColor, -158);
|
47
|
+
$triad1: adjust-hue($baseColor, 135); // Triads colors
|
48
|
+
$triad2: adjust-hue($baseColor, -135);
|
49
|
+
$tetra1: adjust-hue($baseColor, 90); // Tetra colors
|
50
|
+
$tetra2: adjust-hue($baseColor, -90);
|
51
|
+
$analog1: adjust-hue($baseColor, 22); // Analogs colors
|
52
|
+
$analog2: adjust-hue($baseColor, -22);
|
53
|
+
|
54
|
+
|
55
|
+
// MIXINS
|
56
|
+
// ------
|
57
|
+
|
58
|
+
// Gradients
|
59
|
+
@mixin horizontal-gradient ($startColor: #555, $endColor: #333) {
|
60
|
+
background-color: $endColor;
|
61
|
+
background-repeat: repeat-x;
|
62
|
+
background-image: -khtml-gradient(linear, left top, right top, from($startColor), to($endColor)); // Konqueror
|
63
|
+
background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
|
64
|
+
background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10
|
65
|
+
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, $startColor), color-stop(100%, $endColor)); // Safari 4+, Chrome 2+
|
66
|
+
background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
67
|
+
background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
|
68
|
+
background-image: linear-gradient(left, $startColor, $endColor); // Le standard
|
69
|
+
}
|
70
|
+
|
71
|
+
@mixin vertical-gradient ($startColor: #555, $endColor: #333) {
|
72
|
+
background-color: $endColor;
|
73
|
+
background-repeat: repeat-x;
|
74
|
+
background-image: -khtml-gradient(linear, left top, left bottom, from($startColor), to($endColor)); // Konqueror
|
75
|
+
background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
|
76
|
+
background-image: -ms-linear-gradient(top, $startColor, $endColor); // IE10
|
77
|
+
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $startColor), color-stop(100%, $endColor)); // Safari 4+, Chrome 2+
|
78
|
+
background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
79
|
+
background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
|
80
|
+
background-image: linear-gradient(top, $startColor, $endColor); // The standard
|
81
|
+
}
|
82
|
+
|
83
|
+
@mixin directional-gradient ($startColor: #555, $endColor: #333, $deg: 45deg) {
|
84
|
+
background-color: $endColor;
|
85
|
+
background-repeat: repeat-x;
|
86
|
+
background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
|
87
|
+
background-image: -ms-linear-gradient($deg, $startColor, $endColor); // IE10
|
88
|
+
background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
89
|
+
background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
|
90
|
+
background-image: linear-gradient($deg, $startColor, $endColor); // The standard
|
91
|
+
}
|
92
|
+
|
93
|
+
@mixin vertical-three-colors-gradient($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
|
94
|
+
background-color: $endColor;
|
95
|
+
background-repeat: no-repeat;
|
96
|
+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
|
97
|
+
background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
98
|
+
background-image: -moz-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
99
|
+
background-image: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
100
|
+
background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
101
|
+
background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
|
102
|
+
}
|
103
|
+
|
104
|
+
// Opacity
|
105
|
+
@mixin opacity($opacity: 100) {
|
106
|
+
filter: alpha(opacity=$opacity);
|
107
|
+
-khtml-opacity: $opacity / 100;
|
108
|
+
-moz-opacity: $opacity / 100;
|
109
|
+
opacity: $opacity / 100;
|
110
|
+
}
|
111
|
+
|
112
|
+
// Gradient Bar Colors for buttons and allerts
|
113
|
+
@mixin gradientBar($primaryColor, $secondaryColor) {
|
114
|
+
@include vertical-gradient($primaryColor, $secondaryColor);
|
115
|
+
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
116
|
+
border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
|
117
|
+
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
|
118
|
+
}
|
119
|
+
|
120
|
+
// Clearfix for clearing floats like a boss h5bp.com/q
|
121
|
+
@mixin clearfix {
|
122
|
+
zoom: 1;
|
123
|
+
&:before, &:after {
|
124
|
+
display: table;
|
125
|
+
content: "";
|
126
|
+
}
|
127
|
+
&:after {
|
128
|
+
clear: both;
|
129
|
+
}
|
130
|
+
}
|
131
|
+
.clearfix { @include clearfix; }
|
132
|
+
|
133
|
+
// Center-align a block level element
|
134
|
+
@mixin center-block {
|
135
|
+
display: block;
|
136
|
+
margin: 0 auto;
|
137
|
+
}
|
138
|
+
|
139
|
+
// Sizing shortcuts
|
140
|
+
@mixin size($height: 5px, $width: 5px) {
|
141
|
+
height: $height;
|
142
|
+
width: $width;
|
143
|
+
}
|
144
|
+
@mixin square($size: 5px) {
|
145
|
+
@include size($size, $size);
|
146
|
+
}
|
147
|
+
|
148
|
+
// Input placeholder text
|
149
|
+
@mixin placeholder($color: $grayLight) {
|
150
|
+
:-moz-placeholder {
|
151
|
+
color: $color;
|
152
|
+
}
|
153
|
+
::-webkit-input-placeholder {
|
154
|
+
color: $color;
|
155
|
+
}
|
156
|
+
}
|
157
|
+
|
158
|
+
// Font Stacks
|
159
|
+
@mixin shorthand-font($weight: normal, $size: 14px, $lineHeight: 20px) {
|
160
|
+
font-size: $size;
|
161
|
+
font-weight: $weight;
|
162
|
+
line-height: $lineHeight;
|
163
|
+
}
|
164
|
+
@mixin sans-serif-font($weight: normal, $size: 14px, $lineHeight: 20px) {
|
165
|
+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
166
|
+
font-size: $size;
|
167
|
+
font-weight: $weight;
|
168
|
+
line-height: $lineHeight;
|
169
|
+
}
|
170
|
+
@mixin serif-font($weight: normal, $size: 14px, $lineHeight: 20px) {
|
171
|
+
font-family: "Georgia", Times New Roman, Times, serif;
|
172
|
+
font-size: $size;
|
173
|
+
font-weight: $weight;
|
174
|
+
line-height: $lineHeight;
|
175
|
+
}
|
176
|
+
@mixin monospace-font($weight: normal, $size: 12px, $lineHeight: 20px) {
|
177
|
+
font-family: "Monaco", Courier New, monospace;
|
178
|
+
font-size: $size;
|
179
|
+
font-weight: $weight;
|
180
|
+
line-height: $lineHeight;
|
181
|
+
}
|
182
|
+
|
183
|
+
// Grid System
|
184
|
+
@mixin container {
|
185
|
+
width: $siteWidth;
|
186
|
+
margin: 0 auto;
|
187
|
+
@include clearfix();
|
188
|
+
}
|
189
|
+
.container { @include container; }
|
190
|
+
|
191
|
+
@mixin columns($columnSpan: 1) {
|
192
|
+
width: ($gridColumnWidth * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1));
|
193
|
+
}
|
194
|
+
|
195
|
+
@mixin offset($columnOffset: 1) {
|
196
|
+
margin-left: ($gridColumnWidth * $columnOffset) + ($gridGutterWidth * ($columnOffset - 1)) + $extraSpace;
|
197
|
+
}
|
198
|
+
|
199
|
+
// Border Radius
|
200
|
+
@mixin border-radius($radius: 5px) {
|
201
|
+
-webkit-border-radius: $radius;
|
202
|
+
-moz-border-radius: $radius;
|
203
|
+
border-radius: $radius;
|
204
|
+
}
|
205
|
+
|
206
|
+
// Drop shadows
|
207
|
+
@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {
|
208
|
+
-webkit-box-shadow: $shadow;
|
209
|
+
-moz-box-shadow: $shadow;
|
210
|
+
box-shadow: $shadow;
|
211
|
+
}
|
212
|
+
|
213
|
+
// Transitions
|
214
|
+
@mixin transition($transition) {
|
215
|
+
-webkit-transition: $transition;
|
216
|
+
-moz-transition: $transition;
|
217
|
+
transition: $transition;
|
218
|
+
}
|
219
|
+
|
220
|
+
// Background clipping
|
221
|
+
@mixin background-clip($clip) {
|
222
|
+
-webkit-background-clip: $clip;
|
223
|
+
-moz-background-clip: $clip;
|
224
|
+
background-clip: $clip;
|
225
|
+
}
|
226
|
+
|
227
|
+
// CSS3 Content Columns
|
228
|
+
@mixin content-columns($columnCount, $columnGap: 20px) {
|
229
|
+
-webkit-column-count: $columnCount;
|
230
|
+
-moz-column-count: $columnCount;
|
231
|
+
column-count: $columnCount;
|
232
|
+
-webkit-column-gap: $columnGap;
|
233
|
+
-moz-column-gap: $columnGap;
|
234
|
+
column-gap: $columnGap;
|
235
|
+
}
|
236
|
+
|
237
|
+
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
|
238
|
+
#translucent {
|
239
|
+
@mixin background($color: $white, $alpha: 1) {
|
240
|
+
background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
241
|
+
}
|
242
|
+
@mixin border($color: $white, $alpha: 1) {
|
243
|
+
border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
244
|
+
background-clip: padding-box;
|
245
|
+
}
|
246
|
+
}
|
247
|
+
|
248
|
+
// Shared colors for buttons and alerts
|
249
|
+
.btn,
|
250
|
+
.alert-message {
|
251
|
+
// Set text color
|
252
|
+
&.danger,
|
253
|
+
&.danger:hover,
|
254
|
+
&.error,
|
255
|
+
&.error:hover,
|
256
|
+
&.success,
|
257
|
+
&.success:hover,
|
258
|
+
&.info,
|
259
|
+
&.info:hover {
|
260
|
+
color: $white
|
261
|
+
}
|
262
|
+
// Danger and error appear as red
|
263
|
+
&.danger,
|
264
|
+
&.error {
|
265
|
+
@include gradientBar(#ee5f5b, #c43c35);
|
266
|
+
}
|
267
|
+
// Success appears as green
|
268
|
+
&.success {
|
269
|
+
@include gradientBar(#62c462, #57a957);
|
270
|
+
}
|
271
|
+
// Info appears as a neutral blue
|
272
|
+
&.info {
|
273
|
+
@include gradientBar(#5bc0de, #339bb9);
|
274
|
+
}
|
275
|
+
}
|
@@ -0,0 +1,146 @@
|
|
1
|
+
/* Reset.scss
|
2
|
+
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
|
3
|
+
* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
|
4
|
+
|
5
|
+
|
6
|
+
// ERIC MEYER RESET
|
7
|
+
// --------------------------------------------------
|
8
|
+
|
9
|
+
html, body { margin: 0; padding: 0; }
|
10
|
+
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; }
|
11
|
+
table { border-collapse: collapse; border-spacing: 0; }
|
12
|
+
ol, ul { list-style: none; }
|
13
|
+
q:before, q:after, blockquote:before, blockquote:after { content: ""; }
|
14
|
+
|
15
|
+
|
16
|
+
// Normalize.css
|
17
|
+
// Pulling in select resets form the normalize.css project
|
18
|
+
// --------------------------------------------------
|
19
|
+
|
20
|
+
// Display in IE6-9 and FF3
|
21
|
+
// -------------------------
|
22
|
+
// Source: http://github.com/necolas/normalize.css
|
23
|
+
html {
|
24
|
+
overflow-y: scroll;
|
25
|
+
font-size: 100%;
|
26
|
+
-webkit-text-size-adjust: 100%;
|
27
|
+
-ms-text-size-adjust: 100%;
|
28
|
+
}
|
29
|
+
// Focus states
|
30
|
+
a:focus {
|
31
|
+
outline: thin dotted;
|
32
|
+
}
|
33
|
+
|
34
|
+
// Display in IE6-9 and FF3
|
35
|
+
// -------------------------
|
36
|
+
// Source: http://github.com/necolas/normalize.css
|
37
|
+
article,
|
38
|
+
aside,
|
39
|
+
details,
|
40
|
+
figcaption,
|
41
|
+
figure,
|
42
|
+
footer,
|
43
|
+
header,
|
44
|
+
hgroup,
|
45
|
+
nav,
|
46
|
+
section {
|
47
|
+
display: block;
|
48
|
+
}
|
49
|
+
|
50
|
+
// Display block in IE6-9 and FF3
|
51
|
+
// -------------------------
|
52
|
+
// Source: http://github.com/necolas/normalize.css
|
53
|
+
audio,
|
54
|
+
canvas,
|
55
|
+
video {
|
56
|
+
display: inline-block;
|
57
|
+
*display: inline;
|
58
|
+
*zoom: 1;
|
59
|
+
}
|
60
|
+
|
61
|
+
// Prevents modern browsers from displaying 'audio' without controls
|
62
|
+
// -------------------------
|
63
|
+
// Source: http://github.com/necolas/normalize.css
|
64
|
+
audio:not([controls]) {
|
65
|
+
display: none;
|
66
|
+
}
|
67
|
+
|
68
|
+
// Prevents sub and sup affecting line-height in all browsers
|
69
|
+
// -------------------------
|
70
|
+
// Source: http://github.com/necolas/normalize.css
|
71
|
+
sub,
|
72
|
+
sup {
|
73
|
+
font-size: 75%;
|
74
|
+
line-height: 0;
|
75
|
+
position: relative;
|
76
|
+
vertical-align: baseline;
|
77
|
+
}
|
78
|
+
sup {
|
79
|
+
top: -0.5em;
|
80
|
+
}
|
81
|
+
sub {
|
82
|
+
bottom: -0.25em;
|
83
|
+
}
|
84
|
+
|
85
|
+
// Img border in a's and image quality
|
86
|
+
// -------------------------
|
87
|
+
// Source: http://github.com/necolas/normalize.css
|
88
|
+
img {
|
89
|
+
border: 0;
|
90
|
+
-ms-interpolation-mode: bicubic;
|
91
|
+
}
|
92
|
+
|
93
|
+
// Forms
|
94
|
+
// -------------------------
|
95
|
+
// Source: http://github.com/necolas/normalize.css
|
96
|
+
|
97
|
+
// Font size in all browsers, margin changes, misc consistency
|
98
|
+
button,
|
99
|
+
input,
|
100
|
+
select,
|
101
|
+
textarea {
|
102
|
+
font-size: 100%;
|
103
|
+
margin: 0;
|
104
|
+
vertical-align: baseline;
|
105
|
+
*vertical-align: middle;
|
106
|
+
}
|
107
|
+
button,
|
108
|
+
input {
|
109
|
+
line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
|
110
|
+
*overflow: visible; // Inner spacing ie IE6/7
|
111
|
+
}
|
112
|
+
button::-moz-focus-inner,
|
113
|
+
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
|
114
|
+
border: 0;
|
115
|
+
padding: 0;
|
116
|
+
}
|
117
|
+
button,
|
118
|
+
input[type="button"],
|
119
|
+
input[type="reset"],
|
120
|
+
input[type="submit"] {
|
121
|
+
cursor: pointer; // Cursors on all buttons applied consistently
|
122
|
+
-webkit-appearance: button; // Style clicable inputs in iOS
|
123
|
+
}
|
124
|
+
input[type="search"] { // Appearance in Safari/Chrome
|
125
|
+
-webkit-appearance: textfield;
|
126
|
+
-webkit-box-sizing: content-box;
|
127
|
+
-moz-box-sizing: content-box;
|
128
|
+
box-sizing: content-box;
|
129
|
+
}
|
130
|
+
input[type="search"]::-webkit-search-decoration {
|
131
|
+
-webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
|
132
|
+
}
|
133
|
+
textarea {
|
134
|
+
overflow: auto; // Remove vertical scrollbar in IE6-9
|
135
|
+
vertical-align: top; // Readability and alignment cross-browser
|
136
|
+
}
|
137
|
+
|
138
|
+
// Tables
|
139
|
+
// -------------------------
|
140
|
+
// Source: http://github.com/necolas/normalize.css
|
141
|
+
|
142
|
+
// Remove spacing between table cells
|
143
|
+
table {
|
144
|
+
border-collapse: collapse;
|
145
|
+
border-spacing: 0;
|
146
|
+
}
|
@@ -0,0 +1,204 @@
|
|
1
|
+
|
2
|
+
/*
|
3
|
+
* Scaffolding.scss
|
4
|
+
* Basic and global styles for generating a grid system, structural layout, and page templates
|
5
|
+
* ------------------------------------------------------------------------------------------- */
|
6
|
+
|
7
|
+
// GRID SYSTEM
|
8
|
+
// -----------
|
9
|
+
|
10
|
+
.row {
|
11
|
+
@include clearfix();
|
12
|
+
margin-left: -20px;
|
13
|
+
|
14
|
+
// Default columns
|
15
|
+
.span1,
|
16
|
+
.span2,
|
17
|
+
.span3,
|
18
|
+
.span4,
|
19
|
+
.span5,
|
20
|
+
.span6,
|
21
|
+
.span7,
|
22
|
+
.span8,
|
23
|
+
.span9,
|
24
|
+
.span10,
|
25
|
+
.span11,
|
26
|
+
.span12,
|
27
|
+
.span13,
|
28
|
+
.span14,
|
29
|
+
.span15,
|
30
|
+
.span16 {
|
31
|
+
display: inline;
|
32
|
+
float: left;
|
33
|
+
margin-left: 20px;
|
34
|
+
}
|
35
|
+
|
36
|
+
// Default columns
|
37
|
+
.span1 { @include columns(1); }
|
38
|
+
.span2 { @include columns(2); }
|
39
|
+
.span3 { @include columns(3); }
|
40
|
+
.span4 { @include columns(4); }
|
41
|
+
.span5 { @include columns(5); }
|
42
|
+
.span6 { @include columns(6); }
|
43
|
+
.span7 { @include columns(7); }
|
44
|
+
.span8 { @include columns(8); }
|
45
|
+
.span9 { @include columns(9); }
|
46
|
+
.span10 { @include columns(10); }
|
47
|
+
.span11 { @include columns(11); }
|
48
|
+
.span12 { @include columns(12); }
|
49
|
+
.span13 { @include columns(13); }
|
50
|
+
.span14 { @include columns(14); }
|
51
|
+
.span15 { @include columns(15); }
|
52
|
+
.span16 { @include columns(16); }
|
53
|
+
|
54
|
+
// Offset column options
|
55
|
+
.offset1 { @include offset(1); }
|
56
|
+
.offset2 { @include offset(2); }
|
57
|
+
.offset3 { @include offset(3); }
|
58
|
+
.offset4 { @include offset(4); }
|
59
|
+
.offset5 { @include offset(5); }
|
60
|
+
.offset6 { @include offset(6); }
|
61
|
+
.offset7 { @include offset(7); }
|
62
|
+
.offset8 { @include offset(8); }
|
63
|
+
.offset9 { @include offset(9); }
|
64
|
+
.offset10 { @include offset(10); }
|
65
|
+
.offset11 { @include offset(11); }
|
66
|
+
.offset12 { @include offset(12); }
|
67
|
+
}
|
68
|
+
|
69
|
+
|
70
|
+
// STRUCTURAL LAYOUT
|
71
|
+
// -----------------
|
72
|
+
|
73
|
+
html, body {
|
74
|
+
background-color: #fff;
|
75
|
+
}
|
76
|
+
body {
|
77
|
+
margin: 0;
|
78
|
+
@include sans-serif-font(normal,$basefont,$baseline);
|
79
|
+
color: $gray;
|
80
|
+
text-rendering: optimizeLegibility;
|
81
|
+
}
|
82
|
+
|
83
|
+
// Container (centered, fixed-width layouts)
|
84
|
+
.container {
|
85
|
+
width: 940px;
|
86
|
+
margin: 0 auto;
|
87
|
+
}
|
88
|
+
|
89
|
+
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
|
90
|
+
.container-fluid {
|
91
|
+
padding: 0 20px;
|
92
|
+
@include clearfix();
|
93
|
+
.sidebar {
|
94
|
+
float: left;
|
95
|
+
width: 220px;
|
96
|
+
}
|
97
|
+
.content {
|
98
|
+
min-width: 700px;
|
99
|
+
max-width: 1180px;
|
100
|
+
margin-left: 240px;
|
101
|
+
}
|
102
|
+
}
|
103
|
+
|
104
|
+
|
105
|
+
// BASE STYLES
|
106
|
+
// -----------
|
107
|
+
|
108
|
+
// Links
|
109
|
+
a {
|
110
|
+
color: $linkColor;
|
111
|
+
text-decoration: none;
|
112
|
+
line-height: inherit;
|
113
|
+
font-weight: inherit;
|
114
|
+
&:hover {
|
115
|
+
color: $linkColorHover;
|
116
|
+
text-decoration: underline;
|
117
|
+
}
|
118
|
+
}
|
119
|
+
|
120
|
+
// Buttons
|
121
|
+
.btn {
|
122
|
+
display: inline-block;
|
123
|
+
@include vertical-three-colors-gradient(#fff, #fff, 0.25, darken(#fff, 10%));
|
124
|
+
padding: 4px 14px;
|
125
|
+
text-shadow: 0 1px 1px rgba(255,255,255,.75);
|
126
|
+
color: #333;
|
127
|
+
font-size: 13px;
|
128
|
+
line-height: $baseline;
|
129
|
+
border: 1px solid #ccc;
|
130
|
+
border-bottom-color: #bbb;
|
131
|
+
@include border-radius(4px);
|
132
|
+
$shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
|
133
|
+
@include box-shadow($shadow);
|
134
|
+
&:hover {
|
135
|
+
background-position: 0 -15px;
|
136
|
+
color: #333;
|
137
|
+
text-decoration: none;
|
138
|
+
}
|
139
|
+
}
|
140
|
+
.primary {
|
141
|
+
@include vertical-gradient(#049CDB, #0064CD);
|
142
|
+
color: #fff;
|
143
|
+
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
144
|
+
border: 1px solid darken(#0064CD, 10%);
|
145
|
+
border-bottom-color: darken(#0064CD, 15%);
|
146
|
+
&:hover {
|
147
|
+
color: #fff;
|
148
|
+
}
|
149
|
+
}
|
150
|
+
|
151
|
+
.btn {
|
152
|
+
//.button(#1174C6);
|
153
|
+
@include transition(.1s linear all);
|
154
|
+
&.primary {
|
155
|
+
//@include vertical-gradient($blue, $blueDark);
|
156
|
+
color: #fff;
|
157
|
+
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
158
|
+
border-color: $blueDark $blueDark darken($blueDark, 15%);
|
159
|
+
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
|
160
|
+
&:hover {
|
161
|
+
color: #fff;
|
162
|
+
}
|
163
|
+
}
|
164
|
+
&.large {
|
165
|
+
font-size: 16px;
|
166
|
+
line-height: 28px;
|
167
|
+
@include border-radius(6px);
|
168
|
+
}
|
169
|
+
&.small {
|
170
|
+
padding-right: 9px;
|
171
|
+
padding-left: 9px;
|
172
|
+
font-size: 11px;
|
173
|
+
}
|
174
|
+
&.disabled {
|
175
|
+
background-image: none;
|
176
|
+
@include opacity(65);
|
177
|
+
cursor: default;
|
178
|
+
@include box-shadow(none);
|
179
|
+
}
|
180
|
+
|
181
|
+
// this can't be included with the .disabled def because IE8 and below will drop it ;_;
|
182
|
+
&:disabled {
|
183
|
+
background-image: none;
|
184
|
+
@include opacity(65);
|
185
|
+
cursor: default;
|
186
|
+
@include box-shadow(none);
|
187
|
+
&.primary {
|
188
|
+
color: #fff;
|
189
|
+
}
|
190
|
+
}
|
191
|
+
&:active {
|
192
|
+
$shadow: inset 0 3px 7px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
|
193
|
+
@include box-shadow($shadow);
|
194
|
+
}
|
195
|
+
}
|
196
|
+
|
197
|
+
// Help Firefox not be a jerk about adding extra padding to buttons
|
198
|
+
button.btn,
|
199
|
+
input[type=submit].btn {
|
200
|
+
&::-moz-focus-inner {
|
201
|
+
padding: 0;
|
202
|
+
border: 0;
|
203
|
+
}
|
204
|
+
}
|