feat: 基础组件最外层元素 flex -> inline-flex

jdf2e · Sep 25, 2023 · e3c5002 · e3c5002
1 parent 9cd9bf3
commit e3c5002
Show file tree

Hide file tree

Showing 15 changed files with 27 additions and 22 deletions.
diff --git a/packages/nutui-taro-demo/project.private.config.json b/packages/nutui-taro-demo/project.private.config.json
@@ -65,4 +65,4 @@
   },
   "projectname": "vue4.x",
   "libVersion": "2.27.1"
-}
+}
diff --git a/packages/nutui-taro-demo/src/dentry/pages/checkbox/index.vue b/packages/nutui-taro-demo/src/dentry/pages/checkbox/index.vue
@@ -222,13 +222,7 @@ export default {
 .demo-check {
   margin-right: 10px;
 }
-.nut-checkbox-group {
-  display: flex;
-  flex-wrap: wrap;
-}
 .nut-checkbox {
-  display: flex;
-  margin-right: 20px;
   .nut-checkbox__label {
     margin-left: 10px;
   }

diff --git a/src/packages/__VUE/checkbox/demo.vue b/src/packages/__VUE/checkbox/demo.vue
@@ -295,15 +295,7 @@ export default defineComponent({
   margin-right: 10px;
 }
 
-.nut-checkbox-group {
-  display: flex;
-  flex-wrap: wrap;
-}
-
 .nut-checkbox {
-  display: flex;
-  margin-right: 20px;
-
   .nut-checkbox__label {
     margin-left: 10px;
   }

diff --git a/src/packages/__VUE/checkbox/doc.en-US.md b/src/packages/__VUE/checkbox/doc.en-US.md
@@ -480,3 +480,5 @@ The component provides the following CSS variables, which can be used to customi
 | --nut-checkbox-button-font-color-active   | _var(--nut-primary-color)_ |
 | --nut-checkbox-button-border-color-active | _var(--nut-primary-color)_ |
 | --nut-checkbox-button-background-active   | _var(--nut-primary-color)_ |
+| --nut-checkbox-display                    | _inline-flex_              |
+| --nut-checkbox-margin-right               | _20px_                     |
diff --git a/src/packages/__VUE/checkbox/doc.md b/src/packages/__VUE/checkbox/doc.md
@@ -480,3 +480,5 @@ app.use(CheckboxGroup);
 | --nut-checkbox-button-font-color-active   | _var(--nut-primary-color)_ |
 | --nut-checkbox-button-border-color-active | _var(--nut-primary-color)_ |
 | --nut-checkbox-button-background-active   | _var(--nut-primary-color)_ |
+| --nut-checkbox-display                    | _inline-flex_              |
+| --nut-checkbox-margin-right               | _20px_                     |
diff --git a/src/packages/__VUE/checkbox/doc.taro.md b/src/packages/__VUE/checkbox/doc.taro.md
@@ -440,3 +440,5 @@ app.use(CheckboxGroup);
 | --nut-checkbox-button-font-color-active   | _var(--nut-primary-color)_ |
 | --nut-checkbox-button-border-color-active | _var(--nut-primary-color)_ |
 | --nut-checkbox-button-background-active   | _var(--nut-primary-color)_ |
+| --nut-checkbox-display                    | _inline-flex_              |
+| --nut-checkbox-margin-right               | _20px_                     |
diff --git a/src/packages/__VUE/checkbox/index.scss b/src/packages/__VUE/checkbox/index.scss
@@ -17,8 +17,9 @@
   }
 }
 .nut-checkbox {
-  display: flex;
+  display: $checkbox-display;
   align-items: center;
+  margin-right: $checkbox-margin-right;
   &--reverse {
     flex-direction: row-reverse;
     .nut-checkbox__label {

diff --git a/src/packages/__VUE/checkboxgroup/index.scss b/src/packages/__VUE/checkboxgroup/index.scss
@@ -0,0 +1,4 @@
+.nut-checkbox-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+}
diff --git a/src/packages/__VUE/inputnumber/doc.en-US.md b/src/packages/__VUE/inputnumber/doc.en-US.md
@@ -294,4 +294,4 @@ The component provides the following CSS variables, which can be used to customi
 | --nut-inputnumber-height                 | _auto_                     |
 | --nut-inputnumber-line-height            | _normal_                   |
 | --nut-inputnumber-border-box             | _content-box_              |
-| --nut-inputnumber-display                | _flex_                     |
+| --nut-inputnumber-display                | _inline-flex_              |
diff --git a/src/packages/__VUE/inputnumber/doc.md b/src/packages/__VUE/inputnumber/doc.md
@@ -294,4 +294,4 @@ app.use(InputNumber);
 | --nut-inputnumber-height                 | _auto_                     |
 | --nut-inputnumber-line-height            | _normal_                   |
 | --nut-inputnumber-border-box             | _content-box_              |
-| --nut-inputnumber-display                | _flex_                     |
+| --nut-inputnumber-display                | _inline-flex_              |
diff --git a/src/packages/__VUE/inputnumber/doc.taro.md b/src/packages/__VUE/inputnumber/doc.taro.md
@@ -291,4 +291,4 @@ app.use(InputNumber);
 | --nut-inputnumber-height                 | _auto_                     |
 | --nut-inputnumber-line-height            | _normal_                   |
 | --nut-inputnumber-border-box             | _content-box_              |
-| --nut-inputnumber-display                | _flex_                     |
+| --nut-inputnumber-display                | _inline-flex_              |
diff --git a/src/packages/styles/variables-jdb.scss b/src/packages/styles/variables-jdb.scss
@@ -280,7 +280,7 @@ $inputnumber-border-radius: 0 !default;
 $inputnumber-height: auto !default;
 $inputnumber-line-height: normal !default;
 $inputnumber-border-box: content-box !default;
-$inputnumber-display: flex !default;
+$inputnumber-display: inline-flex !default;
 
 // actionsheet
 $actionsheet-light-color: #f6f6f6 !default;
@@ -520,6 +520,8 @@ $checkbox-button-background: var(--nut-checkbox-button-background, #f6f7f9) !def
 $checkbox-button-font-color-active: var(--nut-checkbox-button-font-color-active, $primary-color) !default;
 $checkbox-button-border-color-active: var(--nut-checkbox-button-border-color-active, $primary-color) !default;
 $checkbox-button-background-active: var(--nut-checkbox-button-background-active, $primary-color) !default;
+$checkbox-display: var(--nut-checkbox-display, inline-flex) !default;
+$checkbox-margin-right: var(--nut-checkbox-margin-right, 20px) !default;
 
 //radio
 $radio-label-font-color: #1d1e1e !default;

diff --git a/src/packages/styles/variables-jddkh.scss b/src/packages/styles/variables-jddkh.scss
@@ -452,6 +452,8 @@ $checkbox-button-background: var(--nut-checkbox-button-background, #f6f7f9) !def
 $checkbox-button-font-color-active: var(--nut-checkbox-button-font-color-active, $primary-color) !default;
 $checkbox-button-border-color-active: var(--nut-checkbox-button-border-color-active, $primary-color) !default;
 $checkbox-button-background-active: var(--nut-checkbox-button-background-active, $primary-color) !default;
+$checkbox-display: var(--nut-checkbox-display, inline-flex) !default;
+$checkbox-margin-right: var(--nut-checkbox-margin-right, 20px) !default;
 
 //radio
 $radio-label-font-color: #1d1e1e !default;

diff --git a/src/packages/styles/variables-jdt.scss b/src/packages/styles/variables-jdt.scss
@@ -206,7 +206,7 @@ $inputnumber-border-radius: var(--nut-inputnumber-border-radius, 0) !default;
 $inputnumber-height: var(--nut-inputnumber-height, auto) !default;
 $inputnumber-line-height: var(--nut-inputnumber-line-height, normal) !default;
 $inputnumber-border-box: var(--nut-inputnumber-border-box, content-box) !default;
-$inputnumber-display: var(--nut-inputnumber-display, flex) !default;
+$inputnumber-display: var(--nut-inputnumber-display, inline-flex) !default;
 
 // actionsheet
 $actionsheet-light-color: var(--nut-actionsheet-light-color, #f6f6f6) !default;
@@ -451,6 +451,8 @@ $checkbox-button-background: var(--nut-checkbox-button-background, #f6f7f9) !def
 $checkbox-button-font-color-active: var(--nut-checkbox-button-font-color-active, $primary-color) !default;
 $checkbox-button-border-color-active: var(--nut-checkbox-button-border-color-active, $primary-color) !default;
 $checkbox-button-background-active: var(--nut-checkbox-button-background-active, $primary-color) !default;
+$checkbox-display: var(--nut-checkbox-display, inline-flex) !default;
+$checkbox-margin-right: var(--nut-checkbox-margin-right, 20px) !default;
 
 //radio
 $radio-label-font-color: var(--nut-radio-label-font-color, rgba(0, 0, 0, 0.85)) !default;

diff --git a/src/packages/styles/variables.scss b/src/packages/styles/variables.scss
@@ -226,7 +226,7 @@ $inputnumber-border-radius: var(--nut-inputnumber-border-radius, 0) !default;
 $inputnumber-height: var(--nut-inputnumber-height, auto) !default;
 $inputnumber-line-height: var(--nut-inputnumber-line-height, normal) !default;
 $inputnumber-border-box: var(--nut-inputnumber-border-box, content-box) !default;
-$inputnumber-display: var(--nut-inputnumber-display, flex) !default;
+$inputnumber-display: var(--nut-inputnumber-display, inline-flex) !default;
 
 // actionsheet
 $actionsheet-light-color: var(--nut-actionsheet-light-color, #f6f6f6) !default;
@@ -489,6 +489,8 @@ $checkbox-button-background: var(--nut-checkbox-button-background, #f6f7f9) !def
 $checkbox-button-font-color-active: var(--nut-checkbox-button-font-color-active, $primary-color) !default;
 $checkbox-button-border-color-active: var(--nut-checkbox-button-border-color-active, $primary-color) !default;
 $checkbox-button-background-active: var(--nut-checkbox-button-background-active, $primary-color) !default;
+$checkbox-display: var(--nut-checkbox-display, inline-flex) !default;
+$checkbox-margin-right: var(--nut-checkbox-margin-right, 20px) !default;
 
 //radio
 $radio-label-font-color: var(--nut-radio-label-font-color, #1d1e1e) !default;