happy-app/client/dev/styles/shared-styles.scss

/**
This file contains reusable styles for common elements
that are performed throughout the application.
 */

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

@import "constants.scss"; // All hardcoded reused values, must be defined as a constant

/* Common properties */
.overflow-hidden{ overflow: hidden; }
.no-padding{ padding: 0 !important; }
.no-margin{ margin: 0;}
.pull-right{ float: right; }
.pull-left{ float: left; }
.hide{ display: none; }
.show{ display: block; }
.auto-height{ height: auto !important; }
.full-height{ height: 100%; }
.full-width{ width: 100%; }
.center-block{ display: block; margin: 0 auto; }

.small-grey-text{
  font-size: $font-small;
  color: $med-grey;
}

/* Styles specific for printing */
@media print {
  .dont-print {
    display: none;
  }
}

/* The div displaying the no data error message*/
.no-data-message{
  background: $super-light-grey;
  padding: 1em 0.5em;
  border-radius: 3px;
  h3, p{ text-align: center; color: $med-grey; }
  h3{ font-size: $font-medium; }
  p{  }
}

/* The card that each chart sits in */
.chart-card{
  margin: $top-margin-home-tile 0;
  @include tablet-landscape-and-up{ min-height: $min-height-home-tile; }
  &.team-chart{ @include tablet-landscape-and-up{ min-height: $min-height-team-tile; }}
}

/* Global adjustments */
body{
  overflow-x: hidden;
  overflow-y: auto;
  @include desktop-and-up{ overflow-y: hidden; }
}

.page-container{
  margin: 1em;
  div{ margin-top: 1em; } // So that cards have gaps between them, on mobile/ stacked view
}

.loading-spinner{
  width: 100px;
  display: block;
  margin: 1em auto;
}

.mat-dialog-container { @extend .no-padding; }

md-card-actions{
  padding: 1em;
  min-height: 3em;
}