fixed-vuesax 3.13.122 → 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 (49) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +187 -187
  3. package/dist/demo.html +1 -10
  4. package/dist/style/colors.styl +30 -30
  5. package/dist/style/components/vsAlert.styl +66 -66
  6. package/dist/style/components/vsAvatar.styl +64 -64
  7. package/dist/style/components/vsBreadcrumb.styl +50 -50
  8. package/dist/style/components/vsButton.styl +181 -181
  9. package/dist/style/components/vsCard.styl +64 -64
  10. package/dist/style/components/vsCheckBox.styl +111 -111
  11. package/dist/style/components/vsChip.styl +122 -122
  12. package/dist/style/components/vsCollapse.styl +109 -109
  13. package/dist/style/components/vsDivider.styl +34 -34
  14. package/dist/style/components/vsDropDown.styl +231 -231
  15. package/dist/style/components/vsIcon.styl +47 -47
  16. package/dist/style/components/vsImages.styl +166 -166
  17. package/dist/style/components/vsInput.styl +219 -219
  18. package/dist/style/components/vsInputNumber.styl +170 -170
  19. package/dist/style/components/vsList.styl +49 -49
  20. package/dist/style/components/vsLoading.styl +397 -397
  21. package/dist/style/components/vsNavbar.styl +286 -286
  22. package/dist/style/components/vsNotifications.styl +92 -92
  23. package/dist/style/components/vsPagination.styl +143 -143
  24. package/dist/style/components/vsPopup.styl +159 -159
  25. package/dist/style/components/vsProgress.styl +45 -45
  26. package/dist/style/components/vsRadio.styl +93 -93
  27. package/dist/style/components/vsSelect.styl +219 -219
  28. package/dist/style/components/vsSideBar.styl +267 -267
  29. package/dist/style/components/vsSlider.styl +196 -196
  30. package/dist/style/components/vsSpacer.styl +5 -5
  31. package/dist/style/components/vsSwitch.styl +93 -93
  32. package/dist/style/components/vsTable.styl +408 -408
  33. package/dist/style/components/vsTabs.styl +280 -280
  34. package/dist/style/components/vsTextarea.styl +82 -82
  35. package/dist/style/components/vsTimePicker.styl +42 -42
  36. package/dist/style/components/vsTooltip.styl +85 -85
  37. package/dist/style/components/vsUpload.styl +460 -460
  38. package/dist/style/mixins.styl +133 -133
  39. package/dist/style/root.styl +9 -9
  40. package/dist/style/vars.styl +45 -45
  41. package/dist/style/vuesax.styl +25 -25
  42. package/dist/vuesax.common.js +1 -1
  43. package/dist/vuesax.common.js.map +1 -1
  44. package/dist/vuesax.css +1 -1
  45. package/dist/vuesax.umd.js +1 -1
  46. package/dist/vuesax.umd.js.map +1 -1
  47. package/dist/vuesax.umd.min.js +2 -1
  48. package/dist/vuesax.umd.min.js.map +1 -0
  49. package/package.json +24 -26
