@ -2,10 +2,10 @@
/ / foundation . zurb . com
/ / Licensed under MIT Open Source
@import " global " ;
@import " grid " ;
@import " buttons " ;
@import " forms " ;
@import ' global ' ;
@import ' grid ' ;
@import ' buttons ' ;
@import ' forms ' ;
/ /
/ / Top Bar Variables
@ -33,7 +33,7 @@ $topbar-link-weight: $font-weight-normal !default;
$topbar-link-font-size : rem-calc ( 13 ) !default ;
$topbar-link-hover-lightness : - 10 % !default ; / / Darken by 10 %
$topbar-link-bg : $topbar-bg !default ;
$topbar-link-bg-hover : $oil !default ;
$topbar-link-bg-hover : $jet !default ;
$topbar-link-bg-color-hover : $charcoal !default ;
$topbar-link-bg-active : $primary-color !default ;
$topbar-link-bg-active-hover : scale-color ( $primary-color , $lightness : - 14 % ) !default ;
@ -42,7 +42,7 @@ $topbar-link-text-transform: none !default;
$topbar-link-padding : ( $topbar-height / 3 ) !default ;
$topbar-back-link-size : rem-calc ( 18 ) !default ;
$topbar-link-dropdown-padding : rem-calc ( 20 ) !default ;
$topbar-button-font-size : 0 .75 rem !default ;
$topbar-button-font-size : .75 rem !default ;
$topbar-button-top : 7 px !default ;
/ / Style the top bar dropdown elements
@ -50,11 +50,11 @@ $topbar-dropdown-bg: $oil !default;
$topbar-dropdown-link-color : $white !default ;
$topbar-dropdown-link-color-hover : $topbar-link-color-hover !default ;
$topbar-dropdown-link-bg : $oil !default ;
$topbar-dropdown-link-bg-hover : $oil !default ;
$topbar-dropdown-link-bg-hover : $jet !default ;
$topbar-dropdown-link-weight : $font-weight-normal !default ;
$topbar-dropdown-toggle-size : 5 px !default ;
$topbar-dropdown-toggle-color : $white !default ;
$topbar-dropdown-toggle-alpha : 0 .4 !default ;
$topbar-dropdown-toggle-alpha : .4 !default ;
$topbar-dropdown-label-color : $monsoon !default ;
$topbar-dropdown-label-text-transform : uppercase !default ;
@ -76,7 +76,7 @@ $topbar-menu-icon-position: $opposite-direction !default; // Change to $default-
$topbar-transition-speed : 300 ms !default ;
/ / Using rem-calc for the below breakpoint causes issues with top bar
$topbar-breakpoint : #{ lower-bound ( $medium-range ) } !default ; / / Change to 9999px for always mobile layout
$topbar-media-query : $medium-up !default ;
$topbar-media-query : " #{ $screen } and (min-width: #{ lower-bound ( $topbar-breakpoint ) } ) " ;
/ / Top-bar input styles
$topbar-input-height : rem-calc ( 28 ) !default ;
@ -93,13 +93,13 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
/ / Accessibility mixins for hiding and showing the menu dropdown items
@mixin topbar-hide-dropdown {
/ / Makes an element visually hidden by default , but visible when focused .
display : block ;
@include element-invisible () ;
display : block ;
}
@mixin topbar-show-dropdown {
display : block ;
@include element-invisible-off () ;
display : block ;
position : absolute !important ; / / Reset the position from static to absolute
}
@ -120,67 +120,76 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
width : 100 % ;
background : $topbar-bg ;
. top-bar { margin-bottom : $topbar-margin-bottom ; }
. top-bar {
margin-bottom : $topbar-margin-bottom ;
}
}
/ / Wrapped around . top-bar to make it stick to the top
. fixed {
width : 100 % ;
#{ $default-float } : 0 ;
position : fixed ;
top : 0 ;
width : 100 % ;
z-index : 99 ;
#{ $default-float } : 0 ;
& . expanded : not ( . top-bar ) {
overflow-y : auto ;
height : auto ;
width : 100 % ;
max-height : 100 % ;
overflow-y : auto ;
width : 100 % ;
. title-area {
position : fixed ;
width : 100 % ;
z-index : 99 ;
}
/ / Ensure you can scroll the menu on small screens
. top-bar-section {
z-index : 98 ;
margin-top : $topbar-height ;
z-index : 98 ;
}
}
}
. top-bar {
overflow : hidden ;
background : $topbar-bg ;
height : $topbar-height ;
line-height : $topbar-height ;
position : relative ;
background : $topbar-bg ;
margin-bottom : $topbar-margin-bottom ;
overflow : hidden ;
position : relative ;
/ / Topbar Global list Styles
ul {
margin-bottom : 0 ;
list-style : none ;
margin-bottom : 0 ;
}
. row { max-width : none ; }
. row {
max-width : none ;
}
form ,
input { margin-bottom : 0 ; }
input ,
select {
margin-bottom : 0 ;
}
input {
input ,
select {
font-size : $topbar-button-font-size ;
height : $topbar-input-height ;
padding-top : .35 rem ;
padding-bottom : .35 rem ;
font-size : $topbar-button-font-size ;
padding-top : .35 rem ;
}
. button , button {
padding-top : .35 rem + rem-calc ( 1 ) ;
padding-bottom : .35 rem + rem-calc ( 1 ) ;
margin-bottom : 0 ;
font-size : $topbar-button-font-size ;
margin-bottom : 0 ;
padding-bottom : .35 rem + rem-calc ( 1 ) ;
padding-top : .35 rem + rem-calc ( 1 ) ;
/ / position : relative ;
/ / top : - 1px ;
@ -193,26 +202,26 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
/ / Title Area
. title-area {
position : relative ;
margin : 0 ;
position : relative ;
}
. name {
font-size : $rem-base ;
height : $topbar-height ;
margin : 0 ;
font-size : $rem-base ;
/ / @ if $ topbar-menu-icon-position = = $ default-float { float : $opposite-direction ; }
h1 , h2 , h3 , h4 , p , span {
line-height : $topbar-height ;
font-size : $topbar-title-font-size ;
line-height : $topbar-height ;
margin : 0 ;
a {
font-weight : $topbar-title-weight ;
color : $topbar-link-color ;
width : 75 % ;
display : block ;
font-weight : $topbar-title-weight ;
padding : 0 $topbar-link-padding ;
width : 75 % ;
}
}
}
@ -225,58 +234,49 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
a {
color : $topbar-link-color ;
text-transform : $topbar-menu-link-transform ;
display : block ;
font-size : $topbar-menu-link-font-size ;
font-weight : $topbar-menu-link-weight ;
position : relative ;
display : block ;
padding : 0 $topbar-link-padding ;
height : $topbar-height ;
line-height : $topbar-height ;
padding : 0 $topbar-link-padding ;
position : relative ;
text-transform : $topbar-menu-link-transform ;
}
/ / Adding the class " menu-icon " will add the 3-line icon people love and adore .
& . menu-icon {
top : 50 % ;
margin-top : - 16 px ;
top : 50 % ;
a {
@include hamburger ( 16 px , false , 0 , 1 px , 6 px , $topbar-menu-icon-color , " " , false ) ;
@if $text-direction == rtl {
text-indent : - 58 px ;
}
color : $topbar-menu-link-color ;
height : 34 px ;
line-height : 33 px ;
padding : 0 $topbar-link-padding + rem-calc ( 25 ) 0 $topbar-link-padding ;
color : $topbar-menu-link-color ;
position : relative ;
& {
/ / @ include hamburger icon
/ /
/ / We use this to create the icon with three lines aka the hamburger icon , the menu-icon or the navicon
/ / $ width - Width of hamburger icon
/ / $ left - If false , icon will be centered horizontally | | explicitly set value in rem
/ / $ top - If false , icon will be centered vertically | | explicitly set value in rem
/ / $ thickness - thickness of lines in hamburger icon , set value in px
/ / $ gap - spacing between the lines in hamburger icon , set value in px
/ / $ color - icon color
/ / $ hover-color - icon color during hover , here it isn ' t set b/c it would override $topbar-menu-icon-color-toggled
/ / $ offcanvas - Set to false of @ include in topbar
@include hamburger ( 16 px , false , 0 , 1 px , 6 px , $topbar-menu-icon-color , " " , false ) ;
}
}
}
}
/ / Change things up when the top-bar is expanded
& . expanded {
height : auto ;
background : transparent ;
height : auto ;
. title-area { background : $topbar-bg ; }
. title-area {
background : $topbar-bg ;
}
. toggle-topbar {
a { color : $topbar-menu-link-color-toggled ;
a {
color : $topbar-menu-link-color-toggled ;
span : : after {
/ / Shh , don ' t tell, but box-shadows create the menu icon :)
/ / Change the color of the bars when the menu is expanded , using given thickness from hamburger ( ) above
@ -286,6 +286,21 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
}
}
/ / Fixes an issue with Desktop and Mobile Safari where deeply-nested menus don ' t appear
@media screen and ( - webkit-min-device-pixel-ratio : 0 ) {
. top-bar-section {
. has-dropdown . moved > . dropdown ,
. dropdown {
clip : initial ;
}
/ / This was needed as parent ul ' s had padding, and the clip: was allowing content to peak through
. has-dropdown : not ( . moved ) > ul {
padding : 0 ;
}
}
}
}
}
@ -297,12 +312,12 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
@include single-transition ( $default-float , $topbar-transition-speed ) ;
ul {
padding : 0 ;
width : 100 % ;
height : auto ;
display : block ;
font-size : $rem-base ;
height : auto ;
margin : 0 ;
padding : 0 ;
width : 100 % ;
}
. divider ,
@ -315,54 +330,60 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
ul li {
background : $topbar-dropdown-bg ;
& > a {
display : block ;
width : 100 % ;
> a {
color : $topbar-link-color ;
padding : 12 px 0 12 px 0 ;
padding-#{$default-float} : $topbar-link-padding ;
display : block ;
font-family : $topbar-link-font-family ;
font-size : $topbar-link-font-size ;
font-weight : $topbar-link-weight ;
padding-#{$default-float} : $topbar-link-padding ;
padding : 12 px 0 12 px $topbar-link-padding ;
text-transform : $topbar-link-text-transform ;
width : 100 % ;
& . button {
font-size : $topbar-link-font-size ;
padding-#{$opposite-direction} : $topbar-link-padding ;
padding-#{$default-float} : $topbar-link-padding ;
padding-#{$opposite-direction} : $topbar-link-padding ;
@include button-style ( $bg : $primary-color ) ;
}
& . button . secondary { @include button-style ( $bg : $secondary-color ) ; }
& . button . success { @include button-style ( $bg : $success-color ) ; }
& . button . alert { @include button-style ( $bg : $alert-color ) ; }
& . button . warning { @include button-style ( $bg : $warning-color ) ; }
& . button . info { @include button-style ( $bg : $info-color ) ; }
}
> button {
font-size : $topbar-link-font-size ;
padding-#{$opposite-direction} : $topbar-link-padding ;
padding-#{$default-float} : $topbar-link-padding ;
padding-#{$opposite-direction} : $topbar-link-padding ;
@include button-style ( $bg : $primary-color ) ;
& . secondary { @include button-style ( $bg : $secondary-color ) ; }
& . success { @include button-style ( $bg : $success-color ) ; }
& . alert { @include button-style ( $bg : $alert-color ) ; }
& . warning { @include button-style ( $bg : $warning-color ) ; }
& . info { @include button-style ( $bg : $info-color ) ; }
}
/ / Apply the hover link color when it has that class
& : hover : not ( . has-form ) > a {
background-color : $topbar-link-bg-color-hover ;
color : $topbar-link-color-hover ;
@if ( $topbar-link-bg-hover ) {
background : $topbar-link-bg-hover ;
}
color : $topbar-link-color-hover ;
}
/ / Apply the active link color when it has that class
& . active > a {
background : $topbar-link-bg-active ;
color : $topbar-link-color-active ;
& : hover {
background : $topbar-link-bg-active-hover ;
color : $topbar-link-color-active-hover ;
@ -371,17 +392,20 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
/ / Add some extra padding for list items contains buttons
. has-form { padding : $topbar-link-padding ; }
. has-form {
padding : $topbar-link-padding ;
}
/ / Styling for list items that have a dropdown within them .
. has-dropdown {
position : relative ;
& > a {
> a {
& : after {
@if ( $topbar-arrows ) {
@include css-triangle ( $topbar-dropdown-toggle-size , rgba ( $topbar-dropdown-toggle-color , $topbar-dropdown-toggle-alpha ) , $default-float ) ;
}
margin-#{$opposite-direction} : $topbar-link-padding ;
margin-top : - ( $topbar-dropdown-toggle-size / 2 ) - 2 ;
position : absolute ;
@ -390,12 +414,15 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
}
& . moved { position : static ;
& > . dropdown {
& . moved {
position : static ;
> . dropdown {
@include topbar-show-dropdown () ;
width : 100 % ;
}
& > a : after {
> a : after {
display : none ;
}
}
@ -403,16 +430,16 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
/ / Styling elements inside of dropdowns
. dropdown {
@include topbar-hide-dropdown () ;
padding : 0 ;
position : absolute ;
#{ $default-float } : 100 % ;
top : 0 ;
z-index : 99 ;
@include topbar-hide-dropdown () ;
#{ $default-float } : 100 % ;
li {
width : 100 % ;
height : auto ;
width : 100 % ;
a {
font-weight : $topbar-dropdown-link-weight ;
@ -422,7 +449,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
}
& . title h5 , & . parent-link {
& . title h5 ,
& . parent-link {
/ / Back Button
margin-bottom : 0 ;
margin-top : 0 ;
@ -434,17 +462,24 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
& : hover { background : none ; }
}
}
& . has-form { padding : 8 px $topbar-link-padding ; }
. button , button { top : auto ; }
& . has-form {
padding : 8 px $topbar-link-padding ;
}
. button ,
button {
top : auto ;
}
}
label {
padding : 8 px $topbar-link-padding 2 px ;
margin-bottom : 0 ;
text-transform : $topbar-dropdown-label-text-transform ;
color : $topbar-dropdown-label-color ;
font-weight : $topbar-dropdown-label-font-weight ;
font-size : $topbar-dropdown-label-font-size ;
font-weight : $topbar-dropdown-label-font-weight ;
margin-bottom : 0 ;
padding : 8 px $topbar-link-padding 2 px ;
text-transform : $topbar-dropdown-label-text-transform ;
}
}
}
@ -455,8 +490,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
/ / Top Bar styles intended for screen sizes above the breakpoint .
@media #{ $topbar-media-query } {
. top-bar {
background : $topbar-bg ;
@include clearfix ;
background : $topbar-bg ;
overflow : visible ;
. toggle-topbar { display : none ; }
@ -470,21 +505,24 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
. name h6 a { width : auto ; }
input ,
select ,
. button ,
button {
font-size : rem-calc ( 14 ) ;
position : relative ;
height : $topbar-input-height ;
position : relative ;
top : (( $topbar-height - $topbar-input-height ) / 2 ) ;
}
& . expanded { background : $topbar-bg ; }
& . expanded {
background : $topbar-bg ;
}
}
. contain-to-grid . top-bar {
max-width : $row-width ;
margin : 0 auto ;
margin-bottom : $topbar-margin-bottom ;
margin : 0 auto ;
max-width : $row-width ;
}
. top-bar-section {
@ -492,9 +530,9 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
#{ $default-float } : 0 ! important ;
ul {
width : auto ;
height : auto !important ;
display : inline ;
height : auto !important ;
width : auto ;
li {
float : $default-float ;
@ -512,11 +550,12 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
color : $topbar-link-color-hover ;
}
}
& : not ( . has-form ) {
a : not ( . button ) {
padding : 0 $topbar-link-padding ;
line-height : $topbar-height ;
background : $topbar-link-bg ;
line-height : $topbar-height ;
padding : 0 $topbar-link-padding ;
& : hover {
background-color : $topbar-link-bg-color-hover ;
@if ( $topbar-link-bg-hover ) {
@ -525,12 +564,13 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
}
}
& . active : not ( . has-form ) {
a : not ( . button ) {
padding : 0 $topbar-link-padding ;
line-height : $topbar-height ;
color : $topbar-link-color-active ;
background : $topbar-link-bg-active ;
color : $topbar-link-color-active ;
line-height : $topbar-height ;
padding : 0 $topbar-link-padding ;
& : hover {
background : $topbar-link-bg-active-hover ;
color : $topbar-link-color-active-hover ;
@ -540,8 +580,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
. has-dropdown {
@if ( $topbar-arrows ) {
& > a {
@if $topbar-arrows {
> a {
padding-#{$opposite-direction} : $topbar-link-padding + $topbar-link-dropdown-padding !important ;
& : after {
@include css-triangle ( $topbar-dropdown-toggle-size , rgba ( $topbar-dropdown-toggle-color , $topbar-dropdown-toggle-alpha ) , top ) ;
@ -552,30 +592,30 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
& . moved { position : relative ;
& > . dropdown {
> . dropdown {
@include topbar-hide-dropdown () ;
}
}
& . hover , & . not-click : hover {
& > . dropdown {
> . dropdown {
@include topbar-show-dropdown () ;
}
}
> a : focus + . dropdown {
@include topbar-show-dropdown () ;
}
. dropdown li . has-dropdown {
& > a {
> a {
@if ( $topbar-dropdown-arrows ) {
& : after {
border : none ;
content : " \00bb " ;
top : 1 rem ;
margin-top : - 1 px ;
top : rem-calc ( 3 ) ;
#{ $opposite-direction } : 5px ;
line-height : 1 .2 ;
}
}
}
@ -584,28 +624,28 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
. dropdown {
#{ $default-float } : 0 ;
top : auto ;
background : transparent ;
min-width : 100 % ;
top : auto ;
li {
a {
background : $topbar-dropdown-link-bg ;
color : $topbar-dropdown-link-color ;
line-height : $topbar-height ;
white-space : nowrap ;
padding : 12 px $topbar-link-padding ;
background : $topbar-dropdown-link-bg ;
white-space : nowrap ;
}
& : not ( . has-form ) : not ( . active ) {
& > a : not ( . button ) {
color : $topbar-dropdown-link-color ;
> a : not ( . button ) {
background : $topbar-dropdown-link-bg ;
color : $topbar-dropdown-link-color ;
}
& : hover > a : not ( . button ) {
color : $topbar-dropdown-link-color-hover ;
background-color : $topbar-link-bg-color-hover ;
color : $topbar-dropdown-link-color-hover ;
@if ( $topbar-dropdown-link-bg-hover ) {
background : $topbar-dropdown-link-bg-hover ;
}
@ -613,8 +653,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
label {
white-space : nowrap ;
background : $topbar-dropdown-label-bg ;
white-space : nowrap ;
}
/ / Second Level Dropdowns
@ -625,11 +665,11 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
}
}
& > ul > . divider ,
& > ul > [ role = " separator " ] {
> ul > . divider ,
> ul > [ role = " separator " ] {
border-#{$opposite-direction} : $topbar-divider-border-bottom ;
border-bottom : none ;
border-top : none ;
border-#{$opposite-direction} : $topbar-divider-border-bottom ;
clear : none ;
height : $topbar-height ;
width : 0 ;
@ -637,8 +677,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
. has-form {
background : $topbar-link-bg ;
padding : 0 $topbar-link-padding ;
height : $topbar-height ;
padding : 0 $topbar-link-padding ;
}
/ / Position overrides for ul . right and ul . left
@ -682,10 +722,11 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
. has-dropdown {
& : hover {
& > . dropdown {
> . dropdown {
@include topbar-show-dropdown () ;
}
}
> a : focus + . dropdown {
@include topbar-show-dropdown () ;
}
Julian Ćwirko
10 years ago