@graupl/core 1.0.0-beta.10 → 1.0.0-beta.11

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 (59) hide show
  1. package/dist/js/accordion.js +5 -0
  2. package/dist/js/accordion.js.map +1 -0
  3. package/dist/js/alert.js +5 -0
  4. package/dist/js/alert.js.map +1 -0
  5. package/dist/js/carousel.js +5 -0
  6. package/dist/js/carousel.js.map +1 -0
  7. package/dist/js/component/accordion.cjs.js +5 -0
  8. package/dist/js/component/accordion.cjs.js.map +1 -0
  9. package/dist/js/component/accordion.es.js +5 -0
  10. package/dist/js/component/accordion.es.js.map +1 -0
  11. package/dist/js/component/accordion.iife.js +5 -0
  12. package/dist/js/component/accordion.iife.js.map +1 -0
  13. package/dist/js/component/alert.cjs.js +5 -0
  14. package/dist/js/component/alert.cjs.js.map +1 -0
  15. package/dist/js/component/alert.es.js +5 -0
  16. package/dist/js/component/alert.es.js.map +1 -0
  17. package/dist/js/component/alert.iife.js +5 -0
  18. package/dist/js/component/alert.iife.js.map +1 -0
  19. package/dist/js/component/carousel.cjs.js +5 -0
  20. package/dist/js/component/carousel.cjs.js.map +1 -0
  21. package/dist/js/component/carousel.es.js +5 -0
  22. package/dist/js/component/carousel.es.js.map +1 -0
  23. package/dist/js/component/carousel.iife.js +5 -0
  24. package/dist/js/component/carousel.iife.js.map +1 -0
  25. package/dist/js/generator/accordion.cjs.js +5 -0
  26. package/dist/js/generator/accordion.cjs.js.map +1 -0
  27. package/dist/js/generator/accordion.es.js +5 -0
  28. package/dist/js/generator/accordion.es.js.map +1 -0
  29. package/dist/js/generator/accordion.iife.js +5 -0
  30. package/dist/js/generator/accordion.iife.js.map +1 -0
  31. package/dist/js/generator/carousel.cjs.js +5 -0
  32. package/dist/js/generator/carousel.cjs.js.map +1 -0
  33. package/dist/js/generator/carousel.es.js +5 -0
  34. package/dist/js/generator/carousel.es.js.map +1 -0
  35. package/dist/js/generator/carousel.iife.js +5 -0
  36. package/dist/js/generator/carousel.iife.js.map +1 -0
  37. package/dist/js/generator/navigation.cjs.js +3 -0
  38. package/dist/js/generator/navigation.cjs.js.map +1 -0
  39. package/dist/js/generator/navigation.es.js +3 -0
  40. package/dist/js/generator/navigation.es.js.map +1 -0
  41. package/dist/js/generator/navigation.iife.js +3 -0
  42. package/dist/js/generator/navigation.iife.js.map +1 -0
  43. package/dist/js/graupl.js +9 -0
  44. package/dist/js/graupl.js.map +1 -0
  45. package/dist/js/navigation.js +3 -0
  46. package/dist/js/navigation.js.map +1 -0
  47. package/package.json +41 -6
  48. package/src/js/accordion/generator.js +27 -0
  49. package/src/js/accordion/index.js +2 -7
  50. package/src/js/alert/generator.js +29 -0
  51. package/src/js/alert/index.js +2 -8
  52. package/src/js/carousel/generator.js +27 -0
  53. package/src/js/carousel/index.js +2 -7
  54. package/src/js/main.js +11 -0
  55. package/src/js/navigation/generator.js +49 -0
  56. package/src/js/navigation/index.js +2 -33
  57. package/src/scss/base/form/_index.scss +4 -4
  58. package/src/scss/layout/container/_index.scss +122 -122
  59. package/src/scss/utilities/visually-hidden/_index.scss +8 -8
@@ -171,11 +171,11 @@
171
171
  //
