@woosmap/ui 3.29.0 → 3.33.0

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 (36) hide show
  1. package/.storybook/preview.js +2 -2
  2. package/package.json +2 -2
  3. package/src/components/Dropdown/Dropdown.js +1 -1
  4. package/src/components/Icon/Icon.js +6 -0
  5. package/src/icons/care.svg +1 -0
  6. package/src/icons/elephant.svg +1 -0
  7. package/src/icons/speed.svg +1 -0
  8. package/src/styles/console/variables.styl +12 -54
  9. package/src/styles/style-console.styl +7 -6
  10. package/src/styles/style-website.styl +13 -9
  11. package/src/styles/website/MerchantDemo.styl +73 -54
  12. package/src/styles/website/button.styl +390 -140
  13. package/src/styles/website/card.styl +302 -0
  14. package/src/styles/website/colors.styl +279 -46
  15. package/src/styles/website/dropdown.styl +123 -0
  16. package/src/styles/website/fonts.styl +1 -1
  17. package/src/styles/website/input.styl +7 -7
  18. package/src/styles/website/mixins.styl +192 -4
  19. package/src/styles/website/popover.styl +8 -0
  20. package/src/styles/website/select.styl +47 -25
  21. package/src/styles/website/skeletondemo.styl +246 -521
  22. package/src/styles/website/tab.styl +5 -2
  23. package/src/styles/website/variables.styl +111 -28
  24. package/src/styles/next-website/MerchantDemo.styl +0 -222
  25. package/src/styles/next-website/button.styl +0 -416
  26. package/src/styles/next-website/colors.styl +0 -287
  27. package/src/styles/next-website/demo.styl +0 -264
  28. package/src/styles/next-website/dropdown.styl +0 -82
  29. package/src/styles/next-website/font.styl +0 -1
  30. package/src/styles/next-website/input.styl +0 -138
  31. package/src/styles/next-website/mixins.styl +0 -128
  32. package/src/styles/next-website/select.styl +0 -113
  33. package/src/styles/next-website/tab.styl +0 -41
  34. package/src/styles/next-website/variables.styl +0 -120
  35. package/src/styles/style-next-website.styl +0 -26
  36. package/src/styles/website/style.styl +0 -2
package/src/styles/website/button.styl CHANGED
@@ -1,159 +1,409 @@
1
- btn()
2
- br()
3
- textShadow()
4
- focus()
5
- display inline-flex
6
- align-items center
7
- height $buttonHeight
8
- padding 0 $buttonPadding
9
- cursor pointer
10
- line-height 1.3
11
- color $light
12
- background-color $primary
13
- transition 0.3s all ease
14
- white-space nowrap
15
1
  .btn
16
2
  cursor pointer
3
+ text-decoration none
4
+ .icon
5
+ flex-shrink 0
17
6
  &.active
18
7
  cursor default
19
- box-shadow none
20
- &--group
21
- &-container
22
- flexMiddle()
8
+ &:disabled
9
+ &:not(.btn--group)
10
+ cursor default
11
+ opacity .3
12
+ box-shadow none
13
+ &:hover
14
+ opacity .3
15
+ &--icon
16
+ &:not(.btn--link):not(.btn--link-primary):not(.btn--link-info):not(.btn--link-flex):not(.btn--link-flex-info):not(.btn--group):not(.btn--sidebar-link)
17
+ sq()
18
+ btn()
19
+ justify-content center
20
+ padding 0
21
+ &.btn--loading
22
+ padding 0
23
+ .icon
24
+ sq(2.4)
25
+ &.btn--small
26
+ buttonSmall()
27
+ width $buttonHeightSmall
28
+ &.btn--mini
29
+ buttonMini()
30
+ width $buttonHeightMini
31
+ &.btn--large
32
+ buttonLarge()
33
+ width $buttonHeightLarge
34
+ &.btn--primary
35
+ &:disabled
36
+ &:hover
37
+ background-color $primary
38
+ .icon
39
+ fill $light
40
+ &.btn--loading
41
+ &:hover
42
+ background-color $primary
43
+ &.btn--secondary
44
+ &:disabled
45
+ &:hover
46
+ background-color transparent
47
+ border-color $inputBorderColor
48
+ .icon
49
+ fill $secondary
50
+ &.btn--important
51
+ &:disabled
52
+ &:hover
53
+ background-color $error
54
+ .icon
55
+ fill $light
56
+ &.btn--has-icon
57
+ &:not(.btn--small):not(.btn--large)
58
+ mbi(.4)
59
+ &.btn--icon
60
+ flex-shrink 0
61
+ .icon
62
+ flex-shrink 0
63
+ &--primary
64
+ &--important
23
65
  btn()
