@trionesdev/antd-mobile-base-react 0.0.2-beta.15 → 0.0.2-beta.17

package/dist/Radio/style.scss

@@ -1,141 +1,154 @@
-@use "../style/variable" as variable;
-
-$checkboxDisabledColor: rgba(0, 0, 0, 0.25) !default;
-
-$class-prefix-radio: 'triones-antm-radio';
-
-.#{$class-prefix-radio}-wrapper {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 8Px;
-
-  .#{$class-prefix-radio} {
-    &-fake {
-      width: 20PX;
-      height: 20PX;
-
-      .triones-antm-icon {
-        //position: absolute;
-        font-size: variable.$trionesFontSize;
-      }
-
-      &-checked {
-        height: 100%;
-        width: 100%;
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        background-color: variable.$trionesColorPrimary;
-        color: white;
-        border-radius: 50vh;
-        box-sizing: border-box;
-        overflow: hidden;
-        .triones-antm-icon{
-          font-size: 14Px;
-        }
-      }
-
-      &-unchecked {
-        height: 100%;
-        width: 100%;
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        border-radius: 50vh;
-        border: 1PX solid variable.$trionesBorderColor;
-        box-sizing: border-box;
-      }
-
-    }
-
-
-
-    &-label {
-      flex: 1 auto;
-    }
-  }
-
-  &.#{$class-prefix-radio} {
-    &-disabled {
-      color: $checkboxDisabledColor;
-      pointer-events: none;
-
-      .#{$class-prefix-radio}-fake-checked {
-        background-color: $checkboxDisabledColor;
-      }
-    }
-    &-block {
-      width: 100%;
-    }
-  }
-
-}
-
-
-.#{$class-prefix-radio}-group {
-  display: flex;
-  gap: 8Px;
-  &-horizontal{
-    flex-direction: row;
-  }
-  &-vertical{
-    flex-direction: column;
-  }
-}
-
-.#{$class-prefix-radio}-button-group {
-  display: flex;
-}
-
-.#{$class-prefix-radio}-button-wrapper {
-  display: inline-flex;
-  position: relative;
-  border-top: 1PX solid variable.$trionesBorderColor;
-  border-bottom: 1PX solid variable.$trionesBorderColor;
-  border-right: 1PX solid variable.$trionesBorderColor;
-
-  &:first-child {
-    border-left: 1PX solid variable.$trionesBorderColor;
-    border-top-left-radius: variable.$trionesBorderRadius;
-    border-bottom-left-radius: variable.$trionesBorderRadius;
-  }
-
-  &:last-child {
-    border-right: 1PX solid variable.$trionesBorderColor;
-    border-top-right-radius: variable.$trionesBorderRadius;
-    border-bottom-right-radius: variable.$trionesBorderRadius;
-  }
-
-  &-checked {
-    border-top: 1PX solid variable.$trionesColorPrimary;
-    border-bottom: 1PX solid variable.$trionesColorPrimary;
-    color: variable.$trionesColorPrimary;
-
-    &:first-child {
-      border: 1PX solid variable.$trionesColorPrimary;
-    }
-
-    &:not(:first-child) {
-      &::before {
-        content: " ";
-        width: 1PX;
-        background-color: variable.$trionesColorPrimary;
-        position: absolute;
-        inset-block-start: -1Px;
-        inset-inline-start: -1Px;
-        height: 100%;
-        padding-block: 1Px;
-      }
-
-      border-right: 1PX solid variable.$trionesColorPrimary;
-    }
-  }
-
-  .#{$class-prefix-radio}-button {
-    cursor: pointer;
-    display: inline-flex;
-    padding: 8Px 12Px;
-
-  }
-}
+@use "../style/variable" as variable;
+
+$checkboxDisabledColor: rgba(0, 0, 0, 0.25) !default;
+
+$class-prefix-radio: 'triones-antm-radio';
+
+.#{$class-prefix-radio}-wrapper {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8Px;
+
+  .#{$class-prefix-radio} {
+    flex-shrink: 0;
+    &-fake {
+      width: 20PX;
+      height: 20PX;
+      line-height: 0;
+      box-sizing: border-box;
+      overflow: hidden;
+
+      .triones-antm-icon {
+        //position: absolute;
+        font-size: variable.$trionesFontSize;
+      }
+
+      &-checked {
+        height: 100%;
+        width: 100%;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        background-color: variable.$trionesColorPrimary;
+        color: white;
+        border-radius: 50vh;
+        box-sizing: border-box;
+        overflow: hidden;
+
+        .triones-antm-icon {
+          font-size: 14Px;
+          line-height: 1;
+          display: block;
+        }
+      }
+
+      &-unchecked {
+        height: 100%;
+        width: 100%;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50vh;
+        border: 1PX solid variable.$trionesBorderColor;
+        box-sizing: border-box;
+      }
+
+    }
+
+
+    &-label {
+      flex: 1 auto;
+    }
+  }
+
+  &.#{$class-prefix-radio} {
+    &-disabled {
+      color: $checkboxDisabledColor;
+      pointer-events: none;
+
+      .#{$class-prefix-radio}-fake-checked {
+        background-color: $checkboxDisabledColor;
+      }
+    }
+
+    &-block {
+      width: 100%;
+    }
+  }
+
+}
+
+
+.#{$class-prefix-radio}-group {
+
+  gap: 8Px;
+
+  &-horizontal {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    vertical-align: middle;
+  }
+
+  &-vertical {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.#{$class-prefix-radio}-button-group {
+  display: flex;
+}
+
+.#{$class-prefix-radio}-button-wrapper {
+  display: inline-flex;
+  position: relative;
+  border-top: 1PX solid variable.$trionesBorderColor;
+  border-bottom: 1PX solid variable.$trionesBorderColor;
+  border-right: 1PX solid variable.$trionesBorderColor;
+
+  &:first-child {
+    border-left: 1PX solid variable.$trionesBorderColor;
+    border-top-left-radius: variable.$trionesBorderRadius;
+    border-bottom-left-radius: variable.$trionesBorderRadius;
+  }
+
+  &:last-child {
+    border-right: 1PX solid variable.$trionesBorderColor;
+    border-top-right-radius: variable.$trionesBorderRadius;
+    border-bottom-right-radius: variable.$trionesBorderRadius;
+  }
+
+  &-checked {
+    border-top: 1PX solid variable.$trionesColorPrimary;
+    border-bottom: 1PX solid variable.$trionesColorPrimary;
+    color: variable.$trionesColorPrimary;
+
+    &:first-child {
+      border: 1PX solid variable.$trionesColorPrimary;
+    }
+
+    &:not(:first-child) {
+      &::before {
+        content: " ";
+        width: 1PX;
+        background-color: variable.$trionesColorPrimary;
+        position: absolute;
+        inset-block-start: -1Px;
+        inset-inline-start: -1Px;
+        height: 100%;
+        padding-block: 1Px;
+      }
+
+      border-right: 1PX solid variable.$trionesColorPrimary;
+    }
+  }
+
+  .#{$class-prefix-radio}-button {
+    cursor: pointer;
+    display: inline-flex;
+    padding: 8Px 12Px;
+
+  }
+}