172
172
  // > :not(.container, .breakout, .feature, .full-width)
173
173
  > :not(
174
- #{defaults.$container-selector-base}#{defaults.$container-selector},
175
- #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
176
- #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
177
- #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
178
- ) {
174
+ #{defaults.$container-selector-base}#{defaults.$container-selector},
175
+ #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
176
+ #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
177
+ #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
178
+ ) {
179
179
  grid-column: content;
180
180
  }
181
181
 
@@ -189,11 +189,11 @@
189
189
 
190
190
  // > :not(.container, .breakout, .feature, .full-width)
191
191
  > :not(
192
- #{defaults.$container-selector-base}#{defaults.$container-selector},
193
- #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
194
- #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
195
- #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
196
- ) {
192
+ #{defaults.$container-selector-base}#{defaults.$container-selector},
193
+ #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
194
+ #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
195
+ #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
196
+ ) {
197
197
  grid-column: content;
198
198
  }
199
199
  }
@@ -225,12 +225,12 @@
225
225
 
226
226
  // > :not(.container, .breakout, .feature, .full-width, .sidebar-left)
227
227
  > :not(
228
- #{defaults.$container-selector-base}#{defaults.$container-selector},
229
- #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
230
- #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
231
- #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
232
- #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix}
233
- ) {
228
+ #{defaults.$container-selector-base}#{defaults.$container-selector},
229
+ #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
230
+ #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
231
+ #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
232
+ #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix}
233
+ ) {
234
234
  grid-column: content;
235
235
  }
236
236
  }
@@ -243,12 +243,12 @@
243
243
 
244
244
  // > :not(.container, .breakout, .feature, .full-width, .sidebar-right)
245
245
  > :not(
246
- #{defaults.$container-selector-base}#{defaults.$container-selector},
247
- #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
248
- #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
249
- #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
250
- #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
251
- ) {
246
+ #{defaults.$container-selector-base}#{defaults.$container-selector},
247
+ #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
248
+ #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
249
+ #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
250
+ #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
251
+ ) {
252
252
  grid-column: content;
253
253
  }
254
254
  }
@@ -261,12 +261,12 @@
261
261
 
262
262
  // > :not(.container, .breakout, .feature, .full-width, .sidebar-right)
263
263
  > :not(
264
- #{defaults.$container-selector-base}#{defaults.$container-selector},
265
- #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
266
- #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
267
- #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
268
- #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
269
- ) {
264
+ #{defaults.$container-selector-base}#{defaults.$container-selector},
265
+ #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
266
+ #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
267
+ #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
268
+ #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
269
+ ) {
270
270
  grid-column: content;
271
271
  }
272
272
 
@@ -277,12 +277,12 @@
277
277
  #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
278
278
  // > :not(.container, .breakout, .feature, .full-width)
279
279
  > :not(
280
- #{defaults.$container-selector-base}#{defaults.$container-selector},
281
- #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
282
- #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
283
- #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
284
- #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
285
- ) {
280
+ #{defaults.$container-selector-base}#{defaults.$container-selector},
281
+ #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
282
+ #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
283
+ #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
284
+ #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
285
+ ) {
286
286
  grid-column: content;
287
287
  }
288
288
  }
@@ -296,13 +296,13 @@
296
296
 
297
297
  // > :not(.container, .breakout, .feature, .full-width, .sidebar-left, .sidebar-right)
298
298
  > :not(
299
- #{defaults.$container-selector-base}#{defaults.$container-selector},
300
- #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
301
- #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
302
- #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
303
- #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix},
304
- #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
305
- ) {
299
+ #{defaults.$container-selector-base}#{defaults.$container-selector},
300
+ #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
301
+ #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
302
+ #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
303
+ #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix},
304
+ #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
305
+ ) {
306
306
  grid-column: content;
307
307
  }
308
308
 
@@ -313,13 +313,13 @@
313
313
  #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
314
314
  // > :not(.container, .breakout, .feature, .full-width, .sidebar-left, .sidebar-right)
