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 .home_bg_image {
 197   height: 40em;
 198   background-size: cover;
 199   width: auto;
 200   background-image: url('../assets/intelligence.png');
 201   background-position: 50% 50%;
 202 }
 203
 204 /*Header*/
 205 .main__header {
 206   width: 100%;
 207   display: grid;
 208   grid-template-columns: 1fr 1fr 0.25fr;
 209   grid-template-rows: 1fr;
 210   box-shadow: 0 0 2rem rgba(0, 0, 255, 0.1);
 211   height: 4rem;
 212   margin: 0;
 213   align-items: center;
 214   transition: background-color 500ms linear;
 215   animation: fadein 1s ease-in-out 0ms 1;
 216 }
 217
 218 .main__header-dark {
 219   background-color: #2B244D;
 220   color: white;
 221 }
 222
 223 .toggle-button__container {
 224   cursor: pointer;
 225   position: relative;
 226   margin: 0 0.5rem;
 227 }
 228
 229 .mode-toggle__input {
 230   -webkit-appearance: none;
 231   -moz-appearance: none;
 232 }
 233
 234 .mode-toggle__bg {
 235   height: 1rem;
 236   width: 2rem;
 237   border-radius: 0.5rem;
 238   background-color: rgba(0, 0, 0, 0.5);
 239   display: inline-block;
 240   transition: background-color 300ms linear;
 241 }
 242
 243 .mode-toggle__circle {
 244   height: 1.30rem;
 245   width: 1.30rem;
 246   background-color: #2B244D;
 247   position: absolute;
 248   top: -0.2rem;
 249   border-radius: 50%;
 250   box-shadow: 0 0 0 rgba(0, 0, 255, 0.5);
 251   transition: left 300ms linear;
 252   left: 0.1rem;
 253 }
 254
 255 .mode-toggle__circle-checked {
 256   background-color: white;
 257   left: 1.75rem;
 258 }
 259
 260 .mode-toggle__bg-checked {
 261   background-color: #FF0070;
 262 }
 263
 264 .mode-toggle__text {
 265   font-size: 0.75rem;
 266   text-transform: uppercase;
 267   letter-spacing: 0.1rem;
 268 }
 269
 270 /*Content*/
 271 .left__section {
 272   display: grid;
 273   grid-template-rows: 1fr;
 274   grid-template-columns: 1fr 1fr;
 275   max-width: 5rem;
 276 }
 277
 278 .left__section3Col {
 279   display: grid;
 280   grid-template-rows: 1fr;
 281   grid-template-columns: 1fr 1fr 1fr;
 282   max-width: 6rem;
 283 }
 284
 285 .date__text {
 286   text-transform: uppercase;
 287   letter-spacing: 0.1rem;
 288   display: inline;
 289   margin: 0.5rem 0;
 290 }
 291
 292 /*SVGs*/
 293 .hamburger__icon {
 294   position: relative;
 295   z-index: 35;
 296   height: 2rem;
 297   padding: 0.5rem 1.5rem;
 298   margin-right: 1rem;
 299   cursor: pointer;
 300 }
 301
 302 .logo__icon {
 303   height: 2rem;
 304   margin-left: 1rem;
 305 }
 306
 307 .logo__text {
 308   fill: #2B244D;
 309 }
 310
 311 .logo__text-dark {
 312   fill: #ffffff;
 313 }
 314
 315 .hamburger__icon__fill {
 316   fill: #2B244D;
 317 }
 318
 319 .hamburger__icon__fill-dark {
 320   fill: #ffffff;
 321 }
 322
 323 /*
 324 ================
 325     Body
 326 ================
 327 */
 328
 329 .main__container {
 330   height: 100%;
 331   width: 100%;
 332 }
 333
 334 .main__container__body {
 335   min-height: calc(100vh - 140px);
 336 }
 337
 338 .main-container__bg {
 339   position: absolute;
 340   top: 0;
 341   left: 0;
 342   z-index: -2;
 343   opacity: 0;
 344   background: white;
 345   transition: opacity 300ms linear;
 346 }
 347
 348 .main-container__bg-dark {
 349   opacity: 1;
 350   background: linear-gradient(to bottom, rgb(62, 59, 68), rgb(11, 10, 15));
 351   transition: opacity 300ms linear;
 352 }
 353
 354 /*
 355 ================-
 356     Footer
 357 ================
 358 */
 359 .main__footer {
 360   background: transparent;
 361   z-index: 100;
 362 }
 363
 364 .main__footer-dark {
 365   background-color: #2B244D;
 366   color: white;
 367 }
 368
 369 .main-footer__bg-dark {
 370   opacity: 1;
 371   background: rgb(11, 10, 15);
 372   transition: opacity 300ms linear;
 373 }
 374
 375 @media only screen and (max-width: 300px) {
 376   .slide-menu {
 377     width: 100%;
 378   }
 379 }