vhb-table/lib/select/style/style.css

一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...

@charset "UTF-8";
/*font*/
/*size*/
/*icon*/
/*color*/
/*input/radio/checkbox*/
/*popup*/
/*table*/
/*filter*/
/*menu*/
/*loading*/
/*validate*/
/*grid*/
/*toolbar*/
/*tooltip*/
/*pager*/
/*modal*/
/*checkbox*/
/*radio*/
/*button*/
/*input*/
/*textarea*/
/*form*/
/*select*/
/*switch*/
/*pulldown*/
/*加载中*/
.vhb-loading {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 99;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-color: rgba(0, 0, 0, 0.2); }
  .vhb-loading.is--visible {
    display: block; }
  .vhb-loading .vhb-loading--spinner {
    width: 56px;
    height: 56px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%); }
    .vhb-loading .vhb-loading--spinner:before, .vhb-loading .vhb-loading--spinner:after {
      content: "";
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #409eff;
      opacity: 0.6;
      position: absolute;
      top: 0;
      left: 0;
      -webkit-animation: bounce 2.0s infinite ease-in-out;
              animation: bounce 2.0s infinite ease-in-out; }
    .vhb-loading .vhb-loading--spinner:after {
      -webkit-animation-delay: -1.0s;
              animation-delay: -1.0s; }

@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

@keyframes bounce {
  0%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

.size--mini .vhb-loading .vhb-loading--spinner {
  width: 38px;
  height: 38px; }

.size--small .vhb-loading .vhb-loading--spinner {
  width: 44px;
  height: 44px; }

.size--medium .vhb-loading .vhb-loading--spinner {
  width: 50px;
  height: 50px; }

.vhb-select {
  position: relative;
  display: inline-block;
  width: 180px;
  color: #606266;
  text-align: left; }
  .vhb-select > .vhb-input .vhb-input--inner {
    cursor: pointer; }
  .vhb-select.is--disabled > .vhb-input .vhb-input--inner {
    cursor: no-drop; }
  .vhb-select.is--loading > .vhb-input .vhb-input--inner {
    cursor: progress; }
  .vhb-select > .vhb-input {
    width: 100%; }
    .vhb-select > .vhb-input .vhb-input--suffix-icon {
      -webkit-transition: -webkit-transform 0.2s ease-in-out;
      transition: -webkit-transform 0.2s ease-in-out;
      transition: transform 0.2s ease-in-out;
      transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; }
  .vhb-select.is--active > .vhb-input .vhb-input--inner {
    border: 1px solid #409eff; }

.vhb-select-slots {
  display: none; }

.vhb-select--panel {
  display: none;
  position: absolute;
  left: 0;
  padding: 4px 0;
  color: #606266;
  text-align: left; }
  .vhb-select--panel:not(.is--transfer) {
    min-width: 100%; }
  .vhb-select--panel.is--transfer {
    position: fixed; }
  .vhb-select--panel.animat--leave {
    display: block;
    opacity: 0;
    -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
    -webkit-transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transform-origin: center top;
            transform-origin: center top;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d; }
    .vhb-select--panel.animat--leave[placement="top"] {
      -webkit-transform-origin: center bottom;
              transform-origin: center bottom; }
  .vhb-select--panel.animat--enter {
    opacity: 1;
    -webkit-transform: scaleY(1);
            transform: scaleY(1); }

.vhb-select-option--wrapper {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px 0;
  max-height: 200px;
  border-radius: 4px;
  border: 1px solid #DADCE0;
  -webkit-box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
  background-color: #fff; }

.vhb-optgroup .vhb-optgroup--title {
  padding: 0 6px;
  color: #909399;
  font-size: 12px; }

.vhb-optgroup--wrapper .vhb-select-option {
  padding: 0 20px; }

.vhb-select-option {
  padding: 0 10px;
  max-width: 600px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  .vhb-select-option.is--selected {
    font-weight: 700;
    color: #409eff; }
  .vhb-select-option:not(.is--disabled) {
    cursor: pointer; }
    .vhb-select-option:not(.is--disabled).is--hover {
      background-color: #f5f7fa; }
  .vhb-select-option.is--disabled {
    color: #BFBFBF;
    cursor: no-drop; }

.vhb-select--empty-placeholder {
  padding: 0 10px;
  text-align: center;
  color: #C0C4CC; }

.vhb-select,
.vhb-select--panel {
  font-size: 14px; }
  .vhb-select.size--medium,
  .vhb-select--panel.size--medium {
    font-size: 14px; }
  .vhb-select.size--small,
  .vhb-select--panel.size--small {
    font-size: 13px; }
  .vhb-select.size--mini,
  .vhb-select--panel.size--mini {
    font-size: 12px; }

.vhb-select--panel .vhb-optgroup--title,
.vhb-select--panel .vhb-select-option {
  height: 30px; }

.vhb-select--panel .vhb-optgroup--title,
.vhb-select--panel .vhb-select-option,
.vhb-select--panel .vhb-select--empty-placeholder {
  line-height: 30px; }

.vhb-select--panel.size--medium .vhb-optgroup--title,
.vhb-select--panel.size--medium .vhb-select-option {
  height: 28px; }

.vhb-select--panel.size--medium .vhb-optgroup--title,
.vhb-select--panel.size--medium .vhb-select-option,
.vhb-select--panel.size--medium .vhb-select--empty-placeholder {
  line-height: 28px; }

.vhb-select--panel.size--small .vhb-optgroup--title,
.vhb-select--panel.size--small .vhb-select-option {
  height: 26px; }

.vhb-select--panel.size--small .vhb-optgroup--title,
.vhb-select--panel.size--small .vhb-select-option,
.vhb-select--panel.size--small .vhb-select--empty-placeholder {
  line-height: 26px; }

.vhb-select--panel.size--mini .vhb-optgroup--title,
.vhb-select--panel.size--mini .vhb-select-option {
  height: 24px; }

.vhb-select--panel.size--mini .vhb-optgroup--title,
.vhb-select--panel.size--mini .vhb-select-option,
.vhb-select--panel.size--mini .vhb-select--empty-placeholder {
  line-height: 24px; }