init

uni_modules/nutui-uni/components/formitem/index.scss

@@ -0,0 +1,129 @@
+@import "../cell/index";
+
+.nut-theme-dark {
+  .nut-form-item {
+    &__body {
+      &__slots {
+        :deep(.nut-input) {
+          color: $dark-color;
+          background: transparent;
+        }
+      }
+    }
+  }
+}
+
+.nut-form-item {
+  display: flex;
+
+  &::before {
+    position: absolute;
+    right: 16px;
+    bottom: 0;
+    left: 16px;
+    box-sizing: border-box;
+    pointer-events: none;
+    content: "";
+    transform: scaleX(0);
+  }
+
+  &.error {
+    &.line {
+      &::before {
+        border-bottom: 1px solid $form-item-error-line-color;
+        transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+        transform: scaleX(1);
+      }
+    }
+  }
+
+  &__label {
+    display: inline-block !important;
+    flex: none !important;
+    width: $form-item-label-width;
+    margin-right: $form-item-label-margin-right;
+    font-size: $form-item-label-font-size;
+    font-weight: normal;
+    text-align: $form-item-label-text-align;
+    word-wrap: break-word;
+
+    &:deep(.nut-cell__title) {
+      min-width: auto;
+    }
+
+    &.required {
+      &::before {
+        margin-right: $form-item-required-margin-right;
+        color: $form-item-required-color;
+        content: '*';
+      }
+
+      &.nut-form-item__star-right {
+        &::before {
+          content: none;
+        }
+
+        &::after {
+          margin-left: $form-item-required-margin-right;
+          color: $form-item-required-color;
+          content: '*';
+        }
+      }
+    }
+  }
+
+  &__body {
+    display: flex !important;
+    flex: 1;
+    flex-direction: column;
+
+    &__slots {
+      text-align: $form-item-body-slots-text-align;
+
+      :deep(.nut-input) {
+        width: 100%;
+        font-size: $form-item-body-font-size;
+        color: $black;
+        text-align: $form-item-body-input-text-align;
+        text-decoration: none;
+        background: transparent;
+        border: 0;
+        outline: 0 none;
+      }
+
+      :deep(.nut-range-container) {
+        min-height: 24px;
+      }
+
+      :deep(.nut-textarea) {
+        padding: 0 !important;
+
+        .nut-textarea__textarea {
+          text-align: $form-item-body-input-text-align;
+        }
+      }
+    }
+
+    &__tips {
+      font-size: $form-item-tip-font-size;
+      color: $form-item-error-message-color;
+      text-align: $form-item-tip-text-align;
+    }
+  }
+
+  &__right {
+    --nut-form-item-label-text-align: right;
+  }
+
+  &__top {
+    flex-direction: column;
+
+    .nut-form-item__label {
+      box-sizing: border-box;
+      display: block;
+      width: 100%;
+      padding-right: 24px;
+      padding-bottom: 5px;
+    }
+  }
+}