qm-ui/style/antd-additional.less

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

//antd组件扩展

/* --------------按钮相关 开始-------------- */
//按钮组中增加链接按钮 btn-link
.ant-btn-link {
  font-size: @font-size-base;
  .button-variant-other(@link-color; transparent; transparent);

  &:hover,
  &:focus {
    .button-color(tint(@link-color, 20%) ; transparent; transparent);
  }
  &:active,
  &.active {
    .button-color(shade(@link-color, 5%) ; transparent; transparent);
  }

  &.ant-btn-clicked:after {
    -webkit-animation: none;
    -o-animation: none;
    animation: none;
  }
}

//按钮与自字义图标组合使用时,样式与antd样式保持一致
.ant-btn > .qmIcon + span,
.ant-btn > span + .qmIcon {
  margin-left: 0.5em;
}

.button-centered {
  text-align: center;
  button + button {
    margin-left: 10px;
  }
}

/* --------------按钮相关 结束-------------- */

//导航菜单与自定义字体图标组合使用时,样式与antd样式保持一致
.ant-menu-item .qmIcon,
.ant-menu-submenu-title .qmIcon {
  min-width: 14px;
  margin-right: 8px;
}

/* --------------表格上方按钮 开始-------------- */
.table-toolbar {
  padding: 10px 0 15px 0;

  .ant-btn {
    vertical-align: middle;
    margin-right: 10px;
    -webkit-transition: all 0s;
    -moz-transition: all 0s;
    -ms-transition: all 0s;
    -o-transition: all 0s;
    transition: all 0s;
  }
  .text-right {
    text-align: right;

    .item {
      display: inline-block;
      vertical-align: middle;
    }

    .ant-btn:last-child {
      margin-right: 0;
    }
  }
  .ant-btn-group {
    & > .ant-btn:not(:last-child) {
      margin-right: 0;
    }
  }
}

/* --------------表格上方按钮 开始-------------- */

/* --------------通用表格相关样式  开始-------------- */
.ant-table .anticon-edit,
.ant-table .qmIcon.edit {
  margin: 0 3px;
  cursor: pointer;
  color: #08c;
  visibility: hidden;
}

.ant-table tr:hover .anticon-edit,
.ant-table tr:hover .qmIcon.edit {
  visibility: visible;
}

.ant-table tr .flex-center {
  display: flex;
  align-items: center;
}

.ant-table-tbody > tr > td {
  padding: 10px 8px;
}

.ant-table-thead > tr.ant-table-row-hover,
.ant-table-tbody > tr.ant-table-row-hover,
.ant-table-thead > tr:hover,
.ant-table-tbody > tr:hover {
  background: #f9f9f9;
}

//表格样式优化
.ant-table {
  .operations {
    a {
      color: @primary-color;
    }

    a + a {
      margin-left: 10px;
    }
  }

  th,
  td {
    padding: 10px 8px;
    .ant-table-row-img {
      width: 50px;
      height: 50px;
      vertical-align: middle;
    }
    .ant-table-row-icon {
      width: 28px;
      height: 28px;
    }
  }

  .ant-table-row-level-1 > td .ant-table-row-img {
    max-height: 40px;
    max-width: 40px;
  }

  th.ant-table-th-center,
  td.ant-table-th-center {
    text-align: center;
  }
  td.ant-table-th-right {
    text-align: right;
    padding-right: 3%;

    &.can-edit {
      padding-right: 8px;
    }
  }
  th.ant-table-th-right {
    text-align: right;
    padding-right: 3%;

    &.can-edit {
      padding-right: 23px;
    }
  }
  &.ant-table-bordered {
    th.ant-table-th-right,
    td.ant-table-th-right {
      padding-right: 8px;
    }
  }
  &-small {
    border: 0;

    table {
      padding: 0;
    }

    th {
      padding: 8px;
    }

    td {
      padding: 6px 8px;
    }
  }
  &-footer {
    padding: 10px 8px;

    .table-statistics {
      padding: 15px;
      margin: -10px -8px -10px -8px;
      background-color: #fff;
      border: 1px solid @border-color-split;

      .control {
        margin-right: 10px;
      }

      .content {
        padding-left: 10px;
        border-left: 1px solid @border-color-split;
      }
    }
  }

  .ant-table-row-indent + .ant-table-row-expand-icon {
    margin-right: 12px;
  }

  .table-row-title {
    text-align: center;
    font-weight: bold;
    background-color: #f7f7f7;
  }

  .ant-table-placeholder {
    line-height: 2em;
  }
}

