style.scss

$x1: 8px;
$x0: $x1 / 2;
$x2: 2 * $x1;
$x3: 3 * $x1;
$x4: 4 * $x1;
.aki-date {
  display: flex;
  flex-direction: column;
  width: 100vw;
  text-align: center;
  font-size: 12px;
  background-color: #fff;
  transition: ease-out .35s;
  z-index: 600;
  &-fixed{
    position: fixed;
    top: 100%;
    height: 100%;
    min-height: calc(100vh - 60px);
    max-height: 100vh;
  }
  &-content{
    position: relative;
    max-height: 100%;
  }
  &-visible{
    top: 0;
  }
  &-header {
    border-top: solid 1px #eee;
    > div {
      display: flex;
      justify-content: space-between;
      background-color: #fff;
    }
    &-action{
      height: 48px;
      > button {
        padding: $x2;
        border: none;
        outline: none;
        background: none;
      }
    }
    &-week{
      display: flex;
      justify-content: space-evenly;
      padding: $x1 0;
      font-weight: bold;
      background-color: #fff!important;
      > span {
        flex: 1;
        &.rest{
          color: tomato;
        }
      }
    }
  }
  &-body {
    flex: 1;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
  &-month {
    &-header {
      position: sticky;
      top: 0;
      padding: $x1 0;
      background-color: #f9f9f9;
    }
    &-body {
      display: flex;
      flex-wrap: wrap;
    }
    &-day {
      min-height: 72px;
      color: #999;
      background-color: #fff;
      box-shadow: inset 0 0 2px 2px white;
      > p {
        margin: 0;
        width: calc(100vw / 7);
        &.tip{
          margin: $x0 0;
          color: #f0f0f0;
        }
        &:last-child{
          margin-bottom: $x0;
        }
      }
      &-number{
        color: #666;
        &.rest{
          color: tomato;
        }
        &.disabled{
          color: #eee;
        }
      }
      &-boundary {
        color: white;
        background-color: deepskyblue!important;
      }
      &-range {
        background-color: #afdfff;
      }
      &-disabled {
        color: #eee;
        box-shadow: none;
      }
    }
  }
}