@douyinfe/semi-foundation 2.51.3 → 2.52.0-beta.0

package/lib/cjs/avatar/avatar.css

@@ -129,6 +129,170 @@
   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;
 }
@@ -376,6 +540,103 @@
   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;

package/lib/cjs/avatar/avatar.scss

@@ -1,6 +1,8 @@
+@import "./animation";
 @import './variables.scss';
 @import './mixin.scss';
 
+
 $module: #{$prefix}-avatar;
 $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'light-green', 'lime', 'orange', 'pink',
     'purple', 'red', 'teal', 'violet', 'yellow';
@@ -15,6 +17,12 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     text-align: center;
     vertical-align: middle;
 
+
+
+
+
+
+
     &:focus-visible {
         outline: $width-avatar-outline solid $color-avatar-outline-focus;
     }
@@ -149,6 +157,197 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     &:hover {
         cursor: pointer;
     }
+
+
+}
+
+
+.#{$module}-wrapper{
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    width: fit-content;
+    .#{$module}-top_slot-bg{
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        border-radius: 50%;
+        overflow: hidden;
+        
+        &-small{
+            width: $width-avatar_small;
+            height: $width-avatar_small;
+        }
+
+        &-default{
+            width: $width-avatar_default;
+            height: $width-avatar_default;
+        }
+
+        &-medium{
+            width: $width-avatar_medium;
+            height: $width-avatar_medium;
+        }
+
+        &-large{
+            width: $width-avatar_large;
+            height: $width-avatar_large;
+        }
+
+        &-extra-large{
+            width: $width-avatar_extra_large;
+            height: $width-avatar_extra_large;
+        }
+
+
+        &-svg{
+            position: absolute;
+        }
+        &-svg-small{
+            top: $spacing-avatar-top_slot_small-shift;
+            scale: $spacing-avatar-top_slot_small-scale;
+        }
+        &-svg-default{
+            top: $spacing-avatar-top_slot_default-shift;
+            scale: $spacing-avatar-top_slot_default-scale;
+        }
+        &-svg-medium{
+            top: $spacing-avatar-top_slot_medium-shift;
+            scale: $spacing-avatar-top_slot_medium-scale;
+        }
+        &-svg-large{
+            top: $spacing-avatar-top_slot_large-shift;
+            scale: $spacing-avatar-top_slot_large-scale;
+        }
+        &-svg-extra-large{
+            top: $spacing-avatar-top_slot_extra_large-shift;
+            scale: $spacing-avatar-top_slot_extra_large-scale;
+        }
+    }
+
+    .#{$module}-top_slot-bg-with_border{
+        //top: $width-avatar_additional-border;
+    }
+
+    .#{$module}-top_slot-wrapper{
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        .#{$module}-top_slot{
+            color:$color-avatar-top_slot_text;
+            font-weight: $font-weight-bold;
+            &-content{
+                user-select: none;
+                position: relative;
+                line-height: normal;
+                &-small{
+                    font-size: $font-avatar_top_slot-small-fontSize;
+                    margin-top: $spacing-avatar-top_slot_small-content-marginTop;
+                }
+                &-default{
+                    font-size: $font-avatar_top_slot-default-fontSize;
+                    margin-top: $spacing-avatar-top_slot_default-content-marginTop;
+                }
+                &-medium{
+                    font-size: $font-avatar_top_slot-medium-fontSize;
+                    margin-top: $spacing-avatar-top_slot_medium-content-marginTop;
+                }
+                &-large{
+                    font-size: $font-avatar_top_slot-large-fontSize;
+                    margin-top: $spacing-avatar-top_slot_large-content-marginTop;
+                }
+                &-extra-large{
+                    font-size: $font-avatar_top_slot-extra_large-fontSize;
+                    margin-top: $spacing-avatar-top_slot_extra_large-content-marginTop;
+                }
+            }
+
+        }
+    }
+
+
+
+    .#{$module}-bottom_slot{
+        color:var(--semi-color-bg-0);
+        position: absolute;
+        cursor: pointer;
+        bottom: $spacing-avatar_additional-borderGap + $width-avatar_additional-border;
+        transform: translateY(50%);
+        user-select: none;
+        &-shape_circle{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background: $color-avatar-bottom_slot_bg;
+            border-radius: var(--semi-border-radius-circle);
+            line-height:normal;
+        }
+        &-shape_circle-small{
+            width:$width-avatar-bottom_slot_circle_small;
+            height:$width-avatar-bottom_slot_circle_small;
+            font-size: $font-avatar_bottom_slot-small-fontSize;
+        }
+        &-shape_circle-default{
+            width:$width-avatar-bottom_slot_circle_default;
+            height:$width-avatar-bottom_slot_circle_default;
+            font-size: $font-avatar_bottom_slot-default-fontSize;
+        }
+        &-shape_circle-medium{
+            width:$width-avatar-bottom_slot_circle_medium;
+            height:$width-avatar-bottom_slot_circle_medium;
+            font-size: $font-avatar_bottom_slot-medium-fontSize;
+        }
+        &-shape_circle-large{
+            width:$width-avatar-bottom_slot_circle_large;
+            height:$width-avatar-bottom_slot_circle_large;
+            font-size: $font-avatar_bottom_slot-large-fontSize;
+        }
+
+        &-shape_circle-extra-large{
+            width:$width-avatar-bottom_slot_circle_extra_large;
+            height:$width-avatar-bottom_slot_circle_extra_large;
+            font-size: $font-avatar_bottom_slot-extra_large-fontSize;
+        }
+
+
+
+        &-shape_square{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background: $color-avatar-bottom_slot_bg;
+            border-radius: $radius-avatar-bottom_slot_square;
+            padding: $spacing-avatar-bottom_slot_square-paddingY $spacing-avatar-bottom_slot_square-paddingX;
+            font-weight: $font-weight-bold;
+            border-style: solid;
+            border-color: $color-avatar-bottom_slot_square-border;
+        }
+
+        &-shape_square-small{
+            font-size: $font-avatar_bottom_slot-small-fontSize;
+            border-width: $width-avatar-bottom_slot_square_small-border;
+        }
+        &-shape_square-default{
+            font-size: $font-avatar_bottom_slot-default-fontSize;
+            border-width: $width-avatar-bottom_slot_square_default-border;
+
+        }
+        &-shape_square-medium{
+            font-size: $font-avatar_bottom_slot-medium-fontSize;
+            border-width: $width-avatar-bottom_slot_square_medium-border;
+
+        }
+        &-shape_square-large{
+          font-size: $font-avatar_bottom_slot-large-fontSize;
+            border-width: $width-avatar-bottom_slot_square_large-border;
+        }
+
+        &-shape_square-extra-large{
+            font-size: $font-avatar_bottom_slot-extra_large-fontSize;
+              border-width: $width-avatar-bottom_slot_square_extra_large-border;
+          }
+    }
 }
 
 .#{$module}-group {
