--- /dev/null
+/*-
+ * ========================LICENSE_START=================================
+ * O-RAN-SC
+ * %%
+ * Copyright (C) 2019 AT&T Intellectual Property
+ * %%
+ * 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.
+ * ========================LICENSE_END===================================
+ */
+.root__container {
+ width: 100vw;
+ height: 100vh;
+ display: grid;
+ grid-template-columns: auto;
+ grid-template-rows: 0.5fr auto;
+ position: relative;
+}
+
+/* Header */
+mat-sidenav-container, mat-sidenav-content, mat-sidenav {
+ height: 100%;
+}
+
+mat-sidenav {
+ width: 250px;
+}
+
+main {
+ padding: 10px;
+}
+
+/* Slide Menu */
+.side-menu__dark {
+ color: white;
+ background: gray;
+}
+
+.side-menu__container {
+ position: fixed;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ pointer-events: none;
+ z-index: 25;
+}
+
+.side-menu__container-active {
+ pointer-events: auto;
+}
+
+.side-menu__container::before {
+ content: '';
+ cursor: pointer;
+ position: absolute;
+ display: block;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ background-color: #0c1066;
+ opacity: 0;
+ transition: opacity 300ms linear;
+ will-change: opacity;
+}
+
+.side-menu__container-active::before {
+ opacity: 0.3;
+}
+
+.slide-menu {
+ box-sizing: border-box;
+ transform: translateX(-103%);
+ position: relative;
+ top: 0;
+ left: 0;
+ z-index: 10;
+ height: 100%;
+ width: 90%;
+ max-width: 26rem;
+ background-color: white;
+ box-shadow: 0 0 2rem rgba(0, 0, 255, 0.1);
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-rows: 2fr 4fr 1fr;
+ grid-gap: 1rem;
+ transition: transform 300ms linear;
+ will-change: transform;
+}
+
+.slide-menu-active {
+ transform: none;
+}
+
+.menu-header.menu-header__dark {
+ background: #2B244D;
+}
+
+.menu-header {
+ background: linear-gradient(to right, #00FF9B, #5f84fb);
+ display: grid;
+ grid-template-rows: 1fr 4fr;
+ grid-template-columns: 1fr 4fr;
+ grid-template-areas: "greeting greeting" "image details";
+ box-sizing: border-box;
+ width: 100%;
+ align-content: center;
+ color: white;
+ box-shadow: 0 0.5rem 2rem rgba(0, 0, 255, 0.2);
+}
+
+mat-drawer {
+ width: 340px;
+}
+
+mat-drawer-content {
+ overflow: overlay;
+}
+
+.menumargin-top {
+ margin-top: 10px;
+}
+
+.greeting__text {
+ grid-area: greeting;
+ font-size: 1.25rem;
+ letter-spacing: 0.15rem;
+ text-transform: uppercase;
+ margin-top: 1rem;
+ justify-self: center;
+ align-self: center;
+}
+
+.account-details {
+ grid-area: details;
+ display: flex;
+ flex-flow: column;
+ margin-left: 1rem;
+ align-self: center;
+}
+
+.name__text {
+ font-size: 1.15rem;
+ margin-bottom: 0.5rem;
+}
+
+.email__text {
+ font-size: 0.9rem;
+ letter-spacing: 0.1rem;
+}
+
+.menu-body {
+ display: grid;
+ width: 100%;
+}
+
+.profile-image__container {
+ grid-area: image;
+ margin-right: 0.5rem;
+ border-radius: 50%;
+ height: 4rem;
+ width: 4rem;
+ overflow: hidden;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: white;
+ align-self: center;
+ margin-left: 2rem;
+}
+
+.profile__image {
+ max-width: 4rem;
+}
+
+.home_bg_image {
+ height: 40em;
+ background-size: cover;
+ width: auto;
+ background-image: url('../assets/intelligence.png');
+ background-position: 50% 50%;
+}
+
+/*Header*/
+.main__header {
+ width: 100%;
+ display: grid;
+ grid-template-columns: 1fr 1fr 0.25fr;
+ grid-template-rows: 1fr;
+ box-shadow: 0 0 2rem rgba(0, 0, 255, 0.1);
+ height: 4rem;
+ margin: 0;
+ align-items: center;
+ transition: background-color 500ms linear;
+ animation: fadein 1s ease-in-out 0ms 1;
+}
+
+.main__header-dark {
+ background-color: #2B244D;
+ color: white;
+}
+
+.toggle-button__container {
+ cursor: pointer;
+ position: relative;
+ margin: 0 0.5rem;
+}
+
+.mode-toggle__input {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+}
+
+.mode-toggle__bg {
+ height: 1rem;
+ width: 2rem;
+ border-radius: 0.5rem;
+ background-color: rgba(0, 0, 0, 0.5);
+ display: inline-block;
+ transition: background-color 300ms linear;
+}
+
+.mode-toggle__circle {
+ height: 1.30rem;
+ width: 1.30rem;
+ background-color: #2B244D;
+ position: absolute;
+ top: -0.2rem;
+ border-radius: 50%;
+ box-shadow: 0 0 0 rgba(0, 0, 255, 0.5);
+ transition: left 300ms linear;
+ left: 0.1rem;
+}
+
+.mode-toggle__circle-checked {
+ background-color: white;
+ left: 1.75rem;
+}
+
+.mode-toggle__bg-checked {
+ background-color: #FF0070;
+}
+
+.mode-toggle__text {
+ font-size: 0.75rem;
+ text-transform: uppercase;
+ letter-spacing: 0.1rem;
+}
+
+/*Content*/
+.left__section {
+ display: grid;
+ grid-template-rows: 1fr;
+ grid-template-columns: 1fr 1fr;
+ max-width: 5rem;
+}
+
+.left__section3Col {
+ display: grid;
+ grid-template-rows: 1fr;
+ grid-template-columns: 1fr 1fr 1fr;
+ max-width: 6rem;
+}
+
+.date__text {
+ text-transform: uppercase;
+ letter-spacing: 0.1rem;
+ display: inline;
+ margin: 0.5rem 0;
+}
+
+/*SVGs*/
+.hamburger__icon {
+ position: relative;
+ z-index: 35;
+ height: 2rem;
+ padding: 0.5rem 1.5rem;
+ margin-right: 1rem;
+ cursor: pointer;
+}
+
+.logo__icon {
+ height: 2rem;
+ margin-left: 1rem;
+}
+
+.logo__text {
+ fill: #2B244D;
+}
+
+.logo__text-dark {
+ fill: #ffffff;
+}
+
+.hamburger__icon__fill {
+ fill: #2B244D;
+}
+
+.hamburger__icon__fill-dark {
+ fill: #ffffff;
+}
+
+/*
+================
+ Body
+================
+*/
+
+.main__container {
+ height: 100%;
+ width: 100%;
+}
+
+.main__container__body {
+ min-height: calc(100vh - 140px);
+}
+
+.main-container__bg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -2;
+ opacity: 0;
+ background: white;
+ transition: opacity 300ms linear;
+}
+
+.main-container__bg-dark {
+ opacity: 1;
+ background: linear-gradient(to bottom, #B290FF, #2E1D65);
+ transition: opacity 300ms linear;
+}
+
+/* Footer */
+.main__footer {
+ background: transparent;
+ z-index: 100;
+}
+
+.main__footer-dark {
+ background-color: #2B244D;
+ color: white;
+}
+
+.main-footer-licence {
+ float: left;
+}
+
+.main-footer__bg-dark {
+ opacity: 1;
+ background: linear-gradient(to bottom, #B290FF, #2E1D65);
+ transition: opacity 300ms linear;
+}
+
+.main-footer-instance {
+ margin-right: 10px;
+ float: right;
+ color: white;
+ letter-spacing: 0.1rem;
+ font-size: 15px;
+}
+
+.main-footer-instance:hover {
+ color: lightgray;
+}
+
+@media only screen and (max-width: 300px) {
+ .slide-menu {
+ width: 100%;
+ }
+}
+
+.selector-label {
+ margin-right: 20px;
+}
+
+.menu-footer {
+ display: grid;
+ width: 100%;
+ position: absolute;
+ bottom: 10px;
+}
+
+a {
+ text-decoration: none;
+ color: black;
+}
+
+.dark a {
+ color: white;
+}
+
+a:hover, a:active {
+ color: lightgray;
+}
+
+.nav-caption {
+ display: inline-block;
+ padding-left: 6px;
+}
Code Review / portal / ric-dashboard.git / blobdiff