gent_styleguide 6.0.0-alpha4 → 6.0.0-alpha40

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

@@ -5,73 +5,55 @@
   position: relative;
   list-style: none;
 
-  &.teaser--inverted {
-    .teaser-content {
-      @include theme('background-color', 'color-secondary');
-    }
-
-    .content__first {
-      padding: 0 .8rem;
+  h3.bg-none {
+    position: relative;
+    margin: -13px 0 0;
+    z-index: 3;
 
-      .figure-wrapper {
-        width: calc(100% + 1.6rem);
-        margin-left: -.8rem;
-      }
-    }
+    span {
+      @include theme('background-color', 'color-secondary');
 
-    .content__second {
-      padding: 0 .8rem .8rem;
+      padding: 2.5px 10px;
     }
   }
 
-  &.teaser--underlined {
-    .teaser-content {
-      @include theme('border-color', 'color-primary--lighten-4', 'teaser-contact-border');
-
-      height: 100%;
-      padding-bottom: .7rem;
-      border-bottom: 2px solid;
-    }
-
-    // @TODO: Move to other layer.
-    .ol-popup & {
-      padding-bottom: 0;
-      border-bottom: 0;
-    }
-
-    .content__second {
-      display: flex;
-      flex-direction: column;
-      align-items: stretch;
+  .date {
+    @include small-text();
+    @include theme('color', 'color-zero', 'help-text-color');
+    position: relative;
+    margin: 10px 0;
+    z-index: 3;
 
+    span {
+      @include icon('calendar');
 
-      > *:last-child {
-        margin-bottom: 0;
+      &::before {
+        position: relative;
+        top: 6px;
+        font-size: 1.2rem;
       }
     }
+  }
 
-    .teaser-title-link {
-      margin-bottom: .8rem;
-      font-size: .8rem;
-      line-height: 1.2rem;
-    }
+  .tag-list-wrapper {
+    margin: 15px 0 -5px;
+  }
+
+  .teaser-links {
+    margin: 20px 0;
+    list-style-type: none;
 
-    .read-more {
-      margin-top: auto;
+    li {
+      @include medium-text();
     }
 
-    // @TODO: Move to other layer.
-    .grid-3 & {
-      .content__second {
-        flex-grow: 1;
-      }
+    a {
+      @include normal-text();
     }
   }
 
-  figure {
-    figcaption {
-      display: none;
-    }
+  a.read-more {
+    @include bold-text();
   }
 
   a.teaser-overlay-link {
@@ -79,7 +61,7 @@
     @include element-states(transparent, transparent, background-color);
 
     position: absolute;
-    top: 0;
+    top: -20px;
     right: 0;
     bottom: 0;
     left: 0;
@@ -89,186 +71,277 @@
     z-index: z('teaser', 'overlay-link');
   }
 
-  a.read-more {
-    @include bold-text
-  }
-
   .teaser-content {
+    @include medium-text();
+
     display: flex;
     flex-direction: column;
+    height: 100%;
 
-    .teaser-links {
-      @extend %list-no-style;
-
-      margin-top: -$link-padding;
-      margin-bottom: .4rem;
-
-      a {
-        font-weight: normal;
-      }
+    a {
+      position: relative;
+      z-index: z('teaser', 'content-link');
     }
 
     .content__first {
       position: relative;
       order: 1;
-      overflow: hidden;
+
+      .tags-label-wrapper {
+        position: absolute;
+        top: -15px;
+        left: 20px;
+        margin: 0;
+        z-index: 3;
+
+        .label ~ .tag-list-wrapper {
+          margin-left: 5px;
+        }
+
+        .tag-list-wrapper {
+          display: inline-block;
+          position: relative;
+          top: -4px;
+          margin: 0;
+        }
+      }
     }
 
     .content__second {
+      position: relative;
       order: 2;
-    }
+      height: 100%;
+      padding: 0 20px 20px;
 
-    .figure-wrapper {
-      position: relative;
+      > i {
+        float: left;
+        line-height: 1;
+
+        &::before {
+          display: block;
+          font-size: 38px;
+
+          @include phablet {
+            margin-bottom: 20px;
+          }
+        }
+
+        @include phablet {
+          float: none;
+        }
+
+        + h3 {
+          margin-left: 53px;
+
+          @include phablet {
+            margin-left: 0;
+          }
+        }
+      }
+
+      p {
+        @include theme('color', 'default-text-color', 'help-text-color');
+        margin: 20px 0;
+        line-height: 1.4rem;
+      }
     }
+  }
 
+  &.no-image,
+  .teaser--no-images & {
     h3 {
-      margin-bottom: .4rem;
+      margin: 0;
     }
 
-    a {
-      position: relative;
-      z-index: z('teaser', 'content-link');
+    .content__second {
+      padding: 0;
     }
 
-    span.teaser-label {
-      @include theme('background-color', 'color-primary--lighten-5', 'teaser-label-background-color');
-      display: flex;
-      position: absolute;
-      top: .8rem;
-      left: .8rem;
-      align-items: center;
-      padding: 0 .5em;
-      border-radius: border-radius('radius-1');
-      line-height: 2;
-      z-index: z('teaser', 'label');
+    // Make sure the image is hidden. But it's better not to load it.
+    .figure-wrapper {
+      display: none;
+    }
+  }
 
-      i {
-        margin-right: .4rem;
-        font-size: 1.2rem;
-      }
+  &.teaser--background {
+    .content__second {
+      @include theme('background-color', 'color-none');
+      padding: 0 20px 20px;
     }
 
-    p {
-      margin-bottom: .4rem;
-      line-height: 1.7;
+    &.no-image,
+    .teaser--no-images & {
+      h3 {
+        margin: 0;
+      }
+
+      .content__second {
+        padding: 20px;
+      }
     }
+  }
 
-    div.event,
-    time.published {
-      display: inline-block;
-      margin: 0 0 .4rem;
-      line-height: 1.5;
+  &.teaser--square {
+    .content__first {
+      order: 2;
     }
 
-    div.event {
-      @include icon('calendar');
+    .content__second {
+      position: absolute;
+      bottom: 0;
+      order: 1;
+      width: 100%;
+      height: auto;
+      padding: 20px 100px 20px 20px;
 
-      display: flex;
-      align-items: flex-start;
+      h3 {
+        margin: 0;
 
-      &::before {
-        padding-right: .4rem;
-        font-size: 1.2rem;
-        line-height: 1;
+        span {
+          @include theme('background-color', 'color-none', 'heading-with-light-bg-background-color');
+        }
       }
-    }
 
-    time.published {
-      color: color('dark-gray', -1);
-      font-style: italic;
-      line-height: 2;
+      .date {
+        display: inline-block;
+        margin: -6px 0 0;
+
+        span {
+          @include theme('background-color', 'color-none', 'heading-with-light-bg-background-color');
+          padding: 5px 10px;
+          line-height: 1.2;
+          box-decoration-break: clone;
+        }
+
+        &::before {
+          @include theme('background-color', 'color-none', 'heading-with-light-bg-background-color');
+        }
+      }
+
+      .read-more {
+        @include read-more-icon-link();
+
+        position: absolute;
+        right: 0;
+        bottom: 0;
+      }
     }
   }
 
-  .content__first {
-    > * {
-      margin-bottom: .8rem;
+  &.teaser--square--double {
+    .figure-wrapper__mobile {
+      @include desktop {
+        display: none;
+      }
     }
-  }
-}
 
-//
-// Teaser wide variant.
-//
-.teaser.teaser--wide {
-  @include tablet {
-    dt,
-    dd {
-      display: inline;
+    .figure-wrapper__desktop {
+      display: none;
+
+      @include desktop {
+        display: block;
+      }
+    }
+
+    h3 {
+      @include desktop-and-below {
+        font-size: .9rem;
+        line-height: 1.15rem;
+      }
     }
   }
 
-  @include theme('border-color', 'color-primary--lighten-4', 'view-heading-2-border-color');
+  &.teaser--simple {
+    .content__second {
+      @include theme('background-color', 'color-none');
+      position: static;
+      padding: 20px 60px 20px 20px;
 
-  padding-top: $gutter-width;
-  padding-bottom: $gutter-width;
-  border-bottom: 2px solid;
+      @include phablet {
+        padding: 30px 60px 30px 30px;
+      }
 
-  &:first-of-type {
-    @include theme('border-color', 'color-primary--lighten-4', 'view-heading-2-border-color');
+      h3 {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        margin: 0;
 
-    margin-top: $gutter-width;
-    border-top: 2px solid;
-  }
+        @include phablet {
+          display: block;
+          height: auto;
+          margin: 0 15px 20px 0;
+        }
 
-  dl dd {
-    margin: 0;
-    padding-left: .5rem;
-  }
+        span {
+          padding: 0;
+          background-color: transparent;
+        }
+      }
 
-  .tag,
-  .icon-list {
-    margin-bottom: .4rem;
-  }
+      p {
+        display: none;
 
-  .teaser-content {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
+        @include tablet {
+          display: block;
+        }
+      }
 
-    @include tablet {
-      flex-wrap: nowrap;
-    }
-  }
+      .teaser-links {
+        display: none;
+        margin: 0;
 
-  .accolade-inverse.bottom-left {
-    display:  block;
+        @include tablet {
+          display: block;
+        }
+      }
 
-    @include phablet {
-      display: none;
-    }
-  }
+      .read-more {
+        @include read-more-icon-link();
 
-  .accolade-inverse.right-top {
-    display:  none;
+        position: absolute;
+        right: 22px;
+        bottom: 0;
+      }
+    }
 
-    @include phablet {
-      display: block;
+    a.teaser-overlay-link {
+      top: 0;
     }
   }
 
-  .content__first,
-  .content__second {
-    flex-basis: 100%;
+  &.teaser--inverted {
+    .content__second {
+      @include theme('background-color', 'color-tertiary-light');
+    }
   }
 
-  .content__first {
-    order: 1;
-    margin-bottom: gutter();
+  &.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');
 
-    @include phablet {
-      flex-basis: span(5 of 18);
-      margin-right: gutter();
-      margin-bottom: 0;
+    h3 {
+      margin: 0 0 20px;
+
+      &.bg-none span {
+        padding-right: 0;
+        padding-left: 0;
+      }
     }
-  }
 
-  .content__second {
-    order: 2;
+    .tag-list-wrapper {
+      margin: 20px 0;
+    }
 
-    @include phablet {
-      flex-basis: span(13 of 18);
+    .icon-list,
+    .location {
+      @include small-text();
+      @include theme('color', 'help-text-color', 'teaser-location-color');
+
+      margin: 0 0 10px;
     }
 
     .location {
@@ -281,22 +354,54 @@
       }
     }
 
-    .links {
-      margin-bottom: .4rem;
+    .teaser-content {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
 
-      li {
-        margin-right: 0;
+      @include tablet {
+        flex-wrap: nowrap;
+      }
+    }
 
-        &::after {
-          margin-right: .4rem;
-          margin-left: .4rem;
-          content: '—';
-        }
+    .content__first,
+    .content__second {
+      flex-basis: 100%;
+    }
 
-        &:last-of-type::after {
-          content: '';
+    .content__first {
+      order: 1;
+      margin-bottom: gutter();
+
+      @include tablet {
+        flex: 0 0 230px;
+        margin-right: 30px;
+        margin-bottom: 0;
+      }
+    }
+
+    .content__second {
+      order: 2;
+      padding: 0;
+
+      .dash-separated-list {
+        @include theme('color', 'default-text-color', 'help-text-color');
+        @include medium-text();
+        margin: 10px 0;
+
+        li {
+          margin-bottom: 0;
         }
       }
+
+      p {
+        @include medium-text();
+        margin-top: 10px;
+      }
+
+      .read-more {
+        margin-top: 20px;
+      }
     }
   }
 }

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

@@ -1,37 +1,33 @@
 .readspeaker-button {
-  @include theme('color', 'color-tertiary--lighten-1', 'readspeaker-color');
-  display: inline-block;
+  @include theme('color', 'color-none', 'readspeaker-color');
+  @include theme('background-color', 'color-zero', 'readspeaker-background-color');
+  @include medium-text;
+  @include bold-text;
+
+  display: block;
   min-height: 1.8rem;
-  padding: 0;
+  margin-bottom: 1.5rem;
+  padding: 0 .75rem 0 .4rem;
+  transition: background-color .2s ease-in-out, color .2s ease-in-out;
   border: 0;
-  background-color: transparent;
   cursor: pointer;
 
   &:focus,
   &:hover {
-    i {
-      @include theme('background-color', 'color-primary--lighten-5', 'button-secondary-hover-background');
-      @include theme('color', 'color-primary', 'button-secondary-hover-color');
-      @include theme('border-color', 'color-primary--lighten-2', 'button-secondary-hover-border-color');
-    }
+    @include theme('background-color', 'color-primary--lighten-5', 'button-primary-hover-background');
   }
 
   i {
-    @include theme('color', 'color-primary', 'button-secondary-color');
-    @include theme('border-color', 'color-primary--lighten-1', 'button-secondary-border-color');
+    @include theme('color', 'color-none', 'button-primary-color');
 
     display: inline-block;
     margin-right: .3rem;
     padding: .1em .3em;
-    transition: background-color .2s ease-in-out, color .2s ease-in-out;
-    border: 2px solid;
-    border-radius: border-radius('radius-1');
     font-size: .9rem;
     vertical-align: middle;
   }
 
   span {
-    font-size: .6rem;
     vertical-align: middle;
   }
 }

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

@@ -18,6 +18,9 @@
   a {
     margin-top: .4rem;
     margin-bottom: .4rem;
-    float: right;
   }
 }
+
+.audio-description {
+  text-align: right;
+}

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

@@ -0,0 +1,20 @@
+.banner-image {
+  .media {
+    position: relative;
+
+    img {
+      display: block;
+      width: 100%;
+    }
+  }
+
+  figcaption {
+    display: none;
+    max-width: $bp-max-content;
+    padding: 1px 10px;
+
+    @include tablet {
+      display: block;
+    }
+  }
+}