@nutui/nutui-react-taro 3.0.13 → 3.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (126) hide show
  1. package/CHANGELOG.md +45 -12
  2. package/dist/cjs/packages/button/style/button.scss +3 -0
  3. package/dist/cjs/packages/button/style/style.css +3 -3
  4. package/dist/cjs/packages/button/style/style.harmony.css +12 -0
  5. package/dist/cjs/packages/button/style-jmapp/button.scss +3 -0
  6. package/dist/cjs/packages/button/style-jmapp/style.css +3 -3
  7. package/dist/cjs/packages/button/style-jrkf/button.scss +3 -0
  8. package/dist/cjs/packages/button/style-jrkf/style.css +3 -3
  9. package/dist/cjs/packages/calendarcard/calendarcard.js +10 -4
  10. package/dist/cjs/packages/configprovider/types.d.ts +1 -1
  11. package/dist/cjs/packages/datepicker/utils.js +23 -38
  12. package/dist/cjs/packages/dialog/dialog.js +2 -7
  13. package/dist/cjs/packages/elevator/elevator.d.ts +3 -20
  14. package/dist/cjs/packages/elevator/elevator.js +119 -91
  15. package/dist/cjs/packages/elevator/index.d.ts +1 -1
  16. package/dist/cjs/packages/elevator/style/elevator.scss +61 -33
  17. package/dist/cjs/packages/elevator/style/style.css +65 -40
  18. package/dist/cjs/packages/elevator/style/style.harmony.css +69 -41
  19. package/dist/cjs/packages/elevator/style-jmapp/elevator.scss +61 -33
  20. package/dist/cjs/packages/elevator/style-jmapp/style.css +56 -31
  21. package/dist/cjs/packages/elevator/style-jrkf/elevator.scss +61 -33
  22. package/dist/cjs/packages/elevator/style-jrkf/style.css +56 -31
  23. package/dist/cjs/packages/formitem/formitem.js +2 -2
  24. package/dist/cjs/packages/formitem/style/formitem.scss +14 -15
  25. package/dist/cjs/packages/formitem/style/style.css +9 -11
  26. package/dist/cjs/packages/formitem/style/style.harmony.css +8 -10
  27. package/dist/cjs/packages/formitem/style-jmapp/formitem.scss +14 -15
  28. package/dist/cjs/packages/formitem/style-jmapp/style.css +8 -10
  29. package/dist/cjs/packages/formitem/style-jrkf/formitem.scss +14 -15
  30. package/dist/cjs/packages/formitem/style-jrkf/style.css +8 -10
  31. package/dist/cjs/packages/image/image.js +2 -2
  32. package/dist/cjs/packages/input/input.js +1 -1
  33. package/dist/cjs/packages/navbar/style/navbar.scss +2 -0
  34. package/dist/cjs/packages/navbar/style/style.css +2 -0
  35. package/dist/cjs/packages/navbar/style/style.harmony.css +2 -0
  36. package/dist/cjs/packages/navbar/style-jmapp/navbar.scss +2 -0
  37. package/dist/cjs/packages/navbar/style-jmapp/style.css +2 -0
  38. package/dist/cjs/packages/navbar/style-jrkf/navbar.scss +2 -0
  39. package/dist/cjs/packages/navbar/style-jrkf/style.css +2 -0
  40. package/dist/cjs/packages/noticebar/noticebar.js +1 -1
  41. package/dist/cjs/packages/overlay/style/overlay.scss +0 -1
  42. package/dist/cjs/packages/overlay/style/style.css +0 -1
  43. package/dist/cjs/packages/overlay/style/style.harmony.css +0 -1
  44. package/dist/cjs/packages/overlay/style-jmapp/overlay.scss +0 -1
  45. package/dist/cjs/packages/overlay/style-jmapp/style.css +0 -1
  46. package/dist/cjs/packages/overlay/style-jrkf/overlay.scss +0 -1
  47. package/dist/cjs/packages/overlay/style-jrkf/style.css +0 -1
  48. package/dist/cjs/packages/pickerview/pickerroller.js +9 -1
  49. package/dist/cjs/packages/switch/switch.js +0 -1
  50. package/dist/cjs/packages/tabpane/style/style.css +1 -1
  51. package/dist/cjs/packages/tabpane/style/tabpane.scss +1 -1
  52. package/dist/cjs/packages/tabpane/style-jmapp/style.css +1 -1
  53. package/dist/cjs/packages/tabpane/style-jmapp/tabpane.scss +1 -1
  54. package/dist/cjs/packages/tabpane/style-jrkf/style.css +1 -1
  55. package/dist/cjs/packages/tabpane/style-jrkf/tabpane.scss +1 -1
  56. package/dist/cjs/types/spec/calendarcard/base.d.ts +1 -0
  57. package/dist/cjs/types/spec/datepicker/base.d.ts +1 -1
  58. package/dist/cjs/types/spec/elevator/base.d.ts +5 -2
  59. package/dist/es/packages/button/style/button.scss +3 -0
  60. package/dist/es/packages/button/style/style.css +3 -3
  61. package/dist/es/packages/button/style/style.harmony.css +12 -0
  62. package/dist/es/packages/button/style-jmapp/button.scss +3 -0
  63. package/dist/es/packages/button/style-jmapp/style.css +3 -3
  64. package/dist/es/packages/button/style-jrkf/button.scss +3 -0
  65. package/dist/es/packages/button/style-jrkf/style.css +3 -3
  66. package/dist/es/packages/calendarcard/calendarcard.js +11 -5
  67. package/dist/es/packages/configprovider/types.d.ts +1 -1
  68. package/dist/es/packages/datepicker/utils.js +23 -38
  69. package/dist/es/packages/dialog/dialog.js +2 -7
  70. package/dist/es/packages/elevator/elevator.d.ts +3 -20
  71. package/dist/es/packages/elevator/elevator.js +119 -91
  72. package/dist/es/packages/elevator/index.d.ts +1 -1
  73. package/dist/es/packages/elevator/style/elevator.scss +61 -33
  74. package/dist/es/packages/elevator/style/style.css +65 -40
  75. package/dist/es/packages/elevator/style/style.harmony.css +69 -41
  76. package/dist/es/packages/elevator/style-jmapp/elevator.scss +61 -33
  77. package/dist/es/packages/elevator/style-jmapp/style.css +56 -31
  78. package/dist/es/packages/elevator/style-jrkf/elevator.scss +61 -33
  79. package/dist/es/packages/elevator/style-jrkf/style.css +56 -31
  80. package/dist/es/packages/formitem/formitem.js +2 -2
  81. package/dist/es/packages/formitem/style/formitem.scss +14 -15
  82. package/dist/es/packages/formitem/style/style.css +9 -11
  83. package/dist/es/packages/formitem/style/style.harmony.css +8 -10
  84. package/dist/es/packages/formitem/style-jmapp/formitem.scss +14 -15
  85. package/dist/es/packages/formitem/style-jmapp/style.css +8 -10
  86. package/dist/es/packages/formitem/style-jrkf/formitem.scss +14 -15
  87. package/dist/es/packages/formitem/style-jrkf/style.css +8 -10
  88. package/dist/es/packages/image/image.js +2 -2
  89. package/dist/es/packages/input/input.js +1 -1
  90. package/dist/es/packages/navbar/style/navbar.scss +2 -0
  91. package/dist/es/packages/navbar/style/style.css +2 -0
  92. package/dist/es/packages/navbar/style/style.harmony.css +2 -0
  93. package/dist/es/packages/navbar/style-jmapp/navbar.scss +2 -0
  94. package/dist/es/packages/navbar/style-jmapp/style.css +2 -0
  95. package/dist/es/packages/navbar/style-jrkf/navbar.scss +2 -0
  96. package/dist/es/packages/navbar/style-jrkf/style.css +2 -0
  97. package/dist/es/packages/noticebar/noticebar.js +1 -1
  98. package/dist/es/packages/overlay/style/overlay.scss +0 -1
  99. package/dist/es/packages/overlay/style/style.css +0 -1
  100. package/dist/es/packages/overlay/style/style.harmony.css +0 -1
  101. package/dist/es/packages/overlay/style-jmapp/overlay.scss +0 -1
  102. package/dist/es/packages/overlay/style-jmapp/style.css +0 -1
  103. package/dist/es/packages/overlay/style-jrkf/overlay.scss +0 -1
  104. package/dist/es/packages/overlay/style-jrkf/style.css +0 -1
  105. package/dist/es/packages/pickerview/pickerroller.js +9 -1
  106. package/dist/es/packages/switch/switch.js +0 -1
  107. package/dist/es/packages/tabpane/style/style.css +1 -1
  108. package/dist/es/packages/tabpane/style/tabpane.scss +1 -1
  109. package/dist/es/packages/tabpane/style-jmapp/style.css +1 -1
  110. package/dist/es/packages/tabpane/style-jmapp/tabpane.scss +1 -1
  111. package/dist/es/packages/tabpane/style-jrkf/style.css +1 -1
  112. package/dist/es/packages/tabpane/style-jrkf/tabpane.scss +1 -1
  113. package/dist/es/types/spec/calendarcard/base.d.ts +4 -0
  114. package/dist/es/types/spec/datepicker/base.d.ts +1 -1
  115. package/dist/es/types/spec/elevator/base.d.ts +15 -6
  116. package/dist/nutui.react.umd.js +904 -888
  117. package/dist/style-jmapp.css +1 -1
  118. package/dist/style-jmapp.scss +31 -31
  119. package/dist/style-jrkf.css +1 -1
  120. package/dist/style-jrkf.scss +29 -29
  121. package/dist/style.css +1 -1
  122. package/dist/style.scss +26 -26
  123. package/dist/styles/variables-jmapp.scss +14 -2
  124. package/dist/styles/variables-jrkf.scss +14 -2
  125. package/dist/styles/variables.scss +25 -45
  126. package/package.json +1 -1
