gent_styleguide 5.1.2 → 6.0.0-alpha1

package/build/styleguide/sass/31-molecules/modal/_modal.scss

@@ -1,204 +0,0 @@
-// Needed for smooths scrolling on iphone / ipad inside modals.
-// Placing it on .modal is not sufficient for safari.
-* {
-  -webkit-overflow-scrolling: touch; // sass-lint:disable-line no-vendor-prefixes
-}
-
-.modal {
-  @include tablet-and-below {
-    background-color: color('white');
-  }
-
-  @include tablet {
-    animation: fade .2s ease-in-out;
-  }
-
-  display: flex;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  max-height: 100vh;
-  visibility: hidden;
-  z-index: z('modal', 'base');
-  overflow-y: auto;
-
-  // states
-  &.visible {
-    visibility: visible;
-
-    @include tablet {
-      .modal-overlay {
-        display: block;
-      }
-    }
-  }
-
-  // modifiers
-  &.modal--fixed-height {
-    &.visible > .modal-inner {
-      max-height: 80vh;
-
-      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { // sass-lint:disable-line no-vendor-prefixes
-        height: 80vh; // IE fix
-      }
-    }
-
-    > .modal-inner {
-      > .modal-content {
-        flex-grow: 1;
-        margin-bottom: 3.8rem;
-        z-index: z('modal', 'inner');
-        overflow-y: auto;
-      }
-
-      > .modal-actions {
-        position: fixed;
-        bottom: 0;
-        left: 0;
-        margin-top: -3.8rem;
-
-        @include tablet {
-          position: static;
-        }
-      }
-    }
-  }
-
-  // children
-  &.visible .modal-inner {
-    display: flex;
-    position: absolute;
-    top: 0;
-    left: 0;
-    flex-direction: column;
-    width: 100%;
-    min-height: 100%;
-    margin: 0 auto;
-    z-index: z('modal', 'content');
-    filter: drop-shadow(0 2px 8px #{color('dark-gray', -4, true)});
-
-    @include tablet {
-      right: 0;
-      width: $bp-max-content * .8;
-      max-width: calc(100% - #{$gutter-width * 2});
-      height: auto;
-      min-height: 0;
-      margin: 10vh auto 0;
-      padding-bottom: $gutter-width;
-      opacity: 0;
-      animation: fade .2s ease-in-out forwards;
-      animation-delay: .1s;
-    }
-
-    > * {
-      background-color: color('white');
-
-      &:first-of-type {
-        border-top-left-radius: border-radius('radius-2');
-        border-top-right-radius: border-radius('radius-2');
-      }
-
-      &:last-of-type {
-        border-bottom-left-radius: border-radius('radius-2');
-        border-bottom-right-radius: border-radius('radius-2');
-      }
-    }
-  }
-
-  ///
-  /// Header
-  ///
-  &-header {
-    display: block;
-    flex-shrink: 0;
-    text-align: right;
-  }
-
-  &-header &-close {
-    padding: 0 .4rem;
-    border: 0;
-    background: transparent;
-    color: color('dark-gray');
-    font-size: .8rem;
-    font-weight: 400;
-    cursor: pointer;
-
-    &::before {
-      order: 0;
-      margin: 0 .5rem 0 0;
-      font-size: 1.4rem;
-    }
-
-    &:hover,
-    &:focus {
-      @include theme('background-color', 'color-primary--lighten-4', 'modal-close-hover-bg-color');
-    }
-  }
-
-  &-close {
-    cursor: pointer;
-  }
-
-  ///
-  /// Content
-  ///
-  &-content {
-    padding: 0 1rem .8rem;
-
-    @include tablet {
-      padding: 0 $gutter-width .8rem;
-    }
-  }
-
-  ///
-  /// Actions
-  ///
-  &-actions {
-    @include theme('border-color', 'color-primary--lighten-4', 'modal-action-border-bottom');
-
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    width: 100%;
-    padding: .8rem 1rem;
-    border-top: 2px solid;
-    background-color: color('white');
-    z-index: z('modal', 'actions');
-
-    @include tablet {
-      position: relative;
-    }
-  }
-
-  ///
-  /// Overlay
-  ///
-  .modal-overlay {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: .7;
-    z-index: z('modal', 'overlay');
-
-    &,
-    &:hover,
-    &:focus {
-      @include theme('background-color', 'color-primary--darken-3', 'modal-overlay-background-color');
-    }
-  }
-}
-
-@keyframes fade {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}

package/build/styleguide/sass/31-molecules/opening-hours/_opening-hours.scss

@@ -1,233 +0,0 @@
-$month-day-size-mobile: 2rem;
-$month-day-size: 2.4rem;
-$week-breakpoint: '(min-width: 750px)';
-
-.openinghours-widget {
-  font-size: .8rem;
-
-  @media (max-width: 360px) {
-    width: calc(100% + 2rem);
-    margin-left: -1rem;
-  }
-
-  // ===
-  // Week view
-  // ===
-  &[data-type*="week"] .openinghours {
-    &--day-open .openinghours--status,
-    &--time-prefix,
-    &--times-between {
-      display: none;
-    }
-
-    &--time-separator {
-      font-size: 0;
-
-      &::before {
-        font-size: .8rem;
-        content: '-';
-      }
-    }
-
-    &--days {
-      @extend %list-no-style;
-    }
-
-    &--day {
-      padding: .3rem .8rem;
-
-      &:nth-child(even) {
-        @include theme('background', 'color-primary--lighten-4', 'opening-hours-even-background');
-      }
-    }
-
-    &--details {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-    }
-
-    &--date {
-      min-width: $bp-mobile;
-    }
-
-    &--times {
-      min-width: 150px;
-    }
-
-    &--status {
-      text-transform: capitalize;
-    }
-  }
-
-  // ===
-  // Month view
-  // ===
-  &[data-type="month"] {
-    @include month-widget-mobile;
-
-
-    @include tablet {
-      @include month-widget-desktop;
-    }
-
-    > .openinghours {
-      @include theme('border-color', 'color-primary--lighten-3', 'opening-hours-border');
-      display: inline-block;
-    }
-
-    .openinghours {
-
-      &--header,
-      &--days {
-        display: flex;
-        width: $month-day-size-mobile * 7;
-
-        @include phablet {
-          width: $month-day-size * 7;
-        }
-      }
-
-      // Header
-      // ===
-      &--header {
-        justify-content: space-between;
-
-        button {
-          @include theme('color', 'color-primary--darken-2', 'opening-hours-color');
-
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: $month-day-size-mobile;
-          height: $month-day-size-mobile *.5;
-          padding: 0;
-          border: 0;
-          background: transparent;
-          font-size: 0;
-          cursor: pointer;
-
-          @include phablet {
-            width: $month-day-size;
-            height: $month-day-size *.5;
-          }
-
-          &.openinghours--prev,
-          &.openinghours--next {
-            &::before {
-              font-size: 1.2rem;
-            }
-          }
-
-          &.openinghours--prev {
-            @include icon(arrow-left);
-          }
-
-          &.openinghours--next {
-            @include icon(arrow-right);
-          }
-        }
-
-        .openinghours--month {
-          @include bold-text;
-          line-height: $month-day-size-mobile *.5;
-
-          @include phablet {
-            line-height: $month-day-size *.5;
-          }
-        }
-      }
-
-
-      &--day--day-of-week {
-        @include bold-text;
-        text-transform: uppercase;
-      }
-
-      &--days {
-        flex-wrap: wrap;
-        margin: 0;
-      }
-
-      &--day {
-        @extend %list-no-style;
-
-        &,
-        > span {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-          width: $month-day-size-mobile;
-          height: $month-day-size-mobile;
-          border-radius: 50%;
-
-          @include phablet {
-            width: $month-day-size;
-            height: $month-day-size;
-          }
-        }
-      }
-
-      &--day-open,
-      &--day-closed {
-        cursor: pointer;
-
-        &[tabindex='0'] > span,
-        &:hover > span {
-          @include theme('border-color', 'color-primary--darken-2', 'opening-hours-color');
-          border: 2px solid;
-        }
-
-        &[tabindex='0'] > span {
-          @include bold-text;
-        }
-
-        &[tabindex='0'] .openinghours--details {
-          display: block;
-        }
-      }
-
-      &--day-open > span::after {
-        @include theme('background-color', 'color-primary--darken-2', 'opening-hours-color');
-        display: block;
-        position: relative;
-        bottom: .2rem;
-        flex: 0 0 auto;
-        width: .2rem;
-        height: .2rem;
-        border-radius: 50%;
-        content: "";
-      }
-
-      &--day-passed > span {
-        opacity: .5;
-      }
-
-      &--details {
-        display: none;
-        position: absolute;
-        width: calc(100% - #{$month-day-size-mobile *.5});
-        cursor: default;
-
-        @include phablet {
-          width: calc(100% - #{$month-day-size *.5});
-        }
-      }
-
-      &--date {
-        @include bold-text;
-        margin-bottom: .8rem;
-      }
-
-      &--status {
-        text-transform: capitalize;
-      }
-
-      &--time,
-      &--times-between {
-        display: inline;
-      }
-    }
-  }
-}

package/build/styleguide/sass/31-molecules/pagination/_pagination.scss

@@ -1,142 +0,0 @@
-.pager {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-
-  @include tablet {
-    justify-content: flex-end;
-  }
-
-  ul {
-    display: flex;
-    flex: 1;
-    flex-basis: 100%;
-    align-items: center;
-    justify-content: center;
-    margin: 0;
-    list-style: none;
-
-    @include tablet {
-      flex-basis: auto;
-      justify-content: flex-start;
-    }
-
-    li {
-      @include theme('color', 'color-primary', 'link-color');
-
-      display: flex;
-      flex: 0 0 auto;
-      justify-content: center;
-      min-width: 1.6rem;
-      text-align: center;
-
-      a {
-        &:hover,
-        &:focus {
-          @include theme('color', 'color-tertiary', 'pagination-active-color');
-        }
-      }
-    }
-
-    a,
-    li.active {
-      @include reset-link-background;
-      @include bold-text;
-
-      padding-right: .4rem;
-      padding-left: .4rem;
-      font-size: .8rem;
-      line-height: 1.2;
-
-      @include phablet {
-        padding-right: 1rem;
-        padding-left: 1rem;
-        font-size: 1rem;
-      }
-    }
-
-    li.spacing {
-      min-width: 1rem;
-      padding: .3rem;
-    }
-
-    .active {
-      @include theme('color', 'color-tertiary', 'pagination-active-color');
-
-      position: relative;
-      padding-top: .3rem;
-      padding-bottom: .3rem;
-
-      &::after {
-        @include theme('background-color', 'color-primary', 'link-color');
-
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        width: 1.2rem;
-        height: 2px;
-        margin: auto;
-        content: '';
-      }
-    }
-
-    .previous,
-    .next {
-      display: none;
-
-      @include tablet {
-        display: flex;
-      }
-
-      a {
-        display: inline-flex;
-        align-items: center;
-        margin-left: 0;
-        padding: 0 1rem;
-        font-size: .9rem;
-        text-decoration: none;
-
-        &:hover,
-        &:focus {
-          @include theme('color', 'color-tertiary', 'pagination-active-color');
-          background: transparent;
-        }
-      }
-    }
-
-    .next {
-      a {
-        @extend %a-arrow-animation;
-        @include icon(arrow-right, after);
-
-        padding-right: 0;
-
-        &::after {
-          margin-right: -.2rem;
-          padding-right: .2rem;
-        }
-      }
-    }
-
-    .previous {
-      a {
-        @extend %a-arrow-animation--left;
-        @include icon(arrow-left, after);
-
-        flex-direction: row-reverse;
-        padding-left: 0;
-
-        &::after {
-          margin-left: -.2rem;
-          padding-right: .2rem;
-          padding-left: .4rem;
-        }
-      }
-    }
-  }
-
-  .button {
-    margin: 1rem 0;
-  }
-}

package/build/styleguide/sass/31-molecules/partner-block/_partner-block.scss

@@ -1,40 +0,0 @@
-.partner-block {
-
-  .highlight__inner {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 2rem gutter();
-
-    @include tablet {
-      padding: 2rem 5.5rem;
-    }
-  }
-
-  p {
-    text-align: center;
-  }
-
-  .partners ul.inline {
-    display: flex;
-    align-items: center;
-    justify-content: space-evenly;
-    margin-top: 2.2rem;
-
-    li {
-      width: calc(50% - #{gutter()});
-      margin: 0 gutter()*.5 gutter();
-      text-align: center;
-
-      @include tablet {
-        width: calc(25% - #{gutter()});
-      }
-    }
-  }
-
-  .single-partner {
-    width: 9rem;
-    max-width: 100%;
-    margin: 1.5rem 0 1.2rem;
-  }
-}

package/build/styleguide/sass/31-molecules/quote/_quote.scss

@@ -1,86 +0,0 @@
-.quote-wrapper {
-  overflow: auto;
-}
-
-.quote {
-  @include theme('border-color', 'color-primary--lighten-4', 'quote-border-color');
-  margin-top: 3.5rem;
-  border-top: 2px solid;
-
-  @include desktop {
-    margin-top: 0;
-  }
-}
-
-blockquote {
-  @include bold-text;
-
-  display: flex;
-  position: relative;
-  flex-direction: column;
-  font-size: .8rem;
-  text-align: center;
-
-  @include desktop {
-    padding-top: 1.5rem;
-    padding-left: 11.2rem;
-    font-size: .9rem;
-    text-align: left;
-  }
-
-  &::before {
-    @include spot-image('quote', 7rem);
-    margin: -3.5rem auto .8rem;
-
-    @include desktop {
-      position: absolute;
-      top: 1.5rem;
-      left: 1rem;
-      margin: 0;
-    }
-  }
-
-  .content {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    justify-content: center;
-
-    @include desktop {
-      min-height: 7.8rem;
-    }
-  }
-
-  p {
-    &:first-of-type::before {
-      content: '\201C';
-    }
-
-    &:last-of-type::after {
-      content: '\201D';
-    }
-  }
-
-
-  footer {
-    position: relative;
-    padding-top: 1.6rem;
-    font-style: italic;
-    font-weight: 500;
-    text-align: center;
-
-    &::before {
-      @include theme('background-image', 'accolade-stroke-light', 'quote-accolade-stroke');
-
-      display: block;
-      position: absolute;
-      top: -.1rem;
-      right: 0;
-      left: 0;
-      height: 1.1rem;
-      background-repeat: no-repeat;
-      background-position: center bottom;
-      content: '';
-    }
-  }
-}