gent_styleguide 7.1.0 → 7.2.2

package/build/styleguide/sass/41-organisms/resolutions/_resolutions-detail.scss

@@ -2,35 +2,34 @@
 @use '../../00-mixins/mixins' as *;
 @use '../../11-base/fonts/icons' as *;
 
-// sass-lint:disable placeholder-in-extend
 .resolutions-detail {
   display: grid;
   position: relative;
+  grid-auto-rows: auto;
+  grid-column-gap: 1rem;
+  grid-template-columns: 1fr;
   margin: 0 0 .8rem;
   padding: .8rem 1rem;
   border-radius: .375rem;
   background-color: #fff;
   line-height: 1.75;
-  grid-template-columns: 1fr;
-  grid-auto-rows: auto;
-  grid-column-gap: 1rem;
 
   @include tablet {
     grid-template-columns: 1fr minmax(auto, 6rem);
   }
 
   &__title {
+    grid-row: 1;
     margin-bottom: .2rem;
     font-size: .9rem;
-    grid-row: 1;
   }
 
   &__link {
     border: 0;
 
     &::before {
-      position: absolute;
       content: '';
+      position: absolute;
       z-index: 1;
       inset: 0;
     }
@@ -57,12 +56,12 @@
       margin-inline-end: .7em;
 
       &::after {
+        content: "";
         position: absolute;
         top: .2rem;
         right: -.5em;
         bottom: .2rem;
-        border-right: thin solid currentColor;
-        content: "";
+        border-right: thin solid currentcolor;
       }
     }
   }
@@ -79,11 +78,10 @@
     justify-self: start;
 
     @include tablet {
-      align-self: start;
-      margin: 0;
-      justify-self: end;
-      grid-row: 1;
       grid-column: 2 / -1;
+      grid-row: 1;
+      place-self: start end;
+      margin: 0;
     }
 
     &::before {
@@ -95,19 +93,15 @@
     &--true {
       @include icon(checkmark-circle);
 
-      & {
-        background-color: coloring('green', -4);
-        color: coloring('green', +2);
-      }
+      background-color: coloring('green', -4);
+      color: coloring('green', +2);
     }
 
     &--false {
       @include icon(cross);
 
-      & {
-        background-color: coloring('red', -4);
-        color: coloring('red', +2);
-      }
+      background-color: coloring('red', -4);
+      color: coloring('red', +2);
     }
   }
 }

package/build/styleguide/sass/41-organisms/resolutions/_resolutions-list.scss

@@ -2,10 +2,9 @@
 @use '../../00-mixins/mixins' as *;
 @use '../../21-atoms/list/list' as *;
 