@@ -3,65 +3,64 @@
3
3
  /* #ifndef harmony */
4
4
  /* #endif */
5
5
  .nut-elevator {
6
- width: 100%;
7
- display: block;
8
6
  position: relative;
9
- overflow: hidden;
7
+ display: flex;
8
+ width: 100%;
10
9
  }
11
10
  .nut-elevator-list {
12
- display: block;
13
11
  position: relative;
14
12
  top: 0;
13
+ display: flex;
14
+ width: 100%;
15
15
  overflow: hidden;
16
- font-size: var(--nutui-elevator-list-font-size, var(--nutui-font-size-s, 12px));
17
- color: var(--nutui-elevator-list-color, var(--nutui-color-title, #1a1a1a));
18
16
  }
19
17
  .nut-elevator-list-inner {
20
- height: 100%;
18
+ display: flex;
19
+ flex-direction: column;
20
+ min-height: 100%;
21
21
  width: 100%;
22
- display: block;
23
22
  background-color: var(--nutui-elevator-list-bg-color, #ffffff);
24
23
  overflow: auto;
25
24
  }
26
25
  .nut-elevator-list-item {
27
- display: block;
26
+ display: flex;
27
+ }
28
+ .nut-elevator-list-item-sublist {
29
+ display: flex;
30
+ flex-direction: column;
28
31
  }
29
32
  .nut-elevator-list-item-code {
30
33
  display: flex;
31
- position: relative;
32
- height: var(--nutui-elevator-list-item-code-height, 35px);
33
- line-height: var(--nutui-elevator-list-item-code-line-height, 35px);
34
+ align-items: center;
35
+ height: var(--nutui-elevator-list-item-code-height, 34px);
34
36
  font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-size-base, 14px));
35
- color: var(--nutui-elevator-list-item-code-color, var(--nutui-color-title, #1a1a1a));
36
- padding: var(--nutui-elevator-list-item-padding, 0 20px);
37
+ color: var(--nutui-elevator-list-item-code-color, var(--nutui-color-text-help, #888b94));
37
38
  font-weight: var(--nutui-elevator-list-item-code-font-weight, var(--nutui-font-weight-bold, 600));
38
- box-sizing: border-box;
39
- border-bottom: var(--nutui-elevator-list-item-code-border-bottom, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
40
- background-color: var(--nutui-elevator-list-item-code-background-color, inherit);
41
39
  }
42
40
  .nut-elevator-list-item-name {
43
41
  display: flex;
44
42
  align-items: center;
45
- padding: var(--nutui-elevator-list-item-padding, 0 20px);
46
- height: var(--nutui-elevator-list-item-name-height, 30px);
47
- line-height: var(--nutui-elevator-list-item-name-line-height, 30px);
43
+ height: var(--nutui-elevator-list-item-name-height, 34px);
44
+ font-size: var(--nutui-elevator-list-font-size, var(--nutui-font-size-base, 14px));
45
+ color: var(--nutui-elevator-list-color, var(--nutui-color-title, #1a1a1a));
48
46
  }
49
47
  .nut-elevator-list-item-name-highcolor {
50
48
  color: var(--nutui-color-primary, #ff0f23);
49
+ font-weight: 600;
51
50
  }
52
51
  .nut-elevator-list-fixed {
53
- display: flex;
54
- align-items: center;
55
- width: 100%;
56
52
  position: absolute;
57
53
  top: 0;
58
54
  left: 0;
59
55
  z-index: 1;
60
- padding: var(--nutui-elevator-list-item-padding, 0 20px);
61
- height: var(--nutui-elevator-list-item-code-height, 35px);
62
- background-color: var(--nutui-elevator-list-fixed-bg-color, #ffffff);
56
+ display: flex;
57
+ align-items: center;
58
+ width: 100%;
59
+ padding: var(--nutui-elevator-list-item-padding, 0 36px 0 20px);
60
+ height: var(--nutui-elevator-list-item-code-height, 34px);
63
61
  box-sizing: border-box;
64
62
  box-shadow: var(--nutui-elevator-list-fixed-box-shadow, 0 0 10px #eee);
63
+ background-color: var(--nutui-elevator-list-fixed-bg-color, #ffffff);
65
64
  }
66
65
  .nut-elevator-list-fixed-title {
67
66
  font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-size-base, 14px));
@@ -73,35 +72,61 @@
73
72
  right: var(--nutui-elevator-list-item-code-current-right, 60px);
74
73
  top: var(--nutui-elevator-list-item-code-current-top, 50%);
75
74
  transform: var(--nutui-elevator-bars-transform, translateY(-50%));
75
+ display: flex;
76
+ align-items: center;
77
+ justify-content: center;
76
78
  width: var(--nutui-elevator-list-item-code-current-width, 45px);
77
79
  height: var(--nutui-elevator-list-item-code-current-height, 45px);
78
- line-height: var(--nutui-elevator-list-item-code-current-line-height, 45px);
79
80
  border-radius: var(--nutui-elevator-list-item-code-current-border-radius, 50%);
80
- background: var(--nutui-elevator-list-item-code-current-bg-color, #fff);
81
+ background: var(--nutui-elevator-list-item-code-current-bg-color, var(--nutui-color-text-disabled, #c2c4cc));
81
82
  box-shadow: 0 3px 3px 1px rgb(240, 240, 240);
82
- text-align: var(--nutui-elevator-list-item-code-current-text-align, center);
83
+ color: var(--nutui-elevator-list-item-code-current-color, #ffffff);
83
84
  }
84
85
  .nut-elevator-bars {
85
86
  position: absolute;
86
- right: var(--nutui-elevator-bars-right, 10px);
87
+ right: var(--nutui-elevator-bars-right, 16px);
87
88
  top: var(--nutui-elevator-bars-top, 50%);
88
- color: var(--nutui-color-text-help, #888b94);
89
- font-size: var(--nutui-elevator-bars-font-size, var(--nutui-font-size-s, 12px));
90
89
  transform: var(--nutui-elevator-bars-transform, translateY(-50%));
91
- padding: var(--nutui-elevator-bars-padding, 15px 0);
92
- background-color: var(--nutui-elevator-bars-background-color, var(--nutui-color-background, #f2f3f5));
93
- border-radius: var(--nutui-elevator-bars-border-radius, 6px);
94
- text-align: center;
95
90
  z-index: var(--nutui-elevator-bars-z-index, 1);
96
91
  }
92
+ .nut-elevator-bars-inner {
93
+ display: flex;
94
+ flex-direction: column;
95
+ }
97
96
  .nut-elevator-bars-inner-item {
98
- display: block;
99
- padding: var(--nutui-elevator-bars-inner-item-padding, 3px);
97
+ display: inline-flex;
98
+ align-items: center;
99
+ justify-content: center;
100
+ height: 16px;
101
+ width: 16px;
102
+ border-radius: 50%;
103
+ margin: 1px 0;
104
+ color: var(--nutui-elevator-bars-color, var(--nutui-color-text-help, #888b94));
105
+ font-size: var(--nutui-elevator-bars-font-size, var(--nutui-font-size-xxs, 10px));
100
106
  cursor: pointer;
101
107
  }
102
108
  .nut-elevator-bars-inner-item-active {
103
109
  font-weight: var(--nutui-font-weight-bold, 600);
104
- color: var(--nutui-elevator-bars-active-color, var(--nutui-color-primary, #ff0f23));
110
+ color: var(--nutui-elevator-bars-active-color, #ffffff);
111
+ /* #ifndef weapp jd*/
112
+ background: linear-gradient(to right, #ff475d, #ff0f23);
113
+ /* #endif */
114
+ /* #ifdef weapp jd*/
115
+ background: #ff0f23;
116
+ /* #endif */
117
+ }
118
+ .nut-elevator-horizontal .nut-elevator-list-item-code {
119
+ width: var(--nutui-elevator-list-item-code-width, 34px);
120
+ justify-content: center;
121
+ }
122
+ .nut-elevator-vertical .nut-elevator-list-item {
123
+ flex-direction: column;
124
+ }
125
+ .nut-elevator-vertical .nut-elevator-list-item-code {
126
+ border-bottom: var(--nutui-elevator-list-item-code-border-bottom, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
127
+ }
128
+ .nut-elevator-vertical .nut-elevator-list-item-name, .nut-elevator-vertical .nut-elevator-list-item-code {
129
+ padding: var(--nutui-elevator-list-item-padding, 0 36px 0 20px);
105
130
  }
106
131
 
107
132
  [dir=rtl] .nut-elevator-list-fixed,
@@ -117,5 +142,5 @@
117
142
  [dir=rtl] .nut-elevator-bars,
118
143
  .nut-rtl .nut-elevator-bars {
119
144
  right: auto;
120
- left: var(--nutui-elevator-bars-right, 10px);
145
+ left: var(--nutui-elevator-bars-right, 16px);
121
146
  }
@@ -3,65 +3,64 @@
3
3
  /* #ifndef harmony */
4
4
  /* #endif */
5
5
  .nut-elevator {
6
- width: 100%;
7
- display: block;
8
6
  position: relative;
9
- overflow: hidden;
7
+ display: flex;
8
+ width: 100%;
10
9
  }
11
10
  .nut-elevator-list {
12
- display: block;
13
11
  position: relative;
14
12
  top: 0;
13
+ display: flex;
14
+ width: 100%;
15
15
  overflow: hidden;
16
- font-size: 12px;
17
- color: #1a1a1a;
18
16
  }
19
17
  .nut-elevator-list-inner {
20
- height: 100%;
18
+ display: flex;
19
+ flex-direction: column;
20
+ min-height: 100%;
21
21
  width: 100%;
22
- display: block;
23
22
  background-color: #ffffff;
24
23
  overflow: auto;
25
24
  }
26
25
  .nut-elevator-list-item {
27
- display: block;
26
+ display: flex;
27
+ }
28
+ .nut-elevator-list-item-sublist {
29
+ display: flex;
30
+ flex-direction: column;
28
31
  }
29
32
  .nut-elevator-list-item-code {
30
33
  display: flex;
31
- position: relative;
32
- height: 35px;
33
- line-height: 35px;
34
+ align-items: center;
35
+ height: 34px;
34
36
  font-size: 14px;
35
- color: #1a1a1a;
36
- padding: 0 20px;
37
+ color: #888b94;
37
38
  font-weight: 600;
38
- box-sizing: border-box;
39
- border-bottom: 1px solid rgba(0, 0, 0, 0.06);
40
- background-color: inherit;
41
39
  }
42
40
  .nut-elevator-list-item-name {
43
41
  display: flex;
44
42
  align-items: center;
45
- padding: 0 20px;
46
- height: 30px;
47
- line-height: 30px;
43
+ height: 34px;
44
+ font-size: 14px;
45
+ color: #1a1a1a;
48
46
  }
49
47
  .nut-elevator-list-item-name-highcolor {
50
48
  color: #ff0f23;
49
+ font-weight: 600;
51
50
  }
52
51
  .nut-elevator-list-fixed {
53
- display: flex;
54
- align-items: center;
55
- width: 100%;
56
52
  position: absolute;
57
53
  top: 0;
58
54
  left: 0;
59
55
  z-index: 1;
60
- padding: 0 20px;
61
- height: 35px;
62
- background-color: #ffffff;
56
+ display: flex;
57
+ align-items: center;
58
+ width: 100%;
59
+ padding: 0 36px 0 20px;
60
+ height: 34px;
63
61
  box-sizing: border-box;
64
62
  box-shadow: 0 0 10px #eee;
63
+ background-color: #ffffff;
65
64
  }
66
65
  .nut-elevator-list-fixed-title {
67
66
  font-size: 14px;
@@ -73,35 +72,64 @@
73
72
  right: 60px;
74
73
  top: 50%;
75
74
  transform: translateY(-50%);
75
+ display: flex;
76
+ align-items: center;
77
+ justify-content: center;
76
78
  width: 45px;
77
79
  height: 45px;
78
- line-height: 45px;
79
80
  border-radius: 50%;
80
- background: #fff;
81
+ background: #c2c4cc;
81
82
  box-shadow: 0 3px 3px 1px rgb(240, 240, 240);
82
- text-align: center;
83
+ color: #ffffff;
83
84
  }
84
85
  .nut-elevator-bars {
85
86
  position: absolute;
86
- right: 10px;
87
+ right: 16px;
87
88
  top: 50%;
88
- color: #888b94;
89
- font-size: 12px;
90
89
  transform: translateY(-50%);
91
- padding: 15px 0;
92
- background-color: #f2f3f5;
93
- border-radius: 6px;
94
- text-align: center;
95
90
  z-index: 1;
96
91
  }
92
+ .nut-elevator-bars-inner {
93
+ display: flex;
94
+ flex-direction: column;
95
+ }
97
96
  .nut-elevator-bars-inner-item {
98
- display: block;
99
- padding: 3px;
97
+ display: inline-flex;
98
+ align-items: center;
99
+ justify-content: center;
100
+ height: 16px;
101
+ width: 16px;
102
+ border-radius: 50%;
103
+ margin: 1px 0;
104
+ color: #888b94;
105
+ font-size: 10px;
100
106
  cursor: pointer;
101
107
  }
102
108
  .nut-elevator-bars-inner-item-active {
103
109
  font-weight: 600;
104
- color: #ff0f23;
110
+ color: #ffffff;
111
+ /* #ifndef weapp jd*/
112
+ background: linear-gradient(to right, #ff475d, #ff0f23);
113
+ /* #endif */
114
+ /* #ifdef weapp jd*/
115
+ background: #ff0f23;
116
+ /* #endif */
117
+ }
118
+ .nut-elevator-horizontal .nut-elevator-list-item-code {
119
+ width: 34px;
120
+ justify-content: center;
121
+ }
122
+ .nut-elevator-vertical .nut-elevator-list-item {
123
+ flex-direction: column;
124
+ }
125
+ .nut-elevator-vertical .nut-elevator-list-item-code {
126
+ border-bottom: 1px solid rgba(0, 0, 0, 0.06);
127
+ }
128
+ .nut-elevator-vertical .nut-elevator-list-item-name {
129
+ padding: 0 36px 0 20px;
130
+ }
131
+ .nut-elevator-vertical .nut-elevator-list-item-code {
132
+ padding: 0 36px 0 20px;
105
133
  }
106
134
 
107
135
  [dir=rtl] .nut-elevator-list-fixed,
@@ -119,9 +147,9 @@
119
147
  }
120
148
  [dir=rtl] .nut-elevator-bars {
121
149
  right: auto;
122
- left: 10px;
150
+ left: 16px;
123
151
  }
124
152
  .nut-rtl .nut-elevator-bars {
125
153
  right: auto;
126
- left: 10px;
154
+ left: 16px;
127
155
  }
@@ -1,68 +1,66 @@
1
1
  .nut-elevator {
2
- width: 100%;
3
- display: block;
4
2
  position: relative;
5
- overflow: hidden;
3
+ display: flex;
4
+ width: 100%;
6
5
 
7
6
  &-list {
8
- display: block;
9
7
  position: relative;
10
8
  top: 0;
9
+ display: flex;
10
+ width: 100%;
11
11
  overflow: hidden;
12
- font-size: $elevator-list-font-size;
13
- color: $elevator-list-color;
14
12
 
15
13
  &-inner {
16
- height: 100%;
14
+ display: flex;
15
+ flex-direction: column;
16
+ min-height: 100%;
17
17
  width: 100%;
18
- display: block;
19
18
  background-color: $elevator-list-bg-color;
20
19
  overflow: auto;
21
20
  }
22
21
 
23
22
  &-item {
24
- display: block;
25
-
23
+ display: flex;
24
+ &-sublist {
25
+ display: flex;
26
+ flex-direction: column;
27
+ }
26
28
  &-code {
27
29
  display: flex;
28
- position: relative;
30
+ align-items: center;
29
31
  height: $elevator-list-item-code-height;
30
- line-height: $elevator-list-item-code-line-height;
31
32
  font-size: $elevator-list-item-code-font-size;
32
33
  color: $elevator-list-item-code-color;
33
- padding: $elevator-list-item-padding;
34
34
  font-weight: $elevator-list-item-code-font-weight;
35
- box-sizing: border-box;
36
- border-bottom: $elevator-list-item-code-border-bottom;
37
- background-color: $elevator-list-item-code-background-color;
38
35
  }
39
36
 
40
37
  &-name {
41
38
  display: flex;
42
39
  align-items: center;
43
- padding: $elevator-list-item-padding;
44
40
  height: $elevator-list-item-name-height;
45
- line-height: $elevator-list-item-name-line-height;
41
+ font-size: $elevator-list-font-size;
42
+ color: $elevator-list-color;
46
43
 
47
44
  &-highcolor {
48
45
  color: $color-primary;
46
+ font-weight: 600;
49
47
  }
50
48
  }
51
49
  }
52
50
 
53
51
  &-fixed {
54
- display: flex;
55
- align-items: center;
56
- width: 100%;
57
52
  position: absolute;
58
53
  top: 0;
59
54
  left: 0;
60
55
  z-index: 1;
56
+ display: flex;
57
+ align-items: center;
58
+ width: 100%;
61
59
  padding: $elevator-list-item-padding;
62
60
  height: $elevator-list-item-code-height;
63
- background-color: $elevator-list-fixed-bg-color;
64
61
  box-sizing: border-box;
65
62
  box-shadow: $elevator-list-fixed-box-shadow;
63
+ background-color: $elevator-list-fixed-bg-color;
66
64
  &-title {
67
65
  font-size: $elevator-list-item-code-font-size;
68
66
  color: $elevator-list-fixed-color;
@@ -76,41 +74,71 @@
76
74
  right: $elevator-list-item-code-current-right;
77
75
  top: $elevator-list-item-code-current-top;
78
76
  transform: $elevator-bars-transform;
77
+ display: flex;
78
+ align-items: center;
79
+ justify-content: center;
79
80
  width: $elevator-list-item-code-current-width;
80
81
  height: $elevator-list-item-code-current-height;
81
- line-height: $elevator-list-item-code-current-line-height;
82
82
  border-radius: $elevator-list-item-code-current-border-radius;
83
83
  background: $elevator-list-item-code-current-bg-color;
84
84
  box-shadow: $elevator-list-item-code-current-box-shadow;
85
- text-align: $elevator-list-item-code-current-text-align;
85
+ color: $elevator-list-item-code-current-color;
86
86
  }
87
87
 
88
88
  &-bars {
89
89
  position: absolute;
90
90
  right: $elevator-bars-right;
91
91
  top: $elevator-bars-top;
92
- color: $color-text-help;
93
- font-size: $elevator-bars-font-size;
94
92
  transform: $elevator-bars-transform;
95
- padding: $elevator-bars-padding;
96
- background-color: $elevator-bars-background-color;
97
- border-radius: $elevator-bars-border-radius;
98
- text-align: center;
99
93
  z-index: $elevator-bars-z-index;
100
94
 
101
95
  &-inner {
96
+ display: flex;
97
+ flex-direction: column;
102
98
  &-item {
103
- display: block;
104
- padding: $elevator-bars-inner-item-padding;
99
+ display: inline-flex;
100
+ align-items: center;
101
+ justify-content: center;
102
+ height: 16px;
103
+ width: 16px;
104
+ border-radius: 50%;
105
+ margin: 1px 0;
106
+ color: $elevator-bars-color;
107
+ font-size: $elevator-bars-font-size;
105
108
  cursor: pointer;
106
-
107
109
  &-active {
108
110
  font-weight: $font-weight-bold;
109
111
  color: $elevator-bars-active-color;
112
+ /* #ifndef weapp jd*/
113
+ background: linear-gradient(to right, #ff475d, #ff0f23);
114
+ /* #endif */
115
+ /* #ifdef weapp jd*/
116
+ background: #ff0f23;
117
+ /* #endif */
110
118
  }
111
119
  }
112
120
  }
113
121
  }
122
+ &-horizontal {
123
+ .nut-elevator-list-item {
124
+ &-code {
125
+ width: $elevator-list-item-code-width;
126
+ justify-content: center;
127
+ }
128
+ }
129
+ }
130
+ &-vertical {
131
+ .nut-elevator-list-item {
132
+ flex-direction: column;
133
+ &-code {
134
+ border-bottom: $elevator-list-item-code-border-bottom;
135
+ }
136
+ &-name,
137
+ &-code {
138
+ padding: $elevator-list-item-padding;
139
+ }
140
+ }
141
+ }
114
142
  }
115
143
 
116
144
  [dir='rtl'] .nut-elevator,
@@ -3,65 +3,64 @@
3
3
  /* #ifndef harmony */
4
4
  /* #endif */
5
5
  .nut-elevator {
6
- width: 100%;
7
- display: block;
8
6
  position: relative;
9
- overflow: hidden;
7
+ display: flex;
8
+ width: 100%;
10
9
  }
11
10
  .nut-elevator-list {
12
- display: block;
13
11
  position: relative;
14
12
  top: 0;
13
+ display: flex;
14
+ width: 100%;
15
15
  overflow: hidden;
16
- font-size: var(--nutui-elevator-list-font-size, var(--nutui-font-text-small));
17
- color: var(--nutui-elevator-list-color, var(--nutui-color-title));
18
16
  }
19
17
  .nut-elevator-list-inner {
20
- height: 100%;
18
+ display: flex;
19
+ flex-direction: column;
20
+ min-height: 100%;
21
21
  width: 100%;
22
- display: block;
23
22
  background-color: var(--nutui-elevator-list-bg-color, #ffffff);
24
23
  overflow: auto;
25
24
  }
26
25
  .nut-elevator-list-item {
27
- display: block;
26
+ display: flex;
27
+ }
28
+ .nut-elevator-list-item-sublist {
29
+ display: flex;
30
+ flex-direction: column;
28
31
  }
29
32
  .nut-elevator-list-item-code {
30
33
  display: flex;
31
- position: relative;
34
+ align-items: center;
32
35
  height: var(--nutui-elevator-list-item-code-height, 20px);
33
- line-height: var(--nutui-elevator-list-item-code-line-height, 20px);
34
36
  font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-text));
35
37
  color: var(--nutui-elevator-list-item-code-color, var(--nutui-color-title));
36
- padding: var(--nutui-elevator-list-item-padding, 0 20px);
37
38
  font-weight: var(--nutui-elevator-list-item-code-font-weight, var(--nutui-font-weight-bold));
38
- box-sizing: border-box;
39
- border-bottom: var(--nutui-elevator-list-item-code-border-bottom, none);
40
- background-color: var(--nutui-elevator-list-item-code-background-color, var(--nutui-color-default-light));
41
39
  }
42
40
  .nut-elevator-list-item-name {
43
41
  display: flex;
44
42
  align-items: center;
45
- padding: var(--nutui-elevator-list-item-padding, 0 20px);
46
43
  height: var(--nutui-elevator-list-item-name-height, 52px);
47
- line-height: var(--nutui-elevator-list-item-name-line-height, 52px);
44
+ font-size: var(--nutui-elevator-list-font-size, var(--nutui-font-text-small));
45
+ color: var(--nutui-elevator-list-color, var(--nutui-color-title));
48
46
  }
49
47
  .nut-elevator-list-item-name-highcolor {
50
48
  color: var(--nutui-color-primary);
49
+ font-weight: 600;
51
50
  }
52
51
  .nut-elevator-list-fixed {
53
- display: flex;
54
- align-items: center;
55
- width: 100%;
56
52
  position: absolute;
57
53
  top: 0;
58
54
  left: 0;
59
55
  z-index: 1;
56
+ display: flex;
57
+ align-items: center;
58
+ width: 100%;
60
59
  padding: var(--nutui-elevator-list-item-padding, 0 20px);
61
60
  height: var(--nutui-elevator-list-item-code-height, 20px);
62
- background-color: var(--nutui-elevator-list-fixed-bg-color, var(--nutui-color-default-light));
63
61
  box-sizing: border-box;
64
62
  box-shadow: var(--nutui-elevator-list-fixed-box-shadow, 0 0 10px #eee);
63
+ background-color: var(--nutui-elevator-list-fixed-bg-color, var(--nutui-color-default-light));
65
64
  }
66
65
  .nut-elevator-list-fixed-title {
67
66
  font-size: var(--nutui-elevator-list-item-code-font-size, var(--nutui-font-text));
@@ -73,35 +72,61 @@
73
72
  right: var(--nutui-elevator-list-item-code-current-right, 40px);
74
73
  top: var(--nutui-elevator-list-item-code-current-top, 50%);
75
74
  transform: var(--nutui-elevator-bars-transform, translateY(-50%));
75
+ display: flex;
76
+ align-items: center;
77
+ justify-content: center;
76
78
  width: var(--nutui-elevator-list-item-code-current-width, 48px);
77
79
  height: var(--nutui-elevator-list-item-code-current-height, 48px);
78
- line-height: var(--nutui-elevator-list-item-code-current-line-height, 48px);
79
80
  border-radius: var(--nutui-elevator-list-item-code-current-border-radius, 50% 0 50% 50%);
80
81
  background: var(--nutui-elevator-list-item-code-current-bg-color, var(--nutui-color-default-light));
81
82
  box-shadow: 0px 2px 6px 0px rgba(4, 1, 135, 0.08);
82
- text-align: var(--nutui-elevator-list-item-code-current-text-align, center);
83
+ color: var(--nutui-elevator-list-item-code-current-color, #ffffff);
83
84
  }
84
85
  .nut-elevator-bars {
85
86
  position: absolute;
86
87
  right: var(--nutui-elevator-bars-right, 10px);
87
88
  top: var(--nutui-elevator-bars-top, 50%);
88
- color: var(--nutui-color-text-help);
89
- font-size: var(--nutui-elevator-bars-font-size, var(--nutui-font-text-xs));
90
89
  transform: var(--nutui-elevator-bars-transform, translateY(-50%));
91
- padding: var(--nutui-elevator-bars-padding, 15px 0);
92
- background-color: var(--nutui-elevator-bars-background-color, transparent);
93
- border-radius: var(--nutui-elevator-bars-border-radius, 6px);
94
- text-align: center;
95
90
  z-index: var(--nutui-elevator-bars-z-index, 2);
96
91
  }
92
+ .nut-elevator-bars-inner {
93
+ display: flex;
94
+ flex-direction: column;
95
+ }
97
96
  .nut-elevator-bars-inner-item {
98
- display: block;
99
- padding: var(--nutui-elevator-bars-inner-item-padding, 3px);
97
+ display: inline-flex;
98
+ align-items: center;
99
+ justify-content: center;
100
+ height: 16px;
101
+ width: 16px;
102
+ border-radius: 50%;
103
+ margin: 1px 0;
104
+ color: var(--nutui-elevator-bars-color, var(--nutui-color-text-help));
105
+ font-size: var(--nutui-elevator-bars-font-size, var(--nutui-font-text-xs));
100
106
  cursor: pointer;
101
107
  }
102
108
  .nut-elevator-bars-inner-item-active {
103
109
  font-weight: var(--nutui-font-weight-bold);
104
110
  color: var(--nutui-elevator-bars-active-color, var(--nutui-color-primary));
111
+ /* #ifndef weapp jd*/
112
+ background: linear-gradient(to right, #ff475d, #ff0f23);
113
+ /* #endif */
114
+ /* #ifdef weapp jd*/
115
+ background: #ff0f23;
116
+ /* #endif */
117
+ }
118
+ .nut-elevator-horizontal .nut-elevator-list-item-code {
119
+ width: var(--nutui-elevator-list-item-code-width, 34px);
120
+ justify-content: center;
121
+ }
122
+ .nut-elevator-vertical .nut-elevator-list-item {
123
+ flex-direction: column;
124
+ }
125
+ .nut-elevator-vertical .nut-elevator-list-item-code {
126
+ border-bottom: var(--nutui-elevator-list-item-code-border-bottom, none);
127
+ }
128
+ .nut-elevator-vertical .nut-elevator-list-item-name, .nut-elevator-vertical .nut-elevator-list-item-code {
129
+ padding: var(--nutui-elevator-list-item-padding, 0 20px);
105
130
  }
106
131
 
107
132
  [dir=rtl] .nut-elevator-list-fixed,