dashboard/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 /*Content*/
 215 .left__section {
 216   display: grid;
 217   grid-template-rows: 1fr;
 218   grid-template-columns: 1fr 1fr;
 219   max-width: 5rem;
 220 }
 221
 222 .left__section3Col {
 223   display: grid;
 224   grid-template-rows: 1fr;
 225   grid-template-columns: 1fr 1fr 1fr;
 226   max-width: 6rem;
 227 }
 228
 229 .date__text {
 230   text-transform: uppercase;
 231   letter-spacing: 0.1rem;
 232   display: inline;
 233   margin: 0.5rem 0;
 234 }
 235
 236 /*SVGs*/
 237 .hamburger__icon {
 238   position: relative;
 239   z-index: 35;
 240   height: 2rem;
 241   padding: 0.5rem 1.5rem;
 242   margin-right: 1rem;
 243   cursor: pointer;
 244 }
 245
 246 .logo__icon {
 247   height: 2rem;
 248   margin-left: 1rem;
 249 }
 250
 251 .logo__text {
 252   fill: #2B244D;
 253 }
 254
 255 .logo__text-dark {
 256   fill: #ffffff;
 257 }
 258
 259 .hamburger__icon__fill {
 260   fill: #2B244D;
 261 }
 262
 263 .hamburger__icon__fill-dark {
 264   fill: #ffffff;
 265 }
 266
 267 /*
 268 ================
 269     Body
 270 ================
 271 */
 272
 273 .main__container {
 274   height: 100%;
 275   width: 100%;
 276 }
 277
 278 .main__container__body {
 279   min-height: calc(100vh - 140px);
 280 }
 281
 282 .main-container__bg {
 283   position: absolute;
 284   top: 0;
 285   left: 0;
 286   z-index: -2;
 287   opacity: 0;
 288   background: white;
 289   transition: opacity 300ms linear;
 290 }
 291
 292 .main-container__bg-dark {
 293   opacity: 1;
 294   background: linear-gradient(to bottom, #B290FF, #2E1D65);
 295   transition: opacity 300ms linear;
 296 }
 297
 298 /* Footer */
 299 .main__footer {
 300   background: transparent;
 301   z-index: 100;
 302 }
 303
 304 .main__footer-dark {
 305   background-color: #2B244D;
 306   color: white;
 307 }
 308
 309 .main-footer-licence {
 310   float: left;
 311 }
 312
 313 .main-footer__bg-dark {
 314   opacity: 1;
 315   background: linear-gradient(to bottom, #B290FF, #2E1D65);
 316   transition: opacity 300ms linear;
 317 }
 318
 319 .main-footer-instance {
 320   margin-right: 10px;
 321   float: right;
 322   color: white;
 323   letter-spacing: 0.1rem;
 324   font-size: 15px;
 325 }
 326
 327 .main-footer-instance:hover {
 328   color: lightgray;
 329 }
 330
 331 @media only screen and (max-width: 300px) {
 332   .slide-menu {
 333     width: 100%;
 334   }
 335 }
 336
 337 .selector-label {
 338   margin-right: 20px;
 339 }
 340
 341 .menu-footer {
 342   display: grid;
 343   width: 100%;
 344   position: absolute;
 345   bottom: 10px;
 346 }
 347
 348 a {
 349   text-decoration: none;
 350   color: black;
 351 }
 352
 353 .dark a {
 354   color: white;
 355 }
 356
 357 a:hover, a:active {
 358   color: lightgray;
 359 }
 360
 361 .nav-caption {
 362   display: inline-block;
 363   padding-left: 6px;
 364 }