ama_layout 4.7.1 → 4.8.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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: f296e94af2169028216956dfb424740f77cd21b0
4
- data.tar.gz: 798dde670e1f006cda9d23a206f111cbcfc6a949
3
+ metadata.gz: 619da31832027cb72d6b1ea48668962fcf9d47e6
4
+ data.tar.gz: d06e7041fcdf69d836abcdf97405c85be1642c18
5
5
  SHA512:
6
- metadata.gz: d9709d9035d74cc4158fb424bfa58a429ce022e49bdc039fc4389a3ac16dfa05813fca14225f46004354457b666da9f1f444bc45f3ab0d159b71d5d84b16414b
7
- data.tar.gz: 7f43352527eb6031b1d6a65e4f60342ce7b399d48914c5c1ee73d9ac93ee7c29bb89142232a7ffa3ab35582e6e530f2e9514f64c6d15fc25baa9618245091b55
6
+ metadata.gz: 6b7e8ff249921c3117d38639fe9ad6669f6a8c2d6376b74a369c3f5564a9f9ceed3dfd68f1de5bc652c5ec20dd83faf9791ade3934998af879b842b11b04ccb5
7
+ data.tar.gz: 4c92d9f5519dc2ed4fec9d028ec900762e6f745ba065b8784a8240d2b5df695ea967f7fe780d09fdcf778fae11b14ba2e8782892af55931d6b199fd5ca6af3cd
@@ -70,6 +70,13 @@
70
70
  position: relative;
71
71
  }
72
72
 
73
+ .z-index{
74
+ &--2{
75
+ z-index: 2;
76
+ position: relative;
77
+ }
78
+ }
79
+
73
80
  /* ==================== 4. Margins ==================== */
74
81
  .m1{
75
82
  margin: $base-margin !important;
@@ -341,9 +348,73 @@
341
348
  word-break: break-word;
342
349
  }
343
350
 
351
+ .semi-bold{
352
+ font-weight: 600;
353
+
354
+ &--small{
355
+ @extend .semi-bold;
356
+ font-size: $small-font-size;
357
+ }
358
+
359
+ &--medium{
360
+ @extend .semi-bold;
361
+ font-size: $medium-font-size;
362
+ }
363
+
364
+ &--large{
365
+ @extend .semi-bold;
366
+ font-size: $large-font-size;
367
+ }
368
+
369
+ &--x-large{
370
+ @extend .semi-bold;
371
+ font-size: $x-large-font-size;
372
+ }
373
+ }
374
+
375
+ .bold{
376
+ font-weight: 700;
377
+
378
+ &--small{
379
+ @extend .bold;
380
+ font-size: $small-font-size;
381
+ }
382
+
383
+ &--medium{
384
+ @extend .bold;
385
+ font-size: $medium-font-size;
386
+ }
387
+
388
+ &--large{
389
+ @extend .bold;
390
+ font-size: $large-font-size;
391
+ }
392
+
393
+ &--x-large{
394
+ @extend .bold;
395
+ font-size: $x-large-font-size;
396
+ line-height: $x-large-font-size;
397
+
398
+ &--green{
399
+ @extend .bold--x-large;
400
+ color: $brand-green
401
+ }
402
+ }
403
+
404
+ &--no-lineheight{
405
+ line-height: 0;
406
+ margin-bottom: $base-margin*1.65;
407
+ margin-top: $base-margin*1.65;
408
+ }
409
+ }
410
+
411
+ .x-large-sup{
412
+ font-size: 63%;
413
+ }
414
+
344
415
  .bold-large-text{
345
416
  @extend .white-text;
346
- font-size: $base-font-size*3;
417
+ font-size: $x-large-font-size;
347
418
  font-weight: bold;
348
419
 
349
420
  &--green{
@@ -27,6 +27,10 @@ $secondary-color: $brand-blue-light;
27
27
  $font-family-sans-serif: "Open Sans", Helvetica, Arial, sans-serif;
28
28
  $font-family-headings: "Open Sans Semi-Bold", Helvetica, Arial, sans-serif;
29
29
  $base-font-size: 1rem;
30
+ $small-font-size: $base-font-size*0.75;
31
+ $medium-font-size: $base-font-size*1.3;
32
+ $large-font-size: $base-font-size*1.85;
33
+ $x-large-font-size: $base-font-size*3;
30
34
  // Spacing
31
35
  $base-margin: 1rem;
32
36
  $base-padding: 1rem;
@@ -76,6 +76,106 @@
76
76
  }
77
77
  }
