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