24
- text-shadow none
25
- color $dark60
26
- border 0.1rem solid $dark40
27
- border-width 0.1rem 0 0.1rem 0.1rem
28
- border-radius 0.6rem 0 0 0.6rem
29
- background $light
30
- box-shadow inset 0 -0.4rem 0.4rem $dark20
31
- &--icon
32
- .flag
33
- opacity 0.75
34
- img
35
- opacity 0.55
36
- &.active
37
- .flag
38
- img
39
- opacity 1
40
- &:not(:first-child):not(:last-child)
41
- border-width 0.1rem 0 0.1rem 0.1rem
42
- border-radius 0
43
- &:last-child
44
- border-radius 0 0.6rem 0.6rem 0
45
- border-width 0.1rem
66
+ textShadow()
67
+ color $light
68
+ .icon
69
+ fill $light
70
+ trans()
71
+ &.btn--loading:not(.btn--small):not(.btn--large)
72
+ disableHoverEffect()
73
+ .icon
74
+ margin-right .3rem
75
+ sq(2.2)
76
+ &.btn--has-icon
77
+ &:not(.btn--small):not(.btn--large)
78
+ mbi(.4)
79
+ &.btn--icon
80
+ flex-shrink 0
81
+ .icon
82
+ flex-shrink 0
83
+ &--primary
84
+ background-color $primary
85
+ &:disabled
86
+ &:hover
87
+ background-color $primary
46
88
  &:hover
47
- background-color $primary2
48
- color $dark
49
- box-shadow inset 0 -0.8rem 0.8rem $dark10
50
- &.active
51
- color $dark90
89
+ background-color $linkColorHover
90
+ &--important
91
+ background-color $error
92
+ &:disabled
93
+ &:hover
94
+ background-color $error
95
+ &:hover
96
+ background-color $linkColorHover
97
+ &--secondary
98
+ btn()
99
+ color $secondary
100
+ background-color $light
101
+ border .1rem solid $inputBorderColor
102
+ .icon
103
+ fill $secondary
104
+ trans()
105
+ &.btn--has-icon
106
+ mbi(.4)
107
+ &.btn--icon
108
+ flex-shrink 0
109
+ .icon
110
+ flex-shrink 0
111
+ &:hover
112
+ border-color $linkColorHover
113
+ background-color $linkColorHover
114
+ &.btn--loading
115
+ &:hover
116
+ background-color transparent
117
+ color $secondary
118
+ cursor default
119
+ border-color $inputBorderColor
120
+ .icon
121
+ fill $secondary
122
+ &:disabled
123
+ opacity .4
52
124
  cursor default
53
- box-shadow none
125
+ &:disabled
126
+ &:hover
127
+ opacity .4
128
+ background-color transparent
129
+ color $secondary
130
+ border-color $inputBorderColor
131
+ .icon
132
+ fill $secondary
133
+ &--inverse
134
+ btn()
135
+ background-color transparent
136
+ border .1rem solid $light
137
+ color $light
138
+ .icon
139
+ fill $light
140
+ &.btn--has-icon
141
+ mbi(.4)
142
+ &.btn--icon
143
+ flex-shrink 0
144
+ .icon
145
+ flex-shrink 0
146
+ &:hover
147
+ border-color $linkColorHover
148
+ color $light
149
+ .icon
150
+ fill $light
151
+ &:disabled
152
+ opacity .3
54
153
  &:hover
55
- background-color $light
56
- &--tab
57
- fullw()
58
- display inline-flex
59
- align-items center
60
- height: $tabBtnHeight + 1
61
- color $tabBtn
62
- font-weight 400
63
- transition color 0.1s
64
- padding 0 1rem
154
+ cursor default
155
+ border-color $linkColorHover
156
+ color $light
157
+ .icon
158
+ fill $light
159
+ &--link-flex
160
+ &--link-flex-info
161
+ &--link
162
+ &--link-primary
163
+ &--link-info
164
+ focus()
165
+ trans()
166
+ height auto
167
+ padding 0
168
+ line-height $fontSize
169
+ color $secondary
170
+ vertical-align baseline
65
171
  position relative
66
- border-radius 0
67
- background-color transparent
68
- font-size 85%
69
- text-transform uppercase
70
- span
71
- ellipsis()
72
- &:after
73
- content ''
74
- display block
75
- width 0
76
- height 0.3rem
77
- background $tabBtnActiveBorder
78
- transition width 0.1s
79
- position absolute
80
- bottom 0
81
- left 0
172
+ .btn__label
173
+ line-height $fontSize
174
+ vertical-align baseline
82
175
  &:hover
