spt-crm/httpdocs/plp-angular/src/scss/styles.scss

@import "reset";
@import "variables";

@import "components/structure";
@import "components/ag-grid";
@import "components/breadcrumb";
@import "components/calendar";
@import "components/forms";
@import "components/message";
@import "components/modal";
@import "components/navigation";
@import "components/search_bar";
@import "components/tabs";

/* angular-cli file: src/styles.css */
@import "~angular-calendar/css/angular-calendar.css";
@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-balham.css";

/* apply a natural box layout model to all elements, but allowing person to change */
html {box-sizing:border-box;}
*, *:before, *:after {box-sizing:inherit;}

/* Change font-size for mobile */
html {
  font-size: $font-size-default;
}
body, textarea {
  font-size: $font-size-default;
  line-height: $line-height-default;
  color: $color-default;
  font-family: Helvetica, Arial, Verdana, sans-serif;
}

strong {
  font-weight: bold;
}

.pre-wrap {
  white-space: pre-wrap;
}

/* iOS Fix */
div:hover, div:active,
span:hover, span:active {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/*
  0.0625rem = 1px
  0.125rem  = 2px
  0.25rem   = 4px
  0.5rem    = 8px
  0.625rem  = 10px
  1rem      = 16px
  1.25rem   = 20px
  1.5rem    = 24px
  1.75rem   = 28px
  1.875rem  = 30px
  2rem      = 32px
  2.5rem    = 40px
  3.125rem  = 50px;
  4rem      = 64px
  6.25rem   = 100px
  12.5rem   = 200px
  58rem     = 928px
  62rem     = 992px
  62.375rem = 998px
  62.75rem  = 1004px
*/

.router-component {}

/**************************/

.overview-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  padding: 0 14rem;
  margin: 0 -1rem 3rem -1rem;
  font-size: 0.75rem;
  li {
    width: 7rem;
    height: 7rem;
    /*width: 14rem;
    height: 14rem;*/
    margin: 0 1rem 3rem 1rem;
    background: transparent url('/assets/wall.png') no-repeat left top/100% auto;
    position: relative;
    cursor: pointer;
    p {
      position: absolute;
      top: 7.5rem;
      left: 0;
      width: 100%;
      text-align: center;
    }
  }
}

@media only screen and (max-width: 1004px) {
  .overview-box {
    padding: 0 7rem;
    li {
      width: 3.5rem;
      height: 3.5rem;
      p {
        top: 4rem;
        overflow: hidden;
      }
    }
  }
}