bansho/app/components/topbar/_topbar.scss

//----------------------------------*\
// TOPBAR MODULE
//----------------------------------*/
.topbar-wrapper {
    @extend %colorBkgTopbar;
    @extend %colorBorderThin;
    border-bottom:1px solid;
}

.topbar a {@extend %colorLink;}

.topbar__list {display:block;}

.topbar__item {
    @extend %colorBorderThin;
    border:0 solid;
    display:inline-block;
    position:relative;

   .size-scheme--small & {
        height: 50px;
    }
    .size-scheme--normal & {
        height: 60px;
    }
    .size-scheme--big & {
        height: 80px;
    }


    .topbar__list--left & {
        border-right-width:1px;
        float:left;
    }
    .topbar__list--right & {
        border-left-width:1px;
        float:right;
    }

    %topbar__panel {
        @extend %colorBkgPanel;
        width:320px;
        position:absolute;
        top:100%;
        z-index:999999;
    }

    .topbar__panel--fromleft {
        @extend %topbar__panel;
        left:-81px;

        @include medium-and-up-screen {
            left:-1px;
            width:485px;
        }
    }

    .topbar__panel--fromright {
        @extend %topbar__panel;
        right:0;

        @include medium-and-up-screen {
            width:190px;
        }
    }

    .topbar__panel__content {
        .size-scheme--small & {
            padding-top: $_space - 20px;
            padding-right: $_space_narrow;
            padding-bottom: 0;
            padding-left: $_space_narrow;
        }
        .size-scheme--normal & {
            padding-top: $_space - 10px;
            padding-right: $_space_narrow;
            padding-bottom: 0;
            padding-left: $_space_narrow;
        }
        .size-scheme--big & {
            padding: $_space $_space_narrow 0;
        }
    }
}

.topbar__button {
    @extend %button-reset;
    @extend %colorBkgTopbarButton;
    @extend %colorLink;
   .size-scheme--small & {
        width: 49px;
        height: 50px;
    }
    .size-scheme--normal & {
        width: 59px;
        height: 60px;
    }
    .size-scheme--big & {
        width:79px;
        height: 80px;
    }

    position:relative;

    &[aria-expanded="true"] {
        .color-scheme--dark & {
            color:$_color_omega;
        }

        .color-scheme--light & {
            color:$_color_dark_alpha;
        }

    }

    [class^="ico-"],
    [class*=" ico-"] {
       .size-scheme--small & {
            bottom:15px;
        }
        .size-scheme--normal & {
            bottom:20px;
        }
        .size-scheme--big & {
            bottom:30px;
        }
        display:block;
        font-size:em(20, $_base_font_size);
        height:1em;
        left:0;
        line-height:1em;
        margin:0 auto;
        position:absolute;
        right:0;
        text-align:center;
        top:auto;
        width:1em;

        &:before {margin:0;}
    }

    &.topbar__button--hover {
        transition-duration: 0.5s;
        transition-property: color, background-color;

        &[aria-expanded="true"],
        &:hover {
            .color-scheme--dark & {
                background:$_color_dark_alpha;
            }

            .color-scheme--light & {
                background:$_color_light_alpha;
            }
        }
    }
}

.topbar__toggle-sidebar {

    .ico-menu {

        &:after {
            @extend %ico;
            bottom:0;
            display:inline-block;
            font-size:10px;
            margin:auto 0;
            position:absolute;
            top:0;
        }
    }

    [aria-expanded="false"] .ico-menu:after {
        content:'\e808';
        right:-7px;
    }

    [aria-expanded="true"] .ico-menu:after {
        content:'\e807';
        left:-7px;
    }
}

.topbar__notifications {

    .ico-bell-alt {

        &:after {
            background:$_color_error;
            border-radius:100%;
            color:$_color_omega;
            content:attr(data-notifications);
            font-size:10px;
            font-style:normal;
            height:18px;
            left:7px;
            line-height:18px;
            position:absolute;
            text-align:center;
            top:-9px;
            width:18px;
        }
    }
}

.topbar__search {

    .topbar__button {float:left;}

    .topbar__searchfield {
        outline: 0;
        background:transparent;
        border:0;
        display:none;
        float:right;
        font-size:1.1em;
        height:16px;

       .size-scheme--small & {
            margin:16px $_space 0 0;
            bottom:15px;
        }
        .size-scheme--normal & {
            margin:22px $_space 0 0;
            bottom:20px;
        }
        .size-scheme--big & {
            margin:32px $_space 0 0;
        }

        vertical-align:baseline;
        .color-scheme--dark & {
            color:$_color_omega;
        }

        .color-scheme--light & {
            color:$_color_dark_alpha;
        }


        @include large-xlarge-screen {
            display:inline-block;
        }
    }

    .topbar__searchfield::-webkit-input-placeholder {
        font-style: italic;
    }
    .topbar__searchfield::-ms-input-placeholder {
        font-style: italic;
    }
    .topbar__searchfield::-moz-placeholder {
        font-style: italic;
    }
}

.topbar__settings {

    .ico-sliders:before {
        @include vendor(transform, rotate(90deg));
    }
}

.topbar__settings__category {
    @extend %typo-title;
    display:block;
    margin-bottom:$_space;

    .color-scheme--dark & {
        color:$_color_dark_gamma;
    }

    .color-scheme--light & {
        color:$_color_light_gamma;
    }
}

.topbar__settings__item,
.topbar__settings__subitem {
    cursor: pointer;
    display: block;
    outline:0;
}

.topbar__settings__subitem {
    @extend %typo-menu;
    .size-scheme--small & {
        margin-bottom:$_space - 20px;
    }
    .size-scheme--normal & {
        margin-bottom:$_space - 10px;
    }
    .size-scheme--big & {
        margin-bottom:$_space;
    }


    a {display:block;}

}



.topbar__settings__subitem div.set-size-small.active,
.topbar__settings__subitem div.set-size-normal.active,
.topbar__settings__subitem div.set-size-big.active {
    .color-scheme--light & {
        color:$_color_alpha;
    }
    .color-scheme--dark & {
        color:$_color_omega;
     }
}

.topbar__settings__subitem .set-size-small,
.topbar__settings__subitem .set-size-normal,
.topbar__settings__subitem .set-size-big
{
    float: left;
    width: 30%;
    line-height: 1px;
    text-align: center;
    outline:0;

    .color-scheme--light & {
        color:$_color_light_delta;
        transition-duration: 0.5s;
        transition-property: color;
        &:hover {
            color:$_color_alpha;
            outline:0;
        }
    }

    .color-scheme--dark & {
        color:$_color_light_delta;
        transition-duration: 0.5s;
        transition-property: color;
        &:hover {
            color:$_color_omega;
            outline:0;
        }
    }




}
.topbar__settings__subitem .set-size-clear{
    clear: both;
}

.topbar__settings__subitem .set-size-small
{
    font-size: em(15, $_base_font_size);
    line-height: 20px;
}
.topbar__settings__subitem .set-size-normal
{
    font-size: em(20, $_base_font_size);
    line-height: 20px;
}
.topbar__settings__subitem .set-size-big
{
    font-size: em(25, $_base_font_size);
    line-height: 20px;
}