qm-ui/style/mixins.less

千米公有云管理端UI基础组件库

.transitions(@property, @duration, @timingFunction) {
  -webkit-transition: @arguments;
  -moz-transition: @arguments;
  -ms-transition: @arguments;
  -o-transition: @arguments;
  transition: @arguments;
}
.transitionsNone {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
}

.border-radius(@value) {
  -webkit-border-radius: @value;
  -moz-border-radius: @value;
  border-radius: @value;
}

.boxShadow(@x:0,@y:0,@blur:3px,@color:#eee) {
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
  box-shadow: @arguments;
}

.oneLineEllipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.button-color(@color; @background; @border) {
  color: @color;
  background-color: @background;
  border-color: @border;
  // a inside Button which only work in Chrome
  // http://stackoverflow.com/a/17253457
  > a:only-child {
    color: currentColor;
    &:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background: transparent;
    }
  }
}

.button-disabled() {
  &.disabled,
  &[disabled] {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      .button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
    }
  }
}

.button-variant-other(@color; @background; @border) {
  .button-color(@color; @background; @border);

  &:hover,
  &:focus {
    .button-color(@primary-5; @background; @primary-5);
  }

  &:active,
  &.active {
    .button-color(@primary-7; @background; @primary-7);
  }

  .button-disabled();
}