forever_style_guide 2.0.3 → 3.0.0

data/app/assets/stylesheets/forever_style_guide/modules/_dropdown-menu-product-main.scss

@@ -1,52 +0,0 @@
-// "Products & Services" Primary nav, featured first item styling
-$product-image-main-width: 550px;
-$product-image-main-height: 521px;
-
-.dropdown-menu-product-main {
-  padding-bottom: 15px;
-
-  .dropdown-menu-product-item {
-    margin-bottom: 20px;
-  }
-  .dropdown-menu-product-img {
-    position: absolute;
-    width: $product-image-main-width;
-    max-width: none;
-    height: $product-image-main-height;
-    max-height: none;
-    margin-top: 0;
-    margin-left: 50%;
-    top: -120px;
-    left: (-$product-image-main-width / 2) - 20;
-
-    @media (max-width: $grid-float-breakpoint) {
-      top: -90px;
-    }
-  }
-  .dropdown-menu-product-details {
-    @media (min-width: $screen-xl) {
-      width: 300px;
-      margin-left: auto;
-      margin-right: auto;
-    }
-  }
-  .dropdown-menu-product-title {
-    @media (min-width: $screen-xl) {
-      margin-bottom: 30px;
-    }
-  }
-  .dropdown-menu-product-description {
-    padding-top: 10px;
-  }
-  .dropdown-menu-product-btn {
-    @media (max-width: $grid-float-breakpoint) {
-      height: 62px;
-      font-size: $font-size-300;
-      line-height: 18px;
-      @include box-shadow($shadow-color, 0, 2px, 4px, 0);
-    }
-    @media (max-width: $screen-sm) {
-      font-size: $font-size-400;
-    }
-  }
-}

data/app/assets/stylesheets/forever_style_guide/modules/_dropdown-menu-product.scss

@@ -1,82 +0,0 @@
-// "Products & Services" primary nav items
-$product-image-height: 50px;
-$product-image-lg-factor: 1.2;
-$product-image-sm-factor: 0.85;
-
-.dropdown-menu-product {
-  padding: 25px;
-
-  @media (max-width: $grid-float-breakpoint) {
-    padding: 5px;
-  }
-
-  a:hover,
-  a:active,
-  a:focus {
-    text-decoration: none;
-  }
-  .dropdown-menu-product-title,
-  .dropdown-menu-product-description {
-    color: color('text');
-  }
-  &:hover,
-  &:focus,
-  &:active {
-    .dropdown-menu-product-title {
-      color: color('secondary');
-      text-decoration: underline;
-    }
-  }
-  .well {
-    margin-bottom: 0;
-    min-height: 310px;
-    background-color: color('white');
-    @extend %card-shadow;
-
-    @media (max-width: $grid-float-breakpoint) {
-      min-height: 0;
-      margin-bottom: 15px;
-      padding: 0;
-    }
-    @media (min-width: $screen-xl) {
-      min-height: 270px;
-    }
-    @media (min-width: $screen-xxl) {
-      min-height: 230px;
-    }
-  }
-}
-.dropdown-menu-product-item {
-  margin-bottom: 30px;
-  height: $product-image-height;
-  text-align: center;
-
-  @media (max-width: $grid-float-breakpoint) {
-    margin-bottom: 10px;
-  }
-}
-.dropdown-menu-product-img {
-  padding-top: 10px;
-
-  @media (max-width: $grid-float-breakpoint) {
-    max-height: $product-image-height * $product-image-sm-factor;
-  }
-  @media (max-width: $screen-sm) {
-    max-height: $product-image-height;
-  }
-  @media (min-width: $grid-float-breakpoint) {
-    max-height: $product-image-height * $product-image-lg-factor;
-  }
-}
-.dropdown-menu-product-details {
-  position: relative;
-  min-width: 220px;
-
-  @media (max-width: $grid-float-breakpoint) {
-    min-width: 0;
-  }
-}
-.dropdown-menu-product-title,
-.dropdown-menu-product-description {
-  text-align: center;
-}

data/app/assets/stylesheets/forever_style_guide/modules/_navbar.scss

