@cyberpunk-vue/theme-chalk 1.14.0 → 1.14.2

package/src/components/input-number.scss

@@ -1,9 +1,9 @@
-// CpInputNumber 组件样式
-// 赛博朋克/机甲风格
-
-@use '../common/var' as *;
-@use '../mixins/mixins' as *;
-
+// CpInputNumber 组件样式
+// 赛博朋克/机甲风格
+
+@use '../common/var' as *;
+@use '../mixins/mixins' as *;
+
 @include b(input-number) {
     position: relative;
     display: inline-flex;
@@ -55,83 +55,83 @@
         --cp-input-number-icon-size: clamp(10px, calc(var(--cp-input-number-height) * 0.4), 20px);
         --cp-input-number-right-icon-size: clamp(8px, calc(var(--cp-input-number-height) * 0.32), 16px);
     }
-
-    // ===== 控制按钮位置 =====
-    @include m(controls-both) {
-        .cp-input-number__inner {
-            text-align: center;
-        }
-    }
-
+
+    // ===== 控制按钮位置 =====
+    @include m(controls-both) {
+        .cp-input-number__inner {
+            text-align: center;
+        }
+    }
+
     @include m(controls-right) {
         .cp-input-number__inner {
             padding-right: calc(var(--cp-input-number-right-control-width) + var(--cp-input-number-input-padding));
         }
 
         .cp-input-number__controls {
-            position: absolute;
-            right: 0;
-            top: 0;
+            position: absolute;
+            right: 0;
+            top: 0;
             bottom: 0;
             display: flex;
             flex-direction: column;
             width: var(--cp-input-number-right-control-width);
             border-left: 1px solid var(--cp-border);
         }
-
-        .cp-input-number__increase,
-        .cp-input-number__decrease {
-            flex: 1;
-            width: 100%;
-            height: 50%;
-            border: none;
-            clip-path: none;
+
+        .cp-input-number__increase,
+        .cp-input-number__decrease {
+            flex: 1;
+            width: 100%;
+            height: 50%;
+            border: none;
+            clip-path: none;
 
             svg {
                 width: var(--cp-input-number-right-icon-size);
                 height: var(--cp-input-number-right-icon-size);
             }
         }
-
-        .cp-input-number__increase {
-            border-bottom: 1px solid var(--cp-border);
-        }
-    }
-
-    // ===== 状态 =====
-    @include when(disabled) {
-        cursor: not-allowed;
-        opacity: 0.5;
-
-        .cp-input-number__inner,
-        .cp-input-number__increase,
-        .cp-input-number__decrease {
-            cursor: not-allowed;
-        }
-    }
-
-    @include when(focused) {
-        .cp-input-number__inner {
-            border-color: var(--cp-color-primary);
-            box-shadow: 0 0 10px var(--cp-color-primary-light), inset 0 0 5px var(--cp-color-primary-light);
-        }
-    }
-
-    @include when(without-controls) {
-        .cp-input-number__inner {
-            text-align: left;
-        }
-    }
-
-    // ===== 自定义颜色 =====
+
+        .cp-input-number__increase {
+            border-bottom: 1px solid var(--cp-border);
+        }
+    }
+
+    // ===== 状态 =====
+    @include when(disabled) {
+        cursor: not-allowed;
+        opacity: 0.5;
+
+        .cp-input-number__inner,
+        .cp-input-number__increase,
+        .cp-input-number__decrease {
+            cursor: not-allowed;
+        }
+    }
+
+    @include when(focused) {
+        .cp-input-number__inner {
+            border-color: var(--cp-color-primary);
+            box-shadow: 0 0 10px var(--cp-color-primary-light), inset 0 0 5px var(--cp-color-primary-light);
+        }
+    }
+
+    @include when(without-controls) {
+        .cp-input-number__inner {
+            text-align: left;
+        }
+    }
+
+    // ===== 自定义颜色 =====
     @include when(custom-color) {
         &.is-focused .cp-input-number__inner {
             border-color: var(--cp-input-number-custom-color);
             box-shadow: 0 0 10px var(--cp-input-number-custom-color-light), inset 0 0 5px var(--cp-input-number-custom-color-light);
-        }
-
-        .cp-input-number__increase:hover:not(.is-disabled),
-        .cp-input-number__decrease:hover:not(.is-disabled) {
+        }
+
+        .cp-input-number__increase:hover:not(.is-disabled),
+        .cp-input-number__decrease:hover:not(.is-disabled) {
             color: var(--cp-input-number-custom-color);
         }
     }
