vcomply-design-system 1.2.5 → 1.2.7

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 (8) hide show
  1. package/css-build/index.html +14 -0
  2. package/css-build/less/forms/check-box.less +148 -147
  3. package/css-build/less/forms/radio.less +191 -116
  4. package/css-build/less/link/link.less +94 -0
  5. package/css-build/pages/checkbox.html +833 -484
  6. package/css-build/pages/link.html +505 -0
  7. package/css-build/pages/radio.html +730 -388
  8. package/package.json +1 -1
package/css-build/index.html CHANGED
@@ -269,6 +269,14 @@
269
269
  >Shadow</a
270
270
  >
271
271
  </li>
272
+ <li>
273
+ <a
274
+ href="javascript:;"
275
+ class="vx-fs-3 vx-d-block vx-lh-10 vx-fw-400 vx-pr-3 vx-pl-3"
276
+ data-tab="link"
277
+ >Link</a
278
+ >
279
+ </li>
272
280
  <li>
273
281
  <a
274
282
  href="javascript:;"
@@ -491,6 +499,12 @@
491
499
  width="100%"
492
500
  id="shadow"
493
501
  ></iframe>
502
+ <iframe
503
+ src="pages/link.html"
504
+ frameborder="0"
505
+ width="100%"
506
+ id="link"
507
+ ></iframe>
494
508
  <iframe
495
509
  src="pages/border-radius.html"
496
510
  frameborder="0"
package/css-build/less/forms/check-box.less CHANGED
@@ -1,180 +1,181 @@
1
1
  label {
2
- &.vx-checkbox-item {
3
- display : flex;
4
- align-items: center;
5
- cursor : pointer;
6
- margin : 0;
7
- padding : 0;
8
- max-width : 100%;
9
-
10
- span {
11
- display : inline-flex;
12
- align-items : center;
13
- justify-content: center;
14
-
15
- &.checkbox {
16
- height : 16px;
17
- width : 16px;
18
- border-radius: 2px;
19
- border : 1px solid #CDCED6;
20
- position : relative;
21
- padding : 2px;
22
- margin-top : 0px;
23
- }
24
-
25
- &.value {
26
- color: #000;
27
- font-size: 11px;
28
- font-weight: 400;
29
- line-height: 16px;
30
- margin-left: 8px;
31
- max-width : calc(100% - 26px);
32
-
33
- &:empty {
34
- display: none;
35
- }
36
- }
37
- }
38
-
39
- svg {
40
- display : none;
41
- margin-top: 0px;
42
- }
43
-
44
- input[type=checkbox] {
45
- display: none;
46
-
47
- &:checked~svg {
48
- display: block;
49
- }
50
-
51
- &:checked+.checkbox {
52
- display: none;
53
- }
54
-
55
- &:disabled {
56
- & ~ .checkbox {
57
- background: #E3E3E9;
58
- border-color: #CDCED6;
59
- }
60
-
61
- & ~ .value {
62
- color: #A9AAB6;
63
- }
64
- }
65
- }
66
-
67
- &:hover {
68
- .checkbox {
69
- border-color: #97D2A0;
70
- }
71
-
72
- .value {
73
- color: #787A8C;
74
- }
75
- }
76
-
77
- &.hover {
78
- .checkbox {
79
- border-color: #97D2A0;
80
- }
81
-
82
- .value {
83
- color: #787A8C;
84
- }
85
- }
86
-
87
- &.error {
88
- .checkbox {
89
- border-color: #C7381B;
90
- }
91
- }
92
-
93
- &.disabled {
94
- input[type=checkbox] {
95
- &:disabled {
96
- & ~ .checkmark {
97
- filter: grayscale(1);
98
- opacity: 0.5;
99
- }
100
- }
101
- }
102
- }
103
- }
2
+ &.vx-checkbox-item {
3
+ display: flex;
4
+ align-items: center;
5
+ cursor: pointer;
6
+ margin: 0;
7
+ padding: 0;
8
+ max-width: 100%;
9
+
10
+ span {
11
+ display: inline-flex;
12
+ align-items: center;
13
+ justify-content: center;
14
+
15
+ &.checkbox {
16
+ height: 16px;
17
+ width: 16px;
18
+ border-radius: 2px;
19
+ border: 1px solid #cdced6;
20
+ position: relative;
21
+ padding: 2px;
22
+ margin-top: 0px;
23
+ }
24
+
25
+ &.value {
26
+ color: #000;
27
+ font-size: 11px;
28
+ font-weight: 400;
29
+ line-height: 16px;
30
+ margin-left: 8px;
31
+ max-width: calc(100% - 26px);
32
+
33
+ &:empty {
34
+ display: none;
35
+ }
36
+ }
37
+ }
38
+
39
+ svg {
40
+ display: none;
41
+ margin-top: 0px;
42
+ }
43
+
44
+ input[type="checkbox"] {
45
+ display: none;
46
+
47
+ &:checked ~ svg {
48
+ display: block;
49
+ }
50
+
51
+ &:checked + .checkbox {
52
+ display: none;
53
+ }
54
+
55
+ &:disabled {
56
+ & ~ .checkbox {
57
+ background: #e3e3e9;
58
+ border-color: #cdced6;
59
+ }
60
+
61
+ & ~ .value {
62
+ color: #a9aab6;
63
+ }
64
+ }
65
+ }
66
+
67
+ &:hover {
68
+ .checkbox {
69
+ border-color: #97d2a0;
70
+ }
71
+
72
+ .value {
73
+ color: #787a8c;
74
+ }
75
+ }
76
+
77
+ &.hover {
78
+ .checkbox {
79
+ border-color: #97d2a0;
80
+ }
81
+
82
+ .value {
83
+ color: #787a8c;
84
+ }
85
+ }
86
+
87
+ &.error {
88
+ .checkbox {
89
+ border-color: #c7381b;
90
+ }
91
+ }
92
+
93
+ &.disabled-checkbox {
94
+ input[type="checkbox"] {
95
+ &:disabled {
96
+ & ~ .checkmark {
97
+ filter: grayscale(1);
98
+ opacity: 0.5;
99
+ }
100
+ }
101
+ }
102
+ }
103
+ }
104
104
  }
