@trionesdev/antd-mobile-base-react 0.0.2-beta.21 → 0.0.2-beta.22

package/dist/FormCell/styles.scss

@@ -1,103 +1,103 @@
-@use "../style/variable" as variable;
-
-$cellCls: 'triones-antm-form-cell';
-
-.#{$cellCls} {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  gap: 4Px;
-  align-items: center;
-
-  &-content {
-    flex: 1 auto;
-    display: flex;
-    align-items: center;
-    min-height: 20Px;
-  }
-
-  &-placeholder {
-    font-size: variable.$trionesFontSize;
-    color: variable.$trionesColorTextPlaceholder;
-    //width: 100%;
-  }
-
-  &-extra {
-    flex-shrink: 0;
-  }
-
-  &-arrow {
-    flex-shrink: 0;
-
-    .triones-antm-icon {
-      color: variable.$trionesColorTextPlaceholder;
-      font-size: variable.$trionesFontSize;
-    }
-  }
-
-  &-small {
-    min-height: 20Px;
-  }
-
-  &-medium {
-    //min-height: 32Px;
-  }
-
-  &-large {
-    min-height: 40Px;
-  }
-
-  &-start {
-    .#{$cellCls} {
-      &-content {
-        justify-content: flex-start;
-      }
-    }
-  }
-
-  &-center {
-    .#{$cellCls} {
-      &-content {
-        justify-content: center;
-      }
-    }
-  }
-
-  &-end {
-    .#{$cellCls} {
-      &-content {
-        justify-content: flex-end;
-      }
-    }
-  }
-
-  &-borderless {
-    border: 0;
-  }
-
-  &-outlined {
-    border-radius: variable.$trionesBorderRadius;
-    border: 1Px solid variable.$trionesBorderColor;
-    padding-inline: 4Px;
-    box-sizing: border-box;
-    min-height: variable.$trionesControlHeight;
-  }
-
-  &-filled {
-    border-radius: variable.$trionesBorderRadius;
-    background-color: variable.$trionesColorFillTertiary;
-    padding-inline: 4Px;
-    box-sizing: border-box;
-    border: 0;
-    min-height: variable.$trionesControlHeight;
-  }
-
-  &-underlined {
-    border-top: 0;
-    border-left: 0;
-    border-right: 0;
-    border-bottom: 1Px solid variable.$trionesBorderColor;
-    box-sizing: border-box;
-    min-height: variable.$trionesControlHeight;
-  }
-}
+@use "../style/variable" as variable;
+
+$cellCls: 'triones-antm-form-cell';
+
+.#{$cellCls} {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  gap: 4Px;
+  align-items: center;
+
+  &-content {
+    flex: 1 auto;
+    display: flex;
+    align-items: center;
+    min-height: 20Px;
+  }
+
+  &-placeholder {
+    font-size: variable.$trionesFontSize;
+    color: variable.$trionesColorTextPlaceholder;
+    //width: 100%;
+  }
+
+  &-extra {
+    flex-shrink: 0;
+  }
+
+  &-arrow {
+    flex-shrink: 0;
+
+    .triones-antm-icon {
+      color: variable.$trionesColorTextPlaceholder;
+      font-size: variable.$trionesFontSize;
+    }
+  }
+
+  &-small {
+    min-height: 20Px;
+  }
+
+  &-medium {
+    //min-height: 32Px;
+  }
+
+  &-large {
+    min-height: 40Px;
+  }
+
+  &-start {
+    .#{$cellCls} {
+      &-content {
+        justify-content: flex-start;
+      }
+    }
+  }
+
+  &-center {
+    .#{$cellCls} {
+      &-content {
+        justify-content: center;
+      }
+    }
+  }
+
+  &-end {
+    .#{$cellCls} {
+      &-content {
+        justify-content: flex-end;
+      }
+    }
+  }
+
+  &-borderless {
+    border: 0;
+  }
+
+  &-outlined {
+    border-radius: variable.$trionesBorderRadius;
+    border: 1Px solid variable.$trionesBorderColor;
+    padding-inline: 4Px;
+    box-sizing: border-box;
+    min-height: variable.$trionesControlHeight;
+  }
+
+  &-filled {
+    border-radius: variable.$trionesBorderRadius;
+    background-color: variable.$trionesColorFillTertiary;
+    padding-inline: 4Px;
+    box-sizing: border-box;
+    border: 0;
+    min-height: variable.$trionesControlHeight;
+  }
+
+  &-underlined {
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+    border-bottom: 1Px solid variable.$trionesBorderColor;
+    box-sizing: border-box;
+    min-height: variable.$trionesControlHeight;
+  }
+}

