frontend 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -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
+ }