.ant-table-scroll .ant-table-body {
  max-height: 380px;
}

@media screen and (min-height: 700px) {
  .ant-table-scroll .ant-table-body {
    max-height: 480px;
  }
}

@media screen and (min-height: 1000px) {
  .ant-table-scroll .ant-table-body {
    max-height: 680px;
  }
}

.ant-table-title {
  padding: 10px;
}

.ant-table-row-level-1 {
  background-color: #fcfcfc;
}

.custom-filter-dropdown {
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  .ant-dropdown-menu {
    border: 0;
    box-shadow: none;
    border-radius: 2px 2px 0 0;
  }
}

/* --------------通用表格相关样式  结束-------------- */

//标签页卡片式样式优化

//标签页增加按钮组Tabs ant-tabs-btn-group
.ant-tabs-btn-group {
  .ant-tabs-bar {
    width: 230px;
    border-bottom: 0;
    .ant-tabs-nav-container {
      font-size: @font-size-base;
      margin-bottom: 0;

      * {
        -webkit-transition: all 0s;
        -moz-transition: all 0s;
        -ms-transition: all 0s;
        -o-transition: all 0s;
        transition: all 0s;
      }

      .ant-tabs-nav-wrap {
        margin-bottom: 0;
        .ant-tabs-ink-bar {
          height: 0;
        }
        .ant-tabs-tab {
          margin-right: 0;
          width: 115px;
          padding: 4px 20px;
          text-align: center;
          color: @primary-color;
          border: 1px solid @primary-color;

          &:active {
            color: shade(@primary-color, 5%);
          }
        }
        .ant-tabs-tab-active {
          color: #fff;
          background-color: @primary-color;
        }
      }
    }
  }
}

//高级搜索定制样式
.search-select {
  .ant-select {
    //margin-top: -1px;
    background-color: #fcfcfc;
  }
  .ant-select-selection {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background-color: #fcfcfc;
  }
  .ant-search-input.ant-input-group .ant-input:first-child,
  .ant-search-input.ant-input-group .ant-select:first-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .ant-input-group-lg {
    .ant-btn {
      height: 30px;
      line-height: 22px;
      border: 0;
      background-color: #fff;
    }
  }
  .ant-select-selection__rendered {
  }
}

.ant-advanced-search-form {
  padding: 16px 8px;
  background: #f8f8f8;
  border: 1px solid #d9d9d9;
  .mt2 {
    margin-top: 2px;
  }
  .search-btn {
    margin-top: 15px;
  }
}

.ant-advanced-search-form > .row {
  position: relative;
  left: -6px;
}

.ant-advanced-search-form .ant-btn + .ant-btn {
  margin-left: 8px;
}

.ant-advanced-search-form {
  .ant-calendar-range-picker.ant-input {
    vertical-align: middle;
  }
}

.search-tree {
  position: relative;
  .ant-input-group {
    z-index: 1;
  }
  .ant-select {
    position: absolute;
    top: 0;
    z-index: 0;
    opacity: 0;
  }
}

//高级分类搜索
.ant-advanced-search-super {
  border: 1px solid #d9d9d9;
  background: #f8f8f8;
  & > .ant-row:not(:last-child) {
    border-bottom: 1px solid #eaeaea;
  }
  & > .ant-row > div {
    padding: 8px;
    &:not(:first-child) {
      background: #fff;
    }
    &.search-super-count {
      padding-right: 160px;
      .ant-checkbox-wrapper {
        margin-right: 3px;
        margin-left: 0;
        .ant-checkbox ~ span {
          padding: 4px;
          display: inline-block;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
        }
      }
      &.one-select {
        .ant-checkbox-wrapper {
          height: 26px;
          .ant-checkbox {
            display: none;
          }
          .ant-checkbox-checked ~ span {
            color: #fff;
            background-color: #3d85cc;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
          }
        }
      }
    }
  }
  .search-super-left {
    text-align: right;
    line-height: 26px;
  }
  .search-super-tool {
    padding: 8px;
    position: absolute;
    right: 0;
    top: 0;
    text-align: center;
    line-height: 26px;
    .ant-btn {
      border: none;
      .anticon {
        margin-left: 5px;
      }
    }
  }
}