package/dist/Grid/style.scss

@@ -1,17 +1,17 @@
-$class-prefix-grid: 'triones-antm-grid';
-/* prettier-ignore */
-.#{$class-prefix-grid} {
-  --gap: 0;
-  --gap-horizontal: var(--gap);
-  --gap-vertical: var(--gap);
-
-  display: grid;
-  grid-gap: 10PX;
-  column-gap: var(--gap-horizontal);
-  row-gap: var(--gap-vertical);
-  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
-  align-items: stretch;
-  &-item {
-    grid-column-end: span var(--item-span);
-  }
-}
+$class-prefix-grid: 'triones-antm-grid';
+/* prettier-ignore */
+.#{$class-prefix-grid} {
+  --gap: 0;
+  --gap-horizontal: var(--gap);
+  --gap-vertical: var(--gap);
+
+  display: grid;
+  grid-gap: 10PX;
+  column-gap: var(--gap-horizontal);
+  row-gap: var(--gap-vertical);
+  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
+  align-items: stretch;
+  &-item {
+    grid-column-end: span var(--item-span);
+  }
+}

package/dist/Icon/demo/base.js

@@ -1,5 +1,5 @@
-/**
- * compact: true
+/**
+ * compact: true
  */
 import React from "react";
 import * as icons from "../../../../antd-mobile-icons-react";

package/dist/InputNumber/style.scss

