hair-cut.scss

page-hair-cut {
  .list-ios .item-block .item-inner {
    border: none;
  }

  .bar-buttons-ios[end] {
    width: 35px;
    height: 35px;
    text-align: center;
    margin-right: 10px;
  }

  .duty {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 36px;
    background-color: #fff;
  }

  .duty-state {
    border: 1px solid #f8ac56;
    font-size: 1.3rem;
    border-radius: 4px;
    padding: 1px 4px;
    color: #f8ac56;
  }

  .duty div {
    width: 50%;
    text-align: center;
    position: relative;
    height: 36px;
    line-height: 36px;
  }

  .duty-title {
    position: relative;
    color: #e42417;
  }

  .duty-title::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #e42417;
    bottom: -10px;
    left: 0px;
  }

  .span-btn {
    background-color: #e42417;
    font-size: 1.4rem;
    padding: 4px 6px;
    color: #fff;
    border-radius: 3px;
  }

  .dutyItem > div {
    margin-bottom: 10px;
  }

  .daySpan {
    padding: 2px 20px;
    background-color: #e42417;
    color: #fff;
    border-bottom-right-radius: 5px;
  }

  .nightSpan {
    padding: 4px 20px;
    background-color: #4e5e6f;
    color: #fff;
    border-bottom-right-radius: 5px;
  }

  .duty-Obj .item-ios p {
    margin-bottom: 15px;
  }

  .duty-Obj .label-ios {
    margin: 0;
  }

  .duty-Obj {
    .item-ios.item-block .item-inner {
      background-color: #f5f6f7;
    }
  }

  .room {
    padding: 15px;
    background-color: #fff;
  }

  .morning, .afternoon {
    display: flex;

    .morning-text, .afternoon-text {
      width: 20%;
      display: flex;
      align-items: center;
      font-weight: bold;
      padding-left: 15px;
    }

    .morning-room, .morning-room {
      width: 80%;
      padding: 10px 5px;
      min-height: 53px;

      > span {
        display: inline-block;
        font-size: 1.5rem;
        background-color: #ffa698;
        border: 1px solid #ffa698;
        border-radius: 4px;
        color: #333333;
        padding: 8px 12px;
        margin-bottom: 8px;
        margin-right: 5px;

        span {
          margin: 0;
        }
      }
      > span.import {
        background-color: #e42417;
        border: 1px solid #e42417;
        color: #ffffff;
      }
    }
  }

  .morning + .afternoon {
    border-top: 1px solid #cccccc;
  }

  .already, .notYet {
    border: 1px solid #dddddd;
    border-radius: 3px;

    p {
      background-color: #fff1f0;
      color: #e42417;
      padding: 6px 15px;
    }
  }

  .already {

    .morning {
      border-top-right-radius: 8px;
      border-top-left-radius: 8px;
    }

    .afternoon {
      border-bottom-right-radius: 8px;
      border-bottom-left-radius: 8px;
    }
  }

  .notYet {
    margin-top: 15px;

    .morning, .afternoon {
      .morning-room {
        span {
          background-color: #f2f2f2;
          border: 1px solid #f2f2f2;
          color: #666666;
        }
      }
    }
  }

  .duty-content {
    padding: 15px;

    ion-item {
      p {
        padding: 0 10px 10px 10px;

        span {
          color: #333333;
          font-weight: 500;

          span {
            color: #666666;
            font-weight: 400;
          }
        }
      }

      p:first-child {
        border-bottom: 1px solid #cccccc;
        margin-bottom: 10px;
      }
    }
  }

  .apply {
    font-size: 1.4rem;
    border-radius: 5px;

    .apply-room {
      font-size: 1.4rem;

      span {
        margin-right: 5px;
      }
    }

    .meet-type {
      font-size: 1.4rem;

      span {
        font-size: 1.4rem;
      }
    }

    .order-time {
      font-size: 1.4rem;
    }
  }

  .apply + .apply {
    margin-top: 8px;
  }

  .list-ios .item-block .item-inner {
    padding: 0;
  }
}