webapp-frontend/src/app/app.component.css

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