docs/components/top-bar.html.erb in zurb-foundation-4.2.1 vs docs/components/top-bar.html.erb in zurb-foundation-4.2.2
- old
+ new
@@ -74,14 +74,14 @@
<div class="row">
<div class="large-12 columns">
<h3>Build With HTML Classes</h3>
- <p>The top bar is a pretty complex piece of magical UI goodness, which makes it really difficult to create a mixin from it. We rely on many presentational classes to accomplish the styles and there's a lot happening in the JS. The top bar is hoverable by default but can be changed to a click event by adding a simple <code>data-option="is_hover:false"</code> to the <code><nav></code> element. <a href="#clickable">See an example below</a>.</p>
+ <p>The top bar is a pretty complex piece of magical UI goodness, which makes it really difficult to create a mixin from it. We rely on many presentational classes to accomplish the styles and there's a lot happening in the JS. The top bar is hoverable by default but can be changed to a click event by adding a simple <code>data-options="is_hover:false"</code> to the <code><nav></code> element. <a href="#clickable">See an example below</a>.</p>
<h5>Basic Needs</h5>
- <p>The top bar has four main elements, three of which are needed for proper functionality: <code>ul.title-area</code>, a <code>ul class="right/left</code> element enclosed in a <code>section class="top-bar-section"</code>, and the <code>li.toggle-topbar</code> element that will expand the menu in the mobile layout. You can leave out the li class="name" as long as you include the .toggle-topbar element.</p>
+ <p>The top bar has four main elements, three of which are needed for proper functionality: <code>ul.title-area</code>, a <code>ul class="right/left</code> element enclosed in a <code>section class="top-bar-section"</code>, and the <code>li.toggle-topbar</code> element that will expand the menu in the mobile layout. <!-- You can leave out the li class="name" as long as you include the .toggle-topbar element. --></p>
<h5>Positioning the Bar</h5>
<p>The top bar is built with a single <code>nav</code> element with a class of <code>top-bar</code>. It will take on full-browser width by default. To make the top bar stay fixed as you scroll, wrap it in <code>div class="fixed"</code>. If you want your navigation to be set to your grid width, wrap it in <code>div class="contain-to-grid"</code>. You may use <code>fixed</code> and <code>contain-to-grid</code> together.</p>
<h5>Building the Nav</h5>
@@ -268,65 +268,65 @@
<h4>Available SCSS Variables</h4>
<p>We do include SCSS variable to help you control some of the styles for the top bar. Overall the styles are written mobile first, so they are much easier to override than the previous iteration of the top bar.</p>
<%= code_example '
/* Background color for the top bar */
-$topbar-bg: #111;
+$topbar-bg: #111;
/* Height and margin */
-$topbar-height: 45px;
-$topbar-margin-bottom: emCalc(30px);
+$topbar-height: 45px;
+$topbar-margin-bottom: emCalc(30px);
/* Control Input height for top bar */
-$topbar-input-height: 2.45em;
+$topbar-input-height: 2.45em;
/* Controlling the styles for the title in the top bar */
-$topbar-title-weight: bold;
-$topbar-title-font-size: emCalc(17px);
+$topbar-title-weight: bold;
+$topbar-title-font-size: emCalc(17px);
/* Style the top bar dropdown elements */
-$topbar-dropdown-bg: #222;
-$topbar-dropdown-link-color: #fff;
-$topbar-dropdown-link-bg: lighten($topbar-bg, 5%);
-$topbar-dropdown-toggle-size: 5px;
-$topbar-dropdown-toggle-color: #fff;
-$topbar-dropdown-toggle-alpha: 0.5;
+$topbar-dropdown-bg: #222;
+$topbar-dropdown-link-color: #fff;
+$topbar-dropdown-link-bg: lighten($topbar-bg, 5%);
+$topbar-dropdown-toggle-size: 5px;
+$topbar-dropdown-toggle-color: #fff;
+$topbar-dropdown-toggle-alpha: 0.5;
/* Set the link colors and styles for top-level nav */
-$topbar-link-color: #fff;
-$topbar-link-color-hover: #fff;
-$topbar-link-color-active: #fff;
-$topbar-link-weight: bold;
-$topbar-link-font-size: emCalc(13px);
-$topbar-link-hover-lightness: -30%; /* Darken by 30% */
-$topbar-link-bg-hover: darken($topbar-bg, 3%);
-$topbar-link-bg-active: darken($topbar-bg, 3%);
+$topbar-link-color: #fff;
+$topbar-link-color-hover: #fff;
+$topbar-link-color-active: #fff;
+$topbar-link-weight: bold;
+$topbar-link-font-size: emCalc(13px);
+$topbar-link-hover-lightness: -30%; /* Darken by 30% */
+$topbar-link-bg-hover: darken($topbar-bg, 3%);
+$topbar-link-bg-active: darken($topbar-bg, 3%);
-$topbar-dropdown-label-color: #555;
+$topbar-dropdown-label-color: #555;
$topbar-dropdown-label-text-transform: uppercase;
-$topbar-dropdown-label-font-weight: bold;
-$topbar-dropdown-label-font-size: emCalc(10px);
+$topbar-dropdown-label-font-weight: bold;
+$topbar-dropdown-label-font-size: emCalc(10px);
/* Top menu icon styles */
-$topbar-menu-link-transform: uppercase;
-$topbar-menu-link-font-size: emCalc(13px);
-$topbar-menu-link-weight: bold;
-$topbar-menu-link-color: #fff;
-$topbar-menu-icon-color: #fff;
-$topbar-menu-link-color-toggled: #888;
-$topbar-menu-icon-color-toggled: #888;
+$topbar-menu-link-transform: uppercase;
+$topbar-menu-link-font-size: emCalc(13px);
+$topbar-menu-link-weight: bold;
+$topbar-menu-link-color: #fff;
+$topbar-menu-icon-color: #fff;
+$topbar-menu-link-color-toggled: #888;
+$topbar-menu-icon-color-toggled: #888;
/* Transitions and breakpoint styles */
-$topbar-transition-speed: 300ms;
-$topbar-breakpoint: emCalc(940px); /* Change to 9999px for always mobile layout */
-$topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")";
+$topbar-transition-speed: 300ms;
+$topbar-breakpoint: emCalc(940px); /* Change to 9999px for always mobile layout */
+$topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")";
/* Divider Styles */
-$topbar-divider-border-bottom: solid 1px lighten($topbar-bg, 10%);
-$topbar-divider-border-top: solid 1px darken($topbar-bg, 10%);
+$topbar-divider-border-bottom: solid 1px lighten($topbar-bg, 10%);
+$topbar-divider-border-top: solid 1px darken($topbar-bg, 10%);
/* Sticky Class */
-$topbar-sticky-class: ".sticky";', :css %>
+$topbar-sticky-class: ".sticky";', :css %>
<p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_variables.scss</strong>.</p>
<hr>