gent_styleguide 6.0.16 → 7.0.0

package/build/styleguide/sass/31-molecules/teaser/_teaser.scss

@@ -1,3 +1,7 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+@use '../../11-base/fonts/icons' as *;
+
 //
 // Basic teaser theming.
 //
@@ -13,7 +17,9 @@
     span {
       @include theme('background-color', 'color-secondary');
 
-      padding: 2.5px 10px;
+      & {
+        padding: 2.5px 10px;
+      }
     }
   }
 
@@ -27,17 +33,22 @@
   .date {
     @include small-text();
     @include theme('color', 'color-zero', 'help-text-color');
-    position: relative;
-    margin: 10px 0;
-    z-index: 3;
+
+    & {
+      position: relative;
+      margin: 10px 0;
+      z-index: 3;
+    }
 
     span {
       @include icon('calendar');
 
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      line-height: 1;
+      & {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        line-height: 1;
+      }
 
       &::before {
         position: relative;
@@ -77,15 +88,17 @@
     @include reset-link-background;
     @include element-states(transparent, transparent, background-color);
 
-    position: absolute;
-    top: -20px;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    text-indent: 200%;
-    white-space: nowrap;
-    overflow: hidden;
-    z-index: z('teaser', 'overlay-link');
+    & {
+      position: absolute;
+      top: -20px;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      text-indent: 200%;
+      white-space: nowrap;
+      overflow: hidden;
+      z-index: z('teaser', 'overlay-link');
+    }
   }
 
   .teaser-content {
@@ -193,7 +206,10 @@
   &.teaser--background {
     .content__second {
       @include theme('background-color', 'color-none');
-      padding: 0 20px 20px;
+
+      & {
+        padding: 0 20px 20px;
+      }
     }
 
     &.no-image,
@@ -243,9 +259,11 @@
         span {
           @include theme('background-color', 'color-none', 'heading-with-light-bg-background-color');
 
-          padding: 5px 10px;
-          line-height: 1.2;
-          box-decoration-break: clone;
+          & {
+            padding: 5px 10px;
+            line-height: 1.2;
+            box-decoration-break: clone;
+          }
         }
 
         &::before {
@@ -256,9 +274,11 @@
       .read-more {
         @include read-more-icon-link();
 
-        position: absolute;
-        right: 0;
-        bottom: 0;
+        & {
+          position: absolute;
+          right: 0;
+          bottom: 0;
+        }
       }
     }
   }
@@ -289,8 +309,11 @@
   &.teaser--simple {
     .content__second {
       @include theme('background-color', 'color-none');
-      position: static;
-      padding: 20px 60px 20px 20px;
+
+      & {
+        position: static;
+        padding: 20px 60px 20px 20px;
+      }
 
       @include phablet {
         padding: 30px 60px 30px 30px;
@@ -314,7 +337,8 @@
         }
       }
 
-      p {
+      p,
+      .opening-hours-accordion {
         display: none;
 
         @include tablet {
@@ -334,9 +358,11 @@
       .read-more {
         @include read-more-icon-link();
 
-        position: absolute;
-        right: 0;
-        bottom: 0;
+        & {
+          position: absolute;
+          right: 0;
+          bottom: 0;
+        }
       }
     }
 
@@ -354,9 +380,11 @@
   &.teaser--wide {
     @include theme('border-color', 'color-primary', 'teaser-wide-border-color');
 
-    margin: 0 0 40px;
-    padding: 0 0 30px;
-    border-bottom: 1px solid color('blue');
+    & {
+      margin: 0 0 40px;
+      padding: 0 0 30px;
+      border-bottom: 1px solid coloring('blue');
+    }
 
     h3 {
       margin: 0 0 20px;
@@ -376,7 +404,9 @@
       @include small-text();
       @include theme('color', 'help-text-color', 'teaser-location-color');
 
-      margin: 0 0 10px;
+      & {
+        margin: 0 0 10px;
+      }
     }
 
     .location {
@@ -420,9 +450,12 @@
       padding: 0;
 
       .dash-separated-list {
-        @include theme('color', 'default-text-color', 'help-text-color');
         @include medium-text();
-        margin: 10px 0;
+        @include theme('color', 'default-text-color', 'help-text-color');
+
+        & {
+          margin: 10px 0;
+        }
 
         li {
           margin-bottom: 0;

package/build/styleguide/sass/31-molecules/text-to-speech-button/_text-to-speech-button.scss

@@ -1,3 +1,6 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+
 .readspeaker-button {
   @include theme('color', 'color-none', 'readspeaker-color');
   @include theme('background-color', 'color-zero', 'readspeaker-background-color');

package/build/styleguide/sass/31-molecules/video/_video.scss

@@ -1,3 +1,6 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+
 .video {
   @include clearfix;
   width: 100%;

package/build/styleguide/sass/41-organisms/_organisms.scss

@@ -0,0 +1,19 @@
+@use 'banner/banner';
+@use 'collection/collection';
+@use 'content-header/content-header';
+@use 'documents/documents';
+@use 'filter/filter';
+@use 'footer/footer';
+@use 'form/form';
+@use 'header/header';
+@use 'image-collections/image-collections';
+@use 'image-gallery/image-gallery';
+@use 'image-wall/image-wall';
+@use 'multistep-form/multistep-form';
+@use 'opening-hours-accordion/opening-hours-accordion';
+@use 'programme/programme';
+@use 'resolutions/resolutions-detail';
+@use 'resolutions/resolutions-list';
+@use 'summary/summary';
+@use 'theme-footer/theme-footer';
+@use 'timeline/timeline';

package/build/styleguide/sass/41-organisms/banner/_banner.scss

@@ -1,3 +1,6 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+
 .banner-image {
   position: relative;
   max-width: calc($bp-container + $container-padding*2);

package/build/styleguide/sass/41-organisms/collection/_collection.scss

@@ -1,3 +1,7 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+@use '../../11-base/grid/flexbox-grid/mixins/grid-mixins' as *;
+
 // Dynamic system with different gutters and items spanning multiple columns.
 // Calculation at the bottom.
 

package/build/styleguide/sass/41-organisms/content-header/_content-header.scss

@@ -1,3 +1,6 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+
 .content-header-container {
   @include theme('background-color', 'color-primary', 'content-header-container-background-primary');
 
@@ -73,7 +76,7 @@
 
       display: inline;
       padding: 5px 15px;
-      color: color('white');
+      color: coloring('white');
       line-height: 130%;
       box-decoration-break: clone;
     }

package/build/styleguide/sass/41-organisms/documents/_documents.scss

@@ -1,7 +1,11 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+@use '../../21-atoms/heading/heading' as *;
+
 .documents,
 .document-box { // Deprecated
   li {
-    @include theme('border-color', 'color-primary--lighten-4', 'more-info-block-border-color');
+    @include theme('border-color', 'color-primary-light', 'more-info-block-border-color');
 
     width: 100%;
     margin-top: 1rem;

package/build/styleguide/sass/41-organisms/filter/_filter.scss

@@ -1,3 +1,8 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+@use '../../21-atoms/heading/heading' as *;
+@use '../../21-atoms/list/list' as *;
+
 .filter {
   .result-section {
     .filter-page-label {
@@ -144,7 +149,9 @@
       @extend %h4;
       @include theme('color', 'color-primary', 'heading-2-color');
 
-      margin-bottom: 16px;
+      & {
+        margin-bottom: 16px;
+      }
     }
 
     fieldset {

package/build/styleguide/sass/41-organisms/footer/_footer.scss

@@ -1,3 +1,10 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+@use '../../11-base/grid/flexbox-grid/mixins/grid-mixins' as *;
+
+@use 'css/gentinfo_island';
+@use 'css/social-list';
+
 .footer {
   margin: 60px -20px 0;
 
@@ -41,8 +48,11 @@
     .footer--column {
       @include theme('background-color', 'color-tertiary-light', 'footer-background-color');
       @include col(12);
-      flex: 0 0 auto;
-      padding: 20px 20px 60px;
+
+      & {
+        flex: 0 0 auto;
+        padding: 20px 20px 60px;
+      }
 
       // Gentinfo column.
       &:first-of-type {
@@ -64,9 +74,12 @@
         // Gentinfo column.
         &:first-of-type {
           @include col(12);
-          margin-top: 0;
-          padding-top: 0;
-          background-color: transparent;
+
+          & {
+            margin-top: 0;
+            padding-top: 0;
+            background-color: transparent;
+          }
         }
       }
 
@@ -82,9 +95,12 @@
 
       @include desktop {
         @include col(3);
-        margin-top: 58px;
-        margin-bottom: 0;
-        padding-bottom: 20px;
+
+        & {
+          margin-top: 58px;
+          margin-bottom: 0;
+          padding-bottom: 20px;
+        }
 
         &:nth-of-type(2),
         &:nth-of-type(3) {
@@ -95,8 +111,10 @@
         &:first-of-type {
           @include col(6);
 
-          order: 1;
-          margin-top: 0;
+          & {
+            order: 1;
+            margin-top: 0;
+          }
         }
       }
 

package/build/styleguide/sass/41-organisms/footer/css/_gentinfo_island.scss

@@ -1,11 +1,16 @@
+@use '../../../00-settings/settings' as *;
+@use '../../../00-mixins/mixins' as *;
+
 .gentinfo-block {
   @include accolade('bottom', 'left', 100px, 36px, 'color-none', 'color-primary');
   @include theme('background-color', 'color-primary', 'gentinfo-block-background');
 
-  position: relative;
-  padding: 1.5rem;
-  font-size: .8rem;
-  line-height: 1.75;
+  & {
+    position: relative;
+    padding: 1.5rem;
+    font-size: .8rem;
+    line-height: 1.75;
+  }
 
   @include desktop {
     margin: -8.4rem 0 0;

package/build/styleguide/sass/41-organisms/footer/css/_social-list.scss

@@ -1,3 +1,6 @@
+@use '../../../00-settings/settings' as *;
+@use '../../../00-mixins/mixins' as *;
+
 .social-list {
   $social-media-link-width: 1.8rem;
 
@@ -22,13 +25,15 @@
         @include theme('background-color', 'color-quaternary--lighten-2', 'button-secondary-background');
         @include theme('color', 'color-zero', 'button-secondary-color');
 
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: $social-media-link-width;
-        height: $social-media-link-width;
-        margin-right: 0;
-        text-decoration: none;
+        & {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: $social-media-link-width;
+          height: $social-media-link-width;
+          margin-right: 0;
+          text-decoration: none;
+        }
 
         &::after {
           display: none;

package/build/styleguide/sass/41-organisms/header/_header.scss

@@ -1,3 +1,7 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+@use '../../11-base/base' as *;
+
 @use "sass:math";
 
 header.header {
@@ -108,7 +112,7 @@ header.header {
       max-width: calc(16px + 32px);
       height: 44px;
       border-bottom: 0;
-      background: svg-as-background('search', color('white'), 24, 24) no-repeat left 10px center;
+      background: svg-as-background('search', coloring('white'), 24, 24) no-repeat left 10px center;
       text-indent: -9999px;
       overflow: hidden;
 
@@ -140,7 +144,9 @@ header.header {
         margin-left: 0;
       }
 
-      line-height: 1;
+      & {
+        line-height: 1;
+      }
     }
   }
 
@@ -152,8 +158,10 @@ header.header {
       display: none;
     }
 
-    margin: 16px 0 8px;
-    font-size: .9rem;
+    & {
+      margin: 16px 0 8px;
+      font-size: .9rem;
+    }
   }
 
   &--menu > .content-container {

package/build/styleguide/sass/41-organisms/image-collections/_image-collections.scss

@@ -1,3 +1,6 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+
 // sass-lint:disable no-important
 ul.image-wall,
 ul.image-gallery {
@@ -9,11 +12,14 @@ ul.image-gallery {
 
   a.gallery-link {
     @include reset-link-background;
-    display: block;
-    margin: 0;
-    padding: 0;
-    font-weight: normal;
-    text-decoration: none;
+
+    & {
+      display: block;
+      margin: 0;
+      padding: 0;
+      font-weight: normal;
+      text-decoration: none;
+    }
 
     &::after {
       content: none !important;

package/build/styleguide/sass/41-organisms/image-gallery/_image-gallery.scss

@@ -1,3 +1,6 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+
 // sass-lint:disable no-important
 .image-gallery {
   @include clearfix();
@@ -35,17 +38,19 @@
   }
 
   .show-more__content {
-    @include theme('color', 'color-zero', 'image-gallery-show-more-color');
-    @include theme('background-color', 'color-tertiary--lighten-3', 'image-gallery-show-more-background-color');
     @include medium-text;
     @include semi-bold-text;
-
-    position: absolute;
-    top: 50%;
-    padding: .4rem .75rem;
-    transform: translate(0, -50%);
-    line-height: 1;
-    text-align: center;
+    @include theme('color', 'color-zero', 'image-gallery-show-more-color');
+    @include theme('background-color', 'color-tertiary-pastel', 'image-gallery-show-more-background-color');
+
+    & {
+      position: absolute;
+      top: 50%;
+      padding: .4rem .75rem;
+      transform: translate(0, -50%);
+      line-height: 1;
+      text-align: center;
+    }
 
     .show-more__total {
       display: none;
@@ -60,12 +65,14 @@
   a.gallery-link {
     @include reset-link-background;
 
-    display: block;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    font-weight: normal;
-    text-decoration: none;
+    & {
+      display: block;
+      width: 100%;
+      margin: 0;
+      padding: 0;
+      font-weight: normal;
+      text-decoration: none;
+    }
 
     &::after {
       content: none !important;
@@ -164,8 +171,10 @@
           margin: calc(#{$gutter-width} / 2) 0 0;
         }
 
-        width: 100%;
-        margin: 1vw 0 $gutter-width;
+        & {
+          width: 100%;
+          margin: 1vw 0 $gutter-width;
+        }
       }
     }
 

package/build/styleguide/sass/41-organisms/image-wall/_image-wall.scss

@@ -1,4 +1,10 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+@use '../../11-base/grid/flexbox-grid/mixins/grid-mixins' as *;
+
 .image-wall {
+  width: 100%;
+
   @include phablet {
     display: flex;
     flex: 1 1 100%;
@@ -26,6 +32,4 @@
       margin: 0;
     }
   }
-
-  width: 100%;
 }

package/build/styleguide/sass/41-organisms/multistep-form/_multistep-form.scss

@@ -1,3 +1,7 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+@use '../../11-base/grid/flexbox-grid/mixins/grid-mixins' as *;
+
 $grid-gutter-width: $gutter-width;
 
 .form--multistep {

package/build/styleguide/sass/41-organisms/programme/_programme.scss

@@ -1,6 +1,12 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+
 .programme-wrapper {
   @include theme('background-color', 'color-tertiary-light');
-  padding: 24px;
+
+  & {
+    padding: 24px;
+  }
 
   @include desktop {
     padding: 120px 135px;

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

@@ -1,3 +1,7 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+@use '../../11-base/fonts/icons' as *;
+
 // sass-lint:disable placeholder-in-extend
 .resolutions-detail {
   display: grid;
@@ -89,17 +93,21 @@
     }
 
     &--true {
-      @extend .icon-checkmark-circle;
+      @include icon(checkmark-circle);
 
-      background-color: color('green', -4);
-      color: color('green', +2);
+      & {
+        background-color: coloring('green', -4);
+        color: coloring('green', +2);
+      }
     }
 
     &--false {
-      @extend .icon-cross;
+      @include icon(cross);
 
-      background-color: color('red', -4);
-      color: color('red', +2);
+      & {
+        background-color: coloring('red', -4);
+        color: coloring('red', +2);
+      }
     }
   }
 }

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

@@ -1,3 +1,7 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+@use '../../21-atoms/list/list' as *;
+
 // sass-lint:disable no-important
 .resolutions-list {
   .highlight__inner {

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

@@ -1,6 +1,13 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+@use '../../21-atoms/button/button-styling' as *;
+
 .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;

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

@@ -1,3 +1,7 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/mixins' as *;
+@use '../../21-atoms/link/link' as *;
+
 .theme-footer {
   margin: 6rem -1rem;
   padding: 0;
@@ -38,8 +42,6 @@
       }
     }
 
-
-
     + .newsletter {
       padding: 40px 30px;