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 .greeting__text {
 123   grid-area: greeting;
 124   font-size: 1.25rem;
 125   letter-spacing: 0.15rem;
 126   text-transform: uppercase;
 127   margin-top: 1rem;
 128   justify-self: center;
 129   align-self: center;
 130 }
 131
 132 .account-details {
 133   grid-area: details;
 134   display: flex;
 135   flex-flow: column;
 136   margin-left: 1rem;
 137   align-self: center;
 138 }
 139
 140 .name__text {
 141   font-size: 1.15rem;
 142   margin-bottom: 0.5rem;
 143 }
 144
 145 .email__text {
 146   font-size: 0.9rem;
 147   letter-spacing: 0.1rem;
 148 }
 149
 150 .menu-body {
 151   display: grid;
 152   width: 100%;
 153 }
 154
 155 .profile-image__container {
 156   grid-area: image;
 157   margin-right: 0.5rem;
 158   border-radius: 50%;
 159   height: 4rem;
 160   width: 4rem;
 161   overflow: hidden;
 162   display: flex;
 163   justify-content: center;
 164   align-items: center;
 165   background-color: white;
 166   align-self: center;
 167   margin-left: 2rem;
 168 }
 169
 170 .profile__image {
 171   max-width: 4rem;
 172 }
 173
 174 .home_bg_image{
 175     height:40em;
 176     background-size:cover;
 177     width:auto;
 178     background-image:url('../assets/intelligence.png');
 179     background-position:50% 50%;
 180 }
 181
 182 /*Header*/
 183 .main__header {
 184   width: 100%;
 185   display: grid;
 186   grid-template-columns: 1fr 1fr 0.25fr;
 187   grid-template-rows: 1fr;
 188   box-shadow: 0 0 2rem rgba(0, 0, 255, 0.1);
 189   height: 4rem;
 190   margin: 0;
 191   align-items: center;
 192   transition: background-color 500ms linear;
 193   animation: fadein 1s ease-in-out 0ms 1;
 194 }
 195
 196 .main__header-dark {
 197   background-color: #2B244D;
 198   color: white;
 199 }
 200
 201 .toggle-button__container {
 202   cursor: pointer;
 203   position: relative;
 204   margin: 0 0.5rem;
 205 }
 206
 207 .mode-toggle__input {
 208   -webkit-appearance: none;
 209   -moz-appearance: none;
 210 }
 211
 212 .mode-toggle__bg {
 213   height: 1rem;
 214   width: 2rem;
 215   border-radius: 0.5rem;
 216   background-color: rgba(0, 0, 0, 0.5);
 217   display: inline-block;
 218   transition: background-color 300ms linear;
 219 }
 220
 221 .mode-toggle__circle {
 222   height: 1.30rem;
 223   width: 1.30rem;
 224   background-color: #2B244D;
 225   position: absolute;
 226   top: -0.2rem;
 227   border-radius: 50%;
 228   box-shadow: 0 0 0 rgba(0, 0, 255, 0.5);
 229   transition: left 300ms linear;
 230   left: 0.1rem;
 231 }
 232
 233 .mode-toggle__circle-checked {
 234   background-color: white;
 235   left: 1.75rem;
 236 }
 237
 238 .mode-toggle__bg-checked {
 239   background-color: #FF0070;
 240 }
 241
 242 .mode-toggle__text {
 243   font-size: 0.75rem;
 244   text-transform: uppercase;
 245   letter-spacing: 0.1rem;
 246 }
 247
 248 /*Content*/
 249 .left__section {
 250   display: grid;
 251   grid-template-rows: 1fr;
 252   grid-template-columns: 1fr 1fr;
 253   max-width: 5rem;
 254 }
 255
 256 .left__section3Col {
 257   display: grid;
 258   grid-template-rows: 1fr;
 259   grid-template-columns: 1fr 1fr 1fr;
 260   max-width: 6rem;
 261 }
 262
 263 .date__text {
 264   text-transform: uppercase;
 265   letter-spacing: 0.1rem;
 266   display: inline;
 267   margin: 0.5rem 0;
 268 }
 269
 270 /*SVGs*/
 271 .hamburger__icon {
 272   position: relative;
 273   z-index: 35;
 274   height: 2rem;
 275   padding: 0.5rem 1.5rem;
 276   margin-right: 1rem;
 277   cursor: pointer;
 278 }
 279
 280 .logo__icon {
 281   height: 2rem;
 282   margin-left: 1rem;
 283 }
 284
 285 .logo__text {
 286   fill: #2B244D;
 287 }
 288
 289 .logo__text-dark {
 290   fill: #ffffff;
 291 }
 292
 293 .hamburger__icon__fill {
 294   fill: #2B244D;
 295 }
 296
 297 .hamburger__icon__fill-dark {
 298   fill: #ffffff;
 299 }
 300
 301 /*
 302 ================
 303     Body
 304 ================
 305 */
 306
 307 .main-container__bg {
 308   height: 100%;
 309   width: 100%;
 310   position: absolute;
 311   top: 0;
 312   left: 0;
 313   z-index: -2;
 314   opacity: 0;
 315   background: white;
 316   transition: opacity 300ms linear;
 317 }
 318
 319 .main-container__bg-dark {
 320   opacity: 1;
 321   background: linear-gradient(to bottom, #B290FF, #2E1D65);
 322   transition: opacity 300ms linear;
 323 }
 324
 325 /*
 326 ================-
 327     Footer
 328 ================
 329 */
 330 .main__footer {
 331   background: transparent;
 332   position: absolute;
 333   bottom: 1rem;
 334   left: 1.5rem;
 335   z-index: 100;
 336 }
 337
 338 .copyright__text {
 339   letter-spacing: 0.1rem;
 340   color: gray;
 341 }
 342
 343 @media only screen and (max-width: 300px) {
 344   .slide-menu {
 345     width: 100%;
 346   }
 347 }