/*------------------------------------------------------------ Main navigation ============================================================*/ .blogolife_main_menu.dropdown.menu { li { display: inline-block; } a { color: $whiteColor; &:hover { @include gradient( $primaryColor, $secondaryColor); } } .current-menu-item a { @include gradient( $primaryColor, $secondaryColor); } .submenu { @include gradient($secondaryColor, $primaryColor); border: 1px solid $primaryColor; } .is-dropdown-submenu-parent.is-down-arrow > a::after { border-color: $whiteColor transparent transparent; } .is-dropdown-submenu-parent.is-left-arrow > a::after { border-color: transparent $whiteColor transparent transparent; } .is-dropdown-submenu-parent.is-right-arrow > a::after { border-color: transparent transparent transparent $whiteColor; } } /*------------------------------------------------------------ Mobile Navigation ============================================================*/ .blogolife_mobile_menu.vertical.menu { a { color: $whiteColor; outline: none; &:hover { @include gradient( $primaryColor, $secondaryColor); } } .nested { margin-left: 0; a { padding-left: 1.5rem; } .nested { a { padding-left: 2rem; } .nested { a { padding-left: 3rem; } .nested { a { padding-left: 3.5rem; } } } } } } /*------------------------------------------------------------ Mobile Button ============================================================*/ .toolbar-mobile { .mobile-btn { display: inline-block; color: $whiteColor; background: none; margin: 0; padding-right: 0; &[aria-expanded]:after { box-shadow: 0 1px 5px 1px rgba(0,0,0,.1); font-family: $fa; font-size: 1.5rem; margin-right: 0.75rem; } &[aria-expanded="false"]:after { content: '\f0c9'; } &[aria-expanded="true"]:after { content: '\f00d'; } } } /*------------------------------------------------------------ Social Networks ============================================================*/ .blogolife_social_menu ul { list-style: none; margin: 0; li { float: left; margin: 0 0.2em 0.2em 0.2em; } a { display: block; height: 35px; width: 35px; position: relative; text-align: center; &:before { font-family: $fa; font-size: 1.2rem; content: "\f0ac"; height: 33px; line-height: 33px; text-align: center; width: 33px; margin: 2px; } &:hover, &:focus { &:before { text-shadow: 1px 1px 2px rgba(150, 150, 150, .5); } } } } .blogolife_social_menu { float: right; a[href*="codepen.io"]:before { content: "\f1cb"; color: #343436; } a[href*="digg.com"]:before { content: "\f1a6"; color: #000000; } a[href*="dribbble.com"]:before { content: "\f17d"; color: #ea4c89; } a[href*="dropbox.com"]:before { content: "\f16b"; color: #007ee5; } a[href*="facebook.com"]:before { content: "\f09a"; color: #3b5998; } a[href*="flickr.com"]:before { content: "\f16e"; color: #ff0084; } a[href*="foursquare.com"]:before { content: "\f180"; color: #f94877; } a[href*="plus.google.com"]:before { content: "\f0d5"; color: #dc4e41; } a[href*="github.com"]:before { content: "\f09b"; color: #333333; } a[href*="instagram.com"]:before { content: "\f16d"; color: #3f729b; } a[href*="linkedin.com"]:before { content: "\f0e1"; color: #0077b5; } a[href*="pinterest.com"]:before { content: "\f0d2"; color: #bd081c; } a[href*="reddit.com"]:before { content: "\f281"; color: #ff4500; } a[href*="skype.com"]:before { content: "\f17e"; color: #00aff0; } a[href*="slack.com"]:before { content: "\f198"; color: #3eb991; } a[href*="stumbleupon.com"]:before { content: "\f1a4"; color: #eb4924; } a[href*="tumblr.com"]:before { content: "\f173"; color: #35465c; } a[href*="twitter.com"]:before { content: "\f099"; color: #55acee; } a[href*="vimeo.com"]:before { content: "\f27d"; color: #1ab7ea; } a[href*="wordpress.com"]:before, a[href*="wordpress.org"]:before { content: "\f19a"; color: #21759b; } a[href*="youtube.com"]:before { content: "\f16a"; color: #cd201f; } a[href^="mailto:"]:before { content: "\f0e0"; } a[href*="spotify.com"]:before { content: "\f1bc"; color: #2ebd59; } a[href*="twitch.tv"]:before { content: "\f1e8"; color: #6441a5; } a[href$="/feed/"]:before, a[href$="/rss/"]:before, a[href$="/atom/"]:before { content: "\f09e"; color: #f47721; } }