webapp-frontend/src/app/rd.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 /* Header */
  30 mat-sidenav-container, mat-sidenav-content, mat-sidenav {
  31   height: 100%;
  32 }
  33
  34 mat-sidenav {
  35   width: 250px;
  36 }
  37
  38 main {
  39   padding: 10px;
  40 }
  41
  42 /* Slide Menu */
  43 .side-menu__dark {
  44   color: white;
  45   background: gray;
  46 }
  47
  48 .side-menu__container {
  49   position: fixed;
  50   left: 0;
  51   top: 0;
  52   width: 100%;
  53   height: 100%;
  54   overflow: hidden;
  55   pointer-events: none;
  56   z-index: 25;
  57 }
  58
  59 .side-menu__container-active {
  60   pointer-events: auto;
  61 }
  62
  63 .side-menu__container::before {
  64   content: '';
  65   cursor: pointer;
  66   position: absolute;
  67   display: block;
  68   top: 0;
  69   left: 0;
  70   height: 100%;
  71   width: 100%;
  72   background-color: #0c1066;
  73   opacity: 0;
  74   transition: opacity 300ms linear;
  75   will-change: opacity;
  76 }
  77
  78 .side-menu__container-active::before {
  79   opacity: 0.3;
  80 }
  81
  82 .slide-menu {
  83   box-sizing: border-box;
  84   transform: translateX(-103%);
  85   position: relative;
  86   top: 0;
  87   left: 0;
  88   z-index: 10;
  89   height: 100%;
  90   width: 90%;
  91   max-width: 26rem;
  92   background-color: white;
  93   box-shadow: 0 0 2rem rgba(0, 0, 255, 0.1);
  94   display: grid;
  95   grid-template-columns: 1fr;
  96   grid-template-rows: 2fr 4fr 1fr;
  97   grid-gap: 1rem;
  98   transition: transform 300ms linear;
  99   will-change: transform;
 100 }
 101
 102 .slide-menu-active {
 103   transform: none;
 104 }
 105
 106 .menu-header.menu-header__dark {
 107   background: #2B244D;
 108 }
 109
 110 .menu-header {
 111   background: linear-gradient(to right, #00FF9B, #5f84fb);
 112   display: grid;
 113   grid-template-rows: 1fr 4fr;
 114   grid-template-columns: 1fr 4fr;
 115   grid-template-areas: "greeting greeting" "image details";
 116   box-sizing: border-box;
 117   width: 100%;
 118   align-content: center;
 119   color: white;
 120   box-shadow: 0 0.5rem 2rem rgba(0, 0, 255, 0.2);
 121 }
 122
 123 mat-drawer {
 124   width: 340px;
 125 }
 126
 127 mat-drawer-content {
 128   overflow: overlay;
 129 }
 130
 131 .menumargin-top {
 132   margin-top: 10px;
 133 }
 134
 135 .greeting__text {
 136   grid-area: greeting;
 137   font-size: 1.25rem;
 138   letter-spacing: 0.15rem;
 139   text-transform: uppercase;
 140   margin-top: 1rem;
 141   justify-self: center;
 142   align-self: center;
 143 }
 144
 145 .account-details {
 146   grid-area: details;
 147   display: flex;
 148   flex-flow: column;
 149   margin-left: 1rem;
 150   align-self: center;
 151 }
 152
 153 .name__text {
 154   font-size: 1.15rem;
 155   margin-bottom: 0.5rem;
 156 }
 157
 158 .email__text {
 159   font-size: 0.9rem;
 160   letter-spacing: 0.1rem;
 161 }
 162
 163 .menu-body {
 164   display: grid;
 165   width: 100%;
 166 }
 167
 168 .profile-image__container {
 169   grid-area: image;
 170   margin-right: 0.5rem;
 171   border-radius: 50%;
 172   height: 4rem;
 173   width: 4rem;
 174   overflow: hidden;
 175   display: flex;
 176   justify-content: center;
 177   align-items: center;
 178   background-color: white;
 179   align-self: center;
 180   margin-left: 2rem;
 181 }
 182
 183 .profile__image {
 184   max-width: 4rem;
 185 }
 186
 187 .home_bg_image {
 188   height: 40em;
 189   background-size: cover;
 190   width: auto;
 191   background-image: url('../assets/intelligence.png');
 192   background-position: 50% 50%;
 193 }
 194
 195 /*Header*/
 196 .main__header {
 197   width: 100%;
 198   display: grid;
 199   grid-template-columns: 1fr 1fr 0.25fr;
 200   grid-template-rows: 1fr;
 201   box-shadow: 0 0 2rem rgba(0, 0, 255, 0.1);
 202   height: 4rem;
 203   margin: 0;
 204   align-items: center;
 205   transition: background-color 500ms linear;
 206   animation: fadein 1s ease-in-out 0ms 1;
 207 }
 208
 209 .main__header-dark {
 210   background-color: #2B244D;
 211   color: white;
 212 }
 213
 214 .toggle-button__container {
 215   cursor: pointer;
 216   position: relative;
 217   margin: 0 0.5rem;
 218 }
 219
 220 .mode-toggle__input {
 221   -webkit-appearance: none;
 222   -moz-appearance: none;
 223 }
 224
 225 .mode-toggle__bg {
 226   height: 1rem;
 227   width: 2rem;
 228   border-radius: 0.5rem;
 229   background-color: rgba(0, 0, 0, 0.5);
 230   display: inline-block;
 231   transition: background-color 300ms linear;
 232 }
 233
 234 .mode-toggle__circle {
 235   height: 1.30rem;
 236   width: 1.30rem;
 237   background-color: #2B244D;
 238   position: absolute;
 239   top: -0.2rem;
 240   border-radius: 50%;
 241   box-shadow: 0 0 0 rgba(0, 0, 255, 0.5);
 242   transition: left 300ms linear;
 243   left: 0.1rem;
 244 }
 245
 246 .mode-toggle__circle-checked {
 247   background-color: white;
 248   left: 1.75rem;
 249 }
 250
 251 .mode-toggle__bg-checked {
 252   background-color: #FF0070;
 253 }
 254
 255 .mode-toggle__text {
 256   font-size: 0.75rem;
 257   text-transform: uppercase;
 258   letter-spacing: 0.1rem;
 259 }
 260
 261 /*Content*/
 262 .left__section {
 263   display: grid;
 264   grid-template-rows: 1fr;
 265   grid-template-columns: 1fr 1fr;
 266   max-width: 5rem;
 267 }
 268
 269 .left__section3Col {
 270   display: grid;
 271   grid-template-rows: 1fr;
 272   grid-template-columns: 1fr 1fr 1fr;
 273   max-width: 6rem;
 274 }
 275
 276 .date__text {
 277   text-transform: uppercase;
 278   letter-spacing: 0.1rem;
 279   display: inline;
 280   margin: 0.5rem 0;
 281 }
 282
 283 /*SVGs*/
 284 .hamburger__icon {
 285   position: relative;
 286   z-index: 35;
 287   height: 2rem;
 288   padding: 0.5rem 1.5rem;
 289   margin-right: 1rem;
 290   cursor: pointer;
 291 }
 292
 293 .logo__icon {
 294   height: 2rem;
 295   margin-left: 1rem;
 296 }
 297
 298 .logo__text {
 299   fill: #2B244D;
 300 }
 301
 302 .logo__text-dark {
 303   fill: #ffffff;
 304 }
 305
 306 .hamburger__icon__fill {
 307   fill: #2B244D;
 308 }
 309
 310 .hamburger__icon__fill-dark {
 311   fill: #ffffff;
 312 }
 313
 314 /*
 315 ================
 316     Body
 317 ================
 318 */
 319
 320 .main__container {
 321   height: 100%;
 322   width: 100%;
 323 }
 324
 325 .main__container__body {
 326   min-height: calc(100vh - 140px);
 327 }
 328
 329 .main-container__bg {
 330   position: absolute;
 331   top: 0;
 332   left: 0;
 333   z-index: -2;
 334   opacity: 0;
 335   background: white;
 336   transition: opacity 300ms linear;
 337 }
 338
 339 .main-container__bg-dark {
 340   opacity: 1;
 341   background: linear-gradient(to bottom, #B290FF, #2E1D65);
 342   transition: opacity 300ms linear;
 343 }
 344
 345 /* Footer */
 346 .main__footer {
 347   background: transparent;
 348   z-index: 100;
 349 }
 350
 351 .main__footer-dark {
 352   background-color: #2B244D;
 353   color: white;
 354 }
 355
 356 .main-footer-licence {
 357   float: left;
 358 }
 359
 360 .main-footer__bg-dark {
 361   opacity: 1;
 362   background: linear-gradient(to bottom, #B290FF, #2E1D65);
 363   transition: opacity 300ms linear;
 364 }
 365
 366 .main-footer-instance {
 367   margin-right: 10px;
 368   float: right;
 369   color: white;
 370   letter-spacing: 0.1rem;
 371   font-size: 15px;
 372 }
 373
 374 .main-footer-instance:hover {
 375   color: lightgray;
 376 }
 377
 378 @media only screen and (max-width: 300px) {
 379   .slide-menu {
 380     width: 100%;
 381   }
 382 }
 383
 384 .selector-label {
 385   margin-right: 20px;
 386 }
 387
 388 .menu-footer {
 389   display: grid;
 390   width: 100%;
 391   position: absolute;
 392   bottom: 10px;
 393 }
 394
 395 a {
 396   text-decoration: none;
 397   color: black;
 398 }
 399
 400 .dark a {
 401   color: white;
 402 }
 403
 404 a:hover, a:active {
 405   color: lightgray;
 406 }
 407
 408 .nav-caption {
 409   display: inline-block;
 410   padding-left: 6px;
 411 }