docs/components/top-bar.html.erb in zurb-foundation-4.2.3 vs docs/components/top-bar.html.erb in zurb-foundation-4.3.0

- old
+ new

@@ -18,11 +18,10 @@ <li class="toggle-topbar menu-icon"><a href=""><span>Menu</span></a></li> </ul> <section class="top-bar-section"> <ul class="left"> - <li class="divider"></li> <li class="has-dropdown"><a href="<%= features_path %>">Item 1</a> <ul class="dropdown"> <li><label>Level One</label></li> <li><a href="#">Sub-item 1</a></li> @@ -277,23 +276,25 @@ <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 ' +$include-html-top-bar-classes: $include-html-classes; + /* Background color for the top bar */ $topbar-bg: #111; /* Height and margin */ $topbar-height: 45px; -$topbar-margin-bottom: emCalc(30px); +$topbar-margin-bottom: emCalc(30); /* Control Input height for top bar */ $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-font-size: emCalc(17); /* Style the top bar dropdown elements */ $topbar-dropdown-bg: #222; $topbar-dropdown-link-color: #fff; $topbar-dropdown-link-bg: lighten($topbar-bg, 5%); @@ -304,32 +305,32 @@ /* 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-font-size: emCalc(13); $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-text-transform: uppercase; $topbar-dropdown-label-font-weight: bold; -$topbar-dropdown-label-font-size: emCalc(10px); +$topbar-dropdown-label-font-size: emCalc(10); /* Top menu icon styles */ $topbar-menu-link-transform: uppercase; -$topbar-menu-link-font-size: emCalc(13px); +$topbar-menu-link-font-size: emCalc(13); $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-breakpoint: emCalc(940); /* 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%);