gent_styleguide 6.0.0-alpha2 → 6.0.0-alpha21

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

@@ -1,3 +1,4 @@
+// sass-lint:disable no-important
 .image-gallery {
   @include clearfix();
 
@@ -20,53 +21,38 @@
   }
 
   .image-gallery__show-more {
+    display: flex;
     position: absolute;
     right: 0;
     bottom: 0;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
     width: calc((100% / 1) - #{$gutter-width});
     margin: calc(#{$gutter-width} / 2);
     padding-bottom: calc(((100% / 1) - #{$gutter-width}) / 1.6);
     pointer-events: none;
-
-    &::before {
-      @include theme('background-color', 'color-primary--darken-3', 'image-gallery-show-more-background-color');
-
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      content: '';
-      opacity: .7;
-    }
   }
 
   .show-more__content {
-    @include theme('color', 'color-secondary', 'image-gallery-show-more-color');
-    @include bold-text;
+    @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;
 
-    display: flex;
     position: absolute;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    font-size: .9rem;
+    top: 50%;
+    padding: .4rem .75rem;
+    transform: translate(0, -50%);
     line-height: 1;
     text-align: center;
 
     .show-more__total {
-      width: 100%;
-      height: 35%;
-      margin-bottom: 5%;
-      background: no-repeat center center url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='100' viewBox='0 0 132 100'%3E%3Cpath fill='%23FFF' fill-rule='evenodd' d='M76.645 15.603a2.13 2.13 0 0 0-2.129-2.128H57.484a2.13 2.13 0 0 0-2.13 2.128 2.13 2.13 0 0 0 2.13 2.127h17.032a2.13 2.13 0 0 0 2.13-2.127zm4.258 0c0 3.519-2.865 6.383-6.387 6.383H57.484c-3.522 0-6.387-2.864-6.387-6.383 0-3.52 2.865-6.383 6.387-6.383h17.032c3.522 0 6.387 2.864 6.387 6.383zm9.936 49.645a2.13 2.13 0 0 0-4.258 0 20.431 20.431 0 0 1-6.028 14.543 2.126 2.126 0 0 0 1.504 3.632c.545 0 1.09-.207 1.506-.623 4.692-4.69 7.276-10.922 7.276-17.552zm36.903-40.425c0-4.301-3.503-7.802-7.807-7.802H94.387c-.917 0-1.73-.586-2.02-1.454-.037-.112-3.91-11.312-12.173-11.312H51.806c-8.263 0-12.136 11.2-12.175 11.315a2.132 2.132 0 0 1-2.018 1.451H12.065c-4.304 0-7.807 3.501-7.807 7.802v5.804c.223-.08.46-.13.71-.13H22a2.13 2.13 0 0 1 2.129 2.127A2.13 2.13 0 0 1 22 34.752H4.968c-.25 0-.487-.051-.71-.13v7.222h12.774a2.13 2.13 0 0 1 2.13 2.128 2.13 2.13 0 0 1-2.13 2.127H4.258v7.223c.223-.08.46-.13.71-.13h12.774a2.13 2.13 0 0 1 2.129 2.127 2.13 2.13 0 0 1-2.13 2.128H4.969c-.25 0-.487-.051-.71-.13v22.825c0 4.3 3.503 7.801 7.807 7.801h27.634c-5.273-6.093-8.473-14.025-8.473-22.695 0-19.163 15.599-34.752 34.774-34.752s34.774 15.59 34.774 34.752c0 8.67-3.2 16.602-8.473 22.695h27.634c4.304 0 7.807-3.5 7.807-7.801v-55.32zM66 95.745a30.379 30.379 0 0 0 19.343-6.93c.172-.235.39-.428.643-.575 6.437-5.595 10.53-13.816 10.53-22.992 0-16.815-13.69-30.496-30.516-30.496s-30.516 13.68-30.516 30.496c0 9.176 4.093 17.397 10.53 22.992.253.147.471.342.643.576A30.386 30.386 0 0 0 66 95.745zm39.742-82.979h8.516v-2.128a3.55 3.55 0 0 0-3.548-3.546h-1.42a3.55 3.55 0 0 0-3.548 3.546v2.128zM132 24.823v55.319c0 6.648-5.412 12.057-12.065 12.057H87.923C81.938 97.072 74.306 100 66 100c-8.306 0-15.938-2.928-21.923-7.801H12.065C5.412 92.199 0 86.79 0 80.142v-55.32c0-6.648 5.412-12.056 12.065-12.056h24.094C37.711 9.126 42.531 0 51.806 0h28.388c9.275 0 14.095 9.126 15.647 12.766h5.643v-2.128c0-4.3 3.503-7.801 7.806-7.801h1.42c4.303 0 7.806 3.5 7.806 7.801v2.128h1.42c6.652 0 12.064 5.408 12.064 12.057zm-63.871 17.73A2.13 2.13 0 0 1 66 44.681c-11.348 0-20.58 9.227-20.58 20.567a2.13 2.13 0 0 1-4.259 0c0-13.686 11.144-24.822 24.839-24.822a2.13 2.13 0 0 1 2.129 2.127z'/%3E%3C/svg%3E%0A");
-      background-size: contain;
-      font-size: 0;
+      display: none;
     }
 
     i {
-      font-size: 1.5rem;
+      font-size: 1.3rem;
       vertical-align: middle;
     }
   }
@@ -81,7 +67,7 @@
     text-decoration: none;
 
     &::after {
-      content: none;
+      content: none !important;
     }
 
     &:hover,
@@ -154,18 +140,6 @@
 
   // Alternative styling
   &--secondary {
-    .show-more__content {
-      @include theme('color', 'color-primary', 'link-color');
-
-      display: inline-block;
-      margin-top: .3rem;
-      text-align: right;
-
-      .show-more__total {
-        display: none;
-      }
-    }
-
     // single image styling
     .image-gallery {
       text-align: left;
@@ -192,15 +166,6 @@
         width: 100%;
         margin: 1vw 0 $gutter-width;
       }
-
-      // show more content: base settings
-      .image-gallery__show-more {
-        padding-bottom: 2.3em;
-
-        &::before {
-          background-color: transparent;
-        }
-      }
     }
 
     // multiple image styling
@@ -222,7 +187,7 @@
         }
 
         &:first-of-type:nth-last-of-type(-n+3) ~ .image-gallery__show-more {
-          display: block;
+          display: flex;
         }
 
         // only two images
@@ -265,33 +230,13 @@
         li:first-of-type:nth-last-of-type(-n+3) ~ .image-gallery__show-more {
           display: none;
         }
-
-        .image-gallery__show-more {
-          padding-bottom: calc(((100% / 2) - 2vw) / 1.6);
-
-          &::before {
-            @include theme('background-color', 'color-primary--darken-3', 'image-gallery-show-more-background-color');
-          }
-
-          .show-more__content {
-            @include theme('color', 'color-secondary', 'image-gallery-show-more-color');
-
-            display: flex;
-            margin-top: 0;
-            text-align: center;
-
-            .show-more__total {
-              display: inline-block;
-            }
-          }
-        }
       }
 
       @include tablet {
         // overrule image gallery
         li:first-of-type:nth-last-of-type(-n+5) ~ .image-gallery__show-more,
         li:first-of-type:nth-last-of-type(-n+6) ~ .image-gallery__show-more {
-          display: inline-block;
+          display: flex;
         }
 
         // hide 'show more' if there are no more than three images
@@ -323,7 +268,9 @@
           display: none;
         }
 
-        .image-gallery__show-more {
+        // subtract .33px to deal with incorrect IE rounding
+        li:first-of-type:nth-last-of-type(n + 4) ~ .image-gallery__show-more {
+          width: calc((100% / 3) - #{$gutter-width} - .33px);
           padding-bottom: calc(((100% / 3) - #{$gutter-width} - .33px) / 1.6);
         }
       }

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

@@ -1,37 +1,42 @@
 .summary-box {
-  text-align: center;
+  @include theme('background-color', 'color-secondary-light', 'summary-box-background-color');
+  padding: 1.5rem;
 
   ul.icon-list {
+    @include medium-text;
     width: 100%;
-    margin: 0;
+    margin: 0 0 1rem;
 
-    time {
-      @include bold-text;
-      display: block;
+    @include tablet {
+      @include large-text;
     }
-  }
 
-  .highlight__inner {
-    position: relative;
-    margin-bottom: 1.5rem; // Save room for the accolade
-    text-align: left;
+    i {
+      &::before {
+        position: relative;
+        top: 2px;
+      }
+    }
 
-    &::before {
-      top: -3.5rem;
+    time {
+      @include semi-bold-text;
+      display: block;
     }
 
-    .accolade {
-      bottom: -1rem;
-      background-color: inherit;
+    li {
+      line-height: 1.6rem;
 
-      &::before,
-      &::after {
-        @include theme('background-color', 'color-secondary', 'summary-box-accolade-background');
+      &:last-of-type {
+        @include semi-bold-text;
       }
     }
   }
 
   .button {
-    @include button-large;
+    @include button-medium;
+
+    @include tablet {
+      @include button-large;
+    }
   }
 }

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

@@ -1,16 +1,6 @@
 .theme-footer {
-  @include theme('background-color', 'color-primary--lighten-5', 'theme-footer-background-color');
-  @include theme('border-color', 'color-primary--lighten-4', 'theme-footer-border-bottom-color');
-
-  width: calc(100% + (2 * #{$gutter-width}));
-  margin-right: -1rem;
-  margin-left: -1rem;
+  margin: 6rem -1rem;
   padding: 0;
-  border-bottom: 2px solid;
-
-  + .footer {
-    margin-top: 0;
-  }
 
   .contact,
   .newsletter,
@@ -35,13 +25,8 @@
     }
 
     img {
-      @include desktop-and-below {
-        margin-right: auto;
-        margin-left: auto;
-      }
-
       width: auto;
-      height: 8rem;
+      height: 10rem;
     }
 
     + .newsletter,
@@ -56,22 +41,33 @@
   }
 
   .contact {
+    @include medium-text;
     margin-right: auto;
 
     @include desktop {
       padding-right: 2rem;
     }
 
+    h3 {
+      margin-bottom: 1.5rem;
+    }
+
     .icon-list {
       margin: 0;
 
+      @include desktop {
+        column-gap: gutter();
+        column-count: 2;
+      }
+
       li:last-of-type {
         margin-bottom: 0;
       }
 
-      @include desktop {
-        column-gap: gutter();
-        column-count: 2;
+      li:not(:first-of-type) {
+        i {
+          @include theme('color', 'color-primary', 'link-color');
+        }
       }
     }
 
@@ -86,31 +82,29 @@
   .social {
     @include tablet {
       flex-shrink: 0;
-      width: $bp-mobile;
-    }
+      width: 19.3rem;
 
-    @include tablet {
       &:only-child {
         width: auto;
-        text-align: center;
       }
     }
 
-    h3 {
+    h4 {
       max-width: 100%;
+      margin-top: 0;
+      margin-bottom: .5rem;
     }
 
     .social-list {
       ul {
         width: calc(100% + 1rem);
-        margin: 0 -.5rem;
 
         a {
           &,
           &[download]:not(.button),
           &[href^="http://"]:not(.button),
           &[href^="https://"]:not(.button) {
-            @include theme('background-color', 'color-secondary', 'theme-footer-social-media-icon-background');
+            @include theme('background-color', 'color-quaternary--lighten-2', 'button-secondary-background');
           }
         }
       }
@@ -118,58 +112,70 @@
   }
 
   .newsletter {
+    @include medium-text;
     flex-grow: 1;
-    border-radius: 0;
-    font-size: .8rem;
+    max-width: 768px;
+    padding: 1.5rem;
 
     @include desktop {
-      padding-right: 2rem;
+      padding: 3rem 3.5rem;
     }
 
-    .highlight__inner {
-      padding: 9.4rem 0 0;
-      background-color: transparent;
+    .subscribe {
+      // 5/12 of max content-container width
+      max-width: calc(#{$bp-max-content} / 12 * 5);
+    }
 
-      &::before {
-        @include spot-image('letter-light', 8rem);
-        top: 1.4rem;
-      }
+    a.standalone-link {
+      top: .5rem;
+    }
 
-      @include tablet {
-        min-height: 8rem;
-        padding-top: 0;
-        padding-left: 10rem;
-
-        &::before {
-          top: calc(50% - 4rem);
-          right: auto;
-          left: 0;
-        }
+    &:not(:last-child) {
+      padding-bottom: 5.4rem;
+
+      @include desktop {
+        padding-right: 6rem;
+        padding-bottom: 3rem;
       }
     }
 
-    .subscribe {
-      // 5/12 of max content-container width
-      max-width: calc(#{$bp-max-content} / 12 * 5);
-    }
-  }
+    + .social {
+      @include theme('background-color', 'color-tertiary-pastel', 'theme-footer-social-background');
 
-  .logo + .newsletter {
-    .highlight__inner {
-      padding-top: 0;
+      max-height: 11.5rem;
+      margin: -3rem 1rem 0;
+      padding: 1.5rem;
+
+      .social-list {
+        ul {
+          width: calc(100% + 1rem);
+          margin: 0 -.25rem;
 
-      &::before {
-        display: none;
+          a {
+            &,
+            &[download]:not(.button),
+            &[href^="http://"]:not(.button),
+            &[href^="https://"]:not(.button) {
+              @include theme('color', 'color-zero');
+              @include theme('background-color', 'color-none');
+            }
+          }
+        }
       }
 
       @include tablet {
-        padding-left: 0;
+        margin: -3rem auto 0;
+        padding: 3.35rem;
+      }
+
+      @include desktop {
+        margin: 3rem 0 0 -3.5rem;
       }
     }
   }
 
   .content-container {
-    padding: 0 $gutter-width;
+    padding: 0 1rem;
 
     @media (min-width: $bp-max-content + 54px) {
       padding-right: 0;
@@ -177,33 +183,21 @@
     }
   }
 
-  .top {
-    @include theme('border-color', 'color-primary--lighten-4', 'theme-footer-border-bottom-color');
-    border-bottom: 2px solid;
-  }
-
   .top,
   .bottom {
     @include tablet {
       display: flex;
       flex-wrap: wrap;
-      justify-content: center;
     }
 
     @include desktop {
       flex-wrap: nowrap;
     }
+  }
 
-    .newsletter,
-    .contact {
-      &:not(:last-of-type) {
-        @include theme('border-color', 'color-primary--lighten-4', 'theme-footer-border-bottom-color');
-        border-bottom: 2px solid;
-
-        @include desktop {
-          border-bottom: 0;
-        }
-      }
+  .top {
+    & ~ .bottom {
+      margin-top: 3.6rem;
     }
   }