bkui-vue 1.0.3-beta.41 → 1.0.3-beta.42

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.
@@ -6,6 +6,112 @@
6
6
  right: 0;
7
7
  bottom: 0;
8
8
  left: 0;
9
+
10
+ .@{bk-prefix}-modal-wrapper {
11
+ position: absolute;
12
+ top: 0;
13
+ bottom: 0;
14
+ left: auto;
15
+ transform: initial;
16
+
17
+ &.scroll-able {
18
+ .@{bk-prefix}-modal-content {
19
+ overflow: auto;
20
+ }
21
+ }
22
+ }
23
+ .@{bk-prefix}-modal-footer {
24
+ &.is-fixed {
25
+ .@{bk-prefix}-sideslider-footer {
26
+ height: 54px;
27
+ margin: 0;;
28
+ border-top: 1px solid transparent;
29
+ box-shadow: rgb(0 0 0 / 6%) 0 -2px 4px 0;
30
+ }
31
+ }
32
+ }
33
+ }
34
+
35
+ .@{bk-prefix}-sideslider-header {
36
+ width: 100%;
37
+ height: 52px;
38
+ background: #fff;
39
+ border-bottom: 1px solid #dcdee5;
40
+ }
41
+
42
+ .@{bk-prefix}-sideslider-close {
43
+ position: absolute;
44
+ top: 0;
45
+ width: 30px;
46
+ height: 52px;
47
+ font-size: 24px;
48
+ line-height: 52px;
49
+ color: #fff;
50
+ text-align: center;
51
+ cursor: pointer;
52
+ background-color: @primary-color;
53
+
54
+ &.right {
55
+ left: 0;
56
+
57
+ &::before {
58
+ top: 50%;
59
+ left: 50%;
60
+ display: inline-block;
61
+ width: 8px;
62
+ height: 8px;
63
+ border-top: solid 2px #fff;
64
+ border-right: solid 2px #fff;
65
+ content: '';
66
+ transform: translate(-50%, -50%) rotate(45deg);
67
+ }
68
+ }
69
+
70
+ &.left {
71
+ right: 0;
72
+
73
+ &::before {
74
+ top: 50%;
75
+ left: 50%;
76
+ display: inline-block;
77
+ width: 8px;
78
+ height: 8px;
79
+ border-top: solid 2px #fff;
80
+ border-left: solid 2px #fff;
81
+ content: '';
82
+ transform: translate(50%, -50%) rotate(-45deg);
83
+ }
84
+ }
85
+ }
86
+
87
+ .@{bk-prefix}-sideslider-title {
88
+ display: flex;
89
+ height: 52px;
90
+ padding-left: 30px;
91
+ font-size: 16px;
92
+ color: #313238;
93
+ align-items: center;
94
+
95
+ &.right {
96
+ width: 100%;
97
+ padding: 0 0 0 30+16px;
98
+ }
99
+ }
100
+
101
+ .@{bk-prefix}-sideslider-content {
102
+ padding-right: 24px;
103
+ padding-left: 24px;
104
+ overflow-y: scroll;
105
+ }
106
+
107
+ .@{bk-prefix}-sideslider-footer {
108
+ display: flex;
109
+ width: 100%;
110
+ height: 54px;
111
+ padding: 0 24px;
112
+ margin-top: 24px;
113
+ background: #fff;
114
+ align-items: center;
9
115
  }
10
116
 
11
117
  /* fade-center */
@@ -49,101 +155,5 @@
49
155
  }
50
156
  }
51
157
 
