fixed-vuesax 3.14.1 → 3.14.2

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 (47) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +187 -187
  3. package/dist/style/colors.styl +30 -30
  4. package/dist/style/components/vsAlert.styl +66 -66
  5. package/dist/style/components/vsAvatar.styl +64 -64
  6. package/dist/style/components/vsBreadcrumb.styl +50 -50
  7. package/dist/style/components/vsButton.styl +181 -181
  8. package/dist/style/components/vsCard.styl +64 -64
  9. package/dist/style/components/vsCheckBox.styl +111 -111
  10. package/dist/style/components/vsChip.styl +122 -122
  11. package/dist/style/components/vsCollapse.styl +109 -109
  12. package/dist/style/components/vsDivider.styl +34 -34
  13. package/dist/style/components/vsDropDown.styl +231 -231
  14. package/dist/style/components/vsIcon.styl +47 -47
  15. package/dist/style/components/vsImages.styl +166 -166
  16. package/dist/style/components/vsInput.styl +219 -219
  17. package/dist/style/components/vsInputNumber.styl +170 -170
  18. package/dist/style/components/vsList.styl +49 -49
  19. package/dist/style/components/vsLoading.styl +397 -397
  20. package/dist/style/components/vsNavbar.styl +286 -286
  21. package/dist/style/components/vsNotifications.styl +92 -92
  22. package/dist/style/components/vsPagination.styl +143 -143
  23. package/dist/style/components/vsPopup.styl +159 -159
  24. package/dist/style/components/vsProgress.styl +45 -45
  25. package/dist/style/components/vsRadio.styl +93 -93
  26. package/dist/style/components/vsSelect.styl +219 -219
  27. package/dist/style/components/vsSideBar.styl +267 -267
  28. package/dist/style/components/vsSlider.styl +196 -196
  29. package/dist/style/components/vsSpacer.styl +5 -5
  30. package/dist/style/components/vsSwitch.styl +93 -93
  31. package/dist/style/components/vsTable.styl +408 -408
  32. package/dist/style/components/vsTabs.styl +280 -280
  33. package/dist/style/components/vsTextarea.styl +82 -82
  34. package/dist/style/components/vsTimePicker.styl +42 -42
  35. package/dist/style/components/vsTooltip.styl +85 -85
  36. package/dist/style/components/vsUpload.styl +460 -460
  37. package/dist/style/mixins.styl +133 -133
  38. package/dist/style/root.styl +9 -9
  39. package/dist/style/vars.styl +45 -45
  40. package/dist/style/vuesax.styl +25 -25
  41. package/dist/vuesax.common.js +1 -1
  42. package/dist/vuesax.common.js.map +1 -1
  43. package/dist/vuesax.umd.js +1 -1
  44. package/dist/vuesax.umd.js.map +1 -1
  45. package/dist/vuesax.umd.min.js +1 -1
  46. package/dist/vuesax.umd.min.js.map +1 -1
  47. package/package.json +8 -8
