lojk-ui/src/components/lotusCalendar/lotusCalendar.less

lojk vue ui components library

@import (reference) "../../style/config.less";

@lotusCalendar: lotus-calendar;
.@{lotusCalendar} {
  background: #fff;
  position: absolute;
  bottom:0;
  transform: translateY(100%);
  animation:calendarMove 0.4s ease-in-out forwards;
  &-out{
    animation:calendarOut 0.4s ease-in-out forwards;
  }
  &-wrap{
    position: fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index: 999;
  }
  &-chose{
    position: relative;
    .flex();
    .flex-hvc();
    text-align: center;
    .fontSize(28);
    color:#333;
    &::before{
      content: '';
      width:100%;
      height:1px;
      background: #eee;
      position: absolute;
      bottom:0;
    }
    &-item{
      flex:1;
      .paddingTop(20);
      .paddingBottom(20);
    }
    &-act{
      position: relative;
      color:#13a3ff;
      &::before{
        content: '';
        position: absolute;
        left:50%;
        bottom:0;
        transform: translateX(-50%);
        .widthSingle(40);
        .heightSingle(4);
        background:#13a3ff;
      }
    }
  }
  &-cur-date{
    .paddingTop(16);
    .paddingLeft(40);
    .paddingRight(40);
  }
  &-cur-text{
    color:#13a3ff;
  }
  &-center{
    .fontSize(32);
    .flex();
    .flex-hvc();
    justify-content: space-between;
    text-align: center;
  }
  &-week{
    .flex();
    &-text{
      .paddingTop(10);
      .paddingBottom(10);
      .sectionWidth(107,750);
      text-align: center;
      .fontSize(30);
      .heightSingle(50);
      .lineHeight(50);
      color:#333;
    }
  }
  &-days{
    overflow: hidden;
    .paddingBottom(10);
    &-text{
      float:left;
      .marginBottom(10);
      .fontSize(30);
      .sectionWidth(107,750);
      text-align: center;
      .heightSingle(60);
      .lineHeight(60);
    }
    &-range{
      background: #e4f2fd;
    }
    &-gray{
      color:#999;
      .width(60);
      .lineHeight(60);
      white-space: nowrap;
      margin-left: auto;
      margin-right: auto;
    }
    &-act{
      color:#fff;
      .flex();
      .flex-hvc();
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      .width(60);
      .lineHeight(60);
      border-radius: 50% 50%;
      background: #13a3ff;
    }
  }
  &-prev{
    color:#999;
    .fontSize(36);
  }
  &-next{
    color:#999;
    .fontSize(36);
  }
  &-month{
    flex:1;
    .flex();
    .flex-hvc();
    justify-content: space-between;
    .paddingRight(120);
  }
  &-year{
    flex: 1;
    .flex();
    .flex-hvc();
    justify-content: space-between;
  }
  &-mask{
    position: fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index:-1;
    background: rgba(0,0,0,0.5);
  }
  //动画效果
  @keyframes calendarMove{
    0%{
      transform: translateY(100%);
    }
    100%{
      transform: translateY(0%);
    }
  }
  @keyframes calendarOut{
    0%{
      transform: translateY(0%);
    }
    100%{
      transform: translateY(100%);
    }
  }
}