@@ -201,46 +201,46 @@
         min-width: 0;
         height: 100%;
         padding: 0 var(--cp-input-number-input-padding);
-        border: 1px solid var(--cp-border);
-        background: transparent;
-        color: var(--cp-text-primary);
-        font-family: var(--cp-font-family-mono);
-        font-size: inherit;
-        text-align: center;
-        outline: none;
+        border: 1px solid var(--cp-border);
+        background: transparent;
+        color: var(--cp-text-primary);
+        font-family: var(--cp-font-family-mono);
+        font-size: inherit;
+        text-align: center;
+        outline: none;
         transition: all 0.2s ease;
 
         // 机甲风切角
         clip-path: polygon(var(--cp-input-number-cut-size) 0, 100% 0, 100% calc(100% - var(--cp-input-number-cut-size)), calc(100% - var(--cp-input-number-cut-size)) 100%, 0 100%, 0 var(--cp-input-number-cut-size));
-
-        &::placeholder {
-            color: var(--cp-text-muted);
-        }
-
-        // 移除默认箭头
-        &::-webkit-outer-spin-button,
-        &::-webkit-inner-spin-button {
-            -webkit-appearance: none;
-            appearance: none;
-            margin: 0;
-        }
-
-        -moz-appearance: textfield;
-        appearance: textfield;
-    }
-
+
+        &::placeholder {
+            color: var(--cp-text-muted);
+        }
+
+        // 移除默认箭头
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            appearance: none;
+            margin: 0;
+        }
+
+        -moz-appearance: textfield;
+        appearance: textfield;
+    }
+
     @include e(increase) {
-        display: flex;
-        align-items: center;
-        justify-content: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         width: var(--cp-input-number-control-width);
-        height: 100%;
-        padding: 0;
-        border: 1px solid var(--cp-border);
-        border-left: none;
-        background: var(--cp-bg-elevated);
-        color: var(--cp-text-secondary);
-        cursor: pointer;
+        height: 100%;
+        padding: 0;
+        border: 1px solid var(--cp-border);
+        border-left: none;
+        background: var(--cp-bg-elevated);
+        color: var(--cp-text-secondary);
+        cursor: pointer;
         transition: all 0.2s ease;
 
         // 右侧切角
@@ -250,30 +250,30 @@
             width: var(--cp-input-number-icon-size);
             height: var(--cp-input-number-icon-size);
         }
-
-        &:hover:not(.is-disabled) {
-            color: var(--cp-color-primary);
-            background: color-mix(in srgb, var(--cp-color-primary) 10%, transparent);
-        }
-
-        &.is-disabled {
-            cursor: not-allowed;
-            opacity: 0.5;
-        }
-    }
-
+
+        &:hover:not(.is-disabled) {
+            color: var(--cp-color-primary);
+            background: color-mix(in srgb, var(--cp-color-primary) 10%, transparent);
+        }
+
+        &.is-disabled {
+            cursor: not-allowed;
+            opacity: 0.5;
+        }
+    }
+
     @include e(decrease) {
-        display: flex;
-        align-items: center;
-        justify-content: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         width: var(--cp-input-number-control-width);
-        height: 100%;
-        padding: 0;
-        border: 1px solid var(--cp-border);
-        border-right: none;
-        background: var(--cp-bg-elevated);
-        color: var(--cp-text-secondary);
-        cursor: pointer;
+        height: 100%;
+        padding: 0;
+        border: 1px solid var(--cp-border);
+        border-right: none;
+        background: var(--cp-bg-elevated);
+        color: var(--cp-text-secondary);
+        cursor: pointer;
         transition: all 0.2s ease;
 
         // 左侧切角
@@ -283,15 +283,15 @@
             width: var(--cp-input-number-icon-size);
             height: var(--cp-input-number-icon-size);
         }
-
-        &:hover:not(.is-disabled) {
-            color: var(--cp-color-primary);
-            background: color-mix(in srgb, var(--cp-color-primary) 10%, transparent);
-        }
-
-        &.is-disabled {
-            cursor: not-allowed;
-            opacity: 0.5;
-        }
-    }
-}
+
+        &:hover:not(.is-disabled) {
+            color: var(--cp-color-primary);
+            background: color-mix(in srgb, var(--cp-color-primary) 10%, transparent);
+        }
+
+        &.is-disabled {
+            cursor: not-allowed;
+            opacity: 0.5;
+        }
+    }
+}