qt-public-ui/style/common.less

新设计规范下业务组件库

@import '../theme/umeng.less';

.clearfix() {
  *zoom: 1;
  &::before,
  &::after {
    content: '';
    display: table;
  }
  &::after {
    clear: both;
  }
}

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

.n-line-ellipsis(@line) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @line;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hide-scroller() {
  &::-webkit-scrollbar {
    display: none;
  }
  &::-webkit-scrollbar-thumb {
    display: none;
  }
}

/* umui 样式逻辑 */
.umui-number() {
  font-family: Roboto-Regular, Tahoma, Arial, sans-serif !important;
  letter-spacing: 0.1px;
}

.umui-indicator() {
  font-family: AlibabaSans102-Bd, Tahoma, Arial, sans-serif !important;
  letter-spacing: -1px;
}

.umui-hoverable-icon() {
  color: @disabled-color;

  &:hover {
    color: @text-color-secondary;
  }
}

/* 图标 base64 */
.base64(@fz) {
  content: '';
  display: block;
  height: @fz;
  width: @fz;
  background-color: transparent;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.base64-close(@fz: 14px) {
  &::before {
    .base64(@fz);

    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWbvuWxgl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjAwIDIwMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjAwIDIwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtmaWxsOiNDNEM5RDI7fQo8L3N0eWxlPgo8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjExOC40LDEwMCAxODcuNSwzMC45IDE2OS4xLDEyLjUgMTAwLDgxLjYgMzAuOSwxMi41IDEyLjUsMzAuOSA4MS42LDEwMCAxMi41LDE2OS4xIDMwLjksMTg3LjUgCgkxMDAsMTE4LjQgMTY5LjEsMTg3LjUgMTg3LjUsMTY5LjEgIi8+Cjwvc3ZnPgo=");
  }
}

.base64-dropDown(@fz: 14px) {
  &::before {
    .base64(@fz);

    transition: transform 0.3s;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWbvuWxgl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjAwIDIwMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjAwIDIwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM2Qjc5OEU7fQo8L3N0eWxlPgo8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjE3MC44LDUyLjMgMTg3LjUsNjcuNiAxMDAuMSwxNDcuNyAxMi41LDY3LjYgMjkuMyw1Mi4zIDEwMC4xLDExNyAiLz4KPC9zdmc+Cg==");
  }
}

// 滚动条样式

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar:horizontal {
  height: 4px;
}
::-webkit-scrollbar:vertical {
  width: 4px;
}
::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}
::-webkit-scrollbar-track-piece {
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  border-radius: 0;
  background-color: @body-background;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
::-webkit-scrollbar-thumb:horizontal:hover,
::-webkit-scrollbar-thumb:vertical:hover {
  background-color: @body-background;
}
::-webkit-scrollbar-thumb:horizontal:active,
::-webkit-scrollbar-thumb:vertical:active {
  background-color: @body-background;
}