refactor(ui/result): rewrite class name

varletjs · Dec 5, 2022 · e74cb84 · e74cb84
1 parent caad4af
commit e74cb84
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 13 deletions.
diff --git a/packages/varlet-ui/src/result/Success.vue b/packages/varlet-ui/src/result/Success.vue
@@ -1,32 +1,32 @@
 <template>
   <span
-    :class="n('--cover-left')"
+    :class="n('cover-left')"
     :style="{
       animationDuration: `${14 * duration}ms`,
     }"
   />
   <span
-    :class="classes(n('--line'), n('--line-tip'))"
+    :class="classes(n('line'), n('line-tip'))"
     :style="{
       animationDuration: `${2.5 * duration}ms`,
       borderRadius: `calc(${borderSize} * 0.625)`,
     }"
   />
   <span
-    :class="classes(n('--line'), n('--line-long'))"
+    :class="classes(n('line'), n('line-long'))"
     :style="{
       animationDuration: `${2.5 * duration}ms`,
       borderRadius: `calc(${borderSize} * 0.625)`,
     }"
   />
   <span
     ref="circle"
-    :class="n('--circle')"
+    :class="n('circle')"
     :style="{ left: `-${borderSize}`, top: `-${borderSize}`, borderWidth: borderSize }"
   />
-  <span :class="n('--line-fix')" />
+  <span :class="n('line-fix')" />
   <span
-    :class="n('--cover-right')"
+    :class="n('cover-right')"
     :style="{
       animationDuration: `${14 * duration}ms`,
     }"

diff --git a/packages/varlet-ui/src/result/result.less b/packages/varlet-ui/src/result/result.less
@@ -100,7 +100,7 @@
   &__success {
     border-color: var(--result-success-color);
 
-    &--cover-left {
+    &__cover-left {
       display: block;
       position: absolute;
       z-index: 1;
@@ -113,7 +113,7 @@
       background: var(--result-background);
     }
 
-    &--cover-right {
+    &__cover-right {
       display: block;
       position: absolute;
       top: -13.75%;
@@ -128,21 +128,21 @@
       background: var(--result-background);
     }
 
-    &--line {
+    &__line {
       height: 6.8%;
       background-color: var(--result-success-color);
       display: block;
       position: absolute;
       z-index: 10;
     }
 
-    &--line-tip {
+    &__line-tip {
       transform: rotate(45deg);
       animation-name: success-line-tip;
       animation-fill-mode: forwards;
     }
 
-    &--line-long {
+    &__line-long {
       transform: rotate(-45deg);
       animation-name: success-line-long;
       animation-fill-mode: forwards;
@@ -206,7 +206,7 @@
       }
     }
 
-    &--circle {
+    &__circle {
       z-index: 10;
       width: 100%;
       height: 100%;
@@ -217,7 +217,7 @@
       border-color: var(--result-success-border-color);
     }
 
-    &--line-fix {
+    &__line-fix {
       top: 10%;
       left: 32.5%;
       width: 8.75%;