105
105
 
106
- .disabled {
107
- pointer-events: none;
106
+ .disabled-checkbox {
107
+ pointer-events: none;
108
108
  }
109
109
 
110
110
  .checkmark {
111
- width : 16px;
112
- height : 16px;
113
- border-radius : 2px;
114
- stroke-width : 4;
115
- stroke : #fff;
116
- stroke-miterlimit: 10;
117
- box-shadow : inset 0px 0px 0px #34AA44;
118
- animation : fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
111
+ width: 16px;
112
+ height: 16px;
113
+ border-radius: 2px;
114
+ stroke-width: 4;
115
+ stroke: #fff;
116
+ stroke-miterlimit: 10;
117
+ box-shadow: inset 0px 0px 0px #34aa44;
118
+ animation: fill 0.4s ease-in-out 0.4s forwards,
119
+ scale 0.3s ease-in-out 0.9s both;
119
120
  }
120
121
 
121
122
  .checkmark__circle {
122
- stroke-dasharray : 166;
123
- stroke-dashoffset: 166;
124
- stroke-width : 2;
125
- stroke-miterlimit: 10;
126
- stroke : #34AA44;
127
- fill : none;
128
- animation : stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
129
- padding-right : 10px;
123
+ stroke-dasharray: 166;
124
+ stroke-dashoffset: 166;
125
+ stroke-width: 2;
126
+ stroke-miterlimit: 10;
127
+ stroke: #34aa44;
128
+ fill: none;
129
+ animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
130
+ padding-right: 10px;
130
131
  }
131
132
 
132
133
  .checkmark__check {
133
- transform-origin : 50% 50%;
134
- stroke-dasharray : 48;
135
- stroke-dashoffset: 48;
136
- animation : stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
134
+ transform-origin: 50% 50%;
135
+ stroke-dasharray: 48;
136
+ stroke-dashoffset: 48;
137
+ animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
137
138
  }
138
139
 
139
140
  .checkmark.error {
140
- box-shadow: inset 0px 0px 0px #C7381B;
141
- animation: fillred 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
141
+ box-shadow: inset 0px 0px 0px #c7381b;
142
+ animation: fillred 0.4s ease-in-out 0.4s forwards,
143
+ scale 0.3s ease-in-out 0.9s both;
142
144
  }
143
145
 
144
146
  .checkmark.error .checkmark__circle {
145
- stroke: #C7381B;
147
+ stroke: #c7381b;
146
148
  }
147
149
 
148
150
  @keyframes stroke {
149
- 100% {
150
- stroke-dashoffset: 0;
151
- }
151
+ 100% {
152
+ stroke-dashoffset: 0;
153
+ }
152
154
  }
153
155
 
154
156
  @keyframes scale {
155
-
156
- 0%,
157
- 100% {
158
- transform: none;
159
- }
160
-
161
- 50% {
162
- transform: scale3d(1.1, 1.1, 1);
163
- }
157
+ 0%,
158
+ 100% {
159
+ transform: none;
160
+ }
161
+
162
+ 50% {
163
+ transform: scale3d(1.1, 1.1, 1);
164
+ }
164
165
  }
165
166
 
166
167
  @keyframes fill {
167
- 100% {
168
- box-shadow: inset 0px 0px 0px 30px #34AA44;
169
- }
168
+ 100% {
169
+ box-shadow: inset 0px 0px 0px 30px #34aa44;
170
+ }
170
171
  }
171
172
 
172
173
  @keyframes fillred {
173
- 100% {
174
- box-shadow: inset 0px 0px 0px 30px #C7381B;
175
- }
174
+ 100% {
175
+ box-shadow: inset 0px 0px 0px 30px #c7381b;
176
+ }
176
177
  }
177
178
 
178
179
  .checkboxColumn {
179
- width: 20%;
180
- }
180
+ width: 20%;
181
+ }
package/css-build/less/forms/radio.less CHANGED
@@ -1,139 +1,214 @@
1
1
  label {
2
- max-width: 600px;
3
-
4
- &.vx-radio-item {
5
- display : inline-flex;
6
- align-items: center;
7
- cursor : pointer;
8
- margin : 0;
9
- padding : 0 10px 0 0;
10
- max-width : 100%;
11
-
12
- &.readonly {
13
- pointer-events: none;
14
- }
15
-
16
- span {
17
- display : inline-flex;
18
- align-items: center;
19
-
20
- &.radio {
21
- background : #fff;
22
- height : 16px;
23
- width : 16px;
24
- border-radius: 50%;
25
- border : 1px solid #DBDBDB;
26
- position : relative;
27
- padding : 5px;
28
- margin-top : 0px;
29
-
30
- .inner {
31
- height : 10px;
32
- width : 10px;
33
- border-radius: 50%;
34
- background : #FFFFFF;
35
- display : none;
36
- }
37
- }
38
-
39
- &.value {
40
- color : #4E4E4E;
41
- font-size : 14px;
42
- line-height: 16px;
43
- font-weight: 400;
44
- margin-left: 10px;
45
- max-width : calc(100% - 26px);
46
-
47
- &:empty {
48
- display: none;
49
- }
50
- }
51
- }
52
-
53
- svg {
54
- display : none;
55
- margin-top: 0px;
56
- }
57
-
58
- input[type=radio] {
59
- display: none;
60
-
61
- &:checked+span {
62
- &.radio {
63
- display: none;
64
- }
65
- }
66
-
67
- &:checked~svg {
68
- display: block;
69
- }
70
-
71
- &:disabled~* {
72
- opacity: .7;
73
- }
74
- }
75
- }
2
+ max-width: 600px;
3
+
4
+ &.vx-radio-item {
5
+ display: inline-flex;
6
+ align-items: center;
7
+ cursor: pointer;
8
+ margin: 0;
9
+ padding: 0 10px 0 0;
10
+ max-width: 100%;
11
+
12
+ &.readonly {
13
+ pointer-events: none;
14
+ }
15
+
16
+ span {
17
+ display: inline-flex;
18
+ align-items: center;
19
+
20
+ &.radio {
21
+ background: #fff;
22
+ height: 16px;
23
+ width: 16px;
24
+ border-radius: 50%;
25
+ border: 1px solid #dbdbdb;
26
+ position: relative;
27
+ padding: 5px;
28
+ margin-top: 0px;
29
+
30
+ .inner {
31
+ height: 10px;
32
+ width: 10px;
33
+ border-radius: 50%;
34
+ background: #ffffff;
35
+ display: none;
36
+ }
37
+ }
38
+
39
+ &.value {
40
+ color: #000;
41
+ font-size: 11px;
42
+ font-weight: 400;
43
+ line-height: 16px;
44
+ margin-left: 8px;
45
+ max-width: calc(100% - 26px);
46
+
47
+ &:empty {
48
+ display: none;
49
+ }
50
+ }
51
+ }
52
+
53
+ svg {
54
+ display: none;
55
+ margin-top: 0px;
56
+ }
57
+
58
+ input[type="radio"] {
59
+ display: none;
60
+
61
+ &:checked + span {
62
+ &.radio {
63
+ display: none;
64
+ }
65
+ }
66
+
67
+ &:checked ~ svg {
68
+ display: block;
69
+ }
70
+ }
71
+
72
+ &:hover {
73
+ .radio {
74
+ border-color: #97d2a0;
75
+ }
76
+
77
+ .value {
78
+ color: #787a8c;
79
+ }
80
+ }
81
+
82
+ &.hover {
83
+ .radio {
84
+ border-color: #97d2a0;
85
+ }
86
+
87
+ .value {
88
+ color: #787a8c;
89
+ }
90
+ }
91
+
92
+ &.error {
93
+ .radio {
94
+ border-color: #c7381b;
95
+ }
96
+ }
97
+
98
+ &.disabled-radio {
99
+ pointer-events: none;
100
+
101
+ input[type="radio"] {
102
+ &:disabled {
103
+ & ~ .radio {
104
+ background: #e3e3e9;
105
+ border-color: #cdced6;
106
+ }
107
+
108
+ & ~ .value {
109
+ color: #a9aab6;
110
+ }
111
+ }
112
+ }
113
+ }
114
+ }
76
115
  }
