material-ui/src/less/components/paper.less

Material Design UI components built with React

.mui-paper {

  &.mui-rounded {
    .lh-border-radius(2px);

    & > .mui-paper-container {
      .lh-border-radius(2px);
    }
  }

  &.mui-circle {
    .lh-border-radius(50%);

    & > .mui-paper-container {
      .lh-border-radius(50%);
    }
  }

  & > .mui-paper-container {
    height: 100%;
    width: 100%;
  }

  &.mui-z-depth-1 {
    .lh-box-shadow(0 1px 4px rgba(0, 0, 0, 0.24));
    & > .mui-z-depth-bottom { .lh-box-shadow(0 1px 6px rgba(0, 0, 0, 0.12)); }
  }

  &.mui-z-depth-2 {
    .lh-box-shadow(0 3px 10px rgba(0, 0, 0, 0.23));
    & > .mui-z-depth-bottom { .lh-box-shadow(0 3px 10px rgba(0, 0, 0, 0.16)); }
  }

  &.mui-z-depth-3 {
    .lh-box-shadow(0 6px 10px rgba(0, 0, 0, 0.23));
    & > .mui-z-depth-bottom { .lh-box-shadow(0 10px 30px rgba(0, 0, 0, 0.19)); }
  }

  &.mui-z-depth-4 {
    .lh-box-shadow(0 10px 18px rgba(0, 0, 0, 0.22));
    & > .mui-z-depth-bottom { .lh-box-shadow(0 14px 45px rgba(0, 0, 0, 0.25)); }
  }

  &.mui-z-depth-5 {
    .lh-box-shadow(0 15px 20px rgba(0, 0, 0, 0.22));
    & > .mui-z-depth-bottom { .lh-box-shadow(0 19px 60px rgba(0, 0, 0, 0.30)); }
  }

}