webapp-frontend/src/app/controlpanel.component.scss

   1 /*-
   2  * ========================LICENSE_START=================================
   3  * O-RAN-SC
   4  * %%
   5  * Copyright (C) 2019 AT&T Intellectual Property
   6  * %%
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ========================LICENSE_END===================================
  19  */
  20 .root__container {
  21   width: 100vw;
  22   height: 100vh;
  23   display: grid;
  24   grid-template-columns: auto;
  25   grid-template-rows: 0.5fr auto;
  26   position: relative;
  27 }
  28
  29 /*
  30 ================
  31     Header
  32 ================
  33 */
  34 mat-sidenav-container,
  35 mat-sidenav-content,
  36 mat-sidenav {
  37   height: 100%;
  38 }
  39
  40 mat-sidenav {
  41   width: 250px;
  42 }
  43
  44 main {
  45   padding: 10px;
  46 }
  47
  48 /*
  49     Slide Menu
  50 = = = = = = = = =
  51 */
  52 .side-menu__dark {
  53   color: white;
  54   background: gray;
  55 }
  56
  57 .side-menu__container {
  58   position: fixed;
  59   left: 0;
  60   top: 0;
  61   width: 100%;
  62   height: 100%;
  63   overflow: hidden;
  64   pointer-events: none;
  65   z-index: 25;
  66 }
  67
  68 .side-menu__container-active {
  69   pointer-events: auto;
  70 }
  71
  72 .side-menu__container::before {
  73   content: '';
  74   cursor: pointer;
  75   position: absolute;
  76   display: block;
  77   top: 0;
  78   left: 0;
  79   height: 100%;
  80   width: 100%;
  81   background-color: #0c1066;
  82   opacity: 0;
  83   transition: opacity 300ms linear;
  84   will-change: opacity;
  85 }
  86
  87 .side-menu__container-active::before {
  88   opacity: 0.3;
  89 }
  90
  91 .slide-menu {
  92   box-sizing: border-box;
  93   transform: translateX(-103%);
  94   position: relative;
  95   top: 0;
  96   left: 0;
  97   z-index: 10;
  98   height: 100%;
  99   width: 90%;
 100   max-width: 26rem;
 101   background-color: white;
 102   box-shadow: 0 0 2rem rgba(0, 0, 255, 0.1);
 103   display: grid;
 104   grid-template-columns: 1fr;
 105   grid-template-rows: 2fr 4fr 1fr;
 106   grid-gap: 1rem;
 107   transition: transform 300ms linear;
 108   will-change: transform;
 109 }
 110
 111 .slide-menu-active {
 112   transform: none;
 113 }
 114
 115 .menu-header.menu-header__dark {
 116   background: #2B244D;
 117 }
 118
 119 .menu-header {
 120   background: linear-gradient(to right, rgb(181, 199, 192), #82bbb6);
 121   display: grid;
 122   grid-template-rows: 1fr 4fr;
 123   grid-template-columns: 1fr 4fr;
 124   grid-template-areas: "greeting greeting""image details";
 125   box-sizing: border-box;
 126   width: 100%;
 127   align-content: center;
 128   color: white;
 129   box-shadow: 0 0.5rem 2rem rgba(0, 0, 255, 0.2);
 130 }
 131
 132 mat-drawer {
 133   width: 340px;
 134 }
 135
 136 mat-drawer-content {
 137   overflow: overlay;
 138 }
 139
 140 .menumargin-top {
 141   margin-top: 10px;
 142 }
 143
 144 .greeting__text {
 145   grid-area: greeting;
 146   font-size: 1.25rem;
 147   letter-spacing: 0.15rem;
 148   text-transform: uppercase;
 149   margin-top: 1rem;
 150   justify-self: center;
 151   align-self: center;
 152 }
 153
 154 .account-details {
 155   grid-area: details;
 156   display: flex;
 157   flex-flow: column;
 158   margin-left: 1rem;
 159   align-self: center;
 160 }
 161
 162 .name__text {
 163   font-size: 1.15rem;
 164   margin-bottom: 0.5rem;
 165 }
 166
 167 .email__text {
 168   font-size: 0.9rem;
 169   letter-spacing: 0.1rem;
 170 }
 171
 172 .menu-body {
 173   display: grid;
 174   width: 100%;
 175 }
 176
 177 .profile-image__container {
 178   grid-area: image;
 179   margin-right: 0.5rem;
 180   border-radius: 50%;
 181   height: 4rem;
 182   width: 4rem;
 183   overflow: hidden;
 184   display: flex;
 185   justify-content: center;
 186   align-items: center;
 187   background-color: white;
 188   align-self: center;
 189   margin-left: 2rem;
 190 }
 191
 192 .profile__image {
 193   max-width: 4rem;
 194 }
 195
 196 /*Header*/
 197 .main__header {
 198   width: 100%;
 199   display: grid;
 200   grid-template-columns: 1fr 1fr 0.25fr;
 201   grid-template-rows: 1fr;
 202   box-shadow: 0 0 2rem rgba(0, 0, 255, 0.1);
 203   height: 4rem;
 204   margin: 0;
 205   align-items: center;
 206   transition: background-color 500ms linear;
 207   animation: fadein 1s ease-in-out 0ms 1;
 208 }
 209
 210 .main__header-dark {
 211   background-color: #2B244D;
 212   color: white;
 213 }
 214
 215 .toggle-button__container {
 216   cursor: pointer;
 217   position: relative;
 218   margin: 0 0.5rem;
 219 }
 220
 221 .mode-toggle__input {
 222   -webkit-appearance: none;
 223   -moz-appearance: none;
 224 }
 225
 226 .mode-toggle__bg {
 227   height: 1rem;
 228   width: 2.7rem;
 229   border-radius: 0.5rem;
 230   background-color: rgba(0, 0, 0, 0.5);
 231   display: inline-block;
 232   transition: background-color 300ms linear;
 233 }
 234
 235 .mode-toggle__circle {
 236   height: 1.30rem;
 237   width: 1.30rem;
 238   background-color: #2B244D;
 239   position: absolute;
 240   top: -0.2rem;
 241   border-radius: 50%;
 242   box-shadow: 0 0 0 rgba(0, 0, 255, 0.5);
 243   transition: left 300ms linear;
 244   left: 0.1rem;
 245 }
 246
 247 .mode-toggle__circle-checked {
 248   background-color: white;
 249   left: 1.75rem;
 250 }
 251
 252 .mode-toggle__bg-checked {
 253   background-color: #FF0070;
 254 }
 255
 256 .mode-toggle__text {
 257   font-size: 0.75rem;
 258   text-transform: uppercase;
 259   letter-spacing: 0.1rem;
 260 }
 261
 262 /*Content*/
 263 .left__section {
 264   display: grid;
 265   grid-template-rows: 1fr;
 266   grid-template-columns: 1fr 1fr;
 267   max-width: 5rem;
 268 }
 269
 270 .left__section3Col {
 271   display: grid;
 272   grid-template-rows: 1fr;
 273   grid-template-columns: 1fr 1fr 1fr;
 274   max-width: 6rem;
 275 }
 276
 277 .date__text {
 278   text-transform: uppercase;
 279   letter-spacing: 0.1rem;
 280   display: inline;
 281   margin: 0.5rem 0;
 282 }
 283
 284 /*SVGs*/
 285 .hamburger__icon {
 286   position: relative;
 287   z-index: 35;
 288   height: 2rem;
 289   padding: 0.5rem 1.5rem;
 290   margin-right: 1rem;
 291   cursor: pointer;
 292 }
 293
 294 .logo__icon {
 295   height: 2rem;
 296   margin-left: 1rem;
 297 }
 298
 299 .logo__text {
 300   fill: #2B244D;
 301 }
 302
 303 .logo__text-dark {
 304   fill: #ffffff;
 305 }
 306
 307 .hamburger__icon__fill {
 308   fill: #2B244D;
 309 }
 310
 311 .hamburger__icon__fill-dark {
 312   fill: #ffffff;
 313 }
 314
 315 /*
 316 ================
 317     Body
 318 ================
 319 */
 320
 321 .main__container {
 322   height: 100%;
 323   width: 100%;
 324 }
 325
 326 .main__container__body {
 327   min-height: calc(100vh - 140px);
 328 }
 329
 330 .main-container__bg {
 331   position: absolute;
 332   top: 0;
 333   left: 0;
 334   z-index: -2;
 335   opacity: 0;
 336   background: white;
 337   transition: opacity 300ms linear;
 338 }
 339
 340 .main-container__bg-dark {
 341   opacity: 1;
 342   background: linear-gradient(to bottom, rgb(62, 59, 68), rgb(11, 10, 15));
 343   transition: opacity 300ms linear;
 344 }
 345
 346 /*
 347 ================-
 348     Footer
 349 ================
 350 */
 351 .main__footer {
 352   background: transparent;
 353   z-index: 100;
 354 }
 355
 356 .main__footer-dark {
 357   background-color: #2B244D;
 358   color: white;
 359 }
 360
 361 .main-footer__bg-dark {
 362   opacity: 1;
 363   background: rgb(11, 10, 15);
 364   transition: opacity 300ms linear;
 365 }
 366
 367 @media only screen and (max-width: 300px) {
 368   .slide-menu {
 369     width: 100%;
 370   }
 371 }