igniteui-theming 14.3.1 → 14.4.0-beta.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.
- package/package.json +1 -1
- package/sass/themes/schemas/components/dark/_index.scss +5 -0
- package/sass/themes/schemas/components/dark/_tile-manager.scss +207 -0
- package/sass/themes/schemas/components/elevation/_tile-manager.scss +13 -0
- package/sass/themes/schemas/components/light/_index.scss +5 -0
- package/sass/themes/schemas/components/light/_tile-manager.scss +280 -0
- package/sass/typography/_functions.scss +5 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "igniteui-theming",
|
|
3
|
-
"version": "14.
|
|
3
|
+
"version": "14.4.0-beta.2",
|
|
4
4
|
"description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -52,6 +52,7 @@
|
|
|
52
52
|
@use './stepper' as *;
|
|
53
53
|
@use './switch' as *;
|
|
54
54
|
@use './tabs' as *;
|
|
55
|
+
@use './tile-manager' as *;
|
|
55
56
|
@use './time-picker' as *;
|
|
56
57
|
@use './toast' as *;
|
|
57
58
|
@use './tooltip' as *;
|
|
@@ -112,6 +113,7 @@ $dark-material-schema: (
|
|
|
112
113
|
stepper: $dark-material-stepper,
|
|
113
114
|
switch: $dark-material-switch,
|
|
114
115
|
tabs: $dark-material-tabs,
|
|
116
|
+
tile-manager: $dark-material-tile-manager,
|
|
115
117
|
time-picker: $dark-material-time-picker,
|
|
116
118
|
toast: $dark-material-toast,
|
|
117
119
|
tooltip: $dark-material-tooltip,
|
|
@@ -177,6 +179,7 @@ $dark-fluent-schema: (
|
|
|
177
179
|
stepper: $dark-fluent-stepper,
|
|
178
180
|
switch: $dark-fluent-switch,
|
|
179
181
|
tabs: $dark-fluent-tabs,
|
|
182
|
+
tile-manager: $dark-fluent-tile-manager,
|
|
180
183
|
time-picker: $dark-fluent-time-picker,
|
|
181
184
|
toast: $dark-fluent-toast,
|
|
182
185
|
tooltip: $dark-fluent-tooltip,
|
|
@@ -242,6 +245,7 @@ $dark-bootstrap-schema: (
|
|
|
242
245
|
stepper: $dark-bootstrap-stepper,
|
|
243
246
|
switch: $dark-bootstrap-switch,
|
|
244
247
|
tabs: $dark-bootstrap-tabs,
|
|
248
|
+
tile-manager: $dark-bootstrap-tile-manager,
|
|
245
249
|
time-picker: $dark-bootstrap-time-picker,
|
|
246
250
|
toast: $dark-bootstrap-toast,
|
|
247
251
|
tooltip: $dark-bootstrap-tooltip,
|
|
@@ -307,6 +311,7 @@ $dark-indigo-schema: (
|
|
|
307
311
|
stepper: $dark-indigo-stepper,
|
|
308
312
|
switch: $dark-indigo-switch,
|
|
309
313
|
tabs: $dark-indigo-tabs,
|
|
314
|
+
tile-manager: $dark-indigo-tile-manager,
|
|
310
315
|
time-picker: $dark-indigo-time-picker,
|
|
311
316
|
toast: $dark-indigo-toast,
|
|
312
317
|
tooltip: $dark-indigo-tooltip,
|
|
@@ -0,0 +1,207 @@
|
|
|
1
|
+
@use '../../../../utils/map' as *;
|
|
2
|
+
@use '../light/tile-manager' as *;
|
|
3
|
+
|
|
4
|
+
////
|
|
5
|
+
/// @package theming
|
|
6
|
+
/// @group schemas
|
|
7
|
+
/// @access public
|
|
8
|
+
////
|
|
9
|
+
|
|
10
|
+
/// Generates a dark base tile manager schema.
|
|
11
|
+
/// @type {Map}
|
|
12
|
+
/// @prop {Map} hover-border-color [color: ('gray', 200)] - The border color of the tile component on hover.
|
|
13
|
+
/// @prop {Map} resize-indicator [color: ('gray', 200)] - The color of the tile resize indicator.
|
|
14
|
+
/// @prop {Map} placeholder-background [color: ('primary', 700, .15)] - The background color of the ghost element that appears during drag and drop and while resizing.
|
|
15
|
+
/// @prop {Map} overlay-background [color: ('primary', 700, .5)] - The background color of the ghost element that appears on top of the tile that will be swapped.
|
|
16
|
+
$dark-base-tile-manager: (
|
|
17
|
+
hover-border-color: (
|
|
18
|
+
color: (
|
|
19
|
+
'gray',
|
|
20
|
+
200,
|
|
21
|
+
),
|
|
22
|
+
),
|
|
23
|
+
|
|
24
|
+
resize-indicator: (
|
|
25
|
+
color: (
|
|
26
|
+
'gray',
|
|
27
|
+
200,
|
|
28
|
+
),
|
|
29
|
+
),
|
|
30
|
+
|
|
31
|
+
placeholder-background: (
|
|
32
|
+
color: (
|
|
33
|
+
'primary',
|
|
34
|
+
700,
|
|
35
|
+
0.15,
|
|
36
|
+
),
|
|
37
|
+
),
|
|
38
|
+
|
|
39
|
+
overlay-background: (
|
|
40
|
+
color: (
|
|
41
|
+
'primary',
|
|
42
|
+
700,
|
|
43
|
+
0.5,
|
|
44
|
+
),
|
|
45
|
+
),
|
|
46
|
+
);
|
|
47
|
+
|
|
48
|
+
/// Generates a dark material tile manager schema.
|
|
49
|
+
/// @type {Map}
|
|
50
|
+
/// @requires {Map} $material-tile-manager
|
|
51
|
+
/// @requires {Map} $dark-base-tile-manager
|
|
52
|
+
$dark-material-tile-manager: extend($material-tile-manager, $dark-base-tile-manager);
|
|
53
|
+
|
|
54
|
+
/// Generates a dark fluent tile manager schema.
|
|
55
|
+
/// @type {Map}
|
|
56
|
+
/// @requires {Map} $fluent-tile-manager
|
|
57
|
+
/// @requires {Map} $dark-base-tile-manager
|
|
58
|
+
$dark-fluent-tile-manager: extend($fluent-tile-manager, $dark-base-tile-manager);
|
|
59
|
+
|
|
60
|
+
/// Generates a dark bootstrap tile manager schema.
|
|
61
|
+
/// @type {Map}
|
|
62
|
+
/// @prop {Map} tile-manager-background [color: ('gray', 100)] - The background color of the tile manager component.
|
|
63
|
+
/// @prop {Map} border-color [color: ('gray', 200)] - The border color of the tile component on hover.
|
|
64
|
+
/// @prop {Map} hover-border-color [color: ('gray', 300)] - The border color of the tile component on hover.
|
|
65
|
+
/// @prop {Map} resize-indicator [color: ('gray', 300)] - The color of the tile resize indicator.
|
|
66
|
+
/// @prop {Map} placeholder-background [color: ('primary', 700, .15)] - The background color of the ghost element that appears during drag and drop and while resizing.
|
|
67
|
+
/// @prop {Map} overlay-background [color: ('primary', 700, .4)] - The background color of the ghost element that appears on top of the tile that will be swapped.
|
|
68
|
+
/// @requires {Map} $bootstrap-tile-manager
|
|
69
|
+
$dark-bootstrap-tile-manager: extend(
|
|
70
|
+
$bootstrap-tile-manager,
|
|
71
|
+
(
|
|
72
|
+
tile-manager-background: (
|
|
73
|
+
color: (
|
|
74
|
+
'gray',
|
|
75
|
+
100,
|
|
76
|
+
),
|
|
77
|
+
),
|
|
78
|
+
|
|
79
|
+
border-color: (
|
|
80
|
+
color: (
|
|
81
|
+
'gray',
|
|
82
|
+
200,
|
|
83
|
+
),
|
|
84
|
+
),
|
|
85
|
+
|
|
86
|
+
hover-border-color: (
|
|
87
|
+
color: (
|
|
88
|
+
'gray',
|
|
89
|
+
300,
|
|
90
|
+
),
|
|
91
|
+
),
|
|
92
|
+
|
|
93
|
+
resize-indicator: (
|
|
94
|
+
color: (
|
|
95
|
+
'gray',
|
|
96
|
+
300,
|
|
97
|
+
),
|
|
98
|
+
),
|
|
99
|
+
|
|
100
|
+
placeholder-background: (
|
|
101
|
+
color: (
|
|
102
|
+
'primary',
|
|
103
|
+
700,
|
|
104
|
+
0.15,
|
|
105
|
+
),
|
|
106
|
+
),
|
|
107
|
+
|
|
108
|
+
overlay-background: (
|
|
109
|
+
color: (
|
|
110
|
+
'primary',
|
|
111
|
+
700,
|
|
112
|
+
0.4,
|
|
113
|
+
),
|
|
114
|
+
),
|
|
115
|
+
)
|
|
116
|
+
);
|
|
117
|
+
|
|
118
|
+
/// Generates a dark indigo tile manager schema.
|
|
119
|
+
/// @type {Map}
|
|
120
|
+
/// @prop {Map} tile-background [color: ('gray', 50)] - The background color of the tile component inside the tile manager.
|
|
121
|
+
/// @prop {Map} title-color [contrast-color: ('gray', 50, .9)] - The title color of the tile component.
|
|
122
|
+
/// @prop {Map} header-background [color: ('gray', 50)] - The background color of the tile header component.
|
|
123
|
+
/// @prop {Map} content-background [color: ('gray', 50)] - The background color of the tile component content.
|
|
124
|
+
/// @prop {Map} border-color [color: ('gray', 100)] - The border color of the tile component.
|
|
125
|
+
/// @prop {Map} hover-border-color [color: ('gray', 200)] - The border color of the tile component on hover.
|
|
126
|
+
/// @prop {Map} placeholder-background [color: ('primary', 500, .15)] - The background color of the ghost element that appears during drag and drop and while resizing.
|
|
127
|
+
/// @prop {Map} overlay-background [color: ('primary', 700, .5)] - The background color of the ghost element that appears on top of the tile that will be swapped.
|
|
128
|
+
/// @prop {Map} ghost-border [color: ('primary', 300)] - The border color of the ghost element that appears during drag and drop and while resizing.
|
|
129
|
+
/// @prop {Map} resize-indicator [color: ('gray', 200)] - The color of the tile resize indicator.
|
|
130
|
+
/// @requires {Map} $indigo-tile-manager
|
|
131
|
+
$dark-indigo-tile-manager: extend(
|
|
132
|
+
$indigo-tile-manager,
|
|
133
|
+
(
|
|
134
|
+
tile-background: (
|
|
135
|
+
color: (
|
|
136
|
+
'gray',
|
|
137
|
+
50,
|
|
138
|
+
),
|
|
139
|
+
),
|
|
140
|
+
|
|
141
|
+
title-color: (
|
|
142
|
+
contrast-color: (
|
|
143
|
+
'gray',
|
|
144
|
+
50,
|
|
145
|
+
0.9,
|
|
146
|
+
),
|
|
147
|
+
),
|
|
148
|
+
|
|
149
|
+
header-background: (
|
|
150
|
+
color: (
|
|
151
|
+
'gray',
|
|
152
|
+
50,
|
|
153
|
+
),
|
|
154
|
+
),
|
|
155
|
+
|
|
156
|
+
content-background: (
|
|
157
|
+
color: (
|
|
158
|
+
'gray',
|
|
159
|
+
50,
|
|
160
|
+
),
|
|
161
|
+
),
|
|
162
|
+
|
|
163
|
+
border-color: (
|
|
164
|
+
color: (
|
|
165
|
+
'gray',
|
|
166
|
+
100,
|
|
167
|
+
),
|
|
168
|
+
),
|
|
169
|
+
|
|
170
|
+
hover-border-color: (
|
|
171
|
+
color: (
|
|
172
|
+
'gray',
|
|
173
|
+
200,
|
|
174
|
+
),
|
|
175
|
+
),
|
|
176
|
+
|
|
177
|
+
resize-indicator: (
|
|
178
|
+
color: (
|
|
179
|
+
'gray',
|
|
180
|
+
200,
|
|
181
|
+
),
|
|
182
|
+
),
|
|
183
|
+
|
|
184
|
+
placeholder-background: (
|
|
185
|
+
color: (
|
|
186
|
+
'primary',
|
|
187
|
+
500,
|
|
188
|
+
0.15,
|
|
189
|
+
),
|
|
190
|
+
),
|
|
191
|
+
|
|
192
|
+
overlay-background: (
|
|
193
|
+
color: (
|
|
194
|
+
'primary',
|
|
195
|
+
700,
|
|
196
|
+
0.5,
|
|
197
|
+
),
|
|
198
|
+
),
|
|
199
|
+
|
|
200
|
+
ghost-border: (
|
|
201
|
+
color: (
|
|
202
|
+
'primary',
|
|
203
|
+
300,
|
|
204
|
+
),
|
|
205
|
+
),
|
|
206
|
+
)
|
|
207
|
+
);
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
////
|
|
2
|
+
/// @package theming
|
|
3
|
+
/// @group schemas
|
|
4
|
+
/// @access public
|
|
5
|
+
////
|
|
6
|
+
|
|
7
|
+
/// @type Map
|
|
8
|
+
/// @prop {Number} resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state.
|
|
9
|
+
/// @prop {Number} drag-elevation [5] - The elevation level, between 0-24, to be used for the drag state.
|
|
10
|
+
$default-elevation-tile: (
|
|
11
|
+
resting-elevation: 0,
|
|
12
|
+
drag-elevation: 5,
|
|
13
|
+
);
|
|
@@ -52,6 +52,7 @@
|
|
|
52
52
|
@use './stepper' as *;
|
|
53
53
|
@use './switch' as *;
|
|
54
54
|
@use './tabs' as *;
|
|
55
|
+
@use './tile-manager' as *;
|
|
55
56
|
@use './time-picker' as *;
|
|
56
57
|
@use './toast' as *;
|
|
57
58
|
@use './tooltip' as *;
|
|
@@ -112,6 +113,7 @@ $light-material-schema: (
|
|
|
112
113
|
stepper: $material-stepper,
|
|
113
114
|
switch: $material-switch,
|
|
114
115
|
tabs: $material-tabs,
|
|
116
|
+
tile-manager: $material-tile-manager,
|
|
115
117
|
time-picker: $material-time-picker,
|
|
116
118
|
toast: $material-toast,
|
|
117
119
|
tooltip: $material-tooltip,
|
|
@@ -177,6 +179,7 @@ $light-fluent-schema: (
|
|
|
177
179
|
stepper: $fluent-stepper,
|
|
178
180
|
switch: $fluent-switch,
|
|
179
181
|
tabs: $fluent-tabs,
|
|
182
|
+
tile-manager: $fluent-tile-manager,
|
|
180
183
|
time-picker: $fluent-time-picker,
|
|
181
184
|
toast: $fluent-toast,
|
|
182
185
|
tooltip: $fluent-tooltip,
|
|
@@ -242,6 +245,7 @@ $light-bootstrap-schema: (
|
|
|
242
245
|
stepper: $bootstrap-stepper,
|
|
243
246
|
switch: $bootstrap-switch,
|
|
244
247
|
tabs: $bootstrap-tabs,
|
|
248
|
+
tile-manager: $bootstrap-tile-manager,
|
|
245
249
|
time-picker: $bootstrap-time-picker,
|
|
246
250
|
toast: $bootstrap-toast,
|
|
247
251
|
tooltip: $bootstrap-tooltip,
|
|
@@ -307,6 +311,7 @@ $light-indigo-schema: (
|
|
|
307
311
|
stepper: $indigo-stepper,
|
|
308
312
|
switch: $indigo-switch,
|
|
309
313
|
tabs: $indigo-tabs,
|
|
314
|
+
tile-manager: $indigo-tile-manager,
|
|
310
315
|
time-picker: $indigo-time-picker,
|
|
311
316
|
toast: $indigo-toast,
|
|
312
317
|
tooltip: $indigo-tooltip,
|
|
@@ -0,0 +1,280 @@
|
|
|
1
|
+
@use '../../../../utils/map' as *;
|
|
2
|
+
@use '../../../../typography/functions' as *;
|
|
3
|
+
@use '../elevation/tile-manager' as *;
|
|
4
|
+
|
|
5
|
+
////
|
|
6
|
+
/// @package theming
|
|
7
|
+
/// @group schemas
|
|
8
|
+
/// @access public
|
|
9
|
+
////
|
|
10
|
+
|
|
11
|
+
/// Generates a light base tile manager schema.
|
|
12
|
+
/// @type {Map}
|
|
13
|
+
/// @prop {Map} tile-manager-background [color: ('gray', 100)] - The background color of the tile manager component.
|
|
14
|
+
/// @prop {Map} tile-background [color: ('surface', 500)] - The background color of the tile component inside the tile manager.
|
|
15
|
+
/// @prop {Map} title-color [color: ('gray', 900)] - The title color of the tile component.
|
|
16
|
+
/// @prop {Map} header-background [color: ('surface', 500)] - The background color of the tile header component.
|
|
17
|
+
/// @prop {Map} content-background [color: ('surface', 500)] - The background color of the tile component content.
|
|
18
|
+
/// @prop {Map} content-color [color: ('gray', 700)] - The text color of the tile component content.
|
|
19
|
+
/// @prop {Color} border-color [transparent] - The border color of the tile component.
|
|
20
|
+
/// @prop {Map} hover-border-color [color: ('gray', 400)] - The border color of the tile component on hover.
|
|
21
|
+
/// @prop {Map} resize-indicator [color: ('gray', 400)] - The color of the tile resize indicator.
|
|
22
|
+
/// @prop {Map} placeholder-background [color: ('primary', 100, .3)] - The background color of the ghost element that appears during drag and drop and while resizing.
|
|
23
|
+
/// @prop {Map} overlay-background [color: ('primary', 100, .6)] - The background color of the ghost element that appears on top of the tile that will be swapped.
|
|
24
|
+
/// @prop {Map} ghost-border [color: ('primary', 500)] - The border color of the ghost element that appears during drag and drop and while resizing.
|
|
25
|
+
/// @prop {Color} divider-color [transparent] - The color of the divider component inside the tile header.
|
|
26
|
+
/// @prop {Number} border-radius [rem(4px)] - The border radius of the tile component.
|
|
27
|
+
/// @prop {Number} default-size [2] - The default size used for the tile manager component.
|
|
28
|
+
/// @requires {Map} $default-elevation-tile
|
|
29
|
+
$light-tile-manager: extend(
|
|
30
|
+
$default-elevation-tile,
|
|
31
|
+
(
|
|
32
|
+
tile-manager-background: (
|
|
33
|
+
color: (
|
|
34
|
+
'gray',
|
|
35
|
+
100,
|
|
36
|
+
),
|
|
37
|
+
),
|
|
38
|
+
|
|
39
|
+
tile-background: (
|
|
40
|
+
color: (
|
|
41
|
+
'surface',
|
|
42
|
+
500,
|
|
43
|
+
),
|
|
44
|
+
),
|
|
45
|
+
|
|
46
|
+
title-color: (
|
|
47
|
+
color: (
|
|
48
|
+
'gray',
|
|
49
|
+
900,
|
|
50
|
+
),
|
|
51
|
+
),
|
|
52
|
+
|
|
53
|
+
header-background: (
|
|
54
|
+
color: (
|
|
55
|
+
'surface',
|
|
56
|
+
500,
|
|
57
|
+
),
|
|
58
|
+
),
|
|
59
|
+
|
|
60
|
+
content-background: (
|
|
61
|
+
color: (
|
|
62
|
+
'surface',
|
|
63
|
+
500,
|
|
64
|
+
),
|
|
65
|
+
),
|
|
66
|
+
|
|
67
|
+
content-color: (
|
|
68
|
+
color: (
|
|
69
|
+
'gray',
|
|
70
|
+
700,
|
|
71
|
+
),
|
|
72
|
+
),
|
|
73
|
+
|
|
74
|
+
border-color: transparent,
|
|
75
|
+
|
|
76
|
+
hover-border-color: (
|
|
77
|
+
color: (
|
|
78
|
+
'gray',
|
|
79
|
+
400,
|
|
80
|
+
),
|
|
81
|
+
),
|
|
82
|
+
|
|
83
|
+
resize-indicator: (
|
|
84
|
+
color: (
|
|
85
|
+
'gray',
|
|
86
|
+
400,
|
|
87
|
+
),
|
|
88
|
+
),
|
|
89
|
+
|
|
90
|
+
placeholder-background: (
|
|
91
|
+
color: (
|
|
92
|
+
'primary',
|
|
93
|
+
100,
|
|
94
|
+
0.3,
|
|
95
|
+
),
|
|
96
|
+
),
|
|
97
|
+
|
|
98
|
+
overlay-background: (
|
|
99
|
+
color: (
|
|
100
|
+
'primary',
|
|
101
|
+
100,
|
|
102
|
+
0.6,
|
|
103
|
+
),
|
|
104
|
+
),
|
|
105
|
+
|
|
106
|
+
ghost-border: (
|
|
107
|
+
color: (
|
|
108
|
+
'primary',
|
|
109
|
+
500,
|
|
110
|
+
),
|
|
111
|
+
),
|
|
112
|
+
|
|
113
|
+
divider-color: transparent,
|
|
114
|
+
border-radius: rem(4px),
|
|
115
|
+
default-size: 2,
|
|
116
|
+
)
|
|
117
|
+
);
|
|
118
|
+
|
|
119
|
+
/// Generates a material tile manager schema.
|
|
120
|
+
/// @type {Map}
|
|
121
|
+
/// @requires {Map} $light-tile-manager
|
|
122
|
+
$material-tile-manager: $light-tile-manager;
|
|
123
|
+
|
|
124
|
+
/// Generates a fluent tile manager schema.
|
|
125
|
+
/// @type {Map}
|
|
126
|
+
/// @prop {Map} placeholder-background [color: ('primary', 100, .2)] - The background color of the ghost element that appears during drag and drop and while resizing.
|
|
127
|
+
/// @prop {Map} overlay-background [color: ('primary', 100, .5)] - The background color of the ghost element that appears on top of the tile that will be swapped.
|
|
128
|
+
/// @prop {Number} border-radius [0] - The border radius of the tile component.
|
|
129
|
+
/// @requires {Map} $light-tile-manager
|
|
130
|
+
$fluent-tile-manager: extend(
|
|
131
|
+
$light-tile-manager,
|
|
132
|
+
$default-elevation-tile,
|
|
133
|
+
(
|
|
134
|
+
placeholder-background: (
|
|
135
|
+
color: (
|
|
136
|
+
'primary',
|
|
137
|
+
100,
|
|
138
|
+
0.2,
|
|
139
|
+
),
|
|
140
|
+
),
|
|
141
|
+
|
|
142
|
+
overlay-background: (
|
|
143
|
+
color: (
|
|
144
|
+
'primary',
|
|
145
|
+
100,
|
|
146
|
+
0.5,
|
|
147
|
+
),
|
|
148
|
+
),
|
|
149
|
+
|
|
150
|
+
border-radius: 0,
|
|
151
|
+
)
|
|
152
|
+
);
|
|
153
|
+
|
|
154
|
+
/// Generates a bootstrap tile manager schema.
|
|
155
|
+
/// @type {Map}
|
|
156
|
+
/// @prop {Map} tile-manager-background [color: ('gray', 200)] - The background color of the tile manager component.
|
|
157
|
+
/// @prop {Map} border-color [color: ('gray', 300)] - The border color of the tile component.
|
|
158
|
+
/// @prop {Map} placeholder-background [color: ('primary', 300, .15)] - The background color of the ghost element that appears during drag and drop and while resizing.
|
|
159
|
+
/// @prop {Map} overlay-background [color: ('primary', 300, .4)] - The background color of the ghost element that appears on top of the tile that will be swapped.
|
|
160
|
+
/// @requires {Map} $light-tile-manager
|
|
161
|
+
$bootstrap-tile-manager: extend(
|
|
162
|
+
$light-tile-manager,
|
|
163
|
+
$default-elevation-tile,
|
|
164
|
+
(
|
|
165
|
+
tile-manager-background: (
|
|
166
|
+
color: (
|
|
167
|
+
'gray',
|
|
168
|
+
200,
|
|
169
|
+
),
|
|
170
|
+
),
|
|
171
|
+
|
|
172
|
+
border-color: (
|
|
173
|
+
color: (
|
|
174
|
+
'gray',
|
|
175
|
+
300,
|
|
176
|
+
),
|
|
177
|
+
),
|
|
178
|
+
|
|
179
|
+
placeholder-background: (
|
|
180
|
+
color: (
|
|
181
|
+
'primary',
|
|
182
|
+
300,
|
|
183
|
+
0.15,
|
|
184
|
+
),
|
|
185
|
+
),
|
|
186
|
+
|
|
187
|
+
overlay-background: (
|
|
188
|
+
color: (
|
|
189
|
+
'primary',
|
|
190
|
+
300,
|
|
191
|
+
0.4,
|
|
192
|
+
),
|
|
193
|
+
),
|
|
194
|
+
)
|
|
195
|
+
);
|
|
196
|
+
|
|
197
|
+
/// Generates an indigo tile manager schema.
|
|
198
|
+
/// @type {Map}
|
|
199
|
+
/// @prop {Map} tile-manager-background [color: ('surface', 500)] - The background color of the tile manager component.
|
|
200
|
+
/// @prop {Map} tile-background [contrast-color: ('gray', 900)] - The background color of the tile component inside the tile manager.
|
|
201
|
+
/// @prop {Map} title-color [color: ('gray', 800)] - The title color of the tile component.
|
|
202
|
+
/// @prop {Map} header-background [contrast-color: ('gray', 900)] - The background color of the tile header component.
|
|
203
|
+
/// @prop {Map} content-background [contrast-color: ('gray', 900)] - The background color of the tile component content.
|
|
204
|
+
/// @prop {Map} border-color [color: ('gray', 400)] - The border color of the tile component.
|
|
205
|
+
/// @prop {Map} hover-border-color [color: ('gray', 500)] - The border color of the tile component on hover.
|
|
206
|
+
/// @prop {Map} placeholder-background [color: ('primary', 100, .2)] - The background color of the ghost element that appears during drag and drop and while resizing.
|
|
207
|
+
/// @prop {Map} resize-indicator [color: ('gray', 500)] - The color of the tile resize indicator.
|
|
208
|
+
/// @prop {Number} border-radius [rem(6px)] - The border radius of the tile component.
|
|
209
|
+
/// @requires {Map} $light-tile-manager
|
|
210
|
+
$indigo-tile-manager: extend(
|
|
211
|
+
$light-tile-manager,
|
|
212
|
+
$default-elevation-tile,
|
|
213
|
+
(
|
|
214
|
+
tile-manager-background: (
|
|
215
|
+
color: (
|
|
216
|
+
'surface',
|
|
217
|
+
500,
|
|
218
|
+
),
|
|
219
|
+
),
|
|
220
|
+
|
|
221
|
+
tile-background: (
|
|
222
|
+
contrast-color: (
|
|
223
|
+
'gray',
|
|
224
|
+
900,
|
|
225
|
+
),
|
|
226
|
+
),
|
|
227
|
+
|
|
228
|
+
title-color: (
|
|
229
|
+
color: (
|
|
230
|
+
'gray',
|
|
231
|
+
800,
|
|
232
|
+
),
|
|
233
|
+
),
|
|
234
|
+
|
|
235
|
+
header-background: (
|
|
236
|
+
contrast-color: (
|
|
237
|
+
'gray',
|
|
238
|
+
900,
|
|
239
|
+
),
|
|
240
|
+
),
|
|
241
|
+
|
|
242
|
+
content-background: (
|
|
243
|
+
contrast-color: (
|
|
244
|
+
'gray',
|
|
245
|
+
900,
|
|
246
|
+
),
|
|
247
|
+
),
|
|
248
|
+
|
|
249
|
+
border-color: (
|
|
250
|
+
color: (
|
|
251
|
+
'gray',
|
|
252
|
+
400,
|
|
253
|
+
),
|
|
254
|
+
),
|
|
255
|
+
|
|
256
|
+
hover-border-color: (
|
|
257
|
+
color: (
|
|
258
|
+
'gray',
|
|
259
|
+
500,
|
|
260
|
+
),
|
|
261
|
+
),
|
|
262
|
+
|
|
263
|
+
placeholder-background: (
|
|
264
|
+
color: (
|
|
265
|
+
'primary',
|
|
266
|
+
100,
|
|
267
|
+
0.2,
|
|
268
|
+
),
|
|
269
|
+
),
|
|
270
|
+
|
|
271
|
+
resize-indicator: (
|
|
272
|
+
color: (
|
|
273
|
+
'gray',
|
|
274
|
+
500,
|
|
275
|
+
),
|
|
276
|
+
),
|
|
277
|
+
|
|
278
|
+
border-radius: rem(6px),
|
|
279
|
+
)
|
|
280
|
+
);
|
|
@@ -63,8 +63,12 @@
|
|
|
63
63
|
/// }
|
|
64
64
|
/// @return {number} - Returns the relative value converted to pixels.
|
|
65
65
|
@function px($num, $context: $base-font-size) {
|
|
66
|
+
@if math.is-unitless($context) {
|
|
67
|
+
$context: $context * 1px;
|
|
68
|
+
}
|
|
69
|
+
|
|
66
70
|
@if meta.type-of($num) == 'number' {
|
|
67
|
-
@return math.div($num, $num * 0 + 1) *
|
|
71
|
+
@return math.div($num, $num * 0 + 1) * $context;
|
|
68
72
|
}
|
|
69
73
|
|
|
70
74
|
@return $num;
|