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.
Files changed (24) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/stylesheets/ama_layout/layout/helper-classes.scss +1 -193
  3. data/app/assets/stylesheets/ama_layout/layout_components/accordions.scss +13 -2
  4. data/app/assets/stylesheets/ama_layout/layout_components/banners.scss +42 -0
  5. data/app/assets/stylesheets/ama_layout/layout_components/buttons.scss +72 -0
  6. data/app/assets/stylesheets/ama_layout/layout_components/callouts.scss +0 -92
  7. data/app/assets/stylesheets/ama_layout/layout_components/cart.scss +12 -33
  8. data/app/assets/stylesheets/ama_layout/layout_components/comparison-radios.scss +4 -0
  9. data/app/assets/stylesheets/ama_layout/layout_components/content-toggle.scss +10 -0
  10. data/app/assets/stylesheets/ama_layout/layout_components/footer.scss +7 -0
  11. data/app/assets/stylesheets/ama_layout/layout_components/forms.scss +0 -50
  12. data/app/assets/stylesheets/ama_layout/layout_components/graph.scss +0 -22
  13. data/app/assets/stylesheets/ama_layout/layout_components/icon-group.scss +16 -0
  14. data/app/assets/stylesheets/ama_layout/layout_components/index.scss +20 -19
  15. data/app/assets/stylesheets/ama_layout/layout_components/links.scss +5 -0
  16. data/app/assets/stylesheets/ama_layout/layout_components/notification.scss +4 -0
  17. data/app/assets/stylesheets/ama_layout/layout_components/promo-block.scss +87 -0
  18. data/app/assets/stylesheets/ama_layout/layout_components/{sidebar.scss → side_nav.scss} +0 -0
  19. data/app/views/ama_layout/_top_nav.html.erb +4 -1
  20. data/lib/ama_layout/version.rb +1 -1
  21. metadata +7 -7
  22. data/app/assets/stylesheets/ama_layout/layout_components/banner.scss +0 -17
  23. data/app/assets/stylesheets/ama_layout/layout_components/blue-boxes.scss +0 -128
  24. 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: fecb364fae0b80bf39e0908d9653d2ed5298a5cf
4
- data.tar.gz: 8b14b9d07d7572f6c6dba5ce217be5a1a52ba94f
3
+ metadata.gz: 1e1de870b16d4d67317c9e4694b49c00e74057d7
4
+ data.tar.gz: a83e4e0bf9e46f8ad504f37c648d925e8172a7d5
5
5
  SHA512:
6
- metadata.gz: 8ba49bd7860ad6132e05f8427e25af69b24ac7917626bc1dae8d38e792a0e99b7724c8a9a9723a947ee83a19f082228b6193dcf8d1a1294df1f9fac593712be4
7
- data.tar.gz: e94eea783946274a995f6bfe892b50787b108062fb1faa334db98146023ed6dd4d7421f605c58ff5688e1124896464873dfa9be1e20b6c6f07fbfca3a054f2ab
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.75;
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: $base-font-size;
34
+ font-size: $global-font-size;
26
35
  }
27
36
 
28
37
  .accordion-content a{
29
- font-size: $base-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: right;
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
- }
@@ -101,6 +101,10 @@
101
101
  top: 0;
102
102
  right: 0;
103
103
  }
104
+
105
+ &__divider{
106
+ margin-bottom: 0;
107
+ }
104
108
  }
105
109
 
106
110
  input[type="radio"]:checked{
@@ -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;
@@ -0,0 +1,16 @@
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
+ }
@@ -1,25 +1,26 @@
1
- @import "error-page.scss";
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 "tab-accordions";
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 "graph";
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 "buttons";
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";
@@ -6,3 +6,8 @@
6
6
  color: $white;
7
7
  }
8
8
  }
9
+
10
+ .link--no-underline,
11
+ .link--no-underline:hover{
12
+ text-decoration: none;
13
+ }
@@ -64,5 +64,9 @@
64
64
 
65
65
  &__text-wrapper{
66
66
  @include small-10;
67
+
68
+ &>:last-child{
69
+ margin-bottom: 0;
70
+ }
67
71
  }
68
72
  }
@@ -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
+ }
@@ -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 %>
@@ -1,3 +1,3 @@
1
1
  module AmaLayout
2
- VERSION = '4.1.0'
2
+ VERSION = '4.2.0'
3
3
  end
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.1.0
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-18 00:00:00.000000000 Z
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/banner.scss
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/sidebar.scss
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.4.5.1
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
- }