gent_styleguide 6.0.0-alpha2 → 6.0.0-alpha21

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

@@ -5,73 +5,57 @@
   position: relative;
   list-style: none;
 
-  &.teaser--inverted {
-    .teaser-content {
-      @include theme('background-color', 'color-secondary');
-    }
-
-    .content__first {
-      padding: 0 .8rem;
-
-      .figure-wrapper {
-        width: calc(100% + 1.6rem);
-        margin-left: -.8rem;
-      }
-    }
+  h4 {
+    position: relative;
+    margin: -13px 0 0;
+    z-index: 3;
 
-    .content__second {
-      padding: 0 .8rem .8rem;
+    span {
+      @include theme('background-color', 'color-secondary');
     }
   }
 
-  &.teaser--underlined {
-    .teaser-content {
-      @include theme('border-color', 'color-primary--lighten-4', 'teaser-contact-border');
-
-      height: 100%;
-      padding-bottom: .7rem;
-      border-bottom: 2px solid;
-    }
+  .date {
+    @include icon('calendar');
+    @include small-text();
+    @include theme('color', 'color-zero', 'help-text-color');
+    position: relative;
+    margin: 10px 0;
+    z-index: 3;
 
-    // @TODO: Move to other layer.
-    .ol-popup & {
-      padding-bottom: 0;
-      border-bottom: 0;
+    &::before {
+      position: relative;
+      top: 6px;
+      font-size: 1.2rem;
     }
+  }
 
-    .content__second {
-      display: flex;
-      flex-direction: column;
-      align-items: stretch;
-
+  .label {
+    position: absolute;
+    top: -15px;
+    left: 20px;
+    z-index: 3;
+  }
 
-      > *:last-child {
-        margin-bottom: 0;
-      }
-    }
+  .tag-list-wrapper {
+    margin: 15px 0 -5px;
+  }
 
-    .teaser-title-link {
-      margin-bottom: .8rem;
-      font-size: .8rem;
-      line-height: 1.2rem;
-    }
+  .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 +63,7 @@
     @include element-states(transparent, transparent, background-color);
 
     position: absolute;
-    top: 0;
+    top: -20px;
     right: 0;
     bottom: 0;
     left: 0;
@@ -89,214 +73,197 @@
     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;
+
+      .tag-list-wrapper {
+        position: absolute;
+        top: -19px;
+        left: 20px;
+        margin: 0;
+        z-index: 3;
+      }
     }
 
     .content__second {
+      position: relative;
       order: 2;
-    }
+      height: 100%;
+      padding: 0 20px 20px;
 
-    .figure-wrapper {
-      position: relative;
-    }
+      > i {
+        float: left;
+        line-height: 1;
 
-    h3 {
-      margin-bottom: .4rem;
-    }
+        &::before {
+          font-size: 38px;
+        }
 
-    a {
-      position: relative;
-      z-index: z('teaser', 'content-link');
-    }
+        @include phablet {
+          float: none;
+        }
 
-    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');
-
-      i {
-        margin-right: .4rem;
-        font-size: 1.2rem;
+        + h4 {
+          margin-left: 53px;
+
+          @include phablet {
+            margin-left: 0;
+          }
+        }
       }
-    }
 
-    p {
-      margin-bottom: .4rem;
-      line-height: 1.7;
+      p {
+        @include theme('color', 'default-text-color', 'help-text-color');
+        margin: 20px 0;
+        line-height: 1.4rem;
+      }
     }
+  }
 
-    div.event,
-    time.published {
-      display: inline-block;
-      margin: 0 0 .4rem;
-      line-height: 1.5;
+  &.no-image,
+  .teaser--no-images & {
+    h4 {
+      margin: 0;
     }
 
-    div.event {
-      @include icon('calendar');
-
-      display: flex;
-      align-items: flex-start;
-
-      &::before {
-        padding-right: .4rem;
-        font-size: 1.2rem;
-        line-height: 1;
-      }
+    .content__second {
+      padding: 0;
     }
 
-    time.published {
-      color: color('dark-gray', -1);
-      font-style: italic;
-      line-height: 2;
+    // Make sure the image is hidden. But it's better not to load it.
+    .figure-wrapper {
+      display: none;
     }
   }
 
-  .content__first {
-    > * {
-      margin-bottom: .8rem;
+  &.teaser--background {
+    .content__second {
+      @include theme('background-color', 'color-none');
+      padding: 0 20px 20px;
     }
-  }
-}
 
-//
-// Teaser wide variant.
-//
-.teaser.teaser--wide {
-  @include tablet {
-    dt,
-    dd {
-      display: inline;
+    &.no-image,
+    .teaser--no-images & {
+      h4 {
+        margin: 0;
+      }
+
+      .content__second {
+        padding: 20px;
+      }
     }
   }
 
-  @include theme('border-color', 'color-primary--lighten-4', 'view-heading-2-border-color');
+  &.teaser--square {
+    .content__first {
+      order: 2;
+    }
 
-  padding-top: $gutter-width;
-  padding-bottom: $gutter-width;
-  border-bottom: 2px solid;
+    .content__second {
+      position: absolute;
+      bottom: 0;
+      order: 1;
+      width: 100%;
+      height: auto;
+      padding: 20px 50px 20px 20px;
 
-  &:first-of-type {
-    @include theme('border-color', 'color-primary--lighten-4', 'view-heading-2-border-color');
+      h4 {
+        margin: 0;
 
-    margin-top: $gutter-width;
-    border-top: 2px solid;
-  }
-
-  dl dd {
-    margin: 0;
-    padding-left: .5rem;
-  }
+        span {
+          @include theme('background-color', 'color-none', 'heading-with-light-bg-background-color');
+        }
+      }
 
-  .tag,
-  .icon-list {
-    margin-bottom: .4rem;
-  }
+      .date {
+        @include theme('background-color', 'color-none', 'heading-with-light-bg-background-color');
+        display: inline-block;
+        height: 1.8rem;
+        margin: 0;
+        padding: 0 10px;
+        line-height: 1;
+      }
 
-  .teaser-content {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
+      .read-more {
+        @include read-more-icon-link();
 
-    @include tablet {
-      flex-wrap: nowrap;
+        position: absolute;
+        right: 45px;
+        bottom: 0;
+      }
     }
   }
 
-  .accolade-inverse.bottom-left {
-    display:  block;
+  &.teaser--simple {
+    .content__second {
+      @include theme('background-color', 'color-none');
+      position: static;
+      padding: 20px;
 
-    @include phablet {
-      display: none;
-    }
-  }
+      @include phablet {
+        padding: 30px;
+      }
 
-  .accolade-inverse.right-top {
-    display:  none;
+      h4 {
+        margin: 0 25px 20px 0;
 
-    @include phablet {
-      display: block;
-    }
-  }
+        @include phablet {
+          margin: 0 15px 20px 0;
+        }
 
-  .content__first,
-  .content__second {
-    flex-basis: 100%;
-  }
+        span {
+          padding: 0;
+          background-color: transparent;
+        }
+      }
 
-  .content__first {
-    order: 1;
-    margin-bottom: gutter();
+      p {
+        display: none;
 
-    @include phablet {
-      flex-basis: span(5 of 18);
-      margin-right: gutter();
-      margin-bottom: 0;
-    }
-  }
+        @include tablet {
+          display: block;
+        }
+      }
 
-  .content__second {
-    order: 2;
+      .teaser-links {
+        display: none;
+        margin: 0;
 
-    @include phablet {
-      flex-basis: span(13 of 18);
-    }
+        @include tablet {
+          display: block;
+        }
+      }
 
-    .location {
-      @include bold-text;
+      .read-more {
+        @include read-more-icon-link();
 
-      i {
-        margin-right: .3rem;
-        font-size: 1.5em;
-        vertical-align: middle;
+        position: absolute;
+        right: 22px;
+        bottom: 0;
       }
     }
 
-    .links {
-      margin-bottom: .4rem;
-
-      li {
-        margin-right: 0;
-
-        &::after {
-          margin-right: .4rem;
-          margin-left: .4rem;
-          content: '—';
-        }
+    a.teaser-overlay-link {
+      top: 0;
+    }
+  }
 
-        &:last-of-type::after {
-          content: '';
-        }
-      }
+  &.teaser--inverted {
+    .content__second {
+      @include theme('background-color', 'color-tertiary-light');
     }
   }
 }

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/collection/_collection.scss

@@ -1,3 +1,8 @@
+// Teaser gutter differs from gallery gutter, we need to set up decent grid
+// system with different gutters and items spanning multiple columns.
+// @todo Phase out Susy grid and replace variable below.
+$grid-gutter-width: $gutter-width * 1.5;
+
 ul.grid-2,
 ul.grid-3,
 ul.grid-4,
@@ -6,19 +11,23 @@ ul.grid-5 {
 
   display: flex;
   flex-wrap: wrap;
-  width: calc(100% + #{gutter()});
-  margin: 0 -#{gutter()*.5} -1.2rem;
+  width: calc(100% + #{$grid-gutter-width});
+  margin: 0 -#{$grid-gutter-width * .5} -24px;
 
   > li {
     flex-basis: 100%;
     flex-shrink: 1;
-    margin-bottom: 1.2rem;
-    padding: 0 gutter()*.5;
+    margin-bottom: $gutter-width;
+    padding: 0 $grid-gutter-width * .5;
+
+    @include phablet {
+      margin-bottom: $grid-gutter-width;
+    }
   }
 }
 
 .grid__show-more {
-  margin: 1.2rem 0;
+  margin: 20px 0;
   font-size: .9rem;
   text-align: center;
 }