@douyinfe/semi-ui 2.51.4 → 2.52.0-beta.0

package/dist/css/semi.css

@@ -959,6 +959,170 @@ body {
   cursor: pointer;
 }
 
+.semi-avatar-wrapper {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  width: fit-content;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-bg {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  border-radius: 50%;
+  overflow: hidden;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-bg-small {
+  width: 32px;
+  height: 32px;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-bg-default {
+  width: 40px;
+  height: 40px;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-bg-medium {
+  width: 48px;
+  height: 48px;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-bg-large {
+  width: 72px;
+  height: 72px;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-bg-extra-large {
+  width: 128px;
+  height: 128px;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-bg-svg {
+  position: absolute;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-bg-svg-small {
+  top: -28px;
+  scale: 0.4;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-bg-svg-default {
+  top: -32px;
+  scale: 0.7;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-bg-svg-medium {
+  top: -30px;
+  scale: 0.8;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-bg-svg-large {
+  top: -30px;
+  scale: 1.1;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-bg-svg-extra-large {
+  top: -32px;
+  scale: 1.4;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-wrapper {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot {
+  color: var(--semi-color-bg-0);
+  font-weight: 600;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot-content {
+  user-select: none;
+  position: relative;
+  line-height: normal;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot-content-small {
+  font-size: 5px;
+  margin-top: 0px;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot-content-default {
+  font-size: 6px;
+  margin-top: -2px;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot-content-medium {
+  font-size: 8px;
+  margin-top: 0px;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot-content-large {
+  font-size: 14px;
+  margin-top: 0px;
+}
+.semi-avatar-wrapper .semi-avatar-top_slot-wrapper .semi-avatar-top_slot-content-extra-large {
+  font-size: 16px;
+  margin-top: 0px;
+}
+.semi-avatar-wrapper .semi-avatar-bottom_slot {
+  color: var(--semi-color-bg-0);
+  position: absolute;
+  cursor: pointer;
+  bottom: 3.5px;
+  transform: translateY(50%);
+  user-select: none;
+}
+.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--semi-color-primary);
+  border-radius: var(--semi-border-radius-circle);
+  line-height: normal;
+}
+.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle-small {
+  width: 12px;
+  height: 12px;
+  font-size: 5px;
+}
+.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle-default {
+  width: 16px;
+  height: 16px;
+  font-size: 12px;
+}
+.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle-medium {
+  width: 18px;
+  height: 18px;
+  font-size: 12px;
+}
+.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle-large {
+  width: 28px;
+  height: 28px;
+  font-size: 12px;
+}
+.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_circle-extra-large {
+  width: 28px;
+  height: 28px;
+  font-size: 14px;
+}
+.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--semi-color-primary);
+  border-radius: 4px;
+  padding: 1px 4px;
+  font-weight: 600;
+  border-style: solid;
+  border-color: var(--semi-color-bg-0);
+}
+.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square-small {
+  font-size: 5px;
+  border-width: 2px;
+}
+.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square-default {
+  font-size: 12px;
+  border-width: 2px;
+}
+.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square-medium {
+  font-size: 12px;
+  border-width: 2px;
+}
+.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square-large {
+  font-size: 12px;
+  border-width: 2px;
+}
+.semi-avatar-wrapper .semi-avatar-bottom_slot-shape_square-extra-large {
+  font-size: 14px;
+  border-width: 2px;
+}
+
 .semi-avatar-group {
   display: inline-block;
 }
@@ -1206,6 +1370,103 @@ body {
   color: rgba(var(--semi-white), 1);
 }
 
+.semi-avatar-additionalBorder {
+  border-style: solid;
+  border-color: var(--semi-color-primary);
+  display: inline-block;
+  box-sizing: border-box;
+  position: absolute;
+  border-width: 1.5px;
+  top: -3.5px;
+  left: -3.5px;
+}
+.semi-avatar-additionalBorder-extra-extra-small {
+  width: 27px;
+  height: 27px;
+}
+.semi-avatar-additionalBorder-extra-small {
+  width: 31px;
+  height: 31px;
+}
+.semi-avatar-additionalBorder-small {
+  width: 39px;
+  height: 39px;
+}
+.semi-avatar-additionalBorder-default {
+  width: 47px;
+  height: 47px;
+}
+.semi-avatar-additionalBorder-medium {
+  width: 55px;
+  height: 55px;
+}
+.semi-avatar-additionalBorder-large {
+  width: 79px;
+  height: 79px;
+}
+.semi-avatar-additionalBorder-extra-large {
+  width: 135px;
+  height: 135px;
+}
+
+.semi-avatar-square.semi-avatar-additionalBorder-extra_extra_small {
+  border-radius: 3px;
+}
+
+.semi-avatar-square.semi-avatar-additionalBorder-extra_small {
+  border-radius: 3px;
+}
+
+.semi-avatar-square.semi-avatar-additionalBorder-small {
+  border-radius: 3px;
+}
+
+.semi-avatar-square.semi-avatar-additionalBorder-default {
+  border-radius: 3px;
+}
+
+.semi-avatar-square.semi-avatar-additionalBorder-medium {
+  border-radius: 3px;
+}
+
+.semi-avatar-square.semi-avatar-additionalBorder-large {
+  border-radius: 6px;
+}
+
+.semi-avatar-additionalBorder-circle {
+  border-radius: var(--semi-border-radius-circle);
+}
+
+.semi-avatar-additionalBorder-animated {
+  animation: 800ms linear infinite semi-avatar-additionalBorder;
+}
+
+.semi-avatar-animated {
+  animation: 1000ms linear infinite semi-avatar-content;
+}
+
+@keyframes semi-avatar-additionalBorder {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    border-width: 0;
+    opacity: 0;
+    transform: scale(1.15);
+  }
+}
+@keyframes semi-avatar-content {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0.9);
+  }
+  to {
+    transform: scale(1);
+  }
+}
 .semi-rtl .semi-avatar,
 .semi-portal-rtl .semi-avatar {
   direction: rtl;
@@ -12163,6 +12424,18 @@ img[src=""], img:not([src]) {
   margin-bottom: 0;
 }
 
+.semi-input-only_border {
+  background: transparent;
+  border-color: var(--semi-color-border);
+}
+.semi-input-only_border:hover {
+  background: transparent;
+  border-color: var(--semi-color-border);
+}
+.semi-input-only_border:focus-within {
+  background: transparent;
+}
+
 .semi-input-borderless:not(:focus-within):not(:hover) {
   background-color: transparent;
   border-color: transparent;
@@ -12577,6 +12850,9 @@ img[src=""], img:not([src]) {
   overflow: hidden;
   box-shadow: var(--semi-shadow-elevated);
 }
+.semi-modal-footerfill {
+  display: flex;
+}
 .semi-modal-content-fullScreen {
   border-radius: 0;
   border: none;
@@ -15991,10 +16267,19 @@ img[src=""], img:not([src]) {
   cursor: pointer;
   transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: var(--semi-transform_scale-small) translateX(-50%) translateY(0px);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
 }
 .semi-slider-handle:focus-visible {
   outline: 2px solid var(--semi-color-primary-light-active);
 }
+.semi-slider-handle-dot {
+  background: var(--semi-color-primary);
+  width: 4px;
+  height: 4px;
+  border-radius: var(--semi-border-radius-circle);
+}
 .semi-slider-handle:hover {
   background-color: var(--semi-color-white);
 }