jqwidgets-framework/demos/Showcase/angular-orderdetails/src/app/app.component.css

jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.

html, body {
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
}

.red {
    background: red;
}

.yellow {
    background: yellow;
}


.topBar li p:hover {
    color: white;
    cursor: pointer;
}

.header-wrap {
    background-color: #3E4752;
    width: 100%;
    height: 65px;
    font-size: 130%;
    color: #888D94;
}

.nav {
    background-color: #3E4752;
    width: 100%;
}

.navbar-default {
    background-color: #3E4752;
    border: none;
}

.navbar-header {
    background-color: #3E4752;
    height: 51px;
}


.navLi {
    padding: 0.7em;
    padding-left: 2em;
    padding-right: 1.9em;
    margin: 0.3em;
    margin-top: 0.6em;
    margin-bottom: 0em;
    background-color: #3E4752;
    color: #888D94;
    font-size: 125%;
}

#navBar {
    border: none !important;
}
/* TODO: clear above and under */
.navLi:hover {
    background-color: #373f49;
    color: #d9d9d9;
    cursor: pointer;
}

.navbar-collapse {
    padding: 0 !important;
    height: 100% !important;
    background-color: #3E4752;
}
/* TODO: to HERE*/
nav {
    float: right;
    /*transform: translateX(50%);*/
}

div[aria-expanded="true"] nav a {
    /* background-color: red; */
    display: block;
    width: 97%;
    overflow: hidden;
    float: left;
    /* padding: 0px; */
}

div[aria-expanded="true"] nav {
    /* width: 300px; */
    width: 100%;
    margin: 0;
}

/* 
    aria-expanded="false"
    aria-expanded="true"

    navbar-collapse collapse
    navbar-collapse collapse in

*/

a {
    padding: 0.7em;
    padding-left: 2em;
    padding-right: 1.9em;
    /*margin: 0.3em;
    margin-top: 0.6em;*/
    margin-bottom: 0em;
    color: #888D94;
    font-size: 125%;
}

    a:hover {
        color: white;
        text-decoration: none;
        background: rgba(0, 0, 0, 0.1);
    }

.active {
    color: white !important;
    background: rgba(0, 0, 0, 0.2);
    border: none !important;
    text-decoration: none !important;
}

.noDots {
    list-style: none;
    padding-left: 0;
}

    .noDots li a {
        color: #888D94;
        font-size: 120%;
    }

    .noDots li {
        padding-bottom: 0.2em;
    }

#footer {
    background: #f3f1f1;
    background: -webkit-linear-gradient(#f3f1f1, #dcd5d5);
    background: -o-linear-gradient(#f3f1f1, #dcd5d5);
    background: -moz-linear-gradient(#f3f1f1, #dcd5d5);
    background: linear-gradient(#f3f1f1, #dcd5d5);
    height: auto;
    width: 100%;
    overflow: hidden;
}

.icons img {
    width: 35%;
    height: 35%;
    border: 2px solid #afb2b6;
    border-radius: 50%;
    padding: 0.3em;
}

    .icons img:hover {
        background-color: white;
    }

.links li a:hover {
    text-decoration: none;
    color: #afb2b6;
}

.bar {
    width: 100%;
    height: 3px;
    background-color: #F1495B;
}

@media (min-width: 100px) {
    .navbar-toggle:not([aria-expanded="true"]) {
        right: -373px !important;
    }
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #888D94;
}

.navbar-toggle {
    border: none;
    background: transparent !important;
}

    .navbar-toggle:hover {
        background: transparent !important;
    }

    .navbar-toggle .icon-bar {
        width: 22px;
        transition: all 0.2s;
    }

    .navbar-toggle .top-bar {
        transform: rotate(45deg);
        transform-origin: 10% 10%;
    }

    .navbar-toggle .middle-bar {
        opacity: 0;
    }

    .navbar-toggle .bottom-bar {
        transform: rotate(-45deg);
        transform-origin: 10% 90%;
    }

    .navbar-toggle.collapsed .top-bar {
        transform: rotate(0);
    }

    .navbar-toggle.collapsed .middle-bar {
        opacity: 1;
    }

    .navbar-toggle.collapsed .bottom-bar {
        transform: rotate(0);
    }