78
78
 
79
+ .accordion-multi-state{
80
+ @extend .accordion;
81
+ margin-bottom: $base-margin;
82
+ background: transparent;
83
+
84
+ .accordion-item{ //this is a foundation class needed for accordions to work. We only want to modify the margin for multi-state which is why it is nested.
85
+ margin-bottom: $base-margin;
86
+ }
87
+
88
+ &__header{
89
+ @extend .accordion__header;
90
+ background: transparent;
91
+ position: relative;
92
+ }
93
+
94
+ &__heading-bg{
95
+ @include small-10;
96
+ color: $white;
97
+ padding: 0.63rem $base-padding;
98
+ width: calc(100% - 20px);
99
+
100
+ &--active{
101
+ @extend .accordion-multi-state__heading-bg;
102
+ background: $brand-blue-light;
103
+ }
104
+
105
+ &--inactive{
106
+ @extend .accordion-multi-state__heading-bg;
107
+ background: $stone;
108
+
109
+ .accordion-multi-state__heading{
110
+ color: $slate;
111
+ }
112
+ }
113
+
114
+ &--complete{
115
+ @extend .accordion-multi-state__heading-bg;
116
+ background: $brand-green;
117
+ }
118
+
119
+ &--error{
120
+ @extend .accordion-multi-state__heading-bg;
121
+ background: $brand-red;
122
+ }
123
+ }
124
+
125
+ &__heading{
126
+ color: $white;
127
+ margin-left: $base-margin*0.75;
128
+ font-size: $base-font-size;
129
+ padding: 0;
130
+ }
131
+
132
+ &__icon{
133
+ @extend .fa;
134
+ width: 39px;
135
+ height: 39px;
136
+ border: 2px solid $brand-blue-light;
137
+ display: inline-block;
138
+ border-radius: 100%;
139
+ position: absolute;
140
+ background: white;
141
+ @include vertical-center;
142
+
143
+ &::before{
144
+ @include vertical-center;
145
+ width: 100%;
146
+ text-align: center;
147
+ font-size: 22px;
148
+ }
149
+
150
+ &--active{
151
+ @extend .accordion-multi-state__icon;
152
+ @extend .fa-check;
153
+ color: $stone;
154
+ }
155
+
156
+ &--inactive{
157
+ @extend .accordion-multi-state__icon;
158
+ border: 2px solid $stone;
159
+ }
160
+
161
+ &--complete{
162
+ @extend .accordion-multi-state__icon;
163
+ @extend .fa-check;
164
+ border: 2px solid $brand-green;
165
+ background: $white;
166
+ color: $brand-green;
167
+ }
168
+
169
+ &--error{
170
+ @extend .accordion-multi-state__icon;
171
+ @extend .fa-close;
172
+ border: 2px solid $brand-red;
173
+ background: $white;
174
+ color: $brand-red;
175
+ }
176
+ }
177
+ }
178
+
79
179
  // Foundation sets a border-radius by default,
80
180
  // and there doesn't seem to be an override in the settings file
81
181
  .accordion-item:first-child > :first-child,
@@ -73,6 +73,16 @@
73
73
  }
74
74
  }
75
75
 