@@ -206,6 +405,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
         }
     }
 
+
     .#{$module}-item-more {
         background-color: $color-avatar_more_default-bg-default;
     }
@@ -217,4 +417,117 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     }
 }
 
+
+.#{$module}-additionalBorder{
+    border-style: solid;
+    border-color: $color-avatar_additional-border;
+    display: inline-block;
+    box-sizing: border-box;  
+    position: absolute;
+    border-width: $width-avatar_additional-border;
+    top: -1 *  $width-avatar_additional-border - $spacing-avatar_additional-borderGap;
+    left: -1 *  $width-avatar_additional-border - $spacing-avatar_additional-borderGap;
+
+    &-extra-extra-small{
+        width: $width-avatar_extra_extra_small + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+        height: $width-avatar_extra_extra_small + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+    }
+
+    &-extra-small{
+        width: $width-avatar_extra-small + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+        height: $width-avatar_extra-small + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+    }
+
+    &-small{
+        width: $width-avatar_small + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+        height: $width-avatar_small + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+    }
+
+    &-default{
+        width: $width-avatar_default + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+        height: $width-avatar_default + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+    }
+
+    &-medium{
+      
+        width: $width-avatar_medium + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+        height: $width-avatar_medium + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+    }
+
+    &-large{
+        width: $width-avatar_large + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+        height: $width-avatar_large + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+       
+    }
+
+    &-extra-large{
+        width: $width-avatar_extra_large + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+        height: $width-avatar_extra_large + 2 * $spacing-avatar_additional-borderGap + 2 * $width-avatar_additional-border;
+    }
+}
+
+.#{$module}-square.#{$module}-additionalBorder-extra_extra_small {
+    border-radius: $radius-avatar-extra_extra_small;
+}
+
+.#{$module}-square.#{$module}-additionalBorder-extra_small {
+    border-radius: $radius-avatar-extra_small;
+}
+
+.#{$module}-square.#{$module}-additionalBorder-small {
+    border-radius: $radius-avatar-small;
+}
+
+.#{$module}-square.#{$module}-additionalBorder-default {
+    border-radius: $radius-avatar-default;
+}
+
+.#{$module}-square.#{$module}-additionalBorder-medium {
+    border-radius: $radius-avatar-medium;
+}
+
+.#{$module}-square.#{$module}-additionalBorder-large {
+    border-radius: $radius-avatar-large;
+}
+
+.#{$module}-additionalBorder-circle{
+    border-radius: var(--semi-border-radius-circle);
+}
+
+
+.#{$module}-additionalBorder-animated{
+    animation: $animation_duration-additionalBorder linear infinite #{$module}-additionalBorder;
+}
+
+.#{$module}-animated{
+    animation: $animation_duration-content linear infinite #{$module}-content ;
+}
+
+@keyframes #{$module}-additionalBorder {
+    0% {
+        opacity: $animation_opacity-additionalBorder-start;
+        transform: scale($animation_scale-additionalBorder-start)
+    }
+
+    to {
+        border-width: $animation_width-additionalBorder-end;
+        opacity: $animation_opacity-additionalBorder-end;
+        transform: scale($animation_scale-additionalBorder-end);
+    }
+}
+
+@keyframes #{$module}-content{
+    0% {
+        transform: scale($animation_scale-content-start)
+    }
+
+    50% {
+        transform: scale($animation_scale-content-middle)
+    }
+
+    to {
+        transform: scale($animation_scale-content-start)
+    }
+}
+
 @import './rtl.scss';