ama_layout 4.1.0 → 4.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/stylesheets/ama_layout/layout/helper-classes.scss +1 -193
- data/app/assets/stylesheets/ama_layout/layout_components/accordions.scss +13 -2
- data/app/assets/stylesheets/ama_layout/layout_components/banners.scss +42 -0
- data/app/assets/stylesheets/ama_layout/layout_components/buttons.scss +72 -0
- data/app/assets/stylesheets/ama_layout/layout_components/callouts.scss +0 -92
- data/app/assets/stylesheets/ama_layout/layout_components/cart.scss +12 -33
- data/app/assets/stylesheets/ama_layout/layout_components/comparison-radios.scss +4 -0
- data/app/assets/stylesheets/ama_layout/layout_components/content-toggle.scss +10 -0
- data/app/assets/stylesheets/ama_layout/layout_components/footer.scss +7 -0
- data/app/assets/stylesheets/ama_layout/layout_components/forms.scss +0 -50
- data/app/assets/stylesheets/ama_layout/layout_components/graph.scss +0 -22
- data/app/assets/stylesheets/ama_layout/layout_components/icon-group.scss +16 -0
- data/app/assets/stylesheets/ama_layout/layout_components/index.scss +20 -19
- data/app/assets/stylesheets/ama_layout/layout_components/links.scss +5 -0
- data/app/assets/stylesheets/ama_layout/layout_components/notification.scss +4 -0
- data/app/assets/stylesheets/ama_layout/layout_components/promo-block.scss +87 -0
- data/app/assets/stylesheets/ama_layout/layout_components/{sidebar.scss → side_nav.scss} +0 -0
- data/app/views/ama_layout/_top_nav.html.erb +4 -1
- data/lib/ama_layout/version.rb +1 -1
- metadata +7 -7
- data/app/assets/stylesheets/ama_layout/layout_components/banner.scss +0 -17
- data/app/assets/stylesheets/ama_layout/layout_components/blue-boxes.scss +0 -128
- data/app/assets/stylesheets/ama_layout/layout_components/tab-accordions.scss +0 -31
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 1e1de870b16d4d67317c9e4694b49c00e74057d7
|
4
|
+
data.tar.gz: a83e4e0bf9e46f8ad504f37c648d925e8172a7d5
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: f6156a27fc0efdd259a9fc4578a66434fc9c6efeaeeef99bdd4ed861a81414dca014a23d0c851b724525d83d43be6fb56b6dd441e6dbcd042dd506cc3883ac49
|
7
|
+
data.tar.gz: ee4505ed821c7f60497609adac25978ccd4295d211a93b919ccd537633f7f4fc3c3772ddde60501510a085484b50f622026c5ffa9dbdb1ad9d9352fcaf4287d8
|
@@ -1,6 +1,5 @@
|
|
1
1
|
/*
|
2
2
|
|
3
|
-
1. Main Layout Elements
|
4
3
|
2. Panels
|
5
4
|
3. Positioning
|
6
5
|
4. Margins
|
@@ -8,72 +7,15 @@
|
|
8
7
|
6. Background & Text Colours
|
9
8
|
7. Lists
|
10
9
|
8. Links
|
11
|
-
9. Buttons
|
12
10
|
10. Typography
|
13
11
|
|
14
12
|
*/
|
15
|
-
|
16
|
-
/* ==================== 1. Main Layout Elements ==================== */
|
17
|
-
.main-wrapper{
|
18
|
-
margin: $base-margin auto;
|
19
|
-
}
|
20
|
-
|
21
|
-
.page-wrapper{
|
22
|
-
border: $base-border;
|
23
|
-
background-color: $white;
|
24
|
-
}
|
25
|
-
|
26
13
|
.page-title{
|
27
14
|
background: $ash;
|
28
15
|
border-bottom: $base-border;
|
29
16
|
padding: $base-padding 0;
|
30
17
|
}
|
31
|
-
|
32
|
-
.section-title{
|
33
|
-
@extend .page-title;
|
34
|
-
border: 0;
|
35
|
-
padding: $base-padding/2;
|
36
|
-
background-color: $stone;
|
37
|
-
|
38
|
-
h5{
|
39
|
-
color: $slate;
|
40
|
-
}
|
41
|
-
}
|
42
|
-
|
43
|
-
.content-block{
|
44
|
-
margin-bottom: $base-margin;
|
45
|
-
}
|
46
|
-
|
47
|
-
.content-block-bottom{
|
48
|
-
margin-top: $base-margin*8;
|
49
|
-
}
|
50
|
-
|
51
|
-
.image-callout{
|
52
|
-
border: $base-border;
|
53
|
-
margin-bottom: $base-margin;
|
54
|
-
}
|
55
|
-
|
56
|
-
.fullwidth{
|
57
|
-
width: 100% !important;
|
58
|
-
}
|
59
|
-
|
60
18
|
/* ==================== 2. Panels ==================== */
|
61
|
-
.panel-box{
|
62
|
-
padding: $base-padding;
|
63
|
-
|
64
|
-
h4, p{
|
65
|
-
color: $white;
|
66
|
-
margin-top: 0;
|
67
|
-
}
|
68
|
-
}
|
69
|
-
|
70
|
-
.panel-box-confirmation{
|
71
|
-
background: $green;
|
72
|
-
}
|
73
|
-
|
74
|
-
.panel-box-error{
|
75
|
-
background: $brand-red;
|
76
|
-
}
|
77
19
|
|
78
20
|
.panel-title{
|
79
21
|
@extend .page-title;
|
@@ -293,140 +235,6 @@
|
|
293
235
|
line-height: 1.3rem !important;
|
294
236
|
}
|
295
237
|
|
296
|
-
/* ==================== 9. Buttons ==================== */
|
297
|
-
.button{
|
298
|
-
text-decoration: none;
|
299
|
-
|
300
|
-
&:hover,
|
301
|
-
&:active,
|
302
|
-
&:focus{
|
303
|
-
background: lighten($button-background, 10%);
|
304
|
-
}
|
305
|
-
|
306
|
-
&--green{
|
307
|
-
@extend .button;
|
308
|
-
$button-background: $brand-green;
|
309
|
-
background: $button-background;
|
310
|
-
float: right;
|
311
|
-
}
|
312
|
-
|
313
|
-
&--dark-blue{
|
314
|
-
@extend .button;
|
315
|
-
$button-background: $brand-blue-dark;
|
316
|
-
background: $button-background;
|
317
|
-
float: right;
|
318
|
-
}
|
319
|
-
|
320
|
-
&--left{
|
321
|
-
@extend .button;
|
322
|
-
float: left;
|
323
|
-
}
|
324
|
-
|
325
|
-
&--right{
|
326
|
-
@extend .button;
|
327
|
-
float: right;
|
328
|
-
}
|
329
|
-
|
330
|
-
&--de-emphasized{
|
331
|
-
@extend .button;
|
332
|
-
float: left;
|
333
|
-
$button-background: $slate;
|
334
|
-
background: $button-background;
|
335
|
-
|
336
|
-
&:hover,
|
337
|
-
&:active,
|
338
|
-
&:focus{
|
339
|
-
background: lighten($button-background, 10%);
|
340
|
-
}
|
341
|
-
}
|
342
|
-
|
343
|
-
&--expand{
|
344
|
-
@extend .button;
|
345
|
-
@extend .expanded;
|
346
|
-
}
|
347
|
-
|
348
|
-
&--xlarge{
|
349
|
-
@extend .button;
|
350
|
-
width: 100%;
|
351
|
-
min-height: 161px;
|
352
|
-
}
|
353
|
-
}
|
354
|
-
|
355
|
-
.base-button{
|
356
|
-
border-radius: $global-radius;
|
357
|
-
@extend .button;
|
358
|
-
color: $white;
|
359
|
-
}
|
360
|
-
|
361
|
-
.expand{
|
362
|
-
@extend .expanded;
|
363
|
-
}
|
364
|
-
|
365
|
-
.emphasized,
|
366
|
-
.emphasized:visited{
|
367
|
-
@extend .base-button;
|
368
|
-
background: $secondary-color;
|
369
|
-
|
370
|
-
&:hover,
|
371
|
-
&:active,
|
372
|
-
&:focus{
|
373
|
-
background-color: lighten($secondary-color, 10%);
|
374
|
-
}
|
375
|
-
}
|
376
|
-
|
377
|
-
button.disabled,
|
378
|
-
button[disabled],
|
379
|
-
.button.disabled,
|
380
|
-
.button[disabled]{
|
381
|
-
background-color: lighten($secondary-color, 10%);
|
382
|
-
border-color: none;
|
383
|
-
|
384
|
-
&:hover,
|
385
|
-
&:active,
|
386
|
-
&:focus{
|
387
|
-
background-color: lighten($secondary-color, 10%);
|
388
|
-
border-color: none;
|
389
|
-
}
|
390
|
-
}
|
391
|
-
|
392
|
-
.de-emphasized, .de-emphasized:visited{
|
393
|
-
@extend .base-button;
|
394
|
-
background: $slate;
|
395
|
-
|
396
|
-
&:hover,
|
397
|
-
&:active,
|
398
|
-
&:focus{
|
399
|
-
background-color: lighten($slate, 10%);
|
400
|
-
}
|
401
|
-
}
|
402
|
-
|
403
|
-
.red-btn{
|
404
|
-
@extend .base-button;
|
405
|
-
background: $brand-red;
|
406
|
-
|
407
|
-
&:hover,
|
408
|
-
&:active,
|
409
|
-
&:focus{
|
410
|
-
background-color: lighten($brand-red, 10%);
|
411
|
-
}
|
412
|
-
}
|
413
|
-
|
414
|
-
.dark-blue-btn{
|
415
|
-
background: $brand-blue-dark;
|
416
|
-
}
|
417
|
-
|
418
|
-
.green-btn,
|
419
|
-
.green-btn:visited{
|
420
|
-
@extend .base-button;
|
421
|
-
background: $brand-green;
|
422
|
-
|
423
|
-
&:hover,
|
424
|
-
&:active,
|
425
|
-
&:focus{
|
426
|
-
background-color: lighten($brand-green, 10%);
|
427
|
-
}
|
428
|
-
}
|
429
|
-
|
430
238
|
/* ==================== 10. Typography ==================== */
|
431
239
|
.white-text{
|
432
240
|
color: $white;
|
@@ -523,7 +331,7 @@ button[disabled],
|
|
523
331
|
}
|
524
332
|
|
525
333
|
.small-text{
|
526
|
-
font-size: $base-font-size*0.
|
334
|
+
font-size: $base-font-size*0.85;
|
527
335
|
}
|
528
336
|
|
529
337
|
.word-wrap{
|
@@ -18,15 +18,24 @@
|
|
18
18
|
}
|
19
19
|
}
|
20
20
|
|
21
|
+
.accordion-secondary{
|
22
|
+
&--header{
|
23
|
+
font-size: $base-font-size;
|
24
|
+
}
|
25
|
+
|
26
|
+
&--heading{
|
27
|
+
|
28
|
+
}
|
29
|
+
}
|
21
30
|
.accordion.secondary{
|
22
31
|
background: none;
|
23
32
|
|
24
33
|
a{
|
25
|
-
font-size: $
|
34
|
+
font-size: $global-font-size;
|
26
35
|
}
|
27
36
|
|
28
37
|
.accordion-content a{
|
29
|
-
font-size: $
|
38
|
+
font-size: $global-font-size;
|
30
39
|
}
|
31
40
|
|
32
41
|
.accordion-title{
|
@@ -59,6 +68,8 @@
|
|
59
68
|
|
60
69
|
&__toggle{
|
61
70
|
@include small-2;
|
71
|
+
@extend .fa;
|
72
|
+
@extend .fa-arrows-v;
|
62
73
|
text-align: right;
|
63
74
|
color: $white;
|
64
75
|
padding-top: $base-padding*1.25;
|
@@ -0,0 +1,42 @@
|
|
1
|
+
.banner{
|
2
|
+
position: relative; /* This is needed for the positioning of the close icon on the blue banners*/
|
3
|
+
margin-bottom: $base-margin;
|
4
|
+
|
5
|
+
&>:last-child{
|
6
|
+
margin-bottom: 0;
|
7
|
+
}
|
8
|
+
|
9
|
+
&--blue{
|
10
|
+
@extend .banner;
|
11
|
+
background: $brand-blue-insurance;
|
12
|
+
padding: $base-padding;
|
13
|
+
}
|
14
|
+
|
15
|
+
&--red{
|
16
|
+
@extend .banner;
|
17
|
+
background: $brand-red;
|
18
|
+
padding: $base-padding;
|
19
|
+
}
|
20
|
+
|
21
|
+
&__title,
|
22
|
+
&__text{
|
23
|
+
color: $white;
|
24
|
+
}
|
25
|
+
|
26
|
+
&__link{
|
27
|
+
@extend .link--white;
|
28
|
+
}
|
29
|
+
|
30
|
+
&__close{
|
31
|
+
@extend .fa;
|
32
|
+
@extend .fa-times-circle;
|
33
|
+
position: absolute;
|
34
|
+
top: 15px;
|
35
|
+
right: 15px;
|
36
|
+
|
37
|
+
&--white{
|
38
|
+
@extend .banner__close;
|
39
|
+
color: $white;
|
40
|
+
}
|
41
|
+
}
|
42
|
+
}
|
@@ -1,3 +1,75 @@
|
|
1
|
+
.button{
|
2
|
+
text-decoration: none;
|
3
|
+
|
4
|
+
&:hover,
|
5
|
+
&:active,
|
6
|
+
&:focus{
|
7
|
+
background: lighten($button-background, 10%);
|
8
|
+
}
|
9
|
+
|
10
|
+
&--green{
|
11
|
+
@extend .button;
|
12
|
+
$button-background: $brand-green;
|
13
|
+
background: $button-background;
|
14
|
+
float: right;
|
15
|
+
|
16
|
+
&:hover,
|
17
|
+
&:active,
|
18
|
+
&:focus{
|
19
|
+
background: lighten($button-background, 10%);
|
20
|
+
}
|
21
|
+
}
|
22
|
+
|
23
|
+
&--dark-blue{
|
24
|
+
@extend .button;
|
25
|
+
$button-background: $brand-blue-dark;
|
26
|
+
background: $button-background;
|
27
|
+
|
28
|
+
&:hover,
|
29
|
+
&:active,
|
30
|
+
&:focus{
|
31
|
+
background: lighten($button-background, 10%);
|
32
|
+
}
|
33
|
+
}
|
34
|
+
|
35
|
+
&--de-emphasized{
|
36
|
+
@extend .button;
|
37
|
+
$button-background: $slate;
|
38
|
+
background: $button-background;
|
39
|
+
|
40
|
+
&:hover,
|
41
|
+
&:active,
|
42
|
+
&:focus{
|
43
|
+
background: lighten($button-background, 10%);
|
44
|
+
}
|
45
|
+
}
|
46
|
+
|
47
|
+
&--left{
|
48
|
+
@extend .button;
|
49
|
+
float: left;
|
50
|
+
}
|
51
|
+
|
52
|
+
&--right{
|
53
|
+
@extend .button;
|
54
|
+
float: right;
|
55
|
+
}
|
56
|
+
|
57
|
+
&--center{
|
58
|
+
@extend .button;
|
59
|
+
float: none;
|
60
|
+
}
|
61
|
+
|
62
|
+
&--expand{
|
63
|
+
@extend .button;
|
64
|
+
@extend .expanded;
|
65
|
+
}
|
66
|
+
|
67
|
+
&--small{
|
68
|
+
@extend .button;
|
69
|
+
@extend .small;
|
70
|
+
}
|
71
|
+
}
|
72
|
+
|
1
73
|
button.disabled,
|
2
74
|
button[disabled],
|
3
75
|
.button.disabled,
|
@@ -49,96 +49,4 @@
|
|
49
49
|
color: $ash;
|
50
50
|
}
|
51
51
|
}
|
52
|
-
|
53
|
-
&__heading{
|
54
|
-
|
55
|
-
}
|
56
|
-
}
|
57
|
-
|
58
|
-
.promo-block{
|
59
|
-
position: relative;
|
60
|
-
overflow: auto;
|
61
|
-
|
62
|
-
&__divider{
|
63
|
-
@include show-for(medium);
|
64
|
-
position: absolute;
|
65
|
-
color: $smoke;
|
66
|
-
font-size: 1.75rem;
|
67
|
-
top: 30%;
|
68
|
-
|
69
|
-
&--left{
|
70
|
-
@extend .promo-block__divider;
|
71
|
-
left: 33%;
|
72
|
-
}
|
73
|
-
|
74
|
-
&--right{
|
75
|
-
@extend .promo-block__divider;
|
76
|
-
right: 33%;
|
77
|
-
}
|
78
|
-
}
|
79
|
-
|
80
|
-
&__item{
|
81
|
-
@extend .clearfix;
|
82
|
-
@include medium-4;
|
83
|
-
text-align: center;
|
84
|
-
|
85
|
-
@include breakpoint(small down){
|
86
|
-
text-align: left;
|
87
|
-
|
88
|
-
p{
|
89
|
-
@include small-9;
|
90
|
-
}
|
91
|
-
}
|
92
|
-
}
|
93
|
-
|
94
|
-
&__icon-container{
|
95
|
-
margin: 0 0 $base-margin 0;
|
96
|
-
@include breakpoint(small down){
|
97
|
-
@include small-3;
|
98
|
-
padding: 0;
|
99
|
-
}
|
100
|
-
}
|
101
|
-
|
102
|
-
&__icon-background{
|
103
|
-
width: 110px;
|
104
|
-
height: 110px;
|
105
|
-
margin: 0 auto;
|
106
|
-
background: $smoke;
|
107
|
-
position: relative;
|
108
|
-
|
109
|
-
@include breakpoint(small down){
|
110
|
-
width: 60%;
|
111
|
-
height: auto;
|
112
|
-
padding-top: 60%;
|
113
|
-
min-width: 65px;
|
114
|
-
min-height: 65px;
|
115
|
-
}
|
116
|
-
|
117
|
-
&--round{
|
118
|
-
@extend .promo-block__icon-background;
|
119
|
-
border-radius: 100%;
|
120
|
-
}
|
121
|
-
}
|
122
|
-
|
123
|
-
&__icon{
|
124
|
-
color: $white;
|
125
|
-
font-size: 4rem;
|
126
|
-
text-align: center;
|
127
|
-
width: 100%;
|
128
|
-
left: 0;
|
129
|
-
@include vertical-center;
|
130
|
-
|
131
|
-
@include breakpoint(small down){
|
132
|
-
font-size: 2.5rem;
|
133
|
-
}
|
134
|
-
|
135
|
-
&-image{
|
136
|
-
@extend .promo-block__icon;
|
137
|
-
height: 50px;
|
138
|
-
|
139
|
-
@include breakpoint(small down){
|
140
|
-
height: 31px;
|
141
|
-
}
|
142
|
-
}
|
143
|
-
}
|
144
52
|
}
|
@@ -1,12 +1,16 @@
|
|
1
1
|
/*Cart*/
|
2
|
-
.summary-cart.active.summary_height{
|
3
|
-
min-height: 300px;
|
4
|
-
}
|
5
|
-
|
6
2
|
.summary-cart{
|
7
3
|
list-style-type: none;
|
8
4
|
margin-bottom: 0;
|
9
5
|
position: relative;
|
6
|
+
z-index: 1; //prevent cart from going underneath footer on short screens
|
7
|
+
|
8
|
+
@include breakpoint(medium down){
|
9
|
+
width: 100%;
|
10
|
+
position: fixed;
|
11
|
+
bottom: 0;
|
12
|
+
left: 0;
|
13
|
+
}
|
10
14
|
|
11
15
|
::-webkit-scrollbar{
|
12
16
|
-webkit-appearance: none;
|
@@ -20,7 +24,8 @@
|
|
20
24
|
}
|
21
25
|
|
22
26
|
&__container{
|
23
|
-
float
|
27
|
+
@extend .float-right; //needed to override the default column behavior (left aligned)
|
28
|
+
@include medium-4;
|
24
29
|
}
|
25
30
|
|
26
31
|
&__title{
|
@@ -30,6 +35,8 @@
|
|
30
35
|
|
31
36
|
&__accordion-toggle-icon{
|
32
37
|
@include hide-for(large);
|
38
|
+
@extend .fa;
|
39
|
+
@extend .fa-arrows-v;
|
33
40
|
width: 16px;
|
34
41
|
height: 16px;
|
35
42
|
float: right;
|
@@ -123,10 +130,6 @@
|
|
123
130
|
}
|
124
131
|
}
|
125
132
|
|
126
|
-
.summary-title{
|
127
|
-
background: $brand-green !important;
|
128
|
-
}
|
129
|
-
|
130
133
|
.delete-icon{ //same one used in the cart and on info charts it lives outside of cart so it can be used other places
|
131
134
|
float: right;
|
132
135
|
|
@@ -144,27 +147,3 @@
|
|
144
147
|
}
|
145
148
|
}
|
146
149
|
}
|
147
|
-
|
148
|
-
@media screen and #{breakpoint(medium down)}{
|
149
|
-
.item-num{
|
150
|
-
display: inline-block;
|
151
|
-
float: right;
|
152
|
-
width: 30px;
|
153
|
-
height: 30px;
|
154
|
-
border-radius: 60px;
|
155
|
-
text-align: center;
|
156
|
-
line-height: 29px;
|
157
|
-
color: $white;
|
158
|
-
font-weight: bold;
|
159
|
-
margin-right: $base-margin*6;
|
160
|
-
background: lighten($brand-green, 5%);
|
161
|
-
}
|
162
|
-
|
163
|
-
.summary-cart{
|
164
|
-
width: 100%;
|
165
|
-
position: fixed;
|
166
|
-
bottom: 0;
|
167
|
-
left: 0;
|
168
|
-
z-index: 1;
|
169
|
-
}
|
170
|
-
}
|
@@ -12,4 +12,14 @@
|
|
12
12
|
cursor: pointer;
|
13
13
|
float: right;
|
14
14
|
}
|
15
|
+
|
16
|
+
//We have to create our own classes for this because Foundation's default show/hide classes
|
17
|
+
//have importants on them which messes with the specificity
|
18
|
+
&--hidden{
|
19
|
+
display: none;
|
20
|
+
}
|
21
|
+
|
22
|
+
&--visible{
|
23
|
+
display: block;
|
24
|
+
}
|
15
25
|
}
|
@@ -5,12 +5,15 @@ $footer-push-large: 321px;
|
|
5
5
|
|
6
6
|
.off-canvas-wrapper{
|
7
7
|
min-height: 100%;
|
8
|
+
|
8
9
|
@include breakpoint(small only){
|
9
10
|
margin-bottom: -$footer-push-small;
|
10
11
|
}
|
12
|
+
|
11
13
|
@include breakpoint(medium only){
|
12
14
|
margin-bottom: -$footer-push-medium;
|
13
15
|
}
|
16
|
+
|
14
17
|
@include breakpoint(large up){
|
15
18
|
margin-bottom: -$footer-push-large;
|
16
19
|
}
|
@@ -18,12 +21,15 @@ $footer-push-large: 321px;
|
|
18
21
|
&:after{
|
19
22
|
content: "";
|
20
23
|
display: block;
|
24
|
+
|
21
25
|
@include breakpoint(small only){
|
22
26
|
height: $footer-push-small;
|
23
27
|
}
|
28
|
+
|
24
29
|
@include breakpoint(medium only){
|
25
30
|
height: $footer-push-medium;
|
26
31
|
}
|
32
|
+
|
27
33
|
@include breakpoint(large up){
|
28
34
|
height: $footer-push-large;
|
29
35
|
}
|
@@ -33,6 +39,7 @@ $footer-push-large: 321px;
|
|
33
39
|
// Footer styles
|
34
40
|
.page-footer{
|
35
41
|
background: $brand-blue-light;
|
42
|
+
position: relative;
|
36
43
|
|
37
44
|
&__container{
|
38
45
|
@include grid-row;
|
@@ -1,25 +1,3 @@
|
|
1
|
-
.membership-card-radio{
|
2
|
-
text-align:center;
|
3
|
-
padding: 0;
|
4
|
-
width: 32%;
|
5
|
-
|
6
|
-
&.columns{
|
7
|
-
padding-left: 0;
|
8
|
-
padding-right: 0;
|
9
|
-
}
|
10
|
-
}
|
11
|
-
|
12
|
-
.membership-card-radio-plus-primary{
|
13
|
-
text-align: center;
|
14
|
-
padding: 0;
|
15
|
-
width: 49%;
|
16
|
-
|
17
|
-
&.columns{
|
18
|
-
padding-left: 0;
|
19
|
-
padding-right: 0;
|
20
|
-
}
|
21
|
-
}
|
22
|
-
|
23
1
|
/* ------------- Input Styles ------------- */
|
24
2
|
%inputs-thirds{
|
25
3
|
max-width: 30%;
|
@@ -32,34 +10,6 @@
|
|
32
10
|
}
|
33
11
|
|
34
12
|
/* ------------- Custom Radio Button + Checkbox Styles ------------- */
|
35
|
-
.checkboxes{
|
36
|
-
|
37
|
-
.box2{
|
38
|
-
margin-top: $base-margin/2;
|
39
|
-
}
|
40
|
-
}
|
41
|
-
|
42
|
-
.checkbox-content{
|
43
|
-
display: inline;
|
44
|
-
padding-left: $base-padding*8;
|
45
|
-
}
|
46
|
-
|
47
|
-
.radio-label{
|
48
|
-
padding: $base-padding/2;
|
49
|
-
width: 100%;
|
50
|
-
}
|
51
|
-
|
52
|
-
.radio-options{
|
53
|
-
padding: 0;
|
54
|
-
width: 100%;
|
55
|
-
}
|
56
|
-
|
57
|
-
input[type="radio"] + label{
|
58
|
-
hr{
|
59
|
-
margin: 0;
|
60
|
-
}
|
61
|
-
}
|
62
|
-
|
63
13
|
input[type="radio"],
|
64
14
|
input[type="checkbox"]:not(.default){
|
65
15
|
position: absolute;
|
@@ -1,20 +1,3 @@
|
|
1
|
-
.icon-group{
|
2
|
-
font-size: 1.75rem;
|
3
|
-
line-height: 3rem;
|
4
|
-
display: block;
|
5
|
-
text-align: center;
|
6
|
-
|
7
|
-
&__blue-icon{
|
8
|
-
color: $brand-blue-light;
|
9
|
-
font-size: 1.75rem;
|
10
|
-
}
|
11
|
-
|
12
|
-
&__grey-icon{
|
13
|
-
color: $smoke;
|
14
|
-
font-size: 1.75rem;
|
15
|
-
}
|
16
|
-
}
|
17
|
-
|
18
1
|
.graph{
|
19
2
|
width: 100%;
|
20
3
|
height: 50px;
|
@@ -80,7 +63,6 @@
|
|
80
63
|
position: absolute;
|
81
64
|
left: 20%;
|
82
65
|
width: 80%;
|
83
|
-
font-size: .85rem;
|
84
66
|
text-align: center;
|
85
67
|
z-index: 5;
|
86
68
|
@include vertical-center;
|
@@ -105,10 +87,6 @@
|
|
105
87
|
color: $slate;
|
106
88
|
margin-top: $base-margin;
|
107
89
|
|
108
|
-
strong{
|
109
|
-
font-size: 0.85rem;
|
110
|
-
}
|
111
|
-
|
112
90
|
p{
|
113
91
|
@extend .small-text;
|
114
92
|
line-height: 0.8rem;
|
@@ -1,25 +1,26 @@
|
|
1
|
-
|
2
|
-
@import "blue-boxes.scss";
|
3
|
-
@import "notification";
|
4
|
-
@import "sidebar";
|
5
|
-
@import "siteheader";
|
6
|
-
@import "forms";
|
7
|
-
@import "responsive-table";
|
1
|
+
//Keep this alphabetized
|
8
2
|
@import "accordions";
|
9
|
-
@import "
|
10
|
-
@import "content-toggle";
|
11
|
-
@import "cart";
|
12
|
-
@import "reveal-modal";
|
13
|
-
@import "sections";
|
14
|
-
@import "link-list";
|
15
|
-
@import "button-grouping";
|
3
|
+
@import "banners";
|
16
4
|
@import "breadcrumbs";
|
5
|
+
@import "button-grouping";
|
6
|
+
@import "buttons";
|
17
7
|
@import "callouts";
|
18
|
-
@import "
|
19
|
-
@import "tables";
|
20
|
-
@import "banner";
|
21
|
-
@import "progress-bar";
|
8
|
+
@import "cart";
|
22
9
|
@import "comparison-radios";
|
10
|
+
@import "content-toggle";
|
11
|
+
@import "error-page.scss";
|
23
12
|
@import "footer";
|
13
|
+
@import "forms";
|
14
|
+
@import "graph";
|
15
|
+
@import "icon-group";
|
16
|
+
@import "link-list";
|
24
17
|
@import "links";
|
25
|
-
@import "
|
18
|
+
@import "notification";
|
19
|
+
@import "progress-bar";
|
20
|
+
@import "promo-block";
|
21
|
+
@import "responsive-table";
|
22
|
+
@import "reveal-modal";
|
23
|
+
@import "sections";
|
24
|
+
@import "side_nav";
|
25
|
+
@import "siteheader";
|
26
|
+
@import "tables";
|
@@ -0,0 +1,87 @@
|
|
1
|
+
.promo-block{
|
2
|
+
position: relative;
|
3
|
+
overflow: auto;
|
4
|
+
|
5
|
+
&__divider{
|
6
|
+
@include show-for(medium);
|
7
|
+
position: absolute;
|
8
|
+
color: $smoke;
|
9
|
+
font-size: 1.75rem;
|
10
|
+
top: 30%;
|
11
|
+
|
12
|
+
&--left{
|
13
|
+
@extend .promo-block__divider;
|
14
|
+
left: 33%;
|
15
|
+
}
|
16
|
+
|
17
|
+
&--right{
|
18
|
+
@extend .promo-block__divider;
|
19
|
+
right: 33%;
|
20
|
+
}
|
21
|
+
}
|
22
|
+
|
23
|
+
&__item{
|
24
|
+
@include clearfix;
|
25
|
+
@include medium-4;
|
26
|
+
text-align: center;
|
27
|
+
|
28
|
+
@include breakpoint(small down){
|
29
|
+
text-align: left;
|
30
|
+
|
31
|
+
p{
|
32
|
+
@include small-9;
|
33
|
+
}
|
34
|
+
}
|
35
|
+
}
|
36
|
+
|
37
|
+
&__icon-container{
|
38
|
+
margin: 0 0 $base-margin 0;
|
39
|
+
@include breakpoint(small down){
|
40
|
+
@include small-3;
|
41
|
+
padding: 0;
|
42
|
+
}
|
43
|
+
}
|
44
|
+
|
45
|
+
&__icon-background{
|
46
|
+
width: 110px;
|
47
|
+
height: 110px;
|
48
|
+
margin: 0 auto;
|
49
|
+
background: $smoke;
|
50
|
+
position: relative;
|
51
|
+
|
52
|
+
@include breakpoint(small down){
|
53
|
+
width: 60%;
|
54
|
+
height: auto;
|
55
|
+
padding-top: 60%;
|
56
|
+
min-width: 65px;
|
57
|
+
min-height: 65px;
|
58
|
+
}
|
59
|
+
|
60
|
+
&--round{
|
61
|
+
@extend .promo-block__icon-background;
|
62
|
+
border-radius: 100%;
|
63
|
+
}
|
64
|
+
}
|
65
|
+
|
66
|
+
&__icon{
|
67
|
+
color: $white;
|
68
|
+
font-size: 4rem;
|
69
|
+
text-align: center;
|
70
|
+
width: 100%;
|
71
|
+
left: 0;
|
72
|
+
@include vertical-center;
|
73
|
+
|
74
|
+
@include breakpoint(small down){
|
75
|
+
font-size: 2.5rem;
|
76
|
+
}
|
77
|
+
|
78
|
+
&-image{
|
79
|
+
@extend .promo-block__icon;
|
80
|
+
height: 50px;
|
81
|
+
|
82
|
+
@include breakpoint(small down){
|
83
|
+
height: 31px;
|
84
|
+
}
|
85
|
+
}
|
86
|
+
}
|
87
|
+
}
|
File without changes
|
@@ -1,6 +1,9 @@
|
|
1
1
|
<li class="has-submenu">
|
2
|
-
<%= link_to navigation.display_name_text, '#' %>
|
2
|
+
<%= link_to navigation.display_name_text, '#', class: 'link--no-underline' %>
|
3
3
|
<ul class="submenu menu vertical">
|
4
|
+
<li>
|
5
|
+
<%= link_to 'Online Account', Rails.configuration.gatekeeper_site %>
|
6
|
+
</li>
|
4
7
|
<li><%= link_to 'AMA Website', Rails.configuration.amaabca_site %></li>
|
5
8
|
<li><a href="http://amaroadreports.ca/">AMA Road Reports</a></li>
|
6
9
|
<%= navigation.sign_out_link %>
|
data/lib/ama_layout/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: ama_layout
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 4.
|
4
|
+
version: 4.2.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Michael van den Beuken
|
@@ -18,7 +18,7 @@ authors:
|
|
18
18
|
autorequire:
|
19
19
|
bindir: bin
|
20
20
|
cert_chain: []
|
21
|
-
date: 2016-08-
|
21
|
+
date: 2016-08-22 00:00:00.000000000 Z
|
22
22
|
dependencies:
|
23
23
|
- !ruby/object:Gem::Dependency
|
24
24
|
name: foundation-rails
|
@@ -288,8 +288,7 @@ files:
|
|
288
288
|
- app/assets/stylesheets/ama_layout/layout/print.scss
|
289
289
|
- app/assets/stylesheets/ama_layout/layout/variables.scss
|
290
290
|
- app/assets/stylesheets/ama_layout/layout_components/accordions.scss
|
291
|
-
- app/assets/stylesheets/ama_layout/layout_components/
|
292
|
-
- app/assets/stylesheets/ama_layout/layout_components/blue-boxes.scss
|
291
|
+
- app/assets/stylesheets/ama_layout/layout_components/banners.scss
|
293
292
|
- app/assets/stylesheets/ama_layout/layout_components/breadcrumbs.scss
|
294
293
|
- app/assets/stylesheets/ama_layout/layout_components/button-grouping.scss
|
295
294
|
- app/assets/stylesheets/ama_layout/layout_components/buttons.scss
|
@@ -301,17 +300,18 @@ files:
|
|
301
300
|
- app/assets/stylesheets/ama_layout/layout_components/footer.scss
|
302
301
|
- app/assets/stylesheets/ama_layout/layout_components/forms.scss
|
303
302
|
- app/assets/stylesheets/ama_layout/layout_components/graph.scss
|
303
|
+
- app/assets/stylesheets/ama_layout/layout_components/icon-group.scss
|
304
304
|
- app/assets/stylesheets/ama_layout/layout_components/index.scss
|
305
305
|
- app/assets/stylesheets/ama_layout/layout_components/link-list.scss
|
306
306
|
- app/assets/stylesheets/ama_layout/layout_components/links.scss
|
307
307
|
- app/assets/stylesheets/ama_layout/layout_components/notification.scss
|
308
308
|
- app/assets/stylesheets/ama_layout/layout_components/progress-bar.scss
|
309
|
+
- app/assets/stylesheets/ama_layout/layout_components/promo-block.scss
|
309
310
|
- app/assets/stylesheets/ama_layout/layout_components/responsive-table.scss
|
310
311
|
- app/assets/stylesheets/ama_layout/layout_components/reveal-modal.scss
|
311
312
|
- app/assets/stylesheets/ama_layout/layout_components/sections.scss
|
312
|
-
- app/assets/stylesheets/ama_layout/layout_components/
|
313
|
+
- app/assets/stylesheets/ama_layout/layout_components/side_nav.scss
|
313
314
|
- app/assets/stylesheets/ama_layout/layout_components/siteheader.scss
|
314
|
-
- app/assets/stylesheets/ama_layout/layout_components/tab-accordions.scss
|
315
315
|
- app/assets/stylesheets/ama_layout/layout_components/tables.scss
|
316
316
|
- app/assets/stylesheets/ama_layout/media_queries/desktop.scss
|
317
317
|
- app/assets/stylesheets/ama_layout/media_queries/index.scss
|
@@ -404,7 +404,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
404
404
|
version: '0'
|
405
405
|
requirements: []
|
406
406
|
rubyforge_project:
|
407
|
-
rubygems_version: 2.
|
407
|
+
rubygems_version: 2.2.2
|
408
408
|
signing_key:
|
409
409
|
specification_version: 4
|
410
410
|
summary: ".ama.ab.ca site layouts"
|
@@ -1,17 +0,0 @@
|
|
1
|
-
.banner{
|
2
|
-
position: relative; /* This is needed for the positioning of the close icon on the blue banners*/
|
3
|
-
|
4
|
-
&--blue{
|
5
|
-
background: $brand-blue-insurance;
|
6
|
-
padding: $base-padding;
|
7
|
-
}
|
8
|
-
|
9
|
-
&--red{
|
10
|
-
background: $brand-red;
|
11
|
-
padding: $base-padding;
|
12
|
-
}
|
13
|
-
|
14
|
-
&__text{
|
15
|
-
text-align: center;
|
16
|
-
}
|
17
|
-
}
|
@@ -1,128 +0,0 @@
|
|
1
|
-
/*New Grid Block code for blue boxes*/
|
2
|
-
.icon-box{
|
3
|
-
width: 100px;
|
4
|
-
height: 80px;
|
5
|
-
margin: $base-margin auto 0 auto;
|
6
|
-
background-repeat: no-repeat;
|
7
|
-
background-position: center center;
|
8
|
-
width: auto;
|
9
|
-
text-align: center;
|
10
|
-
color: $white;
|
11
|
-
font-size: $base-font-size*5;
|
12
|
-
line-height: $base-font-size*5;
|
13
|
-
}
|
14
|
-
|
15
|
-
.box-title{
|
16
|
-
text-align: center;
|
17
|
-
color: $white;
|
18
|
-
width: 90%;
|
19
|
-
margin: $base-margin/2 auto 0 auto;
|
20
|
-
}
|
21
|
-
|
22
|
-
.cta-btm-row{
|
23
|
-
margin-top: 0.9375rem*2;
|
24
|
-
}
|
25
|
-
|
26
|
-
.cta-box{
|
27
|
-
min-height: 175px;
|
28
|
-
padding: $base-padding*2;
|
29
|
-
|
30
|
-
a{
|
31
|
-
text-decoration: none;
|
32
|
-
}
|
33
|
-
|
34
|
-
&.light-blue-bg:hover{
|
35
|
-
background: lighten($brand-blue-light, 3%);
|
36
|
-
}
|
37
|
-
|
38
|
-
&.rewards-green-bg:hover{
|
39
|
-
background: lighten($brand-green, 3%);
|
40
|
-
}
|
41
|
-
|
42
|
-
@include breakpoint(medium down){
|
43
|
-
margin: 0.625rem 0;
|
44
|
-
}
|
45
|
-
}
|
46
|
-
|
47
|
-
.outer-quicklink-box:first-child:nth-last-child(2),
|
48
|
-
.outer-quicklink-box:first-child:nth-last-child(2) ~ div,
|
49
|
-
.outer-quicklink-box:first-child:nth-last-child(2) ~ li{
|
50
|
-
width: 49.2%;
|
51
|
-
margin-top: 1.5%;
|
52
|
-
}
|
53
|
-
|
54
|
-
.outer-quicklink-box:first-child:nth-last-child(3),
|
55
|
-
.outer-quicklink-box:first-child:nth-last-child(3) ~ div,
|
56
|
-
.outer-quicklink-box:first-child:nth-last-child(3) ~ li{
|
57
|
-
width: 23.5%;
|
58
|
-
}
|
59
|
-
|
60
|
-
.outer-quicklink-box:first-child:nth-last-child(4),
|
61
|
-
.outer-quicklink-box:first-child:nth-last-child(4) ~ div,
|
62
|
-
.outer-quicklink-box:first-child:nth-last-child(4) ~ li{
|
63
|
-
width: 24.2%;
|
64
|
-
margin-right: 0.8%;
|
65
|
-
margin-top: 0.8%;
|
66
|
-
}
|
67
|
-
|
68
|
-
.quicklink-single-box{
|
69
|
-
margin-left: 0;
|
70
|
-
margin-top: $base-margin;
|
71
|
-
|
72
|
-
.outer-quicklink-box > a{
|
73
|
-
font-size: $base-font-size;
|
74
|
-
}
|
75
|
-
}
|
76
|
-
|
77
|
-
/*New Grid Block code for blue boxes*/
|
78
|
-
.cta-margin{
|
79
|
-
margin: 0 $base-margin/2;
|
80
|
-
}
|
81
|
-
|
82
|
-
ul{
|
83
|
-
li{
|
84
|
-
.cta-box{
|
85
|
-
padding: 20px;
|
86
|
-
|
87
|
-
&.light-blue-bg:hover{
|
88
|
-
background: lighten($brand-blue-light, 3%);
|
89
|
-
}
|
90
|
-
|
91
|
-
&.rewards-green-bg:hover{
|
92
|
-
background: lighten($brand-green, 3%);
|
93
|
-
}
|
94
|
-
}
|
95
|
-
}
|
96
|
-
}
|
97
|
-
|
98
|
-
.cta-title{
|
99
|
-
text-align: center;
|
100
|
-
color: $white;
|
101
|
-
width: 100%;
|
102
|
-
margin: $base-margin*2 auto $base-margin*0 auto;
|
103
|
-
}
|
104
|
-
|
105
|
-
.icon-container{
|
106
|
-
height: 80px;
|
107
|
-
margin: $base-margin auto 0 auto;
|
108
|
-
background-repeat: no-repeat;
|
109
|
-
background-position: center center;
|
110
|
-
width: auto;
|
111
|
-
text-align: center;
|
112
|
-
color: $white;
|
113
|
-
font-size: $base-font-size*4.5;
|
114
|
-
line-height: $base-font-size*4.5;
|
115
|
-
}
|
116
|
-
|
117
|
-
.cta-title{
|
118
|
-
text-align: center;
|
119
|
-
color: $white;
|
120
|
-
width: 90%;
|
121
|
-
margin: $base-margin/2 auto 0 auto;
|
122
|
-
|
123
|
-
@include breakpoint(small down){
|
124
|
-
height: 1.5em;
|
125
|
-
font-size: $base-font-size;
|
126
|
-
line-height: $base-font-size;
|
127
|
-
}
|
128
|
-
}
|
@@ -1,31 +0,0 @@
|
|
1
|
-
//Accordion styles for FAQ content
|
2
|
-
.faq{
|
3
|
-
.accordion .accordion-navigation > a,
|
4
|
-
.accordion dd > a{
|
5
|
-
text-decoration: none;
|
6
|
-
background: $white;
|
7
|
-
|
8
|
-
&:active,
|
9
|
-
&:hover,
|
10
|
-
&:focus{
|
11
|
-
background: $stone;
|
12
|
-
outline: none;
|
13
|
-
}
|
14
|
-
}
|
15
|
-
|
16
|
-
.accordion-navigation > a.top-level,
|
17
|
-
dd > a.top-level{
|
18
|
-
background: darken($stone, 5%);
|
19
|
-
border-bottom: 1px solid $stone;
|
20
|
-
|
21
|
-
&:hover{
|
22
|
-
background: lighten($smoke, 4%);
|
23
|
-
}
|
24
|
-
|
25
|
-
&:active,
|
26
|
-
&:focus,
|
27
|
-
&:visited{
|
28
|
-
background: darken($stone, 5%);
|
29
|
-
}
|
30
|
-
}
|
31
|
-
}
|