315
315
  > :not(
316
- #{defaults.$container-selector-base}#{defaults.$container-selector},
317
- #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
318
- #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
319
- #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
320
- #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix},
321
- #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
322
- ) {
316
+ #{defaults.$container-selector-base}#{defaults.$container-selector},
317
+ #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
318
+ #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
319
+ #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
320
+ #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix},
321
+ #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
322
+ ) {
323
323
  grid-column: content;
324
324
  }
325
325
  }
@@ -333,13 +333,13 @@
333
333
 
334
334
  // > :not(.container, .breakout, .feature, .full-width, .sidebar-left, .sidebar-right)
335
335
  > :not(
336
- #{defaults.$container-selector-base}#{defaults.$container-selector},
337
- #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
338
- #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
339
- #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
340
- #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix},
341
- #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
342
- ) {
336
+ #{defaults.$container-selector-base}#{defaults.$container-selector},
337
+ #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
338
+ #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
339
+ #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
340
+ #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix},
341
+ #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
342
+ ) {
343
343
  grid-column: content;
344
344
  }
345
345
 
@@ -350,13 +350,13 @@
350
350
  #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
351
351
  // > :not(.container, .breakout, .feature, .full-width, .sidebar-left, .sidebar-right)
352
352
  > :not(
353
- #{defaults.$container-selector-base}#{defaults.$container-selector},
354
- #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
355
- #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
356
- #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
357
- #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix},
358
- #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
359
- ) {
353
+ #{defaults.$container-selector-base}#{defaults.$container-selector},
354
+ #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
355
+ #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
356
+ #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector},
357
+ #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-left-selector-suffix},
358
+ #{defaults.$container-sidebar-selector-base}#{defaults.$container-sidebar-selector}#{defaults.$container-right-selector-suffix}
359
+ ) {
360
360
  grid-column: content;
361
361
  }
362
362
  }
@@ -386,8 +386,8 @@
386
386
  //
387
387
  // &:not(.container)
388
388
  &:not(
389
- #{defaults.$container-selector-base}#{defaults.$container-selector}
390
- ) {
389
+ #{defaults.$container-selector-base}#{defaults.$container-selector}
390
+ ) {
391
391
  // &, .container, .breakout, .feature, .full-width
392
392
  &,
393
393
  #{defaults.$container-selector-base}#{defaults.$container-selector},
@@ -402,11 +402,11 @@
402
402
  //
403
403
  // > :not(.container, .breakout, .feature, .full-width)
404
404
  > :not(
405
- #{defaults.$container-selector-base}#{defaults.$container-selector},
406
- #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
407
- #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
408
- #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
409
- ) {
405
+ #{defaults.$container-selector-base}#{defaults.$container-selector},
406
+ #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
407
+ #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
408
+ #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
409
+ ) {
410
410
  grid-column: sidebar-left;
411
411
  }
412
412
 
@@ -417,11 +417,11 @@
417
417
  #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
418
418
  // > :not(.container, .breakout, .feature, .full-width)
419
419
  > :not(
420
- #{defaults.$container-selector-base}#{defaults.$container-selector},
421
- #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
422
- #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
423
- #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
424
- ) {
420
+ #{defaults.$container-selector-base}#{defaults.$container-selector},
421
+ #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
422
+ #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
423
+ #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
424
+ ) {
425
425
  grid-column: sidebar-left;
426
426
  }
427
427
  }
@@ -435,8 +435,8 @@
435
435
  //
436
436
  // &:not(.container)
