refills 0.1.0 → 0.2.0

data/source/stylesheets/refills/_type-system-traditional.scss

@@ -1,24 +1,28 @@
 article.type-system-traditional {
-  ///////////////////////////////////////////////////////////////////////////////////
   $base-border-radius: 3px !default;
   $base-line-height: 1.5em !default;
   $base-spacing: 1.5em !default;
-  $base-accent-color: #477DCA !default;
-  $base-link-color: $base-accent-color !default;
+  $action-color: #477DCA !default;
   $dark-gray: #333 !default;
   $light-gray: #DDD !default;
-  $medium-screen: em(640) !default;
+  $medium-screen: 40em !default;
   $base-font-color: $dark-gray !default;
-  
+  $sans-serif: 'Noto Sans', sans-serif;
+  $serif: 'Radley', serif;
+
+  @include clearfix;
+  font-family: $sans-serif;
+  text-align: left;
+
   h1, h2, h3, p {
     margin: 0;
   }
 
   hr {
     border-bottom: 1px solid $light-gray;
-    border-left: none;
-    border-right: none;
-    border-top: none;
+    border-left: 0;
+    border-right: 0;
+    border-top: 0;
     margin: $base-spacing 0;
   }
 
@@ -28,25 +32,18 @@ article.type-system-traditional {
   }
 
   a {
-    color: $base-link-color;
+    color: $action-color;
     text-decoration: none;
   }
-  //////////////////////////////////////////////////////////////////////////////////
-
-  $sans-serif: 'Noto Sans', sans-serif;
-  $serif: 'Radley', serif;
-
-  @include clearfix;
-  text-align: left;
 
   .type {
     border-bottom: 2px solid;
     display: inline-block;
     font-family: $sans-serif;
-    font-size: .7em;
+    font-size: 0.7em;
     font-weight: 800;
     margin-bottom: 2em;
-    padding: .1em 0;
+    padding: 0.1em 0;
     text-align: left;
     text-transform: uppercase;
   }
@@ -67,7 +64,7 @@ article.type-system-traditional {
     font-size: 1.3em;
     font-weight: 400;
     line-height: 1.25em;
-    margin-bottom: .9em;
+    margin-bottom: 0.9em;
 
     @include media($medium-screen) {
       font-size: 1.5em;
@@ -101,7 +98,7 @@ article.type-system-traditional {
     color: transparentize($base-font-color, 0.6);
     font-family: $serif;
     font-style: italic;
-    margin-bottom: .3em;
+    margin-bottom: 0.3em;
   }
 
   p {
@@ -116,7 +113,7 @@ article.type-system-traditional {
       font-style: italic;
     }
   }
-  
+
   a.read-more {
     display: inline-block;
     font-family: $sans-serif;

data/source/stylesheets/refills/_vertical-tabs.scss

@@ -1,46 +1,37 @@
 .vertical-tabs-container {
-  ///////////////////////////////////////////////////////////////////////////////////
   $base-border-color: gainsboro !default;
   $base-border-radius: 3px !default;
   $base-background-color: white !default;
   $base-line-height: 1.5em !default;
   $base-spacing: 1.5em !default;
-  $base-accent-color: #477DCA !default;
-  $base-link-color: $base-accent-color !default;
+  $action-color: #477dca !default;
   $dark-gray: #333 !default;
-  $medium-screen: em(640) !default;
+  $medium-screen: 40em !default;
   $base-font-color: $dark-gray !default;
-  
-  li {
-    list-style: none;
-  }
-
-  p {
-    color: $base-font-color;
-    line-height: $base-line-height;
-  }
-
-  a {
-    text-decoration: none;
-    color: $base-link-color;
-  }
-  //////////////////////////////////////////////////////////////////////////////////
-
   $tab-border-color: $base-border-color;
   $tab-border: 1px solid $tab-border-color;
   $tab-border-radius: $base-border-radius;
   $tab-content-background: lighten($tab-border-color, 10%);
   $tab-active-color: $tab-content-background;
   $tab-inactive-color: $base-background-color;
-  $vertical-tabs-height: em(300);
+  $vertical-tabs-height: 18.75em;
   $vertical-tab-mode: $medium-screen;
 
   @include clearfix;
-  border-radius: $tab-border-radius;
   border: $tab-border;
+  border-radius: $tab-border-radius;
   margin-bottom: $base-spacing;
   overflow: hidden;
 
+  li {
+    list-style: none;
+  }
+
+  a {
+    color: $action-color;
+    text-decoration: none;
+  }
+
   .vertical-tabs {
     display: none;
 
@@ -74,19 +65,19 @@
   }
 
   .vertical-tab:focus {
-    outline: none; 
+    outline: none;
   }
 
   .vertical-tab-content-container {
     display: block;
     margin: 0 auto;
 
-    & a:focus { 
-      outline: none; 
+    & a:focus {
+      outline: none;
     }
 
     @include media($vertical-tab-mode) {
-      @include size(80% $vertical-tabs-height);
+      @include size(80%, $vertical-tabs-height);
       background-color: $tab-content-background;
       display: inline-block;
     }
@@ -96,8 +87,13 @@
     background-color: $tab-content-background;
     padding: $base-spacing $gutter;
 
+    p {
+      color: $base-font-color;
+      line-height: $base-line-height;
+    }
+
     @include media($vertical-tab-mode) {
-      border: none;
+      border: 0;
       display: none;
     }
   }
@@ -112,16 +108,16 @@
 
     &:focus,
     &:hover {
-      color: $base-accent-color;
+      color: $action-color;
     }
 
     &:first-child {
-      border-top: none;
+      border-top: 0;
     }
 
     &.is-active {
       background: $tab-active-color;
-      border-bottom: none;
+      border-bottom: 0;
     }
 
     @include media($vertical-tab-mode) {

data/source/stylesheets/refills/_video.scss

@@ -7,7 +7,7 @@
   embed,
   object,
   iframe {
-    @include position(absolute, 0px null null 0px);
+    @include position(absolute, 0 null null 0);
     @include size(100%);
   }
 }

data/source/stylesheets/refills/unstyled/_accordion-tabs.scss

@@ -0,0 +1,36 @@
+.accordion-tabs {
+  $large-screen: 53.75em !default;
+
+  @include clearfix;
+  padding: 0;
+
+  .tab-header-and-content {
+    list-style: none;
+
+    @include media($large-screen) {
+      display: inline;
+    }
+  }
+
+  .tab-link {
+    display: block;
+    padding-right: 1em;
+
+    @include media($large-screen) {
+      display: inline-block;
+    }
+  }
+
+  .is-active {
+    color: #ff0000;
+  }
+
+  .tab-content {
+    display: none;
+    width: 100%;
+
+    @include media($large-screen) {
+      float: left;
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+.accordion {
+  > li > a {
+    font-weight: normal;
+  }
+
+  ul.submenu {
+    display: none;
+  }
+
+  .is-expanded {
+    > a {
+      color: red;
+    }
+
+    display: block;
+  }
+}

data/source/stylesheets/refills/unstyled/_button-group.scss

@@ -0,0 +1,30 @@
+.button-group {
+  $large-screen: 53.75em !default;
+
+  input {
+    display: none;
+  }
+
+  label {
+    font-weight: normal;
+
+    @include media($large-screen) {
+      float: left;
+      padding: 0 0.5em;
+    }
+  }
+
+  .button-group-item {
+    cursor: pointer;
+    display: inline-block;
+    width: 100%;
+
+    @include media($large-screen) {
+      width: auto;
+    }
+  }
+
+  input:checked + .button-group-item {
+    color: #f00;
+  }
+}

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

@@ -0,0 +1,20 @@
+.cards {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  .card {
+    flex-basis: 20em;
+    flex-grow: 1;
+    margin: 0 1em;
+  }
+
+  .card-image {
+    max-height: 150px;
+    overflow: hidden;
+
+    img {
+      width: 100%;
+    }
+  }
+}

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

@@ -0,0 +1,28 @@
+.comment {
+  display: table;
+  width: 100%;
+
+  .comment-image,
+  .comment-content {
+    display: table-cell;
+    vertical-align: top;
+  }
+
+  .comment-image {
+    padding-right: $gutter;
+
+    img {
+      height: 3em;
+      max-width: none;
+    }
+
+    .comment-reverse-order & {
+      padding-left: 10px;
+      padding-right: 0;
+    }
+  }
+
+  .comment-content {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,42 @@
+.dropdown {
+  $large-screen: 40em !default;
+  $dropdown-distance-from-menu: 50px;
+
+  .dropdown-container {
+    display: inline-block;
+    position: relative;
+    text-align: center;
+  }
+
+  .dropdown-description {
+    float: left;
+    padding-right: 1em;
+  }
+
+  .dropdown-button {
+    cursor: pointer;
+    float: right;
+    position: relative;
+  }
+
+  .dropdown-button::after {
+    display: block;
+    position: absolute;
+  }
+
+  .dropdown-menu {
+    cursor: pointer;
+    display: none;
+    overflow: visible;
+    position: absolute;
+    text-align: left;
+    top: $dropdown-distance-from-menu;
+    transition: all 0.2s ease-in-out;
+    width: 228px;
+    z-index: 99999;
+  }
+
+  .show-menu {
+    display: block;
+  }
+}

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

@@ -0,0 +1,20 @@
+.expander {
+  .expander-trigger {
+    display: block;
+
+    &::before {
+      content: "\25BC";
+      margin-right: 0.5em;
+    }
+  }
+
+  .expander-hidden {
+    &::before {
+      content: "\25BA";
+    }
+  }
+
+  .expander-hidden + .expander-content {
+    display: none;
+  }
+}

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

@@ -0,0 +1,64 @@
+// Uncomment this for a sticky footer.
+//
+// .wrapper-for-content-outside-of-footer {
+//   min-height: 100%;
+//   height: auto !important;
+//   height: 100%;
+//   margin: 0 auto -4em;
+// }
+
+// html, body {
+//  height: 100%;
+// }
+
+// .wrapper-for-content-outside-of-footer::after {
+//   content: "";
+//   display: block;
+// }
+
+// .footer, .wrapper-for-content-outside-of-footer::after {
+//   $large-screen: 53.75em !default;
+//   height: 12em;
+
+//   @include media($large-screen) {
+//     height: 4em;
+//   }
+// }
+
+.footer {
+  $large-screen: 53.75em !default;
+
+  .footer-logo {
+    margin-bottom: 1em;
+    margin-right: 1em;
+
+    @include media($large-screen) {
+      float: left;
+      margin-bottom: 0;
+    }
+
+    img {
+      height: 2.2em;
+    }
+  }
+
+  ul {
+    margin: 0;
+    padding-left: 0;
+
+    @include media($large-screen) {
+      float: left;
+      padding-top: 0.3em;
+    }
+
+    li {
+      line-height: 1.5em;
+      padding-right: 1em;
+
+      @include media($large-screen) {
+        display: inline;
+        text-align: left;
+      }
+    }
+  }
+}