@progress/kendo-font-icons 1.1.0 → 1.2.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 (8) hide show
  1. package/dist/index.css +4 -2
  2. package/dist/kendo-font-icons.ttf +0 -0
  3. package/package.json +2 -2
  4. package/scss/_font.scss +1 -1
  5. package/scss/_icon-list.scss +1008 -0
  6. package/scss/_icons.scss +1008 -1006
  7. package/scss/all.scss +3 -0
  8. package/scss/index.scss +137 -139
package/scss/all.scss ADDED
@@ -0,0 +1,3 @@
1
+ @import "index.scss";
2
+
3
+ @include kendo-icon-styles();
package/scss/index.scss CHANGED
@@ -1,186 +1,184 @@
1
-
2
1
  @import "_font.scss";
3
2
  @import "_variables.scss";
3
+ @import "_icon-list.scss";
4
+
5
+ @mixin kendo-icon-styles() {
6
+
7
+ // Keep this as a root selector, because it doesn't work when nested inside selector
8
+ @at-root {
9
+ @font-face {
10
+ font-family: $ki-font-family;
11
+ font-style: normal;
12
+ font-weight: normal;
13
+ src: url( "#{$ki-font-url}" ) format( "truetype" );
14
+ }
15
+ }
4
16
 
5
- // Keep this as a root selector, because it doesn't work when nested inside selector
6
- @at-root {
7
- @font-face {
17
+
18
+ // Font icon
19
+ .k-icon {
20
+ width: 1em;
21
+ height: 1em;
22
+ outline: 0;
23
+ font-size: $ki-icon-size;
8
24
  font-family: $ki-font-family;
9
25
  font-style: normal;
26
+ font-variant: normal;
10
27
  font-weight: normal;
11
- src: url( "#{$ki-font-url}" ) format( "truetype" );
12
- }
13
- }
14
-
15
- // Font icon
16
- .k-icon {
17
- width: 1em;
18
- height: 1em;
19
- outline: 0;
20
- font-size: $ki-icon-size;
21
- font-family: $ki-font-family;
22
- font-style: normal;
23
- font-variant: normal;
24
- font-weight: normal;
25
- line-height: 1;
26
- speak: none;
27
- text-transform: none;
28
- text-decoration: none;
29
- flex-shrink: 0;
30
- display: inline-flex;
31
- flex-flow: row nowrap;
32
- align-items: center;
33
- justify-content: center;
34
- vertical-align: middle;
35
- position: relative;
36
- -moz-osx-font-smoothing: grayscale;
37
- -webkit-font-smoothing: antialiased;
38
-
39
- &:hover,
40
- &:focus {
28
+ line-height: 1;
29
+ speak: none;
30
+ text-transform: none;
41
31
  text-decoration: none;
32
+ flex-shrink: 0;
33
+ display: inline-flex;
34
+ flex-flow: row nowrap;
35
+ align-items: center;
36
+ justify-content: center;
37
+ vertical-align: middle;
38
+ position: relative;
39
+ -moz-osx-font-smoothing: grayscale;
40
+ -webkit-font-smoothing: antialiased;
41
+
42
+ &:hover,
43
+ &:focus {
44
+ text-decoration: none;
45
+ }
42
46
  }
43
- }
44
47
 
45
48
 
46
- // Svg icon
47
- .k-svg-icon {
48
- width: $ki-icon-size;
49
- height: $ki-icon-size;
50
- outline: 0;
51
- line-height: 1;
52
- display: inline-flex;
53
- flex-flow: row nowrap;
54
- align-items: center;
55
- justify-content: center;
56
- vertical-align: middle;
57
- position: relative;
49
+ // Svg icon
50
+ .k-svg-icon {
51
+ width: $ki-icon-size;
52
+ height: $ki-icon-size;
53
+ outline: 0;
54
+ line-height: 1;
55
+ display: inline-flex;
56
+ flex-flow: row nowrap;
57
+ align-items: center;
58
+ justify-content: center;
59
+ vertical-align: middle;
60
+ position: relative;
58
61
 
59
- > svg {
60
- fill: currentColor;
61
- flex: 1 1 auto;
62
+ > svg {
63
+ fill: currentColor;
64
+ flex: 1 1 auto;
65
+ }
62
66
  }
63
- }
64
67
 
65
68
 
66
- .k-i-none::before {
67
- display: none !important; // stylelint-disable-line
68
- }
69
+ // Empty icon
70
+ .k-i-none::before {
71
+ display: none !important; // stylelint-disable-line
72
+ }
69
73
 
70
74
 
71
- // Icon sizes
72
- .k-icon-xs {
73
- font-size: $ki-icon-size-xs;
75
+ // Icon sizes
76
+ .k-icon-xs {
77
+ font-size: $ki-icon-size-xs;
74
78
 
75
- &.k-svg-icon {
76
- width: $ki-icon-size-xs;
77
- height: $ki-icon-size-xs;
79
+ &.k-svg-icon {
80
+ width: $ki-icon-size-xs;
81
+ height: $ki-icon-size-xs;
82
+ }
78
83
  }
79
- }
84
+ .k-icon-sm {
85
+ font-size: $ki-icon-size-sm;
80
86
 
81
- .k-icon-sm {
82
- font-size: $ki-icon-size-sm;
83
-
84
- &.k-svg-icon {
85
- width: $ki-icon-size-sm;
86
- height: $ki-icon-size-sm;
87
+ &.k-svg-icon {
88
+ width: $ki-icon-size-sm;
89
+ height: $ki-icon-size-sm;
90
+ }
87
91
  }
88
- }
92
+ .k-icon-md {
93
+ font-size: $ki-icon-size-md;
89
94
 
90
- .k-icon-md {
91
- font-size: $ki-icon-size-md;
92
-
93
- &.k-svg-icon {
94
- width: $ki-icon-size-md;
95
- height: $ki-icon-size-md;
95
+ &.k-svg-icon {
96
+ width: $ki-icon-size-md;
97
+ height: $ki-icon-size-md;
98
+ }
96
99
  }
97
- }
100
+ .k-icon-lg {
101
+ font-size: $ki-icon-size-lg;
98
102
 
99
- .k-icon-lg {
100
- font-size: $ki-icon-size-lg;
101
-
102
- &.k-svg-icon {
103
- width: $ki-icon-size-lg;
104
- height: $ki-icon-size-lg;
103
+ &.k-svg-icon {
104
+ width: $ki-icon-size-lg;
105
+ height: $ki-icon-size-lg;
106
+ }
105
107
  }
106
- }
107
-
108
- .k-icon-xl {
109
- font-size: $ki-icon-size-xl;
108
+ .k-icon-xl {
109
+ font-size: $ki-icon-size-xl;
110
110
 
111
- &.k-svg-icon {
112
- width: $ki-icon-size-xl;
113
- height: $ki-icon-size-xl;
111
+ &.k-svg-icon {
112
+ width: $ki-icon-size-xl;
113
+ height: $ki-icon-size-xl;
114
+ }
114
115
  }
115
- }
116
-
117
- .k-icon-xxl {
118
- font-size: $ki-icon-size-xxl;
116
+ .k-icon-xxl {
117
+ font-size: $ki-icon-size-xxl;
119
118
 
120
- &.k-svg-icon {
121
- width: $ki-icon-size-xxl;
122
- height: $ki-icon-size-xxl;
119
+ &.k-svg-icon {
120
+ width: $ki-icon-size-xxl;
121
+ height: $ki-icon-size-xxl;
122
+ }
123
123
  }
124
- }
125
-
126
- .k-icon-xxxl {
127
- font-size: $ki-icon-size-xxxl;
124
+ .k-icon-xxxl {
125
+ font-size: $ki-icon-size-xxxl;
128
126
 
129
- &.k-svg-icon {
130
- width: $ki-icon-size-xxxl;
131
- height: $ki-icon-size-xxxl;
127
+ &.k-svg-icon {
128
+ width: $ki-icon-size-xxxl;
129
+ height: $ki-icon-size-xxxl;
130
+ }
132
131
  }
133
- }
134
132
 
135
- // Flip
136
133
 
137
- .k-flip-h,
138
- .k-flip-v,
139
- .k-flip-h.k-flip-v {
140
- &.k-svg-icon {
141
- transform: none;
134
+ // Flip
135
+ .k-flip-h,
136
+ .k-flip-v,
137
+ .k-flip-h.k-flip-v {
138
+ &.k-svg-icon {
139
+ transform: none;
140
+ }
142
141
  }
143
- }
144
-
145
- .k-flip-h {
146
- transform: scaleX( -1 );
147
-
148
- > svg {
142
+ .k-flip-h {
149
143
  transform: scaleX( -1 );
150
- }
151
- }
152
-
153
- .k-flip-v {
154
- transform: scaleY( -1 );
155
144
 
156
- > svg {
157
- transform: scaleY( -1 );
145
+ > svg {
146
+ transform: scaleX( -1 );
147
+ }
158
148
  }
159
- }
160
-
161
- .k-flip-h.k-flip-v {
162
- transform: scale( -1, -1 );
149
+ .k-flip-v {
150
+ transform: scaleY( -1 );
163
151
 
164
- > svg {
152
+ > svg {
153
+ transform: scaleY( -1 );
154
+ }
155
+ }
156
+ .k-flip-h.k-flip-v,
157
+ .k-flip-both {
165
158
  transform: scale( -1, -1 );
159
+
160
+ > svg {
161
+ transform: scale( -1, -1 );
162
+ }
166
163
  }
167
- }
168
164
 
169
- // Rotate
170
165
 
171
- @each $index, $rotate in $ki-rotate-map {
172
- .k-rotate-#{$index} {
173
- transform: rotate( #{$rotate} );
166
+ // Rotate
167
+ @each $index, $rotate in $ki-rotate-map {
168
+ .k-rotate-#{$index} {
169
+ transform: rotate( #{$rotate} );
174
170
 
175
- &.k-svg-icon {
176
- transform: none;
177
- }
171
+ &.k-svg-icon {
172
+ transform: none;
173
+ }
178
174
 
179
- > svg {
180
- transform: rotate( #{$rotate} );
175
+ > svg {
176
+ transform: rotate( #{$rotate} );
177
+ }
181
178
  }
182
179
  }
183
- }
184
180
 
185
181
 
186
- @import "_icons.scss";
182
+ @include kendo-icon-list();
183
+
184
+ }