83
- color $tabBtnHover
84
- &:after
85
- background $tabBtnHoverBorder
86
- width 100%
87
- &.active
88
- color $tabBtnActive
89
- &:after
90
- width 100%
176
+ text-decoration underline
177
+ color $primary
178
+ .icon
179
+ fill $primary
180
+ &:disabled
181
+ cursor default
182
+ opacity .3
91
183
  &:hover
92
- &:after
93
- background $tabBtnActive
94
- &:focus
95
- background-color $primary-dark
96
- &--action
97
- br()
98
- flexMiddle()
184
+ color inherit
185
+ opacity .3
186
+ text-decoration underline
187
+ .icon
188
+ fill inherit
189
+ .label &
190
+ &:hover
191
+ .icon
192
+ fill $light
193
+ &.btn--icon
194
+ padding 0
195
+ text-decoration none
196
+ &.btn--has-icon
197
+ &:not(.btn--icon-right)
198
+ .icon
199
+ margin-right .3rem
200
+ &.btn--icon-right
201
+ .icon
202
+ margin-left .3rem
203
+ &--link
204
+ &--link-primary
205
+ &--link-info
206
+ .icon
207
+ trans()
208
+ position relative
209
+ top .7rem
210
+ &:not(.btn--icon-right)
211
+ .icon
212
+ left -.3rem
213
+ &.btn--small
214
+ .icon
215
+ top .5rem
216
+ left -.3rem
217
+ &.btn--large
218
+ .icon
219
+ top 1.2rem
220
+ left -.3rem
221
+ &.btn--icon-right
222
+ .icon
223
+ right -.3rem
224
+ &.btn--small
225
+ .icon
226
+ top .5rem
227
+ rigth -.3rem
228
+ &.btn--large
229
+ .icon
230
+ top 1.2rem
231
+ rigth -.3rem
232
+ &--link-flex
233
+ &--link-flex-info
234
+ display flex
235
+ align-items center
236
+ &.btn--no-label
237
+ display flex
238
+ align-items center
239
+ justify-content center
240
+ &.btn--large
241
+ &.btn--small
99
242
  height auto
100
- font-size 1.1rem
101
- letter-spacing 0.1rem
102
- line-height 1
103
- margin-left auto
104
- background-color $light
105
- border 0.1rem solid $dark10
106
- padding 0 1rem
107
- height 2.4rem
243
+ padding 0 !important
244
+ &--link-flex-info
245
+ &:hover
108
246
  color $primary
109
- transition 0.3s all
110
- text-transform uppercase
247
+ text-decoration none
248
+ .icon
249
+ fill $primary
250
+ &:disabled
111
251
  &:hover
112
- &.copied
113
- background-color $resultMatch
114
- border-color $dark10
115
- color $dark
116
- &:focus
117
- background-color $secondary
118
- color $light
252
+ color $primary
253
+ text-decoration none
254
+ .icon
255
+ fill $primary
119
256
  &--link
120
- padding 0
121
- height auto
122
- line-height 1.4
257
+ &--link-flex
258
+ &.btn--light-color
259
+ color $secondary-medium40
260
+ .icon
261
+ trans()
262
+ fill $secondary-medium40
263
+ &:hover
264
+ color $primary
265
+ .icon
266
+ fill $primary
267
+ &--link-primary
268
+ color $primary
269
+ .icon
270
+ fill $primary
271
+ &:disabled
272
+ &:hover
273
+ color $primary
274
+ text-decoration none
275
+ .icon
276
+ fill $primary
277
+ &--link-info
278
+ &--link-flex-info
279
+ color $info
280
+ .icon
281
+ fill $info
123
282
  &:hover
124
- &:focus
283
+ color $primary
125
284
  text-decoration underline
126
- &--primary
127
- btn()
285
+ .icon
286
+ fill $primary
287
+ &--link-info
288
+ &--link-flex-info
289
+ &--link-flex
290
+ transition none
128
291
  .icon