@@ -1,100 +1,100 @@
-@use "../style/variable" as variable;
-
-$trionesInputNumberCls: 'triones-antm-input-number';
-
-$inputNumberBg: #F5F5F5;
-$inputSm: 24Px;
-$inputLg: 40Px;
-$inputNumberControlHeight: 28Px;
-
-.#{$trionesInputNumberCls} {
-  display: inline-flex;
-  align-items: stretch;
-  gap: 2Px;
-  border-radius: variable.$trionesBorderRadiusXs;
-  overflow: hidden;
-
-  &--block {
-    display: flex;
-    width: 100%;
-
-    .#{$trionesInputNumberCls}-input {
-      flex: 1 1 auto;
-      min-width: 0;
-    }
-  }
-
-  &-input {
-    display: flex;
-    align-items: stretch;
-    flex: 0 1 auto;
-    min-width: 36Px;
-    min-height: $inputNumberControlHeight;
-
-    input {
-      width: 100%;
-      min-width: 0;
-      height: 100%;
-      min-height: $inputNumberControlHeight;
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0 8Px;
-      border: 0;
-      border-radius: variable.$trionesBorderRadiusXs;
-      background-color: $inputNumberBg;
-      color: variable.$trionesColorText;
-      font-size: 14Px;
-      line-height: $inputNumberControlHeight;
-      text-align: center;
-      -moz-appearance: textfield;
-      appearance: textfield;
-
-      &::-webkit-outer-spin-button,
-      &::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-      }
-
-      &:focus {
-        outline: none;
-      }
-
-      &:disabled {
-        color: variable.$trionesColorTextDisabled;
-        cursor: not-allowed;
-      }
-    }
-  }
-
-  &-button {
-    cursor: pointer;
-    display: flex;
-    flex-shrink: 0;
-    font-size: 10Px;
-    height: $inputNumberControlHeight;
-    width: $inputNumberControlHeight;
-    justify-content: center;
-    align-items: center;
-    background-color: $inputNumberBg;
-    border-radius: variable.$trionesBorderRadiusXs;
-
-    &-sm {
-      width: $inputSm;
-      height: $inputSm;
-    }
-
-    &-lg {
-      width: $inputLg;
-      height: $inputLg;
-    }
-
-    &-disabled {
-      cursor: not-allowed;
-      color: variable.$trionesColorTextDisabled;
-    }
-
-    .triones-antm-icon {
-      font-size: 10Px !important;
-    }
-  }
-}
+@use "../style/variable" as variable;
+
+$trionesInputNumberCls: 'triones-antm-input-number';
+
+$inputNumberBg: #F5F5F5;
+$inputSm: 24Px;
+$inputLg: 40Px;
+$inputNumberControlHeight: 28Px;
+
+.#{$trionesInputNumberCls} {
+  display: inline-flex;
+  align-items: stretch;
+  gap: 2Px;
+  border-radius: variable.$trionesBorderRadiusXs;
+  overflow: hidden;
+
+  &--block {
+    display: flex;
+    width: 100%;
+
+    .#{$trionesInputNumberCls}-input {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+  }
+
+  &-input {
+    display: flex;
+    align-items: stretch;
+    flex: 0 1 auto;
+    min-width: 36Px;
+    min-height: $inputNumberControlHeight;
+
+    input {
+      width: 100%;
+      min-width: 0;
+      height: 100%;
+      min-height: $inputNumberControlHeight;
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0 8Px;
+      border: 0;
+      border-radius: variable.$trionesBorderRadiusXs;
+      background-color: $inputNumberBg;
+      color: variable.$trionesColorText;
+      font-size: 14Px;
+      line-height: $inputNumberControlHeight;
+      text-align: center;
+      -moz-appearance: textfield;
+      appearance: textfield;
+
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+
+      &:focus {
+        outline: none;
+      }
+
+      &:disabled {
+        color: variable.$trionesColorTextDisabled;
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  &-button {
+    cursor: pointer;
+    display: flex;
+    flex-shrink: 0;
+    font-size: 10Px;
+    height: $inputNumberControlHeight;
+    width: $inputNumberControlHeight;
+    justify-content: center;
+    align-items: center;
+    background-color: $inputNumberBg;
+    border-radius: variable.$trionesBorderRadiusXs;
+
+    &-sm {
+      width: $inputSm;
+      height: $inputSm;
+    }
+
+    &-lg {
+      width: $inputLg;
+      height: $inputLg;
+    }
+
+    &-disabled {
+      cursor: not-allowed;
+      color: variable.$trionesColorTextDisabled;
+    }
+
+    .triones-antm-icon {
+      font-size: 10Px !important;
+    }
+  }
+}

package/dist/Loading/style.scss

@@ -1,113 +1,113 @@
-@use "../style/variable";
-
-$dotLoadingCls: triones-antm-dot-loading;
-$spinLoadingCls: triones-antm-spin-loading;
-
-.#{$dotLoadingCls} {
-  display: inline-flex;
-  align-items: center;
-  height: 1em;
-  vertical-align: -0.125em;
-  /* 18 / 40 * 1em — horizontal gap between dots in antd-mobile viewBox */
-  gap: 0.45em;
-
-  &-default {
-    color: #9D9D9D;
-  }
-
-  &-primary {
-    color: variable.$trionesColorPrimary;
-  }
-
-  &-white {
-    color: white;
-  }
-
-  &-dot {
-    display: block;
-    flex-shrink: 0;
-    /* 8×8 in a 40-unit-tall viewBox, height = 1em */
-    width: 0.2em;
-    height: 0.2em;
-    background: currentColor;
-    //mask-image: var(--dotLoadingMask);
-    //-webkit-mask-image: var(--dotLoadingMask);
-    mask-repeat: no-repeat;
-    -webkit-mask-repeat: no-repeat;
-    mask-size: 100% 100%;
-    -webkit-mask-size: 100% 100%;
-    mask-position: center;
-    -webkit-mask-position: center;
-    animation: triones-antm-dot-loading-bounce 2s infinite linear;
-    animation-fill-mode: backwards;
-  }
-
-  &-dot-0 {
-    animation-delay: 0s;
-  }
-
-  &-dot-1 {
-    animation-delay: 0.2s;
-  }
-
-  &-dot-2 {
-    animation-delay: 0.4s;
-  }
-}
-
-/* Mirrors antd-mobile SMIL: values 16;6;26;16;16, keyTimes 0;0.1;0.3;0.4;1, viewBox height 40 */
-@keyframes triones-antm-dot-loading-bounce {
-  0%,
-  40%,
-  100% {
-    transform: translateY(0);
-  }
-
-  10% {
-    transform: translateY(-0.25em);
-  }
-
-  30% {
-    transform: translateY(0.25em);
-  }
-}
-
-
-
-
-.#{$spinLoadingCls} {
-  --size: 32Px;
-  width: var(--size);
-  height: var(--size);
-
-  &-default{
-    color: #9D9D9D;
-  }
-  &-primary{
-    color: variable.$trionesColorPrimary;
-  }
-  &-white{
-    color: #ffffff;
-  }
-
-  &-spin {
-    //color: var(--color);
-    display: inline-block;
-    height: 100%;
-    width: 100%;
-    background: currentColor;
-    mask-image: var(--maskImage);
-    -webkit-mask-image: var(--maskImage);
-    animation: adm-spin-loading-rotate 2s infinite linear;
-  }
-
-}
-
-@keyframes adm-spin-loading-rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+@use "../style/variable";
+
+$dotLoadingCls: triones-antm-dot-loading;
+$spinLoadingCls: triones-antm-spin-loading;
+
+.#{$dotLoadingCls} {
+  display: inline-flex;
+  align-items: center;
+  height: 1em;
+  vertical-align: -0.125em;
+  /* 18 / 40 * 1em — horizontal gap between dots in antd-mobile viewBox */
+  gap: 0.45em;
+
+  &-default {
+    color: #9D9D9D;
+  }
+
+  &-primary {
+    color: variable.$trionesColorPrimary;
+  }
+
+  &-white {
+    color: white;
+  }
+
+  &-dot {
+    display: block;
+    flex-shrink: 0;
+    /* 8×8 in a 40-unit-tall viewBox, height = 1em */
+    width: 0.2em;
+    height: 0.2em;
+    background: currentColor;
+    //mask-image: var(--dotLoadingMask);
+    //-webkit-mask-image: var(--dotLoadingMask);
+    mask-repeat: no-repeat;
+    -webkit-mask-repeat: no-repeat;
+    mask-size: 100% 100%;
+    -webkit-mask-size: 100% 100%;
+    mask-position: center;
+    -webkit-mask-position: center;
+    animation: triones-antm-dot-loading-bounce 2s infinite linear;
+    animation-fill-mode: backwards;
+  }
+
+  &-dot-0 {
+    animation-delay: 0s;
+  }
+
+  &-dot-1 {
+    animation-delay: 0.2s;
+  }
+
+  &-dot-2 {
+    animation-delay: 0.4s;
+  }
+}
+
+/* Mirrors antd-mobile SMIL: values 16;6;26;16;16, keyTimes 0;0.1;0.3;0.4;1, viewBox height 40 */
+@keyframes triones-antm-dot-loading-bounce {
+  0%,
+  40%,
+  100% {
+    transform: translateY(0);
+  }
+
+  10% {
+    transform: translateY(-0.25em);
+  }
+
+  30% {
+    transform: translateY(0.25em);
+  }
+}
+
+
+
+
+.#{$spinLoadingCls} {
+  --size: 32Px;
+  width: var(--size);
+  height: var(--size);
+
+  &-default{
+    color: #9D9D9D;
+  }
+  &-primary{
+    color: variable.$trionesColorPrimary;
+  }
+  &-white{
+    color: #ffffff;
+  }
+
+  &-spin {
+    //color: var(--color);
+    display: inline-block;
+    height: 100%;
+    width: 100%;
+    background: currentColor;
+    mask-image: var(--maskImage);
+    -webkit-mask-image: var(--maskImage);
+    animation: adm-spin-loading-rotate 2s infinite linear;
+  }
+
+}
+
+@keyframes adm-spin-loading-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}