@trionesdev/antd-mobile-react 0.0.2-beta.19 → 0.0.2-beta.20

package/dist/FloatButton/style.scss

@@ -1,123 +1,123 @@
-@use "../style/variable" as variable;
-
-$floatButtonCls: "triones-antm-float-button";
-$floatButtonGroupCls: "triones-antm-float-button-group";
-
-$floatButtonSize: 48Px;
-$floatButtonShadow: 0 6Px 16Px 0 rgba(0, 0, 0, 0.08),
-  0 3Px 6Px -4Px rgba(0, 0, 0, 0.12), 0 9Px 28Px 8Px rgba(0, 0, 0, 0.05);
-
-.#{$floatButtonCls} {
-  position: fixed;
-  display: inline-flex;
-  flex-shrink: 0;
-  box-sizing: border-box;
-
-  &--embedded {
-    position: relative;
-    right: auto;
-    bottom: auto;
-    z-index: auto;
-  }
-
-  &-body {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8Px;
-    min-width: $floatButtonSize;
-    min-height: $floatButtonSize;
-    border: none;
-    border-radius: 50%;
-    cursor: pointer;
-    font-size: 20Px;
-    line-height: 1;
-    color: rgba(0, 0, 0, 0.88);
-    background: #fff;
-    box-shadow: $floatButtonShadow;
-    transition: color 0.2s, background 0.2s, box-shadow 0.2s;
-    -webkit-tap-highlight-color: transparent;
-    text-decoration: none;
-
-    &:active {
-      filter: brightness(0.95);
-    }
-  }
-
-  &--shape-square &-body {
-    border-radius: variable.$trionesBorderRadius;
-  }
-
-  &--has-content &-body {
-    min-height: $floatButtonSize;
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &--type-primary &-body {
-    color: #fff;
-    background: variable.$trionesColorPrimary;
-  }
-
-  &-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &-content {
-    font-size: variable.$trionesFontSizeSm;
-    font-weight: 500;
-    white-space: nowrap;
-  }
-}
-
-.#{$floatButtonGroupCls} {
-  position: fixed;
-  z-index: 100;
-  bottom: calc(24Px + env(safe-area-inset-bottom, 0px));
-  display: flex;
-  gap: 12Px;
-  align-items: flex-end;
-  box-sizing: border-box;
-
-  &--placement {
-    &-top {
-      flex-direction: column;
-    }
-    &-bottom {
-      flex-direction: column;
-    }
-    &-left {
-      flex-direction: row;
-    }
-    &-right {
-      flex-direction: row;
-    }
-  }
-
-  &--menu {
-    align-items: center;
-  }
-
-  &-list {
-    display: flex;
-    flex-direction: column;
-    gap: 12Px;
-    align-items: flex-end;
-
-    &--hidden {
-      display: none;
-    }
-  }
-
-  &--placement-left &-list,
-  &--placement-right &-list {
-    flex-direction: column;
-  }
-}
+@use "../style/variable" as variable;
+
+$floatButtonCls: "triones-antm-float-button";
+$floatButtonGroupCls: "triones-antm-float-button-group";
+
+$floatButtonSize: 48Px;
+$floatButtonShadow: 0 6Px 16Px 0 rgba(0, 0, 0, 0.08),
+  0 3Px 6Px -4Px rgba(0, 0, 0, 0.12), 0 9Px 28Px 8Px rgba(0, 0, 0, 0.05);
+
+.#{$floatButtonCls} {
+  position: fixed;
+  display: inline-flex;
+  flex-shrink: 0;
+  box-sizing: border-box;
+
+  &--embedded {
+    position: relative;
+    right: auto;
+    bottom: auto;
+    z-index: auto;
+  }
+
+  &-body {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8Px;
+    min-width: $floatButtonSize;
+    min-height: $floatButtonSize;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    font-size: 20Px;
+    line-height: 1;
+    color: rgba(0, 0, 0, 0.88);
+    background: #fff;
+    box-shadow: $floatButtonShadow;
+    transition: color 0.2s, background 0.2s, box-shadow 0.2s;
+    -webkit-tap-highlight-color: transparent;
+    text-decoration: none;
+
+    &:active {
+      filter: brightness(0.95);
+    }
+  }
+
+  &--shape-square &-body {
+    border-radius: variable.$trionesBorderRadius;
+  }
+
+  &--has-content &-body {
+    min-height: $floatButtonSize;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &--type-primary &-body {
+    color: #fff;
+    background: variable.$trionesColorPrimary;
+  }
+
+  &-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &-content {
+    font-size: variable.$trionesFontSizeSm;
+    font-weight: 500;
+    white-space: nowrap;
+  }
+}
+
+.#{$floatButtonGroupCls} {
+  position: fixed;
+  z-index: 100;
+  bottom: calc(24Px + env(safe-area-inset-bottom, 0px));
+  display: flex;
+  gap: 12Px;
+  align-items: flex-end;
+  box-sizing: border-box;
+
+  &--placement {
+    &-top {
+      flex-direction: column;
+    }
+    &-bottom {
+      flex-direction: column;
+    }
+    &-left {
+      flex-direction: row;
+    }
+    &-right {
+      flex-direction: row;
+    }
+  }
+
+  &--menu {
+    align-items: center;
+  }
+
+  &-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12Px;
+    align-items: flex-end;
+
+    &--hidden {
+      display: none;
+    }
+  }
+
+  &--placement-left &-list,
+  &--placement-right &-list {
+    flex-direction: column;
+  }
+}