//Tag标签--只有图标内容的Tag扩展
.ant-tag.tag-icon {
  width: 22px;
  font-size: 14px;
  text-align: center;
  padding: 0;

  &.tag-small {
    width: 18px;
    padding: 0;
  }
}

.ant-tag.tag-small {
  height: 14px;
  width: 14px;
  line-height: 14px;
  padding: 0;
  font-size: 12px;
}

//Tag标签小号
.ant-tag.size-small {
  height: 15px;
  padding: 0 3px;
  line-height: 15px;
  margin-top: 2px;
  margin-bottom: 2px;
  margin-right: 4px;
}

.ant-tag-lg-close {
  position: relative;
  margin-right: 8px;
  padding: 5px 15px;
  height: auto;
  line-height: 18px;
  border: 1px solid @border-color-base;
  overflow: inherit;

  .anticon-cross {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #fff;
    .border-radius(10px);
    background: rgba(0, 0, 0, 0.3);
  }
}

.ant-tag.c-default {
  cursor: default;
}

//进度条 密码强度
.ant-progress-weak .ant-progress-bg {
  background-color: #f50;
}

.ant-progress-middle .ant-progress-bg {
  background-color: #e4ce2b;
}

.ant-progress-strong .ant-progress-bg {
  background-color: #87d068;
}

//时间轴增加灰色节点样式
.ant-timeline-item-head-gray {
  border-color: #e1e1e1;
  color: #e1e1e1;
}

//Card卡片无边框时增加阴影
.card-shadow {
  .boxShadow(0, 0, 4px, #eee);
}

//ant-alert
.ant-alert {
  line-height: 1.5em;
  color: #999;
  margin: 10px 0;
  .fl {
    float: left;
  }
  .fr {
    float: right;
    .ant-btn + .ant-btn {
      margin-left: 8px;
    }
  }

  &.ant-alert-no-icon {
    padding: 8px 16px 8px 16px;
  }
}

.ant-tabs-bar {
  border-bottom-color: @border-color-split;
  margin-bottom: 20px;
}

.ant-alert-with-description.ant-alert-no-icon {
  padding: 8px 8px 8px 16px;
}

.ant-alert-primary {
  border: 1px solid @background-color-base;
  background-color: @background-color-base;
  .ant-btn-default {
    background-color: #fff;
  }
}

.root-container .ant-alert.ant-alert-primary,
.page-container .ant-alert.ant-alert-primary {
  margin-top: 0;
  padding-top: 12px;
  padding-bottom: 12px;
}

//动态增加、减少表单项。
.plus-minus-form:nth-last-child(2) .ant-col-18 .ant-btn {
  display: inline-block !important;
}

/* --------------表单相关  开始-------------- */

//表单默认宽度
.form {
  .ant-input-wrapper .ant-input,
  .ant-select,
  .ant-cascader-picker,
  .ant-calendar-picker,
  .pwd-strength {
    width: 240px;
    margin-right: 10px;
  }
}

.forms-has-width {
  .ant-input-wrapper .ant-input,
  .ant-form-item-control > .ant-input,
  .ant-select,
  .ant-cascader-picker,
  .ant-calendar-picker,
  .pwd-strength {
    width: 240px;
    margin-right: 10px;
  }
}

.ant-form-item {
  margin-bottom: 10px;

  .ant-form-explain {
    padding-top: 2px;
  }
}

//表单-label为空
.ant-row-label-no {
  .ant-form-item-label {
    text-align: right;
    vertical-align: middle;
    padding: 7px 0;
    display: inline-block;

    label {
      &:after {
        display: none;
      }
    }
  }
}

/* --------------表单相关 结束--------------*/

/*商品-商品仓库*/
.ml10 {
  margin-left: 10px;
}

//信息提示Alert
.anticon-info-circle-o.anticon {
  display: inline-block;
  /*width: 24px;*/
  text-align: center;
  text-transform: none;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  -webkit-text-stroke-width: 0.2px;
}

.anticon-info-circle-o.anticon:before {
  content: '\e664';
  font-family: 'qmfont' !important;
}

/*高级搜索-树选择TreeSelect*/
.ant-advanced-search-form {
  .search-form-tree-select {
    margin-top: -6px;
  }

  .ant-form-item-control {
    line-height: 28px;
  }

  .select-and-input {
    margin-top: 1px;
  }
}

//更改列展示
.colunms-dropdown {
  &.ant-menu-root.ant-menu-vertical {
    box-shadow: @box-shadow-base;
  }

  &.ant-menu-vertical {
    > .ant-menu-item {
      height: 32px;
      line-height: 32px;
      padding: 0 8px 0 16px;

      .lieBiao2 {
        color: #ccc;
      }
    }
  }

  .ant-checkbox {
    font-weight: normal;
  }
}

.sortable-item {
  z-index: 2000;
}

//上传图片
.ant-upload.ant-upload-select-picture-card {
  //padding-top: 22px;
  width: 64px;
  height: 64px;
}

/* --------------对话框  开始--------------*/

.modal-custom {
  .ant-modal-body {
    position: relative;
    padding: 0;
    min-height: 100px;
  }

  .modal-body-main {
    padding-top: 16px;
    padding-bottom: 66px;
  }

  .modal-footer-main {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 18px 10px 10px;
    text-align: right;
    background-color: #fff;
    border-radius: 0 0 2px 2px;
    border-top: 1px solid @border-color-split;
    z-index: 1010;

    button + button {
      margin-left: 8px;
      margin-bottom: 0;
    }
  }
}

//弹框里自定义按钮
.modal-btn-groups {
  border-top: 1px solid #e9e9e9;
  padding: 10px 18px 0 10px;
  margin: 10px -16px 0 -16px;
  text-align: right;
}

.ant-confirm-confirm {
  //问号图标在搜狗浏览器下显示不全
  .ant-confirm-body > .anticon {
    font-size: 22px;
  }
}

.vertical-modal-custom {
  text-align: center;
  white-space: nowrap;

  &:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width: 0;
  }
  .ant-modal {
    display: inline-block;
    vertical-align: middle;
    top: 0;
    text-align: left;
  }
}
/* --------------对话框  结束--------------*/

