@jiaozhiye/qm-design-react 1.12.14 → 1.12.16

package/lib/form/style/index.less

@@ -1,392 +1,393 @@
-/*
- * @Author: 焦质晔
- * @Date: 2021-07-23 19:05:57
- * @Last Modified by: 焦质晔
- * @Last Modified time: 2024-10-29 13:39:17
- */
-@import '../../style/common';
-
-@prefix-form: ~'@{qm-prefix}-form';
-
-.@{prefix-form} {
-  position: relative;
-  .ant-form-item {
-    margin-bottom: @--margin-md + 2px;
-    .ant-form-item-label {
-      & > label {
-        &:has(.ant-select) {
-          width: 100%;
-          .ant-select {
-            text-align: left;
-          }
-        }
-      }
-      &-wrap {
-        & > label .text {
-          line-height: 1.075;
-          .text-ellipsis-2();
-        }
-      }
-      & > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
-        margin: 0 2px;
-      }
-    }
-    // placeholder
-    input::placeholder {
-      text-align: left;
-    }
-    // ant-form-inline
-    &-with-help {
-      margin-bottom: @--margin-md + 2px;
-    }
-    // valigator
-    .ant-form-item-explain {
-      .text-overflow-cut();
-      display: flex;
-      gap: @--margin-md;
-      min-height: auto;
-      height: @--font-size-sm;
-      font-size: @--font-size-sm;
-      line-height: 1;
-    }
-    // search
-    .ant-input-search {
-      width: calc(100% + 1px);
-      & > .ant-input-group > .ant-input-group-addon {
-        line-height: 1;
-      }
-    }
-    // radio-group  checkbox-group
-    .ant-radio-group,
-    .ant-checkbox-group {
-      display: inline-flex;
-      justify-content: flex-start;
-      flex-wrap: wrap;
-      row-gap: 4px;
-      .ant-radio-wrapper,
-      .ant-checkbox-wrapper {
-        margin: 0;
-        margin-right: 20px;
-        &:last-of-type {
-          margin-right: 0;
-        }
-      }
-    }
-    // textarea
-    .ant-input-textarea-show-count {
-      position: relative;
-      &::after {
-        position: absolute;
-        right: 3px;
-        bottom: 0;
-        margin: 0;
-      }
-    }
-    // input extra
-    .extra-tooltip {
-      color: @--text-color-secondary;
-      vertical-align: -0.4em;
-      transform: scale(1.2);
-    }
-    .extra-text {
-      height: 100%;
-      display: flex;
-      align-items: center;
-    }
-    .extra-overflow-cut {
-      .text-overflow-cut();
-    }
-    // select
-    .ant-select {
-      width: 100%;
-    }
-    // input number
-    .ant-input-number.right {
-      input {
-        text-align: right;
-      }
-      &.controls {
-        input {
-          padding-right: 30px;
-        }
-      }
-    }
-    // range input/input-number/search-helper
-    .site-input-left {
-      border-right-width: 0;
-      z-index: 1;
-    }
-    .site-input-left:hover,
-    .site-input-left:focus {
-      border-right-width: 1px;
-    }
-    .site-input-right {
-      border-left-width: 0;
-      &.ant-input-search .ant-input-affix-wrapper {
-        border-left-width: 0;
-      }
-      .ant-input-affix-wrapper {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-    }
-    .site-input-right:hover,
-    .site-input-right:focus {
-      border-left-width: 1px;
-      &.ant-input-search .ant-input-affix-wrapper {
-        border-left-width: 1px;
-      }
-    }
-    // search-helper-multiple
-    .search-helper-multiple {
-      .ant-input-group > .ant-select:first-child {
-        z-index: 1;
-        .ant-select-selector {
-          border-top-right-radius: 0;
-          border-bottom-right-radius: 0;
-        }
-      }
-    }
-    // select-multiple
-    .ant-select-multiple:not(.ant-select-disabled) {
-      .ant-select-selection-overflow-item-rest {
-        cursor: pointer;
-        * {
-          pointer-events: none;
-        }
-      }
-    }
-  }
-  .ant-form-vertical .ant-form-item {
-    .ant-form-item-label {
-      padding-bottom: 4px;
-      label[title=''] {
-        justify-content: left;
-      }
-    }
-  }
-  // ------ size ------
-  // 40  32  24
-  &--lg {
-  }
-  &--sm {
-    .ant-form-item {
-      margin-bottom: @--margin-md;
-      .ant-form-item-label {
-        &-wrap {
-          line-height: 1;
-        }
-      }
-      // valigator
-      .ant-form-item-control {
-        // 待优化
-        & > div:nth-last-of-type(1)[style*='nowrap'] {
-          transform: scale(0.8334);
-          transform-origin: 0 50%;
-        }
-      }
-    }
-  }
-  &__only-show {
-    // ...
-  }
-  &__compact {
-    .ant-form-item {
-      margin-bottom: 4px;
-      .ant-form-item-control {
-        & > div:nth-last-of-type(1)[style*='nowrap'] {
-          display: none !important;
-        }
-      }
-    }
-  }
-}
-
-.ant-picker-footer-extra {
-  .ant-tag {
-    cursor: pointer;
-  }
-}
-
-// immediate
-.@{prefix-form}-immediate {
-  padding: 5px 15px;
-  overflow-y: auto !important;
-  .table {
-    width: 100%;
-    th,
-    td {
-      height: 32px;
-      text-align: left;
-      border-bottom: 1px solid @--border-color-secondary;
-    }
-    tbody {
-      tr td {
-        cursor: pointer;
-      }
-      tr:hover,
-      tr.active {
-        background-color: @--primary-1;
-      }
-    }
-  }
-  // 40  32  24
-  &--lg {
-    .table {
-      th,
-      td {
-        height: 40px;
-      }
-    }
-  }
-  &--sm {
-    padding: 5px 10px !important;
-    .table {
-      th,
-      td {
-        height: 24px;
-      }
-    }
-  }
-}
-
-// city-select
-.@{prefix-form}-city-select {
-  padding: 15px 15px 10px;
-  max-width: 420px;
-  .container {
-    .city-drop {
-      &-toper {
-        margin-bottom: 10px;
-        display: flex;
-        &__type {
-          display: inline-block;
-        }
-        &__search {
-          margin-left: 10px;
-        }
-      }
-      &-letter {
-        display: flex;
-        flex-wrap: wrap;
-        margin-bottom: 4px;
-        .tag {
-          list-style: none;
-          line-height: 1.75;
-          font-size: @--font-size-sm;
-          padding: 0 8px;
-          margin: 0 4px 4px 0;
-          border: 1px solid @--border-color-secondary;
-          border-radius: 2px;
-          cursor: pointer;
-          &.actived {
-            color: @--white;
-            background-color: @--primary-color;
-            border-color: @--primary-color;
-          }
-        }
-      }
-      &-list {
-        margin-right: -2px;
-        max-height: 350px;
-        overflow-y: auto;
-        dl {
-          margin: 0;
-          dt {
-            float: left;
-            font-weight: 700;
-          }
-          dd {
-            white-space: normal;
-            margin-inline-start: 50px;
-            margin-bottom: 8px;
-            li {
-              display: inline-block;
-              margin-right: 8px;
-              cursor: pointer;
-              &:hover {
-                color: @--primary-color;
-              }
-              &.actived {
-                color: @--primary-color;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  // 40  32  24
-  &--lg {
-  }
-  &--sm {
-    padding: 10px 10px 5px !important;
-  }
-}
-
-// region-select
-.@{prefix-form}-region-select {
-  padding: 10px 15px;
-  .container {
-    margin-top: -10px;
-    .region-box {
-      display: flex;
-      flex-wrap: wrap;
-      width: 440px;
-      &__item {
-        margin: 0 5px;
-        width: 100px;
-        cursor: pointer;
-        .text-overflow-cut();
-        &:hover {
-          color: @--primary-color;
-        }
-        &.actived {
-          color: @--primary-color;
-        }
-      }
-    }
-  }
-  // 40  32  24
-  &--lg {
-  }
-  &--sm {
-    padding: 15px 10px 5px !important;
-  }
-}
-
-// fields-filter
-.@{prefix-form}-fields-filter {
-  min-width: 160px;
-  max-width: 220px;
-  .reset {
-    padding-bottom: 2px;
-    margin-bottom: 4px;
-    text-align: right;
-    border-bottom: 1px solid @--border-color-secondary;
-    .ant-btn-text {
-      padding: 0 2px;
-    }
-  }
-  .fields-list {
-    padding: 4px @--padding-md;
-    ul {
-      margin: 0;
-      li.item {
-        line-height: 1.85;
-        .text-overflow-cut();
-        .handle {
-          padding: 2px;
-          color: @--text-color-placeholder;
-          cursor: s-resize;
-          transform: scale(0.9);
-        }
-      }
-    }
-  }
-  &--lg {
-  }
-  &--sm {
-    font-size: @--font-size-sm;
-  }
-}
+/*
+ * @Author: 焦质晔
+ * @Date: 2021-07-23 19:05:57
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2024-10-29 13:39:17
+ */
+@import '../../style/common';
+
+@prefix-form: ~'@{qm-prefix}-form';
+
+.@{prefix-form} {
+  position: relative;
+  .ant-form-item {
+    margin-bottom: @--margin-md + 2px;
+    .ant-form-item-label {
+      & > label:has(.ant-select) {
+        width: 100%;
+        .ant-select {
+          text-align: left;
+        }
+      }
+      & > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
+        margin: 0 2px;
+      }
+    }
+    // placeholder
+    input::placeholder {
+      text-align: left;
+    }
+    // ant-form-inline
+    &-with-help {
+      margin-bottom: @--margin-md + 2px;
+    }
+    // valigator
+    .ant-form-item-explain {
+      .text-overflow-cut();
+      display: flex;
+      gap: @--margin-md;
+      min-height: auto;
+      height: @--font-size-sm;
+      font-size: @--font-size-sm;
+      line-height: 1;
+    }
+    // search
+    .ant-input-search {
+      width: calc(100% + 1px);
+      & > .ant-input-group > .ant-input-group-addon {
+        line-height: 1;
+      }
+    }
+    // radio-group  checkbox-group
+    .ant-radio-group,
+    .ant-checkbox-group {
+      display: inline-flex;
+      justify-content: flex-start;
+      flex-wrap: wrap;
+      row-gap: 4px;
+      .ant-radio-wrapper,
+      .ant-checkbox-wrapper {
+        margin: 0;
+        margin-right: 20px;
+        &:last-of-type {
+          margin-right: 0;
+        }
+      }
+    }
+    // textarea
+    .ant-input-textarea-show-count {
+      position: relative;
+      &::after {
+        position: absolute;
+        right: 3px;
+        bottom: 0;
+        margin: 0;
+      }
+    }
+    // input extra
+    .extra-tooltip {
+      color: @--text-color-secondary;
+      vertical-align: -0.4em;
+      transform: scale(1.2);
+    }
+    .extra-text {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      .text-overflow-cut();
+    }
+    // select
+    .ant-select {
+      width: 100%;
+    }
+    // input number
+    .ant-input-number.right {
+      input {
+        text-align: right;
+      }
+      &.controls {
+        input {
+          padding-right: 30px;
+        }
+      }
+    }
+    // range input/input-number/search-helper
+    .site-input-left {
+      border-right-width: 0;
+      z-index: 1;
+    }
+    .site-input-left:hover,
+    .site-input-left:focus {
+      border-right-width: 1px;
+    }
+    .site-input-right {
+      border-left-width: 0;
+      &.ant-input-search .ant-input-affix-wrapper {
+        border-left-width: 0;
+      }
+      .ant-input-affix-wrapper {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+    .site-input-right:hover,
+    .site-input-right:focus {
+      border-left-width: 1px;
+      &.ant-input-search .ant-input-affix-wrapper {
+        border-left-width: 1px;
+      }
+    }
+    // search-helper-multiple
+    .search-helper-multiple {
+      .ant-input-group > .ant-select:first-child {
+        z-index: 1;
+        .ant-select-selector {
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+      }
+    }
+    // select-multiple
+    .ant-select-multiple:not(.ant-select-disabled) {
+      .ant-select-selection-overflow-item-rest {
+        cursor: pointer;
+        * {
+          pointer-events: none;
+        }
+      }
+    }
+  }
+  .ant-form-vertical .ant-form-item {
+    .ant-form-item-label {
+      padding-bottom: 4px;
+      & > label:has(.ant-select) {
+        width: 50%;
+      }
+    }
+  }
+  &__label-wrap .ant-form-item {
+    .ant-form-item-label > label .text {
+      line-height: 1.075;
+      .text-ellipsis-2();
+    }
+    .extra-text {
+      line-height: 1.075;
+      white-space: normal;
+      .text-ellipsis-2();
+    }
+  }
+  // ------ size ------
+  // 40  32  24
+  &--lg {
+  }
+  &--sm {
+    .ant-form-item {
+      margin-bottom: @--margin-md;
+      .ant-form-item-label {
+        &-wrap {
+          line-height: 1;
+        }
+      }
+      // valigator
+      .ant-form-item-control {
+        // 待优化
+        & > div:nth-last-of-type(1)[style*='nowrap'] {
+          transform: scale(0.8334);
+          transform-origin: 0 50%;
+        }
+      }
+    }
+  }
+  &__only-show {
+    // ...
+  }
+  &__compact {
+    .ant-form-item {
+      margin-bottom: 4px;
+      .ant-form-item-control {
+        & > div:nth-last-of-type(1)[style*='nowrap'] {
+          display: none !important;
+        }
+      }
+    }
+  }
+}
+
+.ant-picker-footer-extra {
+  .ant-tag {
+    cursor: pointer;
+  }
+}
+
+// immediate
+.@{prefix-form}-immediate {
+  padding: 5px 15px;
+  overflow-y: auto !important;
+  .table {
+    width: 100%;
+    th,
+    td {
+      height: 32px;
+      text-align: left;
+      border-bottom: 1px solid @--border-color-secondary;
+    }
+    tbody {
+      tr td {
+        cursor: pointer;
+      }
+      tr:hover,
+      tr.active {
+        background-color: @--primary-1;
+      }
+    }
+  }
+  // 40  32  24
+  &--lg {
+    .table {
+      th,
+      td {
+        height: 40px;
+      }
+    }
+  }
+  &--sm {
+    padding: 5px 10px !important;
+    .table {
+      th,
+      td {
+        height: 24px;
+      }
+    }
+  }
+}
+
+// city-select
+.@{prefix-form}-city-select {
+  padding: 15px 15px 10px;
+  max-width: 420px;
+  .container {
+    .city-drop {
+      &-toper {
+        margin-bottom: 10px;
+        display: flex;
+        &__type {
+          display: inline-block;
+        }
+        &__search {
+          margin-left: 10px;
+        }
+      }
+      &-letter {
+        display: flex;
+        flex-wrap: wrap;
+        margin-bottom: 4px;
+        .tag {
+          list-style: none;
+          line-height: 1.75;
+          font-size: @--font-size-sm;
+          padding: 0 8px;
+          margin: 0 4px 4px 0;
+          border: 1px solid @--border-color-secondary;
+          border-radius: 2px;
+          cursor: pointer;
+          &.actived {
+            color: @--white;
+            background-color: @--primary-color;
+            border-color: @--primary-color;
+          }
+        }
+      }
+      &-list {
+        margin-right: -2px;
+        max-height: 350px;
+        overflow-y: auto;
+        dl {
+          margin: 0;
+          dt {
+            float: left;
+            font-weight: 700;
+          }
+          dd {
+            white-space: normal;
+            margin-inline-start: 50px;
+            margin-bottom: 8px;
+            li {
+              display: inline-block;
+              margin-right: 8px;
+              cursor: pointer;
+              &:hover {
+                color: @--primary-color;
+              }
+              &.actived {
+                color: @--primary-color;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  // 40  32  24
+  &--lg {
+  }
+  &--sm {
+    padding: 10px 10px 5px !important;
+  }
+}
+
+// region-select
+.@{prefix-form}-region-select {
+  padding: 10px 15px;
+  .container {
+    margin-top: -10px;
+    .region-box {
+      display: flex;
+      flex-wrap: wrap;
+      width: 440px;
+      &__item {
+        margin: 0 5px;
+        width: 100px;
+        cursor: pointer;
+        .text-overflow-cut();
+        &:hover {
+          color: @--primary-color;
+        }
+        &.actived {
+          color: @--primary-color;
+        }
+      }
+    }
+  }
+  // 40  32  24
+  &--lg {
+  }
+  &--sm {
+    padding: 15px 10px 5px !important;
+  }
+}
+
+// fields-filter
+.@{prefix-form}-fields-filter {
+  min-width: 160px;
+  max-width: 220px;
+  .reset {
+    padding-bottom: 2px;
+    margin-bottom: 4px;
+    text-align: right;
+    border-bottom: 1px solid @--border-color-secondary;
+    .ant-btn-text {
+      padding: 0 2px;
+    }
+  }
+  .fields-list {
+    padding: 4px @--padding-md;
+    ul {
+      margin: 0;
+      li.item {
+        line-height: 1.85;
+        .text-overflow-cut();
+        .handle {
+          padding: 2px;
+          color: @--text-color-placeholder;
+          cursor: s-resize;
+          transform: scale(0.9);
+        }
+      }
+    }
+  }
+  &--lg {
+  }
+  &--sm {
+    font-size: @--font-size-sm;
+  }
+}