igniteui-theming 7.0.2 → 7.1.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.
package/package.json
CHANGED
|
@@ -19,34 +19,8 @@ $dark-fluent-banner: $fluent-banner;
|
|
|
19
19
|
|
|
20
20
|
/// Generates a dark bootstrap banner schema.
|
|
21
21
|
/// @type {Map}
|
|
22
|
-
/// @prop {Map} banner-background [color: ('surface')] - The color used for the banner background.
|
|
23
|
-
/// @prop {Map} banner-message-color [color: ('gray', 600)] - The color used for the banner label.
|
|
24
|
-
/// @prop {Map} banner-illustration-color [color: ('gray', 600)] - The color used for the banner illustration.
|
|
25
22
|
/// @requires $bootstrap-banner
|
|
26
|
-
$dark-bootstrap-banner:
|
|
27
|
-
$bootstrap-banner,
|
|
28
|
-
(
|
|
29
|
-
banner-background: (
|
|
30
|
-
color: (
|
|
31
|
-
'surface',
|
|
32
|
-
),
|
|
33
|
-
),
|
|
34
|
-
|
|
35
|
-
banner-message-color: (
|
|
36
|
-
color: (
|
|
37
|
-
'gray',
|
|
38
|
-
600,
|
|
39
|
-
),
|
|
40
|
-
),
|
|
41
|
-
|
|
42
|
-
banner-illustration-color: (
|
|
43
|
-
color: (
|
|
44
|
-
'gray',
|
|
45
|
-
600,
|
|
46
|
-
),
|
|
47
|
-
),
|
|
48
|
-
)
|
|
49
|
-
);
|
|
23
|
+
$dark-bootstrap-banner: $bootstrap-banner;
|
|
50
24
|
|
|
51
25
|
/// Generates a dark indigo banner schema.
|
|
52
26
|
/// @type {Map}
|
|
@@ -11,52 +11,92 @@
|
|
|
11
11
|
/// @type {Map}
|
|
12
12
|
/// @prop {Map} banner-background [color: 'surface'] - The color used for the banner background.
|
|
13
13
|
/// @prop {Map} banner-message-color [contrast-color: 'surface'] - The color used for the banner label.
|
|
14
|
-
/// @prop {
|
|
15
|
-
/// @prop {Map} banner-illustration-color [contrast-color: 'surface'] - The color used for the banner illustration.
|
|
14
|
+
/// @prop {Number} border-radius [0] - The border radius of the banner
|
|
16
15
|
$light-banner: (
|
|
17
16
|
banner-background: (
|
|
18
17
|
color: 'surface',
|
|
19
18
|
),
|
|
20
19
|
|
|
21
|
-
|
|
22
|
-
contrast-color: 'surface',
|
|
23
|
-
),
|
|
24
|
-
|
|
25
|
-
banner-border-color: (
|
|
26
|
-
color: (
|
|
27
|
-
'gray',
|
|
28
|
-
400,
|
|
29
|
-
),
|
|
30
|
-
),
|
|
31
|
-
|
|
32
|
-
banner-illustration-color: (
|
|
33
|
-
contrast-color: 'surface',
|
|
34
|
-
),
|
|
20
|
+
border-radius: 0,
|
|
35
21
|
);
|
|
36
22
|
|
|
37
23
|
/// Generates a material banner schema.
|
|
38
24
|
/// @type {Map}
|
|
25
|
+
/// @prop {Map} banner-message-color [color: ('gray', 900)] - The color used for the banner label.
|
|
26
|
+
/// @prop {Map} banner-illustration-color [color: ('gray', 900)] - The color used for the banner illustration.
|
|
27
|
+
/// @prop {Map} banner-border-color [color: ('gray', 300)] - The color used for the banner border.
|
|
39
28
|
/// @requires {Map} $light-banner
|
|
40
|
-
$material-banner:
|
|
29
|
+
$material-banner: extend(
|
|
30
|
+
$light-banner,
|
|
31
|
+
(
|
|
32
|
+
banner-border-color: (
|
|
33
|
+
color: (
|
|
34
|
+
'gray',
|
|
35
|
+
300,
|
|
36
|
+
),
|
|
37
|
+
),
|
|
38
|
+
|
|
39
|
+
banner-message-color: (
|
|
40
|
+
color: (
|
|
41
|
+
'gray',
|
|
42
|
+
900,
|
|
43
|
+
),
|
|
44
|
+
),
|
|
45
|
+
|
|
46
|
+
banner-illustration-color: (
|
|
47
|
+
color: (
|
|
48
|
+
'gray',
|
|
49
|
+
900,
|
|
50
|
+
),
|
|
51
|
+
),
|
|
52
|
+
)
|
|
53
|
+
);
|
|
41
54
|
|
|
42
55
|
/// Generates a fluent banner schema.
|
|
43
56
|
/// @type {Map}
|
|
57
|
+
/// @prop {Map} banner-message-color [color: ('gray', 900)] - The color used for the banner label.
|
|
58
|
+
/// @prop {Map} banner-illustration-color [color: ('gray', 900)] - The color used for the banner illustration.
|
|
59
|
+
/// @prop {Map} banner-border-color [color: ('gray', 300)] - The color used for the banner border.
|
|
44
60
|
/// @requires {Map} $light-banner
|
|
45
|
-
$fluent-banner:
|
|
61
|
+
$fluent-banner: extend(
|
|
62
|
+
$light-banner,
|
|
63
|
+
(
|
|
64
|
+
banner-border-color: (
|
|
65
|
+
color: (
|
|
66
|
+
'gray',
|
|
67
|
+
300,
|
|
68
|
+
),
|
|
69
|
+
),
|
|
70
|
+
|
|
71
|
+
banner-message-color: (
|
|
72
|
+
color: (
|
|
73
|
+
'gray',
|
|
74
|
+
900,
|
|
75
|
+
),
|
|
76
|
+
),
|
|
77
|
+
|
|
78
|
+
banner-illustration-color: (
|
|
79
|
+
color: (
|
|
80
|
+
'gray',
|
|
81
|
+
900,
|
|
82
|
+
),
|
|
83
|
+
),
|
|
84
|
+
)
|
|
85
|
+
);
|
|
46
86
|
|
|
47
87
|
/// Generates a bootstrap banner schema.
|
|
48
88
|
/// @type {Map}
|
|
49
|
-
/// @prop {Map} banner-background [contrast-color: ('gray', 900)] - The color used for the banner background.
|
|
50
89
|
/// @prop {Map} banner-message-color [color: ('gray', 800)] - The color used for the banner label.
|
|
90
|
+
/// @prop {Map} banner-border-color [color: ('gray', 300)] - The color used for the banner border.
|
|
51
91
|
/// @prop {Map} banner-illustration-color [color: ('gray', 800)] - The color used for the banner illustration.
|
|
52
92
|
/// @requires {Map} $light-banner
|
|
53
93
|
$bootstrap-banner: extend(
|
|
54
94
|
$light-banner,
|
|
55
95
|
(
|
|
56
|
-
banner-
|
|
57
|
-
|
|
96
|
+
banner-border-color: (
|
|
97
|
+
color: (
|
|
58
98
|
'gray',
|
|
59
|
-
|
|
99
|
+
300,
|
|
60
100
|
),
|
|
61
101
|
),
|
|
62
102
|
|
|
@@ -82,6 +122,7 @@ $bootstrap-banner: extend(
|
|
|
82
122
|
/// @prop {Map} banner-message-color [color: ('gray', 700)] - The color used for the banner label.
|
|
83
123
|
/// @prop {Map} banner-border-color [color: ('gray', 300)] - The color used for the banner border.
|
|
84
124
|
/// @prop {Map} banner-illustration-color [color: ('gray', 600)] - The color used for the banner illustration.
|
|
125
|
+
/// @prop {Number} border-radius [rem(6px)] - The border radius of the banner
|
|
85
126
|
$indigo-banner: (
|
|
86
127
|
banner-background: (
|
|
87
128
|
color: (
|
|
@@ -110,4 +151,6 @@ $indigo-banner: (
|
|
|
110
151
|
600,
|
|
111
152
|
),
|
|
112
153
|
),
|
|
154
|
+
|
|
155
|
+
border-radius: rem(6px),
|
|
113
156
|
);
|