refills 0.1.0 → 0.2.0

data/source/stylesheets/refills/unstyled/_hover-menu.scss

@@ -0,0 +1,60 @@
+.hover-menu {
+  $large-screen: 53.75em !default;
+  $submenu-width: 12em;
+
+  overflow: visible;
+  padding-right: 0;
+
+  @include media($large-screen) {
+    position: relative;
+  }
+
+  .hover-menu-item {
+    left: 0;
+    position: relative;
+
+    &::after {
+      content: "›";
+      padding-left: 0.5em;
+    }
+  }
+
+  .submenu {
+    display: none;
+    margin: 0;
+    padding-left: 0;
+
+    @include media($large-screen) {
+      left: 0;
+      position: absolute;
+    }
+  }
+
+  .submenu li {
+    display: block;
+    padding-right: 0;
+  }
+
+  .submenu li a {
+    display: inline-block;
+    text-align: right;
+    width: 100%;
+
+    @include media($large-screen) {
+      text-align: left;
+      width: $submenu-width;
+    }
+  }
+
+  .submenu .submenu {
+    @include media($large-screen) {
+      left: $submenu-width;
+      top: 0;
+    }
+  }
+
+  &:focus > .submenu,
+  &:hover > .submenu {
+    display: block;
+  }
+}

data/source/stylesheets/refills/unstyled/_modal.scss