76
+ &--expand-small-down{
77
+ @extend .button;
78
+
79
+ @include breakpoint(small down){
80
+ display: block;
81
+ margin: 0 auto;
82
+ width: 100%;
83
+ }
84
+ }
85
+
76
86
  &--small{
77
87
  @extend .button;
78
88
  @extend .small;
@@ -50,3 +50,24 @@
50
50
  }
51
51
  }
52
52
  }
53
+
54
+ .callout{
55
+ &__side-arrow{ //this works best if it's a class on a svg element.
56
+ position: absolute;
57
+ z-index: 1;
58
+ top: 0;
59
+
60
+ @include breakpoint(small down){
61
+ top: 100%;
62
+ left: 0%;
63
+ height: 30%;
64
+ background-color: $white;
65
+ }
66
+
67
+ &--mobile-spacing{
68
+ @include breakpoint(small down){
69
+ margin-top: 50px;
70
+ }
71
+ }
72
+ }
73
+ }
@@ -48,7 +48,8 @@ input[type="checkbox"]:not(.default){
48
48
  }
49
49
 
50
50
  input[type="radio"] + label,
51
- input[type="checkbox"] + label{
51
+ input[type="checkbox"] + label,
52
+ .form__label--unselected{
52
53
  background: $ash;
53
54
  border: $base-border;
54
55
  margin: 0;
@@ -76,6 +77,21 @@ input[type="checkbox"] + label{
76
77
  }
77
78
  }
78
79
 
80
+ .form__label-bg{
81
+ background: $ash;
82
+ border: $base-border;
83
+ margin: 0;
84
+ width: 100%;
85
+ position: relative;
86
+ cursor: pointer;
87
+ padding: 0 $base-padding/2 0 $base-padding/2;
88
+ }
89
+
90
+ .form__label-addon{
91
+ @extend .form__label-bg;
92
+ border-top: 0;
93
+ }
94
+
79
95
  .checkbox-label{
80
96
  display: inline-block;
81
97
  width: 85%;
@@ -381,6 +397,15 @@ input[type="url"]:-ms-input-placeholder{
381
397
  margin-bottom: $base-margin;
382
398
  }
383
399
 
400
+ &__conditional-row{
401
+ @extend .form-horizontal__row;
402
+ display: block;
403
+
404
+ &--hidden{
405
+ display: none;
406
+ }
407
+ }
408
+
384
409
  &__label-wrapper{
385
410
  @include large-4;
386
411
  }
@@ -10,6 +10,15 @@
10
10
  padding-top: $base-padding/2;
11
11
  }
12
12
  }
13
+
14
+ &--grey-bordered{
15
+ border-bottom: 2px solid $stone;
16
+ padding-bottom: $base-padding/2;
17
+
18
+ &:not(:first-child){
19
+ padding-top: $base-padding/2;
20
+ }
21
+ }
13
22
  }
14
23
 
15
24
  &__link{
@@ -52,7 +52,7 @@
52
52
  display: none;
53
53
  }
54
54
 