437
437
  &:not(
438
- #{defaults.$container-selector-base}#{defaults.$container-selector}
439
- ) {
438
+ #{defaults.$container-selector-base}#{defaults.$container-selector}
439
+ ) {
440
440
  // &, .container, .breakout, .feature, .full-width
441
441
  &,
442
442
  #{defaults.$container-selector-base}#{defaults.$container-selector},
@@ -451,11 +451,11 @@
451
451
  //
452
452
  // > :not(.container, .breakout, .feature, .full-width)
453
453
  > :not(
454
- #{defaults.$container-selector-base}#{defaults.$container-selector},
455
- #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
456
- #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
457
- #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
458
- ) {
454
+ #{defaults.$container-selector-base}#{defaults.$container-selector},
455
+ #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
456
+ #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
457
+ #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
458
+ ) {
459
459
  grid-column: sidebar-right;
460
460
  }
461
461
 
@@ -466,11 +466,11 @@
466
466
  #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
467
467
  // > :not(.container, .breakout, .feature, .full-width)
468
468
  > :not(
469
- #{defaults.$container-selector-base}#{defaults.$container-selector},
470
- #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
471
- #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
472
- #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
473
- ) {
469
+ #{defaults.$container-selector-base}#{defaults.$container-selector},
470
+ #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
471
+ #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
472
+ #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
473
+ ) {
474
474
  grid-column: sidebar-right;
475
475
  }
476
476
  }
@@ -484,8 +484,8 @@
484
484
  //
485
485
  // &:not(.container)
486
486
  &:not(
487
- #{defaults.$container-selector-base}#{defaults.$container-selector}
488
- ) {
487
+ #{defaults.$container-selector-base}#{defaults.$container-selector}
488
+ ) {
489
489
  // &, .container, .breakout, .feature, .full-width
490
490
  &,
491
491
  #{defaults.$container-selector-base}#{defaults.$container-selector},
@@ -500,11 +500,11 @@
500
500
  //
501
501
  // > :not(.container, .breakout, .feature, .full-width)
502
502
  > :not(
503
- #{defaults.$container-selector-base}#{defaults.$container-selector},
504
- #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
505
- #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
506
- #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
507
- ) {
503
+ #{defaults.$container-selector-base}#{defaults.$container-selector},
504
+ #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
505
+ #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
506
+ #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
507
+ ) {
508
508
  grid-column: content-right;
509
509
  }
510
510
 
@@ -515,11 +515,11 @@
515
515
  #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
516
516
  // > :not(.container, .breakout, .feature, .full-width)
517
517
  > :not(
518
- #{defaults.$container-selector-base}#{defaults.$container-selector},
519
- #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
520
- #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
521
- #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
522
- ) {
518
+ #{defaults.$container-selector-base}#{defaults.$container-selector},
519
+ #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
520
+ #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
521
+ #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
522
+ ) {
523
523
  grid-column: content-right;
524
524
  }
525
525
  }
@@ -533,8 +533,8 @@
533
533
  //
534
534
  // &:not(.container)
535
535
  &:not(
536
- #{defaults.$container-selector-base}#{defaults.$container-selector}
537
- ) {
536
+ #{defaults.$container-selector-base}#{defaults.$container-selector}
537
+ ) {
538
538
  // &, .container, .breakout, .feature, .full-width
539
539
  &,
540
540
  #{defaults.$container-selector-base}#{defaults.$container-selector},
@@ -549,11 +549,11 @@
549
549
  //
550
550
  // > :not(.container, .breakout, .feature, .full-width)
551
551
  > :not(
552
- #{defaults.$container-selector-base}#{defaults.$container-selector},
553
- #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
554
- #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
555
- #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
556
- ) {
552
+ #{defaults.$container-selector-base}#{defaults.$container-selector},
553
+ #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
554
+ #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
555
+ #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
556
+ ) {
557
557
  grid-column: content-left;
558
558
  }
559
559
 
@@ -564,11 +564,11 @@
564
564
  #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
565
565
  // > :not(.container, .breakout, .feature, .full-width)
566
566
  > :not(
567
- #{defaults.$container-selector-base}#{defaults.$container-selector},
568
- #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
569
- #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
570
- #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
571
- ) {
567
+ #{defaults.$container-selector-base}#{defaults.$container-selector},
568
+ #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
569
+ #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
570
+ #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
571
+ ) {
572
572
  grid-column: content-left;
573
573
  }
574
574
  }
