vue-moo/src/component/vue/instance/datepicker/theme.css

moo

@import 'planes/base.css';
@import 'planes/unit.css';

.moo-datepicker {
  @mixin clear-select;
  width: 600pxr;
  border: 1px solid #06a413;
  background-color: #f8fffa;

  .moo-btn .btn-touch {
    background: transparent;
    border-radius: 0;
    text-align: center;
    border: none;
    font-size: 12pxr;
    color: #333;
    text-shadow: none;
  }

  .moo-select .select-pull-down {
    overflow-y: auto;
    height: 200pxr;
  }
}

.moo-datepicker .datepicker-area {
  padding: 0 5pxr 5pxr 5pxr;

  .moo-btn .btn-touch {
    padding: 0;
  }

  .area-list {
    overflow: hidden;
  }

  .area-title {
    overflow: hidden;
    float: left;
    width: 33.33%;
  }

  .area-title .left {
    float: left;
    box-sizing: border-box;
    padding-left: 10pxr;

    .moo-btn .btn-touch {
      text-align: left;
      color: #00619c;
    }
  }
}

.moo-datepicker .datepicker-nav {
  overflow: hidden;
  padding: 5pxr;
  border-bottom: 1px solid #96d39c;
  background-color: #fff;

  .nav-item {
    float: left;
    width: 70%;
  }

  .nav-item .moo-input {
    input {
      font-size: 30pxr;
      font-weight: bold;
      color: #0d462c;
    }
  }

  .nav-item:last-child {
    width: 30%;
  }


  .nav-item:last-child .moo-btn {
    float: right;
  }

  .nav-item:last-child .moo-btn .btn-touch {
    font-size: 30pxr;
  }
}

.moo-datepicker .row {
  width: 100%;
  border-collapse: collapse;
}

.moo-datepicker .row tr {
  overflow: hidden;
}

.moo-datepicker .row tr td {
  padding: 0;
  text-align: center;
  border: 1px solid #96d39c;

  .moo-btn .btn-touch {
    padding: 10pxr 0;
    background-color: #f6fff7;
    font-size: 13pxr;
    text-align: center;
    color: #2f5c45;
  }
}

.moo-datepicker .row tr td:first-child  {
  .moo-btn .btn-touch {
    background-color: #dfffe2;
    color: #0d462c;
  }
}

.moo-datepicker .row tr td.select {
  .moo-btn .btn-touch {
    background-color: #ade5b2;
    color: #cc006f;
  }
}

.moo-datepicker .datepicker-week {
  font-size: 12pxr;
  color: #456a48;
}

.moo-datepicker tr.datepicker-week td {
  padding: 10pxr 0;
  background-color: #dfffe2;
  box-sizing: border-box;
}

.moo-datepicker tr.datepicker-week td:first-child {
  color: #cb3564;
}

.moo-datepicker .datepicker-items .datepicker-item-title {
  font-size: 12pxr;
  color: #6bb191;
}

.moo-datepicker .datepicker-items-operator {
  overflow: hidden;

  .moo-btn {
    float: left;
    width: 50%;
  }

  .moo-btn .btn-touch {
    padding: 10pxr;
  }
}

.moo-datepicker .area-time {
  margin-top: 10pxr;
}

.moo-datepicker .speed-select {
  padding: 0;
  height: 60pxr;

  .moo-select {
    float: left;
    margin: 5pxr;
    width: 140pxr;
  }

  .datepicker-items {
    overflow-y: scroll;
    height: 200pxr;
  }

  .moo-btn .btn-touch {
    padding: 5pxr;
    text-indent: 20pxr;
  }
  .moo-btn .btn-touch:hover {
    background-color: #dfffe2;
  }
}