bxs-tools-ui 3.2.0 → 3.3.0

package/packages/product-info/index.less

@@ -0,0 +1,271 @@
+@import 'color.less';
+
+.bxt-product-info {
+  padding: 10px;
+
+  & .bxt-custom-result {
+    margin-bottom: 9px;
+    background: white;
+    font-size: 15px;
+    color: var(--bxt-text-primary);
+    border-radius: 6px;
+
+    & .bxt-custom-result-title {
+      position: relative;
+      padding: 15px;
+
+      & .bxt-desc {
+        & .icon-arrows_up,
+        & .icon-arrows_down {
+          color: var(--bxt-text-assist);
+        }
+      }
+
+      & .van-switch {
+        position: absolute;
+        top: 50%;
+        right: 15px;
+        transform: translateY(-50%);
+        vertical-align: middle;
+      }
+    }
+
+    & .bxt-custom-result-tips {
+      padding: 0 15px 15px;
+      font-size: 14px;
+      line-height: normal;
+      color: var(--bxt-text-patch);
+    }
+  }
+
+  & .bxt-product-info-form {
+    background: white;
+    margin-bottom: 9px;
+    border-radius: 6px;
+    overflow: hidden;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    & .van-cell::after {
+      border-bottom: 0;
+    }
+
+    &.bxt-product-info-form-follow {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      margin-bottom: 0;
+
+      & + .bxt-product-info-form {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+    }
+
+    & .bx-form-item__inner {
+      & .bx-form-item__content {
+        & input {
+          text-align: right;
+        }
+
+        & .bx-input-icon {
+          & .bx-icon,
+          & .icon-edit2 {
+            color: var(--bxt-text-minor) !important;
+          }
+        }
+
+        & .bxt-titile-content {
+          font-size: 15px;
+        }
+      }
+    }
+
+    & .bxt-ins-form-radio-btn {
+      & .bx-form-item__inner {
+        & .bx-form-item__content {
+          margin-right: -5px;
+
+          & .bx-radio-warp {
+            padding: 10px 5px;
+          }
+
+          & input {
+            text-align: right;
+          }
+        }
+      }
+    }
+
+    & .bxt-ins-form-radio {
+      text-align: left;
+
+      & .van-radio-group {
+        width: 100%;
+
+        & .van-radio {
+          width: 100%;
+          align-items: flex-start;
+
+          & .icon-choose_none_line {
+            color: var(--bxt-text-patch);
+            vertical-align: top;
+          }
+
+          & .icon-multiple_choice {
+            color: var(--bxt-primary);
+            vertical-align: top;
+          }
+
+
+          & .van-radio__icon--disabled {
+            & .icon-choose_none_line,
+            & .icon-multiple_choice {
+              color: var(--bxt-text-disabled);
+            }
+          }
+
+          & .bx-radio-warp {
+            padding-left: 0;
+            padding-right: 0;
+            margin-right: 15px;
+            text-align: left;
+
+            & .bx-radio-icon-warp {
+              vertical-align: middle;
+            }
+          }
+
+          & .bxt-ins-form-radio-content {
+            display: inline-block;
+
+            & .bxt-ins-form-radio--code {
+              line-height: 20px;
+              margin-right: 4px;
+              padding: 0 4px;
+              border-radius: 4px;
+              color: #ff703e;
+              border: 1px solid #ff703e;
+              font-size: 12px;
+              transform: scale(0.8334);
+              transform-origin: left center;
+              vertical-align: top;
+            }
+
+            & .bxt-ins-form-radio--tx {
+              display: inline-block;
+              width: auto;
+              line-height: 20px;
+              max-width: 15rem;
+              font-size: 14px;
+              vertical-align: top;
+
+              &.bxt-ins-form-radio--width {
+                max-width: 12rem;
+              }
+            }
+
+            & .bxt-ins-form-radio--tag {
+              margin-left: 9px;
+              color: #f90;
+              font-size: 12px;
+              line-height: 20px;
+              vertical-align: top;
+            }
+
+            & .bxt-ins-form-radio--sale-tag {
+              display: inline-block;
+              margin-left: 4px;
+              padding: 0 2px;
+              color: #fff;
+              border: 1px solid rgb(158, 158, 158);
+              background-color: rgb(158, 158, 158);
+              border-radius: 2px;
+              font-size: 12px;
+              transform-origin: left center;
+              font-weight: normal;
+              line-height: 16px;
+              vertical-align: top;
+            }
+          }
+        }
+
+        & .van-radio:not(:first-child) {
+          margin-top: 6px;
+        }
+      }
+    }
+
+    & .bxt-ins-unit-tips {
+      position: absolute;
+      display: inline-block;
+      right: 50px;
+      margin-top: -12px;
+      line-height: normal;
+      text-align: right;
+      z-index: 1;
+
+      & em {
+        font-style: normal;
+        position: absolute;
+        top: -2px;
+        left: 50%;
+        display: inline-block;
+        width: 6px;
+        height: 6px;
+        background: #666;
+        transform: translateX(-50%) rotate(45deg);
+        content: ' ';
+      }
+
+      & span {
+        position: relative;
+        display: inline-block;
+        padding: 1px 12px;
+        line-height: normal;
+        background: #666;
+        color: white;
+        font-size: 12px;
+        border-radius: 4px;
+      }
+    }
+
+    & .bxt-ins-recommend-values {
+      margin-top: -2px;
+      padding: 0 15px 18px 15px;
+      text-align: right;
+      white-space: nowrap;
+      overflow: auto;
+
+      & span {
+        display: inline-block;
+        margin-top: 5px;
+        margin-left: 6px;
+        padding: 4px 5px;
+        line-height: 100%;
+        color: #666;
+        background: #f8f8f8;
+        border: 1px solid #ccc;
+        border-radius: 50px;
+        font-size: 12px;
+      }
+    }
+
+
+    & .van-field-unit {
+      position: relative;
+      z-index: 1;
+    }
+
+    & .bxt-form-item-label-note {
+      padding: 0 15px 15px 15px;
+      font-size: 12px;
+      color: var(--bxt-text-assist);
+
+      & em {
+        font-style: normal;
+      }
+    }
+  }
+}