igniteui-theming 7.0.2 → 8.0.0-beta.1
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/json/elevations/indigo.json +1 -1
- package/package.json +1 -1
- package/sass/elevations/presets/_indigo.scss +9 -9
- package/sass/themes/schemas/components/dark/_drop-down.scss +152 -4
- package/sass/themes/schemas/components/dark/_list.scss +112 -2
- package/sass/themes/schemas/components/dark/_progress.scss +31 -10
- package/sass/themes/schemas/components/dark/_snackbar.scss +0 -3
- package/sass/themes/schemas/components/dark/_tree.scss +1 -2
- package/sass/themes/schemas/components/elevation/_drop-down.scss +6 -0
- package/sass/themes/schemas/components/elevation/_snackbar.scss +2 -8
- package/sass/themes/schemas/components/light/_button-group.scss +0 -3
- package/sass/themes/schemas/components/light/_button.scss +2 -2
- package/sass/themes/schemas/components/light/_drop-down.scss +163 -38
- package/sass/themes/schemas/components/light/_icon-button.scss +2 -2
- package/sass/themes/schemas/components/light/_list.scss +38 -33
- package/sass/themes/schemas/components/light/_progress.scss +87 -6
- package/sass/themes/schemas/components/light/_tree.scss +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"elevations":{"0":"none","1":"0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 3px) 0 rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 1px) 0 rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -1px) rgba(0, 0, 0, 0.08)","2":"0 calc(var(--ig-elevation-factor, 1) *
|
|
1
|
+
{"elevations":{"0":"none","1":"0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 3px) 0 rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 1px) 0 rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -1px) rgba(0, 0, 0, 0.08)","2":"0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 5px) 0 rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 2px) 0 rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * -2px) rgba(0, 0, 0, 0.08)","3":"0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 8px) 0 rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 4px) 0 rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * -2px) rgba(0, 0, 0, 0.08)","4":"0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 12px) 0 rgba(36, 37, 44, 0.1)","5":"0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -1px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 8px) 0 rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 1px) calc(var(--ig-elevation-factor, 1) * 14px) 0 rgba(0, 0, 0, 0.08)","6":"0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 12px) 0 rgba(36, 37, 44, 0.2)","7":"0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -2px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 1px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 2px) calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 1px) rgba(0, 0, 0, 0.08)","8":"0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * -3px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 1px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.08)","9":"0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * -3px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * 1px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 3px) calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.08)","10":"0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * -3px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 1px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 18px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.08)","11":"0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * -4px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * 1px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 4px) calc(var(--ig-elevation-factor, 1) * 20px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.08)","12":"0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * -4px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * 17px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 4px) rgba(0, 0, 0, 0.08)","13":"0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * -4px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * 19px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 4px) rgba(0, 0, 0, 0.08)","14":"0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * -4px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * 21px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 5px) calc(var(--ig-elevation-factor, 1) * 26px) calc(var(--ig-elevation-factor, 1) * 4px) rgba(0, 0, 0, 0.08)","15":"0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * -5px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 15px) calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 28px) calc(var(--ig-elevation-factor, 1) * 5px) rgba(0, 0, 0, 0.08)","16":"0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * -5px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 16px) calc(var(--ig-elevation-factor, 1) * 24px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 30px) calc(var(--ig-elevation-factor, 1) * 5px) rgba(0, 0, 0, 0.08)","17":"0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * -5px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 17px) calc(var(--ig-elevation-factor, 1) * 26px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 6px) calc(var(--ig-elevation-factor, 1) * 32px) calc(var(--ig-elevation-factor, 1) * 5px) rgba(0, 0, 0, 0.08)","18":"0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 11px) calc(var(--ig-elevation-factor, 1) * -5px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 18px) calc(var(--ig-elevation-factor, 1) * 28px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 34px) calc(var(--ig-elevation-factor, 1) * 6px) rgba(0, 0, 0, 0.08)","19":"0 calc(var(--ig-elevation-factor, 1) * 9px) calc(var(--ig-elevation-factor, 1) * 12px) calc(var(--ig-elevation-factor, 1) * -6px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 19px) calc(var(--ig-elevation-factor, 1) * 29px) calc(var(--ig-elevation-factor, 1) * 2px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 7px) calc(var(--ig-elevation-factor, 1) * 36px) calc(var(--ig-elevation-factor, 1) * 6px) rgba(0, 0, 0, 0.08)","20":"0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * -6px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 20px) calc(var(--ig-elevation-factor, 1) * 31px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 38px) calc(var(--ig-elevation-factor, 1) * 7px) rgba(0, 0, 0, 0.08)","21":"0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 13px) calc(var(--ig-elevation-factor, 1) * -6px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 21px) calc(var(--ig-elevation-factor, 1) * 33px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 40px) calc(var(--ig-elevation-factor, 1) * 7px) rgba(0, 0, 0, 0.08)","22":"0 calc(var(--ig-elevation-factor, 1) * 10px) calc(var(--ig-elevation-factor, 1) * 14px) calc(var(--ig-elevation-factor, 1) * -6px) rgba(0, 0, 0, 0.26), 0 calc(var(--ig-elevation-factor, 1) * 22px) calc(var(--ig-elevation-factor, 1) * 35px) calc(var(--ig-elevation-factor, 1) * 3px) rgba(0, 0, 0, 0.12), 0 calc(var(--ig-elevation-factor, 1) * 8px) calc(var(--ig-elevation-factor, 1) * 42px) calc(var(--ig-elevation-factor, 1) * 7px) rgba(0, 0, 0, 0.08)","23":"0 0 calc(var(--ig-elevation-factor, 1) * 16px) 0 rgba(0, 0, 0, 0.3)","24":"0 0 calc(var(--ig-elevation-factor, 1) * 16px) 0 rgba(36, 37, 44, 0.4)"}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "igniteui-theming",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "8.0.0-beta.1",
|
|
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": {
|
|
@@ -24,17 +24,17 @@ $color-3: rgba(0 0 0 / 8%) !default;
|
|
|
24
24
|
/// All elevation levels
|
|
25
25
|
/// @access private
|
|
26
26
|
$_1: box-shadow((0 1px 3px 0 $color-1, 0 1px 1px 0 $color-2, 0 2px 1px -1px $color-3));
|
|
27
|
-
$_2: box-shadow((0
|
|
28
|
-
$_3: box-shadow((0 3px
|
|
27
|
+
$_2: box-shadow((0 1px 5px 0 $color-1, 0 2px 2px 0 $color-2, 0 3px 1px -2px $color-3));
|
|
28
|
+
$_3: box-shadow((0 1px 8px 0 $color-1, 0 3px 4px 0 $color-2, 0 3px 3px -2px $color-3));
|
|
29
29
|
$_4: box-shadow((0 2px 12px 0 rgba(36 37 44 / 10%)));
|
|
30
|
-
$_5: box-shadow((0 0
|
|
30
|
+
$_5: box-shadow((0 3px 5px -1px $color-1, 0 5px 8px 0 $color-2, 0 1px 14px 0 $color-3));
|
|
31
31
|
$_6: box-shadow((0 2px 12px 0 rgba(36 37 44 / 20%)));
|
|
32
|
-
$_7: box-shadow((0
|
|
33
|
-
$_8: box-shadow((0
|
|
34
|
-
$_9: box-shadow((0
|
|
35
|
-
$_10: box-shadow((0
|
|
36
|
-
$_11: box-shadow((0
|
|
37
|
-
$_12: box-shadow((0 0
|
|
32
|
+
$_7: box-shadow((0 4px 5px -2px $color-1, 0 7px 10px 1px $color-2, 0 2px 16px 1px $color-3));
|
|
33
|
+
$_8: box-shadow((0 5px 5px -3px $color-1, 0 8px 10px 1px $color-2, 0 3px 14px 2px $color-3));
|
|
34
|
+
$_9: box-shadow((0 5px 6px -3px $color-1, 0 9px 12px 1px $color-2, 0 3px 16px 2px $color-3));
|
|
35
|
+
$_10: box-shadow((0 6px 6px -3px $color-1, 0 10px 14px 1px $color-2, 0 4px 18px 3px $color-3));
|
|
36
|
+
$_11: box-shadow((0 6px 7px -4px $color-1, 0 11px 15px 1px $color-2, 0 4px 20px 3px $color-3));
|
|
37
|
+
$_12: box-shadow((0 7px 8px -4px $color-1, 0 12px 17px 2px $color-2, 0 5px 22px 4px $color-3));
|
|
38
38
|
$_13: box-shadow((0 7px 8px -4px $color-1, 0 13px 19px 2px $color-2, 0 5px 24px 4px $color-3));
|
|
39
39
|
$_14: box-shadow((0 7px 9px -4px $color-1, 0 14px 21px 2px $color-2, 0 5px 26px 4px $color-3));
|
|
40
40
|
$_15: box-shadow((0 8px 9px -5px $color-1, 0 15px 22px 2px $color-2, 0 6px 28px 5px $color-3));
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
@use '../../../../utils/map' as *;
|
|
2
2
|
@use '../../../../typography/functions' as *;
|
|
3
3
|
@use '../light/drop-down' as *;
|
|
4
|
+
@use '../elevation/drop-down' as *;
|
|
4
5
|
|
|
5
6
|
////
|
|
6
7
|
/// @package theming
|
|
@@ -31,7 +32,9 @@ $dark-material-drop-down: extend($material-drop-down, $base-dark-drop-down);
|
|
|
31
32
|
/// Generates a dark fluent drop-down schema.
|
|
32
33
|
/// @type {Map}
|
|
33
34
|
/// @prop {Map} selected-item-text-color [contrast-color: 'surface'] - The drop-down selected item text color.
|
|
35
|
+
/// @prop {Map} selected-item-icon-color [contrast-color: 'surface'] - The drop-down selected item icon color.
|
|
34
36
|
/// @prop {Map} selected-hover-item-text-color [contrast-color: 'surface'] - The drop-down selected item hover text color.
|
|
37
|
+
/// @prop {Map} selected-hover-item-icon-color [contrast-color: 'surface'] - The drop-down selected item hover icon color.
|
|
35
38
|
/// @prop {Map} selected-focus-item-text-color [contrast-color: 'surface'] - The drop-down selected item focus text color.
|
|
36
39
|
/// @prop {Map} border-color [color: ('gray', 400)] - The border color used for the drop-down items on focus state.
|
|
37
40
|
/// @prop {Map} disabled-item-text-color [color: ('gray', 200)] - The drop-down disabled item text color.
|
|
@@ -44,9 +47,15 @@ $dark-fluent-drop-down: extend(
|
|
|
44
47
|
selected-item-text-color: (
|
|
45
48
|
contrast-color: 'surface',
|
|
46
49
|
),
|
|
50
|
+
selected-item-icon-color: (
|
|
51
|
+
contrast-color: 'surface',
|
|
52
|
+
),
|
|
47
53
|
selected-hover-item-text-color: (
|
|
48
54
|
contrast-color: 'surface',
|
|
49
55
|
),
|
|
56
|
+
selected-hover-item-icon-color: (
|
|
57
|
+
contrast-color: 'surface',
|
|
58
|
+
),
|
|
50
59
|
selected-focus-item-text-color: (
|
|
51
60
|
contrast-color: 'surface',
|
|
52
61
|
),
|
|
@@ -67,8 +76,10 @@ $dark-fluent-drop-down: extend(
|
|
|
67
76
|
|
|
68
77
|
/// Generates a dark bootstrap drop-down schema.
|
|
69
78
|
/// @type {Map}
|
|
70
|
-
/// @prop {Map} item-text-color [contrast-color: 'surface'] - The drop-down text color.
|
|
71
|
-
/// @prop {Map}
|
|
79
|
+
/// @prop {Map} item-text-color [contrast-color: 'surface'] - The drop-down item text color.
|
|
80
|
+
/// @prop {Map} item-icon-color [contrast-color: 'surface'] - The drop-down item icon color.
|
|
81
|
+
/// @prop {Map} hover-item-text-color [contrast-color: 'surface'] - The drop-down item hover text color.
|
|
82
|
+
/// @prop {Map} hover-item-icon-color [contrast-color: 'surface'] - The drop-down item hover icon color.
|
|
72
83
|
/// @prop {Map} disabled-item-text-color [color: ('gray', 200)] - The drop-down disabled item text color.
|
|
73
84
|
/// @requires $bootstrap-drop-down
|
|
74
85
|
/// @requires $base-dark-drop-down
|
|
@@ -79,9 +90,15 @@ $dark-bootstrap-drop-down: extend(
|
|
|
79
90
|
item-text-color: (
|
|
80
91
|
contrast-color: 'surface',
|
|
81
92
|
),
|
|
93
|
+
item-icon-color: (
|
|
94
|
+
contrast-color: 'surface',
|
|
95
|
+
),
|
|
82
96
|
hover-item-text-color: (
|
|
83
97
|
contrast-color: 'surface',
|
|
84
98
|
),
|
|
99
|
+
hover-item-icon-color: (
|
|
100
|
+
contrast-color: 'surface',
|
|
101
|
+
),
|
|
85
102
|
disabled-item-text-color: (
|
|
86
103
|
color: (
|
|
87
104
|
'gray',
|
|
@@ -93,15 +110,146 @@ $dark-bootstrap-drop-down: extend(
|
|
|
93
110
|
|
|
94
111
|
/// Generates a dark indigo drop-down schema.
|
|
95
112
|
/// @type {Map}
|
|
96
|
-
/// @prop {Map}
|
|
113
|
+
/// @prop {Map} background-color [color: ('gray', 50)] - The drop-down background color.
|
|
114
|
+
/// @prop {Map} header-text-color [contrast-color: ('gray', 50, .6)] - The drop-down header text color.
|
|
115
|
+
/// @prop {Map} item-text-color [contrast-color: ('gray', 50, .8)] - The drop-down item text color.
|
|
116
|
+
/// @prop {Map} item-icon-color [contrast-color: ('gray', 50, .6)] - The drop-down item icon color.
|
|
117
|
+
/// @prop {Map} hover-item-background [contrast-color: ('gray', 50, .1)] - The drop-down item hover background color.
|
|
118
|
+
/// @prop {Map} hover-item-text-color [contrast-color: ('gray', 50)] - The drop-down item hover text color.
|
|
119
|
+
/// @prop {Map} hover-item-icon-color [contrast-color: ('gray', 50, .8)] - The drop-down item hover icon color.
|
|
120
|
+
/// @prop {Color} focused-item-background [transparent] - The drop-down focused item background color.
|
|
121
|
+
/// @prop {Map} focused-item-text-color [contrast-color: ('gray', 50, .8)] - The drop-down focused item text color.
|
|
122
|
+
/// @prop {Map} selected-item-background [color: ('primary', 400, .3)] - The drop-down selected item background color.
|
|
123
|
+
/// @prop {Map} selected-item-text-color [contrast-color: ('gray', 50)] - The drop-down selected item text color.
|
|
124
|
+
/// @prop {Map} selected-item-icon-color [contrast-color: ('gray', 50, .8)] - The drop-down selected item icon color.
|
|
125
|
+
/// @prop {Map} selected-hover-item-background [color: ('primary', 400, .5)] - The drop-down selected item hover background color.
|
|
126
|
+
/// @prop {Map} selected-hover-item-text-color [contrast-color: ('gray', 50)] - The drop-down selected item hover text color.
|
|
127
|
+
/// @prop {Map} selected-hover-item-icon-color [contrast-color: ('gray', 50)] - The drop-down selected item hover icon color.
|
|
128
|
+
/// @prop {Map} selected-focus-item-background [color: ('primary', 400, .3)] - The drop-down selected item focus background color.
|
|
129
|
+
/// @prop {Map} selected-focus-item-text-color [contrast-color: ('gray', 50)] - The drop-down selected item focus text color.
|
|
130
|
+
/// @prop {Map} disabled-item-text-color [contrast-color: ('gray', 50, .2)] - The drop-down disabled item text color.
|
|
131
|
+
/// @prop {Number} elevation [2] - The elevation level, between 0-24, to be used for the drop-down shadow.
|
|
97
132
|
/// @requires $indigo-drop-down
|
|
98
133
|
/// @requires $base-dark-drop-down
|
|
134
|
+
/// @requires $dark-indigo-elevation-drop-down
|
|
99
135
|
$dark-indigo-drop-down: extend(
|
|
100
136
|
$indigo-drop-down,
|
|
101
137
|
$base-dark-drop-down,
|
|
138
|
+
$dark-indigo-elevation-drop-down,
|
|
102
139
|
(
|
|
140
|
+
background-color: (
|
|
141
|
+
color: (
|
|
142
|
+
'gray',
|
|
143
|
+
50,
|
|
144
|
+
),
|
|
145
|
+
),
|
|
103
146
|
header-text-color: (
|
|
104
|
-
contrast-color:
|
|
147
|
+
contrast-color: (
|
|
148
|
+
'gray',
|
|
149
|
+
50,
|
|
150
|
+
0.6,
|
|
151
|
+
),
|
|
152
|
+
),
|
|
153
|
+
item-text-color: (
|
|
154
|
+
contrast-color: (
|
|
155
|
+
'gray',
|
|
156
|
+
50,
|
|
157
|
+
0.8,
|
|
158
|
+
),
|
|
159
|
+
),
|
|
160
|
+
item-icon-color: (
|
|
161
|
+
contrast-color: (
|
|
162
|
+
'gray',
|
|
163
|
+
50,
|
|
164
|
+
0.6,
|
|
165
|
+
),
|
|
166
|
+
),
|
|
167
|
+
hover-item-background: (
|
|
168
|
+
contrast-color: (
|
|
169
|
+
'gray',
|
|
170
|
+
50,
|
|
171
|
+
0.1,
|
|
172
|
+
),
|
|
173
|
+
),
|
|
174
|
+
hover-item-text-color: (
|
|
175
|
+
contrast-color: (
|
|
176
|
+
'gray',
|
|
177
|
+
50,
|
|
178
|
+
),
|
|
179
|
+
),
|
|
180
|
+
hover-item-icon-color: (
|
|
181
|
+
contrast-color: (
|
|
182
|
+
'gray',
|
|
183
|
+
50,
|
|
184
|
+
0.8,
|
|
185
|
+
),
|
|
186
|
+
),
|
|
187
|
+
focused-item-background: transparent,
|
|
188
|
+
focused-item-text-color: (
|
|
189
|
+
contrast-color: (
|
|
190
|
+
'gray',
|
|
191
|
+
50,
|
|
192
|
+
0.8,
|
|
193
|
+
),
|
|
194
|
+
),
|
|
195
|
+
selected-item-background: (
|
|
196
|
+
color: (
|
|
197
|
+
'primary',
|
|
198
|
+
400,
|
|
199
|
+
0.3,
|
|
200
|
+
),
|
|
201
|
+
),
|
|
202
|
+
selected-item-text-color: (
|
|
203
|
+
contrast-color: (
|
|
204
|
+
'gray',
|
|
205
|
+
50,
|
|
206
|
+
),
|
|
207
|
+
),
|
|
208
|
+
selected-item-icon-color: (
|
|
209
|
+
contrast-color: (
|
|
210
|
+
'gray',
|
|
211
|
+
50,
|
|
212
|
+
0.8,
|
|
213
|
+
),
|
|
214
|
+
),
|
|
215
|
+
selected-hover-item-background: (
|
|
216
|
+
color: (
|
|
217
|
+
'primary',
|
|
218
|
+
400,
|
|
219
|
+
0.5,
|
|
220
|
+
),
|
|
221
|
+
),
|
|
222
|
+
selected-hover-item-text-color: (
|
|
223
|
+
contrast-color: (
|
|
224
|
+
'gray',
|
|
225
|
+
50,
|
|
226
|
+
),
|
|
227
|
+
),
|
|
228
|
+
selected-hover-item-icon-color: (
|
|
229
|
+
contrast-color: (
|
|
230
|
+
'gray',
|
|
231
|
+
50,
|
|
232
|
+
),
|
|
233
|
+
),
|
|
234
|
+
selected-focus-item-background: (
|
|
235
|
+
color: (
|
|
236
|
+
'primary',
|
|
237
|
+
400,
|
|
238
|
+
0.3,
|
|
239
|
+
),
|
|
240
|
+
),
|
|
241
|
+
selected-focus-item-text-color: (
|
|
242
|
+
contrast-color: (
|
|
243
|
+
'gray',
|
|
244
|
+
50,
|
|
245
|
+
),
|
|
246
|
+
),
|
|
247
|
+
disabled-item-text-color: (
|
|
248
|
+
contrast-color: (
|
|
249
|
+
'gray',
|
|
250
|
+
50,
|
|
251
|
+
0.2,
|
|
252
|
+
),
|
|
105
253
|
),
|
|
106
254
|
)
|
|
107
255
|
);
|
|
@@ -89,15 +89,31 @@ $dark-bootstrap-list: extend(
|
|
|
89
89
|
|
|
90
90
|
/// Generates a dark indigo list schema.
|
|
91
91
|
/// @type {Map}
|
|
92
|
-
/// @prop {Map} header-text-color [contrast-color: '
|
|
92
|
+
/// @prop {Map} header-text-color [contrast-color: ('gray', 50, .6)] - The list header text color.
|
|
93
93
|
/// @prop {Map} item-background-hover [color: ('primary', 500, .5)] - The list item hover background.
|
|
94
94
|
/// @prop {Map} item-background-active [color: ('primary')] - The active list item background color.
|
|
95
|
+
/// @prop {Map} item-text-color [contrast-color: ('gray', 50, .9)] - The list item text color.
|
|
96
|
+
/// @prop {Map} item-text-color-hover [contrast-color: ('gray', 50)] - The list item text color.
|
|
97
|
+
/// @prop {Map} item-text-color-active [contrast-color: ('gray', 50)] - The active list item text color.
|
|
98
|
+
/// @prop {Map} item-subtitle-color [contrast-color: ('gray', 50, .7)] - The list item subtitle color.
|
|
99
|
+
/// @prop {Map} item-subtitle-color-hover [contrast-color: ('gray', 50, .8)] - The list item subtitle hover color.
|
|
100
|
+
/// @prop {Map} item-subtitle-color-active [contrast-color: ('gray', 50, .8)] - The list item subtitle active color.
|
|
101
|
+
/// @prop {Map} item-thumbnail-color [contrast-color: ('gray', 50, .6)] - The list item thumbnail color.
|
|
102
|
+
/// @prop {Map} item-thumbnail-color-hover [contrast-color: ('gray', 50, .8)] - The list item thumbnail hover color.
|
|
103
|
+
/// @prop {Map} item-thumbnail-color-active [contrast-color: ('gray', 50, .8)] - The list item thumbnail active color.
|
|
104
|
+
/// @prop {Map} item-action-color [contrast-color: ('gray', 50, .6)] - The list item action color.
|
|
105
|
+
/// @prop {Map} item-action-color-hover [contrast-color: ('gray', 50, .8)] - The list item action hover color.
|
|
106
|
+
/// @prop {Map} item-action-color-active [contrast-color: ('gray', 50, .8)] - The list item action active color.
|
|
95
107
|
/// @requires $indigo-list
|
|
96
108
|
$dark-indigo-list: extend(
|
|
97
109
|
$indigo-list,
|
|
98
110
|
(
|
|
99
111
|
header-text-color: (
|
|
100
|
-
contrast-color:
|
|
112
|
+
contrast-color: (
|
|
113
|
+
'gray',
|
|
114
|
+
50,
|
|
115
|
+
0.6,
|
|
116
|
+
),
|
|
101
117
|
),
|
|
102
118
|
|
|
103
119
|
item-background-hover: (
|
|
@@ -113,5 +129,99 @@ $dark-indigo-list: extend(
|
|
|
113
129
|
'primary',
|
|
114
130
|
),
|
|
115
131
|
),
|
|
132
|
+
|
|
133
|
+
item-text-color: (
|
|
134
|
+
contrast-color: (
|
|
135
|
+
'gray',
|
|
136
|
+
50,
|
|
137
|
+
0.9,
|
|
138
|
+
),
|
|
139
|
+
),
|
|
140
|
+
|
|
141
|
+
item-text-color-hover: (
|
|
142
|
+
contrast-color: (
|
|
143
|
+
'gray',
|
|
144
|
+
50,
|
|
145
|
+
),
|
|
146
|
+
),
|
|
147
|
+
|
|
148
|
+
item-text-color-active: (
|
|
149
|
+
contrast-color: (
|
|
150
|
+
'gray',
|
|
151
|
+
50,
|
|
152
|
+
),
|
|
153
|
+
),
|
|
154
|
+
|
|
155
|
+
item-subtitle-color: (
|
|
156
|
+
contrast-color: (
|
|
157
|
+
'gray',
|
|
158
|
+
50,
|
|
159
|
+
0.7,
|
|
160
|
+
),
|
|
161
|
+
),
|
|
162
|
+
|
|
163
|
+
item-subtitle-color-hover: (
|
|
164
|
+
contrast-color: (
|
|
165
|
+
'gray',
|
|
166
|
+
50,
|
|
167
|
+
0.8,
|
|
168
|
+
),
|
|
169
|
+
),
|
|
170
|
+
|
|
171
|
+
item-subtitle-color-active: (
|
|
172
|
+
contrast-color: (
|
|
173
|
+
'gray',
|
|
174
|
+
50,
|
|
175
|
+
0.8,
|
|
176
|
+
),
|
|
177
|
+
),
|
|
178
|
+
|
|
179
|
+
item-thumbnail-color: (
|
|
180
|
+
contrast-color: (
|
|
181
|
+
'gray',
|
|
182
|
+
50,
|
|
183
|
+
0.6,
|
|
184
|
+
),
|
|
185
|
+
),
|
|
186
|
+
|
|
187
|
+
item-thumbnail-color-hover: (
|
|
188
|
+
contrast-color: (
|
|
189
|
+
'gray',
|
|
190
|
+
50,
|
|
191
|
+
0.8,
|
|
192
|
+
),
|
|
193
|
+
),
|
|
194
|
+
|
|
195
|
+
item-thumbnail-color-active: (
|
|
196
|
+
contrast-color: (
|
|
197
|
+
'gray',
|
|
198
|
+
50,
|
|
199
|
+
0.8,
|
|
200
|
+
),
|
|
201
|
+
),
|
|
202
|
+
|
|
203
|
+
item-action-color: (
|
|
204
|
+
contrast-color: (
|
|
205
|
+
'gray',
|
|
206
|
+
50,
|
|
207
|
+
0.6,
|
|
208
|
+
),
|
|
209
|
+
),
|
|
210
|
+
|
|
211
|
+
item-action-color-hover: (
|
|
212
|
+
contrast-color: (
|
|
213
|
+
'gray',
|
|
214
|
+
50,
|
|
215
|
+
0.8,
|
|
216
|
+
),
|
|
217
|
+
),
|
|
218
|
+
|
|
219
|
+
item-action-color-active: (
|
|
220
|
+
contrast-color: (
|
|
221
|
+
'gray',
|
|
222
|
+
50,
|
|
223
|
+
0.8,
|
|
224
|
+
),
|
|
225
|
+
),
|
|
116
226
|
)
|
|
117
227
|
);
|
|
@@ -47,24 +47,25 @@ $dark-bootstrap-progress-linear: $bootstrap-progress-linear;
|
|
|
47
47
|
|
|
48
48
|
/// Generates a dark indigo progress-linear schema.
|
|
49
49
|
/// @type {Map}
|
|
50
|
-
/// @prop {Map}
|
|
51
|
-
/// @prop {Map}
|
|
50
|
+
/// @prop {Map} text-color [contrast-color: ('gray', 50, .8)] - The track value text color.
|
|
51
|
+
/// @prop {Map} track-color [contrast-color: ('gray', 50, .2)] - The main track color.
|
|
52
52
|
/// @requires $indigo-progress-linear
|
|
53
53
|
$dark-indigo-progress-linear: extend(
|
|
54
54
|
$indigo-progress-linear,
|
|
55
55
|
(
|
|
56
|
-
|
|
57
|
-
color: (
|
|
56
|
+
text-color: (
|
|
57
|
+
contrast-color: (
|
|
58
58
|
'gray',
|
|
59
|
-
|
|
59
|
+
50,
|
|
60
|
+
0.8,
|
|
60
61
|
),
|
|
61
62
|
),
|
|
62
63
|
|
|
63
|
-
|
|
64
|
-
color: (
|
|
64
|
+
track-color: (
|
|
65
|
+
contrast-color: (
|
|
65
66
|
'gray',
|
|
66
67
|
50,
|
|
67
|
-
0.
|
|
68
|
+
0.2,
|
|
68
69
|
),
|
|
69
70
|
),
|
|
70
71
|
)
|
|
@@ -102,6 +103,26 @@ $dark-bootstrap-progress-circular: extend($bootstrap-progress-circular, $dark-ba
|
|
|
102
103
|
|
|
103
104
|
/// Generates a dark indigo progress-circular schema.
|
|
104
105
|
/// @type {Map}
|
|
106
|
+
/// @prop {Map} base-circle-color [contrast-color: ('gray', 50, .2)] - The base circle fill color.
|
|
107
|
+
/// @prop {Map} text-color [contrast-color: ('gray', 50, .8)] - The value text color.
|
|
105
108
|
/// @requires $indigo-progress-circular
|
|
106
|
-
|
|
107
|
-
$
|
|
109
|
+
$dark-indigo-progress-circular: extend(
|
|
110
|
+
$indigo-progress-circular,
|
|
111
|
+
(
|
|
112
|
+
base-circle-color: (
|
|
113
|
+
contrast-color: (
|
|
114
|
+
'gray',
|
|
115
|
+
50,
|
|
116
|
+
0.2,
|
|
117
|
+
),
|
|
118
|
+
),
|
|
119
|
+
|
|
120
|
+
text-color: (
|
|
121
|
+
contrast-color: (
|
|
122
|
+
'gray',
|
|
123
|
+
50,
|
|
124
|
+
0.8,
|
|
125
|
+
),
|
|
126
|
+
),
|
|
127
|
+
)
|
|
128
|
+
);
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
@use '../../../../utils/map' as *;
|
|
2
2
|
@use '../light/snackbar' as *;
|
|
3
|
-
@use '../elevation/snackbar' as *;
|
|
4
3
|
|
|
5
4
|
////
|
|
6
5
|
/// @package theming
|
|
@@ -29,10 +28,8 @@ $dark-bootstrap-snackbar: $bootstrap-snackbar;
|
|
|
29
28
|
/// @prop {Map} text-color [contrast-color: ('gray', 200)] - The text color used in the snackbar.
|
|
30
29
|
/// @prop {Map} button-color [contrast-color: ('gray', 200)] - The button color used in the snackbar.
|
|
31
30
|
/// @requires $indigo-snackbar
|
|
32
|
-
/// @requires {Map} $dark-indigo-elevation-snackbar
|
|
33
31
|
$dark-indigo-snackbar: extend(
|
|
34
32
|
$indigo-snackbar,
|
|
35
|
-
$dark-indigo-elevation-snackbar,
|
|
36
33
|
(
|
|
37
34
|
background: (
|
|
38
35
|
color: (
|
|
@@ -115,7 +115,7 @@ $dark-bootstrap-tree: extend(
|
|
|
115
115
|
/// @prop {Map} background-active-selected [color: ('primary', 400, 0.3)] - The background color used for the active selected tree node.
|
|
116
116
|
/// @prop {Map} foreground [contrast-color: ('gray', 50, 0.8)] - The color used for the tree node content.
|
|
117
117
|
/// @prop {Map} foreground-active [contrast-color: ('gray', 50)] - The color used for the content in active state of the tree node.
|
|
118
|
-
/// @prop {Map} foreground-selected [contrast-color: ('gray', 50
|
|
118
|
+
/// @prop {Map} foreground-selected [contrast-color: ('gray', 50)] - The color used for the content of the selected tree node.
|
|
119
119
|
/// @prop {Map} foreground-active-selected [contrast-color: ('gray', 50)] - The color used for the content of the active selected tree node.
|
|
120
120
|
/// @prop {Map} foreground-disabled [contrast-color: ('gray', 50, 0.2)] - The color used for the content of the disabled tree node.
|
|
121
121
|
/// @prop {Map} icon-color [contrast-color: ('gray', 50, 0.8)] - The color used for the tree node icon.
|
|
@@ -137,7 +137,6 @@ $dark-indigo-tree: extend(
|
|
|
137
137
|
contrast-color: (
|
|
138
138
|
'gray',
|
|
139
139
|
50,
|
|
140
|
-
0.8,
|
|
141
140
|
),
|
|
142
141
|
),
|
|
143
142
|
background-active: (
|
|
@@ -27,3 +27,9 @@ $bootstrap-elevation-drop-down: (
|
|
|
27
27
|
$indigo-elevation-drop-down: (
|
|
28
28
|
elevation: 3,
|
|
29
29
|
);
|
|
30
|
+
|
|
31
|
+
/// @type Map
|
|
32
|
+
/// @prop {Number} elevation [2] - The elevation level, between 0-24, to be used for the drop-down shadow.
|
|
33
|
+
$dark-indigo-elevation-drop-down: (
|
|
34
|
+
elevation: 2,
|
|
35
|
+
);
|
|
@@ -17,13 +17,7 @@ $bootstrap-elevation-snackbar: (
|
|
|
17
17
|
);
|
|
18
18
|
|
|
19
19
|
/// @type Map
|
|
20
|
-
/// @prop {Number} elevation [
|
|
20
|
+
/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used in the indigo snackbar.
|
|
21
21
|
$indigo-elevation-snackbar: (
|
|
22
|
-
elevation:
|
|
23
|
-
);
|
|
24
|
-
|
|
25
|
-
/// @type Map
|
|
26
|
-
/// @prop {Number} elevation [11] - The elevation level, between 0-24, to be used in the dark indigo snackbar.
|
|
27
|
-
$dark-indigo-elevation-snackbar: (
|
|
28
|
-
elevation: 11,
|
|
22
|
+
elevation: 0,
|
|
29
23
|
);
|
|
@@ -132,7 +132,6 @@ $light-button-group: extend(
|
|
|
132
132
|
/// @prop {Map} disabled-selected-icon-color [color: ('gray', 400)] - The disabled icon color for a selected item in the button group.
|
|
133
133
|
/// @prop {Map} disabled-selected-border-color [color: ('gray', 400)] - The disabled border color for a selected item from the button group.
|
|
134
134
|
/// @prop {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for button-group component.
|
|
135
|
-
/// @prop {Number} default-size [3] - The default size used for the button-group component.
|
|
136
135
|
/// @requires {Map} $light-button-group
|
|
137
136
|
/// @requires {Map} $default-elevation-button-group
|
|
138
137
|
$material-button-group: extend(
|
|
@@ -298,8 +297,6 @@ $material-button-group: extend(
|
|
|
298
297
|
400,
|
|
299
298
|
),
|
|
300
299
|
),
|
|
301
|
-
|
|
302
|
-
default-size: 3,
|
|
303
300
|
)
|
|
304
301
|
);
|
|
305
302
|
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
/// @prop {Map} disabled-foreground [color: ('gray', 500)] - The disabled foreground color of the button.
|
|
23
23
|
/// @prop {Map} disabled-icon-color [color: ('gray', 500)] - The disabled icon color of the button.
|
|
24
24
|
/// @prop {List} size [(rem(24px), rem(30px), rem(36px))] - The size used for the button.
|
|
25
|
-
/// @prop {Number} default-size [
|
|
25
|
+
/// @prop {Number} default-size [1] - The default size used for the button component.
|
|
26
26
|
$light-base-button: (
|
|
27
27
|
shadow-color: transparent,
|
|
28
28
|
border-color: transparent,
|
|
@@ -56,7 +56,7 @@ $light-base-button: (
|
|
|
56
56
|
rem(36px),
|
|
57
57
|
),
|
|
58
58
|
),
|
|
59
|
-
default-size:
|
|
59
|
+
default-size: 1,
|
|
60
60
|
);
|
|
61
61
|
|
|
62
62
|
/// @type {Map}
|
|
@@ -12,17 +12,20 @@
|
|
|
12
12
|
|
|
13
13
|
/// Generates a light drop-down schema.
|
|
14
14
|
/// @type {Map}
|
|
15
|
+
/// @prop {Map} border-color [color: ('gray', 300)] - The border color used for drop-down component.
|
|
15
16
|
/// @prop {Map} background-color [color: 'surface'] - The drop-down background color.
|
|
16
17
|
/// @prop {Map} header-text-color [color: ('secondary', 500)] - The drop-down header text color.
|
|
17
18
|
/// @prop {Map} item-text-color [color: ('gray', 800)] - The drop-down text color.
|
|
18
|
-
/// @prop {Map}
|
|
19
|
+
/// @prop {Map} item-icon-color [color: ('gray', 800)] - The drop-down item icon color.
|
|
20
|
+
/// @prop {Map} hover-item-text-color [color: ('gray', 800)] - The drop-down item hover text color.
|
|
21
|
+
/// @prop {Map} hover-item-icon-color [color: ('gray', 800)] - The drop-down item hover icon color.
|
|
19
22
|
/// @prop {Map} focused-item-text-color [color: ('gray', 800)] - The drop-down focused item text color.
|
|
23
|
+
/// @prop {Color} focused-item-border-color [transparent] - The drop-down item border color on focus.
|
|
20
24
|
/// @prop {Map} selected-item-background [color: ('primary', 500)] - The drop-down selected item background color.
|
|
21
25
|
/// @prop {Color} disabled-item-background [transparent] - The drop-down disabled item background color.
|
|
22
26
|
/// @prop {Map} disabled-item-text-color [color: ('gray', 400)] - The drop-down disabled item text color.
|
|
23
27
|
/// @prop {Number} elevation [8] - The elevation level, between 0-24, to be used for the drop-down shadow.
|
|
24
28
|
/// @prop {Number} border-width [0] - The border width used for drop-down component.
|
|
25
|
-
/// @prop {Map} border-color [color: ('gray', 300)] - The border color used for drop-down component.
|
|
26
29
|
/// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for drop-down component.
|
|
27
30
|
/// @prop {List} item-border-radius [(rem(0), rem(0), rem(20px))] - The border radius used for the drop-down items.
|
|
28
31
|
/// @prop {List} size [(rem(28px), rem(32px), rem(40px))] - The size used for the dropdown item height.
|
|
@@ -46,18 +49,31 @@ $light-drop-down: extend(
|
|
|
46
49
|
800,
|
|
47
50
|
),
|
|
48
51
|
),
|
|
52
|
+
item-icon-color: (
|
|
53
|
+
color: (
|
|
54
|
+
'gray',
|
|
55
|
+
800,
|
|
56
|
+
),
|
|
57
|
+
),
|
|
49
58
|
hover-item-text-color: (
|
|
50
59
|
color: (
|
|
51
60
|
'gray',
|
|
52
61
|
800,
|
|
53
62
|
),
|
|
54
63
|
),
|
|
64
|
+
hover-item-icon-color: (
|
|
65
|
+
color: (
|
|
66
|
+
'gray',
|
|
67
|
+
800,
|
|
68
|
+
),
|
|
69
|
+
),
|
|
55
70
|
focused-item-text-color: (
|
|
56
71
|
color: (
|
|
57
72
|
'gray',
|
|
58
73
|
800,
|
|
59
74
|
),
|
|
60
75
|
),
|
|
76
|
+
focused-item-border-color: transparent,
|
|
61
77
|
selected-item-background: (
|
|
62
78
|
color: (
|
|
63
79
|
'primary',
|
|
@@ -109,8 +125,10 @@ $light-drop-down: extend(
|
|
|
109
125
|
/// @prop {Map} focused-item-background [color: ('gray', 100, .8)] - The drop-down focused item background color.
|
|
110
126
|
/// @prop {Map} selected-item-background [color: ('secondary', 100)] - The drop-down selected item background color.
|
|
111
127
|
/// @prop {Map} selected-item-text-color [contrast-color: ('secondary', 100)] - The drop-down selected item text color.
|
|
128
|
+
/// @prop {Map} selected-item-icon-color [contrast-color: ('secondary', 100)] - The drop-down selected item icon color.
|
|
112
129
|
/// @prop {Map} selected-hover-item-background [color: ('secondary', 200)] - The drop-down selected item hover background color.
|
|
113
130
|
/// @prop {Map} selected-hover-item-text-color [contrast-color: ('secondary', 200)] - The drop-down selected item hover text color.
|
|
131
|
+
/// @prop {Map} selected-hover-item-icon-color [contrast-color: ('secondary', 200)] - The drop-down selected item hover icon color.
|
|
114
132
|
/// @prop {Map} selected-focus-item-background [color: ('secondary', 200)] - The drop-down selected item focus background color.
|
|
115
133
|
/// @prop {Map} selected-focus-item-text-color [contrast-color: ('secondary', 200)] - The drop-down selected item focus text color.
|
|
116
134
|
/// @requires {Map} $light-drop-down
|
|
@@ -145,6 +163,12 @@ $material-drop-down: extend(
|
|
|
145
163
|
100,
|
|
146
164
|
),
|
|
147
165
|
),
|
|
166
|
+
selected-item-icon-color: (
|
|
167
|
+
contrast-color: (
|
|
168
|
+
'secondary',
|
|
169
|
+
100,
|
|
170
|
+
),
|
|
171
|
+
),
|
|
148
172
|
selected-hover-item-background: (
|
|
149
173
|
color: (
|
|
150
174
|
'secondary',
|
|
@@ -157,6 +181,12 @@ $material-drop-down: extend(
|
|
|
157
181
|
200,
|
|
158
182
|
),
|
|
159
183
|
),
|
|
184
|
+
selected-hover-item-icon-color: (
|
|
185
|
+
contrast-color: (
|
|
186
|
+
'secondary',
|
|
187
|
+
200,
|
|
188
|
+
),
|
|
189
|
+
),
|
|
160
190
|
selected-focus-item-background: (
|
|
161
191
|
color: (
|
|
162
192
|
'secondary',
|
|
@@ -176,11 +206,12 @@ $material-drop-down: extend(
|
|
|
176
206
|
/// @type {Map}
|
|
177
207
|
/// @prop {Map} hover-item-background [color: ('gray', 100)] - The drop-down hover item background color.
|
|
178
208
|
/// @prop {Map} focused-item-background [color: 'surface'] - The drop-down focused item background color.
|
|
179
|
-
/// @prop {Map} focused-item-text-color [color: ('gray', 800)] - The drop-down focused item text color.
|
|
180
209
|
/// @prop {Map} selected-item-background [color: ('gray', 200)] - The drop-down selected item background color.
|
|
181
210
|
/// @prop {Map} selected-item-text-color [contrast-color: ('gray', 200)] - The drop-down selected item text color.
|
|
211
|
+
/// @prop {Map} selected-item-icon-color [contrast-color: ('gray', 200)] - The drop-down selected item icon color.
|
|
182
212
|
/// @prop {Map} selected-hover-item-background [color: ('gray', 200)] - The drop-down selected item hover background color.
|
|
183
213
|
/// @prop {Map} selected-hover-item-text-color [contrast-color: ('gray', 200)] - The drop-down selected item hover text color.
|
|
214
|
+
/// @prop {Map} selected-hover-item-icon-color [contrast-color: ('gray', 200)] - The drop-down selected item hover icon color.
|
|
184
215
|
/// @prop {Map} selected-focus-item-background [color: ('gray', 200)] - The drop-down selected item focus background color.
|
|
185
216
|
/// @prop {Map} selected-focus-item-text-color [contrast-color: ('gray', 200)] - The drop-down selected item focus text color.
|
|
186
217
|
/// @prop {Map} border-color [color: ('gray', 700)] - The border color used for the drop-down items on focus state.
|
|
@@ -216,6 +247,12 @@ $fluent-drop-down: extend(
|
|
|
216
247
|
200,
|
|
217
248
|
),
|
|
218
249
|
),
|
|
250
|
+
selected-item-icon-color: (
|
|
251
|
+
contrast-color: (
|
|
252
|
+
'gray',
|
|
253
|
+
200,
|
|
254
|
+
),
|
|
255
|
+
),
|
|
219
256
|
selected-hover-item-background: (
|
|
220
257
|
color: (
|
|
221
258
|
'gray',
|
|
@@ -228,6 +265,12 @@ $fluent-drop-down: extend(
|
|
|
228
265
|
200,
|
|
229
266
|
),
|
|
230
267
|
),
|
|
268
|
+
selected-hover-item-icon-color: (
|
|
269
|
+
contrast-color: (
|
|
270
|
+
'gray',
|
|
271
|
+
200,
|
|
272
|
+
),
|
|
273
|
+
),
|
|
231
274
|
selected-focus-item-background: (
|
|
232
275
|
color: (
|
|
233
276
|
'gray',
|
|
@@ -268,8 +311,10 @@ $fluent-drop-down: extend(
|
|
|
268
311
|
/// @prop {Map} hover-item-background [color: ('gray', 200)] - The drop-down hover item background color.
|
|
269
312
|
/// @prop {Map} focused-item-background [color: ('gray', 200)] - The drop-down focused item background color.
|
|
270
313
|
/// @prop {Map} selected-item-text-color [contrast-color('primary', 600)] - The drop-down selected item text color.
|
|
314
|
+
/// @prop {Map} selected-item-icon-color [contrast-color('primary', 600)] - The drop-down selected item icon color.
|
|
271
315
|
/// @prop {Map} selected-hover-item-background [color: ('primary', 600)] - The drop-down selected item hover background color.
|
|
272
316
|
/// @prop {Map} selected-hover-item-text-color [contrast-color('primary', 600)] - The drop-down selected item hover text color.
|
|
317
|
+
/// @prop {Map} selected-hover-item-icon-color [contrast-color('primary', 600)] - The drop-down selected item hover icon color.
|
|
273
318
|
/// @prop {Map} selected-focus-item-background [color: ('primary', 600)] - The drop-down selected item focus background color.
|
|
274
319
|
/// @prop {Map} selected-focus-item-text-color [contrast-color('primary', 600)] - The drop-down selected item focus text color.
|
|
275
320
|
/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the drop-down shadow.
|
|
@@ -304,6 +349,12 @@ $bootstrap-drop-down: extend(
|
|
|
304
349
|
600,
|
|
305
350
|
),
|
|
306
351
|
),
|
|
352
|
+
selected-item-icon-color: (
|
|
353
|
+
contrast-color: (
|
|
354
|
+
'primary',
|
|
355
|
+
600,
|
|
356
|
+
),
|
|
357
|
+
),
|
|
307
358
|
selected-hover-item-background: (
|
|
308
359
|
color: (
|
|
309
360
|
'primary',
|
|
@@ -316,6 +367,12 @@ $bootstrap-drop-down: extend(
|
|
|
316
367
|
600,
|
|
317
368
|
),
|
|
318
369
|
),
|
|
370
|
+
selected-hover-item-icon-color: (
|
|
371
|
+
contrast-color: (
|
|
372
|
+
'primary',
|
|
373
|
+
600,
|
|
374
|
+
),
|
|
375
|
+
),
|
|
319
376
|
selected-focus-item-background: (
|
|
320
377
|
color: (
|
|
321
378
|
'primary',
|
|
@@ -334,85 +391,145 @@ $bootstrap-drop-down: extend(
|
|
|
334
391
|
|
|
335
392
|
/// Generates an indigo drop-down schema.
|
|
336
393
|
/// @type {Map}
|
|
337
|
-
/// @prop {Map}
|
|
338
|
-
/// @prop {Map}
|
|
339
|
-
/// @prop {Map}
|
|
340
|
-
/// @prop {Map}
|
|
341
|
-
/// @prop {Map}
|
|
342
|
-
/// @prop {Map}
|
|
343
|
-
/// @prop {Map}
|
|
344
|
-
/// @prop {Map}
|
|
345
|
-
/// @prop {Map}
|
|
394
|
+
/// @prop {Map} background-color [contrast-color: ('gray', 900)] - The drop-down background color.
|
|
395
|
+
/// @prop {Map} header-text-color [color: ('gray', 600)] - The drop-down header text color.
|
|
396
|
+
/// @prop {Map} item-icon-color [color: ('gray', 600)] - The drop-down item icon color.
|
|
397
|
+
/// @prop {Map} border-color [color: ('gray', 400)] - The border color used for the drop-down component.
|
|
398
|
+
/// @prop {Map} hover-item-background [color: ('gray', 900, .05)] - The drop-down item hover background color.
|
|
399
|
+
/// @prop {Map} hover-item-text-color [color: ('gray', 900)] - The drop-down item hover text color.
|
|
400
|
+
/// @prop {Map} hover-item-icon-color [color: ('gray', 700)] - The drop-down item hover icon color.
|
|
401
|
+
/// @prop {Map} focused-item-background [contrast-color: ('gray', 900)] - The drop-down focused item background color.
|
|
402
|
+
/// @prop {Map} focused-item-border-color [color: ('primary', 400)] - The drop-down item border color on focus.
|
|
403
|
+
/// @prop {Map} selected-item-background [color: ('primary', 300, .3)] - The drop-down selected item background color.
|
|
404
|
+
/// @prop {Map} selected-item-text-color [color: ('gray', 900)] - The drop-down selected item text color.
|
|
405
|
+
/// @prop {Map} selected-item-icon-color [color: ('gray', 700)] - The drop-down selected item icon color.
|
|
406
|
+
/// @prop {Map} selected-hover-item-background [color: ('primary', 300, .5)] - The drop-down selected item hover background color.
|
|
407
|
+
/// @prop {Map} selected-hover-item-text-color [color: ('gray', 900)] - The drop-down selected item hover text color.
|
|
408
|
+
/// @prop {Map} selected-hover-item-icon-color [color: ('gray', 800)] - The drop-down selected item hover icon color.
|
|
409
|
+
/// @prop {Map} selected-focus-item-background [color: ('primary', 300, .3)] - The drop-down selected item focus background color.
|
|
410
|
+
/// @prop {Map} selected-focus-item-text-color [color: ('gray', 900)] - The drop-down selected item focus text color.
|
|
411
|
+
/// @prop {Map} disabled-item-text-color [color: ('gray', 900, .2)] - The drop-down disabled item text color.
|
|
346
412
|
/// @prop {Number} elevation [3] - The elevation level, between 0-24, to be used for the badge shadow.
|
|
347
|
-
/// @prop {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for drop-down component.
|
|
348
413
|
/// @prop {List} item-border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for the drop-down items.
|
|
414
|
+
/// @prop {Number} border-width [1px] - The border width used for drop-down component.
|
|
415
|
+
/// @prop {List} size [(rem(24px), rem(28px), rem(32px))] - The size used for the dropdown item height.
|
|
349
416
|
/// @requires {Map} $light-drop-down
|
|
350
417
|
/// @requires {Map} $indigo-elevation-drop-down
|
|
351
418
|
$indigo-drop-down: extend(
|
|
352
419
|
$light-drop-down,
|
|
353
420
|
$indigo-elevation-drop-down,
|
|
354
421
|
(
|
|
422
|
+
background-color: (
|
|
423
|
+
contrast-color: (
|
|
424
|
+
'gray',
|
|
425
|
+
900,
|
|
426
|
+
),
|
|
427
|
+
),
|
|
428
|
+
border-color: (
|
|
429
|
+
color: (
|
|
430
|
+
'gray',
|
|
431
|
+
400,
|
|
432
|
+
),
|
|
433
|
+
),
|
|
355
434
|
header-text-color: (
|
|
356
435
|
color: (
|
|
357
|
-
'
|
|
358
|
-
|
|
436
|
+
'gray',
|
|
437
|
+
600,
|
|
359
438
|
),
|
|
360
439
|
),
|
|
361
|
-
item-
|
|
440
|
+
item-icon-color: (
|
|
362
441
|
color: (
|
|
363
442
|
'gray',
|
|
364
|
-
|
|
443
|
+
600,
|
|
365
444
|
),
|
|
366
445
|
),
|
|
367
446
|
hover-item-background: (
|
|
368
447
|
color: (
|
|
369
|
-
'
|
|
370
|
-
|
|
371
|
-
0.
|
|
448
|
+
'gray',
|
|
449
|
+
900,
|
|
450
|
+
0.05,
|
|
451
|
+
),
|
|
452
|
+
),
|
|
453
|
+
hover-item-text-color: (
|
|
454
|
+
color: (
|
|
455
|
+
'gray',
|
|
456
|
+
900,
|
|
457
|
+
),
|
|
458
|
+
),
|
|
459
|
+
hover-item-icon-color: (
|
|
460
|
+
color: (
|
|
461
|
+
'gray',
|
|
462
|
+
700,
|
|
372
463
|
),
|
|
373
464
|
),
|
|
374
465
|
focused-item-background: (
|
|
466
|
+
contrast-color: (
|
|
467
|
+
'gray',
|
|
468
|
+
900,
|
|
469
|
+
),
|
|
470
|
+
),
|
|
471
|
+
focused-item-border-color: (
|
|
375
472
|
color: (
|
|
376
473
|
'primary',
|
|
377
|
-
|
|
378
|
-
0.15,
|
|
474
|
+
400,
|
|
379
475
|
),
|
|
380
476
|
),
|
|
381
|
-
selected-item-
|
|
382
|
-
|
|
477
|
+
selected-item-background: (
|
|
478
|
+
color: (
|
|
383
479
|
'primary',
|
|
384
|
-
|
|
480
|
+
300,
|
|
481
|
+
0.3,
|
|
482
|
+
),
|
|
483
|
+
),
|
|
484
|
+
selected-item-text-color: (
|
|
485
|
+
color: (
|
|
486
|
+
'gray',
|
|
487
|
+
900,
|
|
488
|
+
),
|
|
489
|
+
),
|
|
490
|
+
selected-item-icon-color: (
|
|
491
|
+
color: (
|
|
492
|
+
'gray',
|
|
493
|
+
700,
|
|
385
494
|
),
|
|
386
495
|
),
|
|
387
496
|
selected-hover-item-background: (
|
|
388
497
|
color: (
|
|
389
498
|
'primary',
|
|
390
|
-
|
|
499
|
+
300,
|
|
500
|
+
0.5,
|
|
391
501
|
),
|
|
392
502
|
),
|
|
393
503
|
selected-hover-item-text-color: (
|
|
394
|
-
|
|
395
|
-
'
|
|
396
|
-
|
|
504
|
+
color: (
|
|
505
|
+
'gray',
|
|
506
|
+
900,
|
|
507
|
+
),
|
|
508
|
+
),
|
|
509
|
+
selected-hover-item-icon-color: (
|
|
510
|
+
color: (
|
|
511
|
+
'gray',
|
|
512
|
+
800,
|
|
397
513
|
),
|
|
398
514
|
),
|
|
399
515
|
selected-focus-item-background: (
|
|
400
516
|
color: (
|
|
401
517
|
'primary',
|
|
402
|
-
|
|
518
|
+
300,
|
|
519
|
+
0.3,
|
|
403
520
|
),
|
|
404
521
|
),
|
|
405
522
|
selected-focus-item-text-color: (
|
|
406
|
-
|
|
407
|
-
'
|
|
408
|
-
|
|
523
|
+
color: (
|
|
524
|
+
'gray',
|
|
525
|
+
900,
|
|
409
526
|
),
|
|
410
527
|
),
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
528
|
+
disabled-item-text-color: (
|
|
529
|
+
color: (
|
|
530
|
+
'gray',
|
|
531
|
+
900,
|
|
532
|
+
0.2,
|
|
416
533
|
),
|
|
417
534
|
),
|
|
418
535
|
item-border-radius: (
|
|
@@ -422,5 +539,13 @@ $indigo-drop-down: extend(
|
|
|
422
539
|
rem(20px),
|
|
423
540
|
),
|
|
424
541
|
),
|
|
542
|
+
border-width: 1px,
|
|
543
|
+
size: (
|
|
544
|
+
sizable: (
|
|
545
|
+
rem(24px),
|
|
546
|
+
rem(28px),
|
|
547
|
+
rem(32px),
|
|
548
|
+
),
|
|
549
|
+
),
|
|
425
550
|
)
|
|
426
551
|
);
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
/// @prop {Map} disabled-border-color [color: ('gray', 100)] - The disabled border color of the material icon button.
|
|
30
30
|
/// @prop {List} border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for the material icon button.
|
|
31
31
|
/// @prop {List} size [(rem(24px), rem(30px), rem(36px))] - The size used for the material icon button.
|
|
32
|
-
/// @prop {Number} default-size [
|
|
32
|
+
/// @prop {Number} default-size [2] - The default size used for the icon button.
|
|
33
33
|
$material-base-icon-button: (
|
|
34
34
|
shadow-color: transparent,
|
|
35
35
|
background: transparent,
|
|
@@ -121,7 +121,7 @@ $material-base-icon-button: (
|
|
|
121
121
|
rem(36px),
|
|
122
122
|
),
|
|
123
123
|
),
|
|
124
|
-
default-size:
|
|
124
|
+
default-size: 2,
|
|
125
125
|
);
|
|
126
126
|
|
|
127
127
|
/// Generates a material flat icon button schema.
|
|
@@ -214,65 +214,76 @@ $bootstrap-list: extend(
|
|
|
214
214
|
|
|
215
215
|
/// Generates an indigo list schema.
|
|
216
216
|
/// @type {Map}
|
|
217
|
-
/// @prop {
|
|
218
|
-
/// @prop {
|
|
219
|
-
/// @prop {Map}
|
|
220
|
-
/// @prop {
|
|
221
|
-
/// @prop {Map} item-
|
|
222
|
-
/// @prop {Map} item-
|
|
223
|
-
/// @prop {
|
|
224
|
-
/// @prop {
|
|
225
|
-
/// @prop {
|
|
226
|
-
/// @prop {
|
|
227
|
-
/// @prop {
|
|
228
|
-
/// @prop {
|
|
229
|
-
/// @prop {
|
|
230
|
-
/// @prop {
|
|
231
|
-
/// @prop {
|
|
232
|
-
/// @prop {
|
|
217
|
+
/// @prop {Color} background [transparent] - The list background color.
|
|
218
|
+
/// @prop {Color} header-background [transparent] - The list header background color.
|
|
219
|
+
/// @prop {Map} header-text-color [color: ('grays', 600)] - The list header text color.
|
|
220
|
+
/// @prop {Color} item-background [transparent] - The list item background color.
|
|
221
|
+
/// @prop {Map} item-background-hover [color: ('primary', 300, .3)] - The list item hover background.
|
|
222
|
+
/// @prop {Map} item-background-active [ color: ('primary', 300, .3)] - The active list item background color.
|
|
223
|
+
/// @prop {Map} item-text-color [color: ('gray', 800)] - The list item text color.
|
|
224
|
+
/// @prop {Map} item-text-color-hover [color: ('gray', 800)] - The list item text color.
|
|
225
|
+
/// @prop {Map} item-text-color-active [color: ('gray', 800)] - The active list item text color.
|
|
226
|
+
/// @prop {Map} item-subtitle-color [color: ('gray', 600)] - The list item subtitle color.
|
|
227
|
+
/// @prop {Map} item-subtitle-color-hover [color: ('gray', 600)] - The list item subtitle hover color.
|
|
228
|
+
/// @prop {Map} item-subtitle-color-active [color: ('gray', 600)] - The list item subtitle active color.
|
|
229
|
+
/// @prop {Map} item-action-color [color: ('gray', 600)] - The list item action color.
|
|
230
|
+
/// @prop {Map} item-action-color-hover [color: ('gray', 600)] - The list item action hover color.
|
|
231
|
+
/// @prop {Map} item-action-color-active [color: ('gray', 600)] - The list item action active color.
|
|
232
|
+
/// @prop {Map} item-thumbnail-color [color: ('gray', 600)] - The list item thumbnail color.
|
|
233
|
+
/// @prop {Map} item-thumbnail-color-hover [color: ('gray', 600)] - The list item thumbnail hover color.
|
|
234
|
+
/// @prop {Map} item-thumbnail-color-active [color: ('gray', 600)] - The list item thumbnail active color.
|
|
235
|
+
/// @prop {Number} item-border-radius [0] - The border radius used for list item.
|
|
233
236
|
/// @requires {Map} $light-list
|
|
234
237
|
$indigo-list: extend(
|
|
235
238
|
$light-list,
|
|
236
239
|
(
|
|
240
|
+
background: transparent,
|
|
241
|
+
|
|
242
|
+
header-background: transparent,
|
|
243
|
+
|
|
237
244
|
header-text-color: (
|
|
238
245
|
color: (
|
|
239
|
-
'
|
|
240
|
-
|
|
246
|
+
'grays',
|
|
247
|
+
600,
|
|
241
248
|
),
|
|
242
249
|
),
|
|
243
250
|
|
|
251
|
+
item-background: transparent,
|
|
252
|
+
|
|
244
253
|
item-background-hover: (
|
|
245
254
|
color: (
|
|
246
255
|
'primary',
|
|
247
|
-
|
|
256
|
+
300,
|
|
257
|
+
0.3,
|
|
248
258
|
),
|
|
249
259
|
),
|
|
250
260
|
|
|
251
261
|
item-background-active: (
|
|
252
262
|
color: (
|
|
253
263
|
'primary',
|
|
254
|
-
|
|
264
|
+
300,
|
|
265
|
+
0.3,
|
|
255
266
|
),
|
|
256
267
|
),
|
|
257
268
|
|
|
258
269
|
item-text-color: (
|
|
259
270
|
color: (
|
|
260
271
|
'gray',
|
|
261
|
-
|
|
272
|
+
800,
|
|
262
273
|
),
|
|
263
274
|
),
|
|
264
275
|
|
|
265
276
|
item-text-color-hover: (
|
|
266
277
|
color: (
|
|
267
278
|
'gray',
|
|
268
|
-
|
|
279
|
+
800,
|
|
269
280
|
),
|
|
270
281
|
),
|
|
271
282
|
|
|
272
283
|
item-text-color-active: (
|
|
273
284
|
color: (
|
|
274
285
|
'gray',
|
|
275
|
-
|
|
286
|
+
800,
|
|
276
287
|
),
|
|
277
288
|
),
|
|
278
289
|
|
|
@@ -300,21 +311,21 @@ $indigo-list: extend(
|
|
|
300
311
|
item-subtitle-color: (
|
|
301
312
|
color: (
|
|
302
313
|
'gray',
|
|
303
|
-
|
|
314
|
+
600,
|
|
304
315
|
),
|
|
305
316
|
),
|
|
306
317
|
|
|
307
318
|
item-subtitle-color-hover: (
|
|
308
319
|
color: (
|
|
309
320
|
'gray',
|
|
310
|
-
|
|
321
|
+
600,
|
|
311
322
|
),
|
|
312
323
|
),
|
|
313
324
|
|
|
314
325
|
item-subtitle-color-active: (
|
|
315
326
|
color: (
|
|
316
327
|
'gray',
|
|
317
|
-
|
|
328
|
+
600,
|
|
318
329
|
),
|
|
319
330
|
),
|
|
320
331
|
|
|
@@ -339,12 +350,6 @@ $indigo-list: extend(
|
|
|
339
350
|
),
|
|
340
351
|
),
|
|
341
352
|
|
|
342
|
-
item-border-radius:
|
|
343
|
-
border-radius: (
|
|
344
|
-
rem(2px),
|
|
345
|
-
rem(0),
|
|
346
|
-
rem(24px),
|
|
347
|
-
),
|
|
348
|
-
),
|
|
353
|
+
item-border-radius: 0,
|
|
349
354
|
)
|
|
350
355
|
);
|
|
@@ -121,16 +121,73 @@ $bootstrap-progress-linear: extend(
|
|
|
121
121
|
|
|
122
122
|
/// Generates an indigo progress-linear schema.
|
|
123
123
|
/// @type {Map}
|
|
124
|
-
/// @prop {Map}
|
|
124
|
+
/// @prop {Map} text-color [color: ('gray', 600)] - The track value text color.
|
|
125
|
+
/// @prop {Map} track-color [color: ('gray', 900, .15)] - The main track color.
|
|
126
|
+
/// @prop {Map} fill-color-default [color: ('primary', 400)] - The track default fill color.
|
|
127
|
+
/// @prop {Map} fill-color-danger [color: ('error', 400)] - The track danger fill color.
|
|
128
|
+
/// @prop {Map} fill-color-warning [color: ('warn', 400)] - The track warning fill color.
|
|
129
|
+
/// @prop {Map} fill-color-info [color: ('info', 400)] - The track info fill color.
|
|
130
|
+
/// @prop {Map} fill-color-success [color: ('success', 400)] - The track success fill color.
|
|
131
|
+
/// @prop {Map} stripes-color [contrast-color: ('gray', 900, .3)] - The track stripes color.
|
|
125
132
|
/// @requires $light-progress-linear
|
|
126
133
|
$indigo-progress-linear: extend(
|
|
127
134
|
$light-progress-linear,
|
|
128
135
|
(
|
|
129
|
-
|
|
136
|
+
text-color: (
|
|
130
137
|
color: (
|
|
131
138
|
'gray',
|
|
132
|
-
|
|
133
|
-
|
|
139
|
+
600,
|
|
140
|
+
),
|
|
141
|
+
),
|
|
142
|
+
|
|
143
|
+
track-color: (
|
|
144
|
+
color: (
|
|
145
|
+
'gray',
|
|
146
|
+
900,
|
|
147
|
+
0.15,
|
|
148
|
+
),
|
|
149
|
+
),
|
|
150
|
+
|
|
151
|
+
fill-color-default: (
|
|
152
|
+
color: (
|
|
153
|
+
'primary',
|
|
154
|
+
400,
|
|
155
|
+
),
|
|
156
|
+
),
|
|
157
|
+
|
|
158
|
+
fill-color-danger: (
|
|
159
|
+
color: (
|
|
160
|
+
'error',
|
|
161
|
+
400,
|
|
162
|
+
),
|
|
163
|
+
),
|
|
164
|
+
|
|
165
|
+
fill-color-warning: (
|
|
166
|
+
color: (
|
|
167
|
+
'warn',
|
|
168
|
+
400,
|
|
169
|
+
),
|
|
170
|
+
),
|
|
171
|
+
|
|
172
|
+
fill-color-info: (
|
|
173
|
+
color: (
|
|
174
|
+
'info',
|
|
175
|
+
400,
|
|
176
|
+
),
|
|
177
|
+
),
|
|
178
|
+
|
|
179
|
+
fill-color-success: (
|
|
180
|
+
color: (
|
|
181
|
+
'success',
|
|
182
|
+
400,
|
|
183
|
+
),
|
|
184
|
+
),
|
|
185
|
+
|
|
186
|
+
stripes-color: (
|
|
187
|
+
contrast-color: (
|
|
188
|
+
'gray',
|
|
189
|
+
900,
|
|
190
|
+
0.3,
|
|
134
191
|
),
|
|
135
192
|
),
|
|
136
193
|
)
|
|
@@ -186,5 +243,29 @@ $bootstrap-progress-circular: $light-progress-circular;
|
|
|
186
243
|
|
|
187
244
|
/// Generates an indigo progress-circular schema.
|
|
188
245
|
/// @type {Map}
|
|
189
|
-
/// @
|
|
190
|
-
|
|
246
|
+
/// @prop {Map} base-circle-color [color: ('gray', 900, .15)] - The base circle fill color.
|
|
247
|
+
/// @prop {Map} progress-circle-color [color: ('primary', 400)] - The progress circle fill color.
|
|
248
|
+
/// @prop {Map} text-color [color: ('gray', 600)] - The value text color.
|
|
249
|
+
$indigo-progress-circular: (
|
|
250
|
+
base-circle-color: (
|
|
251
|
+
color: (
|
|
252
|
+
'gray',
|
|
253
|
+
900,
|
|
254
|
+
0.15,
|
|
255
|
+
),
|
|
256
|
+
),
|
|
257
|
+
|
|
258
|
+
progress-circle-color: (
|
|
259
|
+
color: (
|
|
260
|
+
'primary',
|
|
261
|
+
400,
|
|
262
|
+
),
|
|
263
|
+
),
|
|
264
|
+
|
|
265
|
+
text-color: (
|
|
266
|
+
color: (
|
|
267
|
+
'gray',
|
|
268
|
+
600,
|
|
269
|
+
),
|
|
270
|
+
),
|
|
271
|
+
);
|
|
@@ -236,7 +236,7 @@ $bootstrap-tree: extend(
|
|
|
236
236
|
/// @prop {Color} background-disabled [transparent] - The background color used for the tree node in disabled state.
|
|
237
237
|
/// @prop {Map} foreground [color: ('gray', 800)] - The color used for the tree node content.
|
|
238
238
|
/// @prop {Map} foreground-active [color: ('gray', 900)] - The color used for the content in active state of the tree node.
|
|
239
|
-
/// @prop {Map} foreground-selected [color: ('gray',
|
|
239
|
+
/// @prop {Map} foreground-selected [color: ('gray', 900)] - The color used for the content of the selected tree node.
|
|
240
240
|
/// @prop {Map} foreground-active-selected [color: ('gray', 900)] - The color used for the content of the active selected tree node.
|
|
241
241
|
/// @prop {Map} foreground-disabled [color: ('gray', 900, 0.2)] - The color used for the content of the disabled tree node.
|
|
242
242
|
/// @prop {Map} icon-color [color: ('gray', 600)] - The color used for the tree node icon.
|
|
@@ -259,7 +259,7 @@ $indigo-tree: extend(
|
|
|
259
259
|
foreground-selected: (
|
|
260
260
|
color: (
|
|
261
261
|
'gray',
|
|
262
|
-
|
|
262
|
+
900,
|
|
263
263
|
),
|
|
264
264
|
),
|
|
265
265
|
background-active: (
|