refills 0.1.0 → 0.2.0

data/source/javascripts/refills/unstyled/accordion.js

@@ -0,0 +1,5 @@
+$('.js-accordion-trigger').bind('click', function(e){
+  jQuery(this).parent().find('.submenu').slideToggle('fast');
+  jQuery(this).parent().toggleClass('is-expanded');
+  e.preventDefault();
+});

data/source/javascripts/refills/unstyled/accordion_tabs.js

@@ -0,0 +1,18 @@
+$(document).ready(function () {
+  $('.accordion-tabs').each(function() {
+    $(this).children('li').first().children('a').addClass('is-active').next().addClass('is-open').show();
+  });
+  $('.accordion-tabs').on('click', 'li > a.tab-link', function(event) {
+    if (!$(this).hasClass('is-active')) {
+      event.preventDefault();
+      var accordionTabs = $(this).closest('.accordion-tabs');
+      accordionTabs.find('.is-open').removeClass('is-open').hide();
+
+      $(this).next().toggleClass('is-open').toggle();
+      accordionTabs.find('.is-active').removeClass('is-active');
+      $(this).addClass('is-active');
+    } else {
+      event.preventDefault();
+    }
+  });
+});

data/source/javascripts/refills/unstyled/dropdown.js

@@ -0,0 +1,12 @@
+$(document).ready(function(){
+  $(".dropdown-button").click(function() {
+    $(".dropdown-menu").toggleClass("show-menu");
+    $(".dropdown-menu > li").click(function(){
+      $(".dropdown-menu").removeClass("show-menu");
+    });
+    $(".dropdown-menu.dropdown-select > li").click(function() {
+      $(".dropdown-button").html($(this).html());
+    });
+  });
+});
+

data/source/javascripts/refills/unstyled/expander.js

@@ -0,0 +1,8 @@
+$(document).ready(function() {
+  var expanderTrigger = document.getElementById("js-expander-trigger");
+  var expanderContent = document.getElementById("js-expander-content");
+
+  $('#js-expander-trigger').click(function(){
+    $(this).toggleClass("expander-hidden");
+  });
+});

data/source/javascripts/refills/unstyled/modal.js

@@ -0,0 +1,17 @@
+$(function() {
+  $("#modal-1").on("change", function() {
+    if ($(this).is(":checked")) {
+      $("body").addClass("modal-open");
+    } else {
+      $("body").removeClass("modal-open");
+    }
+  });
+
+  $(".modal-fade-screen, .modal-close").on("click", function() {
+    $(".modal-state:checked").prop("checked", false).change();
+  });
+
+  $(".modal-inner").on("click", function(e) {
+    e.stopPropagation();
+  });
+});

data/source/javascripts/refills/unstyled/navigation.js

@@ -0,0 +1,13 @@
+$(document).ready(function() {
+  var menuToggle = $('#js-mobile-menu').unbind();
+  $('#js-navigation-menu').removeClass("show");
+
+  menuToggle.on('click', function(e) {
+    e.preventDefault();
+    $('#js-navigation-menu').slideToggle(function(){
+      if($('#js-navigation-menu').is(':hidden')) {
+        $('#js-navigation-menu').removeAttr('style');
+      }
+    });
+  });
+});

data/source/javascripts/refills/unstyled/navigation_centered.js

@@ -0,0 +1,13 @@
+$(document).ready(function() {
+  var menuToggle = $("#js-navigation-centered-mobile-menu").unbind();
+  $("#js-navigation-centered-menu").removeClass("show");
+  
+  menuToggle.on("click", function(e) {
+    e.preventDefault();
+    $("#js-navigation-centered-menu").slideToggle(function(){
+      if($("#js-navigation-centered-menu").is(":hidden")) {
+        $("#js-navigation-centered-menu").removeAttr("style");
+      }
+    });
+  });
+});

data/source/javascripts/refills/unstyled/scroll_on_page.js

@@ -0,0 +1,29 @@
+(function (jQuery) {
+  jQuery.mark = {
+    jump: function (options) {
+      var defaults = {
+        selector: 'a.scroll-on-page-link'
+      };
+      if (typeof options == 'string') {
+        defaults.selector = options;
+      }
+
+      options = jQuery.extend(defaults, options);
+      return jQuery(options.selector).click(function (e) {
+        var jumpobj = jQuery(this);
+        var target = jumpobj.attr('href');
+        var thespeed = 1000;
+        var offset = jQuery(target).offset().top;
+        jQuery('html,body').animate({
+          scrollTop: offset
+        }, thespeed, 'swing');
+        e.preventDefault();
+      });
+    }
+  };
+})(jQuery);
+
+
+jQuery(function(){  
+  jQuery.mark.jump();
+});

data/source/javascripts/refills/unstyled/sliding_panel.js

