qt-public-ui/style/antd.less

新设计规范下业务组件库

@import './common.less';

/* css reset */
body {
  font-family: Alibaba-PuHuiTi-Regular, Helvetica Neue, Helvetica, Tahoma, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
  font-style: normal;
  font-size: @font-size-base;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: @body-background;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Button 样式修改 Done */
.@{ant-prefix}-btn > .anticon + span,
.@{ant-prefix}-btn > span + .anticon {
  margin-left: 6px;
}
.@{ant-prefix}-radio-button-wrapper i,
.@{ant-prefix}-btn i {
  font-size: 14px;
}
.@{ant-prefix}-btn-primary:hover {
  background-color: @primary-color-hover;
}
.@{ant-prefix}-btn-primary:active {
  background-color: @primary-color-active;
}
.@{ant-prefix}-btn-primary-disabled,
.@{ant-prefix}-btn-primary.disabled,
.@{ant-prefix}-btn-primary[disabled],
.@{ant-prefix}-btn-primary-disabled:hover,
.@{ant-prefix}-btn-primary.disabled:hover,
.@{ant-prefix}-btn-primary[disabled]:hover,
.@{ant-prefix}-btn-primary-disabled:focus,
.@{ant-prefix}-btn-primary.disabled:focus,
.@{ant-prefix}-btn-primary[disabled]:focus,
.@{ant-prefix}-btn-primary-disabled:active,
.@{ant-prefix}-btn-primary.disabled:active,
.@{ant-prefix}-btn-primary[disabled]:active,
.@{ant-prefix}-btn-primary-disabled.active,
.@{ant-prefix}-btn-primary.disabled.active,
.@{ant-prefix}-btn-primary[disabled].active {
  color: @component-background !important;
  background-color: @disabled-color !important;
  border: none;
}

/* Button.Group 样式修改 Done */
.@{ant-prefix}-btn-group {
  // 确保 Button 两端对齐
  .@{ant-prefix}-btn-link:first-child {
    margin-left: 0;
  }
  .@{ant-prefix}-btn-link:last-child {
    margin-right: 0;
  }
}

/* Alert 样式修改 Done */
.@{ant-prefix}-alert {
  padding-left: 37px;
  .@{ant-prefix}-alert-message {
    color: @text-color-secondary;
  }
  & > i {
    left: 20px;
  }
  .@{ant-prefix}-alert-close-icon {
    top: 5px;
    [class="anticon anticon-close"] {
      .base64-close(12px);
    }
    svg[data-icon="close"] {
      display: none;
    }
  }
}

/* Tooltips 样式修改 Done */
.@{ant-prefix}-tooltip {
  .@{ant-prefix}-tooltip-content {
    .@{ant-prefix}-tooltip-inner {
      // 默认背景颜色改为白色，文字黑色
      color: @text-color-secondary;
      background: @component-background;
      text-align: justify; // 修改文字对齐方式
    }
    .@{ant-prefix}-tooltip-arrow::before {
      background: @component-background;
    }
  }
  .@{ant-prefix}-tooltip-arrow-content {
    background: @component-background;
  }
}

/* Popover 样式修改 Done */
.@{ant-prefix}-popover {
  // Popover
  .@{ant-prefix}-popover-content {
    word-break: break-all;
    .@{ant-prefix}-popover-inner-content {
      padding: 12px;  // 修改边距
      text-align: justify; // 修改文字对齐方式
    }
  }

  // PopConfirm
  .@{ant-prefix}-popover-message > .anticon-exclamation-circle {
    display: none;
  }
  .@{ant-prefix}-popover-message-title {
    padding-left: 0;
    font-size: 12px;
    color: @text-color;
    line-height: 20px;
  }
}

/* Empty 样式修改 Done */
.@{ant-prefix}-empty {
  .@{ant-prefix}-empty-description {
    margin-top: 12px;
    color: @text-color-info;
    font-size: 12px;
  }
}

/* Card 样式修改 Done */
.@{ant-prefix}-card {
  &.@{ant-prefix}-card-bordered {
    border: none;
  }
  .@{ant-prefix}-card-head {
    height: 48px;
    padding: 2px 20px;
    border: none;
    font-size: @font-size-lg !important;
    font-weight: normal !important;
    .@{ant-prefix}-tabs.@{ant-prefix}-tabs-large .@{ant-prefix}-tabs-extra-content {
      line-height: 48px;
    }
  }
}
.@{ant-prefix}-card-contain-tabs {
  .@{ant-prefix}-card-head {
    padding-top: 0;
  }
}

/* Collpase 样式修改 Done */
.@{ant-prefix}-collapse {
  &,
  .@{ant-prefix}-collapse-content,
  .@{ant-prefix}-collapse-item {
    border: none;
  }

  .@{ant-prefix}-collapse-item {
    margin-bottom: 0 !important;
  }
  .@{ant-prefix}-collapse-content {
    background-color: unset;
  }

  > .@{ant-prefix}-collapse-item > .@{ant-prefix}-collapse-header {
    padding: 5px 16px;
    padding-left: 40px;
    font-size: @font-size-lg;
  }

  > .@{ant-prefix}-collapse-item > .@{ant-prefix}-collapse-header .@{ant-prefix}-collapse-arrow {
    top: 0;
  }

  > .@{ant-prefix}-collapse-item > .@{ant-prefix}-collapse-content > .@{ant-prefix}-collapse-content-box {
    padding: 0;
    padding-left: @collapse-header-padding-extra;
    padding-right: @collapse-header-padding-extra;
    color: @text-color-secondary;
    & > .@{ant-prefix}-collapse {
      margin-left: -18px;
    }
  }
}

/* Steps 样式修改 */
.@{ant-prefix}-steps.@{ant-prefix}-steps-small {
  .@{ant-prefix}-steps-item .@{ant-prefix}-steps-item-title {
    font-size: @font-size-lg;
  }
  .@{ant-prefix}-steps-item-wait {
    .@{ant-prefix}-steps-item-description {
      color: @text-color-secondary;
    }
  }

  .@{ant-prefix}-steps-item-finish,
  .@{ant-prefix}-steps-item-active {
    .@{ant-prefix}-steps-item-description {
      color: @text-color-secondary;
    }
  }
}
.@{ant-prefix}-steps.@{ant-prefix}-steps-horizontal {
  .@{ant-prefix}-steps-item-process > .@{ant-prefix}-steps-item-container {
    .@{ant-prefix}-steps-item-title::after {
      background-color: @border-color-base;
    }
  }
}
.@{ant-prefix}-steps.@{ant-prefix}-steps-vertical {
  .@{ant-prefix}-steps-item-tail::after {
    background-color: @border-color-base;
  }
}

/* Menu 样式修改 */
.@{ant-prefix}-menu.@{ant-prefix}-menu-light {
  .@{ant-prefix}-menu-submenu-inline .@{ant-prefix}-menu-submenu-arrow {
    &::before,
    &::after {
      background: @text-color-secondary;
    }
  }
}
.@{ant-prefix}-menu-sub.@{ant-prefix}-menu-inline {
  background: transparent;
}

/* Tag 样式修改 Done */
.@{ant-prefix}-tag {
  padding-bottom: 2px;
}
.@{ant-prefix}-tag-has-color {
  color: @white;
}
.@{ant-prefix}-tag-checkable:active,
.@{ant-prefix}-tag-checkable-checked {
  color: @white;
}

/* Radio 样式修改 Done */
.@{ant-prefix}-radio-wrapper {
  color: @text-color-secondary;
  margin-right: 16px;
}
.@{ant-prefix}-radio-button-wrapper {
  color: @text-color-secondary;
  padding: 0 12px;
}
.@{ant-prefix}-radio-button-wrapper.@{ant-prefix}-radio-button-wrapper-checked {
  font-weight: @font-weight-bold;
}
.ant-radio-button-wrapper-disabled {
  color: @disabled-color !important;
  background-color: #e6e6e6; // #F8FAFB
  border-color: @border-color-base;
  cursor: not-allowed;
}
.@{ant-prefix}-radio.@{ant-prefix}-radio-disabled {
  cursor: not-allowed;
}
.@{ant-prefix}-radio-inner {
  border-color: @text-color-info;
}

.@{ant-prefix}-radio-group-solid .@{ant-prefix}-radio-button-wrapper-checked:not(.@{ant-prefix}-radio-button-wrapper-disabled) {
  color: @primary-color;
  font-weight: @font-weight-bold;
  background: @radio-group-solid-active-background;
  border-color: @border-color-active;
  &:hover {
    color: @primary-color;
    font-weight: @font-weight-bold;
    background: @radio-group-solid-active-background;
    border-color: @border-color-active;
  }
}
.@{ant-prefix}-radio-group-solid {
  .@{ant-prefix}-radio-button-wrapper:not(.@{ant-prefix}-radio-button-wrapper-disabled) {
    &:hover {
      color: @primary-color;
      background: @radio-group-solid-active-background;
      border-color: @border-color-active;
    }
  }
}
.@{ant-prefix}-radio-group-solid .@{ant-prefix}-radio-button-wrapper-checked:not(.@{ant-prefix}-radio-button-wrapper-disabled):focus-within {
  box-shadow: unset;
}
.@{ant-prefix}-radio-button-wrapper-checked:not(.@{ant-prefix}-radio-button-wrapper-disabled):focus-within {
  box-shadow: unset;
}
.@{ant-prefix}-radio-button-wrapper:focus-within {
  box-shadow: unset;
}

/* Checkbox 样式修改 Done */
.@{ant-prefix}-checkbox-wrapper {
  margin-right: 16px;
  .@{ant-prefix}-checkbox-indeterminate {
    .@{ant-prefix}-checkbox-inner {
      background-color: @primary-color;
      border-color: @primary-color;
      &::after {
        background-color: @white;
        width: 8px;
        height: 2px;
      }
    }
    &.@{ant-prefix}-checkbox-disabled .@{ant-prefix}-checkbox-inner {
      background-color: @disabled-bg;
      &::after {
        background-color: @disabled-color;
      }
    }
  }
}

/* 默认 umeng 样式table的checkbox选中样式 */
.@{ant-prefix}-checkbox-checked .@{ant-prefix}-checkbox-inner::after {
  display: inline-block;
}
.@{ant-prefix}-checkbox-wrapper .@{ant-prefix}-checkbox-inner::after {
  display: inline-block;
}


/* Select 样式修改 */
.@{ant-prefix}-select-selection-placeholder {
  color: @text-color-info;
}
.@{ant-prefix}-form-item-children .@{ant-prefix}-select {
  max-width: unset; // 作为表单项不限制宽度
}
.@{ant-prefix}-select {
  .@{ant-prefix}-select-selection--single {
    box-shadow: none !important;
  }
  &.@{ant-prefix}-select-open {
    .@{ant-prefix}-select-arrow .umui-icon {
      transform: rotate(180deg);
    }
  }
  [class="anticon anticon-down ant-select-arrow-icon"] {
    .base64-dropDown(12px);

    margin-top: 2px;
    & > svg {
      display: none;
    }
  }
}
.@{ant-prefix}-select-focused .@{ant-prefix}-select-selection {
  box-shadow: none; // 移除 select 选择后的 focused 样式
}
.@{ant-prefix}-select-drop-down {
  .@{ant-prefix}-select-dropdown-menu-item {
    color: @text-color-secondary;
  }
  .@{ant-prefix}-select-dropdown-menu-item-selected {
    background-color: @item-active-bg;
    color: @text-color;
  }
}

/* picker 日历样式 */
.@{ant-prefix}-picker-panel-container {
  box-shadow: @select-shadow;
}

/* message浮层样式 */
// .@{ant-prefix}-message {
//   box-shadow: @message-shadow;
// }

/* Dropdown 样式修改 */
// @dropdown-selected-color: @primary-color;
.@{ant-prefix}-dropdown,
.@{ant-prefix}-picker-dropdown,
.@{ant-prefix}-select-dropdown {
  box-shadow: @select-shadow;
}
.@{ant-prefix}-dropdown-menu {
  padding: 0;
  min-width: 120px;
  .@{ant-prefix}-dropdown-menu-item {
    padding: 5px 16px;
  }
  .@{ant-prefix}-dropdown-menu-item,
  .@{ant-prefix}-dropdown-menu-item a {
    color: @text-color-secondary;
  }
  .@{ant-prefix}-dropdown-menu-item:hover a {
    color: @text-color;
  }
}

/* Divider 样式修改 */
.@{ant-prefix}-divider {
  background-color: transparent !important;
}

/* Tabs 样式修改 */
.@{ant-prefix}-tabs-tab.@{ant-prefix}-tabs-tab-active .@{ant-prefix}-tabs-tab-btn {
  color: @text-color;
}
.@{ant-prefix}-tabs-top:not(.@{ant-prefix}-tabs-card),
.@{ant-prefix}-tabs-bottom:not(.@{ant-prefix}-tabs-card) {
  .@{ant-prefix}-tabs-nav {
    padding-left: 16px; // 修复以下改动带来的问题
    .@{ant-prefix}-tabs-tab {
      padding: 12px 0 !important; // Tabs active时蓝线与字等宽
    }
  }
}
.@{ant-prefix}-tabs-bottom .@{ant-prefix}-tabs-bottom-bar {
  border: none;
}
.@{ant-prefix}-tabs-nav {
  .@{ant-prefix}-tabs-tab {
    color: @text-color-secondary; // Tabs 字体颜色修改
    &:hover {
      color: @primary-color; // Tabs hover字体颜色修改
    }
  }
  .@{ant-prefix}-tabs-tab-active {
    // font-weight: @font-weight-bold;
    color: @primary-color; // Tabs active字体颜色修改
  }
}
// Tabs tabPosition="left"样式修改
.@{ant-prefix}-tabs-left {
  &> .@{ant-prefix}-tabs-nav .@{ant-prefix}-tabs-tab {
    min-height: 40px;
  }
  .@{ant-prefix}-tabs-tab.@{ant-prefix}-tabs-tab-active {
    background: @active-background;
    .@{ant-prefix}-tabs-tab-btn {
      color: @primary-color;
      text-shadow: 0 0 0.25px currentColor;
    }
  }
  &> {
    .@{ant-prefix}-tabs-nav .@{ant-prefix}-tabs-ink-bar, div > .@{ant-prefix}-tabs-nav .@{ant-prefix}-tabs-ink-bar {
      left: 0;
    }
  }
}

/* Input 样式修改 */
.@{ant-prefix}-input-affix-wrapper {
  padding-left: 11px !important;
  .@{ant-prefix}-input-suffix i {
    font-size: 16px;
    color: @text-color-secondary !important;
  }
  &::before {
    display: none;
  }
}

.@{ant-prefix}-input-prefix i {
  color: @text-color-info;
  font-size: 14px;
}
.@{ant-prefix}-input-group .@{ant-prefix}-input-group-addon {
  padding: 0;
  border: 0;
  left: -1px;
}
.@{ant-prefix}-input-group .@{ant-prefix}-input {
  padding: 4px 11px;
}
.@{ant-prefix}-input-group .@{ant-prefix}-btn-lg {
  height: 32px;
  border-radius: unset;
}

/* Table 样式修改 */
// sperated 一级表格样式
.list-table {
  .@{ant-prefix}-table {
    margin: -10px 0; // 修复 border-ellipsis 导致外边距错误问题
    table {
      border-spacing: 0 10px !important;
      border-collapse: separate !important;
    }
  }

  .@{ant-prefix}-table-thead > tr,
  .@{ant-prefix}-table-tbody > tr {
    box-shadow: 0 0 6px 0 rgba(0, 42, 116, 0.06);
  }

  .@{ant-prefix}-table-thead > tr > th {
    background-color: @white;
  }

  .@{ant-prefix}-table-tbody > tr > td {
    background-color: @white;
    padding: 10px 16px;
    border: none;
  }

  .@{ant-prefix}-table-tbody > tr > td.@{ant-prefix}-table-selection-column {
    padding-right: 0 !important;
  }
}
.@{ant-prefix}-table-column-sorters {
  line-height: 22px;
  padding: 0;
}

// 一级表格样式
.@{ant-prefix}-table-wrapper {
  .@{ant-prefix}-empty {
    padding: 10px 0;
    &-image {
      height: 60px;
    }
  }

  .@{ant-prefix}-table-thead > tr > th {
    border: none;
    font-weight: @font-weight-bold;
    color: @text-color-secondary;
    .@{ant-prefix}-table-header-column .@{ant-prefix}-table-column-sorters {
      display: flex !important;
      align-items: center;
    }
    .@{ant-prefix}-table-column-sorter {
      display: block !important;
    }
  }

  // 复选框
  .@{ant-prefix}-table colgroup {
    & > col.@{ant-prefix}-table-selection-col {
      width: 32px;
    }
  }

  tr td.@{ant-prefix}-table-selection-column,
  tr th.@{ant-prefix}-table-selection-column {
    padding-right: 0 !important;
    text-align: left;
    label {
      margin-right: 0;
    }
  }

  // 分页
  .@{ant-prefix}-table-pagination.@{ant-prefix}-pagination {
    margin-top: 20px;
    margin-bottom: 0; // Table 内分页边距修改
  }
  .@{ant-prefix}-table-body tr td {
    font-family: Roboto-Regular, sans-serif;  // table 中默认数字字体
  }

  .@{ant-prefix}-table-body tr td > div::after {
    line-height: 1.5;
  }

  .@{ant-prefix}-table-placeholder {
    border: none;
  }

  .@{ant-prefix}-table-body tr.@{ant-prefix}-table-expanded-row td {
    background-color: @component-background;
  }
}

// 嵌套子表格样式
.@{ant-prefix}-table-wrapper .@{ant-prefix}-table-wrapper {
  .@{ant-prefix}-table {
    table {
      border-spacing: 1px;
      border-collapse: collapse !important;
    }
  }

  .@{ant-prefix}-table-thead > tr,
  .@{ant-prefix}-table-tbody > tr {
    box-shadow: unset;
  }

  .@{ant-prefix}-table-thead > tr > th,
  .@{ant-prefix}-table-tbody > tr > td {
    background-color: @disabled-bg;
  }

  .@{ant-prefix}-table-tbody > tr > td {
    border-bottom: 1px solid @border-color-split;
  }
}

// Table组件覆盖, antd 4.16.1
.@{ant-prefix}-table-thead > tr > th:not(:last-child):not(.@{ant-prefix}-table-selection-column):not(.@{ant-prefix}-table-row-expand-icon-cell):not([colspan])::before {
  background-color: transparent;
}

/* Pagination 样式修改 */
.@{ant-prefix}-pagination {
  .@{ant-prefix}-pagination-prev,
  .@{ant-prefix}-pagination-next,
  .@{ant-prefix}-pagination-jump-prev,
  .@{ant-prefix}-pagination-jump-next {
    min-width: 24px;
    height: 24px;
    line-height: 24px;
  }
  .@{ant-prefix}-pagination-prev a,
  .@{ant-prefix}-pagination-next a {
    color: @text-color-info;
  }
  .@{ant-prefix}-pagination-item {
    min-width: 24px;
    height: 24px;
    margin-right: 0;
    line-height: 24px;
    border: 1px solid transparent;
  }
  .@{ant-prefix}-pagination-item-active {
    border-color: @primary-color;
  }
  .@{ant-prefix}-pagination-prev .@{ant-prefix}-pagination-item-link,
  .@{ant-prefix}-pagination-next .@{ant-prefix}-pagination-item-link {
    border: 0 solid transparent;
    background-color: transparent;
  }
  .@{ant-prefix}-pagination-prev,
  .@{ant-prefix}-pagination-jump-prev,
  .@{ant-prefix}-pagination-jump-next {
    margin-right: 0;
  }
  .@{ant-prefix}-pagination-options {
    .@{ant-prefix}-pagination-options-size-changer.@{ant-prefix}-select {
      margin-right: 25px;
    }
    .@{ant-prefix}-select-selection-selected-value {
      color: @text-color-secondary;
      margin-right: 8px;
    }
    .@{ant-prefix}-select-selection--single {
      height: 24px;
    }
    .@{ant-prefix}-select-selection__rendered {
      line-height: 22px;
    }
    .@{ant-prefix}-select-dropdown-menu-item {
      color: @text-color-secondary;
    }
    .@{ant-prefix}-select-dropdown-menu-item-selected {
      font-weight: @font-weight-normal;
      color: @text-color;
    }
    .@{ant-prefix}-pagination-options-quick-jumper {
      color: @text-color-secondary;
      height: 24px;
      line-height: 22px;
      input {
        height: 24px;
        text-align: center;
      }
    }
  }
}

/* Carousel 样式修改 */
.@{ant-prefix}-carousel {
  .slick-dots {
    li {
      margin: 0 4px;
      button {
        width: 6px;
        height: 6px;
        border-radius: 3px;
        background: @disabled-color;
      }
      &.slick-active {
        button {
          width: 16px;
          height: 6px;
          background: @primary-color;
        }
      }
    }
  }
}

/* PageHeader 样式修改 */
.@{ant-prefix}-page-header {
  box-shadow: @shadow-1-down;
  border-radius: 0 0 @border-radius-base @border-radius-base;
  &-heading-sub-title {
    color: @text-color-secondary;
    font-size: @font-size-sm;
  }
}

/* Form 样式修改 */
.@{ant-prefix}-form.@{ant-prefix}-form-horizontal {
  .@{ant-prefix}-row.@{ant-prefix}-form-item {
    margin-bottom: 20px;
    .@{ant-prefix}-form-item-required::before {
      color: @error-color;
    }
  }

  /* Form 样式修改 */
  .@{ant-prefix}-form-item-control {
    line-height: 28px;
  }
}
.@{ant-prefix}-form {
  .@{ant-prefix}-form-item {
    color: @text-color-secondary;
  }
}

/* Drawer 样式修改 */
.@{ant-prefix}-drawer {
  .@{ant-prefix}-drawer-wrapper-body { overflow: hidden; }
  .@{ant-prefix}-drawer-body { overflow-y: auto; }
  .@{ant-prefix}-drawer-header {
    background-color: @normal-color;
    border: none;
    z-index: 1;
    .@{ant-prefix}-drawer-title {
      font-size: 18px;
      font-weight: @font-weight-bold;
    }
    .@{ant-prefix}-drawer-close {
      width: 46px;
      height: 46px;
      // line-height: 46px; // antd默认有padding导致错位
    }
  }
}

/* Modal 样式修改 Done */
.@{ant-prefix}-modal {
  .@{ant-prefix}-modal-header {
    height: 44px;
    padding: 11px 24px;
    background: @normal-color;
    border: none;
    // .@{ant-prefix}-modal-title {
    //   font-weight: @font-weight-bold;
    // }
  }

  .@{ant-prefix}-modal-close-x {
    width: 44px;
    height: 44px;
    line-height: 44px;
  }
  .@{ant-prefix}-modal-content {
    .@{ant-prefix}-modal-footer {
      padding: 12px 20px;
    }
  }

  /* 命令类型 Done */
  &.@{ant-prefix}-modal-confirm {
    .@{ant-prefix}-modal-body {
      padding: 20px 20px 12px;
    }
    .@{ant-prefix}-modal-confirm-btns {
      margin-top: 20px;
    }
  }
}

/* Rate 样式修改 Done */
.@{ant-prefix}-rate-star:not(:last-child) {
  margin-right: 2px;
}

/* Slider 样式修改 Start */
.@{ant-prefix}-slider {
  .@{ant-prefix}-tooltip .@{ant-prefix}-tooltip-content .@{ant-prefix}-tooltip-inner {
    color: @white;
    opacity: 0.7;
    background: @black;
    text-align: justify;
  }
  .@{ant-prefix}-tooltip .@{ant-prefix}-tooltip-content .@{ant-prefix}-tooltip-arrow span {
    background: @black;
  }
  .@{ant-prefix}-slider-disabled .@{ant-prefix}-slider-track {
    background: @disabled-color !important;
  }
}
.@{ant-prefix}-slider-rail {
  height: 8px;
  background: @text-color-inverse;
  border-radius: 4px;
}
.@{ant-prefix}-slider-track {
  height: 8px;
  background: @primary-color !important;
  border-radius: 10px;
}
.@{ant-prefix}-slider-handle {
  width: 16px;
  height: 16px;
  border: 4px solid @primary-color !important;
}
.@{ant-prefix}-slider-dot {
  width: 12px;
  height: 12px;
  background: @white;
}
.@{ant-prefix}-slider-dot-active {
  border-color: @primary-color;
}

// 垂直方向样式
.@{ant-prefix}-slider-vertical {
  .@{ant-prefix}-slider-rail {
    width: 8px;
  }
  .@{ant-prefix}-slider-track {
    width: 8px;
  }
  .@{ant-prefix}-slider-handle {
    margin-left: -4px;
  }
}