-// sass-lint:disable no-important
 .resolutions-list {
   .highlight__inner {
-    padding-right: 2rem !important;
+    padding-right: 2rem !important; // stylelint-disable-line declaration-no-important
   }
 
   h2 {

package/build/styleguide/sass/41-organisms/summary/_summary.scss

@@ -5,12 +5,11 @@
 .summary-box {
   @include theme('background-color', 'color-secondary-light', 'summary-box-background-color');
 
-  & {
-    padding: 1.5rem;
-  }
+  padding: 1.5rem;
 
   ul.icon-list {
     @include medium-text;
+
     width: 100%;
     margin: 0 0 1rem;
 
@@ -27,6 +26,7 @@
 
     time {
       @include semi-bold-text;
+
       display: block;
     }
 

package/build/styleguide/sass/41-organisms/theme-footer/_theme-footer.scss

@@ -2,6 +2,7 @@
 @use '../../00-mixins/mixins' as *;
 @use '../../21-atoms/link/link' as *;
 
+/* stylelint-disable no-descending-specificity */
 .theme-footer {
   margin: 6rem -1rem;
   padding: 0;
@@ -52,7 +53,8 @@
   }
 
   .contact {
-    @include medium-text();
+    @include medium-text;
+
     margin-right: auto;
 
     @include desktop {
@@ -64,7 +66,8 @@
     }
 
     .icon-list {
-      @include medium-text();
+      @include medium-text;
+
       margin: 0;
 
       @include desktop {
@@ -133,6 +136,7 @@
 
   .newsletter {
     @include medium-text;
+
     flex-grow: 1;
     padding: 30px;
 

package/build/styleguide/sass/41-organisms/timeline/_timeline.scss

@@ -1,12 +1,14 @@
 @use '../../00-settings/settings' as *;
 @use '../../00-mixins/mixins' as *;
 
+/* stylelint-disable no-descending-specificity, max-nesting-depth */
+
 $timeline-border: 6px;
 $timeline-m-left-padding: 35px;
 $timeline-m-right-padding: 30px;
 $timeline-dd-space-between-mobile: 60px;
 $timeline-dd-space-between: 90px;
-$timeline-dt-left-padding: 0px; // sass-lint:disable-line zero-unit
+$timeline-dt-left-padding: 0px;
 $timeline-dt-right-padding: 112px;
 
 $roadmap-img-mobile-size: 120px;
@@ -29,12 +31,12 @@ dl.timeline {
     // Timeline-slot title styling.
     &-title {
       position: relative;
+      z-index: 2;
       width: 100%;
       margin: 0;
       border: 0;
       background: transparent;
       line-height: 36px;
-      z-index: 2;
 
       button {
         width: 100%;
@@ -49,12 +51,12 @@ dl.timeline {
           padding-left: 55px;
 
           &::after {
+            content: '';
+            z-index: 0;
             right: 100%;
             width: 60px;
             height: $timeline-border;
             background-color: coloring(cyan-pastel);
-            content: '';
-            z-index: 0;
           }
         }
 
@@ -66,13 +68,13 @@ dl.timeline {
         // +/- icon
         &::before {
           display: flex;
+          z-index: 1;
           left: 0;
           align-items: center;
           min-width: 36px;
           min-height: 36px;
           font-size: 1.2rem;
           line-height: 1.54rem;
-          z-index: 1;
         }
       }
     }
@@ -91,7 +93,6 @@ dl.timeline {
     }
 
     &-content {
-
       &__img {
         &:focus,
         &:focus-within {
@@ -100,11 +101,11 @@ dl.timeline {
       }
 
       &:not(.timeline-slot-content__img) {
-        padding-top: calc($gutter-width/2);
+        padding-top: calc($gutter-width / 2);
       }
 
       .content-image {
-        padding-bottom: calc($gutter-width/2);
+        padding-bottom: calc($gutter-width / 2);
 
         @include desktop {
           padding-bottom: 0;
@@ -150,11 +151,8 @@ dl.timeline {
     .item {
       display: grid;
       position: relative;
-      grid-template-areas:
-      "title"
-      "left";
-      grid-template-rows: auto auto;
-      grid-template-columns: 1fr;
+      grid-template:
+      "title" auto "left" auto / 1fr;
 
       @include desktop {
         grid-template-areas:
@@ -170,7 +168,7 @@ dl.timeline {
         width: 100%;
         max-width: none;
         margin: 0;
-        padding-right: calc(#{$gutter-width*.5});
+        padding-right: calc(#{$gutter-width * .5});
         padding-bottom: $timeline-dd-space-between-mobile;
         padding-left: calc(#{$timeline-m-left-padding} + #{$timeline-m-right-padding});
 
@@ -181,13 +179,13 @@ dl.timeline {
         &::after {
           @include theme('border-color', 'color-tertiary-pastel', 'timeline-line-color');
 
+          content: '';
           position: absolute;
+          z-index: 0;
           top: 0;
           bottom: 0;
           left: $timeline-m-left-padding;
           border-left: $timeline-border solid;
-          content: '';
-          z-index: 0;
 
           @include desktop {
             left: calc(#{$timeline-dt-left-padding} - #{$timeline-border} / 2);
@@ -211,19 +209,19 @@ dl.timeline {
           // Fix to add whitespace to the video top and bottom areas.
           &::before,
           &::after {
+            content: '';
             position: absolute;
+            z-index: z('timeline', 'video', 'background');
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            content: '';
-            z-index: z('timeline', 'video', 'background');
           }
 
           .video {
             position: relative;
-            border: 0;
             z-index: z('timeline', 'video', 'player');
+            border: 0;
 
             .audio-description {
               min-height: 40px;
@@ -256,9 +254,9 @@ dl.timeline {
         &.item--right {
           .item__image-desktop {
             @include desktop {
-              padding-right: 66px;
-              padding-left: calc(#{$gutter-width*.5});
               grid-area: left;
+              padding-right: 66px;
+              padding-left: calc(#{$gutter-width * .5});
 
               &::after {
                 display: none;
@@ -268,9 +266,9 @@ dl.timeline {
 
           .item__content {
             @include desktop {
-              padding-right: calc(#{$gutter-width*.5});
-              padding-left: calc(#{$timeline-dt-left-padding} + #{$timeline-dt-right-padding});
               grid-area: right;
+              padding-right: calc(#{$gutter-width * .5});
+              padding-left: calc(#{$timeline-dt-left-padding} + #{$timeline-dt-right-padding});
             }
           }
         }
@@ -279,23 +277,23 @@ dl.timeline {
         &.item--left {
           .item__image-desktop {
             @include desktop {
-              padding-right: calc(#{$gutter-width*.5});
-              padding-left: 66px;
               grid-area: right;
+              padding-right: calc(#{$gutter-width * .5});
+              padding-left: 66px;
             }
           }
 
           .item__content {
             @include desktop {
-              padding-right: calc(#{$timeline-dt-left-padding} + #{$timeline-dt-right-padding});
-              padding-left: calc(#{$gutter-width*.5});
               grid-area: left;
+              padding-right: calc(#{$timeline-dt-left-padding} + #{$timeline-dt-right-padding});
+              padding-left: calc(#{$gutter-width * .5});
 
               .timeline-slot-title {
                 &::after {
                   @include desktop {
                     right: unset;
-                    left: calc(100% + $timeline-dt-right-padding - $timeline-border/2);
+                    left: calc(100% + $timeline-dt-right-padding - $timeline-border / 2);
                   }
                 }
 
@@ -337,9 +335,9 @@ dl.timeline {
       .item {
         & > dd {
           @include desktop {
-            padding-right: calc(#{$timeline-m-left-padding} + #{$timeline-m-right-padding});
-            padding-left: calc(#{$gutter-width*.5});
             grid-area: right;
+            padding-right: calc(#{$timeline-m-left-padding} + #{$timeline-m-right-padding});
+            padding-left: calc(#{$gutter-width * .5});
           }
         }
 
@@ -348,9 +346,9 @@ dl.timeline {
         &.item--left {
           .item__image-desktop {
             @include desktop {
-              padding-right: 66px;
-              padding-left: calc(#{$gutter-width*.5});
               grid-area: left;
+              padding-right: 66px;
+              padding-left: calc(#{$gutter-width * .5});
 
               &::after {
                 display: none;
@@ -360,9 +358,9 @@ dl.timeline {
 
           .item__content {
             @include desktop {
-              padding-right: calc(#{$gutter-width*.5});
-              padding-left: calc(#{$timeline-dt-left-padding} + #{$timeline-dt-right-padding});
               grid-area: right;
+              padding-right: calc(#{$gutter-width * .5});
+              padding-left: calc(#{$timeline-dt-left-padding} + #{$timeline-dt-right-padding});
             }
           }
         }
@@ -371,17 +369,17 @@ dl.timeline {
         &.item--right {
           .item__image-desktop {
             @include desktop {
-              padding-right: calc(#{$gutter-width*.5});
-              padding-left: 66px;
               grid-area: right;
+              padding-right: calc(#{$gutter-width * .5});
+              padding-left: 66px;
             }
           }
 
           .item__content {
             @include desktop {
-              padding-right: calc(#{$timeline-dt-left-padding} + #{$timeline-dt-right-padding});
-              padding-left: calc(#{$gutter-width*.5});
               grid-area: left;
+              padding-right: calc(#{$timeline-dt-left-padding} + #{$timeline-dt-right-padding});
+              padding-left: calc(#{$gutter-width * .5});
 
               .timeline-slot-title {
                 button {
@@ -425,23 +423,23 @@ dl.timeline {
           padding-bottom: 0;
 
           &::after {
-            bottom: calc(100% - $gutter-width*.5);
+            bottom: calc(100% - $gutter-width * .5);
           }
 
           .timeline-slot-title {
             &::after {
               @include theme('border-color', 'color-tertiary-pastel', 'timeline-line-color');
 
+              content: '';
               position: absolute;
+              z-index: 0;
               top: 0;
               right: calc(100% + 24px);
               bottom: 50%;
               border-left: $timeline-border solid;
-              content: '';
-              z-index: 0;
 
               @include desktop {
-                right: calc(100% + $timeline-dt-right-padding - $timeline-border/2);
+                right: calc(100% + $timeline-dt-right-padding - $timeline-border / 2);
               }
             }
           }
@@ -450,10 +448,10 @@ dl.timeline {
         &:first-of-type {
           & > dd {
             &::after {
-              bottom: calc(100% - #{$timeline-dd-space-between-mobile + $gutter-width*.5});
+              bottom: calc(100% - #{$timeline-dd-space-between-mobile + $gutter-width * .5});
 
               @include desktop {
-                bottom: calc(100% - #{$timeline-dd-space-between + $gutter-width*.5});
+                bottom: calc(100% - #{$timeline-dd-space-between + $gutter-width * .5});
               }
             }
           }
@@ -493,8 +491,10 @@ dl.roadmap {
       @include theme('background-color', 'color-secondary', 'timeline-dt-bg-color');
       @include bold-text;
 
+      content: counter(item);
       display: flex;
       position: absolute;
+      z-index: 2;
       top: 30px;
       left: 0;
       align-items: center;
@@ -504,10 +504,8 @@ dl.roadmap {
       border-radius: 50%;
       font-size: 1.2rem;
       line-height: 130%;
-      content: counter(item);
-      z-index: 2;
-      aspect-ratio: 1 / 1;
       counter-increment: item;
+      aspect-ratio: 1 / 1;
 
       @include desktop {
         top: 50px;
@@ -521,13 +519,13 @@ dl.roadmap {
     &::after {
       @include theme('background-color', 'color-tertiary-pastel', 'timeline-line-color');
 
+      content: '';
       position: absolute;
+      z-index: 1;
       top: 49px;
       left: 22px;
       width: 6px;
       height: calc(100% - 49px);
-      content: '';
-      z-index: 1;
 
       @include desktop {
         top: 69px;

package/build/styleguide/sass/61-layouts/detail-layout/_detail-layout.scss

@@ -2,6 +2,8 @@
 @use '../../00-mixins/mixins' as *;
 @use '../../11-base/grid/flexbox-grid/mixins/grid-mixins' as *;
 
+/* stylelint-disable no-descending-specificity */
+
 .detail-layout {
   @extend %content-container;
 
@@ -67,6 +69,7 @@
       & + .partner-block,
       & + p {
         @include col(12);
+
         margin-top: -150px;
 
         @include tablet {
@@ -77,10 +80,10 @@
       + .partner-block,
       + p {
         position: relative;
+        z-index: 1;
         max-width: 100%;
         padding: 20px;
         background-color: coloring('white');
-        z-index: 1;
 
         @include tablet {
           padding: 60px;
@@ -233,6 +236,7 @@ aside.bottom {
 
     @include desktop {
       @include col(12);
+
       width: 100%;
 
       // Related teasers box should be wider.
@@ -262,8 +266,6 @@ aside.bottom {
       @include col-offset(2);
     }
 
-    & {
-      padding: 0;
-    }
+    padding: 0;
   }
 }

package/build/styleguide/sass/61-layouts/overview-layout/_overview-layout.scss

@@ -9,7 +9,7 @@
   header.header nav.breadcrumb .content-container {
     &::after,
     &::before {
-      width: calc(50% + #{$gutter-width} +  1px);
+      width: calc(50% + #{$gutter-width} + 1px);
 
       @include desktop {
         width: calc(50% + 1px);
@@ -20,6 +20,7 @@
 
 .overview-layout {
   @extend %content-container;
+
   margin-bottom: 80px;
 
   > .content-header-container {
@@ -42,8 +43,8 @@
         @include col(12);
 
         position: relative;
-        margin-top: -150px;
         z-index: 1;
+        margin-top: -150px;
 
         @include tablet {
           margin-top: -120px;

package/build/styleguide/vendor/baguettebox/README.md

@@ -2,11 +2,8 @@
 
 [![GitHub Release](https://img.shields.io/github/release/feimosi/baguetteBox.js.svg)](https://github.com/feimosi/baguetteBox.js/releases)
 [![MIT License](https://img.shields.io/npm/l/baguettebox.js.svg)](https://github.com/feimosi/baguetteBox.js/blob/dev/LICENSE)
-[![dependency Status](https://img.shields.io/badge/dependencies-none-blue.svg)](https://david-dm.org/feimosi/baguetteBox.js)
-[![devDependency Status](https://img.shields.io/david/dev/feimosi/baguetteBox.js.svg)](https://david-dm.org/feimosi/baguetteBox.js?type=dev)
 [![npm](https://img.shields.io/npm/dm/baguettebox.js.svg)](https://www.npmjs.com/package/baguettebox.js)
 [![Build Status](https://travis-ci.org/feimosi/baguetteBox.js.svg?branch=master)](https://travis-ci.org/feimosi/baguetteBox.js)
-
 [![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://paypal.me/feimosi)
 [![Twitter](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Check%20out%20baguetteBox.js%20-%20simple%20and%20easy%20to%20use%20lightbox%20script%20written%20in%20pure%20JavaScript%0Ahttps%3A%2F%2Fgithub.com%2Ffeimosi%2FbaguetteBox.js)
 [![Twitter Follow](https://img.shields.io/twitter/follow/feimosi.svg?style=social&label=Follow%20the%20author)](https://twitter.com/feimosi)
@@ -91,6 +88,23 @@ bower install baguettebox.js --save
 <script src="js/baguetteBox.min.js" async></script>
   ```
 
+### Composer
+Add the following to your `composer.json` file (updating the version as required) and then run `composer install` or `composer update`:
+
+```json
+{
+    "repositories": [
+        {
+            "type": "vcs",
+            "url": "https://github.com/feimosi/baguetteBox.js"
+        }
+    ],
+    "require": {
+        "feimosi/baguettebox.js": "dev-main"
+    }
+}
+```
+
 ## Importing
 
 ### Traditional approach

package/build/styleguide/vendor/baguettebox/dist/baguetteBox.css

@@ -1,7 +1,7 @@
 /*!
  * baguetteBox.js
  * @author  feimosi
- * @version 1.12.0
+ * @version 1.13.0
  * @url https://github.com/feimosi/baguetteBox.js
  */
 #baguetteBox-overlay {

package/build/styleguide/vendor/baguettebox/dist/baguetteBox.js

@@ -1,7 +1,7 @@
 /*!
  * baguetteBox.js
  * @author  feimosi
- * @version 1.12.0
+ * @version 1.13.0
  * @url https://github.com/feimosi/baguetteBox.js
  */
 
@@ -68,7 +68,7 @@
     // If set to true ignore touch events because animation was already fired
     var touchFlag = false;
     // Regex pattern to match image files
-    var regex = /.+\.(gif|jpe?g|png|webp)/i;
+    var regex = /.+\.(gif|jpe?g|png|webp|avif)/i;
     // Object of all used galleries
     var data = {};
     // Array containing temporary images DOM elements
@@ -686,7 +686,10 @@
     }
 
     function updateOffset() {
-        var offset = -currentIndex * 100 + '%';
+        var isRtl = document.querySelectorAll('html')[0].getAttribute('dir') === 'rtl';
+        var percentage = isRtl ? -100 : 100;
+        var offset = -currentIndex * percentage + '%';
+
         if (options.animation === 'fadeIn') {
             slider.style.opacity = 0;
             setTimeout(function() {

package/build/styleguide/vendor/baguettebox/dist/baguetteBox.min.css

@@ -1,6 +1,6 @@
 /*!
  * baguetteBox.js
  * @author  feimosi
- * @version 1.12.0
+ * @version 1.13.0
  * @url https://github.com/feimosi/baguetteBox.js
  */#baguetteBox-overlay{display:none;opacity:0;position:fixed;overflow:hidden;top:0;left:0;width:100%;height:100%;z-index:1000000;background-color:#222;background-color:rgba(0,0,0,.8);-webkit-transition:opacity .5s ease;transition:opacity .5s ease}#baguetteBox-overlay.visible{opacity:1}#baguetteBox-overlay .full-image{display:inline-block;position:relative;width:100%;height:100%;text-align:center}#baguetteBox-overlay .full-image figure{display:inline;margin:0;height:100%}#baguetteBox-overlay .full-image img{display:inline-block;width:auto;height:auto;max-height:100%;max-width:100%;vertical-align:middle;-webkit-box-shadow:0 0 8px rgba(0,0,0,.6);-moz-box-shadow:0 0 8px rgba(0,0,0,.6);box-shadow:0 0 8px rgba(0,0,0,.6)}#baguetteBox-overlay .full-image figcaption{display:block;position:absolute;bottom:0;width:100%;text-align:center;line-height:1.8;white-space:normal;color:#ccc;background-color:#000;background-color:rgba(0,0,0,.6);font-family:sans-serif}#baguetteBox-overlay .full-image:before{content:"";display:inline-block;height:50%;width:1px;margin-right:-1px}#baguetteBox-slider{position:absolute;left:0;top:0;height:100%;width:100%;white-space:nowrap;-webkit-transition:left .4s ease,-webkit-transform .4s ease;transition:left .4s ease,-webkit-transform .4s ease;transition:left .4s ease,transform .4s ease;transition:left .4s ease,transform .4s ease,-webkit-transform .4s ease,-moz-transform .4s ease}#baguetteBox-slider.bounce-from-right{-webkit-animation:bounceFromRight .4s ease-out;animation:bounceFromRight .4s ease-out}#baguetteBox-slider.bounce-from-left{-webkit-animation:bounceFromLeft .4s ease-out;animation:bounceFromLeft .4s ease-out}@-webkit-keyframes bounceFromRight{0%,100%{margin-left:0}50%{margin-left:-30px}}@keyframes bounceFromRight{0%,100%{margin-left:0}50%{margin-left:-30px}}@-webkit-keyframes bounceFromLeft{0%,100%{margin-left:0}50%{margin-left:30px}}@keyframes bounceFromLeft{0%,100%{margin-left:0}50%{margin-left:30px}}.baguetteBox-button#next-button,.baguetteBox-button#previous-button{top:50%;top:calc(50% - 30px);width:44px;height:60px}.baguetteBox-button{position:absolute;cursor:pointer;outline:0;padding:0;margin:0;border:0;-moz-border-radius:15%;border-radius:15%;background-color:#323232;background-color:rgba(50,50,50,.5);color:#ddd;font:1.6em sans-serif;-webkit-transition:background-color .4s ease;transition:background-color .4s ease}.baguetteBox-button:focus,.baguetteBox-button:hover{background-color:rgba(50,50,50,.9)}.baguetteBox-button#next-button{right:2%}.baguetteBox-button#previous-button{left:2%}.baguetteBox-button#close-button{top:20px;right:2%;right:calc(2% + 6px);width:30px;height:30px}.baguetteBox-button svg{position:absolute;left:0;top:0}.baguetteBox-spinner{width:40px;height:40px;display:inline-block;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-20px}.baguetteBox-double-bounce1,.baguetteBox-double-bounce2{width:100%;height:100%;-moz-border-radius:50%;border-radius:50%;background-color:#fff;opacity:.6;position:absolute;top:0;left:0;-webkit-animation:bounce 2s infinite ease-in-out;animation:bounce 2s infinite ease-in-out}.baguetteBox-double-bounce2{-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes bounce{0%,100%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes bounce{0%,100%{-webkit-transform:scale(0);-moz-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}}