52
- .@{bk-prefix}-modal-ctx {
53
- &.@{bk-prefix}-sideslider-wrapper {
54
- .@{bk-prefix}-modal-wrapper {
55
- position: absolute;
56
- top: 0;
57
- bottom: 0;
58
- left: auto;
59
- transform: initial;
60
-
61
- &.scroll-able {
62
- .@{bk-prefix}-modal-content {
63
- overflow: auto;
64
- height: 100%;
65
- }
66
- }
67
158
 
68
- .@{bk-prefix}-sideslider-header {
69
- width: 100%;
70
- height: 52px;
71
- background: #fff;
72
- border-bottom: 1px solid #dcdee5;
73
-
74
- .@{bk-prefix}-sideslider-close {
75
- position: absolute;
76
- top: 0;
77
- width: 30px;
78
- height: 52px;
79
- font-size: 24px;
80
- line-height: 52px;
81
- color: #fff;
82
- text-align: center;
83
- cursor: pointer;
84
- background-color: @primary-color;
85
-
86
- &.right {
87
- left: 0;
88
-
89
- &::before {
90
- top: 50%;
91
- left: 50%;
92
- display: inline-block;
93
- width: 8px;
94
- height: 8px;
95
- border-top: solid 2px #fff;
96
- border-right: solid 2px #fff;
97
- content: '';
98
- transform: translate(-50%, -50%) rotate(45deg);
99
- }
100
- }
101
-
102
- &.left {
103
- right: 0;
104
-
105
- &::before {
106
- top: 50%;
107
- left: 50%;
108
- display: inline-block;
109
- width: 8px;
110
- height: 8px;
111
- border-top: solid 2px #fff;
112
- border-left: solid 2px #fff;
113
- content: '';
114
- transform: translate(50%, -50%) rotate(-45deg);
115
- }
116
- }
117
-
118
-
119
- }
120
-
121
- .@{bk-prefix}-sideslider-title {
122
- display: flex;
123
- height: 52px;
124
- padding-left: 30px;
125
- font-size: 16px;
126
- color: #313238;
127
- align-items: center;
128
-
129
- &.right {
130
- width: 100%;
131
- padding: 0 0 0 30+16px;
132
- }
133
- }
134
- }
135
-
136
- .@{bk-prefix}-sideslider-footer {
137
- display: flex;
138
- width: 100%;
139
- height: 54px;
140
- background: #fff;
141
- border-top: 1px solid transparent;
142
- align-items: center;
143
- box-shadow: rgb(0 0 0 / 6%) 0 -2px 4px 0;
144
- }
145
- }
146
-
147
- }
148
- }
149
159
 
@@ -134,56 +134,29 @@
134
134
  bottom: 0;
135
135
  left: 0;
136
136
  }
