@douyinfe/semi-ui 2.32.1 → 2.33.0-beta.0

package/dist/css/semi.css

@@ -3077,6 +3077,14 @@ body {
   background-color: var(--semi-color-fill-1);
   border: 1px transparent solid;
 }
+.semi-cascader:focus {
+  border: 1px solid var(--semi-color-focus-border);
+  background-color: var(--semi-color-fill-0);
+  outline: 0;
+}
+.semi-cascader:active {
+  background-color: var(--semi-color-fill-2);
+}
 .semi-cascader-small {
   min-height: 24px;
   line-height: 24px;
@@ -3094,10 +3102,13 @@ body {
   border: 1px solid var(--semi-color-focus-border);
   outline: 0;
 }
-.semi-cascader-focus:hover, .semi-cascader-focus:active {
+.semi-cascader-focus:hover {
   background-color: var(--semi-color-fill-0);
   border: 1px solid var(--semi-color-focus-border);
 }
+.semi-cascader-focus:active {
+  background-color: var(--semi-color-fill-2);
+}
 .semi-cascader-warning {
   background-color: var(--semi-color-warning-light-default);
   border-color: var(--semi-color-warning-light-default);
@@ -3458,6 +3469,29 @@ body {
   padding-right: 64px;
 }
 
+.semi-cascader-borderless:not(:focus-within):not(:hover) {
+  background-color: transparent;
+  border-color: transparent;
+}
+.semi-cascader-borderless:not(:focus-within):not(:hover) .semi-cascader-arrow {
+  opacity: 0;
+}
+.semi-cascader-borderless:focus-within:not(:active) {
+  background-color: transparent;
+}
+.semi-cascader-borderless.semi-cascader-error:not(:focus-within) {
+  border-color: var(--semi-color-danger);
+}
+.semi-cascader-borderless.semi-cascader-warning:not(:focus-within) {
+  border-color: var(--semi-color-warning);
+}
+.semi-cascader-borderless.semi-cascader-error:focus-within {
+  border-color: var(--semi-color-danger);
+}
+.semi-cascader-borderless.semi-cascader-warning:focus-within {
+  border-color: var(--semi-color-warning);
+}
+
 .semi-rtl .semi-cascader,
 .semi-portal-rtl .semi-cascader {
   direction: rtl;
@@ -5021,6 +5055,51 @@ body {
   min-height: 168px;
 }
 
+.semi-datepicker-borderless:not(:focus-within):not(:hover) {
+  background-color: transparent;
+  border-color: transparent;
+}
+.semi-datepicker-borderless:not(:focus-within):not(:hover) .semi-input-suffix, .semi-datepicker-borderless:not(:focus-within):not(:hover) .semi-datepicker-range-input-suffix {
+  opacity: 0;
+}
+.semi-datepicker-borderless:focus-within:not(:active) {
+  background-color: transparent;
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-error .semi-datepicker-range-input-wrapper-active {
+  border-color: transparent;
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-error:hover {
+  background-color: var(--semi-color-danger-light-default);
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-error:focus-within {
+  background-color: var(--semi-color-danger-light-default);
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-error:not(:focus-within) {
+  border-width: 1px;
+  border-color: var(--semi-color-danger);
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-error:focus-within {
+  border-width: 1px;
+  border-color: var(--semi-color-danger);
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-warning .semi-datepicker-range-input-wrapper-active {
+  border-color: transparent;
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-warning:hover {
+  background-color: var(--semi-color-warning-light-default);
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-warning:focus-within {
+  background-color: var(--semi-color-warning-light-default);
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-warning:not(:focus-within) {
+  border-width: 1px;
+  border-color: var(--semi-color-warning);
+}
+.semi-datepicker-borderless.semi-datepicker-range-input-warning:focus-within {
+  border-width: 1px;
+  border-color: var(--semi-color-warning);
+}
+
 .semi-rtl,
 .semi-portal-rtl {
   /*
@@ -11993,6 +12072,20 @@ img[src=""], img:not([src]) {
   margin-bottom: 0;
 }
 
+.semi-input-borderless:not(:focus-within):not(:hover) {
+  background-color: transparent;
+  border-color: transparent;
+}
+.semi-input-borderless:focus-within:not(:active) {
+  background-color: transparent;
+}
+.semi-input-borderless.semi-input-wrapper-error:not(:focus-within) {
+  border-color: var(--semi-color-danger);
+}
+.semi-input-borderless.semi-input-wrapper-warning:not(:focus-within) {
+  border-color: var(--semi-color-warning);
+}
+
 .semi-rtl .semi-input-wrapper,
 .semi-portal-rtl .semi-input-wrapper {
   direction: rtl;
@@ -12144,6 +12237,10 @@ img[src=""], img:not([src]) {
   height: 22px;
 }
 
+.semi-input-number:not(:focus-within):not(:hover) .semi-input-borderless + .semi-input-number-suffix-btns {
+  opacity: 0;
+}
+
 .semi-rtl .semi-input-number,
 .semi-portal-rtl .semi-input-number {
   direction: rtl;
@@ -13857,17 +13954,9 @@ img[src=""], img:not([src]) {
   padding: 24px 24px 24px 20px;
   position: relative;
 }
-.semi-popconfirm-inner .semi-popconfirm-btn-close {
-  position: absolute;
-  right: 0;
-  top: 0;
-  margin-top: 24px;
-  margin-right: 24px;
-}
 .semi-popconfirm-header {
   display: flex;
   justify-content: flex-start;
-  margin-right: 68px;
 }
 .semi-popconfirm-header-title {
   font-size: 16px;
@@ -13887,6 +13976,7 @@ img[src=""], img:not([src]) {
 }
 .semi-popconfirm-header-body {
   display: inline-flex;
+  flex-grow: 1;
   flex-direction: column;
 }
 .semi-popconfirm-body {
@@ -13912,10 +14002,6 @@ img[src=""], img:not([src]) {
 .semi-popover-with-arrow .semi-popconfirm-inner {
   padding: 12px 12px 12px 8px;
 }
-.semi-popover-with-arrow .semi-popconfirm-inner .semi-popconfirm-btn-close {
-  margin-top: 12px;
-  margin-right: 12px;
-}
 
 .semi-popconfirm-rtl {
   direction: rtl;
@@ -13923,15 +14009,8 @@ img[src=""], img:not([src]) {
 .semi-popconfirm-rtl .semi-popconfirm-inner {
   padding: 24px 20px 24px 24px;
 }
-.semi-popconfirm-rtl .semi-popconfirm-inner .semi-popconfirm-btn-close {
-  right: auto;
-  left: 0;
-  margin-right: 0;
-  margin-left: 24px;
-}
 .semi-popconfirm-rtl .semi-popconfirm-header {
   margin-right: 0;
-  margin-left: 68px;
 }
 .semi-popconfirm-rtl .semi-popconfirm-header-icon {
   margin-right: 0;
@@ -13951,10 +14030,6 @@ img[src=""], img:not([src]) {
 .semi-popover-with-arrow.semi-popconfirm-rtl .semi-popconfirm-inner {
   padding: 12px 8px 12px 12px;
 }
-.semi-popover-with-arrow.semi-popconfirm-rtl .semi-popconfirm-inner .semi-popconfirm-btn-close {
-  margin-right: 0;
-  margin-left: 12px;
-}
 
 @keyframes semi-popover-zoomIn {
   from {
@@ -14945,6 +15020,9 @@ img[src=""], img:not([src]) {
   background-color: var(--semi-color-fill-0);
   outline: 0;
 }
+.semi-select:active {
+  background-color: var(--semi-color-fill-2);
+}
 .semi-select-small {
   height: 24px;
   line-height: 24px;
@@ -15285,6 +15363,29 @@ img[src=""], img:not([src]) {
   height: 20px;
 }
 
+.semi-select-borderless:not(:focus-within):not(:hover) {
+  background-color: transparent;
+  border-color: transparent;
+}
+.semi-select-borderless:not(:focus-within):not(:hover) .semi-select-arrow {
+  opacity: 0;
+}
+.semi-select-borderless:focus-within:not(:active) {
+  background-color: transparent;
+}
+.semi-select-borderless.semi-select-error:not(:focus-within) {
+  border-color: var(--semi-color-danger);
+}
+.semi-select-borderless.semi-select-warning:not(:focus-within) {
+  border-color: var(--semi-color-warning);
+}
+.semi-select-borderless.semi-select-error:focus-within {
+  border-color: var(--semi-color-danger);
+}
+.semi-select-borderless.semi-select-warning:focus-within {
+  border-color: var(--semi-color-warning);
+}
+
 .semi-rtl .semi-select,
 .semi-portal-rtl .semi-select {
   direction: rtl;
@@ -18889,6 +18990,10 @@ img[src=""], img:not([src]) {
   cursor: pointer;
 }
 
+.semi-timepicker .semi-input-borderless:not(:focus-within):not(:hover) .semi-input-suffix {
+  opacity: 0;
+}
+
 .semi-rtl .semi-timepicker,
 .semi-portal-rtl .semi-timepicker {
   direction: rtl;
@@ -20108,14 +20213,27 @@ img[src=""], img:not([src]) {
   background-color: var(--semi-color-fill-1);
   border: 1px solid transparent;
 }
+.semi-tree-select:focus {
+  border: 1px solid var(--semi-color-focus-border);
+  background-color: var(--semi-color-fill-0);
+  outline: 0;
+}
+.semi-tree-select:active {
+  background-color: var(--semi-color-fill-2);
+}
 .semi-tree-select-focus {
+  background-color: var(--semi-color-fill-0);
   border: 1px solid var(--semi-color-focus-border);
   outline: 0;
 }
 .semi-tree-select-focus:hover {
+  background-color: var(--semi-color-fill-0);
   border: 1px solid var(--semi-color-focus-border);
   outline: 0;
 }
+.semi-tree-select-focus:active {
+  background-color: var(--semi-color-fill-2);
+}
 .semi-tree-select-warning {
   background-color: var(--semi-color-warning-light-default);
   border-color: var(--semi-color-warning-light-default);
@@ -20365,6 +20483,29 @@ img[src=""], img:not([src]) {
   border-bottom: 1px var(--semi-color-fill-0) solid;
 }
 
+.semi-tree-select-borderless:not(:focus-within):not(:hover) {
+  background-color: transparent;
+  border-color: transparent;
+}
+.semi-tree-select-borderless:not(:focus-within):not(:hover) .semi-tree-select-arrow {
+  opacity: 0;
+}
+.semi-tree-select-borderless:focus-within:not(:active) {
+  background-color: transparent;
+}
+.semi-tree-select-borderless.semi-tree-select-error:not(:focus-within) {
+  border-color: var(--semi-color-danger);
+}
+.semi-tree-select-borderless.semi-tree-select-warning:not(:focus-within) {
+  border-color: var(--semi-color-warning);
+}
+.semi-tree-select-borderless.semi-tree-select-error:focus-within {
+  border-color: var(--semi-color-danger);
+}
+.semi-tree-select-borderless.semi-tree-select-warning:focus-within {
+  border-color: var(--semi-color-warning);
+}
+
 .semi-rtl .semi-tree-select,
 .semi-portal-rtl .semi-tree-select {
   direction: rtl;
@@ -20522,7 +20663,7 @@ img[src=""], img:not([src]) {
 }
 .semi-typography-action-copy {
   display: inline-flex;
-  vertical-align: text-bottom;
+  vertical-align: middle;
   padding: 0;
   margin-left: 4px;
 }
@@ -20536,7 +20677,7 @@ img[src=""], img:not([src]) {
   color: var(--semi-color-text-2);
 }
 .semi-typography-action-copied .semi-icon {
-  vertical-align: text-bottom;
+  vertical-align: middle;
   color: var(--semi-color-success);
 }
 .semi-typography-paragraph {
@@ -21518,6 +21659,26 @@ p.semi-typography-extended,
   color: var(--semi-color-danger);
 }
 
+.semi-input-textarea-borderless:not(:focus-within):not(:hover) {
+  background-color: transparent;
+  border-color: transparent;
+}
+.semi-input-textarea-borderless:focus-within:not(:active) {
+  background-color: transparent;
+}
+.semi-input-textarea-borderless.semi-input-textarea-wrapper-error:not(:focus-within) {
+  border-color: var(--semi-color-danger);
+}
+.semi-input-textarea-borderless.semi-input-textarea-wrapper-warning:not(:focus-within) {
+  border-color: var(--semi-color-warning);
+}
+.semi-input-textarea-borderless.semi-input-textarea-wrapper-error .semi-input-textarea-counter {
+  color: var(--semi-color-danger);
+}
+.semi-input-textarea-borderless.semi-input-textarea-wrapper-warning .semi-input-textarea-counter {
+  color: var(--semi-color-warning);
+}
+
 .semi-rtl .semi-input-wrapper,
 .semi-portal-rtl .semi-input-wrapper {
   direction: rtl;