77
116
 
78
117
  .vx-radio-group {
79
- display: flex;
80
- &.ver {
81
- display: block;
82
- label.vx-radio-item {
83
- display: flex;
84
- padding: 8px 12px;
85
- }
86
- }
118
+ display: flex;
119
+ &.ver {
120
+ display: block;
121
+ label.vx-radio-item {
122
+ display: flex;
123
+ padding: 8px 12px;
124
+ }
125
+ }
87
126
  }
88
127
 
89
128
  .radiomark {
90
- width : 16px;
91
- height : 16px;
92
- border-radius : 50%;
93
- stroke-width : 4;
94
- stroke : #fff;
95
- stroke-miterlimit: 10;
96
- box-shadow : inset 0px 0px 0px #34AA44;
97
- animation : fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
129
+ width: 16px;
130
+ height: 16px;
131
+ border-radius: 50%;
132
+ stroke-width: 4;
133
+ stroke: #fff;
134
+ stroke-miterlimit: 10;
135
+ box-shadow: inset 0px 0px 0px #34aa44;
136
+ animation: fill 0.4s ease-in-out 0.4s forwards,
137
+ scale 0.3s ease-in-out 0.9s both;
138
+ }
139
+
140
+ .radiomark.error {
141
+ box-shadow: inset 0px 0px 0px #c7381b;
142
+ animation: fillred 0.4s ease-in-out 0.4s forwards,
143
+ scale 0.3s ease-in-out 0.9s both;
144
+ }
145
+
146
+ .radiomark.disabled-radio {
147
+ box-shadow: inset 0px 0px 0px #e3e3e9;
148
+ animation: filldisabled 0.4s ease-in-out 0.4s forwards,
149
+ scale 0.3s ease-in-out 0.9s both;
98
150
  }
