@kms-ngx-ui/presentational 16.12.1 → 16.12.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.
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { OnInit } from '@angular/core';
|
|
5
5
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
6
|
-
import { IconSize } from './iconSize.enum';
|
|
7
6
|
import * as colors from '../../../assets/icons.json';
|
|
7
|
+
import { IconSize } from './iconSize.enum';
|
|
8
8
|
import * as i0 from "@angular/core";
|
|
9
9
|
export declare class IconComponent implements OnInit {
|
|
10
10
|
sanitizer: DomSanitizer;
|
package/package.json
CHANGED
|
@@ -1,115 +1,115 @@
|
|
|
1
|
-
|
|
2
1
|
@import '../../../styles/mixins.scss';
|
|
3
|
-
@mixin icon-theme(){
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
2
|
+
@mixin icon-theme() {
|
|
3
|
+
.icon {
|
|
4
|
+
display: inline-block;
|
|
5
|
+
height: inherit;
|
|
6
|
+
outline-color: transparent;
|
|
7
|
+
transition: transform 0.2s ease-in-out;
|
|
8
|
+
position: relative;
|
|
9
|
+
@include iconSize(100%);
|
|
10
|
+
|
|
11
|
+
&.size {
|
|
12
|
+
&-full {
|
|
10
13
|
@include iconSize(100%);
|
|
14
|
+
}
|
|
15
|
+
&-16 {
|
|
16
|
+
@include iconSize(16px);
|
|
17
|
+
}
|
|
18
|
+
&-20 {
|
|
19
|
+
@include iconSize(20px);
|
|
20
|
+
}
|
|
21
|
+
&-32 {
|
|
22
|
+
@include iconSize(32px);
|
|
23
|
+
}
|
|
24
|
+
&-64 {
|
|
25
|
+
@include iconSize(64px);
|
|
26
|
+
}
|
|
27
|
+
&-128 {
|
|
28
|
+
@include iconSize(64px);
|
|
29
|
+
}
|
|
30
|
+
&-256 {
|
|
31
|
+
@include iconSize(256px);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
11
34
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}
|
|
19
|
-
&-20{
|
|
20
|
-
@include iconSize(20px);
|
|
21
|
-
}
|
|
22
|
-
&-32{
|
|
23
|
-
@include iconSize(32px);
|
|
24
|
-
}
|
|
25
|
-
&-64{
|
|
26
|
-
@include iconSize(64px);
|
|
27
|
-
}
|
|
28
|
-
&-128{
|
|
29
|
-
@include iconSize(64px);
|
|
30
|
-
}
|
|
31
|
-
&-256{
|
|
32
|
-
@include iconSize(256px);
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
+
svg,
|
|
36
|
+
use {
|
|
37
|
+
fill: black;
|
|
38
|
+
position: relative;
|
|
39
|
+
transform: translate(0, 0) !important;
|
|
40
|
+
}
|
|
35
41
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
&_hoverable {
|
|
43
|
-
cursor: pointer;
|
|
44
|
-
&:hover,
|
|
45
|
-
&:focus {
|
|
46
|
-
svg use{
|
|
47
|
-
fill: var(--primaryColor);
|
|
48
|
-
}
|
|
49
|
-
}
|
|
42
|
+
&_hoverable {
|
|
43
|
+
cursor: pointer;
|
|
44
|
+
&:hover,
|
|
45
|
+
&:focus {
|
|
46
|
+
svg use {
|
|
47
|
+
fill: var(--primaryColor);
|
|
50
48
|
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
51
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
&:hover, &:focus {
|
|
57
|
-
fill: var(--primaryColor02) !important;
|
|
58
|
-
}
|
|
59
|
-
}
|
|
52
|
+
&_active {
|
|
53
|
+
cursor: pointer;
|
|
54
|
+
fill: var(--primaryColor) !important;
|
|
60
55
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
fill: var(--accentColor);
|
|
67
|
-
}
|
|
68
|
-
&-disabled svg use{
|
|
69
|
-
fill: var(--gray04);
|
|
70
|
-
}
|
|
71
|
-
&-white svg use{
|
|
72
|
-
fill: var(--white);
|
|
73
|
-
}
|
|
74
|
-
&-blackish svg use{
|
|
75
|
-
fill: var(--gray09);
|
|
76
|
-
}
|
|
77
|
-
&-warn svg use{
|
|
78
|
-
fill: #BF2F2F;
|
|
79
|
-
}
|
|
80
|
-
&-success svg use{
|
|
81
|
-
fill: #39B948;
|
|
82
|
-
}
|
|
83
|
-
&-info svg use{
|
|
84
|
-
fill: #E5C936;
|
|
85
|
-
}
|
|
86
|
-
&-grey1 svg use{
|
|
87
|
-
fill: #646260;
|
|
88
|
-
}
|
|
89
|
-
&-grey2 svg use{
|
|
90
|
-
fill: #918F8E;
|
|
91
|
-
}
|
|
92
|
-
&-grey3 svg use{
|
|
93
|
-
fill: var(--gray04);
|
|
94
|
-
}
|
|
95
|
-
&-grey4 svg use{
|
|
96
|
-
fill: #E4E4E4;
|
|
97
|
-
}
|
|
98
|
-
&-grey5 svg use{
|
|
99
|
-
fill: #F2F2F2;
|
|
100
|
-
}
|
|
101
|
-
&-grey6 svg use{
|
|
102
|
-
fill: var(--gray07);
|
|
103
|
-
}
|
|
104
|
-
&-inactive{
|
|
105
|
-
fill: #bdbcbb;
|
|
106
|
-
}
|
|
107
|
-
}
|
|
56
|
+
&:hover,
|
|
57
|
+
&:focus {
|
|
58
|
+
fill: var(--primaryColor02) !important;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
108
61
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
62
|
+
&.color {
|
|
63
|
+
&-primary svg use {
|
|
64
|
+
fill: var(--primaryColor);
|
|
65
|
+
}
|
|
66
|
+
&-accent svg use {
|
|
67
|
+
fill: var(--accentColor);
|
|
68
|
+
}
|
|
69
|
+
&-disabled svg use {
|
|
70
|
+
fill: var(--gray04);
|
|
71
|
+
}
|
|
72
|
+
&-white svg use {
|
|
73
|
+
fill: #fff;
|
|
74
|
+
}
|
|
75
|
+
&-blackish svg use {
|
|
76
|
+
fill: var(--gray09);
|
|
77
|
+
}
|
|
78
|
+
&-warn svg use {
|
|
79
|
+
fill: #bf2f2f;
|
|
80
|
+
}
|
|
81
|
+
&-success svg use {
|
|
82
|
+
fill: #39b948;
|
|
83
|
+
}
|
|
84
|
+
&-info svg use {
|
|
85
|
+
fill: #e5c936;
|
|
86
|
+
}
|
|
87
|
+
&-grey1 svg use {
|
|
88
|
+
fill: #646260;
|
|
89
|
+
}
|
|
90
|
+
&-grey2 svg use {
|
|
91
|
+
fill: #918f8e;
|
|
92
|
+
}
|
|
93
|
+
&-grey3 svg use {
|
|
94
|
+
fill: var(--gray04);
|
|
95
|
+
}
|
|
96
|
+
&-grey4 svg use {
|
|
97
|
+
fill: #e4e4e4;
|
|
98
|
+
}
|
|
99
|
+
&-grey5 svg use {
|
|
100
|
+
fill: #f2f2f2;
|
|
101
|
+
}
|
|
102
|
+
&-grey6 svg use {
|
|
103
|
+
fill: var(--gray07);
|
|
104
|
+
}
|
|
105
|
+
&-inactive {
|
|
106
|
+
fill: #bdbcbb;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
113
109
|
|
|
110
|
+
// IE 11 with win7 fix that caused an application freeze.
|
|
111
|
+
svg use {
|
|
112
|
+
pointer-events: none;
|
|
114
113
|
}
|
|
115
|
-
}
|
|
114
|
+
}
|
|
115
|
+
}
|