skyquake/framework/widgets/header/header.scss

/*
 *
 *   Copyright 2016 RIFT.IO Inc
 *
 *   Licensed under the Apache License, Version 2.0 (the "License");
 *   you may not use this file except in compliance with the License.
 *   You may obtain a copy of the License at
 *
 *       http://www.apache.org/licenses/LICENSE-2.0
 *
 *   Unless required by applicable law or agreed to in writing, software
 *   distributed under the License is distributed on an "AS IS" BASIS,
 *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *   See the License for the specific language governing permissions and
 *   limitations under the License.
 *
 */

header.header-app-component {
    padding: 10px 0px;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-direction:column;
        flex-direction:column;
    .header-app-main {
        display:-ms-flexbox;
        display:flex;
        -ms-flex-direction:row;
            flex-direction:row;
        -ms-flex-pack:justify;
            justify-content:space-between;
        -ms-flex-align:center;
            align-items:center;
    }
    h1 {
        /*background: url('../../style/img/header-logo.png') no-repeat;*/
        background: url('../../style/img/svg/osm-logo_color_rgb.svg') no-repeat;
        background-size:contain;
        height: 51px;
        line-height: 51px;
        margin-left: 20px;
        padding-left: 100px;
        left: 0;
        text-transform: uppercase;
        font-size: 1.625rem;
        font-weight: 400;
        position:relative;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;

    }
    ul {
            display:-ms-flexbox;
            display:flex;
        }
        li {
            display:-ms-flexbox;
            display:flex;
             -ms-flex:1 1 auto;
                 flex:1 1 auto;
             border-right:1px solid #e5e5e5;
             padding: 0 1rem;
            &:last-child {
                border:none;
            }
            a {
                cursor:pointer;
                /* padding: 0.125rem;*/
                /* border-bottom:1px solid black;*/
                text-decoration:underline;
            }
        }
    .header-app-nav {
        display:-ms-flexbox;
        display:flex;
        margin-left: 0.25rem;
        a,span {
            text-transform:uppercase;
        }
        a {
            cursor: pointer;
            margin-left: 0.5rem;
            font-weight: normal;
            color: black;
        }

        .spacer {

        }
        .current {
            font-weight: bold;
        }
    }
    nav {
        display:-ms-flexbox;
        display:flex;
        -ms-flex:0 1 auto;
            flex:0 1 auto;
        -ms-flex-align:center;
            align-items:center;
    }
}