@@ -0,0 +1,71 @@
+.modal {
+  $medium-screen: 40em !default;
+  $large-screen: 53.75em !default;
+
+  label {
+    cursor: pointer;
+    font-weight: normal;
+    margin-bottom: 0;
+  }
+
+  .modal-state {
+    display: none;
+  }
+
+  .modal-fade-screen { // overlay
+    @include position(fixed, 0);
+    background-color: rgba(#000, 0.85);
+    opacity: 0;
+    transition: opacity 0.25s ease;
+    visibility: hidden;
+    z-index: 99999;
+
+    @include media($large-screen) {
+      padding-top: 10em;
+    }
+  }
+
+  .modal-bg {
+    @include position(absolute, 0);
+    cursor: pointer;
+  }
+
+  .modal-close {
+    cursor: pointer;
+  }
+
+  .modal-inner {
+    background-color: #fff;
+    margin: auto;
+    max-height: 95%;
+    overflow: auto;
+    position: relative;
+    top: 0.5em;
+    transition: opacity 0.25s ease;
+    width: 95%;
+
+    @include media($medium-screen) {
+      max-height: 70%;
+      width: 60%;
+    }
+
+    @include media($large-screen) {
+      width: 50%;
+    }
+  }
+
+  .modal-state:checked + .modal-fade-screen {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+.modal-open {
+  overflow: hidden;
+}
+
+.modal-closed {
+  overflow: auto;
+}
+
+// Based on code by Kasper Mikiewicz

data/source/stylesheets/refills/unstyled/_navigation-centered.scss

@@ -0,0 +1,92 @@
+.navigation-centered {
+  $large-screen: 53.75em !default;
+  $centered-navigation-height: 60px;
+  $centered-navigation-logo-height: 2em;
+
+  width: 100%;
+
+  // Mobile view
+  .mobile-logo {
+    display: inline;
+    float: left;
+
+    @include media($large-screen) {
+      display: none;
+    }
+
+    img {
+      max-height: $centered-navigation-logo-height;
+    }
+  }
+
+  .navigation-centered-mobile-menu {
+    float: right;
+    padding-top: 0.5em;
+
+    @include media ($large-screen) {
+      display: none;
+    }
+  }
+
+  // Nav menu
+  .navigation-centered-wrapper {
+    @include clearfix;
+    position: relative;
+  }
+
+  ul.navigation-centered-menu {
+    clear: both;
+    display: none;
+    margin: 0 auto;
+    overflow: visible;
+    padding: 0;
+    width: 100%;
+
+    &.show {
+      display: block;
+    }
+
+    @include media ($large-screen) {
+      display: block;
+      text-align: center;
+    }
+  }
+
+  // Nav items
+  ul li.nav-link {
+    display: block;
+    text-align: right;
+    width: 100%;
+
+    a {
+      display: inline-block;
+    }
+
+    &:last-child a {
+      padding-right: 0;
+    }
+
+    @include media($large-screen) {
+      display: inline;
+
+      a {
+        padding-right: 1em;
+      }
+    }
+  }
+
+  // Centered logo
+  li.logo.nav-link {
+    display: none;
+    line-height: 0;
+
+    @include media($large-screen) {
+      display: inline;
+    }
+  }
+
+  .logo img {
+    margin-bottom: -$centered-navigation-logo-height / 3;
+    max-height: $centered-navigation-logo-height;
+  }
+}

data/source/stylesheets/refills/unstyled/_navigation.scss

@@ -0,0 +1,82 @@
+.navigation {
+  $large-screen: 53.75em !default;
+  $large-screen: $large-screen;
+
+  // Mobile view
+  .navigation-menu-button {
+    display: block;
+    float: right;
+    margin: 0;
+    padding-top: 0.5em;
+
+    @include media ($large-screen) {
+      display: none;
+    }
+  }
+
+  // Nav menu
+  .navigation-wrapper {
+    @include clearfix;
+    position: relative;
+  }
+
+  .logo {
+    float: left;
+
+    img {
+      max-height: 2em;
+      padding-right: 1em;
+    }
+  }
+
+  nav {
+    float: none;
+
+    @include media ($large-screen) {
+      float: left;
+      line-height: 1.5em;
+      padding-top: 0.3em;
+    }
+  }
+
+  ul.navigation-menu {
+    clear: both;
+    display: none;
+    margin: 0 auto;
+    overflow: visible;
+    padding: 0;
+    width: 100%;
+
+    @include media ($large-screen) {
+      display: block;
+      margin: 0;
+      padding: 0;
+    }
+
+    &.show {
+      display: block;
+    }
+  }
+
+  // Nav items
+  ul li.nav-link {
+    display: block;
+    text-align: right;
+    width: 100%;
+
+    @include media ($large-screen) {
+      background: transparent;
+      display: inline;
+      text-decoration: none;
+      width: auto;
+    }
+  }
+
+  li.nav-link a {
+    display: inline-block;
+
+    @include media ($large-screen) {
+      padding-right: 1em;
+    }
+  }
+}

data/source/stylesheets/refills/unstyled/_scroll-on-page.scss

@@ -0,0 +1,22 @@
+.scroll-on-page {
+  $large-screen: 53.75em !default;
+
+  aside {
+    @include media($large-screen) {
+      @include span-columns(4);
+    }
+  }
+
+  .scroll-on-page-link {
+    display: block;
+    outline: none;
+  }
+
+  article {
+    @include media($large-screen) {
+      @include span-columns(8);
+    }
+  }
+}
+
+// Based on code by http://codepen.io/xmark/

data/source/stylesheets/refills/unstyled/_search-bar.scss

@@ -0,0 +1,26 @@
+.search-bar {
+  width: 100%;
+
+  form {
+    position: relative;
+  }
+
+  input {
+    box-sizing: border-box;
+    display: block;
+    margin: 0;
+    position: relative;
+    width: 100%;
+  }
+
+  button {
+    @include position(absolute, 0 0 0 null);
+    padding: 5px 10px;
+
+  }
+
+  img {
+    height: 12px;
+    opacity: 0.7;
+  }
+}

data/source/stylesheets/refills/unstyled/_sliding-panel.scss

@@ -0,0 +1,36 @@
+.sliding-panel-content {
+  $sliding-panel-width: 220px;
+
+  @include position(fixed, 0 auto 0 0);
+  @include size($sliding-panel-width, 100%);
+  background: #fff;
+  -webkit-overflow-scrolling: touch;
+  overflow-y: auto;
+  transform: translateX(- $sliding-panel-width);
+  transition: all 0.25s linear;
+  z-index: 999999;
+
+  &.is-visible {
+    transform: translateX(0);
+  }
+}
+
+.sliding-panel-fade-screen {
+  @include position(fixed, 0);
+  background: #000;
+  opacity: 0;
+  transition: all 0.2s ease-in-out;
+  visibility: hidden;
+  z-index: 9999;
+
+  &.is-visible {
+    opacity: 0.4;
+    visibility: visible;
+  }
+}
+
+.sliding-panel-close {
+  cursor: pointer;
+}
+
+// Based on code by Diego Eis

data/source/stylesheets/refills/unstyled/_switch.scss

@@ -0,0 +1,50 @@
+.switch {
+  $switch-width: 52px;
+  $switch-padding: 2px;
+  $switch-height: 32px;
+  $knob-size: $switch-height - ($switch-padding * 2);
+  $knob-width: $knob-size;
+
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+
+  input {
+    display: none;
+
+    + .checkbox {
+      @include size($switch-width, $switch-height);
+      border: 1px solid #000;
+      cursor: pointer;
+      position: relative;
+      width: $switch-width;
+      z-index: 0;
+
+      &::before {
+        @include position(absolute, $switch-padding 0 0 $switch-padding);
+        content: "";
+        width: $switch-width - ($switch-padding * 2);
+        z-index: 1;
+      }
+
+      &::after {
+        @include position(absolute, 1px 0 0 1px);
+        @include size($knob-size);
+        background-color: #000;
+        content: "";
+        transition: all 0.3s ease;
+        z-index: 2;
+      }
+    }
+
+    &:checked {
+      + .checkbox {
+        background-color: #aaa;
+
+        &::after {
+          left: $switch-width - $knob-width - ($switch-padding * 2) + 1px;
+        }
+      }
+    }
+  }
+}