@douyinfe/semi-ui 2.19.1-alpha.1 → 2.19.2-alpha.0

package/dist/css/semi.css

@@ -522,6 +522,7 @@ body {
   --semi-transition_function-easeIn:ease-in;
   --semi-transition_function-easeOut:ease-out;
   --semi-transition_function-easeInIOut:ease-in-out;
+  --semi-transition_delay-none: 0ms;
   --semi-transition_delay-slowest:0ms;
   --semi-transition_delay-slower:0ms;
   --semi-transition_delay-slow:0ms;
@@ -575,8 +576,6 @@ body {
   left: 0;
   top: 0;
   height: 100%;
-  box-sizing: border-box;
-  padding: 2px 0;
 }
 .semi-anchor-slide-muted {
   display: none;
@@ -612,13 +611,6 @@ body {
   border-radius: 1px;
   content: " ";
 }
-.semi-anchor-link {
-  padding-left: 8px;
-}
-.semi-anchor-link-wrapper {
-  padding-right: 2px;
-  margin: 2px 0;
-}
 .semi-anchor-link-title {
   cursor: pointer;
   color: var(--semi-color-text-2);
@@ -639,6 +631,7 @@ body {
 }
 .semi-anchor-link-title:focus-visible {
   outline: 2px solid var(--semi-color-primary-light-active);
+  outline-offset: -2px;
 }
 .semi-anchor-link-title-disabled {
   color: var(--semi-color-disabled-text);
@@ -681,7 +674,6 @@ body {
 }
 .semi-rtl .semi-anchor-link,
 .semi-portal-rtl .semi-anchor-link {
-  padding-right: 8px;
   padding-left: auto;
 }
 
@@ -1778,6 +1770,10 @@ body {
 .semi-button-block {
   width: 100%;
 }
+.semi-button-group {
+  display: flex;
+  flex-wrap: wrap;
+}
 .semi-button-group > .semi-button {
   margin: 0;
   padding-left: 0;
@@ -1816,13 +1812,46 @@ body {
   border-top-left-radius: var(--semi-border-radius-small);
   border-bottom-left-radius: var(--semi-border-radius-small);
 }
-.semi-button-group > .semi-button:not(:last-child) .semi-button-content {
-  border-right: 1px var(--semi-color-border) solid;
-}
 .semi-button-group > .semi-button:last-child {
   border-top-right-radius: var(--semi-border-radius-small);
   border-bottom-right-radius: var(--semi-border-radius-small);
 }
+.semi-button-group-line {
+  display: inline-flex;
+  align-items: center;
+  background-color: var(--semi-color-border);
+}
+.semi-button-group-line-primary {
+  background-color: var(--semi-color-primary);
+}
+.semi-button-group-line-secondary {
+  background-color: var(--semi-color-secondary);
+}
+.semi-button-group-line-tertiary {
+  background-color: var(--semi-color-tertiary);
+}
+.semi-button-group-line-warning {
+  background-color: var(--semi-color-warning);
+}
+.semi-button-group-line-danger {
+  background-color: var(--semi-color-danger);
+}
+.semi-button-group-line-disabled {
+  background-color: var(--semi-color-disabled-bg);
+}
+.semi-button-group-line-light {
+  background-color: var(--semi-color-fill-0);
+}
+.semi-button-group-line-borderless {
+  background-color: transparent;
+}
+.semi-button-group-line::before {
+  display: block;
+  content: "";
+  width: 1px;
+  height: 20px;
+  background-color: var(--semi-color-border);
+}
 
 .semi-rtl .semi-button,
 .semi-portal-rtl .semi-button {
@@ -3471,7 +3500,7 @@ body {
   box-sizing: border-box;
   position: relative;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   flex-wrap: wrap;
   font-size: 14px;
   line-height: 20px;
@@ -3479,6 +3508,7 @@ body {
   cursor: pointer;
   transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
   transform: scale(var(--semi-transform_scale-none));
+  column-gap: 8px;
 }
 .semi-checkbox input[type=checkbox] {
   position: absolute;
@@ -3489,11 +3519,16 @@ body {
   margin: 0;
   opacity: 0;
 }
+.semi-checkbox-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  row-gap: 4px;
+}
 .semi-checkbox-addon {
   display: flex;
   flex: 1;
   align-items: center;
-  padding-left: 8px;
   color: var(--semi-color-text-0);
   line-height: 20px;
   user-select: none;
@@ -3596,7 +3631,6 @@ body {
 }
 .semi-checkbox-cardType .semi-checkbox-inner {
   position: relative;
-  margin-right: 8px;
   flex-shrink: 0;
 }
 .semi-checkbox-cardType .semi-checkbox-inner-display {
@@ -3605,22 +3639,18 @@ body {
 .semi-checkbox-cardType .semi-checkbox-inner-pureCardType {
   opacity: 0;
   width: 0;
-  margin-right: 0;
 }
 .semi-checkbox-cardType .semi-checkbox-addon {
   font-weight: 600;
   font-size: 14px;
   line-height: 20px;
   color: var(--semi-color-text-0);
-  margin-left: 0;
-  padding-left: 0;
 }
 .semi-checkbox-cardType .semi-checkbox-extra {
   font-weight: normal;
   font-size: 14px;
   line-height: 20px;
   color: var(--semi-color-text-2);
-  padding-left: 0;
 }
 .semi-checkbox-cardType .semi-checkbox-extra.semi-checkbox-cardType_extra_noChildren {
   margin-top: 0;
@@ -3722,9 +3752,7 @@ body {
   flex-grow: 1;
   flex-basis: 100%;
   box-sizing: border-box;
-  padding-left: 24px;
   color: var(--semi-color-text-2);
-  margin-top: 4px;
 }
 .semi-checkbox-focus {
   outline: 2px solid var(--semi-color-primary-light-active);
@@ -3742,21 +3770,24 @@ body {
 .semi-checkboxGroup .semi-checkbox.semi-checkbox-vertical {
   margin-bottom: 16px;
 }
+.semi-checkboxGroup-horizontal {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
 .semi-checkboxGroup-horizontal .semi-checkbox {
-  margin-right: 16px;
   display: inline-flex;
 }
-.semi-checkboxGroup-horizontal .semi-checkbox:last-of-type {
-  margin-right: 0;
-}
-.semi-checkboxGroup-vertical .semi-checkbox {
-  margin-bottom: 12px;
+.semi-checkboxGroup-vertical {
+  display: flex;
+  flex-direction: column;
+  row-gap: 12px;
 }
-.semi-checkboxGroup-vertical .semi-checkbox:last-of-type {
-  margin-bottom: 0;
+.semi-checkboxGroup-vertical-cardType {
+  row-gap: 16px;
 }
-.semi-checkboxGroup-vertical-cardType .semi-checkbox {
-  margin-bottom: 16px;
+.semi-checkboxGroup-vertical-pureCardType .semi-checkbox {
+  column-gap: 0;
 }
 
 .semi-rtl .semi-checkbox,
@@ -3768,43 +3799,10 @@ body {
   left: auto;
   right: 0;
 }
-.semi-rtl .semi-checkbox-addon,
-.semi-portal-rtl .semi-checkbox-addon {
-  padding-left: 0;
-  padding-right: 8px;
-}
-.semi-rtl .semi-checkbox-extra,
-.semi-portal-rtl .semi-checkbox-extra {
-  padding-left: 0;
-  padding-right: 24px;
-}
-.semi-rtl .semi-checkbox-cardType .semi-checkbox-inner,
-.semi-portal-rtl .semi-checkbox-cardType .semi-checkbox-inner {
-  margin-right: 0;
-  margin-left: 8px;
-}
-.semi-rtl .semi-checkbox-cardType .semi-checkbox-addon,
-.semi-portal-rtl .semi-checkbox-cardType .semi-checkbox-addon {
-  margin-right: 0;
-  padding-right: 0;
-}
-.semi-rtl .semi-checkbox-cardType .semi-checkbox-extra,
-.semi-portal-rtl .semi-checkbox-cardType .semi-checkbox-extra {
-  padding-right: 0;
-}
 .semi-rtl .semi-checkboxGroup,
 .semi-portal-rtl .semi-checkboxGroup {
   direction: rtl;
 }
-.semi-rtl .semi-checkboxGroup-horizontal .semi-checkbox,
-.semi-portal-rtl .semi-checkboxGroup-horizontal .semi-checkbox {
-  margin-right: 0;
-  margin-left: 16px;
-}
-.semi-rtl .semi-checkboxGroup-horizontal .semi-checkbox:last-of-type,
-.semi-portal-rtl .semi-checkboxGroup-horizontal .semi-checkbox:last-of-type {
-  margin-left: 0;
-}
 
 .semi-collapse-item {
   border-bottom: 1px solid var(--semi-color-border);
@@ -14621,9 +14619,8 @@ body {
   font-size: 14px;
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  position: relative;
   display: inline-flex;
-  flex-wrap: wrap;
+  column-gap: 8px;
   transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
   min-height: 20px;
   min-width: 16px;
@@ -14672,6 +14669,7 @@ body {
   border-radius: var(--semi-border-radius-small);
 }
 .semi-radio-buttonRadioGroup {
+  position: relative;
   padding: 4px;
   border-radius: var(--semi-border-radius-small);
   line-height: 16px;
@@ -14696,8 +14694,6 @@ body {
   transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
 }
 .semi-radio-cardRadioGroup .semi-radio-inner {
-  position: relative;
-  margin-right: 8px;
   flex-shrink: 0;
 }
 .semi-radio-cardRadioGroup .semi-radio-inner-display {
@@ -14708,8 +14704,6 @@ body {
   font-size: 14px;
   line-height: 20px;
   color: var(--semi-color-text-0);
-  margin-left: 0;
-  padding-left: 0;
 }
 .semi-radio-cardRadioGroup .semi-radio-extra {
   font-weight: normal;
@@ -14766,19 +14760,18 @@ body {
   border-color: var(--semi-color-primary-disabled);
 }
 .semi-radio-inner {
-  position: absolute;
-  display: inline-block;
-  top: 2px;
-  left: 0;
+  display: inline-flex;
+  margin-top: 2px;
+  position: relative;
   width: 16px;
   height: 16px;
   vertical-align: sub;
   user-select: none;
 }
 .semi-radio-inner-display {
-  position: absolute;
-  left: 0;
-  top: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   box-sizing: border-box;
   width: 16px;
   height: 16px;
@@ -14788,11 +14781,14 @@ body {
   transition: background-color var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest), border var(--semi-transition_duration-faster) var(--semi-transition_function-easeIn) var(--semi-transition_delay-fastest);
 }
 .semi-radio-inner-display .semi-icon {
-  position: absolute;
   width: 100%;
   height: 100%;
   font-size: 14px;
 }
+.semi-radio-content {
+  display: flex;
+  flex-direction: column;
+}
 .semi-radio:hover .semi-radio-inner-display {
   background: var(--semi-color-fill-0);
 }
@@ -14801,14 +14797,11 @@ body {
 }
 .semi-radio-addon {
   user-select: none;
-  padding-left: 8px;
-  margin-left: 16px;
   color: var(--semi-color-text-0);
   display: inline-flex;
   align-items: center;
 }
 .semi-radio-addon-buttonRadio {
-  margin-left: 0;
   text-align: center;
   border-radius: var(--semi-border-radius-small);
   font-weight: 600;
@@ -14892,11 +14885,7 @@ body {
   color: var(--semi-color-disabled-text);
 }
 .semi-radio-extra {
-  flex-grow: 1;
-  flex-basis: 100%;
-  flex-shrink: 0;
   color: var(--semi-color-text-2);
-  padding-left: 24px;
   box-sizing: border-box;
 }
 .semi-radio-focus {
@@ -14911,25 +14900,21 @@ body {
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
-.semi-radioGroup-vertical .semi-radio:last-of-type {
-  margin-bottom: 0;
+.semi-radioGroup-vertical {
+  display: flex;
+  flex-direction: column;
+  row-gap: 12px;
 }
 .semi-radioGroup-vertical-default .semi-radio {
-  display: block;
-  margin-bottom: 12px;
+  display: flex;
 }
 .semi-radioGroup-vertical-card .semi-radio {
   display: flex;
-  margin-bottom: 16px;
-}
-.semi-radioGroup-horizontal .semi-radio {
-  margin-right: 16px;
-}
-.semi-radioGroup-horizontal .semi-radio:last-of-type {
-  margin-right: 0;
 }
-.semi-radioGroup-horizontal-default {
-  display: inline-block;
+.semi-radioGroup-horizontal {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 16px;
 }
 .semi-radioGroup-buttonRadio {
   display: inline-block;
@@ -14953,59 +14938,10 @@ body {
 .semi-portal-rtl .semi-radio-buttonRadioGroup:not(:last-child) {
   padding-left: 0;
 }
-.semi-rtl .semi-radio-inner,
-.semi-portal-rtl .semi-radio-inner {
-  left: auto;
-  right: 0;
-}
-.semi-rtl .semi-radio-inner-display,
-.semi-portal-rtl .semi-radio-inner-display {
-  left: auto;
-  right: 0;
-}
-.semi-rtl .semi-radio-addon,
-.semi-portal-rtl .semi-radio-addon {
-  padding-left: 0;
-  margin-left: 0;
-  padding-right: 8px;
-  margin-right: 16px;
-}
-.semi-rtl .semi-radio-addon-buttonRadio,
-.semi-portal-rtl .semi-radio-addon-buttonRadio {
-  margin-right: 0;
-}
-.semi-rtl .semi-radio-extra,
-.semi-portal-rtl .semi-radio-extra {
-  padding-left: 0;
-  padding-right: 24px;
-}
-.semi-rtl-isCardRadioGroup .semi-radio-inner,
-.semi-portal-rtl-isCardRadioGroup .semi-radio-inner {
-  margin-right: 0;
-  margin-left: 8px;
-}
-.semi-rtl-isCardRadioGroup .semi-radio-addon,
-.semi-portal-rtl-isCardRadioGroup .semi-radio-addon {
-  margin-right: 0;
-  padding-right: 0;
-}
-.semi-rtl-isCardRadioGroup .semi-radio-extra,
-.semi-portal-rtl-isCardRadioGroup .semi-radio-extra {
-  padding-right: 0;
-}
 .semi-rtl .semi-radioGroup,
 .semi-portal-rtl .semi-radioGroup {
   direction: rtl;
 }
-.semi-rtl .semi-radioGroup-horizontal .semi-radio,
-.semi-portal-rtl .semi-radioGroup-horizontal .semi-radio {
-  margin-right: 0;
-  margin-left: 16px;
-}
-.semi-rtl .semi-radioGroup-horizontal .semi-radio:last-of-type,
-.semi-portal-rtl .semi-radioGroup-horizontal .semi-radio:last-of-type {
-  margin-left: 0;
-}
 
 .semi-rating {
   display: inline-block;
@@ -15835,6 +15771,7 @@ body {
 .semi-sidesheet-body {
   padding: 0 24px;
   flex: 1;
+  overflow: auto;
 }
 .semi-sidesheet-content {
   height: 100%;
@@ -19673,6 +19610,9 @@ body {
   user-select: none;
   cursor: not-allowed;
 }
+.semi-tree-option-list .semi-checkboxGroup-vertical {
+  row-gap: 0;
+}
 
 .semi-tree-option-list-block .semi-tree-option:hover {
   background-color: var(--semi-color-fill-0);