@progress/kendo-font-icons 1.1.2 → 1.4.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 (7) hide show
  1. package/dist/kendo-font-icons.ttf +0 -0
  2. package/package.json +2 -2
  3. package/scss/_font.scss +1 -1
  4. package/scss/_icon-list.scss +1008 -0
  5. package/scss/_icons.scss +1008 -1006
  6. package/scss/all.scss +3 -0
  7. package/scss/index.scss +137 -140
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,187 +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
- .k-flip-both {
163
- transform: scale( -1, -1 );
149
+ .k-flip-v {
150
+ transform: scaleY( -1 );
164
151
 
165
- > svg {
152
+ > svg {
153
+ transform: scaleY( -1 );
154
+ }
155
+ }
156
+ .k-flip-h.k-flip-v,
157
+ .k-flip-both {
166
158
  transform: scale( -1, -1 );
159
+
160
+ > svg {
161
+ transform: scale( -1, -1 );
162
+ }
167
163
  }
168
- }
169
164
 
170
- // Rotate
171
165
 
172
- @each $index, $rotate in $ki-rotate-map {
173
- .k-rotate-#{$index} {
174
- transform: rotate( #{$rotate} );
166
+ // Rotate
167
+ @each $index, $rotate in $ki-rotate-map {
168
+ .k-rotate-#{$index} {
169
+ transform: rotate( #{$rotate} );
175
170
 
176
- &.k-svg-icon {
177
- transform: none;
178
- }
171
+ &.k-svg-icon {
172
+ transform: none;
173
+ }
179
174
 
180
- > svg {
181
- transform: rotate( #{$rotate} );
175
+ > svg {
176
+ transform: rotate( #{$rotate} );
177
+ }
182
178
  }
183
179
  }
184
- }
185
180
 
186
181
 
187
- @import "_icons.scss";
182
+ @include kendo-icon-list();
183
+
184
+ }