package/dist/Rate/style.scss

@@ -1,37 +1,37 @@
-$rateCls: 'triones-antm-rate';
-
-.#{$rateCls} {
-  display: inline-flex;
-  align-items: center;
-
-  &-star-wrapper {
-    position: relative;
-    padding: 0 2px;
-    cursor: pointer;
-  }
-
-  &-star {
-    font-size: 20px;
-    color: var(--inactive-color, #e8e8e8);
-    transition: color 0.3s;
-
-    &-active {
-      color: var(--active-color, #ffb400);
-    }
-  }
-
-  &-star-half-item {
-    position: absolute;
-    left: 2px;
-    top: 0;
-    width: 42%;
-    height: 100%;
-    overflow: hidden;
-  }
-
-  &-readonly {
-    .#{$rateCls}-star-wrapper {
-      cursor: default;
-    }
-  }
-}
+$rateCls: 'triones-antm-rate';
+
+.#{$rateCls} {
+  display: inline-flex;
+  align-items: center;
+
+  &-star-wrapper {
+    position: relative;
+    padding: 0 2px;
+    cursor: pointer;
+  }
+
+  &-star {
+    font-size: 20px;
+    color: var(--inactive-color, #e8e8e8);
+    transition: color 0.3s;
+
+    &-active {
+      color: var(--active-color, #ffb400);
+    }
+  }
+
+  &-star-half-item {
+    position: absolute;
+    left: 2px;
+    top: 0;
+    width: 42%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  &-readonly {
+    .#{$rateCls}-star-wrapper {
+      cursor: default;
+    }
+  }
+}

package/dist/Result/demo/base.js

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

package/dist/Result/style.scss

@@ -1,73 +1,73 @@
-$class-prefix-result: 'triones-antm-result';
-/* prettier-ignore */
-.#{$class-prefix-result} {
-  padding: 32PX 12PX;
-  background-color: var(--triones-antm-color-background);
-
-  &-icon {
-    box-sizing: border-box;
-    width: 64PX;
-    height: 64PX;
-    margin: 0 auto 20PX auto;
-    padding: 6PX;
-
-    .antd-mobile-icon {
-      font-size: 52PX;
-    }
-  }
-
-  &-title {
-    color: var(--triones-antm-color-text);
-    font-size: var(--triones-antm-font-size-10);
-    line-height: 1.4;
-    text-align: center;
-  }
-
-  &-description {
-    margin-top: 8PX;
-    color: var(--triones-antm-color-weak);
-    font-size: var(--triones-antm-font-size-main);
-    line-height: 1.4;
-    text-align: center;
-  }
-}
-
-.#{$class-prefix-result}-success {
-  .#{$class-prefix-result}-icon {
-    .antd-mobile-icon {
-      color: var(--triones-antm-color-primary);
-    }
-  }
-}
-
-.#{$class-prefix-result}-error {
-  .#{$class-prefix-result}-icon {
-    .antd-mobile-icon {
-      color: var(--triones-antm-color-danger);
-    }
-  }
-}
-
-.#{$class-prefix-result}-info {
-  .#{$class-prefix-result}-icon {
-    .antd-mobile-icon {
-      color: var(--triones-antm-color-primary);
-    }
-  }
-}
-
-.#{$class-prefix-result}-waiting {
-  .#{$class-prefix-result}-icon {
-    .antd-mobile-icon {
-      color: var(--triones-antm-color-success);
-    }
-  }
-}
-
-.#{$class-prefix-result}-warning {
-  .#{$class-prefix-result}-icon {
-    .antd-mobile-icon {
-      color: var(--triones-antm-color-warning);
-    }
-  }
-}
+$class-prefix-result: 'triones-antm-result';
+/* prettier-ignore */
+.#{$class-prefix-result} {
+  padding: 32PX 12PX;
+  background-color: var(--triones-antm-color-background);
+
+  &-icon {
+    box-sizing: border-box;
+    width: 64PX;
+    height: 64PX;
+    margin: 0 auto 20PX auto;
+    padding: 6PX;
+
+    .antd-mobile-icon {
+      font-size: 52PX;
+    }
+  }
+
+  &-title {
+    color: var(--triones-antm-color-text);
+    font-size: var(--triones-antm-font-size-10);
+    line-height: 1.4;
+    text-align: center;
+  }
+
+  &-description {
+    margin-top: 8PX;
+    color: var(--triones-antm-color-weak);
+    font-size: var(--triones-antm-font-size-main);
+    line-height: 1.4;
+    text-align: center;
+  }
+}
+
+.#{$class-prefix-result}-success {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-primary);
+    }
+  }
+}
+
+.#{$class-prefix-result}-error {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-danger);
+    }
+  }
+}
+
+.#{$class-prefix-result}-info {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-primary);
+    }
+  }
+}
+
+.#{$class-prefix-result}-waiting {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-success);
+    }
+  }
+}
+
+.#{$class-prefix-result}-warning {
+  .#{$class-prefix-result}-icon {
+    .antd-mobile-icon {
+      color: var(--triones-antm-color-warning);
+    }
+  }
+}

