@ -2,10 +2,10 @@
/ / foundation . zurb . com / / foundation . zurb . com
/ / Licensed under MIT Open Source / / Licensed under MIT Open Source
@import " global " ; @import ' global ' ;
@import " grid " ; @import ' grid ' ;
@import " buttons " ; @import ' buttons ' ;
@import " forms " ; @import ' forms ' ;
/ / / /
/ / Top Bar Variables / / Top Bar Variables
@ -33,7 +33,7 @@ $topbar-link-weight: $font-weight-normal !default;
$topbar-link-font-size : rem-calc ( 13 ) !default ; $topbar-link-font-size : rem-calc ( 13 ) !default ;
$topbar-link-hover-lightness : - 10 % !default ; / / Darken by 10 % $topbar-link-hover-lightness : - 10 % !default ; / / Darken by 10 %
$topbar-link-bg : $topbar-bg !default ; $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-color-hover : $charcoal !default ;
$topbar-link-bg-active : $primary-color !default ; $topbar-link-bg-active : $primary-color !default ;
$topbar-link-bg-active-hover : scale-color ( $primary-color , $lightness : - 14 % ) !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-link-padding : ( $topbar-height / 3 ) !default ;
$topbar-back-link-size : rem-calc ( 18 ) !default ; $topbar-back-link-size : rem-calc ( 18 ) !default ;
$topbar-link-dropdown-padding : rem-calc ( 20 ) !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 ; $topbar-button-top : 7 px !default ;
/ / Style the top bar dropdown elements / / 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 : $white !default ;
$topbar-dropdown-link-color-hover : $topbar-link-color-hover !default ; $topbar-dropdown-link-color-hover : $topbar-link-color-hover !default ;
$topbar-dropdown-link-bg : $oil !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-link-weight : $font-weight-normal !default ;
$topbar-dropdown-toggle-size : 5 px !default ; $topbar-dropdown-toggle-size : 5 px !default ;
$topbar-dropdown-toggle-color : $white !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-color : $monsoon !default ;
$topbar-dropdown-label-text-transform : uppercase !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 ; $topbar-transition-speed : 300 ms !default ;
/ / Using rem-calc for the below breakpoint causes issues with top bar / / 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-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 / / Top-bar input styles
$topbar-input-height : rem-calc ( 28 ) !default ; $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 / / Accessibility mixins for hiding and showing the menu dropdown items
@mixin topbar-hide-dropdown { @mixin topbar-hide-dropdown {
/ / Makes an element visually hidden by default , but visible when focused . / / Makes an element visually hidden by default , but visible when focused .
display : block ;
@include element-invisible () ; @include element-invisible () ;
display : block ;
} }
@mixin topbar-show-dropdown { @mixin topbar-show-dropdown {
display : block ;
@include element-invisible-off () ; @include element-invisible-off () ;
display : block ;
position : absolute !important ; / / Reset the position from static to absolute 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 % ; width : 100 % ;
background : $topbar-bg ; 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 / / Wrapped around . top-bar to make it stick to the top
. fixed { . fixed {
width : 100 % ;
#{ $default-float } : 0 ;
position : fixed ; position : fixed ;
top : 0 ; top : 0 ;
width : 100 % ;
z-index : 99 ; z-index : 99 ;
#{ $default-float } : 0 ;
& . expanded : not ( . top-bar ) { & . expanded : not ( . top-bar ) {
overflow-y : auto ;
height : auto ; height : auto ;
width : 100 % ;
max-height : 100 % ; max-height : 100 % ;
overflow-y : auto ;
width : 100 % ;
. title-area { . title-area {
position : fixed ; position : fixed ;
width : 100 % ; width : 100 % ;
z-index : 99 ; z-index : 99 ;
} }
/ / Ensure you can scroll the menu on small screens / / Ensure you can scroll the menu on small screens
. top-bar-section { . top-bar-section {
z-index : 98 ;
margin-top : $topbar-height ; margin-top : $topbar-height ;
z-index : 98 ;
} }
} }
} }
. top-bar { . top-bar {
overflow : hidden ; background : $topbar-bg ;
height : $topbar-height ; height : $topbar-height ;
line-height : $topbar-height ; line-height : $topbar-height ;
position : relative ;
background : $topbar-bg ;
margin-bottom : $topbar-margin-bottom ; margin-bottom : $topbar-margin-bottom ;
overflow : hidden ;
position : relative ;
/ / Topbar Global list Styles / / Topbar Global list Styles
ul { ul {
margin-bottom : 0 ;
list-style : none ; list-style : none ;
margin-bottom : 0 ;
} }
. row { max-width : none ; } . row {
max-width : none ;
}
form , form ,
input { margin-bottom : 0 ; } input ,
select {
margin-bottom : 0 ;
}
input { input ,
height : $topbar-input-height ; select {
padding-top : .35 rem ; font-size : $topbar-button-font-size ;
padding-bottom : .35 rem ; height : $topbar-input-height ;
font-size : $topbar-button-font-size ; padding-bottom : .35 rem ;
padding-top : .35 rem ;
} }
. button , button { . 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 ; 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 ; / / position : relative ;
/ / top : - 1px ; / / top : - 1px ;
@ -193,26 +202,26 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
/ / Title Area / / Title Area
. title-area { . title-area {
position : relative ;
margin : 0 ; margin : 0 ;
position : relative ;
} }
. name { . name {
font-size : $rem-base ;
height : $topbar-height ; height : $topbar-height ;
margin : 0 ; margin : 0 ;
font-size : $rem-base ;
/ / @ if $ topbar-menu-icon-position = = $ default-float { float : $opposite-direction ; }
h1 , h2 , h3 , h4 , p , span { h1 , h2 , h3 , h4 , p , span {
line-height : $topbar-height ;
font-size : $topbar-title-font-size ; font-size : $topbar-title-font-size ;
line-height : $topbar-height ;
margin : 0 ; margin : 0 ;
a { a {
font-weight : $topbar-title-weight ;
color : $topbar-link-color ; color : $topbar-link-color ;
width : 75 % ;
display : block ; display : block ;
font-weight : $topbar-title-weight ;
padding : 0 $topbar-link-padding ; padding : 0 $topbar-link-padding ;
width : 75 % ;
} }
} }
} }
@ -225,59 +234,50 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
a { a {
color : $topbar-link-color ; color : $topbar-link-color ;
text-transform : $topbar-menu-link-transform ; display : block ;
font-size : $topbar-menu-link-font-size ; font-size : $topbar-menu-link-font-size ;
font-weight : $topbar-menu-link-weight ; font-weight : $topbar-menu-link-weight ;
position : relative ;
display : block ;
padding : 0 $topbar-link-padding ;
height : $topbar-height ; height : $topbar-height ;
line-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 . / / Adding the class " menu-icon " will add the 3-line icon people love and adore .
& . menu-icon { & . menu-icon {
top : 50 % ;
margin-top : - 16 px ; margin-top : - 16 px ;
top : 50 % ;
a { a {
@include hamburger ( 16 px , false , 0 , 1 px , 6 px , $topbar-menu-icon-color , " " , false ) ;
@if $text-direction == rtl { @if $text-direction == rtl {
text-indent : - 58 px ; text-indent : - 58 px ;
} }
color : $topbar-menu-link-color ;
height : 34 px ; height : 34 px ;
line-height : 33 px ; line-height : 33 px ;
padding : 0 $topbar-link-padding + rem-calc ( 25 ) 0 $topbar-link-padding ; padding : 0 $topbar-link-padding + rem-calc ( 25 ) 0 $topbar-link-padding ;
color : $topbar-menu-link-color ;
position : relative ; 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 / / Change things up when the top-bar is expanded
& . expanded { & . expanded {
height : auto ;
background : transparent ; background : transparent ;
height : auto ;
. title-area { background : $topbar-bg ; } . title-area {
background : $topbar-bg ;
}
. toggle-topbar { . toggle-topbar {
a { color : $topbar-menu-link-color-toggled ; a {
span : : after { color : $topbar-menu-link-color-toggled ;
span : : after {
/ / Shh , don ' t tell, but box-shadows create the menu icon :) / / 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 / / Change the color of the bars when the menu is expanded , using given thickness from hamburger ( ) above
box-shadow : 0 0 0 1 px $topbar-menu-icon-color-toggled , box-shadow : 0 0 0 1 px $topbar-menu-icon-color-toggled ,
@ -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 ) ; @include single-transition ( $default-float , $topbar-transition-speed ) ;
ul { ul {
padding : 0 ;
width : 100 % ;
height : auto ;
display : block ; display : block ;
font-size : $rem-base ; font-size : $rem-base ;
height : auto ;
margin : 0 ; margin : 0 ;
padding : 0 ;
width : 100 % ;
} }
. divider , . divider ,
@ -315,54 +330,60 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
ul li { ul li {
background : $topbar-dropdown-bg ; background : $topbar-dropdown-bg ;
& > a {
display : block ; > a {
width : 100 % ;
color : $topbar-link-color ; color : $topbar-link-color ;
padding : 12 px 0 12 px 0 ; display : block ;
padding-#{$default-float} : $topbar-link-padding ;
font-family : $topbar-link-font-family ; font-family : $topbar-link-font-family ;
font-size : $topbar-link-font-size ; font-size : $topbar-link-font-size ;
font-weight : $topbar-link-weight ; 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 ; text-transform : $topbar-link-text-transform ;
width : 100 % ;
& . button { & . button {
font-size : $topbar-link-font-size ; font-size : $topbar-link-font-size ;
padding-#{$opposite-direction} : $topbar-link-padding ;
padding-#{$default-float} : $topbar-link-padding ; padding-#{$default-float} : $topbar-link-padding ;
padding-#{$opposite-direction} : $topbar-link-padding ;
@include button-style ( $bg : $primary-color ) ; @include button-style ( $bg : $primary-color ) ;
} }
& . button . secondary { @include button-style ( $bg : $secondary-color ) ; } & . button . secondary { @include button-style ( $bg : $secondary-color ) ; }
& . button . success { @include button-style ( $bg : $success-color ) ; } & . button . success { @include button-style ( $bg : $success-color ) ; }
& . button . alert { @include button-style ( $bg : $alert-color ) ; } & . button . alert { @include button-style ( $bg : $alert-color ) ; }
& . button . warning { @include button-style ( $bg : $warning-color ) ; } & . button . warning { @include button-style ( $bg : $warning-color ) ; }
& . button . info { @include button-style ( $bg : $info-color ) ; }
} }
> button { > button {
font-size : $topbar-link-font-size ; font-size : $topbar-link-font-size ;
padding-#{$opposite-direction} : $topbar-link-padding ;
padding-#{$default-float} : $topbar-link-padding ; padding-#{$default-float} : $topbar-link-padding ;
padding-#{$opposite-direction} : $topbar-link-padding ;
@include button-style ( $bg : $primary-color ) ; @include button-style ( $bg : $primary-color ) ;
& . secondary { @include button-style ( $bg : $secondary-color ) ; } & . secondary { @include button-style ( $bg : $secondary-color ) ; }
& . success { @include button-style ( $bg : $success-color ) ; } & . success { @include button-style ( $bg : $success-color ) ; }
& . alert { @include button-style ( $bg : $alert-color ) ; } & . alert { @include button-style ( $bg : $alert-color ) ; }
& . warning { @include button-style ( $bg : $warning-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 / / Apply the hover link color when it has that class
& : hover : not ( . has-form ) > a { & : hover : not ( . has-form ) > a {
background-color : $topbar-link-bg-color-hover ; background-color : $topbar-link-bg-color-hover ;
color : $topbar-link-color-hover ;
@if ( $topbar-link-bg-hover ) { @if ( $topbar-link-bg-hover ) {
background : $topbar-link-bg-hover ; background : $topbar-link-bg-hover ;
} }
color : $topbar-link-color-hover ;
} }
/ / Apply the active link color when it has that class / / Apply the active link color when it has that class
& . active > a { & . active > a {
background : $topbar-link-bg-active ; background : $topbar-link-bg-active ;
color : $topbar-link-color-active ; color : $topbar-link-color-active ;
& : hover { & : hover {
background : $topbar-link-bg-active-hover ; background : $topbar-link-bg-active-hover ;
color : $topbar-link-color-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 / / 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 . / / Styling for list items that have a dropdown within them .
. has-dropdown { . has-dropdown {
position : relative ; position : relative ;
& > a { > a {
& : after { & : after {
@if ( $topbar-arrows ) { @if ( $topbar-arrows ) {
@include css-triangle ( $topbar-dropdown-toggle-size , rgba ( $topbar-dropdown-toggle-color , $topbar-dropdown-toggle-alpha ) , $default-float ) ; @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-#{$opposite-direction} : $topbar-link-padding ;
margin-top : - ( $topbar-dropdown-toggle-size / 2 ) - 2 ; margin-top : - ( $topbar-dropdown-toggle-size / 2 ) - 2 ;
position : absolute ; position : absolute ;
@ -390,12 +414,15 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
} }
} }
& . moved { position : static ; & . moved {
& > . dropdown { position : static ;
> . dropdown {
@include topbar-show-dropdown () ; @include topbar-show-dropdown () ;
width : 100 % ; width : 100 % ;
} }
& > a : after {
> a : after {
display : none ; display : none ;
} }
} }
@ -403,16 +430,16 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
/ / Styling elements inside of dropdowns / / Styling elements inside of dropdowns
. dropdown { . dropdown {
@include topbar-hide-dropdown () ;
padding : 0 ; padding : 0 ;
position : absolute ; position : absolute ;
#{ $default-float } : 100 % ;
top : 0 ; top : 0 ;
z-index : 99 ; z-index : 99 ;
@include topbar-hide-dropdown () ; #{ $default-float } : 100 % ;
li { li {
width : 100 % ;
height : auto ; height : auto ;
width : 100 % ;
a { a {
font-weight : $topbar-dropdown-link-weight ; 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 / / Back Button
margin-bottom : 0 ; margin-bottom : 0 ;
margin-top : 0 ; margin-top : 0 ;
@ -434,17 +462,24 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
& : hover { background : none ; } & : 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 { label {
padding : 8 px $topbar-link-padding 2 px ;
margin-bottom : 0 ;
text-transform : $topbar-dropdown-label-text-transform ;
color : $topbar-dropdown-label-color ; color : $topbar-dropdown-label-color ;
font-weight : $topbar-dropdown-label-font-weight ;
font-size : $topbar-dropdown-label-font-size ; 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 . / / Top Bar styles intended for screen sizes above the breakpoint .
@media #{ $topbar-media-query } { @media #{ $topbar-media-query } {
. top-bar { . top-bar {
background : $topbar-bg ;
@include clearfix ; @include clearfix ;
background : $topbar-bg ;
overflow : visible ; overflow : visible ;
. toggle-topbar { display : none ; } . 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 ; } . name h6 a { width : auto ; }
input , input ,
select ,
. button , . button ,
button { button {
font-size : rem-calc ( 14 ) ; font-size : rem-calc ( 14 ) ;
position : relative ;
height : $topbar-input-height ; height : $topbar-input-height ;
position : relative ;
top : (( $topbar-height - $topbar-input-height ) / 2 ) ; top : (( $topbar-height - $topbar-input-height ) / 2 ) ;
} }
& . expanded { background : $topbar-bg ; } & . expanded {
background : $topbar-bg ;
}
} }
. contain-to-grid . top-bar { . contain-to-grid . top-bar {
max-width : $row-width ;
margin : 0 auto ;
margin-bottom : $topbar-margin-bottom ; margin-bottom : $topbar-margin-bottom ;
margin : 0 auto ;
max-width : $row-width ;
} }
. top-bar-section { . top-bar-section {
@ -492,9 +530,9 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
#{ $default-float } : 0 ! important ; #{ $default-float } : 0 ! important ;
ul { ul {
width : auto ;
height : auto !important ;
display : inline ; display : inline ;
height : auto !important ;
width : auto ;
li { li {
float : $default-float ; float : $default-float ;
@ -512,11 +550,12 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
color : $topbar-link-color-hover ; color : $topbar-link-color-hover ;
} }
} }
& : not ( . has-form ) { & : not ( . has-form ) {
a : not ( . button ) { a : not ( . button ) {
padding : 0 $topbar-link-padding ;
line-height : $topbar-height ;
background : $topbar-link-bg ; background : $topbar-link-bg ;
line-height : $topbar-height ;
padding : 0 $topbar-link-padding ;
& : hover { & : hover {
background-color : $topbar-link-bg-color-hover ; background-color : $topbar-link-bg-color-hover ;
@if ( $topbar-link-bg-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 ) { & . active : not ( . has-form ) {
a : not ( . button ) { a : not ( . button ) {
padding : 0 $topbar-link-padding ;
line-height : $topbar-height ;
color : $topbar-link-color-active ;
background : $topbar-link-bg-active ; background : $topbar-link-bg-active ;
color : $topbar-link-color-active ;
line-height : $topbar-height ;
padding : 0 $topbar-link-padding ;
& : hover { & : hover {
background : $topbar-link-bg-active-hover ; background : $topbar-link-bg-active-hover ;
color : $topbar-link-color-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 { . has-dropdown {
@if ( $topbar-arrows ) { @if $topbar-arrows {
& > a { > a {
padding-#{$opposite-direction} : $topbar-link-padding + $topbar-link-dropdown-padding !important ; padding-#{$opposite-direction} : $topbar-link-padding + $topbar-link-dropdown-padding !important ;
& : after { & : after {
@include css-triangle ( $topbar-dropdown-toggle-size , rgba ( $topbar-dropdown-toggle-color , $topbar-dropdown-toggle-alpha ) , top ) ; @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 ; & . moved { position : relative ;
& > . dropdown { > . dropdown {
@include topbar-hide-dropdown () ; @include topbar-hide-dropdown () ;
} }
} }
& . hover , & . not-click : hover { & . hover , & . not-click : hover {
& > . dropdown { > . dropdown {
@include topbar-show-dropdown () ; @include topbar-show-dropdown () ;
} }
} }
> a : focus + . dropdown { > a : focus + . dropdown {
@include topbar-show-dropdown () ; @include topbar-show-dropdown () ;
} }
. dropdown li . has-dropdown { . dropdown li . has-dropdown {
& > a { > a {
@if ( $topbar-dropdown-arrows ) { @if ( $topbar-dropdown-arrows ) {
& : after { & : after {
border : none ; border : none ;
content : " \00bb " ; content : " \00bb " ;
top : 1 rem ; top : rem-calc ( 3 ) ;
margin-top : - 1 px ;
#{ $opposite-direction } : 5px ; #{ $opposite-direction } : 5px ;
line-height : 1 .2 ;
} }
} }
} }
@ -584,28 +624,28 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
. dropdown { . dropdown {
#{ $default-float } : 0 ; #{ $default-float } : 0 ;
top : auto ;
background : transparent ; background : transparent ;
min-width : 100 % ; min-width : 100 % ;
top : auto ;
li { li {
a { a {
background : $topbar-dropdown-link-bg ;
color : $topbar-dropdown-link-color ; color : $topbar-dropdown-link-color ;
line-height : $topbar-height ; line-height : $topbar-height ;
white-space : nowrap ;
padding : 12 px $topbar-link-padding ; padding : 12 px $topbar-link-padding ;
background : $topbar-dropdown-link-bg ; white-space : nowrap ;
} }
& : not ( . has-form ) : not ( . active ) { & : not ( . has-form ) : not ( . active ) {
& > a : not ( . button ) { > a : not ( . button ) {
color : $topbar-dropdown-link-color ;
background : $topbar-dropdown-link-bg ; background : $topbar-dropdown-link-bg ;
color : $topbar-dropdown-link-color ;
} }
& : hover > a : not ( . button ) { & : hover > a : not ( . button ) {
color : $topbar-dropdown-link-color-hover ;
background-color : $topbar-link-bg-color-hover ; background-color : $topbar-link-bg-color-hover ;
color : $topbar-dropdown-link-color-hover ;
@if ( $topbar-dropdown-link-bg-hover ) { @if ( $topbar-dropdown-link-bg-hover ) {
background : $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 { label {
white-space : nowrap ;
background : $topbar-dropdown-label-bg ; background : $topbar-dropdown-label-bg ;
white-space : nowrap ;
} }
/ / Second Level Dropdowns / / Second Level Dropdowns
@ -625,11 +665,11 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
} }
} }
& > ul > . divider , > ul > . divider ,
& > ul > [ role = " separator " ] { > ul > [ role = " separator " ] {
border-#{$opposite-direction} : $topbar-divider-border-bottom ;
border-bottom : none ; border-bottom : none ;
border-top : none ; border-top : none ;
border-#{$opposite-direction} : $topbar-divider-border-bottom ;
clear : none ; clear : none ;
height : $topbar-height ; height : $topbar-height ;
width : 0 ; width : 0 ;
@ -637,8 +677,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text
. has-form { . has-form {
background : $topbar-link-bg ; background : $topbar-link-bg ;
padding : 0 $topbar-link-padding ;
height : $topbar-height ; height : $topbar-height ;
padding : 0 $topbar-link-padding ;
} }
/ / Position overrides for ul . right and ul . left / / 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 { . has-dropdown {
& : hover { & : hover {
& > . dropdown { > . dropdown {
@include topbar-show-dropdown () ; @include topbar-show-dropdown () ;
} }
} }
> a : focus + . dropdown { > a : focus + . dropdown {
@include topbar-show-dropdown () ; @include topbar-show-dropdown () ;
} }
Julian Ćwirko
10 years ago