ama_layout 2.9.2 → 3.0.0

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.
Files changed (32) hide show
  1. checksums.yaml +4 -4
  2. data/ama_layout.gemspec +1 -1
  3. data/app/assets/images/ama-logo-small.svg +44 -0
  4. data/app/assets/javascripts/ama_layout/desktop/header_menu.coffee +7 -3
  5. data/app/assets/stylesheets/ama_layout/_settings.scss +566 -0
  6. data/app/assets/stylesheets/ama_layout/foundation_and_overrides.scss +48 -1483
  7. data/app/assets/stylesheets/ama_layout/layout/base-styles.scss +7 -1
  8. data/app/assets/stylesheets/ama_layout/layout/helper-classes.scss +18 -3
  9. data/app/assets/stylesheets/ama_layout/layout_components/accordions.scss +44 -12
  10. data/app/assets/stylesheets/ama_layout/layout_components/cart.scss +1 -21
  11. data/app/assets/stylesheets/ama_layout/layout_components/forms.scss +55 -1
  12. data/app/assets/stylesheets/ama_layout/layout_components/index.scss +1 -0
  13. data/app/assets/stylesheets/ama_layout/layout_components/responsive-table.scss +42 -13
  14. data/app/assets/stylesheets/ama_layout/layout_components/reveal-modal.scss +11 -0
  15. data/app/assets/stylesheets/ama_layout/layout_components/sidebar.scss +7 -59
  16. data/app/assets/stylesheets/ama_layout/layout_components/siteheader.scss +108 -11
  17. data/app/assets/stylesheets/ama_layout/media_queries/desktop.scss +2 -2
  18. data/app/assets/stylesheets/ama_layout/media_queries/mobile-and-tablet.scss +2 -2
  19. data/app/assets/stylesheets/ama_layout/media_queries/mobile.scss +1 -15
  20. data/app/assets/stylesheets/ama_layout/media_queries/tablet.scss +2 -2
  21. data/app/views/ama_layout/_footer.html.erb +1 -1
  22. data/app/views/ama_layout/_main_top_nav_item.html.erb +2 -3
  23. data/app/views/ama_layout/_notice.html.erb +2 -2
  24. data/app/views/ama_layout/_sidebar.html.erb +1 -1
  25. data/app/views/ama_layout/_siteheader.html.erb +31 -31
  26. data/app/views/ama_layout/_top_nav.html.erb +3 -7
  27. data/app/views/ama_layout/_top_sub_nav.html.erb +1 -1
  28. data/app/views/ama_layout/_top_sub_nav_item.html.erb +0 -1
  29. data/lib/ama_layout/decorators/navigation_decorator.rb +1 -1
  30. data/lib/ama_layout/version.rb +1 -1
  31. metadata +10 -8
  32. data/app/assets/images/AMA-Logo.svg +0 -44
@@ -45,7 +45,9 @@ label{
45
45
  }
46
46
 
47
47
  p,
