kv-icon-kit 1.0.2 → 1.0.3

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 (34) hide show
  1. package/README.md +5 -5
  2. package/demo-files/demo.css +155 -155
  3. package/demo-files/demo.js +30 -30
  4. package/demo.html +947 -947
  5. package/kiotviet-awesome/kiotviet-awesome.css +3 -0
  6. package/kiotviet-awesome/kiotviet-awesome.css.map +1 -0
  7. package/kiotviet-awesome.css +3 -0
  8. package/kiotviet-awesome.css.map +1 -0
  9. package/{kv-icon-kit.scss → kiotviet-awesome.scss} +1 -1
  10. package/package.json +2 -2
  11. package/scss/_core.scss +17 -17
  12. package/scss/_icons.scss +2 -2
  13. package/scss/_variables.scss +711 -711
  14. package/scss/brand.scss +10 -10
  15. package/scss/color-mix.scss +9 -9
  16. package/scss/regular.scss +6 -6
  17. package/scss/solid.scss +6 -6
  18. package/kv-icon-kit.css +0 -3
  19. package/kv-icon-kit.css.map +0 -1
  20. /package/fonts/{ik-brands-700.eot → ka-brands-400.eot} +0 -0
  21. /package/fonts/{ik-brands-700.svg → ka-brands-400.svg} +0 -0
  22. /package/fonts/{ik-brands-700.ttf → ka-brands-400.ttf} +0 -0
  23. /package/fonts/{ik-brands-700.woff → ka-brands-400.woff} +0 -0
  24. /package/fonts/{ik-brands-700.woff2 → ka-brands-400.woff2} +0 -0
  25. /package/fonts/{ik-regulars-400.eot → ka-regulars-400.eot} +0 -0
  26. /package/fonts/{ik-regulars-400.svg → ka-regulars-400.svg} +0 -0
  27. /package/fonts/{ik-regulars-400.ttf → ka-regulars-400.ttf} +0 -0
  28. /package/fonts/{ik-regulars-400.woff → ka-regulars-400.woff} +0 -0
  29. /package/fonts/{ik-regulars-400.woff2 → ka-regulars-400.woff2} +0 -0
  30. /package/fonts/{ik-solids-700.eot → ka-solids-700.eot} +0 -0
  31. /package/fonts/{ik-solids-700.svg → ka-solids-700.svg} +0 -0
  32. /package/fonts/{ik-solids-700.ttf → ka-solids-700.ttf} +0 -0
  33. /package/fonts/{ik-solids-700.woff → ka-solids-700.woff} +0 -0
  34. /package/fonts/{ik-solids-700.woff2 → ka-solids-700.woff2} +0 -0
package/README.md CHANGED
@@ -1,8 +1,8 @@
1
- # kv-icon-kit
1
+ # Kiotviet-Awesome
2
2
 