package/dist/SafeArea/style.scss

@@ -1,20 +1,20 @@
-@use "../style/variable" as variable;
-
-$class-prefix-safe-area: 'triones-antm-safe-area';
-
-$safeAreaMultiple : variable.$trionesSafeAreaMultiple;
-
-.#{$class-prefix-safe-area} {
-  height: 100%;
-  display: block;
-  width: 100%;
-  box-sizing: border-box;
-
-  &-position-top {
-    padding-top: calc(env(safe-area-inset-top) * $safeAreaMultiple);
-  }
-
-  &-position-bottom {
-    padding-bottom: calc(env(safe-area-inset-bottom) * $safeAreaMultiple);
-  }
-}
+@use "../style/variable" as variable;
+
+$class-prefix-safe-area: 'triones-antm-safe-area';
+
+$safeAreaMultiple : variable.$trionesSafeAreaMultiple;
+
+.#{$class-prefix-safe-area} {
+  height: 100%;
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+
+  &-position-top {
+    padding-top: calc(env(safe-area-inset-top) * $safeAreaMultiple);
+  }
+
+  &-position-bottom {
+    padding-bottom: calc(env(safe-area-inset-bottom) * $safeAreaMultiple);
+  }
+}

package/dist/Scaffold/style.scss

@@ -1,17 +1,17 @@
-@use "../style/variable" as variable;
-
-
-$trionesScaffoldCls: 'triones-antm-scaffold';
-
-.#{$trionesScaffoldCls} {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  background-color: variable.$trionesColorBgScaffold;
-
-  &-body {
-    flex: 1 auto;
-    overflow: hidden;
-  }
-}
+@use "../style/variable" as variable;
+
+
+$trionesScaffoldCls: 'triones-antm-scaffold';
+
+.#{$trionesScaffoldCls} {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: variable.$trionesColorBgScaffold;
+
+  &-body {
+    flex: 1 auto;
+    overflow: hidden;
+  }
+}