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.
- checksums.yaml +4 -4
- data/ama_layout.gemspec +1 -1
- data/app/assets/images/ama-logo-small.svg +44 -0
- data/app/assets/javascripts/ama_layout/desktop/header_menu.coffee +7 -3
- data/app/assets/stylesheets/ama_layout/_settings.scss +566 -0
- data/app/assets/stylesheets/ama_layout/foundation_and_overrides.scss +48 -1483
- data/app/assets/stylesheets/ama_layout/layout/base-styles.scss +7 -1
- data/app/assets/stylesheets/ama_layout/layout/helper-classes.scss +18 -3
- data/app/assets/stylesheets/ama_layout/layout_components/accordions.scss +44 -12
- data/app/assets/stylesheets/ama_layout/layout_components/cart.scss +1 -21
- data/app/assets/stylesheets/ama_layout/layout_components/forms.scss +55 -1
- data/app/assets/stylesheets/ama_layout/layout_components/index.scss +1 -0
- data/app/assets/stylesheets/ama_layout/layout_components/responsive-table.scss +42 -13
- data/app/assets/stylesheets/ama_layout/layout_components/reveal-modal.scss +11 -0
- data/app/assets/stylesheets/ama_layout/layout_components/sidebar.scss +7 -59
- data/app/assets/stylesheets/ama_layout/layout_components/siteheader.scss +108 -11
- data/app/assets/stylesheets/ama_layout/media_queries/desktop.scss +2 -2
- data/app/assets/stylesheets/ama_layout/media_queries/mobile-and-tablet.scss +2 -2
- data/app/assets/stylesheets/ama_layout/media_queries/mobile.scss +1 -15
- data/app/assets/stylesheets/ama_layout/media_queries/tablet.scss +2 -2
- data/app/views/ama_layout/_footer.html.erb +1 -1
- data/app/views/ama_layout/_main_top_nav_item.html.erb +2 -3
- data/app/views/ama_layout/_notice.html.erb +2 -2
- data/app/views/ama_layout/_sidebar.html.erb +1 -1
- data/app/views/ama_layout/_siteheader.html.erb +31 -31
- data/app/views/ama_layout/_top_nav.html.erb +3 -7
- data/app/views/ama_layout/_top_sub_nav.html.erb +1 -1
- data/app/views/ama_layout/_top_sub_nav_item.html.erb +0 -1
- data/lib/ama_layout/decorators/navigation_decorator.rb +1 -1
- data/lib/ama_layout/version.rb +1 -1
- metadata +10 -8
- 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
|
-
|
304
|
-
@extend .
|
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
|
-
.
|
2
|
-
|
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
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
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 (
|
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:
|
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;
|
@@ -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:
|
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
|
-
|
51
|
-
|
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:
|
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:
|
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(
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
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
|
}
|
@@ -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
|
}
|