3
- Get icon SVG from [iconkit.kiotviet.vn](https://iconkit.kiotviet.vn/) version 1.0.2.
3
+ Get icon SVG from [iconkit.kiotviet.vn](https://iconkit.kiotviet.vn/) version 1.0.6.
4
4
 
5
5
  ## Using
6
- * With Font Icons: use class `.iks` to define for weight 700, `.ikr` to define for weight 400.
7
- * With Font Icon Brands: use class `.ikb` to define, and has only weight 700.
8
- * With Icons color mix: use class `.ikc` to define, and can't change color and weight.
6
+ * With Font Icons: use class `.kas` to define for weight 700, `.kar` to define for weight 400.
7
+ * With Font Icon Brands: use class `.kab` to define, and has only weight 700.
8
+ * With Icons color mix: use class `.kam` to define, and can't change color and weight.
@@ -1,155 +1,155 @@
1
- :root{
2
- --ka-size: 16px;
3
- }
4
-
5
- body {
6
- padding: 0;
7
- margin: 0;
8
- font-family: sans-serif;
9
- font-size: 1em;
10
- line-height: 1.5;
11
- color: #555;
12
- background: #fff;
13
- }
14
- h1 {
15
- font-size: 1.5em;
16
- font-weight: normal;
17
- }
18
- small {
19
- font-size: .66666667em;
20
- }
21
- a {
22
- color: #e74c3c;
23
- text-decoration: none;
24
- }
25
- a:hover, a:focus {
26
- box-shadow: 0 1px #e74c3c;
27
- }
28
- .bshadow0, input {
29
- box-shadow: inset 0 -2px #e7e7e7;
30
- }
31
- input:hover {
32
- box-shadow: inset 0 -2px #ccc;
33
- }
34
- input, fieldset {
35
- font-family: sans-serif;
36
- font-size: 1em;
37
- margin: 0;
38
- padding: 0;
39
- border: 0;
40
- }
41
- input {
42
- color: inherit;
43
- line-height: 1.5;
44
- height: 1.5em;
45
- padding: .25em 0;
46
- }
47
- input:focus {
48
- outline: none;
49
- box-shadow: inset 0 -2px #449fdb;
50
- }
51
- .glyph {
52
- font-size: 16px;
53
- width: 25%;
54
- overflow: hidden;
55
- padding: 16px 16px 0;
56
- box-sizing: border-box;
57
- }
58
- .liga {
59
- width: 80%;
60
- width: calc(100% - 2.5em);
61
- }
62
- .talign-right {
63
- text-align: right;
64
- }
65
- .talign-center {
66
- text-align: center;
67
- }
68
- .bgc1 {
69
- background: #f1f1f1;
70
- }
71
- .fgc1 {
72
- color: #999;
73
- }
74
- .fgc0 {
75
- color: #000;
76
- }
77
- p {
78
- margin-top: 1em;
79
- margin-bottom: 1em;
80
- }
81
- .mvm {
82
- margin-top: .75em;
83
- margin-bottom: .75em;
84
- }
85
- .mtn {
86
- margin-top: 0;
87
- }
88
- .mtl, .mal {
89
- margin-top: 1.5em;
90
- }
91
- .mbl, .mal {
92
- margin-bottom: 1.5em;
93
- }
94
- .mal, .mhl {
95
- margin-left: 1.5em;
96
- margin-right: 1.5em;
97
- }
98
- .mhmm {
99
- margin-left: 1em;
100
- margin-right: 1em;
101
- }
102
- .mls {
103
- margin-left: .25em;
104
- }
105
- .ptl {
106
- padding-top: 1.5em;
107
- }
108
- .pbs, .pvs {
109
- padding-bottom: .25em;
110
- }
111
- .pvs, .pts {
112
- padding-top: .25em;
113
- }
114
- .unit {
115
- float: left;
116
- }
117
- .unitRight {
118
- float: right;
119
- }
120
- .size1of2 {
121
- width: 50%;
122
- font-family: 'Kiotviet Awesome';
123
- }
124
- .size1of1 {
125
- width: 100%;
126
- }
127
- .clearfix:before, .clearfix:after {
128
- content: " ";
129
- display: table;
130
- }
131
- .clearfix:after {
132
- clear: both;
133
- }
134
- .hidden-true {
135
- display: none;
136
- }
137
- .textbox0 {
138
- width: 3em;
139
- background: #f1f1f1;
140
- padding: .25em .5em;
141
- line-height: 1.5;
142
- height: 1.5em;
143
- }
144
- #testDrive {
145
- display: block;
146
- padding-top: 24px;
147
- line-height: 1.5;
148
- }
149
- .fs0 {
150
- font-size: 16px;
151
- }
152
- .fs1 {
153
- font-size: 32px;
154
- }
155
-
1
+ :root{
2
+ --ka-size: 16px;
3
+ }
4
+
5
+ body {
6
+ padding: 0;
7
+ margin: 0;
8
+ font-family: sans-serif;
9
+ font-size: 1em;
10
+ line-height: 1.5;
11
+ color: #555;
12
+ background: #fff;
13
+ }
14
+ h1 {
15
+ font-size: 1.5em;
16
+ font-weight: normal;
17
+ }
18
+ small {
19
+ font-size: .66666667em;
20
+ }
21
+ a {
22
+ color: #e74c3c;
23
+ text-decoration: none;
24
+ }
25
+ a:hover, a:focus {
26
+ box-shadow: 0 1px #e74c3c;
27
+ }
28
+ .bshadow0, input {
29
+ box-shadow: inset 0 -2px #e7e7e7;
30
+ }
31
+ input:hover {
32
+ box-shadow: inset 0 -2px #ccc;
33
+ }
34
+ input, fieldset {
35
+ font-family: sans-serif;
36
+ font-size: 1em;
37
+ margin: 0;
38
+ padding: 0;
39
+ border: 0;
40
+ }
41
+ input {
42
+ color: inherit;
43
+ line-height: 1.5;
44
+ height: 1.5em;
45
+ padding: .25em 0;
46
+ }
47
+ input:focus {
48
+ outline: none;
49
+ box-shadow: inset 0 -2px #449fdb;
50
+ }
51
+ .glyph {
52
+ font-size: 16px;
53
+ width: 25%;
54
+ overflow: hidden;
55
+ padding: 16px 16px 0;
56
+ box-sizing: border-box;
57
+ }
58
+ .liga {
59
+ width: 80%;
60
+ width: calc(100% - 2.5em);
61
+ }
62
+ .talign-right {
63
+ text-align: right;
64
+ }
65
+ .talign-center {
66
+ text-align: center;
67
+ }
68
+ .bgc1 {
69
+ background: #f1f1f1;
70
+ }
71
+ .fgc1 {
72
+ color: #999;
73
+ }
74
+ .fgc0 {
75
+ color: #000;
76
+ }
77
+ p {
78
+ margin-top: 1em;
79
+ margin-bottom: 1em;
80
+ }
81
+ .mvm {
82
+ margin-top: .75em;
83
+ margin-bottom: .75em;
84
+ }
85
+ .mtn {
86
+ margin-top: 0;
87
+ }
88
+ .mtl, .mal {
89
+ margin-top: 1.5em;
90
+ }
91
+ .mbl, .mal {
92
+ margin-bottom: 1.5em;
93
+ }
94
+ .mal, .mhl {
95
+ margin-left: 1.5em;
96
+ margin-right: 1.5em;
97
+ }
98
+ .mhmm {
99
+ margin-left: 1em;
100
+ margin-right: 1em;
101
+ }
102
+ .mls {
103
+ margin-left: .25em;
104
+ }
105
+ .ptl {
106
+ padding-top: 1.5em;
107
+ }
108
+ .pbs, .pvs {
109
+ padding-bottom: .25em;
110
+ }
111
+ .pvs, .pts {
112
+ padding-top: .25em;
113
+ }
114
+ .unit {
115
+ float: left;
116
+ }
117
+ .unitRight {
118
+ float: right;
119
+ }
120
+ .size1of2 {
121
+ width: 50%;
122
+ font-family: 'Kiotviet Awesome';
123
+ }
124
+ .size1of1 {
125
+ width: 100%;
126
+ }
127
+ .clearfix:before, .clearfix:after {
128
+ content: " ";
129
+ display: table;
130
+ }
131
+ .clearfix:after {
132
+ clear: both;
133
+ }
134
+ .hidden-true {
135
+ display: none;
136
+ }
137
+ .textbox0 {
138
+ width: 3em;
139
+ background: #f1f1f1;
140
+ padding: .25em .5em;
141
+ line-height: 1.5;
142
+ height: 1.5em;
143
+ }
144
+ #testDrive {
145
+ display: block;
146
+ padding-top: 24px;
147
+ line-height: 1.5;
148
+ }
149
+ .fs0 {
150
+ font-size: 16px;
151
+ }
152
+ .fs1 {
153
+ font-size: 32px;
154
+ }
155
+
@@ -1,30 +1,30 @@
1
- if (!('boxShadow' in document.body.style)) {
2
- document.body.setAttribute('class', 'noBoxShadow');
3
- }
4
-
5
- document.body.addEventListener("click", function(e) {
6
- var target = e.target;
7
- if (target.tagName === "INPUT" &&
8
- target.getAttribute('class').indexOf('liga') === -1) {
9
- target.select();
10
- }
11
- });
12
-
13
- (function() {
14
- var fontSize = document.getElementById('fontSize'),
15
- testDrive = document.getElementById('testDrive'),
16
- testText = document.getElementById('testText');
17
- function updateTest() {
18
- testDrive.innerHTML = testText.value || String.fromCharCode(160);
19
- if (window.icomoonLiga) {
20
- window.icomoonLiga(testDrive);
21
- }
22
- }
23
- function updateSize() {
24
- testDrive.style.fontSize = fontSize.value + 'px';
25
- }
26
- fontSize.addEventListener('change', updateSize, false);
27
- testText.addEventListener('input', updateTest, false);
28
- testText.addEventListener('change', updateTest, false);
29
- updateSize();
30
- }());
1
+ if (!('boxShadow' in document.body.style)) {
2
+ document.body.setAttribute('class', 'noBoxShadow');
3
+ }
4
+
5
+ document.body.addEventListener("click", function(e) {
6
+ var target = e.target;
7
+ if (target.tagName === "INPUT" &&
8
+ target.getAttribute('class').indexOf('liga') === -1) {
9
+ target.select();
10
+ }
11
+ });
12
+
13
+ (function() {
14
+ var fontSize = document.getElementById('fontSize'),
15
+ testDrive = document.getElementById('testDrive'),
16
+ testText = document.getElementById('testText');
17
+ function updateTest() {
18
+ testDrive.innerHTML = testText.value || String.fromCharCode(160);
19
+ if (window.icomoonLiga) {
20
+ window.icomoonLiga(testDrive);
21
+ }
22
+ }
23
+ function updateSize() {
24
+ testDrive.style.fontSize = fontSize.value + 'px';
25
+ }
26
+ fontSize.addEventListener('change', updateSize, false);
27
+ testText.addEventListener('input', updateTest, false);
28
+ testText.addEventListener('change', updateTest, false);
29
+ updateSize();
30
+ }());