@@ -582,8 +582,8 @@
582
582
  //
583
583
  // &:not(.container)
584
584
  &:not(
585
- #{defaults.$container-selector-base}#{defaults.$container-selector}
586
- ) {
585
+ #{defaults.$container-selector-base}#{defaults.$container-selector}
586
+ ) {
587
587
  // &, .container, .breakout, .feature, .full-width
588
588
  &,
589
589
  #{defaults.$container-selector-base}#{defaults.$container-selector},
@@ -598,11 +598,11 @@
598
598
  //
599
599
  // > :not(.container, .breakout, .feature, .full-width)
600
600
  > :not(
601
- #{defaults.$container-selector-base}#{defaults.$container-selector},
602
- #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
603
- #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
604
- #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
605
- ) {
601
+ #{defaults.$container-selector-base}#{defaults.$container-selector},
602
+ #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
603
+ #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
604
+ #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
605
+ ) {
606
606
  grid-column: inner-content;
607
607
  }
608
608
 
@@ -613,11 +613,11 @@
613
613
  #{defaults.$container-contain-selector-base}#{defaults.$container-contain-selector} {
614
614
  // > :not(.container, .breakout, .feature, .full-width)
615
615
  > :not(
616
- #{defaults.$container-selector-base}#{defaults.$container-selector},
617
- #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
618
- #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
619
- #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
620
- ) {
616
+ #{defaults.$container-selector-base}#{defaults.$container-selector},
617
+ #{defaults.$container-breakout-selector-base}#{defaults.$container-breakout-selector},
618
+ #{defaults.$container-full-width-selector-base}#{defaults.$container-full-width-selector},
619
+ #{defaults.$container-feature-selector-base}#{defaults.$container-feature-selector}
620
+ ) {
621
621
  grid-column: inner-content;
622
622
  }
623
623
  }
@@ -98,8 +98,8 @@
98
98
  #{$selector-prefix}#{defaults.$visually-hidden-selector} {
99
99
  // `&:not(.focusable)`
100
100
  &:not(
101
- #{defaults.$selector-base}#{defaults.$visually-hidden-focusable-selector}
102
- ) {
101
+ #{defaults.$selector-base}#{defaults.$visually-hidden-focusable-selector}
102
+ ) {
103
103
  @include visually-hidden.apply(defaults.$use-important);
104
104
  }
105
105
 
@@ -123,8 +123,8 @@
123
123
  #{$selector-prefix}#{defaults.$visually-hidden-selector} {
124
124
  // `&:not(.focusable)`
125
125
  &:not(
126
- #{defaults.$selector-base}#{defaults.$visually-hidden-focusable-selector}
127
- ) {
126
+ #{defaults.$selector-base}#{defaults.$visually-hidden-focusable-selector}
127
+ ) {
128
128
  @include visually-hidden.apply(defaults.$use-important);
129
129
  }
130
130
 
@@ -148,8 +148,8 @@
148
148
  #{$selector-prefix}#{defaults.$visually-hidden-selector} {
149
149
  // `&:not(.focusable)`
150
150
  &:not(
151
- #{defaults.$selector-base}#{defaults.$visually-hidden-focusable-selector}
152
- ) {
151
+ #{defaults.$selector-base}#{defaults.$visually-hidden-focusable-selector}
152
+ ) {
153
153
  @include visually-hidden.apply(defaults.$use-important);
154
154
  }
155
155
 
@@ -173,8 +173,8 @@
173
173
  #{$selector-prefix}#{defaults.$visually-hidden-selector} {
174
174
  // `&:not(.focusable)`
175
175
  &:not(
176
- #{defaults.$selector-base}#{defaults.$visually-hidden-focusable-selector}
177
- ) {
176
+ #{defaults.$selector-base}#{defaults.$visually-hidden-focusable-selector}
177
+ ) {
178
178
  @include visually-hidden.apply(defaults.$use-important);
179
179
  }
180
180