55
- &:after{
55
+ &::after{
56
56
  content: '';
57
57
  position: absolute;
58
58
  right: 0;
@@ -61,7 +61,7 @@
61
61
  border-width: 35px;
62
62
  }
63
63
 
64
- &:before{
64
+ &::before{
65
65
  content: '';
66
66
  position: absolute;
67
67
  right: -4px; //this controls the thickness of the arrow
@@ -71,7 +71,7 @@
71
71
  border-width: 35px;
72
72
  }
73
73
 
74
- &--selected:after{
74
+ &--selected::after{
75
75
  content: '';
76
76
  color: $white;
77
77
  position: absolute;
@@ -92,7 +92,7 @@
92
92
  border-width: 35px;
93
93
  }
94
94
 
95
- &--completed:after{
95
+ &--completed::after{
96
96
  content: '';
97
97
  color: $white;
98
98
  position: absolute;
@@ -113,7 +113,7 @@
113
113
  border-width: 35px;
114
114
  }
115
115
 
116
- &--very-completed:after{
116
+ &--very-completed::after{
117
117
  content: '';
118
118
  color: $white;
119
119
  position: absolute;
@@ -123,7 +123,7 @@
123
123
  border-width: 35px;
124
124
  }
125
125
 
126
- &--very-completed:before{
126
+ &--very-completed::before{
127
127
  content: '';
128
128
  color: $white;
129
129
  position: absolute;
@@ -135,3 +135,154 @@
135
135
  }
136
136
  }
137
137
  }
138
+
139
+ .progress-bar-vertical{
140
+ list-style: none;
141
+ position: relative;
142
+
143
+ &__guide{
144
+ height: 100%;
145
+ position: absolute;
146
+ width: 2px;
147
+ background-color: $stone;
148
+ left: 17px;
149
+ }
150
+
151
+ &__step{
152
+ @extend .clearfix;
153
+ position: relative;
154
+ margin-bottom: $base-margin*1.4;
155
+ }
156
+
157
+ &__icon{
158
+ width: 37px;
159
+ height: 37px;
160
+ border-radius: 100%;
161
+ display: inline-block;
162
+ font-weight: 700;
163
+ font-size: 23px;
164
+ text-align: center;
165
+ background-color: $stone;
166
+ position: relative;
167
+ float: left;
168
+
169
+ &--active{
170
+ @extend .progress-bar-vertical__icon;
171
+ background-color: $brand-blue-light;
172
+ color: $white;
173
+ }
174
+
175
+ &--complete{
176
+ @extend .fa;
177
+ @extend .fa-check;
178
+ @extend .progress-bar-vertical__icon;
179
+ background-color: $cerulean;
180
+ color: $white;
181
+ font-weight: normal;
182
+
183
+ &::before{
184
+ @include vertical-center;
185
+ left: 0;
186
+ width: 100%;
187
+ }
188
+ }
189
+ }
190
+
191
+ &__content{
192
+ position: relative;
193
+ float: left;
194
+ margin-left: $base-margin*1.5;
195
+ line-height: 16px;
196
+ max-width: 74%;
197
+ }
198
+
199
+ &__content-remove{
200
+ line-height: 23px;
201
+ margin-left: $base-margin*0.35;
202
+ }
203
+ }
204
+
205
+ .progress-bar-horizontal{
206
+ list-style: none;
207
+ position: relative;
208
+ margin: 0 auto;
209
+ display: table;
210
+ width: 100%;
211
+ @include clearfix;
212
+
213
+ @include breakpoint(medium only){
214
+ max-width: 546px;
215
+ }
216
+
217
+ &__guide{
218
+ width: 80%;
219
+ left: 10%;
220
+ position: absolute;
221
+ height: 2px;
222
+ background-color: $stone;
223
+ top: 70%;
224
+ }
225
+
226
+ &__step{
227
+ position: relative;
228
+ display: table-cell;
229
+
230
+ @include breakpoint(medium only){
231
+ margin-right: 9%;
232
+ }
233
+ }
234
+
235
+ &__icon{
236
+ width: 37px;
237
+ height: 37px;
238
+ border-radius: 100%;
239
+ display: block;
240
+ margin: 0 auto;
241
+ font-weight: 700;
242
+ font-size: 21px;
243
+ text-align: center;
244
+ background-color: $stone;
245
+ position: relative;
246
+ line-height: 37px;
247
+
248
+ @include breakpoint(medium only){
249
+ width: 50px;
250
+ height: 50px;
251
+ font-size: 26px;
252
+ line-height: 50px;
253
+ }
254
+
255
+ &--active{
256
+ @extend .progress-bar-horizontal__icon;
257
+ background-color: $brand-blue-light;
258
+ color: $white;
259
+ }
260
+
261
+ &--complete{
262
+ @extend .fa;
263
+ @extend .fa-check;
264
+ @extend .progress-bar-horizontal__icon;
265
+ background-color: $cerulean;
266
+ color: $white;
267
+ font-weight: normal;
268
+
269
+ &::before{
270
+ @include vertical-center;
271
+ left: 0;
272
+ width: 100%;
273
+ }
274
+ }
275
+ }
276
+
277
+ &__content{
278
+ line-height: $base-font-size*1.5;
279
+ text-align: center;
280
+ margin-bottom: $base-margin*0.65;
281
+ display: block;
282
+ font-size: $base-font-size*0.85;
283
+
284
+ @include breakpoint(medium only){
285
+ font-size: $base-font-size;
286
+ }
287
+ }
288
+ }
@@ -110,6 +110,10 @@
110
110
  &:last-child:not(.section-content){
111
111
  margin-bottom: 0;
112
112
  }
113
+
114
+ @include breakpoint(medium down){
115
+ float: none;
116
+ }
113
117
  }
114
118
 
115
119
  .section-centered{
@@ -155,6 +159,11 @@
155
159
  background: lighten($smoke, 5%);
156
160
  }
157
161
 
162
+ &--ash-bg{
163
+ padding: $base-padding;
164
+ background: $ash;
165
+ }
166
+
158
167
  &--blue-bg{
159
168
  padding: $base-padding;
160
169
  background: $brand-blue-light;
@@ -166,11 +175,31 @@
166
175
  }
167
176
  }
168
177
 
178
+ &--cerulean-bg{
179
+ padding: $base-padding;
180
+ background: $cerulean;
181
+ color: $white;
182
+ }
183
+
169
184
  &--grey-border{
170
185
  border: 2px solid $stone;
171
186
  }
172
187
  }
173
188
 
189
+ .section-content-half{
190
+ @extend .section;
191
+ @include medium-6;
192
+ position: relative;
193
+ margin-bottom: 0;
194
+ }
195
+
196
+ .content-container{
197
+ &--vertical{
198
+ @include vertical-center;
199
+ width: 100%;
200
+ }
201
+ }
202
+
174
203
  @function set-hint-color($color) {
175
204
  @if (lightness($color) > 50) {
176
205
  @return $smoke; // Lighter backgorund, return dark color
@@ -1,6 +1,10 @@
1
1
  .table{
2
2
  margin-bottom: $base-margin;
3
3
 
4
+ &--ash-bg{
5
+ background: $ash;
6
+ }
7
+
4
8
  &__row{
5
9
  @include grid-row;
6
10
  overflow: auto;
@@ -44,6 +48,12 @@
44
48
  float: right;
45
49
  }
46
50
 
51
+ &--center{
52
+ @extend .table__data;
53
+ text-align: center;
54
+ clear: both;
55
+ }
56
+
47
57
  &--hide-large{
48
58
  @include hide-for(large);
49
59
  }
@@ -62,11 +72,17 @@
62
72
  font-weight: 600;
63
73
  font-size: rem-calc(16);
64
74
  color: $slate;
65
- }
66
75
 
67
- &__col-title--small{
68
- font-weight: 600;
69
- font-size: 0.875rem;
76
+ &--medium{
77
+ font-weight: 600;
78
+ font-size: $base-font-size;
79
+ color: $slate;
80
+ }
81
+
82
+ &--small{
83
+ font-weight: 600;
84
+ font-size: $base-font-size*0.875;
85
+ }
70
86
  }
71
87
 
72
88
  &__col-title-link{
@@ -1,3 +1,3 @@
1
1
  module AmaLayout
2
- VERSION = '4.7.1'
2
+ VERSION = '4.8.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.7.1
4
+ version: 4.8.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-11-29 00:00:00.000000000 Z
21
+ date: 2016-11-30 00:00:00.000000000 Z
22
22
  dependencies:
23
23
  - !ruby/object:Gem::Dependency
24
24
  name: foundation-rails