X-Git-Url: https://gerrit.o-ran-sc.org/r/gitweb?a=blobdiff_plain;f=webapp-frontend%2Fsrc%2Fapp%2Fapp.component.scss;fp=webapp-frontend%2Fsrc%2Fapp%2Fapp.component.scss;h=5977f5ed9e3e7d5577b3baa409ee968dd017bfa1;hb=5d7de18e40bb0da67d375d9461f9106ec3ea8e51;hp=0000000000000000000000000000000000000000;hpb=d438de53c446413c5c3152fdfee1578a304f484e;p=portal%2Fnonrtric-controlpanel.git diff --git a/webapp-frontend/src/app/app.component.scss b/webapp-frontend/src/app/app.component.scss new file mode 100644 index 0000000..5977f5e --- /dev/null +++ b/webapp-frontend/src/app/app.component.scss @@ -0,0 +1,371 @@ +/*- + * ========================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, rgb(181, 199, 192), #82bbb6); + 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; +} + +/*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: 2.7rem; + 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, rgb(62, 59, 68), rgb(11, 10, 15)); + transition: opacity 300ms linear; +} + +/* +================- + Footer +================ +*/ +.main__footer { + background: transparent; + z-index: 100; +} + +.main__footer-dark { + background-color: #2B244D; + color: white; +} + +.main-footer__bg-dark { + opacity: 1; + background: rgb(11, 10, 15); + transition: opacity 300ms linear; +} + +@media only screen and (max-width: 300px) { + .slide-menu { + width: 100%; + } +} \ No newline at end of file