@sugarat/theme 0.5.12-beta.0 → 0.5.12-beta.1

package/src/components/Carousel.vue

@@ -153,15 +153,13 @@ onUnmounted(() => {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .sugar-carousel {
   position: relative;
-  overflow: hidden; // simplified
-  &:hover {
-    .sugar-carousel__arrow {
-      display: inline-flex;
-    }
-  }
+  overflow: hidden;
+}
+.sugar-carousel:hover .sugar-carousel__arrow {
+  display: inline-flex;
 }
 
 .sugar-carousel__container {
@@ -186,10 +184,9 @@ onUnmounted(() => {
   background-color: transparent;
   padding: 12px 4px;
   cursor: pointer;
-
-  &.is-active button {
-    opacity: 1;
-  }
+}
+.sugar-carousel__indicator.is-active button {
+  opacity: 1;
 }
 
 .sugar-carousel__button {
@@ -197,13 +194,13 @@ onUnmounted(() => {
   opacity: 0.48;
   width: 30px;
   height: 2px;
-  background-color: #d3dce6; // element-plus default like
+  background-color: #d3dce6;
   border: none;
   outline: none;
   padding: 0;
   margin: 0;
   cursor: pointer;
-  transition: .3s;
+  transition: 0.3s;
 }
 
 .sugar-carousel__arrow {
@@ -214,9 +211,9 @@ onUnmounted(() => {
   height: 36px;
   width: 36px;
   cursor: pointer;
-  transition: .3s;
+  transition: 0.3s;
   border-radius: 50%;
-  background-color: rgba(31, 45, 61, .11);
+  background-color: rgba(31, 45, 61, 0.11);
   color: #fff;
   position: absolute;
   top: 50%;
@@ -227,19 +224,17 @@ onUnmounted(() => {
   display: inline-flex;
   justify-content: center;
   align-items: center;
-
-  &:hover {
-    background-color: rgba(31, 45, 61, .23);
-  }
-
-  &--left {
-    left: 16px;
-  }
-
-  &--right {
-    right: 16px;
-  }
 }
+.sugar-carousel__arrow:hover {
+  background-color: rgba(31, 45, 61, 0.23);
+}
+.sugar-carousel__arrow--left {
+  left: 16px;
+}
+.sugar-carousel__arrow--right {
+  right: 16px;
+}
+
 .carousel-arrow-left-enter-from,
 .carousel-arrow-left-leave-to {
   opacity: 0;

package/src/components/CarouselItem.vue

@@ -107,7 +107,7 @@ onUnmounted(() => {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .sugar-carousel__item {
   position: absolute;
   top: 0;
@@ -118,37 +118,22 @@ onUnmounted(() => {
   overflow: hidden;
   z-index: 0;
   transition: transform 0.4s ease-in-out;
-  background-color: transparent; // Default
+  background-color: transparent;
 }
 
 .sugar-carousel__item--card {
   width: 50%;
-  left: 25%; // Center it initially?
-  // Actually if we use translateX 50% or -50%, it's relative to item width.
-  // Element Plus Card:
-  // Item width is 50%.
-  // Active item is at translateX(containerWidth/4).
-  // Prev item at translateX(0).
-  // Next item at translateX(containerWidth/2).
-
-  // My simplified CSS logic:
-  // left: 25% (centers the 50% width item in container)
-  // active: translate(0) -> centered
-  // prev: translate(-50% of item) -> -25% of container? No, -50% of 50% is -25% width.
-  // left 25% - 25% = 0% (Left aligned)
-  // next: translate(50% of item) -> +25% of container.
-  // left 25% + 25% = 50% (Right aligned)
-  // This works!
+  left: 25%;
 }
 
 .sugar-carousel__mask {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    background-color: #fff;
-    opacity: 0.24;
-    transition: .2s;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: #fff;
+  opacity: 0.24;
+  transition: 0.2s;
 }
 </style>

package/src/components/CommentArtalk.vue

@@ -69,7 +69,7 @@ watch(isDark, () => {
   <div v-if="open" ref="el" class="artalk-container" />
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .artalk-container {
   --at-color-main: var(--vp-c-brand-2);
 }

package/src/components/Image.vue

@@ -17,18 +17,17 @@ defineProps({
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .sugar-image {
   position: relative;
   display: inline-block;
   overflow: hidden;
-
-  &__inner {
-    width: 100%;
-    height: 100%;
-    vertical-align: top;
-    object-fit: inherit;
-    cursor: pointer;
-  }
+}
+.sugar-image__inner {
+  width: 100%;
+  height: 100%;
+  vertical-align: top;
+  object-fit: inherit;
+  cursor: pointer;
 }
 </style>

package/src/components/ImageViewer.vue

@@ -249,7 +249,7 @@ function handleKeydown(e: KeyboardEvent) {
   </Teleport>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .sugar-image-viewer__wrapper {
   position: fixed;
   top: 0;
@@ -268,7 +268,7 @@ function handleKeydown(e: KeyboardEvent) {
   height: 100%;
   top: 0;
   left: 0;
-  opacity: .5;
+  opacity: 0.5;
   background: #000;
 }
 
@@ -279,7 +279,7 @@ function handleKeydown(e: KeyboardEvent) {
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  opacity: .8;
+  opacity: 0.8;
   cursor: pointer;
   box-sizing: border-box;
   user-select: none;
@@ -288,17 +288,15 @@ function handleKeydown(e: KeyboardEvent) {
   width: 44px;
   height: 44px;
   font-size: 24px;
-
-  &:hover {
-    border-color: #fff;
-    background-color: #909399;
-  }
-
-  &.is-disabled {
-    cursor: not-allowed;
-    opacity: .3;
-    background-color: #606266;
-  }
+}
+.sugar-image-viewer__btn:hover {
+  border-color: #fff;
+  background-color: #909399;
+}
+.sugar-image-viewer__btn.is-disabled {
+  cursor: not-allowed;
+  opacity: 0.3;
+  background-color: #606266;
 }
 
 .sugar-image-viewer__close {
@@ -333,35 +331,32 @@ function handleKeydown(e: KeyboardEvent) {
   display: flex;
   align-items: center;
   justify-content: center;
-  opacity: .8;
+  opacity: 0.8;
   box-sizing: border-box;
   user-select: none;
-
-  &__inner {
-    width: 100%;
-    height: 100%;
-    text-align: justify;
-    cursor: default;
-    font-size: 23px;
-    color: #fff;
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    gap: 12px;
-
-    svg {
-        cursor: pointer;
-    }
-  }
-
-  &__divider {
-    display: inline-block;
-    width: 1px;
-    height: 18px;
-    margin: 0 10px;
-    background: hsla(0,0%,100%,.5);
-    vertical-align: middle;
-  }
+}
+.sugar-image-viewer__actions__inner {
+  width: 100%;
+  height: 100%;
+  text-align: justify;
+  cursor: default;
+  font-size: 23px;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  gap: 12px;
+}
+.sugar-image-viewer__actions__inner svg {
+  cursor: pointer;
+}
+.sugar-image-viewer__actions__divider {
+  display: inline-block;
+  width: 1px;
+  height: 18px;
+  margin: 0 10px;
+  background: hsla(0, 0%, 100%, 0.5);
+  vertical-align: middle;
 }
 
 .sugar-image-viewer__canvas {
@@ -379,28 +374,34 @@ function handleKeydown(e: KeyboardEvent) {
   user-select: none;
   pointer-events: auto;
   cursor: grab;
-  transition: transform .3s;
-
-  &:active {
-    cursor: grabbing;
-  }
+  transition: transform 0.3s;
+}
+.sugar-image-viewer__img:active {
+  cursor: grabbing;
 }
 
 .viewer-fade-enter-active {
-  animation: viewer-fade-in .3s;
+  animation: viewer-fade-in 0.3s;
 }
 
 .viewer-fade-leave-active {
-  animation: viewer-fade-out .3s;
+  animation: viewer-fade-out 0.3s;
 }
 
 @keyframes viewer-fade-in {
-  0% { opacity: 0; }
-  100% { opacity: 1; }
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
-
 @keyframes viewer-fade-out {
-  0% { opacity: 1; }
-  100% { opacity: 0; }
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
 }
 </style>