137
- /* fade-center */
138
- /* slide过渡动画 */
139
- .slide-enter-active,
140
- .slide-leave-active,
141
- .bk-modal-body {
142
- transform: translateX(0);
143
- transition: transform 0.25s;
144
- }
145
- .slide-enter-active {
146
- animation: slider-fade-in 0.25s;
147
- }
148
- .slide-leave-active {
149
- animation: slider-fade-in 0.25s reverse;
150
- }
151
- .slide-enter-from.left,
152
- .slide-leave-to.left {
153
- transform: translateX(-100%);
154
- transition: transform 0.25s;
155
- }
156
- .slide-enter-from.right,
157
- .slide-leave-to.right {
158
- transform: translateX(100%);
159
- transition: transform 0.25s;
160
- }
161
- @keyframes slider-fade-in {
162
- 0% {
163
- opacity: 0;
164
- }
165
- 100% {
166
- opacity: 1;
167
- }
168
- }
169
- .bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper {
137
+ .bk-sideslider .bk-modal-wrapper {
170
138
  position: absolute;
171
139
  top: 0;
172
140
  bottom: 0;
173
141
  left: auto;
174
142
  transform: initial;
175
143
  }
176
- .bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper.scroll-able .bk-modal-content {
144
+ .bk-sideslider .bk-modal-wrapper.scroll-able .bk-modal-content {
177
145
  overflow: auto;
178
- height: 100%;
179
146
  }
180
- .bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header {
147
+ .bk-sideslider .bk-modal-footer.is-fixed .bk-sideslider-footer {
148
+ height: 54px;
149
+ margin: 0;
150
+ border-top: 1px solid transparent;
151
+ box-shadow: rgba(0, 0, 0, 0.06) 0 -2px 4px 0;
152
+ }
153
+ .bk-sideslider-header {
181
154
  width: 100%;
182
155
  height: 52px;
183
156
  background: #fff;
184
157
  border-bottom: 1px solid #dcdee5;
185
158
  }
186
- .bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close {
159
+ .bk-sideslider-close {
187
160
  position: absolute;
188
161
  top: 0;
189
162
  width: 30px;
@@ -195,10 +168,10 @@
195
168
  cursor: pointer;
196
169
  background-color: var(--primary-color);
197
170
  }
198
- .bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.right {
171
+ .bk-sideslider-close.right {
199
172
  left: 0;
200
173
  }
201
- .bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.right::before {
174
+ .bk-sideslider-close.right::before {
202
175
  top: 50%;
203
176
  left: 50%;
204
177
  display: inline-block;
@@ -209,10 +182,10 @@
209
182
  content: '';
210
183
  transform: translate(-50%, -50%) rotate(45deg);
211
184
  }
212
- .bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.left {
185
+ .bk-sideslider-close.left {
213
186
  right: 0;
214
187
  }
215
- .bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-close.left::before {
188
+ .bk-sideslider-close.left::before {
216
189
  top: 50%;
217
190
  left: 50%;
218
191
  display: inline-block;
@@ -223,7 +196,7 @@
223
196
  content: '';
224
197
  transform: translate(50%, -50%) rotate(-45deg);
225
198
  }
226
- .bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-title {
199
+ .bk-sideslider-title {
227
200
  display: flex;
228
201
  height: 52px;
229
202
  padding-left: 30px;
@@ -231,16 +204,53 @@
231
204
  color: #313238;
232
205
  align-items: center;
233
206
  }
234
- .bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-header .bk-sideslider-title.right {
207
+ .bk-sideslider-title.right {
235
208
  width: 100%;
236
209
  padding: 0 0 0 46px;
237
210
  }
238
- .bk-modal-ctx.bk-sideslider-wrapper .bk-modal-wrapper .bk-sideslider-footer {
211
+ .bk-sideslider-content {
212
+ padding-right: 24px;
213
+ padding-left: 24px;
214
+ overflow-y: scroll;
215
+ }
216
+ .bk-sideslider-footer {
239
217
  display: flex;
240
218
  width: 100%;
241
219
  height: 54px;
220
+ padding: 0 24px;
221
+ margin-top: 24px;
242
222
  background: #fff;
243
- border-top: 1px solid transparent;
244
223
  align-items: center;
245
- box-shadow: rgba(0, 0, 0, 0.06) 0 -2px 4px 0;
224
+ }
225
+ /* fade-center */
226
+ /* slide过渡动画 */
227
+ .slide-enter-active,
228
+ .slide-leave-active,
229
+ .bk-modal-body {
230
+ transform: translateX(0);
231
+ transition: transform 0.25s;
232
+ }
233
+ .slide-enter-active {
234
+ animation: slider-fade-in 0.25s;
235
+ }
236
+ .slide-leave-active {
237
+ animation: slider-fade-in 0.25s reverse;
238
+ }
239
+ .slide-enter-from.left,
240
+ .slide-leave-to.left {
241
+ transform: translateX(-100%);
242
+ transition: transform 0.25s;
243
+ }
244
+ .slide-enter-from.right,
245
+ .slide-leave-to.right {
246
+ transform: translateX(100%);
247
+ transition: transform 0.25s;
248
+ }
249
+ @keyframes slider-fade-in {
250
+ 0% {
251
+ opacity: 0;
252
+ }
253
+ 100% {
254
+ opacity: 1;
255
+ }
246
256
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bkui-vue",
3
- "version": "1.0.3-beta.41",
3
+ "version": "1.0.3-beta.42",
4
4
  "workspaces": {
5
5
  "packages": [
6
6
  "packages/!(**.bak)*",