//primary样式的按钮形式的单选
.ant-radio-button-wrapper-checked {
  color: #fff;
  background: @primary-color;

  &:hover {
    color: #fff;
  }
}

//ghost样式的按钮形式的单选
.radio-ghost-group {
  .ant-radio-button-wrapper-checked {
    color: @primary-color;
    background-color: #fff;
  }

  .ant-radio-button-wrapper.ant-radio-button-wrapper-checked:hover {
    border-color: @primary-color;
  }

  .ant-radio-button-wrapper:hover,
  .ant-radio-button-wrapper-focused {
    color: @primary-color;
    border-color: #d9d9d9;
  }
}

.ant-radio-button-wrapper:hover,
.ant-radio-button-wrapper-focused {
  border-color: @primary-color;
}

.label {
  padding: 2px 5px 2px;
  font-size: 12px;
  font-weight: bold;
  line-height: 13px;
  color: #fff;
  vertical-align: middle;
  white-space: nowrap;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #999;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

//select选择框选择银行的情况下使用
.ant-select.banks-select {
  .ant-select-selection--single {
    height: 44px;
  }

  .ant-select-selection__rendered {
    line-height: 42px;
  }
}

//
.avatar-circle-change {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid @border-color-split;
  .border-radius(50%);
  margin-right: 10px;
  overflow: hidden;

  img {
    width: 100%;
  }

  .change-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #fff;
    line-height: 18px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.4);
    cursor: pointer;
  }

  .upload-file {
    display: none;
    position: absolute;
    opacity: 0;
  }
}

//气泡类型的错误提示信息样式
.ant-tooltip.error-tips {
  .ant-tooltip-inner {
    background-color: rgba(234, 106, 90, 0.8);
  }

  .ant-tooltip-placement-top .ant-tooltip-arrow,
  .ant-tooltip-placement-topLeft .ant-tooltip-arrow,
  .ant-tooltip-placement-topRight .ant-tooltip-arrow {
    border-top-color: rgba(234, 106, 90, 0.8);
  }
}