@@ -1,159 +1,159 @@
1
- //animations
2
- .popup-t-enter, .popup-t-leave-to /* .popup-t-leave-active below version 2.1.8 */
3
- opacity: 0 !important;
4
-
5
- //box popup
6
- .popup-t-enter .vs-popup /* .fade-leave-active below version 2.1.8 */
7
- transform: scale(.9) !important;
8
-
9
- .popup-t-leave-to .vs-popup /* .fade-leave-active below version 2.1.8 */
10
- transform: scale(.9) !important;
11
-
12
- // animation: rebound .3s;
13
-
14
-
15
- @keyframes rebound
16
- 0%
17
- transform: scale(.9)
18
- 50%
19
- transform: scale(1.08)
20
- 100%
21
- transform: scale(1)
22
-
23
-
24
- // cancel / text
25
- .popup-t-enter .vs-popup-cancel, .popup-t-leave-to .vs-popup-cancel
26
- border-radius: 50% !important;
27
- propWithDir(transform, null, (8px -8px), scale(.5) !important)
28
-
29
- .popup-t-enter .vs-popup-text, .popup-t-leave-to .vs-popup-text
30
- opacity: 0;
31
- propWithDir(transform, null, (-15px), !important)
32
-
33
-
34
- .popup-t-enter header h3, .popup-t-leave-to header h3
35
- propWithDir(transform, null, (-50px), !important)
36
- opacity: 0;
37
-
38
-
39
- .con-vs-popup
40
- transition: all .2s;
41
- width: 100%;
42
- height: 100%;
43
- position: fixed;
44
- propWithDir(left, null, 0)
45
- top: 0;
46
- z-index: 20000;
47
- display: flex;
48
- align-items: center;
49
- justify-content: center;
50
- opacity: 1;
51
-
52
- &.fullscreen
53
- .vs-popup
54
- width: 100%
55
- height: 100%
56
-
57
- .vs-popup
58
- transition: all .2s;
59
- z-index: 100;
60
- width: 600px
61
- margin: 10px;
62
- max-width: calc(100% - 30px);
63
- max-height: calc(100% - 30px);
64
- border-radius: 6px;
65
- box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1)
66
- background: rgb(255, 255, 255);
67
- animation: rebound .3s;
68
-
69
- &.locked
70
- // background: rgb(3, 41, 203) !important;
71
- transform: scale(1.02);
72
-
73
-
74
- .vs-popup--header
75
- width: 100%;
76
- display: flex;
77
- align-items: center;
78
- justify-content: space-between;
79
- background: rgba(0, 0, 0, .05)
80
- border-radius: 5px 5px;
81
- position: relative;
82
-
83
- .before
84
- transition: all .23s ease .1s;
85
- position: absolute;
86
- propWithDir(left, null, 0);
87
- top: 50%;
88
- transform: translate(0, -50%);
89
- width: 3px;
90
- height: 100%;
91
- display: block;
92
-
93
-
94
- .vs-popup--footer
95
- display: flex;
96
- align-items: center;
97
- justify-content: flex-end;
98
- position: relative;
99
-
100
- button
101
- propWithDir(margin, left, 0)
102
-
103
- .vs-popup--content
104
- padding: 13px;
105
- font-size: 0.9em;
106
- transition: all .23s ease .1s;
107
- overflow auto
108
- max-height: calc(100vh - 100px)
109
- propWithDir(margin, right, 5px)
110
- margin-top: 5px
111
- margin-bottom: 5px
112
- width: calc(100% - 5px)
113
-
114
- .vs-popup--close
115
- transition: all .23s ease .1s;
116
- position: relative;
117
- padding: 8px;
118
- cursor: pointer;
119
- box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1)
120
- border-radius: 5px;
121
- propWithDir(transform, null, (8px -8px));
122
- background: rgb(255, 255, 255);
123
- font-size: 1.25em;
124
- color: rgba(0, 0, 0, .6)
125
-
126
- &:hover
127
- box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1)
128
- propWithDir(transform, null, (5px -5px));
129
-
130
- .vs-popup--title
131
- width: 100%;
132
- position: relative;
133
- overflow: hidden;
134
- border-radius: 5px 5px 0 0;
135
-
136
- h3
137
- transition: all .23s ease .1s;
138
- padding: 8px;
139
- padding-left: 12px;
140
- font-size: 1.2rem;
141
-
142
- .vs-popup--background
143
- width: 100%;
144
- background: rgba(0, 0, 0, 0.4);
145
- position: absolute;
146
- propWithDir(left, null, 0)
147
- top: 0;
148
- height: 100%;
149
- z-index: 10;
150
- transition: all .250s ease;
151
- opacity: 1;
152
-
153
- for colorx, i in $vs-colors
154
- .vs-popup-{colorx}
155
- .vs-popup--header
156
- color: getColor(colorx, 1)
157
-
158
- .before
159
- background: getColor(colorx, 1)
1
+ //animations
2
+ .popup-t-enter, .popup-t-leave-to /* .popup-t-leave-active below version 2.1.8 */
3
+ opacity: 0 !important;
4
+
5
+ //box popup
6
+ .popup-t-enter .vs-popup /* .fade-leave-active below version 2.1.8 */
7
+ transform: scale(.9) !important;
8
+
9
+ .popup-t-leave-to .vs-popup /* .fade-leave-active below version 2.1.8 */
10
+ transform: scale(.9) !important;
11
+
12
+ // animation: rebound .3s;
13
+
14
+
15
+ @keyframes rebound
16
+ 0%
17
+ transform: scale(.9)
18
+ 50%
19
+ transform: scale(1.08)
20
+ 100%
21
+ transform: scale(1)
22
+
23
+
24
+ // cancel / text
25
+ .popup-t-enter .vs-popup-cancel, .popup-t-leave-to .vs-popup-cancel
26
+ border-radius: 50% !important;
27
+ propWithDir(transform, null, (8px -8px), scale(.5) !important)
28
+
29
+ .popup-t-enter .vs-popup-text, .popup-t-leave-to .vs-popup-text
30
+ opacity: 0;
31
+ propWithDir(transform, null, (-15px), !important)
32
+
33
+
34
+ .popup-t-enter header h3, .popup-t-leave-to header h3
35
+ propWithDir(transform, null, (-50px), !important)
36
+ opacity: 0;
37
+
38
+
39
+ .con-vs-popup
40
+ transition: all .2s;
41
+ width: 100%;
42
+ height: 100%;
43
+ position: fixed;
44
+ propWithDir(left, null, 0)
45
+ top: 0;
46
+ z-index: 20000;
47
+ display: flex;
48
+ align-items: center;
49
+ justify-content: center;
50
+ opacity: 1;
51
+
52
+ &.fullscreen
53
+ .vs-popup
54
+ width: 100%
55
+ height: 100%
56
+
57
+ .vs-popup
58
+ transition: all .2s;
59
+ z-index: 100;
60
+ width: 600px
61
+ margin: 10px;
62
+ max-width: calc(100% - 30px);
63
+ max-height: calc(100% - 30px);
64
+ border-radius: 6px;
65
+ box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1)
66
+ background: rgb(255, 255, 255);
67
+ animation: rebound .3s;
68
+
69
+ &.locked
70
+ // background: rgb(3, 41, 203) !important;
71
+ transform: scale(1.02);
72
+
73
+
74
+ .vs-popup--header
75
+ width: 100%;
76
+ display: flex;
77
+ align-items: center;
78
+ justify-content: space-between;
79
+ background: rgba(0, 0, 0, .05)
80
+ border-radius: 5px 5px;
81
+ position: relative;
82
+
83
+ .before
84
+ transition: all .23s ease .1s;
85
+ position: absolute;
86
+ propWithDir(left, null, 0);
87
+ top: 50%;
88
+ transform: translate(0, -50%);
89
+ width: 3px;
90
+ height: 100%;
91
+ display: block;
92
+
93
+
94
+ .vs-popup--footer
95
+ display: flex;
96
+ align-items: center;
97
+ justify-content: flex-end;
98
+ position: relative;
99
+
100
+ button
101
+ propWithDir(margin, left, 0)
102
+
103
+ .vs-popup--content
104
+ padding: 13px;
105
+ font-size: 0.9em;
106
+ transition: all .23s ease .1s;
107
+ overflow auto
108
+ max-height: calc(100vh - 100px)
109
+ propWithDir(margin, right, 5px)
110
+ margin-top: 5px
111
+ margin-bottom: 5px
112
+ width: calc(100% - 5px)
113
+
114
+ .vs-popup--close
115
+ transition: all .23s ease .1s;
116
+ position: relative;
117
+ padding: 8px;
118
+ cursor: pointer;
119
+ box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1)
120
+ border-radius: 5px;
121
+ propWithDir(transform, null, (8px -8px));
122
+ background: rgb(255, 255, 255);
123
+ font-size: 1.25em;
124
+ color: rgba(0, 0, 0, .6)
125
+
126
+ &:hover
127
+ box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1)
128
+ propWithDir(transform, null, (5px -5px));
129
+
130
+ .vs-popup--title
131
+ width: 100%;
132
+ position: relative;
133
+ overflow: hidden;
134
+ border-radius: 5px 5px 0 0;
135
+
136
+ h3
137
+ transition: all .23s ease .1s;
138
+ padding: 8px;
139
+ padding-left: 12px;
140
+ font-size: 1.2rem;
141
+
142
+ .vs-popup--background
143
+ width: 100%;
144
+ background: rgba(0, 0, 0, 0.4);
145
+ position: absolute;
146
+ propWithDir(left, null, 0)
147
+ top: 0;
148
+ height: 100%;
149
+ z-index: 10;
150
+ transition: all .250s ease;
151
+ opacity: 1;
152
+
153
+ for colorx, i in $vs-colors
154
+ .vs-popup-{colorx}
155
+ .vs-popup--header
156
+ color: getColor(colorx, 1)
157
+
158
+ .before
159
+ background: getColor(colorx, 1)
@@ -1,45 +1,45 @@
1
- .vs-progress--indeterminate
2
- position: absolute;
3
- width: 0;
4
- height: 100%;
5
- left: -100%;
6
- top: 0;
7
- animation: indeterminate 1.200s ease infinite;
8
- border-radius: 20px;
9
-
10
- @keyframes indeterminate {
11
- 0% {
12
- width: 30%;
13
- left: -40%;
14
- }
15
- 60% {
16
- left: 100%;
17
- width: 100%;
18
- }
19
- 100% {
20
- left: 100%;
21
- width: 0;
22
- }
23
- }
24
-
25
- .vs-progress--background
26
- width: 100%;
27
- border-radius: 18px;
28
- background-color: rgba(0, 0, 0, .06)
29
- z-index: 50;
30
- position: relative;
31
- display: inline-block;
32
- overflow: hidden;
33
-
34
- .vs-progress--foreground
35
- z-index: 100;
36
- height: 100%;
37
- border-radius: 18px;
38
- transition: all .5s ease;
39
-
40
- for colorx, i in $vs-colors
41
- .vs-progress-{colorx}
42
- background: getColor(colorx, .1)
43
-
44
- .vs-progress--foreground, .vs-progress--indeterminate
45
- background: getColor(colorx, 1)
1
+ .vs-progress--indeterminate
2
+ position: absolute;
3
+ width: 0;
4
+ height: 100%;
5
+ left: -100%;
6
+ top: 0;
7
+ animation: indeterminate 1.200s ease infinite;
8
+ border-radius: 20px;
9
+
10
+ @keyframes indeterminate {
11
+ 0% {
12
+ width: 30%;
13
+ left: -40%;
14
+ }
15
+ 60% {
16
+ left: 100%;
17
+ width: 100%;
18
+ }
19
+ 100% {
20
+ left: 100%;
21
+ width: 0;
22
+ }
23
+ }
24
+
25
+ .vs-progress--background
26
+ width: 100%;
27
+ border-radius: 18px;
28
+ background-color: rgba(0, 0, 0, .06)
29
+ z-index: 50;
30
+ position: relative;
31
+ display: inline-block;
32
+ overflow: hidden;
33
+
34
+ .vs-progress--foreground
35
+ z-index: 100;
36
+ height: 100%;
37
+ border-radius: 18px;
38
+ transition: all .5s ease;
39
+
40
+ for colorx, i in $vs-colors
41
+ .vs-progress-{colorx}
42
+ background: getColor(colorx, .1)
43
+
44
+ .vs-progress--foreground, .vs-progress--indeterminate
45
+ background: getColor(colorx, 1)
@@ -1,93 +1,93 @@
1
-
2
- .con-vs-radio
3
- position: relative;
4
- display: flex;
5
- align-items: center;
6
- justify-content: center;
7
-
8
- &:hover
9
- .vs-radio--borde
10
- border: 2px solid rgb(160, 160, 160);
11
-
12
- .vs-radio--label
13
- propWithDir(margin, left, 5px)
14
- cursor pointer
15
-
16
- .vs-radio
17
- width: 18px;
18
- height: 18px;
19
- position: relative;
20
- display: block;
21
- border-radius: 50%;
22
- cursor: pointer;
23
- flex-shrink: 0;
24
-
25
- .vs-radio--borde
26
- border-radius: 50%;
27
- width: 100%;
28
- height: 100%;
29
- position: absolute;
30
- left: 0;
31
- transition: all .25s ease;
32
- background: transparent;
33
- top: 0;
34
- border: 2px solid rgb(200, 200, 200);
35
-
36
- .vs-radio--circle
37
- transition: all .25s ease;
38
- transform: scale(.1);
39
- opacity: 0;
40
- width: 100%;
41
- height: 100%;
42
- border-radius: 50%;
43
- position: absolute;
44
- left: 0;
45
- top: 0;
46
-
47
- .vs-radio--input
48
- position: absolute;
49
- left: 0;
50
- opacity: 0;
51
- width: 20px;
52
-
53
- &:checked
54
- + .vs-radio
55
- cursor: default;
56
-
57
- .vs-radio--circle
58
- transform: scale(1);
59
- opacity: 1;
60
-
61
- .vs-radio--borde
62
- opacity: 0;
63
- transform: scale(.3);
64
-
65
- &:active
66
- + .vs-radio
67
- .vs-radio--circle
68
- // transform: scale(1.1);
69
- .vs-radio--borde
70
- transform: scale(1.1);
71
-
72
- &:disabled
73
- + .vs-radio,
74
- + .vs-radio + .vs-radio--label
75
- pointer-events: none;
76
- cursor: default;
77
-
78
- + .vs-radio
79
- opacity: .4;
80
-
81
- .vs-radio--circle
82
- pointer-events: none;
83
-
84
- .vs-radio--borde
85
- border: 2px solid rgb(180, 180, 180)
86
- background: rgb(210, 210, 210)
87
- pointer-events: none;
88
-
89
- for colorx, i in $vs-colors
90
- .vs-radio-{colorx}
91
- .vs-radio--circle
92
- background: getColor(colorx, 1)
93
- box-shadow: 0 3px 12px 0 getColor(colorx, .4)
1
+
2
+ .con-vs-radio
3
+ position: relative;
4
+ display: flex;
5
+ align-items: center;
6
+ justify-content: center;
7
+
8
+ &:hover
9
+ .vs-radio--borde
10
+ border: 2px solid rgb(160, 160, 160);
11
+
12
+ .vs-radio--label
13
+ propWithDir(margin, left, 5px)
14
+ cursor pointer
15
+
16
+ .vs-radio
17
+ width: 18px;
18
+ height: 18px;
19
+ position: relative;
20
+ display: block;
21
+ border-radius: 50%;
22
+ cursor: pointer;
23
+ flex-shrink: 0;
24
+
25
+ .vs-radio--borde
26
+ border-radius: 50%;
27
+ width: 100%;
28
+ height: 100%;
29
+ position: absolute;
30
+ left: 0;
31
+ transition: all .25s ease;
32
+ background: transparent;
33
+ top: 0;
34
+ border: 2px solid rgb(200, 200, 200);
35
+
36
+ .vs-radio--circle
37
+ transition: all .25s ease;
38
+ transform: scale(.1);
39
+ opacity: 0;
40
+ width: 100%;
41
+ height: 100%;
42
+ border-radius: 50%;
43
+ position: absolute;
44
+ left: 0;
45
+ top: 0;
46
+
47
+ .vs-radio--input
48
+ position: absolute;
49
+ left: 0;
50
+ opacity: 0;
51
+ width: 20px;
52
+
53
+ &:checked
54
+ + .vs-radio
55
+ cursor: default;
56
+
57
+ .vs-radio--circle
58
+ transform: scale(1);
59
+ opacity: 1;
60
+
61
+ .vs-radio--borde
62
+ opacity: 0;
63
+ transform: scale(.3);
64
+
65
+ &:active
66
+ + .vs-radio
67
+ .vs-radio--circle
68
+ // transform: scale(1.1);
69
+ .vs-radio--borde
70
+ transform: scale(1.1);
71
+
72
+ &:disabled
73
+ + .vs-radio,
74
+ + .vs-radio + .vs-radio--label
75
+ pointer-events: none;
76
+ cursor: default;
77
+
78
+ + .vs-radio
79
+ opacity: .4;
80
+
81
+ .vs-radio--circle
82
+ pointer-events: none;
83
+
84
+ .vs-radio--borde
85
+ border: 2px solid rgb(180, 180, 180)
86
+ background: rgb(210, 210, 210)
87
+ pointer-events: none;
88
+
89
+ for colorx, i in $vs-colors
90
+ .vs-radio-{colorx}
91
+ .vs-radio--circle
92
+ background: getColor(colorx, 1)
93
+ box-shadow: 0 3px 12px 0 getColor(colorx, .4)