package/dist/Footer/demo/base.js

@@ -1,5 +1,5 @@
-/**
- * compact: true
+/**
+ * compact: true
  */
 import React from 'react';
 import { DemoBlock } from "../../DemoBlock";

package/dist/Form/style.scss

@@ -1,106 +1,106 @@
-@use "../style/variable" as variable;
-
-$cls-prefix-form: 'triones-antm-form';
-$cls-prefix-form-item: 'triones-antm-form-item';
-
-.#{$cls-prefix-form} {
-}
-
-.#{$cls-prefix-form-item} {
-  line-height: 1.5;
-
-  &-label {
-    font-size: variable.$trionesFontSize;
-    color: #6F6F6F;
-
-
-    &-wrapper {
-      height: 100%;
-      // height: 1.47059em;
-
-      //display: flex;
-      //align-items: center;
-    }
-    &-required-mark {
-      display: inline-block;
-      color: variable.$trionesColorError;
-      width: 8Px;
-      margin-left: -8Px;
-    }
-    &-left {
-    }
-
-    &-right {
-      text-align: right;
-    }
-
-    //&-required {
-    //  display: inline-block;
-    //  color: red;
-    //  width: 8Px;
-    //  margin-left: -8Px;
-    //}
-
-  }
-
-  &-content {
-    padding-block: 12Px;
-
-    &-right {
-      text-align: right;
-    }
-
-    .#{$cls-prefix-form-item} {
-      &-error {
-        font-size: variable.$trionesFontSizeSm;
-        color: variable.$trionesColorError;
-      }
-    }
-  }
-
-  &-horizontal {
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-
-    .#{$cls-prefix-form-item} {
-      &-label {
-        padding-block: 12Px;
-        flex-shrink: 1;
-        min-width: 0;
-      }
-
-      &-content {
-        flex: auto 1;
-        flex-shrink: 1;
-        min-width: 0;
-      }
-    }
-
-    &.#{$cls-prefix-form-item} {
-      &-start {
-        align-items: flex-start;
-      }
-
-      &-center {
-        align-items: center;
-      }
-    }
-  }
-
-  &-vertical {
-    .#{$cls-prefix-form-item} {
-      &-label {
-        margin-bottom: 4Px;
-      }
-      &-content {
-        padding-block-end: 12Px;
-      }
-    }
-
-  }
-
-  &-hidden {
-    display: none;
-  }
-}
+@use "../style/variable" as variable;
+
+$cls-prefix-form: 'triones-antm-form';
+$cls-prefix-form-item: 'triones-antm-form-item';
+
+.#{$cls-prefix-form} {
+}
+
+.#{$cls-prefix-form-item} {
+  line-height: 1.5;
+
+  &-label {
+    font-size: variable.$trionesFontSize;
+    color: #6F6F6F;
+
+
+    &-wrapper {
+      height: 100%;
+      // height: 1.47059em;
+
+      //display: flex;
+      //align-items: center;
+    }
+    &-required-mark {
+      display: inline-block;
+      color: variable.$trionesColorError;
+      width: 8Px;
+      margin-left: -8Px;
+    }
+    &-left {
+    }
+
+    &-right {
+      text-align: right;
+    }
+
+    //&-required {
+    //  display: inline-block;
+    //  color: red;
+    //  width: 8Px;
+    //  margin-left: -8Px;
+    //}
+
+  }
+
+  &-content {
+    padding-block: 12Px;
+
+    &-right {
+      text-align: right;
+    }
+
+    .#{$cls-prefix-form-item} {
+      &-error {
+        font-size: variable.$trionesFontSizeSm;
+        color: variable.$trionesColorError;
+      }
+    }
+  }
+
+  &-horizontal {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+
+    .#{$cls-prefix-form-item} {
+      &-label {
+        padding-block: 12Px;
+        flex-shrink: 1;
+        min-width: 0;
+      }
+
+      &-content {
+        flex: auto 1;
+        flex-shrink: 1;
+        min-width: 0;
+      }
+    }
+
+    &.#{$cls-prefix-form-item} {
+      &-start {
+        align-items: flex-start;
+      }
+
+      &-center {
+        align-items: center;
+      }
+    }
+  }
+
+  &-vertical {
+    .#{$cls-prefix-form-item} {
+      &-label {
+        margin-bottom: 4Px;
+      }
+      &-content {
+        padding-block-end: 12Px;
+      }
+    }
+
+  }
+
+  &-hidden {
+    display: none;
+  }
+}