@@ -0,0 +1,6 @@
+$(document).ready(function(){
+  $('.sliding-panel-button,.sliding-panel-fade-screen,.sliding-panel-close').on('click touchstart',function (e) {
+    $('.sliding-panel-content,.sliding-panel-fade-screen').toggleClass('is-visible');
+    e.preventDefault();
+  });
+});

data/source/javascripts/refills/unstyled/vertical_tabs.js

@@ -0,0 +1,32 @@
+$(".js-vertical-tab-content").hide();
+$(".js-vertical-tab-content:first").show();
+
+/* if in tab mode */
+$(".js-vertical-tab").click(function(event) {
+  event.preventDefault();
+
+  $(".js-vertical-tab-content").hide();
+  var activeTab = $(this).attr("rel");
+  $("#"+activeTab).show();
+
+  $(".js-vertical-tab").removeClass("is-active");
+  $(this).addClass("is-active");
+
+  $(".js-vertical-tab-accordion-heading").removeClass("is-active");
+  $(".js-vertical-tab-accordion-heading[rel^='"+activeTab+"']").addClass("is-active");
+});
+
+/* if in accordion mode */
+$(".js-vertical-tab-accordion-heading").click(function(event) {
+  event.preventDefault();
+
+  $(".js-vertical-tab-content").hide();
+  var accordionActiveTab = $(this).attr("rel");
+  $("#"+accordionActiveTab).show();
+
+  $(".js-vertical-tab-accordion-heading").removeClass("is-active");
+  $(this).addClass("is-active");
+
+  $(".js-vertical-tab").removeClass("is-active");
+  $(".js-vertical-tab[rel^='"+accordionActiveTab+"']").addClass("is-active");
+});

data/source/layouts/layout.erb

@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width,initial-scale=1">
-    <meta name="description" content="Refills are prepackaged patterns and components built with Bourbon, Neat and Bitters.">
-    <title><%= current_page.data.title %></title>
+    <meta name="description" content="Components and patterns built with Bourbon and Neat.">
+    <title>Refills<%= " - #{ current_page.data.title}" if current_page.data.title %></title>
     <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Oswald:400,300,700|Lusitana:400,700|Open+Sans:400,800">
     <%= stylesheet_link_tag "all" %>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
@@ -44,7 +44,7 @@
         </footer>
       </section>
     </section>
