overflow-webapp/src/theme/theme.scss

@import '~@angular/material/theming';
@import '~app/pages/pages.component.scss';
@import '~packages/commons/component/sidebar/sidebar.component.scss';
@import '~packages/commons/component/menu-item/menu-item.component.scss';
@import '~packages/commons/component/dashboard-card/dashboard-card.component.scss';
@import '~packages/commons/component/sensor-summary/sensor-summary.component.scss';
@import '~angular-tree-component/dist/angular-tree-component.css';

$mat-light-theme-background: (
  status-bar: map_get($mat-grey, 300),
  app-bar:    map_get($mat-grey, 100),
  background: map_get($mat-indigo, 50),
  hover:      rgba(black, 0.04), // TODO(kara): check style with Material Design UX
  card:       white,
  dialog:     white,
  disabled-button: $black-12-opacity,
  raised-button: white,
  focused-button: $black-6-opacity,
  selected-button: map_get($mat-grey, 300),
  selected-disabled-button: map_get($mat-grey, 400),
  disabled-button-toggle: map_get($mat-grey, 200),
  unselected-chip: map_get($mat-grey, 300),
  disabled-list-option: map_get($mat-grey, 200),
);

@include mat-core();

$primary : $mat-indigo;
$accent  : $mat-orange;
$warn    : $mat-red;



$primary-app-primary: mat-palette($primary , 400);
$primary-app-accent:  mat-palette($accent , 900);
$primary-app-warn:    mat-palette($warn );
$cdk-theme:   mat-light-theme($primary-app-primary, $primary-app-accent,$primary-app-warn);

of-sidebar{
    $sidebar-app-primary: mat-palette($primary , 400);
    $sidebar-app-accent:  mat-palette($accent , 900);
    $sidebar-app-warn:    mat-palette($warn );
    $cdk-sidebar-theme:   mat-dark-theme($sidebar-app-primary, $sidebar-app-accent,$sidebar-app-warn);
    @include mat-list-theme($cdk-sidebar-theme); 
}
   
of-menu-item{
    @include menu-item($cdk-theme,20px)
}

of-dashboard-card {
    $dashcard-primary: mat-palette($primary);
    $dashcard-accent:  mat-palette($accent);
    $dashcard-warn:    mat-palette($warn);
    $dashcard-theme:   mat-dark-theme($dashcard-primary, $dashcard-accent,$dashcard-warn);
    @include dashcard($dashcard-theme);    
}

@include angular-material-theme($cdk-theme);
@include auth($cdk-theme);
@include sensor-summary($cdk-theme);


html {
  height:100%;
}
body{
  padding: 0px !important;
  margin: 0px !important;
  height:100%;
}
.components-container-gt-xs {
    padding: 20px;
    // background-color: #fdfdfd;
}
.components-container-xs {
    padding: 5px !important;
    // background-color: #fdfdfd;
}
.component-preview {
    padding: 20px;
}
.ps-content {
  height: 100%;
}

.loader-container {
    background-color: white;
    width: 100vw;
    height: 100vh;
    z-index: 2000;
    position: absolute;
    
    -moz-animation: cssAnimation 1s ease-in 3s forwards;
    /* Firefox */
    animation: cssAnimation 1s ease-in 3s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 1s ease-in 3s forwards;
    /* Opera */
    animation: cssAnimation 1s ease-in 3s forwards;
    animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes cssAnimation {
    to {
        opacity:0;
        display: none;
        visibility:hidden;
    }
}
@keyframes cssAnimation {
    to {
        visibility:hidden;
        opacity:0;
        display: none;
    }
}



.spinner {
    margin: 50vh auto 0;
    width: 70px;
    text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  

  border-radius: 100%;
  display: inline-block;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.bounce3 {
    background-color: orange;
}

.spinner .bounce1 {
    background-color: blue;
  animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
    background-color: red;
  animation-delay: -0.16s;
  animation-delay: -0.16s;
}



@keyframes sk-bouncedelay {
  0%, 80%, 100% { transform: scale(0) }
  40% { transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    transform: scale(0);
    transform: scale(0);
  } 40% { 
    transform: scale(1.0);
    transform: scale(1.0);
  }
}