morya-ui 0.3.5 → 0.3.7

package/dist/components/Slider/styles.css

@@ -1,211 +1,211 @@
-/* —— Form: Slider —— */
-.m-slider-field {
-    display: grid;
-    gap: var(--m-space-2);
-    width: 100%;
-}
-
-.m-slider-field__label {
-    color: var(--m-color-text);
-    font-family: var(--m-font-sans);
-    font-size: var(--m-font-size-md);
-    font-weight: 600;
-}
-
-.m-slider-field__help {
-    color: var(--m-color-text-muted);
-    font-size: var(--m-font-size-xs);
-}
-
-.m-slider-field__help--invalid {
-    color: var(--m-color-danger);
-}
-
-.m-slider {
-    --m-slider-track-height: 0.35rem;
-    --m-slider-thumb-size: 1rem;
-    --m-slider-vertical-height: 12rem;
-    --m-slider-vertical-width: 2.5rem;
-    --m-slider-tooltip-offset: 1.5rem;
-    --m-slider-marks-inset-block: 0.9rem;
-    --m-slider-marks-inset-inline: 0.5rem;
-    align-items: center;
-    display: flex;
-    min-height: var(--m-slider-thumb-size);
-    position: relative;
-    width: 100%;
-}
-
-.m-slider--range {
-    height: var(--m-slider-thumb-size);
-}
-
-.m-slider__input {
-    -webkit-appearance: none;
-    appearance: none;
-    background: transparent;
-    cursor: pointer;
-    height: var(--m-slider-thumb-size);
-    margin: 0;
-    width: 100%;
-}
-
-.m-slider--range .m-slider__input {
-    left: 0;
-    pointer-events: none;
-    position: absolute;
-    top: 0;
-}
-
-.m-slider--range .m-slider__input::-webkit-slider-thumb {
-    pointer-events: auto;
-}
-
-.m-slider--range .m-slider__input::-moz-range-thumb {
-    pointer-events: auto;
-}
-
-/* range 模式下 end 输入框绘制在上层，其滑轨会盖住 start 的滚顶点，因此隐藏它的滑轨 */
-.m-slider--range .m-slider__input--end::-webkit-slider-runnable-track {
-    background: transparent;
-}
-
-.m-slider--range .m-slider__input--end::-moz-range-track {
-    background: transparent;
-}
-
-.m-slider__input::-webkit-slider-runnable-track {
-    background: color-mix(
-        in srgb,
-        var(--m-color-text-muted) 28%,
-        var(--m-color-surface)
-    );
-    border-radius: var(--m-radius-full);
-    height: var(--m-slider-track-height);
-}
-
-.m-slider__input::-moz-range-track {
-    background: color-mix(
-        in srgb,
-        var(--m-color-text-muted) 28%,
-        var(--m-color-surface)
-    );
-    border-radius: var(--m-radius-full);
-    height: var(--m-slider-track-height);
-}
-
-.m-slider__input::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    background: var(--m-color-primary);
-    border: var(--m-border-width) solid var(--m-color-surface);
-    border-radius: 50%;
-    box-shadow: 0 0 0 var(--m-border-width)
-        color-mix(in srgb, var(--m-color-primary) 40%, transparent);
-    height: var(--m-slider-thumb-size);
-    margin-top: calc(
-        (var(--m-slider-track-height) - var(--m-slider-thumb-size)) / 2
-    );
-    transition: box-shadow var(--m-motion-fast) var(--m-motion-ease);
-    width: var(--m-slider-thumb-size);
-}
-
-.m-slider__input::-moz-range-thumb {
-    background: var(--m-color-primary);
-    border: var(--m-border-width) solid var(--m-color-surface);
-    border-radius: 50%;
-    box-shadow: 0 0 0 var(--m-border-width)
-        color-mix(in srgb, var(--m-color-primary) 40%, transparent);
-    height: var(--m-slider-thumb-size);
-    transition: box-shadow var(--m-motion-fast) var(--m-motion-ease);
-    width: var(--m-slider-thumb-size);
-}
-
-.m-slider__input:focus-visible {
-    outline: none;
-}
-
-.m-slider__input:focus-visible::-webkit-slider-thumb {
-    box-shadow: var(--m-focus-shadow);
-    outline: none;
-}
-
-.m-slider__input:focus-visible::-moz-range-thumb {
-    box-shadow: var(--m-focus-shadow);
-    outline: none;
-}
-
-.m-slider--disabled {
-    cursor: not-allowed;
-    opacity: var(--m-opacity-disabled);
-    pointer-events: none;
-}
-
-.m-slider--vertical {
-    flex-direction: column;
-    height: var(--m-slider-vertical-height);
-    min-height: var(--m-slider-vertical-height);
-    width: var(--m-slider-vertical-width);
-}
-
-.m-slider--vertical .m-slider__input {
-    direction: rtl;
-    height: 100%;
-    width: var(--m-slider-thumb-size);
-    writing-mode: vertical-lr;
-}
-
-.m-slider__tooltip {
-    background: var(--m-color-text);
-    border-radius: var(--m-radius-sm);
-    color: var(--m-color-surface);
-    font-family: var(--m-font-sans);
-    font-size: var(--m-font-size-xs);
-    left: 50%;
-    padding: var(--m-slider-tooltip-padding-block) var(--m-slider-tooltip-padding-inline);
-    position: absolute;
-    top: calc(-1 * var(--m-slider-tooltip-offset));
-    transform: translateX(-50%);
-    white-space: nowrap;
-}
-
-.m-slider__marks {
-    inset: var(--m-slider-marks-inset-block) var(--m-slider-marks-inset-inline) auto;
-    position: absolute;
-}
-
-.m-slider--vertical .m-slider__marks {
-    inset: var(--m-space-2) auto var(--m-space-2) var(--m-space-6);
-}
-
-.m-slider__mark {
-    color: var(--m-color-text-muted);
-    font-family: var(--m-font-sans);
-    font-size: var(--m-font-size-xs);
-    position: absolute;
-    transform: translateX(-50%);
-}
-
-.m-slider--vertical .m-slider__mark {
-    transform: translateY(50%);
-}
-
-.m-slider--small {
-    --m-slider-thumb-size: 0.85rem;
-}
-
-.m-slider--large {
-    --m-slider-thumb-size: 1.15rem;
-}
-
-.m-slider--invalid .m-slider__input {
-    accent-color: var(--m-color-danger);
-}
-
-.m-slider--invalid .m-slider__input:focus-visible::-webkit-slider-thumb {
-    box-shadow: var(--m-focus-shadow-danger);
-}
-
-.m-slider--invalid .m-slider__input:focus-visible::-moz-range-thumb {
-    box-shadow: var(--m-focus-shadow-danger);
-}
+/* —— Form: Slider —— */
+.m-slider-field {
+    display: grid;
+    gap: var(--m-space-2);
+    width: 100%;
+}
+
+.m-slider-field__label {
+    color: var(--m-color-text);
+    font-family: var(--m-font-sans);
+    font-size: var(--m-font-size-md);
+    font-weight: 600;
+}
+
+.m-slider-field__help {
+    color: var(--m-color-text-muted);
+    font-size: var(--m-font-size-xs);
+}
+
+.m-slider-field__help--invalid {
+    color: var(--m-color-danger);
+}
+
+.m-slider {
+    --m-slider-track-height: 0.35rem;
+    --m-slider-thumb-size: 1rem;
+    --m-slider-vertical-height: 12rem;
+    --m-slider-vertical-width: 2.5rem;
+    --m-slider-tooltip-offset: 1.5rem;
+    --m-slider-marks-inset-block: 0.9rem;
+    --m-slider-marks-inset-inline: 0.5rem;
+    align-items: center;
+    display: flex;
+    min-height: var(--m-slider-thumb-size);
+    position: relative;
+    width: 100%;
+}
+
+.m-slider--range {
+    height: var(--m-slider-thumb-size);
+}
+
+.m-slider__input {
+    -webkit-appearance: none;
+    appearance: none;
+    background: transparent;
+    cursor: pointer;
+    height: var(--m-slider-thumb-size);
+    margin: 0;
+    width: 100%;
+}
+
+.m-slider--range .m-slider__input {
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+}
+
+.m-slider--range .m-slider__input::-webkit-slider-thumb {
+    pointer-events: auto;
+}
+
+.m-slider--range .m-slider__input::-moz-range-thumb {
+    pointer-events: auto;
+}
+
+/* range 模式下 end 输入框绘制在上层，其滑轨会盖住 start 的滚顶点，因此隐藏它的滑轨 */
+.m-slider--range .m-slider__input--end::-webkit-slider-runnable-track {
+    background: transparent;
+}
+
+.m-slider--range .m-slider__input--end::-moz-range-track {
+    background: transparent;
+}
+
+.m-slider__input::-webkit-slider-runnable-track {
+    background: color-mix(
+        in srgb,
+        var(--m-color-text-muted) 28%,
+        var(--m-color-surface)
+    );
+    border-radius: var(--m-radius-full);
+    height: var(--m-slider-track-height);
+}
+
+.m-slider__input::-moz-range-track {
+    background: color-mix(
+        in srgb,
+        var(--m-color-text-muted) 28%,
+        var(--m-color-surface)
+    );
+    border-radius: var(--m-radius-full);
+    height: var(--m-slider-track-height);
+}
+
+.m-slider__input::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    background: var(--m-color-primary);
+    border: var(--m-border-width) solid var(--m-color-surface);
+    border-radius: 50%;
+    box-shadow: 0 0 0 var(--m-border-width)
+        color-mix(in srgb, var(--m-color-primary) 40%, transparent);
+    height: var(--m-slider-thumb-size);
+    margin-top: calc(
+        (var(--m-slider-track-height) - var(--m-slider-thumb-size)) / 2
+    );
+    transition: box-shadow var(--m-motion-fast) var(--m-motion-ease);
+    width: var(--m-slider-thumb-size);
+}
+
+.m-slider__input::-moz-range-thumb {
+    background: var(--m-color-primary);
+    border: var(--m-border-width) solid var(--m-color-surface);
+    border-radius: 50%;
+    box-shadow: 0 0 0 var(--m-border-width)
+        color-mix(in srgb, var(--m-color-primary) 40%, transparent);
+    height: var(--m-slider-thumb-size);
+    transition: box-shadow var(--m-motion-fast) var(--m-motion-ease);
+    width: var(--m-slider-thumb-size);
+}
+
+.m-slider__input:focus-visible {
+    outline: none;
+}
+
+.m-slider__input:focus-visible::-webkit-slider-thumb {
+    box-shadow: var(--m-focus-shadow);
+    outline: none;
+}
+
+.m-slider__input:focus-visible::-moz-range-thumb {
+    box-shadow: var(--m-focus-shadow);
+    outline: none;
+}
+
+.m-slider--disabled {
+    cursor: not-allowed;
+    opacity: var(--m-opacity-disabled);
+    pointer-events: none;
+}
+
+.m-slider--vertical {
+    flex-direction: column;
+    height: var(--m-slider-vertical-height);
+    min-height: var(--m-slider-vertical-height);
+    width: var(--m-slider-vertical-width);
+}
+
+.m-slider--vertical .m-slider__input {
+    direction: rtl;
+    height: 100%;
+    width: var(--m-slider-thumb-size);
+    writing-mode: vertical-lr;
+}
+
+.m-slider__tooltip {
+    background: var(--m-color-text);
+    border-radius: var(--m-radius-sm);
+    color: var(--m-color-surface);
+    font-family: var(--m-font-sans);
+    font-size: var(--m-font-size-xs);
+    left: 50%;
+    padding: var(--m-slider-tooltip-padding-block) var(--m-slider-tooltip-padding-inline);
+    position: absolute;
+    top: calc(-1 * var(--m-slider-tooltip-offset));
+    transform: translateX(-50%);
+    white-space: nowrap;
+}
+
+.m-slider__marks {
+    inset: var(--m-slider-marks-inset-block) var(--m-slider-marks-inset-inline) auto;
+    position: absolute;
+}
+
+.m-slider--vertical .m-slider__marks {
+    inset: var(--m-space-2) auto var(--m-space-2) var(--m-space-6);
+}
+
+.m-slider__mark {
+    color: var(--m-color-text-muted);
+    font-family: var(--m-font-sans);
+    font-size: var(--m-font-size-xs);
+    position: absolute;
+    transform: translateX(-50%);
+}
+
+.m-slider--vertical .m-slider__mark {
+    transform: translateY(50%);
+}
+
+.m-slider--small {
+    --m-slider-thumb-size: 0.85rem;
+}
+
+.m-slider--large {
+    --m-slider-thumb-size: 1.15rem;
+}
+
+.m-slider--invalid .m-slider__input {
+    accent-color: var(--m-color-danger);
+}
+
+.m-slider--invalid .m-slider__input:focus-visible::-webkit-slider-thumb {
+    box-shadow: var(--m-focus-shadow-danger);
+}
+
+.m-slider--invalid .m-slider__input:focus-visible::-moz-range-thumb {
+    box-shadow: var(--m-focus-shadow-danger);
+}