-    
+
     <script src="https://maps.googleapis.com/maps/api/js"></script>
     <script>
       var bittersMap = (function () {

data/source/refills-hero.html.erb

@@ -1,7 +1,10 @@
 <div class="refills-header">
   <div class="refills-logo">
-    <img src="/images/refills-logo.svg" alt="Refills logo">
+    <%= partial "svgs/refills_logo" %>
+  </div>
+  <h2>Components and patterns built with <a href="//bourbon.io">Bourbon</a> and <a href="//neat.bourbon.io">Neat</a>.</h2>
+  <a href="//empties.bourbon.io" class="empties-banner">New Library! Try out Empties: the unstyled Refills.</a>
+  <div>
+    <p>Managed by <a href="http://thoughtbot.com">thoughtbot</a>, instructions at <a href="//github.com/thoughtbot/refills">GitHub</a></p>
   </div>
-  <h2><span>Refills</span> are prepackaged patterns and components, built on top of <a href="http://www.bourbon.io">Bourbon</a> and <a href="http://neat.bourbon.io/">Neat</a>.</h2>
-  <p>Managed by <a href="http://www.thoughtbot.com">thoughtbot</a>, instructions at <a href="https://github.com/thoughtbot/refills">GitHub</a></p>
 </div>

data/source/stylesheets/_bourbon-nav.scss

@@ -4,15 +4,19 @@ nav.bourbon {
   @include clearfix;
   background-color: $bourbon-nav-background-color;
   padding: 0 2em 0 1em;
+  text-rendering: optimizeLegibility;
 
-  @include media(max-width em(510)) {
+  @include media(max-width 32em) {
     padding: 0;
   };
 
   ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
     text-align: center;
 
-    @include media(em(901)) {
+    @include media(56.25em) {
       float: left;
       text-align: left;
     };
@@ -29,13 +33,14 @@ nav.bourbon {
     display: inline-block;
     font-weight: bold;
     padding: 1em 1em 1em 3em;
+    text-decoration: none;
 
-    @include media(max-width em(515)) {
+    @include media(max-width 32em) {
       padding: 0.75em 0.5em;
       text-align: center;
     };
 
-    @include media(max-width em(900)){
+    @include media(max-width 56.25em) {
       display: block;
     };
 
@@ -55,12 +60,12 @@ nav.bourbon {
       &.#{$site} {
         background-image: url("/images/bourbon-nav/#{$site}.png");
 
-        @include hidpi {
+        @media only screen and (min-resolution: 125dpi) {
           background-image: url("/images/bourbon-nav/#{$site}@2x.png");
           background-size: 20%;
         }
 
-        @include media(max-width em(515)) {
+        @include media(max-width 32em) {
           background-image: none;
         };
       }
@@ -71,13 +76,15 @@ nav.bourbon {
     color: rgba(#fff, 0.6);
     float: right;
     font-size: 1em;
+    margin: 0;
 
-    @include media(max-width em(900)) {
+    @include media(max-width 56.25em) {
       display: none;
     };
 
     a {
       padding: 1em 0;
+      text-decoration: none;
 
       &:hover {
         background-color: transparent;

data/source/stylesheets/_refill.scss

@@ -0,0 +1,215 @@
+section.refill {
+  @include clearfix;
+  margin-bottom: 2em;
+  padding-bottom: 1em;
+  position: relative;
+
+  > h3 {
+    margin-bottom: 1.3em;
+    margin-top: 1em;
+    padding-top: 0.5em;
+  }
+}
+
+.refills-wrapper {
+  @include outer-container($refills-max-width);
+  padding: 1em;
+
+  h1.main-header {
+    background-color: $refills-color;
+    display: inline-block;
+    padding: 0.5em;
+  }
+}
+
+.refill-centering {
+  text-align: center;
+
+  & > * {
+    display: inline-block;
+
+    & > * {
+      text-align: left;
+    }
+  }
+
+  script {
+    display: none;
+  }
+}
+
+.line-behind-text {
+  border-bottom: 1px solid #cacaca;
+  margin-bottom: 4.5em;
+  text-align: center;
+}
+
+.line-behind-text h6 {
+  background: $refills-body-background-color;
+  color: #808080;
+  display: inline-block;
+  font-family: $refills-narrow-sans;
+  font-size: 1em;
+  font-weight: 500;
+  padding: 0 10px;
+  position: relative;
+  text-transform: uppercase;
+  top: 34px;
+}
+
+.refill h6 {
+  margin-bottom: 1.5em;
+}
+
+.js-hide-code,
+.js-show-code {
+  border-top: 1px dashed #bebcbc;
+  color: #7e7a7a;
+  font-size: 0.8em;
+  text-transform: uppercase;
+  width: 9em;
+
+  &:hover {
+    color: $refills-accent-color;
+  }
+}
+
+.js-show-code {
+  display: inline-block;
+  padding: 0.5em 1em;
+}
+
+.js-hide-code {
+  display: none;
+  padding: 0.5em 1em;
+}
+
+
+.refill-control {
+  display: block;
+  margin-bottom: 2em;
+  text-align: center;
+  width: 100%;
+
+  a {
+    line-height: 1.5em;
+    text-decoration: none;
+  }
+
+}
+
+.refill-snippet {
+  margin-top: 4.5em;
+  padding: 0 1em;
+
+  table {
+    border-collapse: collapse;
+    margin: (1.5em / 2) 0;
+    table-layout: fixed;
+    width: 100%;
+  }
+
+  th {
+    font-weight: bold;
+    padding: (1.5em / 2) 0;
+    text-align: left;
+  }
+
+  td {
+    padding: (1.5em / 2) 0;
+  }
+
+  tr,
+  td,
+  th {
+    vertical-align: middle;
+  }
+}
+
+pre[class*="language-"] {
+  background-color: #f8f8f8;
+  border-top: 2px solid silver;
+  height: 300px;
+  line-height: 1em;
+}
+
+.snippets-table {
+  display: none;
+
+  td {
+    border-bottom: 0;
+  }
+
+  .snippet:nth-child(4n) {
+    display: none;
+  }
+}
+
+.snippet {
+  @include media($refills-medium-screen) {
+    margin-bottom: 2em;
+  }
+
+  .copy-source-container {
+    min-height: 3.4em;
+
+    @include media($refills-medium-screen) {
+      min-height: 2.5em;
+    }
+
+    @include media($refills-large-screen) {
+      min-height: 1em;
+    }
+  }
+
+  &:nth-of-type(1) .copy-source {
+    background: #e98065;
+  }
+
+  &:nth-of-type(2) .copy-source {
+    background: #55a1d4;
+  }
+
+  &:nth-of-type(3) .copy-source:nth-of-type(1) {
+    background: #e9c05b;
+  }
+
+  &:nth-of-type(3) .copy-source:nth-of-type(2) {
+    background: #89b981;
+  }
+
+  .copy-source {
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 0;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    color: #fff;
+    display: inline-block;
+    font-size: 0.5em;
+    font-weight: 800;
+    padding: 0.4em 1em;
+    text-transform: uppercase;
+
+    &:hover,
+    &:active {
+      background-color: lighten(#333, 20%);
+      color: #fff;
+    }
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  code {
+    font-size: 0.6em;
+    line-height: 1.4em;
+    max-height: 25em;
+    overflow: scroll;
+  }
+}
+
+.refill-smaller {
+  margin: auto;
+  width: 70%;
+}