lixin-web/webapp/less/plugins/vue-beauty.less

vue and bootstrap

@ant-prefix             : ant;
@font-size-lg           : 16px;

@text-color-secondary   : fade(#000, 43%);
@component-background   : #fff;

@shadow-color           : rgba(0, 0, 0, .2);
@shadow-2               : 0 2px 8px @shadow-color;
// Border color
@border-color-base      : #d9d9d9;        // base border outline a component
@border-color-split     : #e9e9e9;        // split border inside a component
@border-width-base      : 1px;            // width of the border for a component
@border-style-base      : solid;          // style of a components border

// Animation
@animation-duration-slow: .3s; // Modal
@animation-duration-base: .2s;
@animation-duration-fast: .1s; // Tooltip

@zindex-modal-mask      : 1040;

// Animation
@ease-out            : cubic-bezier(0.215, 0.61, 0.355, 1);
@ease-in             : cubic-bezier(0.55, 0.055, 0.675, 0.19);
@ease-in-out         : cubic-bezier(0.645, 0.045, 0.355, 1);
@ease-out-back       : cubic-bezier(0.12, 0.4, 0.29, 1.46);
@ease-in-back        : cubic-bezier(0.71, -0.46, 0.88, 0.6);
@ease-in-out-back    : cubic-bezier(0.71, -0.46, 0.29, 1.46);
@ease-out-circ       : cubic-bezier(0.08, 0.82, 0.17, 1);
@ease-in-circ        : cubic-bezier(0.6, 0.04, 0.98, 0.34);
@ease-in-out-circ    : cubic-bezier(0.78, 0.14, 0.15, 0.86);
@ease-out-quint      : cubic-bezier(0.23, 1, 0.32, 1);
@ease-in-quint       : cubic-bezier(0.755, 0.05, 0.855, 0.06);
@ease-in-out-quint   : cubic-bezier(0.86, 0, 0.07, 1);

.make-motion(@className, @keyframeName, @duration: @animation-duration-base) {
  .@{className}-enter-active {
    animation-duration: @duration;
    animation-name: ~"@{keyframeName}In";
  }
  .@{className}-leave-active {
    animation-duration: @duration;
    animation-name: ~"@{keyframeName}Out";
  }
}


@import "~vue-beauty/vb/style/core/motion/zoom";
@import "~vue-beauty/vb/style/core/motion/fade";
@import "~vue-beauty/vb/components/modal/style/modal";

.ant-modal{
  top: 50%;
  //translate3d make text blur
  .translate(0,-50%);
  @media @ie78hack{
    top: 100px;
  }
}

.ant-modal-content{
  border-radius: 10px;
}

.ant-modal-header{
  background: @brand-primary;
  color: #fff;
  text-align: center;
  padding-top: 9px;
  padding-bottom: 9px;
  .border-top-radius(10px);
}
.ant-modal-close{
  top: 15px;
  &,&:focus,&:hover{
    color: #fff;
  }
}

.ant-modal-body{
  padding: 20px;
}

.ant-modal-footer{
  border:none;
  padding:0 20px 20px;
  .el-button{
    min-width: 114px;
    font-size: @font-size-medium;
    padding-top: 11px;
    padding-bottom: 11px;

  }
}