99
151
 
100
152
  .radiomark__circle {
101
- stroke-dasharray : 166;
102
- stroke-dashoffset: 166;
103
- stroke-width : 2;
104
- stroke-miterlimit: 10;
105
- stroke : #34AA44;
106
- fill : none;
107
- animation : stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
153
+ stroke-dasharray: 166;
154
+ stroke-dashoffset: 166;
155
+ stroke-width: 2;
156
+ stroke-miterlimit: 10;
157
+ stroke: #34aa44;
158
+ fill: none;
159
+ animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
160
+ }
161
+
162
+ .radiomark.error .radiomark__circle {
163
+ stroke: #c7381b;
164
+ }
165
+
166
+ .radiomark.disabled-radio .radiomark__circle {
167
+ stroke: #e3e3e9;
108
168
  }
109
169
 
110
170
  .radiomark__check {
111
- stroke-dasharray : 100;
112
- stroke-dashoffset: 100;
113
- stroke-width : 10;
114
- animation : stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
171
+ stroke-dasharray: 100;
172
+ stroke-dashoffset: 100;
173
+ stroke-width: 10;
174
+ animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
115
175
  }
116
176
 
117
177
  @keyframes stroke {
118
- 100% {
119
- stroke-dashoffset: 0;
120
- }
178
+ 100% {
179
+ stroke-dashoffset: 0;
180
+ }
121
181
  }
122
182
 
123
183
  @keyframes scale {
184
+ 0%,
185
+ 100% {
186
+ transform: none;
187
+ }
188
+
189
+ 50% {
190
+ transform: scale3d(1.1, 1.1, 1);
191
+ }
192
+ }
124
193
 
125
- 0%,
126
- 100% {
127
- transform: none;
128
- }
194
+ @keyframes fill {
195
+ 100% {
196
+ box-shadow: inset 0px 0px 0px 30px #34aa44;
197
+ }
198
+ }
129
199
 
130
- 50% {
131
- transform: scale3d(1.1, 1.1, 1);
132
- }
200
+ @keyframes fillred {
201
+ 100% {
202
+ box-shadow: inset 0px 0px 0px 30px #c7381b;
203
+ }
133
204
  }
134
205
 
135
- @keyframes fill {
136
- 100% {
137
- box-shadow: inset 0px 0px 0px 30px #34AA44;
138
- }
139
- }
206
+ @keyframes filldisabled {
207
+ 100% {
208
+ box-shadow: inset 0px 0px 0px 30px #e3e3e9;
209
+ }
210
+ }
211
+
212
+ .radioColumn {
213
+ width: 20%;
214
+ }