129
- fill $light
130
- &.disabled
131
- background $primary30
132
- &--secondary
133
- btn()
134
- color $dark
135
- background $light
136
- border .1rem solid
137
- &--important
138
- btn()
139
- background $light
140
- color $importantColor
141
- border .1rem solid
292
+ trans()
293
+ .btn__label
294
+ trans()
295
+
296
+ &--has-icon
297
+ &:not(.btn--icon):not(.btn--link):not(.btn--link-primary):not(.btn--link-info):not(.btn--link-flex):not(.btn--link-flex-info):not(.btn--loading):not(.btn--mini):not(.btn--small):not(.btn--large):not(.btn--dropdown-item):not(.btn--tab):not(.btn--sidebar-link):not(.btn--icon-right)
298
+ padding 0 $padding 0 $padding - .6
299
+ &:not(.btn--icon):not(.btn--link):not(.btn--link-primary):not(.btn--link-info):not(.btn--link-flex):not(.btn--link-flex-info):not(.btn--loading):not(.btn--mini):not(.btn--small):not(.btn--large):not(.btn--dropdown-item):not(.btn--tab):not(.btn--sidebar-link)
300
+ &.btn--icon-right
301
+ padding 0 $padding - .6 0 $padding
302
+ &--loading
303
+ &:not(.btn--icon):not(.btn--small):not(.btn--large):not(.btn--sidebar-link)
304
+ padding-left $padding - .4
305
+ &:hover
306
+ &.btn--important
307
+ background-color $error
308
+ .icon
309
+ sq(2.2)
310
+
311
+
142
312
  &--small
143
- &.btn
144
- height $buttonHeightSmall
145
- font-size $buttonFontSizeSmall
146
- padding 0 1rem
147
- &--mini
148
- &.btn
149
- height $buttonHeightMini
150
- font-size $buttonFontSizeMini
151
- padding 0 1rem
152
- &--big
153
- &.btn
154
- height $buttonHeightLarge
155
- font-size $buttonFontSizeLarge
156
- padding 0 1rem
157
- &--icon
158
- img
159
- sq(2.6)
313
+ buttonSmall()
314
+ &.btn--group
315
+ &.btn--switch
316
+ buttonSmall()
317
+ &.btn--icon
318
+ width auto
319
+ img
320
+ max-width 2.2rem
321
+ &:not(.btn--custom-icon-size)
322
+ .icon
323
+ sq(1.8)
324
+ &:not(.btn--icon)
325
+ .icon
326
+ margin-right .4rem
327
+ &.btn--has-icon
328
+ padding-left $padding - .5
329
+ &.btn--loading
330
+ padding-left $padding - .4
331
+ disableHoverEffect()
332
+ .icon
333
+ sq(1.8)
334
+ &--large
335
+ buttonLarge()
336
+ &:not(.btn--custom-icon-size)
337
+ .icon
338
+ sq(3.2)
339
+ &:not(.btn--icon)
340
+ .icon
341
+ margin-right .6rem
342
+ &.btn--has-icon
343
+ padding-left $padding - .4
344
+ &.btn--loading
345
+ padding-left $padding
346
+ disableHoverEffect()
347
+ .icon
348
+ sq(3.2)
349
+ &--group
350
+ btn()
351
+ color $secondary-medium40
352
+ background-color $light
353
+ border .1rem solid $inputBorderColor
354
+ &.btn--has-icon
355
+ &:not(.btn--mini):not(.btn--small):not(.btn--large)
356
+ mbi(.4)
357
+ &.btn--icon
358
+ flex-shrink 0
359
+ .icon
360
+ flex-shrink 0
361
+ &:hover
362
+ color $secondary
363
+ background-color $primary10
364
+ &.active
365
+ color $light
366
+ border-color $secondary
367
+ background-color $secondary
368
+ .icon
369
+ fill $light
370
+ &:hover
371
+ background-color $secondary
372
+ &:disabled
373
+ background-color $secondary60
374
+ border-color $secondary-medium15
375
+ color $light70
376
+ .icon
377
+ fill $light70
378
+ &:disabled:not(.active)
379
+ color $secondary30
380
+ cursor default
381
+ .icon
382
+ fill $secondary30
383
+ &:hover
384
+ border-color $inputBorderColor
385
+ color $secondary30
386
+ background-color transparent
387
+ .icon
388
+ fill $secondary30
389
+ &-container
390
+ flexMiddle()
391
+ .btn
392
+ &:first-child
393
+ border-radius $borderRadius 0 0 $borderRadius
394
+ border-width .1rem 0 .1rem .1rem
395
+ &:not(:first-child):not(:last-child)
396
+ border-width .1rem 0 .1rem .1rem
397
+ border-radius 0
398
+ &:last-child
399
+ border-radius 0 $borderRadius $borderRadius 0
400
+ border-width .1rem
401
+ &--light
402
+ .btn
403
+ &.active
404
+ border-color $inputBorderColor
405
+ background-color $primary20
406
+ color $secondary
407
+ &:hover
408
+ background-color $primary20
409
+