package/dist/Grid/demo/base.js

@@ -1,5 +1,5 @@
-/**
- * compact: true
+/**
+ * compact: true
  */
 import React from 'react';
 import { DemoBlock } from "../../DemoBlock";

package/dist/Grid/demo/base.scss

@@ -1,7 +1,7 @@
-.grid-demo-item-block {
-  border: solid 1px #999;
-  background: #f5f5f5;
-  text-align: center;
-  color: #999;
-  height: 100%;
-}
+.grid-demo-item-block {
+  border: solid 1px #999;
+  background: #f5f5f5;
+  text-align: center;
+  color: #999;
+  height: 100%;
+}

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/Image/demo/base.js

@@ -1,5 +1,5 @@
-/**
- * compact: true
+/**
+ * compact: true
  */
 import { DemoBlock } from "../../DemoBlock";
 import React from 'react';

package/dist/Image/demo/base.scss

@@ -1,4 +1,4 @@
-.imagesContainer {
-  --triones-antm-image-width: 90px;
-  --triones-antm-image-height: 60px;
-}
+.imagesContainer {
+  --triones-antm-image-width: 90px;
+  --triones-antm-image-height: 60px;
+}

package/dist/Image/style.scss

@@ -1,30 +1,30 @@
-$class-prefix-image: 'triones-antm-image';
-
-.#{$class-prefix-image} {
-  overflow: hidden;
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  position: relative;
-  &-img {
-    height: 100%;
-    width: 100%;
-    object-fit: cover;
-  }
-  &-tip {
-    position: relative;
-    background-color: var(--triones-antm-color-fill-content);
-    height: 100%;
-    min-height: 24px;
-    min-width: 24px;
-    > svg {
-      width: 24px;
-      height: 24px;
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      color: var(--triones-antm-color-weak);
-    }
-  }
-}
+$class-prefix-image: 'triones-antm-image';
+
+.#{$class-prefix-image} {
+  overflow: hidden;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  &-img {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
+  &-tip {
+    position: relative;
+    background-color: var(--triones-antm-color-fill-content);
+    height: 100%;
+    min-height: 24px;
+    min-width: 24px;
+    > svg {
+      width: 24px;
+      height: 24px;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      color: var(--triones-antm-color-weak);
+    }
+  }
+}

package/dist/ImagesPreview/style.scss

@@ -1,34 +1,34 @@
-$imagePreviewCls: 'triones-antm-image-preview';
-
-.#{$imagePreviewCls} {
-  height: 100%;
-  width: 100%;
-  position: relative;
-  background-color: rgba(0, 0, 0, 0.8);
-
-  &-head {
-    position: fixed;
-    top: 50Px;
-    left: 0;
-    right: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: white;
-    font-size: 14Px;
-    z-index: 1000;
-  }
-
-  &-content {
-    height: 100%;
-    width: 100%;
-    :global{
-      .triones-antm-image-img{
-        height: auto!important;
-      }
-    }
-  }
-
-  &-foot {
-  }
-}
+$imagePreviewCls: 'triones-antm-image-preview';
+
+.#{$imagePreviewCls} {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  background-color: rgba(0, 0, 0, 0.8);
+
+  &-head {
+    position: fixed;
+    top: 50Px;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    font-size: 14Px;
+    z-index: 1000;
+  }
+
+  &-content {
+    height: 100%;
+    width: 100%;
+    :global{
+      .triones-antm-image-img{
+        height: auto!important;
+      }
+    }
+  }
+
+  &-foot {
+  }
+}