vdesign-ui 0.2.9 → 0.2.12

package/dist/components/dropdown/style.less

@@ -1,432 +1,432 @@
-.vd-menu-mask {
-  position: fixed;
-  z-index: 999;
-  top: 0;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0);
-}
-
-
-@dropdown-prefix-cls: vd-dropdown;
-
-
-.@{dropdown-prefix-cls} {
-  --translate-x: -50%;
-
-  position: relative;
-  font-size: var(--en-single-f-c-r-fontSize);
-
-  // 额外加的 btn，token之外的
-  &--btn {
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-    flex-direction: row;
-    justify-content: space-between;
-    padding: 10px 0;
-    gap: 10px;
-  }
-
-  &-menu {
-    z-index: 1000;
-    background: #fff;
-    transform-origin: top center;
-    position: absolute;
-    transition: transform 0.25s ease, opacity 0.25s ease;
-    inset-block-start: 100%;
-    // 默认 center
-    inset-inline-start: 50%;
-    transform: translate(var(--translate-x), 2px);
-  }
-
-  &-start {
-    .@{dropdown-prefix-cls}-menu {
-      inset-inline-start: 0;
-      transform: translate(0, 2px);
-    }
-  }
-
-  &-end {
-    .@{dropdown-prefix-cls}-menu {
-      inset-inline-start: inherit;
-      inset-inline-end: 0;
-      transform: translate(0, 2px);
-    }
-  }
-
-  &-center {
-    .@{dropdown-prefix-cls}-menu {
-      inset-inline-start: 50%;
-      transform: translate(var(--translate-x), 2px);
-    }
-  }
-
-  &-primary {
-    .@{dropdown-prefix-cls}-menu {
-      display: inline-block;
-      overflow-y: auto;
-      min-width: var(--width-dropdown-primary_small);
-      max-height: var(--height-dropdown-primary_large);
-      background-color: var(--color-dropdown-bg-default);
-      padding-block-start: var(--spacing-dropdown-primary-padding_x);
-      padding-block-end: var(--spacing-dropdown-primary-padding_x);
-      padding-inline-start: var(--spacing-dropdown-primary-padding_y);
-      padding-inline-end: var(--spacing-dropdown-primary-padding_y);
-      box-shadow: var(--shadow-s2);
-      border-radius: var(--radius-dropdown-primary);
-    }
-  
-    .@{dropdown-prefix-cls}-item {
-      position: relative;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      height: var(--height-dropdown-primary_item);
-      line-height: var(--height-dropdown-primary_item);
-    }
-  
-    .@{dropdown-prefix-cls} {
-      &-left {
-        display: flex;
-        align-items: center;
-      }
-  
-      &-text {
-        white-space: nowrap;
-        color: var(--color-dropdown-primary-text-default);
-        font-size: var(--en-single-f-c-r-fontSize);
-        font-weight: var(--en-single-f-c-r-fontWeight);
-      }
-  
-      &-icon {
-        font-size: var(--icon-dropdown-primary);
-        margin-inline-end: var(--spacing-dropdown-primary_icon-margin_right);
-      }
-  
-      &-active-select {
-        font-size: var(--icon-dropdown-primary_select);
-        margin-inline-start: var(--spacing-dropdown-primary_icon_select-margin_left);
-        transform: scaleX(1) !important;
-        direction: ltr;
-      }
-    }
-  
-    .@{dropdown-prefix-cls}--active {
-      .@{dropdown-prefix-cls}-text {
-        color: var(--color-dropdown-primary-text-active);
-        font-size: var(--en-single-f-c-s-fontSize);
-        font-weight: var(--en-single-f-c-s-fontWeight);
-      }
-    }
-  
-    .@{dropdown-prefix-cls}--disabled {
-      pointer-events: none;
-      cursor: not-allowed;
-  
-      .@{dropdown-prefix-cls}-text {
-        color: var(--color-dropdown-primary-text-disable);
-        font-size: var(--en-single-f-c-r-fontSize);
-        font-weight: var(--en-single-f-c-r-fontWeight);
-      }
-  
-      .@{dropdown-prefix-cls}-icon {
-        opacity: var(--opacity-30);
-      }
-    }
-  }  
-
-  &-secondary {
-    .@{dropdown-prefix-cls}-menu {
-      display: inline-block;
-      overflow-y: auto;
-      max-height: var(--height-dropdown-secondary_large);
-      background-color: var(--color-dropdown-bg-default);
-      padding-block-start: var(--spacing-dropdown-secondary-padding_x);
-      padding-block-end: var(--spacing-dropdown-secondary-padding_x);
-      padding-inline-start: var(--spacing-dropdown-secondary-padding_y);
-      padding-inline-end: var(--spacing-dropdown-secondary-padding_y);
-      box-shadow: var(--shadow-s2);
-      border-radius: var(--radius-dropdown-secondary);
-    }
-  
-    .@{dropdown-prefix-cls}-item {
-      position: relative;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      height: var(--height-dropdown-secondary_item);
-      line-height: var(--height-dropdown-secondary_item);
-    }
-  
-    .@{dropdown-prefix-cls} {
-      &-left {
-        display: flex;
-        align-items: center;
-      }
-  
-      &-text {
-        white-space: nowrap;
-        color: var(--color-dropdown-secondary-text-default);
-        font-size: var(--en-single-f-c-r-fontSize);
-        font-weight: var(--en-single-f-c-r-fontWeight);
-      }
-  
-      &-icon {
-        font-size: var(--icon-dropdown-secondary);
-        margin-inline-end: var(--spacing-dropdown-secondary_icon-margin_right);
-      }
-    }
-  
-    .@{dropdown-prefix-cls}--active {
-      .@{dropdown-prefix-cls}-text {
-        color: var(--color-dropdown-secondary-text-active);
-        font-size: var(--en-single-f-c-s-fontSize);
-        font-weight: var(--en-single-f-c-s-fontWeight);
-      }
-    }
-  
-    .@{dropdown-prefix-cls}--disabled {
-      pointer-events: none;
-      cursor: not-allowed;
-  
-      .@{dropdown-prefix-cls}-text {
-        color: var(--color-dropdown-secondary-text-disable);
-        font-size: var(--en-single-f-c-r-fontSize);
-        font-weight: var(--en-single-f-c-r-fontWeight);
-      }
-  
-      .@{dropdown-prefix-cls}-icon {
-        opacity: var(--opacity-30);
-      }
-    }
-  }  
-
-  &-state {
-    .@{dropdown-prefix-cls}-menu {
-      overflow-y: auto;
-      min-width: var(--width-dropdown-state_small);
-      max-height: var(--height-dropdown-state_large);
-      background-color: var(--color-dropdown-bg-default);
-      padding-block-start: var(--spacing-dropdown-state-padding_x);
-      padding-block-end: var(--spacing-dropdown-state-padding_x);
-      padding-inline-start: var(--spacing-dropdown-state-padding_y);
-      padding-inline-end: var(--spacing-dropdown-state-padding_y);
-      box-shadow: var(--shadow-s2);
-      border-radius: var(--radius-dropdown-state);
-    }
-  
-    .@{dropdown-prefix-cls}-item {
-      position: relative;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      height: var(--height-dropdown-state_item);
-      line-height: var(--height-dropdown-state_item);
-      padding-inline-start: var(--spacing-dropdown-state_item-padding_y);
-      padding-inline-end: var(--spacing-dropdown-state_item-padding_y);
-      border-radius: var(--radius-dropdown-state_item);
-    }
-  
-    .@{dropdown-prefix-cls} {
-      &-left {
-        display: flex;
-        align-items: center;
-        flex: 1;
-        overflow: hidden;
-      }
-  
-      &-text {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        color: var(--color-dropdown-state-text-default);
-        font-size: var(--en-single-f-c-r-fontSize);
-        font-weight: var(--en-single-f-c-r-fontWeight);
-      }
-  
-      &-icon {
-        font-size: var(--icon-dropdown-state);
-        margin-inline-end: var(--spacing-dropdown-state_icon-margin_right);
-      }
-  
-      &-state-text {
-        font-size: var(--en-single-f-b-r-fontSize);
-        font-weight: var(--en-single-f-b-r-fontWeight);
-  
-        &::before {
-          content: '';
-          display: inline-block;
-          border-radius: 50%;
-          width: var(--width-dropdown-state_drop);
-          height: var(--width-dropdown-state_drop);
-          margin-inline-start: var(--spacing-dropdown-state_drop-margin_left);
-          margin-inline-end: var(--spacing-dropdown-state_drop-margin_right);
-          background-color: var(--color-dropdown-state-open);
-        }
-  
-        &--open {
-          color: var(--color-dropdown-state-open);
-  
-          &::before {
-            background-color: var(--color-dropdown-state-open);
-          }
-        }
-  
-        &--preopen {
-          color: var(--color-dropdown-state-preopen);
-  
-          &::before {
-            background-color: var(--color-dropdown-state-preopen);
-          }
-        }
-  
-        &--close {
-          color: var(--color-dropdown-state-close);
-  
-          &::before {
-            background-color: var(--text-color-h3);
-          }
-        }
-  
-        &--fusing {
-          color: var(--color-dropdown-state-fusing);
-  
-          &::before {
-            background-color: var(--color-dropdown-state-fusing);
-          }
-        }
-  
-        &--pre {
-          color: var(--color-dropdown-state-pre_market_auction);
-  
-          &::before {
-            background-color: var(--color-dropdown-state-pre_market_auction);
-          }
-        }
-  
-        &--last {
-          color: var(--color-dropdown-state-last_trading_session);
-  
-          &::before {
-            background-color: var(--color-dropdown-state-last_trading_session);
-          }
-        }
-      }
-    }
-  
-    .@{dropdown-prefix-cls}--active {
-      background: var(--color-dropdown-state-bg-active);
-  
-      .@{dropdown-prefix-cls}-text {
-        color: var(--color-dropdown-state-text-active);
-      }
-    }
-  
-    .@{dropdown-prefix-cls}--disabled {
-      pointer-events: none;
-      cursor: not-allowed;
-  
-      .@{dropdown-prefix-cls}-text {
-        font-size: var(--en-single-f-c-r-fontSize);
-        font-weight: var(--en-single-f-c-r-fontWeight);
-      }
-  
-      .@{dropdown-prefix-cls}-icon {
-        opacity: var(--opacity-30);
-      }
-    }
-  }
-
-  &-group {
-    .@{dropdown-prefix-cls}-menu {
-      overflow-y: auto;
-      min-width: var(--width-dropdown-group_default);
-      max-height: var(--height-dropdown-group_large);
-      background-color: var(--color-dropdown-bg-default);
-      padding-block-start: var(--spacing-dropdown-group-padding_x);
-      padding-block-end: var(--spacing-dropdown-group-padding_x);
-      padding-inline-start: var(--spacing-dropdown-group-padding_y);
-      padding-inline-end: var(--spacing-dropdown-group-padding_y);
-      box-shadow: var(--shadow-s2);
-      border-radius: var(--radius-dropdown-group);
-    }
-  
-    .@{dropdown-prefix-cls}-item {
-      position: relative;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding-block-start: var(--spacing-dropdown-group_item-padding_top);
-      padding-block-end: var(--spacing-dropdown-group_item-padding_bottom);
-    }
-  
-    .@{dropdown-prefix-cls} {
-      &-left {
-        display: flex;
-        align-items: center;
-      }
-  
-      &-group-cell {
-        display: flex;
-        flex-direction: column;
-        color: var(--color-dropdown-state-text-default);
-        font-size: var(--en-single-f-c-r-fontSize);
-        font-weight: var(--en-single-f-c-r-fontWeight);
-      }
-  
-      &-text {
-        color: var(--color-dropdown-group-title-default);
-        font-size: var(--en-single-f-c-r-fontSize);
-        font-weight: var(--en-single-f-c-r-fontWeight);
-      }
-  
-      &-group-sub {
-        display: flex;
-        align-items: center;
-        margin-block-start: var(--spacing-dropdown-group_text-margin_bottom);
-      }
-  
-      &-sub-icon {
-        font-size: var(--icon-dropdown-group);
-        margin-inline-end: 6px;
-      }
-  
-      &-subtext {
-        color: var(--color-dropdown-group-text-default);
-        font-size: var(--en-single-f-c-s-fontSize);
-        font-weight: var(--en-single-f-c-s-fontWeight);
-      }
-  
-      &-multext {
-        margin-block-start: var(--spacing-dropdown-group_text-margin_bottom);
-      }
-    }
-  }
-  
-  &--divided {
-    .@{dropdown-prefix-cls}-item {
-      &:not(:last-child)::after {
-        position: absolute;
-        box-sizing: border-box;
-        content: ' ';
-        pointer-events: none;
-        top: -50%;
-        right: -50%;
-        bottom: -50%;
-        left: -50%;
-        border: 0 solid var(--color-dropdown-divider);
-        -webkit-transform: scale(0.5);
-        transform: scale(0.5);
-        border-bottom-width: 1px;
-      }
-    }
-  }
-}
-
-
-
-[dir="rtl"] .@{dropdown-prefix-cls} {
-  --translate-x: 50%;
-}
+.vd-menu-mask {
+  position: fixed;
+  z-index: 999;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0);
+}
+
+
+@dropdown-prefix-cls: vd-dropdown;
+
+
+.@{dropdown-prefix-cls} {
+  --translate-x: -50%;
+
+  position: relative;
+  font-size: var(--en-single-f-c-r-fontSize);
+
+  // 额外加的 btn，token之外的
+  &--btn {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 10px 0;
+    gap: 10px;
+  }
+
+  &-menu {
+    z-index: 1000;
+    background: #fff;
+    transform-origin: top center;
+    position: absolute;
+    transition: transform 0.25s ease, opacity 0.25s ease;
+    inset-block-start: 100%;
+    // 默认 center
+    inset-inline-start: 50%;
+    transform: translate(var(--translate-x), 2px);
+  }
+
+  &-start {
+    .@{dropdown-prefix-cls}-menu {
+      inset-inline-start: 0;
+      transform: translate(0, 2px);
+    }
+  }
+
+  &-end {
+    .@{dropdown-prefix-cls}-menu {
+      inset-inline-start: inherit;
+      inset-inline-end: 0;
+      transform: translate(0, 2px);
+    }
+  }
+
+  &-center {
+    .@{dropdown-prefix-cls}-menu {
+      inset-inline-start: 50%;
+      transform: translate(var(--translate-x), 2px);
+    }
+  }
+
+  &-primary {
+    .@{dropdown-prefix-cls}-menu {
+      display: inline-block;
+      overflow-y: auto;
+      min-width: var(--width-dropdown-primary_small);
+      max-height: var(--height-dropdown-primary_large);
+      background-color: var(--color-dropdown-bg-default);
+      padding-block-start: var(--spacing-dropdown-primary-padding_x);
+      padding-block-end: var(--spacing-dropdown-primary-padding_x);
+      padding-inline-start: var(--spacing-dropdown-primary-padding_y);
+      padding-inline-end: var(--spacing-dropdown-primary-padding_y);
+      box-shadow: var(--shadow-s2);
+      border-radius: var(--radius-dropdown-primary);
+    }
+  
+    .@{dropdown-prefix-cls}-item {
+      position: relative;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: var(--height-dropdown-primary_item);
+      line-height: var(--height-dropdown-primary_item);
+    }
+  
+    .@{dropdown-prefix-cls} {
+      &-left {
+        display: flex;
+        align-items: center;
+      }
+  
+      &-text {
+        white-space: nowrap;
+        color: var(--color-dropdown-primary-text-default);
+        font-size: var(--en-single-f-c-r-fontSize);
+        font-weight: var(--en-single-f-c-r-fontWeight);
+      }
+  
+      &-icon {
+        font-size: var(--icon-dropdown-primary);
+        margin-inline-end: var(--spacing-dropdown-primary_icon-margin_right);
+      }
+  
+      &-active-select {
+        font-size: var(--icon-dropdown-primary_select);
+        margin-inline-start: var(--spacing-dropdown-primary_icon_select-margin_left);
+        transform: scaleX(1) !important;
+        direction: ltr;
+      }
+    }
+  
+    .@{dropdown-prefix-cls}--active {
+      .@{dropdown-prefix-cls}-text {
+        color: var(--color-dropdown-primary-text-active);
+        font-size: var(--en-single-f-c-s-fontSize);
+        font-weight: var(--en-single-f-c-s-fontWeight);
+      }
+    }
+  
+    .@{dropdown-prefix-cls}--disabled {
+      pointer-events: none;
+      cursor: not-allowed;
+  
+      .@{dropdown-prefix-cls}-text {
+        color: var(--color-dropdown-primary-text-disable);
+        font-size: var(--en-single-f-c-r-fontSize);
+        font-weight: var(--en-single-f-c-r-fontWeight);
+      }
+  
+      .@{dropdown-prefix-cls}-icon {
+        opacity: var(--opacity-30);
+      }
+    }
+  }  
+
+  &-secondary {
+    .@{dropdown-prefix-cls}-menu {
+      display: inline-block;
+      overflow-y: auto;
+      max-height: var(--height-dropdown-secondary_large);
+      background-color: var(--color-dropdown-bg-default);
+      padding-block-start: var(--spacing-dropdown-secondary-padding_x);
+      padding-block-end: var(--spacing-dropdown-secondary-padding_x);
+      padding-inline-start: var(--spacing-dropdown-secondary-padding_y);
+      padding-inline-end: var(--spacing-dropdown-secondary-padding_y);
+      box-shadow: var(--shadow-s2);
+      border-radius: var(--radius-dropdown-secondary);
+    }
+  
+    .@{dropdown-prefix-cls}-item {
+      position: relative;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: var(--height-dropdown-secondary_item);
+      line-height: var(--height-dropdown-secondary_item);
+    }
+  
+    .@{dropdown-prefix-cls} {
+      &-left {
+        display: flex;
+        align-items: center;
+      }
+  
+      &-text {
+        white-space: nowrap;
+        color: var(--color-dropdown-secondary-text-default);
+        font-size: var(--en-single-f-c-r-fontSize);
+        font-weight: var(--en-single-f-c-r-fontWeight);
+      }
+  
+      &-icon {
+        font-size: var(--icon-dropdown-secondary);
+        margin-inline-end: var(--spacing-dropdown-secondary_icon-margin_right);
+      }
+    }
+  
+    .@{dropdown-prefix-cls}--active {
+      .@{dropdown-prefix-cls}-text {
+        color: var(--color-dropdown-secondary-text-active);
+        font-size: var(--en-single-f-c-s-fontSize);
+        font-weight: var(--en-single-f-c-s-fontWeight);
+      }
+    }
+  
+    .@{dropdown-prefix-cls}--disabled {
+      pointer-events: none;
+      cursor: not-allowed;
+  
+      .@{dropdown-prefix-cls}-text {
+        color: var(--color-dropdown-secondary-text-disable);
+        font-size: var(--en-single-f-c-r-fontSize);
+        font-weight: var(--en-single-f-c-r-fontWeight);
+      }
+  
+      .@{dropdown-prefix-cls}-icon {
+        opacity: var(--opacity-30);
+      }
+    }
+  }  
+
+  &-state {
+    .@{dropdown-prefix-cls}-menu {
+      overflow-y: auto;
+      min-width: var(--width-dropdown-state_small);
+      max-height: var(--height-dropdown-state_large);
+      background-color: var(--color-dropdown-bg-default);
+      padding-block-start: var(--spacing-dropdown-state-padding_x);
+      padding-block-end: var(--spacing-dropdown-state-padding_x);
+      padding-inline-start: var(--spacing-dropdown-state-padding_y);
+      padding-inline-end: var(--spacing-dropdown-state-padding_y);
+      box-shadow: var(--shadow-s2);
+      border-radius: var(--radius-dropdown-state);
+    }
+  
+    .@{dropdown-prefix-cls}-item {
+      position: relative;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: var(--height-dropdown-state_item);
+      line-height: var(--height-dropdown-state_item);
+      padding-inline-start: var(--spacing-dropdown-state_item-padding_y);
+      padding-inline-end: var(--spacing-dropdown-state_item-padding_y);
+      border-radius: var(--radius-dropdown-state_item);
+    }
+  
+    .@{dropdown-prefix-cls} {
+      &-left {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        overflow: hidden;
+      }
+  
+      &-text {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        color: var(--color-dropdown-state-text-default);
+        font-size: var(--en-single-f-c-r-fontSize);
+        font-weight: var(--en-single-f-c-r-fontWeight);
+      }
+  
+      &-icon {
+        font-size: var(--icon-dropdown-state);
+        margin-inline-end: var(--spacing-dropdown-state_icon-margin_right);
+      }
+  
+      &-state-text {
+        font-size: var(--en-single-f-b-r-fontSize);
+        font-weight: var(--en-single-f-b-r-fontWeight);
+  
+        &::before {
+          content: '';
+          display: inline-block;
+          border-radius: 50%;
+          width: var(--width-dropdown-state_drop);
+          height: var(--width-dropdown-state_drop);
+          margin-inline-start: var(--spacing-dropdown-state_drop-margin_left);
+          margin-inline-end: var(--spacing-dropdown-state_drop-margin_right);
+          background-color: var(--color-dropdown-state-open);
+        }
+  
+        &--open {
+          color: var(--color-dropdown-state-open);
+  
+          &::before {
+            background-color: var(--color-dropdown-state-open);
+          }
+        }
+  
+        &--preopen {
+          color: var(--color-dropdown-state-preopen);
+  
+          &::before {
+            background-color: var(--color-dropdown-state-preopen);
+          }
+        }
+  
+        &--close {
+          color: var(--color-dropdown-state-close);
+  
+          &::before {
+            background-color: var(--text-color-h3);
+          }
+        }
+  
+        &--fusing {
+          color: var(--color-dropdown-state-fusing);
+  
+          &::before {
+            background-color: var(--color-dropdown-state-fusing);
+          }
+        }
+  
+        &--pre {
+          color: var(--color-dropdown-state-pre_market_auction);
+  
+          &::before {
+            background-color: var(--color-dropdown-state-pre_market_auction);
+          }
+        }
+  
+        &--last {
+          color: var(--color-dropdown-state-last_trading_session);
+  
+          &::before {
+            background-color: var(--color-dropdown-state-last_trading_session);
+          }
+        }
+      }
+    }
+  
+    .@{dropdown-prefix-cls}--active {
+      background: var(--color-dropdown-state-bg-active);
+  
+      .@{dropdown-prefix-cls}-text {
+        color: var(--color-dropdown-state-text-active);
+      }
+    }
+  
+    .@{dropdown-prefix-cls}--disabled {
+      pointer-events: none;
+      cursor: not-allowed;
+  
+      .@{dropdown-prefix-cls}-text {
+        font-size: var(--en-single-f-c-r-fontSize);
+        font-weight: var(--en-single-f-c-r-fontWeight);
+      }
+  
+      .@{dropdown-prefix-cls}-icon {
+        opacity: var(--opacity-30);
+      }
+    }
+  }
+
+  &-group {
+    .@{dropdown-prefix-cls}-menu {
+      overflow-y: auto;
+      min-width: var(--width-dropdown-group_default);
+      max-height: var(--height-dropdown-group_large);
+      background-color: var(--color-dropdown-bg-default);
+      padding-block-start: var(--spacing-dropdown-group-padding_x);
+      padding-block-end: var(--spacing-dropdown-group-padding_x);
+      padding-inline-start: var(--spacing-dropdown-group-padding_y);
+      padding-inline-end: var(--spacing-dropdown-group-padding_y);
+      box-shadow: var(--shadow-s2);
+      border-radius: var(--radius-dropdown-group);
+    }
+  
+    .@{dropdown-prefix-cls}-item {
+      position: relative;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-block-start: var(--spacing-dropdown-group_item-padding_top);
+      padding-block-end: var(--spacing-dropdown-group_item-padding_bottom);
+    }
+  
+    .@{dropdown-prefix-cls} {
+      &-left {
+        display: flex;
+        align-items: center;
+      }
+  
+      &-group-cell {
+        display: flex;
+        flex-direction: column;
+        color: var(--color-dropdown-state-text-default);
+        font-size: var(--en-single-f-c-r-fontSize);
+        font-weight: var(--en-single-f-c-r-fontWeight);
+      }
+  
+      &-text {
+        color: var(--color-dropdown-group-title-default);
+        font-size: var(--en-single-f-c-r-fontSize);
+        font-weight: var(--en-single-f-c-r-fontWeight);
+      }
+  
+      &-group-sub {
+        display: flex;
+        align-items: center;
+        margin-block-start: var(--spacing-dropdown-group_text-margin_bottom);
+      }
+  
+      &-sub-icon {
+        font-size: var(--icon-dropdown-group);
+        margin-inline-end: 6px;
+      }
+  
+      &-subtext {
+        color: var(--color-dropdown-group-text-default);
+        font-size: var(--en-single-f-c-s-fontSize);
+        font-weight: var(--en-single-f-c-s-fontWeight);
+      }
+  
+      &-multext {
+        margin-block-start: var(--spacing-dropdown-group_text-margin_bottom);
+      }
+    }
+  }
+  
+  &--divided {
+    .@{dropdown-prefix-cls}-item {
+      &:not(:last-child)::after {
+        position: absolute;
+        box-sizing: border-box;
+        content: ' ';
+        pointer-events: none;
+        top: -50%;
+        right: -50%;
+        bottom: -50%;
+        left: -50%;
+        border: 0 solid var(--color-dropdown-divider);
+        -webkit-transform: scale(0.5);
+        transform: scale(0.5);
+        border-bottom-width: 1px;
+      }
+    }
+  }
+}
+
+
+
+[dir="rtl"] .@{dropdown-prefix-cls} {
+  --translate-x: 50%;
+}