@comicrelief/storybook 1.34.2 → 2.0.0

package/src/sass/themes/cr/2019/components/navigation/_expanded-footer.scss

@@ -0,0 +1,280 @@
+
+footer[role=contentinfo] {
+  padding: 0;
+  @include breakpoint($screen-md) {
+    padding: 0;
+  }
+  @include breakpoint($screen-lg) {
+    padding: 0;
+  }
+}
+
+.footer-nav-inner-wrapper {
+  @include container();
+}
+
+// Add 'standard' padding back to the menu-specific wrapper
+div.footer--minimal.footer-nav-outer-wrapper {
+  padding: 50px 5px 185px;
+  @include breakpoint($screen-md) {
+    padding: 50px 5px 140px;
+  }
+  @include breakpoint($screen-lg) {
+    padding-top: 100px;
+    padding-bottom: 120px;
+  }
+}
+
+div.footer--expanded.footer-nav-outer-wrapper {
+  line-height: initial;
+  background: #000; 
+  padding: 65px 10px 40px; 
+  .menu-item.menu-item--expanded {
+    padding-top: 0;
+    list-style: none;
+  }
+
+  span.md-breakpoint {
+    display: none;
+    visibility: hidden;
+  }
+  
+  @include breakpoint($screen-md) {  
+    padding: 79px 35px 60px;
+    span.md-breakpoint {
+      display: block;
+    }
+  }
+  
+  @include breakpoint($screen-lg) {
+    padding: 80px 40px 60px;
+  }
+
+  // Social Links
+  .footer__social-links {
+    margin: 0 0 50px; 
+    ul li {
+      margin: 5px 6px 0;
+      height: 55px;
+      a {
+        width: 58px;
+        height: 58px;
+        background: none;
+      }
+    }
+    @include breakpoint($screen-md) {
+      margin: 0 0 90px;
+      ul li {
+        margin: 5px 10px 0;
+      }
+    }
+    @include breakpoint($screen-lg) {
+      margin: 0 0 75px;
+    }
+  }
+  .footer__copyright {
+    margin-top: 10px;
+    @include breakpoint($screen-md) {
+      margin-top: 15px;
+    }
+    @include breakpoint($screen-lg) { 
+      margin-top: 10px;
+    }
+    p {
+      text-align: left;
+      color: #fff;
+      @extend .font--xsmall;
+      @include breakpoint($screen-lg) {
+        font-size: 16px;
+        line-height: 27px;
+      }
+    }
+  }
+  .footer__branding {
+    margin: 10px 0 20px 0;
+    a {
+      width: 85px;
+      height: 85px;
+    }
+    @include breakpoint($screen-md) {
+      margin: 0 0 25px;
+    }
+    @include breakpoint($screen-lg) {
+      margin-top: 10px;
+    }
+  }
+  .region.region-footer.cr-footer {
+    @include container();
+  }
+  ul.menu.menu--level-0:not(.menu--level-1) {
+    width: 100%;
+    display: -webkit-flex;
+    display: -moz-flex;
+    display: -ms-flex;
+    display: -o-flex;
+    display: flex;
+    -webkit-flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    margin: 0;
+    // Represents each submenu/category in the footer
+    >li.menu-item {
+      @include span(12);
+      margin-bottom: 45px;
+      @include breakpoint($screen-md) {
+        text-align: center;
+        @include span(6);
+        margin-bottom: 25px;
+        &.menu-item--1,
+        &.menu-item--3,
+        &.menu-item--5 {
+          @include span(5);
+          @include push(0.5);
+          text-align: left; 
+          ul.menu--level-1.menu.menu--level-0 li {
+            text-align: left;
+          }
+        }
+        &.menu-item--2,
+        &.menu-item--4,
+        &.menu-item--6 {
+          @include span(5);
+          @include push(1);
+          text-align: left;
+          ul.menu--level-1.menu.menu--level-0 li {
+            text-align: left;
+          }
+        }
+      }
+      @include breakpoint($screen-md) {
+        &.menu-item--1,
+        &.menu-item--2,
+        &.menu-item--3,
+        &.menu-item--4,
+        &.menu-item--5,
+        &.menu-item--6 {
+          @include span(4);
+          text-align: left;
+          margin-bottom: 60px;
+          ul.menu--level-1.menu.menu--level-0 li {
+            text-align: left;
+          }
+        }
+      }
+      &.item-open {
+        >ul.menu--level-0.menu--level-1 {
+          max-height: 300px;
+          li a {
+            display: inline
+          }
+          @include breakpoint($screen-md) {
+            max-height: none;
+            height: auto;
+          }
+        }
+        >a:after {
+          transform: rotate(0);
+          top: 8px;
+        }
+      }
+      // Category 'title' link
+      >a {
+        color: #fff;
+        @extend .text--subtitle-small;
+        margin-bottom: 19px;
+        font-size: 19px;
+        text-decoration: none;
+        position: relative;
+        @include breakpoint($screen-md) {
+          font-size: 20px;
+        }
+        &:after {
+          content: '\2303';
+          position: absolute;
+          font-family: Arial;
+          margin-left: 4px;
+          overflow: hidden;
+          line-height: 19px;
+          font-size: 23px;
+          color: inherit;
+          font-weight: bold;
+          top: 0px;
+          transform: rotate(180deg);
+          transition-duration: 0.1s;
+          transition-property: transform;
+          transition-timing-function: ease;
+          @include breakpoint($screen-md) {
+            content: none;
+          }
+        }
+        // All within that category
+        +ul.menu--level-0.menu--level-1 {
+          width: 100%;
+          margin: 0;
+          max-height: 0;
+          overflow-y: hidden;
+          transition: max-height 0.6s ease;
+          @include breakpoint($screen-md) {
+            max-height: none;
+            height: auto;
+          }
+          // Each link item
+          li {
+            padding: 8px 0;
+            width: 100%;
+            margin: 0;
+            text-align: left;
+            @include breakpoint($screen-md) {
+              margin-top: 12px;
+              padding: 0; // to avoid pushing  of other li when hover li item which takes more than two lines
+            }
+            @include breakpoint($screen-lg) {
+              padding: 0;
+              text-align: left;
+            }
+            a {
+              @extend .link;
+              color: #fff;
+              font-size: 15px;
+              border-bottom: 0;
+              line-height: 24px; 
+              padding: 0;
+              // Hide to prevent tabbing until the menu is open
+              display: none;
+              @include breakpoint($screen-md) {
+                display: inline;
+              }
+              &:hover,
+              &:focus {
+                color: #fff; 
+                border-bottom: 2px solid #fff; 
+              }
+              &:after {
+                content: none;
+              }
+            }
+          }
+          div.menu--expanded-footer__left,
+          div.menu--expanded-footer__right {
+            width: 100%;
+          }
+          @include breakpoint($screen-md) {
+            // split submenus
+            div.menu--expanded-footer__left {
+              float: left;
+              width: 50%;
+            }
+            div.menu--expanded-footer__right {
+              float: right;
+              width: 50%;
+              li {
+                padding: 0px 0px 0px 14px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}