@@ -1,132 +0,0 @@
-%nav-item-stack {
-  display: inline-block;
-  padding: 5px 10px 0;
-  text-align: center;
-
-  .nav-item-tab {
-    padding: 5px 10px 0;
-  }
-  .nav-item-icon {
-    font-size: 20px;
-  }
-  .nav-item-label {
-    display: inherit;
-    font-size: $font-size-100;
-    line-height: 1;
-  }
-}
-
-.navbar {
-  @extend %card-style;
-  position: relative;
-  border: 0;
-  border-radius: 0;
-  background-color: $color-nav-bg;
-
-  .navbar-brand {
-    display: block;
-    padding: 10px 0 10px 10px;
-    height: $header_height;
-
-    @media (min-width: $grid-float-breakpoint) {
-      padding-right: 30px;
-    }
-
-    .navbar-brand-logo {
-      width: 190px;
-    }
-  }
-
-  .nav-item-stack {
-    @extend %nav-item-stack;
-  }
-
-  .navbar-right {
-    text-align: right;
-
-    @media (max-width: $grid-float-breakpoint) {
-      background-color: color('gray-100');
-      margin-bottom: 0;
-      padding-bottom: 8px;
-    }
-  }
-
-  .navbar-toggle {
-    padding: 10px;
-    border: 0;
-
-    &:hover,
-    &:active,
-    &:focus {
-      background-color: transparent;
-    }
-  }
-  .navbar-collapse {
-    @extend %card-style;
-
-    @media (min-width: $grid-float-breakpoint) {
-      @include box-shadow(transparent, 0, 0, 0, 0);
-      text-shadow: none;
-    }
-    @media (max-width: $grid-float-breakpoint) {
-      border-top: 0;
-    }
-  }
-
-  .navbar-nav {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
-   //nuke bootstrap navbar a tag psuedo-selectors
-  .navbar-nav > .open > a {
-    color: $color-nav-hover;
-    background-color: $color-nav-active;
-    border-color: color('secondary');
-    &:hover,
-    &:active,
-    &:focus {
-      color: $color-nav-hover;
-      background-color: $color-nav-active;
-    }
-  }
-  .navbar-nav > li > a {
-    padding-top: 15px;
-    &:hover,
-    &:active,
-    &:focus {
-      color: $color-nav-hover;
-    }
-  }
-}
-
-.navbar-fixed-top {
-  .navbar-collapse {
-    max-height: none;
-  }
-}
-
-.navbar-dropdown {
-  .nav,
-  .collapse
-  .dropup,
-  .dropdown {
-    position: inherit;
-    &.dropdown-left {
-      position: relative;
-      .dropdown-menu-nav {
-        right: 0;
-      }
-    }
-  }
-}
-
-.nav.navbar-nav.navbar-right {
-  position: relative;
-
-  // switches at screen collapse breakpoint
-  @media(max-width: $grid-float-breakpoint) {
-    padding: 10px 0 10px 15px;
-    min-height: 70px;
-  }
-}

data/app/views/forever_style_guide/demo/navigation-fixed-signed-in-app.html.erb

@@ -1,22 +0,0 @@
-<header id="header-is_fixed">
-  <%= render partial: "forever_style_guide/sections/components/navigation/signed_in" %>
-</header>
-<div class="container l-section">
-  <div class="card l-section-far l-padded-thick" style="min-height: 800px;">
-    <h1>Fixed Navigation - Signed In User</h1>
-    <p>To implement:</p>
-    <ol>
-      <li>Add the account popover triggers markup for mobile and desktop w/ in your conditional check against the logged in state.</li>
-      <li>Immediately following the triggers include the popover content markup</li>
-      <li>Be sure to include the (empty) account popover containers for desktop and mobile immediately after the closing &lt;nav&gt; tag.</li>
-      <li>Include the  account-popover.js snippet</li>
-    </ol>
-    <p>How it works:</p>
-    <ul>
-      <li>On the desktop the avatar and name expose a popover inlined into the header the same way we do in the app, albeit with slightly modified contextual styling.</li>
-      <li>In mobile contexts, the popover behaves like an additional dropdown item and we must check against viewport height in the same manner we do for the <%= link_to "basic fixed header nav", demo_link('navigation-fixed') %> in mobile contexts. </li>
-      <li>Reference: <a href='http://getbootstrap.com/javascript/#dropdowns-methods'>Bootstrap Popovers</a></li>
-    </ul>
-  </div>
-</div>
-

data/app/views/forever_style_guide/demo/navigation-fixed-signed-in.html.erb

@@ -1,22 +0,0 @@
-<header id="header-is_fixed">
-  <%= render partial: "forever_style_guide/sections/components/navigation/marketing_signed_in" %>
-</header>
-<div class="container l-section">
-  <div class="card l-section-far l-padded-thick" style="min-height: 800px;">
-  <h1>Fixed Navigation - Signed In User</h1>
-    <p>To implement:</p>
-    <ol>
-      <li>Add the account popover triggers markup for mobile and desktop w/ in your conditional check against the logged in state.</li>
-      <li>Immediately following the triggers include the popover content markup</li>
-      <li>Be sure to include the (empty) account popover containers for desktop and mobile immediately after the closing &lt;nav&gt; tag.</li>
-      <li>Include the  account-popover.js snippet</li>
-    </ol>
-    <p>How it works:</p>
-    <ul>
-      <li>On the desktop the avatar and name expose a popover inlined into the header the same way we do in the app, albeit with slightly modified contextual styling.</li>
-      <li>In mobile contexts, the popover behaves like an additional dropdown item and we must check against viewport height in the same manner we do for the <%= link_to "basic fixed header nav", demo_link('navigation-fixed') %> in mobile contexts. </li>
-      <li>Reference: <a href='http://getbootstrap.com/javascript/#dropdowns-methods'>Bootstrap Popovers</a></li>
-    </ul>
-  </div>
-</div>
-    

data/app/views/forever_style_guide/demo/navigation-fixed.html.erb

@@ -1,28 +0,0 @@
-<header id="header-is_fixed">
-  <%= render partial: "forever_style_guide/sections/components/navigation/marketing" %>
-</header>
-<div class="container l-section">
-  <div class="card l-section-far l-padded-thick" style="min-height: 800px;">
-  <h1>Fixed Navigation</h1>
-    <p>To implement fixed navigation:</p>
-    <ol>
-      <li>Add an id of "header-is_fixed" to the main &lt;header&gt; element</li>
-      <li>Add top padding to the &lt;body&gt; to match the height of the header (in most cases this will be equal to the $header_height variable unless there's a subnav or additional fixed elements.)</li>
-      <li>Include the nav-fixed.js snippet</li>
-    </ol>
-    <p>How it works:</p>
-    <ul>
-      <li>On the desktop the header is fixed and behaves as any other fixed element</li>
-      <li>In mobile contexts, we have to make sure that the nav is scrollable when expanded beyond the height of the viewport
-        <ul>
-          <li>We can rely on <a href='http://getbootstrap.com/javascript/#dropdowns-methods'>Bootstrap's Dropdown Methods</a> to help here.</li>
-          <li>When a dropdown w/ in the nav is expanded we check to see if this makes the height of the header greater than the height of the viewport</li>
-          <li>If it is greater, we give the header a max height equal to the viewport height to allow for vertical scrolling w/ in the header.</li>
-          <li>We make the body (now behind the header) fixed so it does interfere w/ scrolling.</li>
-          <li>When the dropdown or the collapse nav is closed, we make sure the body is no longer fixed</li>
-        </ul>
-      </li>
-    </ul>
-  </div>
-</div>
-    

data/app/views/forever_style_guide/sections/components/_navigation.html.erb

@@ -1,69 +0,0 @@
-<div class="card style-guide-partial" id="navigation">
-  <h2 class="style-guide-partial-title">
-    Navigation
-  </h2>
-
-  <div class="style-guide-partial-description">
-    Built on top of <%= link_to "Bootstrap's navbar", "http://getbootstrap.com/components/#navbar" %> component.  Provides a stylish, responsive main app navigation.
-  </div>
-
-  <div class="style-guide-partial-content">
-    <label>Basic Navigation</label>
-    <p><%= link_to "Fullscreen Demo", demo_link('navigation') %></p>
-    <div class="style-guide-partial-rendered">
-      <%= render partial: "forever_style_guide/sections/components/navigation/basic" %>
-    </div>
-    <div class="style-guide-toggle">
-      <input id="style-guide-toggle-nav_basic" class="style-guide-toggle-input" type="checkbox" />
-      <label for="style-guide-toggle-nav_basic" class="style-guide-toggle-label">
-        <pre class="style-guide-toggle-source prettyprint linenums"><%= escape_erb_for_display("forever_style_guide/sections/components/navigation/_basic.erb") %></pre>
-        <div class="style-guide-toggle-show">Show source code</div>
-        <div class="style-guide-toggle-hide">Hide source code</div>
-      </label>
-    </div>
-    </br>
-    <label>Dropdown Navigation</label>
-    <div class="style-guide-partial-rendered">
-      <%= render partial: "forever_style_guide/sections/components/navigation/dropdown" %>
-    </div>
-    <div class="style-guide-toggle">
-      <input id="style-guide-toggle-nav_dropdown" class="style-guide-toggle-input" type="checkbox" />
-      <label for="style-guide-toggle-nav_dropdown" class="style-guide-toggle-label">
-        <pre class="style-guide-toggle-source prettyprint linenums"><%= escape_erb_for_display("forever_style_guide/sections/components/navigation/_dropdown.erb") %></pre>
-        <div class="style-guide-toggle-show">Show source code</div>
-        <div class="style-guide-toggle-hide">Hide source code</div>
-      </label>
-    </div>
-    </br>
-    <label>Stacked/Justified Navigation</label>
-    <div class="style-guide-partial-rendered">
-      <%= render partial: "forever_style_guide/sections/components/navigation/stacked" %>
-    </div>
-    <div class="style-guide-toggle">
-      <input id="style-guide-toggle-nav_stacked" class="style-guide-toggle-input" type="checkbox" />
-      <label for="style-guide-toggle-nav_stacked" class="style-guide-toggle-label">
-        <pre class="style-guide-toggle-source prettyprint linenums"><%= escape_erb_for_display("forever_style_guide/sections/components/navigation/_stacked.erb") %></pre>
-        <div class="style-guide-toggle-show">Show source code</div>
-        <div class="style-guide-toggle-hide">Hide source code</div>
-      </label>
-    </div>
-    <div class="l-section">
-      <h2 class="style-guide-partial-title">
-        Fixed Header Navigation
-      </h2>
-      <p>Checkout out the <%= link_to "Fixed Header Full Screen Demo", demo_link('navigation-fixed') %> for visual reference and specifics on implementation</p>
-      <div class="l-padded-thin"></div>
-    </div>
-    <div class="l-section-close">
-      <h2 class="style-guide-partial-title">
-        Fixed Header - Signed In State
-      </h2>
-      <p>Checkout out the <%= link_to "Signed In State Full Screen Demo", demo_link('navigation-fixed-signed-in') %> for visual reference and specifics on implementation</p>
-      <div class="l-padded-thin"></div>
-    </div>
-  </div>
-
-</div>
-
-
-

data/app/views/forever_style_guide/sections/components/navigation/_account_popover.erb

@@ -1,71 +0,0 @@
-<div class="account-popover-trigger visible-md visible-lg" data-toggle="popover-desktop">
-  <%= image_tag("style_guide/personas/jane_avatar.png", alt: "Jane Persona", title: "Jane Persona Lada Lada Long Name", class: "avatar avatar-xs") %>
-  <p class="account-popover-user">
-    <span class="small">Signed in as </span> <br />
-    <strong class="color-gray-600">Jane Persona Lada Lada Long Name</strong>
-  </p>
-</div>
-
-<div class="account-popover-trigger visible-xs visible-sm l-padded-thin" data-toggle="popover-mobile">
-  <%= image_tag("style_guide/personas/jane_avatar.png", alt: "Jane Persona", title: "Jane Persona Lada Lada Long Name", class: "avatar avatar-xs") %>
-  <p class="account-popover-user">
-    <span class="small">Signed in as </span> <br />
-    <strong class="color-gray-600">Jane Persona Lada Lada Long Name</strong>
-  </p>
-</div>
-
-<div class="account-popover hidden">
-  <div class="account-popover-storage l-padded-thin">
-    <div class="row">
-      <div class="col-sm-6 account-popover-membership_type">Permanent Member</div>
-      <div class="col-sm-6 text-right">
-        <%= link_to "#", class: 'account-popover-link account-popover-link-text' do %>
-          <span class="account-popover-percent_used">26%</span> of <span class="account-popover-total_storage">10GB</span> <%= fa_icon("chevron-right") %>
-        <% end %>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-sm-12">
-        <div class="progress progress-thin">
-          <div class="progress-bar" role="progressbar" aria-valuenow="26" aria-valuemin="0" aria-valuemax="100" style="width: 26%">
-            <span class="progress-label">26%</span>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="row account-popover-storage-upgrade">
-      <div class="col-sm-12">
-        <button class="btn btn-gray btn-inverse btn-block">Upgrade My Storage</button>
-      </div>
-    </div>
-  </div>
-  <div class="account-popover-app">
-    <div class="row">
-      <div class="col-sm-6">
-        <%= link_to "#", class: 'btn btn-link btn-inverse account-popover-link', title: 'My Home' do %>
-          <%= fa_icon("home", text: "Home", class:"nav-item-icon") %>
-        <% end %>
-        <%= link_to "#", class: 'btn btn-link btn-inverse account-popover-link', title: 'Library' do %>
-          <%= fa_icon("th-large", text: "Library", class:"nav-item-icon") %>
-        <% end %>
-      </div>
-      <div class="col-sm-6">
-        <%= link_to "#", class: 'btn btn-link btn-inverse account-popover-link', title: 'Projects' do %>
-          <%= fa_icon("paint-brush", text: "Projects", class:"nav-item-icon") %>
-        <% end %>
-        <%= link_to "#", class: 'btn btn-link btn-inverse account-popover-link', title: 'People' do %>
-          <%= fa_icon("group", text: "People", class:"nav-item-icon") %>
-        <% end %>
-      </div>
-    </div>
-  </div>
-  <div class="account-popover-settings l-padded-thin">
-    <div class="row">
-      <div class="col-sm-12 text-center">
-        <%= link_to 'Settings', "#", class: 'account-popover-link', title: 'Account Settings' %>
-        <%= link_to 'Order History', "#", class: 'account-popover-link', title: 'Order History' %>
-        <%= link_to 'Log Out', "#", class: 'account-popover-link', title: 'Log Out' %>
-      </div>
-    </div>
-  </div>
-</div>