navbar.scss 4.56 KB
.app-navbar {

    border-bottom: 2px solid #f1f1f1;

    .navbar {
        margin-bottom: 0;
        border: none;
    }

    .navbar-brand {
        height: auto;
        padding-bottom: 0;
        padding-left: 0;

        @media screen and (max-width: $screen-md) {
            padding: 20px 0;
            margin: 20px 0;
        }
    }

    .navbar-toggle {
        border-radius: 100%;
        background-color: #5e749d;

        .icon-bar {
            height: 3px;
            background-color: #fff;
        }

        @media screen and (max-width: $screen-md) {
            padding: 12px 10px;
            margin: 0;
        }
    }

    .navbar-nav .divider span {
        display: block;

        @media screen and (max-width: $screen-md) {
            display: none;
        }
    }

    .dropdown-menu {
        padding: 0;
    }

    .navbar-nav {

        li > a {
            text-transform: uppercase;
            color: #616161;
            font-weight: bold;

            &:hover,
            &:focus {
                background: none;
            }

            .contraste & {
                color: #fff;
            }
        }

        li.active > a {
            border-bottom: 2px solid #77BB34;
        }
    }

    .contraste & {
        .nav > li > a:hover,
        .nav > li > a:focus {
            color: #fff;
        }

        .active a {
            border-bottom-color: #fff;
        }
    }

    // <= Mobile
    @media screen and (max-width: ($screen-sm - 1)) {
        .navbar-collapse {
            margin: 0 -15px;
        }

        .navbar-nav {
            background-color: #eee;

            & > li {
                // border-top: 1px solid #ccc;
                -moz-border-image: -moz-linear-gradient(left, #eee 0%, #ccc 100%);
                -webkit-border-image: -webkit-linear-gradient(left, #eee 0%, #ccc 100%);
                border-image: linear-gradient(to right, #eee 0%, #ccc 100%);
                border-image-slice: 1;

                border-top: 1px solid #ccc;
                border-bottom: 0px solid #ccc;
                border-left: 0px solid #ccc;
                border-right: 0px solid #ccc;
                &:last-child {
                    border-bottom: 1px solid #ccc;
                }
            }

            & > li > a {
                padding: 12px 20px;
                margin: 0;
                text-align: right;
            }

            & > li.active > a {
                border-bottom: none;
                border-right: 4px solid #77BB34;
            }

            .dropdown-toggle {
                margin-top: 0px;

            }
            .dropdown-menu {
                position: relative;
                margin-right: 10px;
            }

            .social-share {
                float: right;
            }
        }

    }

    // >= Table, < Destop
    @media screen and (min-width: $screen-sm) and (max-width: ($screen-md - 1)) {
        .navbar-brand {
            padding-top: 0;
            margin-top: 0;
            margin-bottom: 60px;
        }

        .navbar-collapse {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;

            ul.navbar-nav {
                width: 100%;
                float: none;
            }

            li > a {
                margin: 0 10px;
                padding: 0 0 10px 0;
            }

            li.dropdown {
                position: absolute;
                right: 0;
                bottom: 0;

                .dropdown-toggle {
                    position: relative;
                    width: 160px;
                    margin: 0 5px 5px 0;
                    padding: 0;
                }
            }
        }
    }
    // >= Desktop
    @media screen and (min-width: $screen-md) {

        li > a {
            padding: 15px 0;
            margin: 0 9px;
        }

        li.divider span{
            padding: 12px 0;
            line-height: 20px;
        }

        li.dropdown {
            .dropdown-toggle {
                padding: 6px 10px;
                margin: 0;
            }
        }
    }

    // > Desktop Large
    @media screen and (min-width: $screen-lg) {
        .navbar-brand {
            margin-bottom: 30px;
        }

        ul.navbar-nav {
            position: absolute;
            right: 0;
            bottom: 0;
        }

        li.divider span{
            padding: 12px 6px;
        }
    }
}

#dialoga-nas-redes {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1000;

    .text {
        position: absolute;
        top: 5px;
        right: 210px;
        width: 100px;
    }
}