waterfall_bourbon_neat_rails 0.1.6 → 0.1.7
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.
- checksums.yaml +4 -4
- data/app/assets/stylesheets/base/_grid-settings.scss +28 -5
- data/app/assets/stylesheets/custom/_base.scss +346 -0
- data/app/assets/stylesheets/custom/_components.scss +280 -0
- data/app/assets/stylesheets/custom/_functions.scss +4 -0
- data/app/assets/stylesheets/custom/_mixins.scss +64 -0
- data/app/assets/stylesheets/custom/_pages.scss +438 -0
- data/app/assets/stylesheets/custom/_reset.scss +128 -0
- data/app/assets/stylesheets/custom/_style.scss +7 -0
- data/app/assets/stylesheets/custom/_variables.scss +58 -0
- data/app/assets/stylesheets/custom/rules.txt +14 -0
- data/app/assets/stylesheets/partials/_footer.scss +0 -1
- data/app/assets/stylesheets/waterfall_bourbon_neat_rails/application.scss +1 -0
- data/lib/waterfall_bourbon_neat_rails/version.rb +1 -1
- metadata +11 -2
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
//custom mixins
|
|
2
|
+
//create border radius
|
|
3
|
+
@mixin border-radius($rad: $default_border_radius){
|
|
4
|
+
@include border-top-radius($rad);
|
|
5
|
+
@include border-right-radius($rad);
|
|
6
|
+
@include border-bottom-radius($rad);
|
|
7
|
+
@include border-left-radius($rad);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
//create border
|
|
11
|
+
@mixin border($type, $size, $color){
|
|
12
|
+
@include border-style($type);
|
|
13
|
+
@include border-width($size);
|
|
14
|
+
@include border-color($color);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
//center an element
|
|
18
|
+
@mixin center{
|
|
19
|
+
margin-left: auto;
|
|
20
|
+
margin-right: auto;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
//set font proprieties
|
|
24
|
+
@mixin font-attr($size: $default_font_size, $color: $default_font_color, $weight: $default_font_weight){
|
|
25
|
+
font-size: $size;
|
|
26
|
+
color: $color;
|
|
27
|
+
font-weight: $weight;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
@mixin rotate($deg){
|
|
31
|
+
transform:rotate($deg);
|
|
32
|
+
-ms-transform:rotate($deg); /* IE 9 */
|
|
33
|
+
-webkit-transform:rotate($deg); /* Opera, Chrome, and Safari */
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@mixin setRem($elem, $size){
|
|
37
|
+
$elem : calculateRem($size);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@mixin siteLogo($height: auto, $width: auto){
|
|
41
|
+
width: $width;
|
|
42
|
+
height: $height;
|
|
43
|
+
margin: 0 auto;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@mixin back-btn($color, $width, $height, $line-height, $font-size, $hover-color) {
|
|
47
|
+
@include border-radius();
|
|
48
|
+
color: $color;
|
|
49
|
+
width: $width;
|
|
50
|
+
height: $height;
|
|
51
|
+
line-height: $line-height;
|
|
52
|
+
text-align: center;
|
|
53
|
+
padding: 0;
|
|
54
|
+
cursor: pointer;
|
|
55
|
+
background-color: transparent;
|
|
56
|
+
border: solid 2px $color;
|
|
57
|
+
font-size: $font-size;
|
|
58
|
+
font-weight: bold;
|
|
59
|
+
|
|
60
|
+
&:hover{
|
|
61
|
+
background-color: $color;
|
|
62
|
+
color: $hover-color;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
@@ -0,0 +1,438 @@
|
|
|
1
|
+
// main page(basic style + additional)
|
|
2
|
+
// try to use the same level of specificity
|
|
3
|
+
// element:
|
|
4
|
+
// 1.styling: try to use class attribute
|
|
5
|
+
// 2.js selection: try to use id attribute
|
|
6
|
+
// here we can extend components and add additional style
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
// here we have basic style available for all pages
|
|
10
|
+
// from here we can push other styling attributes for each other page
|
|
11
|
+
|
|
12
|
+
body{
|
|
13
|
+
.notification{
|
|
14
|
+
z-index: 4;
|
|
15
|
+
.flash-error, .flash-notice{
|
|
16
|
+
@extend .reset-margin;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
.header{
|
|
20
|
+
z-index: 3;
|
|
21
|
+
}
|
|
22
|
+
.content{
|
|
23
|
+
z-index: 2;
|
|
24
|
+
@include clearfix;
|
|
25
|
+
.container{
|
|
26
|
+
@include container;
|
|
27
|
+
background: rgba(255, 255, 255, 0.91);
|
|
28
|
+
@include border-radius(2px);
|
|
29
|
+
border: solid 1px #4f91cd;
|
|
30
|
+
color: #4f91cd;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
.footer{
|
|
34
|
+
z-index: 1;
|
|
35
|
+
footer{
|
|
36
|
+
width: 100%;
|
|
37
|
+
height: 50px;
|
|
38
|
+
line-height: 50px;
|
|
39
|
+
color:white;
|
|
40
|
+
text-align: center;
|
|
41
|
+
position: absolute;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
//max 3rd level
|
|
47
|
+
|
|
48
|
+
body#main{
|
|
49
|
+
.notification{}
|
|
50
|
+
.header{
|
|
51
|
+
.logo{
|
|
52
|
+
@include outer-container;
|
|
53
|
+
padding: 80px 0;
|
|
54
|
+
img{
|
|
55
|
+
width: 400px;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
.content{
|
|
60
|
+
.login{
|
|
61
|
+
margin-top:100px;
|
|
62
|
+
background-repeat: round;
|
|
63
|
+
@extend .padding10;
|
|
64
|
+
|
|
65
|
+
form{
|
|
66
|
+
width: 500px;
|
|
67
|
+
margin: 10px auto;
|
|
68
|
+
|
|
69
|
+
.form-inputs{
|
|
70
|
+
@extend .padding10;
|
|
71
|
+
background-color: $light_grey_op;
|
|
72
|
+
position: relative;
|
|
73
|
+
box-shadow: 0 0 25px 1px #00154B;
|
|
74
|
+
color: $medium_grey;
|
|
75
|
+
border-radius: 5px;
|
|
76
|
+
width:100%;
|
|
77
|
+
|
|
78
|
+
.forgot-password{
|
|
79
|
+
position: absolute;
|
|
80
|
+
bottom: 5px;
|
|
81
|
+
right: 5px;
|
|
82
|
+
|
|
83
|
+
a{
|
|
84
|
+
color:$medium_blue;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.form-actions{
|
|
90
|
+
@extend .padding10;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
.password-reset{
|
|
95
|
+
form{
|
|
96
|
+
display: block;
|
|
97
|
+
@include clearfix;
|
|
98
|
+
.form_actions{
|
|
99
|
+
@extend .padding10;
|
|
100
|
+
@include clearfix;
|
|
101
|
+
input, .btn_back{
|
|
102
|
+
cursor: pointer;
|
|
103
|
+
width: 100px;
|
|
104
|
+
height: 40px;
|
|
105
|
+
line-height: 40px;
|
|
106
|
+
}
|
|
107
|
+
input{
|
|
108
|
+
float: left;
|
|
109
|
+
}
|
|
110
|
+
.btn_back{
|
|
111
|
+
@include back-btn($light_blue, 100px, 40px, 40px, 1em, white);
|
|
112
|
+
float: right;
|
|
113
|
+
position: relative;
|
|
114
|
+
@include font-attr(1.3em, #fff, 400);
|
|
115
|
+
border:none;
|
|
116
|
+
|
|
117
|
+
span:hover{
|
|
118
|
+
color:$sky_blue;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.arrow{
|
|
122
|
+
@include rotate(45deg);
|
|
123
|
+
position: absolute;
|
|
124
|
+
width: 15px;
|
|
125
|
+
height: 15px;
|
|
126
|
+
left: 0;
|
|
127
|
+
top: 12px;
|
|
128
|
+
border-left: solid 1px white;
|
|
129
|
+
border-bottom: solid 1px white;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
.registration_container{
|
|
136
|
+
padding: 20px;
|
|
137
|
+
|
|
138
|
+
form{
|
|
139
|
+
@include clearfix;
|
|
140
|
+
@include outer-container;
|
|
141
|
+
|
|
142
|
+
fieldset.field_container{
|
|
143
|
+
@include span-columns(10);
|
|
144
|
+
@include clearfix;
|
|
145
|
+
@include center;
|
|
146
|
+
background-color: transparent;
|
|
147
|
+
float: none;
|
|
148
|
+
|
|
149
|
+
legend{
|
|
150
|
+
@include font-attr(1.4em, $medium_blue, bold);
|
|
151
|
+
}
|
|
152
|
+
fieldset{
|
|
153
|
+
legend{
|
|
154
|
+
@include font-attr(1.2em, $medium_blue, bold);
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.error_container{
|
|
160
|
+
height: 30px;
|
|
161
|
+
line-height: 30px;
|
|
162
|
+
color:$font_error_color;
|
|
163
|
+
}
|
|
164
|
+
.form_inputs.acc_details{}
|
|
165
|
+
.form_inputs.acc_info{
|
|
166
|
+
|
|
167
|
+
.left_column, .right_column{
|
|
168
|
+
@include span-columns(5 of 10);
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.right_column{
|
|
172
|
+
|
|
173
|
+
.logo_preview{
|
|
174
|
+
|
|
175
|
+
.img_container{
|
|
176
|
+
height: 200px;
|
|
177
|
+
padding: 5px;
|
|
178
|
+
overflow: hidden;
|
|
179
|
+
@include border(solid, 1px, $light_blue);
|
|
180
|
+
box-shadow: 0 0 1px 1px;
|
|
181
|
+
|
|
182
|
+
img{
|
|
183
|
+
max-width: 100%;
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
.partner_state{
|
|
188
|
+
@include span-columns(1 of 5);
|
|
189
|
+
|
|
190
|
+
select{
|
|
191
|
+
height: 40px;
|
|
192
|
+
width: 100%;
|
|
193
|
+
margin-bottom: 0px;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
}
|
|
197
|
+
.partner_zip_code{
|
|
198
|
+
@include span-columns(2 of 5);
|
|
199
|
+
@include omega;
|
|
200
|
+
padding-left: 10px;
|
|
201
|
+
label{
|
|
202
|
+
text-align: center;
|
|
203
|
+
}
|
|
204
|
+
input{
|
|
205
|
+
@include center;
|
|
206
|
+
width: 60px;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
select{
|
|
212
|
+
width: 60px;
|
|
213
|
+
height: 38px;
|
|
214
|
+
margin-bottom: 0;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.upload_actions{
|
|
218
|
+
margin-top:30px;
|
|
219
|
+
input{
|
|
220
|
+
height: 40px;
|
|
221
|
+
padding: 0;
|
|
222
|
+
margin-bottom: 0;
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
.form_actions{
|
|
228
|
+
@include span-columns(10);
|
|
229
|
+
float: none;
|
|
230
|
+
@include center;
|
|
231
|
+
@extend .padding10;
|
|
232
|
+
@include clearfix;
|
|
233
|
+
color: $light_blue;
|
|
234
|
+
|
|
235
|
+
input{
|
|
236
|
+
float: left;
|
|
237
|
+
}
|
|
238
|
+
.btn_back{
|
|
239
|
+
@include back-btn($light_blue, 100px, 40px, 40px, 1em, white);
|
|
240
|
+
float: right;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
input, .btn_back{
|
|
244
|
+
@include back-btn($light_blue, 100px, 40px, 40px, 1em, white);
|
|
245
|
+
width: 90px;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
.footer{}
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
/*landing page css*/
|
|
256
|
+
|
|
257
|
+
body#landing-page{
|
|
258
|
+
.notification{}
|
|
259
|
+
.header{
|
|
260
|
+
position: relative;
|
|
261
|
+
background: rgb(39, 73, 160);
|
|
262
|
+
border-bottom: solid 2px rgb(7, 27, 78);
|
|
263
|
+
height: 90px;
|
|
264
|
+
.logo1{
|
|
265
|
+
position: absolute;
|
|
266
|
+
left: 20px;
|
|
267
|
+
top:20px;
|
|
268
|
+
cursor: pointer;
|
|
269
|
+
}
|
|
270
|
+
.nav_menu{
|
|
271
|
+
position: absolute;
|
|
272
|
+
right: 20px;
|
|
273
|
+
top:30px;
|
|
274
|
+
}
|
|
275
|
+
}
|
|
276
|
+
.content{
|
|
277
|
+
.container{
|
|
278
|
+
min-height: 400px;
|
|
279
|
+
margin-top:10px;
|
|
280
|
+
|
|
281
|
+
.url{
|
|
282
|
+
margin-top: 20px;
|
|
283
|
+
@include span-columns(6);
|
|
284
|
+
@include center;
|
|
285
|
+
float:none;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.url__item{
|
|
289
|
+
width: 100%;
|
|
290
|
+
height: 40px;
|
|
291
|
+
padding-left: 5px;
|
|
292
|
+
@include border(solid, 1px, $sky_blue);
|
|
293
|
+
@include border-radius;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
form{
|
|
297
|
+
width: 500px;
|
|
298
|
+
margin: 10px auto;
|
|
299
|
+
}
|
|
300
|
+
.form_actions{;
|
|
301
|
+
@extend .padding10;
|
|
302
|
+
@include clearfix;
|
|
303
|
+
color: $light_blue;
|
|
304
|
+
|
|
305
|
+
input, .btn_back {
|
|
306
|
+
@include back-btn($light_blue, 100px, 40px, 40px, 1em, white);
|
|
307
|
+
}
|
|
308
|
+
input{
|
|
309
|
+
float: left;
|
|
310
|
+
}
|
|
311
|
+
.btn_back {
|
|
312
|
+
float: right;
|
|
313
|
+
}
|
|
314
|
+
}
|
|
315
|
+
}
|
|
316
|
+
//for the view profile page
|
|
317
|
+
.profile{
|
|
318
|
+
@include container;
|
|
319
|
+
@include clearfix;
|
|
320
|
+
|
|
321
|
+
.info-container, .actions-container{
|
|
322
|
+
@include span-columns(9);
|
|
323
|
+
@include clearfix;
|
|
324
|
+
margin-left: auto;
|
|
325
|
+
margin-right: auto!important;
|
|
326
|
+
float: none;
|
|
327
|
+
background-color: $light_grey_op;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
.info-container{
|
|
331
|
+
.left-side, .right-side{
|
|
332
|
+
@include span-columns(4 of 8);
|
|
333
|
+
@include font-attr(20px, $light_blue, bold);
|
|
334
|
+
|
|
335
|
+
padding: 20px;
|
|
336
|
+
.border-top{
|
|
337
|
+
border-top:solid 1px $light_blue;
|
|
338
|
+
width: 100%;
|
|
339
|
+
}
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
.left-side{
|
|
343
|
+
.info{
|
|
344
|
+
margin-top: 10px;
|
|
345
|
+
|
|
346
|
+
div{
|
|
347
|
+
@include clearfix;
|
|
348
|
+
|
|
349
|
+
span:first-child{
|
|
350
|
+
@include span-columns(2 of 4);
|
|
351
|
+
@include omega;
|
|
352
|
+
@include font-attr(18px, $medium_blue, bold);
|
|
353
|
+
text-align: right;
|
|
354
|
+
}
|
|
355
|
+
span:last-child{
|
|
356
|
+
@include span-columns(2 of 4);
|
|
357
|
+
@include font-attr(16px, #000 , bold);
|
|
358
|
+
text-align: left;
|
|
359
|
+
|
|
360
|
+
a{
|
|
361
|
+
cursor: pointer;
|
|
362
|
+
}
|
|
363
|
+
}
|
|
364
|
+
}
|
|
365
|
+
}
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
.right-side{
|
|
369
|
+
.img-container{
|
|
370
|
+
@include border(dotted, 2px, $light_blue);
|
|
371
|
+
width: 200px;
|
|
372
|
+
height: 200px;
|
|
373
|
+
margin: 15px auto;
|
|
374
|
+
box-shadow: 0px 0px 0px 0px grey;
|
|
375
|
+
}
|
|
376
|
+
.media-container{
|
|
377
|
+
@include font-attr(15px, $light_blue, 100);
|
|
378
|
+
position: relative;
|
|
379
|
+
width: 80%;
|
|
380
|
+
margin:10px auto;
|
|
381
|
+
height: 60px;
|
|
382
|
+
line-height: 50px;
|
|
383
|
+
text-align:center;
|
|
384
|
+
|
|
385
|
+
ul.media{
|
|
386
|
+
width: 100%;
|
|
387
|
+
height: 100%;
|
|
388
|
+
li{
|
|
389
|
+
display: inline-block;
|
|
390
|
+
height: 100%;
|
|
391
|
+
padding: 10px 5px;
|
|
392
|
+
cursor: pointer;
|
|
393
|
+
|
|
394
|
+
a{
|
|
395
|
+
display: block;
|
|
396
|
+
width: 100%;
|
|
397
|
+
height: 100%;
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
img{
|
|
401
|
+
height: 100%;
|
|
402
|
+
}
|
|
403
|
+
}
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
}
|
|
407
|
+
}
|
|
408
|
+
.actions-container{
|
|
409
|
+
padding: 20px;
|
|
410
|
+
.button{
|
|
411
|
+
@include font-attr(18px, $light_blue, bold);
|
|
412
|
+
@include border(solid, 2px, $light_blue);
|
|
413
|
+
@include border-radius;
|
|
414
|
+
width: 80px;
|
|
415
|
+
height: 40px;
|
|
416
|
+
line-height: 40px;
|
|
417
|
+
text-align:center;
|
|
418
|
+
cursor: pointer;
|
|
419
|
+
|
|
420
|
+
&:hover{
|
|
421
|
+
background-color: $light_blue;
|
|
422
|
+
color:white;
|
|
423
|
+
}
|
|
424
|
+
}
|
|
425
|
+
}
|
|
426
|
+
}
|
|
427
|
+
.container2{
|
|
428
|
+
width: 80%;
|
|
429
|
+
margin:10px auto;
|
|
430
|
+
}
|
|
431
|
+
}
|
|
432
|
+
.footer{
|
|
433
|
+
footer{
|
|
434
|
+
background-color: $medium_blue;
|
|
435
|
+
bottom: 0;
|
|
436
|
+
}
|
|
437
|
+
}
|
|
438
|
+
}
|