package/dist/style/components/vsSlider.styl CHANGED
@@ -1,196 +1,196 @@
1
- .con-vs-slider
2
- width: 100%;
3
- position: relative
4
- left 0;
5
- margin: 16px 0
6
- display: block
7
- min-width 300px;
8
- z-index 100
9
-
10
- &.disabledx
11
- opacity .4;
12
- cursor default
13
-
14
- button
15
- cursor default !important
16
- pointer-events: none
17
-
18
- .vs-slider
19
- width: 100%;
20
- height 4px;
21
- border-radius: 4px;
22
- background: rgb(240, 240, 240)
23
- position relative
24
- cursor pointer
25
- border: 0;
26
- margin: 0;
27
- display: block
28
- overflow hidden
29
-
30
- .vs-slider-line-one
31
- width: 20px;
32
- height 100%;
33
- top: 0;
34
- position absolute
35
- left 0;
36
- z-index 1
37
-
38
- &.hasTransition
39
- transition: all .2s ease
40
-
41
- .vs-slider-line-effect
42
- width: 0;
43
- height 100%;
44
- top: 0;
45
- position absolute
46
- left 0;
47
- transition: opacity .3s ease, width .3s ease
48
- transform: translate(-50%)
49
-
50
- &:not(.run-effect)
51
- opacity 0 !important
52
- width: 0 !important;
53
-
54
- &.run-effect
55
- width: 100%;
56
- animation: example .3s ease
57
- animation-iteration-count: 1
58
-
59
- .vs-slider--tick
60
- position absolute
61
- left 100px;
62
- background: rgb(210, 210, 210)
63
- width: 4px;
64
- height 100%;
65
- top: 0;
66
-
67
- &.isEnd
68
- transform: translate(-100%)
69
-
70
- .vs-slider--circles
71
- transform: translate(-50%)
72
- transition: border .2s ease, transform .2s ease, border-radius .2s ease
73
- display block
74
- background: rgb(255, 255, 255)
75
-
76
- &:active
77
- border-width: 7px !important
78
-
79
- &.isEquals
80
- &.vs-circle-slider-two
81
- border-radius: 50% 50% 0 0
82
- transform: translate(-50%, -7px) scale(.9) !important
83
-
84
- &.vs-circle-slider
85
- border-radius: 0 0 50% 50%
86
- transform: translate(-50%, 6px) scale(.9) !important
87
-
88
- &.changeValue
89
- &:active
90
- border-width: 6px !important
91
-
92
- .text-circle-slider
93
- transform translate(-50%, calc(-100% + -19px)) !important
94
-
95
- &.isEndValue
96
- border-radius: 50% 0 0 50% !important
97
-
98
- &:hover:not(:active)
99
- transform scale(1.2) translate(-50%)
100
-
101
- &:active
102
- .text-circle-slider
103
- opacity 1
104
- transform: translate(-50%, calc(-100% + -13px)) scale(1) rotate(0deg)
105
- visibility visible
106
-
107
-
108
- // &:active
109
- // .text-circle-slider
110
- // transform: translate(-50%,calc(-100% + -15px)) scale(1) rotate(0deg)
111
- .vs-slider--circle-text
112
- color: rgb(255, 255, 255)
113
- position: absolute
114
- padding: 2px 5px;
115
- border-radius: 5px;
116
- transform: translate(-50%, -20%) scale(.3)
117
- top: 0;
118
- left 50%;
119
- font-size: .75rem
120
- opacity 0;
121
- visibility hidden
122
- transition: all .2s ease
123
- display: flex
124
- align-items: center
125
- justify-content: center
126
- z-index 1000
127
-
128
- span
129
- margin-left: 2px;
130
-
131
- i
132
- font-size: .8rem
133
- margin-left: 2px
134
-
135
- &:after
136
- content: ''
137
- width: 6px;
138
- height 6px;
139
- display: block
140
- position: absolute
141
- background: inherit
142
- left 50%;
143
- bottom: -3px;
144
- transform: translate(-50%) rotate(45deg)
145
-
146
-
147
- .vs-slider--circle
148
- width: 16px;
149
- height 16px;
150
- position: absolute
151
- top: -6px;
152
- border-radius: 50%;
153
- cursor pointer
154
- border: 0;
155
- margin: 0;
156
- z-index 200
157
-
158
- &.hasTransition
159
- transition: all .2s ease
160
-
161
- .vs-slider--circle-two
162
- z-index 100;
163
- width: 16px;
164
- height 16px;
165
- position: absolute
166
- top: -6px;
167
- border-radius: 50%;
168
- cursor pointer
169
- border: 0;
170
- margin: 0;
171
- color rgb(255, 255, 255)
172
-
173
- &.hasTransition
174
- transition: all .2s ease
175
-
176
- @keyframes example
177
- 0%
178
- opacity 1
179
- 100%
180
- opacity 0
181
-
182
-
183
- for colorx, i in $vs-colors
184
- .vs-slider-{colorx}
185
-
186
- .vs-slider-line-one
187
- background: getColor(colorx, 1)
188
-
189
- .vs-circles-slider
190
- border: 2px solid getColor(colorx, 1)
191
-
192
- .text-circle-slider
193
- background: getColor(colorx, 1)
194
-
195
- .vs-slider-line-effect
196
- background: getColor(colorx, 1)
1
+ .con-vs-slider
2
+ width: 100%;
3
+ position: relative
4
+ left 0;
5
+ margin: 16px 0
6
+ display: block
7
+ min-width 300px;
8
+ z-index 100
9
+
10
+ &.disabledx
11
+ opacity .4;
12
+ cursor default
13
+
14
+ button
15
+ cursor default !important
16
+ pointer-events: none
17
+
18
+ .vs-slider
19
+ width: 100%;
20
+ height 4px;
21
+ border-radius: 4px;
22
+ background: rgb(240, 240, 240)
23
+ position relative
24
+ cursor pointer
25
+ border: 0;
26
+ margin: 0;
27
+ display: block
28
+ overflow hidden
29
+
30
+ .vs-slider-line-one
31
+ width: 20px;
32
+ height 100%;
33
+ top: 0;
34
+ position absolute
35
+ left 0;
36
+ z-index 1
37
+
38
+ &.hasTransition
39
+ transition: all .2s ease
40
+
41
+ .vs-slider-line-effect
42
+ width: 0;
43
+ height 100%;
44
+ top: 0;
45
+ position absolute
46
+ left 0;
47
+ transition: opacity .3s ease, width .3s ease
48
+ transform: translate(-50%)
49
+
50
+ &:not(.run-effect)
51
+ opacity 0 !important
52
+ width: 0 !important;
53
+
54
+ &.run-effect
55
+ width: 100%;
56
+ animation: example .3s ease
57
+ animation-iteration-count: 1
58
+
59
+ .vs-slider--tick
60
+ position absolute
61
+ left 100px;
62
+ background: rgb(210, 210, 210)
63
+ width: 4px;
64
+ height 100%;
65
+ top: 0;
66
+
67
+ &.isEnd
68
+ transform: translate(-100%)
69
+
70
+ .vs-slider--circles
71
+ transform: translate(-50%)
72
+ transition: border .2s ease, transform .2s ease, border-radius .2s ease
73
+ display block
74
+ background: rgb(255, 255, 255)
75
+
76
+ &:active
77
+ border-width: 7px !important
78
+
79
+ &.isEquals
80
+ &.vs-circle-slider-two
81
+ border-radius: 50% 50% 0 0
82
+ transform: translate(-50%, -7px) scale(.9) !important
83
+
84
+ &.vs-circle-slider
85
+ border-radius: 0 0 50% 50%
86
+ transform: translate(-50%, 6px) scale(.9) !important
87
+
88
+ &.changeValue
89
+ &:active
90
+ border-width: 6px !important
91
+
92
+ .text-circle-slider
93
+ transform translate(-50%, calc(-100% + -19px)) !important
94
+
95
+ &.isEndValue
96
+ border-radius: 50% 0 0 50% !important
97
+
98
+ &:hover:not(:active)
99
+ transform scale(1.2) translate(-50%)
100
+
101
+ &:active
102
+ .text-circle-slider
103
+ opacity 1
104
+ transform: translate(-50%, calc(-100% + -13px)) scale(1) rotate(0deg)
105
+ visibility visible
106
+
107
+
108
+ // &:active
109
+ // .text-circle-slider
110
+ // transform: translate(-50%,calc(-100% + -15px)) scale(1) rotate(0deg)
111
+ .vs-slider--circle-text
112
+ color: rgb(255, 255, 255)
113
+ position: absolute
114
+ padding: 2px 5px;
115
+ border-radius: 5px;
116
+ transform: translate(-50%, -20%) scale(.3)
117
+ top: 0;
118
+ left 50%;
119
+ font-size: .75rem
120
+ opacity 0;
121
+ visibility hidden
122
+ transition: all .2s ease
123
+ display: flex
124
+ align-items: center
125
+ justify-content: center
126
+ z-index 1000
127
+
128
+ span
129
+ margin-left: 2px;
130
+
131
+ i
132
+ font-size: .8rem
133
+ margin-left: 2px
134
+
135
+ &:after
136
+ content: ''
137
+ width: 6px;
138
+ height 6px;
139
+ display: block
140
+ position: absolute
141
+ background: inherit
142
+ left 50%;
143
+ bottom: -3px;
144
+ transform: translate(-50%) rotate(45deg)
145
+
146
+
147
+ .vs-slider--circle
148
+ width: 16px;
149
+ height 16px;
150
+ position: absolute
151
+ top: -6px;
152
+ border-radius: 50%;
153
+ cursor pointer
154
+ border: 0;
155
+ margin: 0;
156
+ z-index 200
157
+
158
+ &.hasTransition
159
+ transition: all .2s ease
160
+
161
+ .vs-slider--circle-two
162
+ z-index 100;
163
+ width: 16px;
164
+ height 16px;
165
+ position: absolute
166
+ top: -6px;
167
+ border-radius: 50%;
168
+ cursor pointer
169
+ border: 0;
170
+ margin: 0;
171
+ color rgb(255, 255, 255)
172
+
173
+ &.hasTransition
174
+ transition: all .2s ease
175
+
176
+ @keyframes example
177
+ 0%
178
+ opacity 1
179
+ 100%
180
+ opacity 0
181
+
182
+
183
+ for colorx, i in $vs-colors
184
+ .vs-slider-{colorx}
185
+
186
+ .vs-slider-line-one
187
+ background: getColor(colorx, 1)
188
+
189
+ .vs-circles-slider
190
+ border: 2px solid getColor(colorx, 1)
191
+
192
+ .text-circle-slider
193
+ background: getColor(colorx, 1)
194
+
195
+ .vs-slider-line-effect
196
+ background: getColor(colorx, 1)
package/dist/style/components/vsSpacer.styl CHANGED
@@ -1,5 +1,5 @@
1
- .vs-spacer
2
- padding: 0
3
- margin: 0
4
- flex-grow: 1 !important
5
- background: transparent
1
+ .vs-spacer
2
+ padding: 0
3
+ margin: 0
4
+ flex-grow: 1 !important
5
+ background: transparent
package/dist/style/components/vsSwitch.styl CHANGED
@@ -1,93 +1,93 @@
1
- .vs-switch
2
- border-radius: 12px
3
- border: 0
4
- min-width: 42px
5
- height: 22px
6
- position: relative
7
- cursor: pointer
8
- transition: all .2s ease
9
- display: flex
10
- align-items: center
11
- justify-content: center
12
-
13
- &:disabled
14
- opacity $vs-disabled-opacity
15
- cursor: default
16
- pointer-events: none
17
-
18
- &:active:not(.vs-switch--circle)
19
- .vs-switch--circle
20
- width: 24px
21
- border-radius: 15px
22
-
23
- &.vs-switch-active
24
- &:active
25
- .vs-switch--circle
26
- width: 24px
27
- margin-left: calc(100% - 29px)
28
-
29
- .vs-switch--circle
30
- margin-left: calc(100% - 22px)
31
-
32
- .vs-switch--circle
33
- display: block
34
- width: 18px
35
- height: 18px
36
- position: absolute
37
- background: rgb(255, 255, 255)
38
- left: 2px
39
- top: 2px
40
- border-radius: 50%
41
- transition: all .25s ease
42
- box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1)
43
-
44
- .vs-switch--text
45
- position: absolute
46
- font-size: 0.625em
47
- opacity: 0
48
- transition: all .2s ease
49
- display: flex
50
- align-items: center
51
- justify-content: center
52
- white-space: nowrap
53
- overflow: hidden
54
-
55
- &.text-on
56
- padding-left: 6px
57
- left: 0
58
- color: rgb(255, 255, 255)
59
- transform: translate(10px)
60
-
61
- &.text-off
62
- right: 0
63
- padding-right: 5px
64
- color: rgb(160, 160, 160)
65
- transform: translate(-10px)
66
-
67
- &.active-text
68
- opacity: 1
69
- transform: translate(0px)
70
-
71
- .vs-switch--icon
72
- font-size: 0.8rem
73
- display: flex
74
- align-items: center
75
- justify-content: center
76
- overflow: hidden
77
- max-width: 16px
78
- padding: 0 2px
79
-
80
- .vs-switch--input
81
- position: absolute
82
- width: 100%
83
- height: 100%
84
- z-index: 200
85
- opacity: 0
86
- cursor: pointer
87
-
88
- for colorx, i in $vs-colors
89
- .vs-switch-{colorx}
90
- background: rgb(226, 226, 226)
91
-
92
- &.vs-switch-active
93
- background: getColor(colorx, 1)
1
+ .vs-switch
2
+ border-radius: 12px
3
+ border: 0
4
+ min-width: 42px
5
+ height: 22px
6
+ position: relative
7
+ cursor: pointer
8
+ transition: all .2s ease
9
+ display: flex
10
+ align-items: center
11
+ justify-content: center
12
+
13
+ &:disabled
14
+ opacity $vs-disabled-opacity
15
+ cursor: default
16
+ pointer-events: none
17
+
18
+ &:active:not(.vs-switch--circle)
19
+ .vs-switch--circle
20
+ width: 24px
21
+ border-radius: 15px
22
+
23
+ &.vs-switch-active
24
+ &:active
25
+ .vs-switch--circle
26
+ width: 24px
27
+ margin-left: calc(100% - 29px)
28
+
29
+ .vs-switch--circle
30
+ margin-left: calc(100% - 22px)
31
+
32
+ .vs-switch--circle
33
+ display: block
34
+ width: 18px
35
+ height: 18px
36
+ position: absolute
37
+ background: rgb(255, 255, 255)
38
+ left: 2px
39
+ top: 2px
40
+ border-radius: 50%
41
+ transition: all .25s ease
42
+ box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1)
43
+
44
+ .vs-switch--text
45
+ position: absolute
46
+ font-size: 0.625em
47
+ opacity: 0
48
+ transition: all .2s ease
49
+ display: flex
50
+ align-items: center
51
+ justify-content: center
52
+ white-space: nowrap
53
+ overflow: hidden
54
+
55
+ &.text-on
56
+ padding-left: 6px
57
+ left: 0
58
+ color: rgb(255, 255, 255)
59
+ transform: translate(10px)
60
+
61
+ &.text-off
62
+ right: 0
63
+ padding-right: 5px
64
+ color: rgb(160, 160, 160)
65
+ transform: translate(-10px)
66
+
67
+ &.active-text
68
+ opacity: 1
69
+ transform: translate(0px)
70
+
71
+ .vs-switch--icon
72
+ font-size: 0.8rem
73
+ display: flex
74
+ align-items: center
75
+ justify-content: center
76
+ overflow: hidden
77
+ max-width: 16px
78
+ padding: 0 2px
79
+
80
+ .vs-switch--input
81
+ position: absolute
82
+ width: 100%
83
+ height: 100%
84
+ z-index: 200
85
+ opacity: 0
86
+ cursor: pointer
87
+
88
+ for colorx, i in $vs-colors
89
+ .vs-switch-{colorx}
90
+ background: rgb(226, 226, 226)
91
+
92
+ &.vs-switch-active
93
+ background: getColor(colorx, 1)