48
- li{
48
+ li,
49
+ select,
50
+ label{
49
51
  font-size: $base-font-size*0.875;
50
52
  color: $charcoal;
51
53
  font-family: $font-family-sans-serif;
@@ -64,3 +66,7 @@ hr{
64
66
  small{
65
67
  font-size: 80%;
66
68
  }
69
+
70
+ dl dd{
71
+ margin-bottom: $base-margin*4;
72
+ }
@@ -129,6 +129,10 @@
129
129
  text-align: right !important;
130
130
  }
131
131
 
132
+ .relative{
133
+ position: relative;
134
+ }
135
+
132
136
  /* ==================== 4. Margins ==================== */
133
137
  .m1{
134
138
  margin: $base-margin*4 !important;
@@ -227,6 +231,10 @@
227
231
  border-bottom: 0px !important;
228
232
  }
229
233
 
234
+ .b0{
235
+ border: 0;
236
+ }
237
+
230
238
  /* ==================== 6. Background Colours ==================== */
231
239
  .whitebg{
232
240
  background-color: $white;
@@ -299,12 +307,20 @@
299
307
  }
300
308
 
301
309
  /* ==================== 9. Buttons ==================== */
310
+ .button{
311
+ text-decoration: none;
312
+ }
313
+
302
314
  .base-button{
303
- @extend .radius;
304
- @extend .small;
315
+ border-radius: $global-radius;
316
+ @extend .button;
305
317
  color: $white;
306
318
  }
307
319
 
320
+ .expand{
321
+ @extend .expanded;
322
+ }
323
+
308
324
  .emphasized,
309
325
  .emphasized:visited{
310
326
  @extend .base-button;
@@ -406,7 +422,6 @@ button[disabled],
406
422
  font-weight: bold;
407
423
  font-size: $base-font-size*0.875;
408
424
  color: $charcoal;
409
- padding: $base-padding;
410
425
  }
411
426
 
412
427
  .brand-blue-dark-text{
@@ -1,10 +1,24 @@
1
- .asset-link{
2
- min-height: 50px;
3
- background: $brand-blue-light !important;
4
- margin-top: $base-margin*3;
1
+ .accordion-title{
2
+ font-size: $base-font-size*1.375;
5
3
  text-decoration: none;
6
- display: block;
7
4
 
5
+ &:hover,
6
+ &:active,
7
+ &:visited,
8
+ &:focus{
9
+ color: $white;
10
+ }
11
+
12
+ .accordion-icon{
13
+ width: 16px;
14
+ height: 16px;
15
+ display: block;
16
+ float: right;
17
+ color: $white;
18
+ }
19
+ }
20
+
21
+ .asset-link{
8
22
  h3,
9
23
  h5{
10
24
  color: $white;
@@ -14,11 +28,29 @@
14
28
  }
15
29
  }
16
30
 
17
- .accordion-icon{
18
- width: 16px;
19
- height: 16px;
20
- display: block;
21
- float: right;
22
- color: $white;
23
- margin-top: $base-margin;
31
+ .accordion.secondary{
32
+ background: none;
33
+
34
+ a{
35
+ font-size: $base-font-size;
36
+ }
37
+
38
+ .accordion-content a{
39
+ font-size: $base-font-size*0.875;
40
+ }
41
+
42
+ .accordion-title{
43
+ background: $white;
44
+ color: $jet;
45
+
46
+ &:hover{
47
+ background: $stone;
48
+ }
49
+ }
50
+
51
+ .top-level,
52
+ .top-level:hover{
53
+ background: darken($stone, 5%);
54
+ color: $jet;
55
+ }
24
56
  }
@@ -57,19 +57,11 @@
57
57
  }
58
58
  }
59
59
 
60
- .floating-cart{
61
- z-index: 98;
62
- }
63
-
64
60
  .summary-title{
65
61
  background: $brand-green !important;
66
62
  min-height: 62px;
67
63
  }
68
64
 
69
- .mobile-accordion-navigation{
70
- @include accordion-navigation;
71
- }
72
-
73
65
  .accordion-icon{
74
66
  width: 16px;
75
67
  height: 16px;
@@ -99,19 +91,7 @@
99
91
  }
100
92
  }
101
93
 
102
- @media screen and (max-width: 64em){
103
- .mobile-accordion{
104
- @include accordion-container;
105
-
106
- .mobile-accordion-navigation{
107
- @include accordion-navigation;
108
- }
109
-
110
- .content{
111
- @include accordion-content;
112
- }
113
- }
114
-
94
+ @media screen and #{breakpoint(medium down)}{
115
95
  span.item-num{
116
96
  display: inline-block;
117
97
  float: right;
@@ -106,7 +106,7 @@ input[type="checkbox"] + label{
106
106
  }
107
107
 
108
108
  input[type="radio"] + label{
109
- margin: $base-margin 0;
109
+ margin-top: -1px;
110
110
 
111
111
  &:before{
112
112
  border-radius: 100%;
@@ -238,7 +238,61 @@ input[type="checkbox"]:checked + label{
238
238
  background-position: center center;
239
239
  }
240
240
 
241
+ /* The vendor prefixed placeholders have to be declared as separate selectors.
242
+ When a browser doesn't understand a selector it invalidates the entire line */
243
+ input::-webkit-input-placeholder{
244
+ color: darken($smoke, 5%);
245
+ }
246
+
247
+ input:-moz-placeholder{
248
+ color: darken($smoke, 5%);
249
+ }
250
+
251
+ input::-moz-placeholder{
252
+ color: darken($smoke, 5%);
253
+ }
254
+
255
+ input[type='text'],
256
+ [type='password'],
257
+ [type='date'],
258
+ [type='datetime'],
259
+ [type='datetime-local'],
260
+ [type='month'],
261
+ [type='week'],
262
+ [type='email'],
263
+ [type='number'],
264
+ [type='search'],
265
+ [type='tel'],
266
+ [type='time'],
267
+ [type='url'],
268
+ [type='color'],
269
+ textarea{
270
+ font-size: 0.875rem;
271
+ color: $charcoal;
272
+ }
273
+
274
+ select.has-placeholder:nth-child(1){
275
+ color: darken($smoke, 5%);
276
+ }
277
+
241
278
  /* ------------- Error Messaging ------------- */
279
+ select + .error,
280
+ input + span.error,
281
+ input + small.error{
282
+ margin-top: -1rem;
283
+ margin-bottom: 1rem;
284
+ }
285
+
286
+ span.error,
287
+ small.error{
288
+ display: block;
289
+ padding: 0.375rem 0.5625rem 0.5625rem;
290
+ font-size: 0.75rem;
291
+ background: $brand-red;
292
+ color: $white;
293
+ margin-bottom: 1rem;
294
+ }
295
+
242
296
  .error small.error,
243
297
  small.error{
244
298
  background: $brand-red;
@@ -9,3 +9,4 @@
9
9
  @import "tab-accordions";
10
10
  @import "show-hide-content-box";
11
11
  @import "cart";
12
+ @import "reveal-modal";
@@ -19,7 +19,6 @@ table.tablesaw{
19
19
  /* Structure */
20
20
 
21
21
  .tablesaw{
22
- border: 1px solid $smoke;
23
22
  padding: 0;
24
23
  }
25
24
 
@@ -29,6 +28,8 @@ table.tablesaw{
29
28
  -moz-box-sizing: border-box;
30
29
  box-sizing: border-box;
31
30
  padding: .5em .7em;
31
+ font-size: $base-font-size*0.875;
32
+ color: $slate;
32
33
  }
33
34
 
34
35
  .tablesaw thead tr:first-child th{
@@ -36,19 +37,31 @@ table.tablesaw{
36
37
  padding-bottom: .7em;
37
38
  }
38
39
 
40
+ thead,
41
+ tbody,
42
+ tfoot{
43
+ border: none;
44
+ }
45
+
39
46
  /* Table rows have a gray bottom stroke by default */
40
47
 
41
48
  .tablesaw-stack tbody tr{
42
- border-bottom: 1px solid $smoke;
49
+ border-bottom: 2px solid $stone;
43
50
  }
44
51
 
45
52
  .tablesaw-stack td .tablesaw-cell-label,
46
53
  .tablesaw-stack th .tablesaw-cell-label{
47
54
  display: none;
48
55
  }
56
+
49
57
  .tablesaw-stack thead{
50
- background: lighten($smoke, 10%);
51
- border-bottom: 1px solid $smoke;
58
+ background: darken($ash, 3%);
59
+ border-bottom: 2px solid darken($stone, 3%);
60
+
61
+ td,
62
+ th{
63
+ color: $charcoal;
64
+ }
52
65
  }
53
66
 
54
67
  /* Mobile first styles: Begin with the stacked presentation at narrow widths */
@@ -73,7 +86,7 @@ table.tablesaw{
73
86
  .tablesaw-stack th .tablesaw-cell-label{
74
87
  display: block;
75
88
  padding: 0 .6em 0 0;
76
- width: 30%;
89
+ width: 45%;
77
90
  display: inline-block;
78
91
  }
79
92
 
@@ -102,24 +115,29 @@ table.tablesaw{
102
115
  display: none !important;
103
116
  }
104
117
  }
118
+
105
119
  @mixin tablesaw-stack-max{
106
120
  .tablesaw-stack thead td,
107
121
  .tablesaw-stack thead th{
108
122
  display: none;
109
123
  }
124
+
110
125
  .tablesaw-stack tbody td,
111
126
  .tablesaw-stack tbody th{
112
127
  clear: left;
113
128
  float: left;
114
129
  width: 100%;
115
130
  }
131
+
116
132
  .tablesaw-cell-label{
117
133
  vertical-align: top;
118
134
  }
135
+
119
136
  .tablesaw-cell-content{
120
- max-width: 67%;
137
+ max-width: 55%;
121
138
  display: inline-block;
122
139
  }
140
+
123
141
  .tablesaw-stack td:empty,
124
142
  .tablesaw-stack th:empty{
125
143
  display: none;
@@ -130,6 +148,7 @@ table.tablesaw{
130
148
  .tablesaw-stack tr{
131
149
  display: table-row;
132
150
  }
151
+
133
152
  /* Show the table header rows */
134
153
  .tablesaw-stack td,
135
154
  .tablesaw-stack th,
@@ -138,6 +157,7 @@ table.tablesaw{
138
157
  display: table-cell;
139
158
  margin: 0;
140
159
  }
160
+
141
161
  /* Hide the labels in each cell */
142
162
  .tablesaw-stack td .tablesaw-cell-label,
143
163
  .tablesaw-stack th .tablesaw-cell-label{
@@ -146,19 +166,24 @@ table.tablesaw{
146
166
  }
147
167
 
148
168
  $use-respond-mixins: false !default;
169
+
149
170
  @mixin tablesaw-stack( $breakpoint: 40em ){
171
+
150
172
  @if $use-respond-mixins{
151
173
  @include respond-max($breakpoint - .0625){
152
174
  @include tablesaw-stack-max;
153
175
  }
176
+
154
177
  @include respond-min($breakpoint){
155
178
  @include tablesaw-stack-min;
156
179
  }
157
180
  }
181
+
158
182
  @else{
159
183
  @media (max-width: ($breakpoint - .0625)){
160
184
  @include tablesaw-stack-max;
161
185
  }
186
+
162
187
  @media (min-width: $breakpoint){
163
188
  @include tablesaw-stack-min;
164
189
  }
@@ -166,11 +191,15 @@ $use-respond-mixins: false !default;
166
191
  }
167
192
 
168
193
  .tablesaw-parent{
169
- @include tablesaw-stack( 60em );
170
- table tr.even, table tr.alt, table tr:nth-of-type(even){
171
- background: darken($ash, 1%);
172
- }
173
- table{
174
- margin-bottom: 0;
175
- }
194
+ @include tablesaw-stack(60em);
195
+
196
+ table tr.even,
197
+ table tr.alt,
198
+ table tr:nth-of-type(even){
199
+ background: darken($ash, 1%);
200
+ }
201
+
202
+ table{
203
+ margin-bottom: 0;
204
+ }
176
205
  }
@@ -0,0 +1,11 @@
1
+ .reveal-modal .close-reveal-modal,
2
+ dialog .close-reveal-modal{
3
+ font-size: 2.5rem;
4
+ line-height: 1;
5
+ position: absolute;
6
+ top: 0.5rem;
7
+ right: 0.6875rem;
8
+ color: $slate;
9
+ font-weight: bold;
10
+ cursor: pointer;
11
+ }
@@ -77,8 +77,8 @@
77
77
  li:active{
78
78
  text-decoration: underline;
79
79
  }
80
- }
81
-
80
+ }
81
+
82
82
 
83
83
  span{
84
84
  display: block;
@@ -101,7 +101,7 @@
101
101
  }
102
102
 
103
103
  a{
104
- padding: $base-margin*0;
104
+ padding: 0 0 $base-margin*2 0;
105
105
  font-size: $base-font-size*0.875;
106
106
  }
107
107
  }
@@ -129,68 +129,16 @@ span.nav-icon{
129
129
  font-size: $base-font-size*1.5;
130
130
  color: $smoke;
131
131
  text-align: center;
132
+ @include breakpoint(small only){
133
+ margin: $base-margin*2 $base-margin $base-margin*2 0;
134
+ color: $white;
135
+ }
132
136
  }
133
137
 
134
138
  span.activepage{
135
139
  color: $white;
136
140
  }
137
141
 
138
- /* Top-Bar Styles */
139
- .contain-to-grid .top-bar{
140
- @extend .row;
141
- }
142
-
143
- .title-area{
144
- li.name{
145
- img{
146
- padding-top: $base-padding*2;
147
- height: 35px;
148
- }
149
- }
150
- }
151
-
152
- .top-bar{
153
- a{
154
- text-decoration: none;
155
- }
156
- }
157
-
158
- .dropdown-open-link{
159
- min-width: 201px; //The 1 px accounts for the border on the dropdown
160
- }
161
-
162
- .top-bar-nav.fixed{
163
- max-height: 50px;
164
- }
165
-
166
- ul.dropdown:not(.nested){
167
- -webkit-box-shadow: 0px 8px -5px -5px rgba(50,50,50,0.5);
168
- -moz-box-shadow: 0px 8px -5px -5px rgba(50,50,50,0.5);
169
- box-shadow: 0px 8px 20px -5px rgba(50,50,50,0.5);
170
- border-left: solid 1px darken($brand-blue-light, 5%);
171
- border-right: solid 1px darken($brand-blue-light, 5%);
172
- margin-top: -5px;
173
- }
174
-
175
- .dropdown{
176
- .nested{
177
- margin-top: -1px;
178
- border-right: solid 1px darken($brand-blue-light, 5%);
179
- border-left: solid 1px darken($brand-blue-light, 5%);
180
-
181
- li{
182
- background: lighten($brand-blue-light, 3%);
183
- }
184
- }
185
-
186
- .title.back{
187
- a{
188
- font-weight: bold;
189
- }
190
- }
191
- }
192
-
193
-
194
142
  .sub-nav{
195
143
  margin-left: -14px;
196
144
  }