i-tech-shared-components 1.1.11 → 1.1.13
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 +4 -1
- package/theme/_buttons.scss +63 -0
- package/theme/_color_themes.scss +136 -0
- package/theme/_date_picker.scss +77 -0
- package/theme/_form_fields.scss +112 -0
- package/theme/_icon-button.scss +123 -0
- package/theme/_label.scss +119 -0
- package/theme/_mat-selects.scss +248 -0
- package/theme/_menu.scss +9 -0
- package/theme/_text_input.scss +28 -0
- package/theme/variables/_colors.scss +20 -0
- package/theme.scss +31 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "i-tech-shared-components",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.13",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/cdk": "^18.2.14",
|
|
6
6
|
"@angular/material": "^18.2.14",
|
|
@@ -16,6 +16,9 @@
|
|
|
16
16
|
"files": [
|
|
17
17
|
"**/*"
|
|
18
18
|
],
|
|
19
|
+
"styles": [
|
|
20
|
+
"theme.scss"
|
|
21
|
+
],
|
|
19
22
|
"module": "fesm2022/i-tech-shared-components.mjs",
|
|
20
23
|
"typings": "index.d.ts",
|
|
21
24
|
"exports": {
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
|
|
2
|
+
@use '@angular/material' as mat;
|
|
3
|
+
@import "./color_themes.scss";
|
|
4
|
+
|
|
5
|
+
body {
|
|
6
|
+
$borderRadius: 5px;
|
|
7
|
+
$fontSize: 13px;
|
|
8
|
+
$letterSpacing: 0.5px;
|
|
9
|
+
// BUTTONS
|
|
10
|
+
--mdc-filled-button-container-shape: #{$borderRadius} !important;
|
|
11
|
+
--mdc-outlined-button-container-shape: #{$borderRadius} !important;
|
|
12
|
+
--mdc-text-button-container-shape: #{$borderRadius} !important;
|
|
13
|
+
// Font Size
|
|
14
|
+
--mdc-filled-button-label-text-size: #{$fontSize} !important;
|
|
15
|
+
--mdc-outlined-button-label-text-size: #{$fontSize} !important;
|
|
16
|
+
--mdc-text-button-label-text-size: #{$fontSize} !important;
|
|
17
|
+
// Letter Spacing
|
|
18
|
+
--mdc-filled-button-label-text-tracking: #{$letterSpacing} !important;
|
|
19
|
+
--mdc-outlined-button-label-text-tracking: #{$letterSpacing} !important;
|
|
20
|
+
--mdc-text-button-label-text-tracking: #{$letterSpacing} !important;
|
|
21
|
+
// Unset Outline default border color
|
|
22
|
+
--mdc-outlined-button-outline-color: 0 !important;
|
|
23
|
+
|
|
24
|
+
.mdc-button:not(.mat-autocomplete-select-button) {
|
|
25
|
+
height: 40px;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.mdc-button {
|
|
29
|
+
.spinner-overlay {
|
|
30
|
+
position: absolute;
|
|
31
|
+
left: -20px;
|
|
32
|
+
top: 50%;
|
|
33
|
+
transform: translateY(-50%);
|
|
34
|
+
display: flex;
|
|
35
|
+
align-items: center;
|
|
36
|
+
justify-content: center;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
svg path {
|
|
40
|
+
fill: var(--mdc-text-button-label-text-color);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.spinner-overlay mat-spinner {
|
|
44
|
+
width: 20px;
|
|
45
|
+
height: 20px;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.relative {
|
|
50
|
+
position: relative;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.activated {
|
|
54
|
+
background-color: mat.get-theme-color($m3-light-theme, primary, 95) !important;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
// DEFINE TERTIARY BUTTON
|
|
58
|
+
.mdc-button.tertiary {
|
|
59
|
+
@include mat.button-color($m3-light-theme, $color-variant: tertiary);
|
|
60
|
+
--mdc-text-button-label-text-color: mat.get-theme-color($m3-light-theme, 'tertiary', 30) !important;
|
|
61
|
+
}
|
|
62
|
+
// END OF DEFINE TERTIARY BUTTON
|
|
63
|
+
}
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
@use '@angular/material' as mat;
|
|
2
|
+
@use 'sass:map';
|
|
3
|
+
|
|
4
|
+
$_light-palette: (
|
|
5
|
+
primary: (
|
|
6
|
+
0: #000000,
|
|
7
|
+
10: #003A0C,
|
|
8
|
+
20: #005B13,
|
|
9
|
+
25: #006B1E,
|
|
10
|
+
30: #007A28,
|
|
11
|
+
35: #00822E,
|
|
12
|
+
40: #008B33,
|
|
13
|
+
50: #009D3F,
|
|
14
|
+
60: #00AC48,
|
|
15
|
+
70: #42B963,
|
|
16
|
+
80: #69C57F,
|
|
17
|
+
90: #96D5A3,
|
|
18
|
+
95: #C0E5C7,
|
|
19
|
+
98: #E3F6E7,
|
|
20
|
+
99: #EFFAF1,
|
|
21
|
+
100: #FFFFFF,
|
|
22
|
+
),
|
|
23
|
+
secondary: (
|
|
24
|
+
0: #1A1A1A,
|
|
25
|
+
10: #0C2B61,
|
|
26
|
+
20: #183778,
|
|
27
|
+
25: #1F4085,
|
|
28
|
+
30: #2C4D91,
|
|
29
|
+
35: #335497,
|
|
30
|
+
40: #3A5B9E,
|
|
31
|
+
50: #4364A6,
|
|
32
|
+
60: #5777B7,
|
|
33
|
+
70: #718ECB,
|
|
34
|
+
80: #97B0E3,
|
|
35
|
+
90: #C1D2F5,
|
|
36
|
+
95: #DDE7FC,
|
|
37
|
+
98: #E1EBFC,
|
|
38
|
+
99: #EEF4FE,
|
|
39
|
+
100: #FFFFFF,
|
|
40
|
+
),
|
|
41
|
+
neutral: (
|
|
42
|
+
0: #1A1A1A,
|
|
43
|
+
10: #34363B,
|
|
44
|
+
20: #454950,
|
|
45
|
+
25: #4D525B,
|
|
46
|
+
30: #555B65,
|
|
47
|
+
35: #5C646F,
|
|
48
|
+
40: #636C79,
|
|
49
|
+
50: #747E8E,
|
|
50
|
+
60: #828C9B,
|
|
51
|
+
70: #A9AFB9,
|
|
52
|
+
80: #C2C5CD,
|
|
53
|
+
90: #DBDDE1,
|
|
54
|
+
95: #F2F2F5,
|
|
55
|
+
98: #F8F8FA,
|
|
56
|
+
99: #FAFAFC,
|
|
57
|
+
100: #ffffff,
|
|
58
|
+
),
|
|
59
|
+
neutral-variant: (
|
|
60
|
+
0: #000000,
|
|
61
|
+
10: #131e13,
|
|
62
|
+
20: #283327,
|
|
63
|
+
25: #323e32,
|
|
64
|
+
30: #3e4a3d,
|
|
65
|
+
35: #495648,
|
|
66
|
+
40: #556254,
|
|
67
|
+
50: #6e7b6c,
|
|
68
|
+
60: #879485,
|
|
69
|
+
70: #a1af9e,
|
|
70
|
+
80: #bdcab9,
|
|
71
|
+
90: #d9e6d4,
|
|
72
|
+
95: #e7f5e2,
|
|
73
|
+
98: #F2FCED,
|
|
74
|
+
99: #f6fff1,
|
|
75
|
+
100: #ffffff,
|
|
76
|
+
),
|
|
77
|
+
tertiary: (
|
|
78
|
+
0: #000000,
|
|
79
|
+
10: #1D2025,
|
|
80
|
+
20: #30353D,
|
|
81
|
+
25: #393F49,
|
|
82
|
+
30: #424954,
|
|
83
|
+
35: #4A535F,
|
|
84
|
+
40: #525C6A,
|
|
85
|
+
50: #647081,
|
|
86
|
+
60: #747F90,
|
|
87
|
+
70: #9FA6B1,
|
|
88
|
+
80: #BBBFC7,
|
|
89
|
+
90: #D7D9DE,
|
|
90
|
+
95: #F0F0F4,
|
|
91
|
+
98: #F5F5F8,
|
|
92
|
+
99: #F9F9FC,
|
|
93
|
+
100: #FFFFFF,
|
|
94
|
+
),
|
|
95
|
+
error: (
|
|
96
|
+
0: #39041A,
|
|
97
|
+
10: #670923,
|
|
98
|
+
20: #950E2B,
|
|
99
|
+
25: #A5102E,
|
|
100
|
+
30: #B41231,
|
|
101
|
+
35: #BB1635,
|
|
102
|
+
40: #C11A39,
|
|
103
|
+
50: #D2344C,
|
|
104
|
+
60: #DE4558,
|
|
105
|
+
70: #E77383,
|
|
106
|
+
80: #F5A0AA,
|
|
107
|
+
90: #FACBD5,
|
|
108
|
+
95: #FBE9EE,
|
|
109
|
+
98: #FCF1F4,
|
|
110
|
+
99: #FDF4F7,
|
|
111
|
+
100: #FFFFFF,
|
|
112
|
+
),
|
|
113
|
+
);
|
|
114
|
+
$_main: (
|
|
115
|
+
secondary: map.get($_light-palette, secondary),
|
|
116
|
+
neutral: map.get($_light-palette, neutral),
|
|
117
|
+
neutral-variant: map.get($_light-palette, neutral-variant),
|
|
118
|
+
error: map.get($_light-palette, error),
|
|
119
|
+
);
|
|
120
|
+
$_primary: map.merge(map.get($_light-palette, primary), $_main);
|
|
121
|
+
$_tertiary: map.merge(map.get($_light-palette, tertiary), $_main);
|
|
122
|
+
|
|
123
|
+
$m3-light-theme: mat.define-theme((
|
|
124
|
+
color: (
|
|
125
|
+
theme-type: light,
|
|
126
|
+
primary: $_primary,
|
|
127
|
+
tertiary: $_tertiary,
|
|
128
|
+
),
|
|
129
|
+
typography: (
|
|
130
|
+
plain-family: 'Noto Sans',
|
|
131
|
+
brand-family: 'Noto Sans'
|
|
132
|
+
),
|
|
133
|
+
density: (
|
|
134
|
+
scale: -4,
|
|
135
|
+
),
|
|
136
|
+
));
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
@use '@angular/material' as mat;
|
|
2
|
+
@import "./color_themes.scss";
|
|
3
|
+
|
|
4
|
+
body {
|
|
5
|
+
--mat-datepicker-calendar-container-background-color: #{mat.get-theme-color($m3-light-theme, primary, 100)} !important;
|
|
6
|
+
--mat-datepicker-calendar-period-button-text-color: #{mat.get-theme-color($m3-light-theme, primary, 35)} !important;
|
|
7
|
+
--mat-datepicker-calendar-date-hover-state-background-color: #{mat.get-theme-color($m3-light-theme, primary, 99)} !important;
|
|
8
|
+
--mat-datepicker-calendar-date-today-background-color: #{mat.get-theme-color($m3-light-theme, primary, 99)} !important;
|
|
9
|
+
--mat-datepicker-range-input-separator-color: #{mat.get-theme-color($m3-light-theme, neutral, 50)} !important;
|
|
10
|
+
--mat-datepicker-calendar-body-label-text-size: 16px;
|
|
11
|
+
--mat-datepicker-calendar-body-label-text-weight: 400;
|
|
12
|
+
--mat-datepicker-calendar-period-button-text-size: 16px;
|
|
13
|
+
--mat-datepicker-calendar-period-button-text-weight: 400;
|
|
14
|
+
--mat-datepicker-calendar-header-text-color: #1D1B20 !important;
|
|
15
|
+
--mat-datepicker-calendar-header-text-size: 16px !important;
|
|
16
|
+
--mat-datepicker-calendar-header-text-weight: 700 !important;
|
|
17
|
+
|
|
18
|
+
.mat-calendar-body-cell-content {
|
|
19
|
+
font-size: 16px;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
|
|
23
|
+
background-color: var(--mat-datepicker-calendar-date-hover-state-background-color);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.mat-date-range-input {
|
|
27
|
+
.mat-mdc-form-field-flex {
|
|
28
|
+
height: 40px;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.mat-date-range-input-inner::placeholder {
|
|
32
|
+
color: #{mat.get-theme-color($m3-light-theme, neutral, 50)};
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.mat-mdc-input-element::placeholder {
|
|
36
|
+
font-weight: 500;
|
|
37
|
+
overflow: hidden;
|
|
38
|
+
color: var(--Text, #424954);
|
|
39
|
+
text-overflow: ellipsis;
|
|
40
|
+
font-size: 13px;
|
|
41
|
+
font-style: normal;
|
|
42
|
+
line-height: 24px;
|
|
43
|
+
letter-spacing: 0.5px;
|
|
44
|
+
}
|
|
45
|
+
width: 100%;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.opened_calendar {
|
|
49
|
+
--mdc-outlined-text-field-outline-width: 3px !important;
|
|
50
|
+
--mdc-outlined-text-field-outline-color: #0060DF !important;
|
|
51
|
+
--mdc-outlined-text-field-error-outline-color: #0060DF !important;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.mat-datepicker-content {
|
|
55
|
+
background-color: var(--white-color) !important;
|
|
56
|
+
--mat-datepicker-calendar-navigation-button-icon-color: #{mat.get-theme-color($m3-light-theme, primary, 80)};
|
|
57
|
+
--mat-datepicker-calendar-period-button-icon-color: #{mat.get-theme-color($m3-light-theme, primary, 80)};
|
|
58
|
+
box-shadow: 0 2px 6px 2px rgba(48, 70, 102, 0.10);
|
|
59
|
+
border: 1px solid var(--Outline, #D7D9DE);
|
|
60
|
+
|
|
61
|
+
.mat-calendar-body-selected {
|
|
62
|
+
background-color: var(--mat-datepicker-calendar-date-selected-state-background-color) !important;
|
|
63
|
+
color: var(--mat-datepicker-calendar-date-selected-state-text-color) !important;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
|
|
67
|
+
border: 1px solid var(--mat-datepicker-calendar-date-today-outline-color) !important;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.mat-calendar-body-cell-content {
|
|
71
|
+
border: unset !important;
|
|
72
|
+
font-size: 13px !important;
|
|
73
|
+
font-weight: 400 !important;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
@use '@angular/material' as mat;
|
|
2
|
+
@import "./color_themes.scss";
|
|
3
|
+
|
|
4
|
+
body {
|
|
5
|
+
.mat-mdc-form-field {
|
|
6
|
+
width: 100%;
|
|
7
|
+
--mdc-outlined-text-field-input-text-placeholder-color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)};
|
|
8
|
+
// Custom outline color intentionally outside of color palette
|
|
9
|
+
--mdc-outlined-text-field-focus-outline-color: #0060DF;
|
|
10
|
+
--mdc-outlined-text-field-outline-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
|
|
11
|
+
--mdc-outlined-text-field-hover-outline-color: #{mat.get-theme-color($m3-light-theme, tertiary, 70)};
|
|
12
|
+
// Set/focused values should be a slightly darker tertiary30
|
|
13
|
+
--mat-select-focused-arrow-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
|
|
14
|
+
--mat-select-enabled-trigger-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
|
|
15
|
+
--mdc-filled-text-field-caret-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
|
|
16
|
+
--mdc-filled-text-field-focus-active-indicator-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
|
|
17
|
+
--mdc-filled-text-field-focus-label-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
|
|
18
|
+
--mdc-outlined-text-field-caret-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
|
|
19
|
+
--mdc-outlined-text-field-focus-label-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
|
|
20
|
+
--mat-form-field-focus-select-arrow-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
|
|
21
|
+
--mdc-outlined-text-field-input-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
|
|
22
|
+
--mdc-outlined-text-field-focus-outline-width: 3px !important;
|
|
23
|
+
--mat-form-field-subscript-text-weight: 500;
|
|
24
|
+
--mat-form-field-container-text-size: 13px;
|
|
25
|
+
--mat-form-field-container-text-weight: 500;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
mat-hint {
|
|
30
|
+
color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)};
|
|
31
|
+
font-size: 11px;
|
|
32
|
+
font-weight: 500;
|
|
33
|
+
letter-spacing: 0.022px;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
mat-label:not(.meu_item_label) {
|
|
37
|
+
color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)};
|
|
38
|
+
position: relative;
|
|
39
|
+
bottom: 5px;
|
|
40
|
+
padding-left: 16px;
|
|
41
|
+
font-size: 11px;
|
|
42
|
+
font-weight: 500;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.mat-mdc-menu-item {
|
|
46
|
+
--mat-menu-item-label-text-size: 13px !important;
|
|
47
|
+
--mat-menu-item-label-text-weight: 500 !important;
|
|
48
|
+
--mat-menu-item-label-text-line-height: 20px !important;
|
|
49
|
+
--mat-menu-item-label-text-tracking: 0.2px !important;
|
|
50
|
+
--mat-menu-item-label-text-color: #{mat.get-theme-color($m3-light-theme,tertiary, 30)} !important;
|
|
51
|
+
.meu_item_label {
|
|
52
|
+
text-align: left;
|
|
53
|
+
text-underline-position: from-font;
|
|
54
|
+
text-decoration-skip-ink: none;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.required-input {
|
|
59
|
+
color: #{mat.get-theme-color($m3-light-theme, error, 40)};
|
|
60
|
+
position: relative;
|
|
61
|
+
bottom: 5px;
|
|
62
|
+
font-size: 11px;
|
|
63
|
+
font-weight: 500;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.mat-form-field-invalid {
|
|
67
|
+
--mdc-outlined-text-field-outline-width: 3px !important;
|
|
68
|
+
// See if we can remove this after updating date-picker scss
|
|
69
|
+
--mdc-outlined-text-field-error-outline-color: #{mat.get-theme-color($m3-light-theme,error,40)} !important;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.default-form-icon-color {
|
|
73
|
+
color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)} !important;
|
|
74
|
+
.mat-mdc-icon-button.tonal mat-icon {
|
|
75
|
+
color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)} !important;
|
|
76
|
+
& svg path {
|
|
77
|
+
fill: #{mat.get-theme-color($m3-light-theme, tertiary, 50)} !important;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
mat-form-field input::placeholder {
|
|
83
|
+
font-size: 13px;
|
|
84
|
+
font-style: normal;
|
|
85
|
+
font-weight: 500;
|
|
86
|
+
line-height: 20px;
|
|
87
|
+
letter-spacing: 0.2px;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.mat-mdc-input-element {
|
|
91
|
+
overflow: hidden;
|
|
92
|
+
color: var(--Text, #{mat.get-theme-color($m3-light-theme,tertiary, 30)});
|
|
93
|
+
text-overflow: ellipsis;
|
|
94
|
+
font-size: 13px;
|
|
95
|
+
font-style: normal;
|
|
96
|
+
font-weight: 500;
|
|
97
|
+
line-height: 24px;
|
|
98
|
+
letter-spacing: 0.5px;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.mat-mdc-form-field-icon-suffix {
|
|
102
|
+
display: flex;
|
|
103
|
+
}
|
|
104
|
+
.mat-mdc-form-field-icon-prefix>.mat-icon {
|
|
105
|
+
padding: 0 8px !important;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.invalid-label-color {
|
|
109
|
+
color: #{mat.get-theme-color($m3-light-theme, error, 40)} !important;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
}
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
@use '@angular/material' as mat;
|
|
2
|
+
@import "./color_themes.scss";
|
|
3
|
+
|
|
4
|
+
body {
|
|
5
|
+
$buttonSize: 40;
|
|
6
|
+
$buttonSizeSmall: 24;
|
|
7
|
+
|
|
8
|
+
app-icon-button {
|
|
9
|
+
display: inline-block;
|
|
10
|
+
height: #{$buttonSize}px;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
app-icon-button:has(.small) {
|
|
14
|
+
height: #{$buttonSizeSmall}px;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
// ICON BUTTON SIZING
|
|
18
|
+
.mat-mdc-icon-button,.mat-mdc-fab-base {
|
|
19
|
+
width: #{$buttonSize}px;
|
|
20
|
+
height: #{$buttonSize}px;
|
|
21
|
+
--mdc-icon-button-state-layer-size: #{$buttonSize}px !important;
|
|
22
|
+
padding: calc(calc(var(--mdc-icon-button-state-layer-size, 40px) - var(--mdc-icon-button-icon-size, 24px)) / 2);
|
|
23
|
+
font-size: unset !important;
|
|
24
|
+
|
|
25
|
+
.mat-mdc-button-touch-target {
|
|
26
|
+
width: #{$buttonSize - 10 }px;
|
|
27
|
+
height: #{$buttonSize - 10 }px;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
mat-icon {
|
|
31
|
+
svg {
|
|
32
|
+
vertical-align: super;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.mat-mdc-icon-button.small {
|
|
39
|
+
$iconSize: 21px;
|
|
40
|
+
$buttonSize: 24;
|
|
41
|
+
width: #{$buttonSizeSmall}px;
|
|
42
|
+
height: #{$buttonSizeSmall}px;
|
|
43
|
+
--mdc-icon-button-state-layer-size: #{$buttonSizeSmall}px !important;
|
|
44
|
+
--mdc-icon-button-icon-size: #{$iconSize} !important;
|
|
45
|
+
|
|
46
|
+
mat-icon {
|
|
47
|
+
font-size: $iconSize;
|
|
48
|
+
width: $iconSize;
|
|
49
|
+
height: $iconSize;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.mat-mdc-button-touch-target {
|
|
53
|
+
width: #{$buttonSizeSmall}px;
|
|
54
|
+
height: #{$buttonSizeSmall}px;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.mat-mdc-fab-base.small {
|
|
60
|
+
$iconSize: 21px;
|
|
61
|
+
$buttonSize: 24;
|
|
62
|
+
width: #{$buttonSize}px;
|
|
63
|
+
height: #{$buttonSize}px;
|
|
64
|
+
--mdc-icon-button-state-layer-size: #{$buttonSize}px !important;
|
|
65
|
+
--mdc-icon-button-icon-size: #{$iconSize} !important;
|
|
66
|
+
|
|
67
|
+
mat-icon {
|
|
68
|
+
font-size: $iconSize;
|
|
69
|
+
width: $iconSize;
|
|
70
|
+
height: $iconSize;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.mat-mdc-button-touch-target {
|
|
74
|
+
width: #{$buttonSize}px;
|
|
75
|
+
height: #{$buttonSize}px;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
// END OF ICON BUTTON SIZING
|
|
80
|
+
|
|
81
|
+
// BUTTON ICON TYPES
|
|
82
|
+
|
|
83
|
+
.mat-mdc-icon-button.tonal {
|
|
84
|
+
--mat-icon-button-state-layer-color: #{mat.get-theme-color($m3-light-theme, tertiary, 60)};
|
|
85
|
+
|
|
86
|
+
mat-icon {
|
|
87
|
+
color: mat.get-theme-color($m3-light-theme, tertiary, 30);
|
|
88
|
+
& svg path {
|
|
89
|
+
fill: mat.get-theme-color($m3-light-theme, tertiary, 30);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.mat-mdc-icon-button.standard {
|
|
95
|
+
--mat-icon-button-state-layer-color: #{mat.get-theme-color($m3-light-theme, primary, 60)};
|
|
96
|
+
|
|
97
|
+
mat-icon {
|
|
98
|
+
color: mat.get-theme-color($m3-light-theme, primary, 50);
|
|
99
|
+
& svg path {
|
|
100
|
+
fill: mat.get-theme-color($m3-light-theme, primary, 50);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
// FILLED
|
|
106
|
+
.mat-mdc-fab-base.filled {
|
|
107
|
+
--mdc-fab-container-shape: 50% !important;
|
|
108
|
+
--mdc-fab-container-elevation-shadow: none !important;
|
|
109
|
+
--mdc-fab-hover-container-elevation-shadow: none !important;
|
|
110
|
+
--mdc-fab-pressed-container-elevation-shadow: none !important;
|
|
111
|
+
--mdc-fab-focus-container-elevation-shadow: none !important;
|
|
112
|
+
--mdc-fab-container-color: #{mat.get-theme-color($m3-light-theme, primary, 50)};
|
|
113
|
+
--mat-fab-state-layer-color: #{mat.get-theme-color($m3-light-theme, primary, 50)};
|
|
114
|
+
mat-icon {
|
|
115
|
+
color: white;
|
|
116
|
+
& svg path {
|
|
117
|
+
fill: white;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
// END OF BUTTON ICON TYPES
|
|
122
|
+
|
|
123
|
+
}
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
@use "sass:map";
|
|
2
|
+
@use '@angular/material' as mat;
|
|
3
|
+
@import "./color_themes.scss";
|
|
4
|
+
|
|
5
|
+
body {
|
|
6
|
+
$types: (
|
|
7
|
+
purple: (
|
|
8
|
+
main: #DBD4F3,
|
|
9
|
+
hover: #E5E0F6,
|
|
10
|
+
border: #6F5BBF,
|
|
11
|
+
text: #140063
|
|
12
|
+
),
|
|
13
|
+
teal: (
|
|
14
|
+
main: #D2F3F2,
|
|
15
|
+
hover: #DFF6F6,
|
|
16
|
+
border: #00CAC3,
|
|
17
|
+
text: #006B67
|
|
18
|
+
),
|
|
19
|
+
olive: (
|
|
20
|
+
main: #EFF2D4,
|
|
21
|
+
hover: #F3F6E0,
|
|
22
|
+
border: #CDD968,
|
|
23
|
+
text: #606C00
|
|
24
|
+
),
|
|
25
|
+
orange: (
|
|
26
|
+
main: #FFE4DB,
|
|
27
|
+
hover: #FFECE5,
|
|
28
|
+
border: #FC8156,
|
|
29
|
+
text: #A42B00
|
|
30
|
+
),
|
|
31
|
+
blue: (
|
|
32
|
+
main: #D1E9FF,
|
|
33
|
+
hover: #DEEFFF,
|
|
34
|
+
border: #42A5FF,
|
|
35
|
+
text: #003E77
|
|
36
|
+
),
|
|
37
|
+
cyan: (
|
|
38
|
+
main: #DBF8FF,
|
|
39
|
+
hover: #E5FAFF,
|
|
40
|
+
border: #42D8FF,
|
|
41
|
+
text: #006681
|
|
42
|
+
),
|
|
43
|
+
raspberry: (
|
|
44
|
+
main: #EBD6DB,
|
|
45
|
+
hover: #F1E1E5,
|
|
46
|
+
border: #711A2E,
|
|
47
|
+
text: #4B0011
|
|
48
|
+
),
|
|
49
|
+
yellow: (
|
|
50
|
+
main: #FFFCCB,
|
|
51
|
+
hover: #FFFDDA,
|
|
52
|
+
border: #FFF000,
|
|
53
|
+
text: #847700
|
|
54
|
+
),
|
|
55
|
+
wine: (
|
|
56
|
+
main: #EDD3E5,
|
|
57
|
+
hover: #F2DFEC,
|
|
58
|
+
border: #9D4280,
|
|
59
|
+
text: #680047
|
|
60
|
+
),
|
|
61
|
+
green: (
|
|
62
|
+
main: #CFF1DD,
|
|
63
|
+
hover: #DCF5E7,
|
|
64
|
+
border: #2EB265,
|
|
65
|
+
text: #005D27
|
|
66
|
+
),
|
|
67
|
+
primary: (
|
|
68
|
+
main: #C0E5C7,
|
|
69
|
+
hover: #EFFAF1,
|
|
70
|
+
border: #42B963,
|
|
71
|
+
text: #003A0C
|
|
72
|
+
),
|
|
73
|
+
red: (
|
|
74
|
+
main: #FFE5E5,
|
|
75
|
+
hover: #FFD9D9,
|
|
76
|
+
border: #FF4D4D,
|
|
77
|
+
text: #8B0000
|
|
78
|
+
),
|
|
79
|
+
);
|
|
80
|
+
|
|
81
|
+
--mdc-chip-container-shape-radius: 8px !important;
|
|
82
|
+
--mdc-chip-label-text-line-height: 16px !important;
|
|
83
|
+
--mdc-chip-label-text-size: 11px !important;
|
|
84
|
+
--mdc-chip-label-text-weight: 700 !important;
|
|
85
|
+
--mdc-chip-label-text-tracking: 0.3 !important;
|
|
86
|
+
--mdc-chip-outline-width: 0 !important;
|
|
87
|
+
--mdc-chip-container-height: 32px !important;
|
|
88
|
+
|
|
89
|
+
@each $type, $value in $types {
|
|
90
|
+
.label_#{$type} {
|
|
91
|
+
--mdc-chip-elevated-container-color: #{map.get($value, "main")};
|
|
92
|
+
--mdc-chip-outline-color: #{map.get($value, "border")};
|
|
93
|
+
--mdc-chip-label-text-color: #{map.get($value, "text")};
|
|
94
|
+
|
|
95
|
+
mat-icon {
|
|
96
|
+
width: 18px;
|
|
97
|
+
height: 18px;
|
|
98
|
+
font-size: 18px;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.mat-mdc-chip.small {
|
|
104
|
+
// TODO need to review
|
|
105
|
+
--mdc-chip-container-height: 28px !important;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.trailing-icon {
|
|
109
|
+
.mat-mdc-standard-chip .mdc-evolution-chip__action--primary {
|
|
110
|
+
// Chips with trailing icon have -4 right padding per Figma
|
|
111
|
+
padding-right: 8px;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.mat-mdc-chip.bordered {
|
|
116
|
+
--mdc-chip-outline-width: 2.5px !important;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
}
|
|
@@ -0,0 +1,248 @@
|
|
|
1
|
+
// Import Material theming
|
|
2
|
+
@use '@angular/material' as mat;
|
|
3
|
+
@import "./color_themes.scss";
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
body {
|
|
7
|
+
--mat-option-hover-state-layer-color: #{mat.get-theme-color($m3-light-theme, primary, 99)} !important;
|
|
8
|
+
--mat-option-selected-state-layer-color: #{mat.get-theme-color($m3-light-theme, primary, 99)} !important;
|
|
9
|
+
--mat-option-focus-state-layer-color: #{mat.get-theme-color($m3-light-theme, primary, 99)} !important;
|
|
10
|
+
--mat-select-trigger-text-line-height: 20px !important;
|
|
11
|
+
--mat-select-trigger-text-size: 13px !important;
|
|
12
|
+
--mat-select-trigger-text-weight: 500 !important;
|
|
13
|
+
--mat-select-trigger-text-tracking: 0.2px !important;
|
|
14
|
+
--mat-select-enabled-trigger-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)} !important;
|
|
15
|
+
--mat-full-pseudo-checkbox-unselected-icon-color: #{mat.get-theme-color($m3-light-theme, primary, 80)} !important;
|
|
16
|
+
--mat-select-placeholder-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)} !important;
|
|
17
|
+
--mat-option-selected-state-label-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)} !important;
|
|
18
|
+
--mat-option-label-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)} !important;
|
|
19
|
+
|
|
20
|
+
.new-mat-autocomplete {
|
|
21
|
+
.mat-mdc-form-field {
|
|
22
|
+
.mat-mdc-form-field-icon-suffix>.mat-icon {
|
|
23
|
+
padding-left: 0;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
.select-arrow {
|
|
27
|
+
&.open {
|
|
28
|
+
transform: rotate(180deg);
|
|
29
|
+
padding-left: 12px !important;
|
|
30
|
+
padding-right: 0 !important;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.mat-mdc-select-arrow {
|
|
35
|
+
display: none;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
position: relative;
|
|
39
|
+
width: 100%;
|
|
40
|
+
// Search input container
|
|
41
|
+
.search-input {
|
|
42
|
+
position: relative;
|
|
43
|
+
width: 100%;
|
|
44
|
+
|
|
45
|
+
input {
|
|
46
|
+
width: 100%;
|
|
47
|
+
height: 40px;
|
|
48
|
+
padding: 8px 40px 8px 36px !important;
|
|
49
|
+
border: 1px solid #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
|
|
50
|
+
border-radius: 4px;
|
|
51
|
+
font-size: 13px;
|
|
52
|
+
line-height: 24px;
|
|
53
|
+
letter-spacing: 0.5px;
|
|
54
|
+
color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
|
|
55
|
+
background: white;
|
|
56
|
+
|
|
57
|
+
&:disabled {
|
|
58
|
+
border: 1px solid #{mat.get-theme-color($m3-light-theme, tertiary, 99)};
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
&:focus {
|
|
62
|
+
border-color: #0060DF;
|
|
63
|
+
border-width: 3px;
|
|
64
|
+
outline: none;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&:hover:not(:focus):not(:disabled) {
|
|
68
|
+
border-color: #{mat.get-theme-color($m3-light-theme, tertiary, 70)};
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
&::placeholder {
|
|
72
|
+
color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)};
|
|
73
|
+
font-size: 13px;
|
|
74
|
+
font-weight: 500;
|
|
75
|
+
line-height: 20px;
|
|
76
|
+
letter-spacing: 0.2px;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
// Search icon
|
|
81
|
+
.search-icon {
|
|
82
|
+
position: absolute;
|
|
83
|
+
left: 50px;
|
|
84
|
+
top: 57%;
|
|
85
|
+
transform: translateY(-50%);
|
|
86
|
+
color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)};
|
|
87
|
+
|
|
88
|
+
mat-icon {
|
|
89
|
+
font-size: 20px;
|
|
90
|
+
width: 20px;
|
|
91
|
+
height: 20px;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
// Dropdown arrow
|
|
96
|
+
app-icon-button {
|
|
97
|
+
position: absolute;
|
|
98
|
+
right: 0;
|
|
99
|
+
top: 50%;
|
|
100
|
+
transform: translateY(-50%);
|
|
101
|
+
color: #{mat.get-theme-color($m3-light-theme, tertiary, 50)};
|
|
102
|
+
|
|
103
|
+
&.rotated {
|
|
104
|
+
transform: translateY(-50%) rotate(180deg);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
&.readonly-color {
|
|
108
|
+
opacity: 0.5;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
//// Placeholder and selected value
|
|
114
|
+
.custom-placeholder {
|
|
115
|
+
position: absolute;
|
|
116
|
+
top: 28px;
|
|
117
|
+
left: 17px;
|
|
118
|
+
font-size: 13px;
|
|
119
|
+
color: #647081;
|
|
120
|
+
pointer-events: none;
|
|
121
|
+
|
|
122
|
+
&.custom-value {
|
|
123
|
+
color: #{mat.get-theme-color($m3-light-theme, tertiary, 30)};
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
// Error state
|
|
128
|
+
.mat-mdc-form-field-error {
|
|
129
|
+
//color: #{mat.get-theme-color($m3-light-theme, error, 40)};
|
|
130
|
+
animation: mat-form-field-animation 900ms cubic-bezier(0.0, 0.0, 0.2, 1);
|
|
131
|
+
position: absolute;
|
|
132
|
+
left: 16px;
|
|
133
|
+
font-weight: 500;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
@keyframes mat-form-field-animation {
|
|
137
|
+
from {
|
|
138
|
+
opacity: 0;
|
|
139
|
+
transform: translateY(-0.5em);
|
|
140
|
+
}
|
|
141
|
+
to {
|
|
142
|
+
opacity: 1;
|
|
143
|
+
transform: translateY(0);
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
// Hide mat option checkbox when it doesnt have multiple state
|
|
150
|
+
.mat-mdc-option:not(.mat-mdc-option-multiple) {
|
|
151
|
+
.mat-pseudo-checkbox {
|
|
152
|
+
display: none !important;
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.mat-select-with-search {
|
|
157
|
+
// Hidden select element
|
|
158
|
+
.mat-mdc-form-field {
|
|
159
|
+
.mat-mdc-select {
|
|
160
|
+
opacity: 0;
|
|
161
|
+
position: absolute;
|
|
162
|
+
width: 100%;
|
|
163
|
+
height: 0;
|
|
164
|
+
top: 25px;
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.search-input {
|
|
169
|
+
position: absolute;
|
|
170
|
+
input {
|
|
171
|
+
padding-left: 10px;
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
.mat-mdc-select {
|
|
175
|
+
visibility: hidden !important;
|
|
176
|
+
display: block;
|
|
177
|
+
height: 0;
|
|
178
|
+
}
|
|
179
|
+
.custom-value {
|
|
180
|
+
color: unset;
|
|
181
|
+
}
|
|
182
|
+
.custom_drop_down_icon {
|
|
183
|
+
position: absolute;
|
|
184
|
+
height: 10px;
|
|
185
|
+
width: 10px;
|
|
186
|
+
right: 10px;
|
|
187
|
+
top: 45px;
|
|
188
|
+
}
|
|
189
|
+
.close_dropdown_icon {
|
|
190
|
+
transform: rotate(180deg);
|
|
191
|
+
}
|
|
192
|
+
& app-error-message {
|
|
193
|
+
& .text {
|
|
194
|
+
margin-top: 40px;
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.empty_selection_state {
|
|
200
|
+
height: 142px !important;
|
|
201
|
+
justify-content: center !important;
|
|
202
|
+
padding: 0 56px;
|
|
203
|
+
background: #F7FDFC;
|
|
204
|
+
pointer-events: auto !important;
|
|
205
|
+
|
|
206
|
+
span {
|
|
207
|
+
width: 100%;
|
|
208
|
+
margin: unset !important;
|
|
209
|
+
opacity: 1 !important;
|
|
210
|
+
}
|
|
211
|
+
.mat-pseudo-checkbox {
|
|
212
|
+
display: none;
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
.empty_selection_state.mdc-list-item--disabled {
|
|
216
|
+
opacity: 1 !important;
|
|
217
|
+
min-height: 100px !important;
|
|
218
|
+
span {
|
|
219
|
+
font-size: unset !important;
|
|
220
|
+
color: unset !important;
|
|
221
|
+
}
|
|
222
|
+
.actions_and_tile > span {
|
|
223
|
+
display: inline-block;
|
|
224
|
+
color: #8A8383 !important;
|
|
225
|
+
width: 100%;
|
|
226
|
+
text-align: center;
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.option_loading {
|
|
231
|
+
.mat-pseudo-checkbox {
|
|
232
|
+
display: none;
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.mat-mdc-option {
|
|
237
|
+
min-height: 40px !important;
|
|
238
|
+
padding: 10px 12px !important;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.mat-mdc-option {
|
|
242
|
+
font-size: 13px;
|
|
243
|
+
font-style: normal;
|
|
244
|
+
font-weight: 500;
|
|
245
|
+
line-height: 20px;
|
|
246
|
+
letter-spacing: 0.2px;
|
|
247
|
+
}
|
|
248
|
+
}
|
package/theme/_menu.scss
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
@use '@angular/material' as mat;
|
|
2
|
+
@import "./color_themes.scss";
|
|
3
|
+
|
|
4
|
+
.mat-mdc-menu-panel {
|
|
5
|
+
border: 1px solid mat.get-theme-color($m3-light-theme, tertiary, 90) !important;
|
|
6
|
+
--mat-app-elevation-shadow-level-2: 0px !important;
|
|
7
|
+
--mat-menu-item-hover-state-layer-color: #{mat.get-theme-color($m3-light-theme, primary, 98)} !important;
|
|
8
|
+
}
|
|
9
|
+
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
@use '@angular/material' as mat;
|
|
2
|
+
@import "./color_themes.scss";
|
|
3
|
+
|
|
4
|
+
body {
|
|
5
|
+
.readonly-field {
|
|
6
|
+
--mdc-outlined-text-field-hover-outline-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
|
|
7
|
+
--mdc-outlined-text-field-focus-outline-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
|
|
8
|
+
--mdc-outlined-text-field-focus-outline-width: 1px;
|
|
9
|
+
--mdc-outlined-text-field-error-focus-outline-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
|
|
10
|
+
--mdc-outlined-text-field-error-outline-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
|
|
11
|
+
--mdc-outlined-text-field-error-hover-outline-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
|
|
12
|
+
--mat-select-disabled-trigger-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
|
|
13
|
+
--mat-select-placeholder-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
|
|
14
|
+
--mdc-outlined-text-field-disabled-input-text-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)};
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.readonly-color {
|
|
18
|
+
color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)} !important;
|
|
19
|
+
.mat-mdc-icon-button.tonal mat-icon {
|
|
20
|
+
color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)} !important;
|
|
21
|
+
}
|
|
22
|
+
--mdc-outlined-text-field-input-text-placeholder-color: #{mat.get-theme-color($m3-light-theme, tertiary, 90)} !important;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.mat-mdc-form-field-icon-prefix {
|
|
26
|
+
padding: 0;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
:root{
|
|
2
|
+
--Error-Background: #950E2B;
|
|
3
|
+
--error30: #B41231;
|
|
4
|
+
--error60: #DE4558;
|
|
5
|
+
--neutral20: #30353D;
|
|
6
|
+
--neutral30: #424954;
|
|
7
|
+
--neutral50: #647081;
|
|
8
|
+
--neutral80: #BBBFC7;
|
|
9
|
+
--neutral90: #D7D9DE;
|
|
10
|
+
--neutral99: #F9F9FC;
|
|
11
|
+
--primary40: #008B33;
|
|
12
|
+
--primary99: #EFFAF1;
|
|
13
|
+
--secondary25: #1F4085;
|
|
14
|
+
--secondary50: #4364A6;
|
|
15
|
+
--secondary70: #718ECB;
|
|
16
|
+
--secondary80: #97B0E3;
|
|
17
|
+
--secondary90: #C1D2F5;
|
|
18
|
+
--secondary95: #DDE7FC;
|
|
19
|
+
--secondary99: #EEF4FE;
|
|
20
|
+
}
|
package/theme.scss
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
@use '@angular/material' as mat;
|
|
2
|
+
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
|
|
3
|
+
|
|
4
|
+
@import "./theme/buttons.scss";
|
|
5
|
+
@import "./theme/variables/colors.scss";
|
|
6
|
+
@import "./theme/label.scss";
|
|
7
|
+
@import "./theme/icon-button.scss";
|
|
8
|
+
@import "./theme/color_themes.scss";
|
|
9
|
+
@import "./theme/date_picker.scss";
|
|
10
|
+
@import "./theme/text_input.scss";
|
|
11
|
+
@import "./theme/form_fields.scss";
|
|
12
|
+
@import "./theme/mat-selects.scss";
|
|
13
|
+
@import "./theme/menu.scss";
|
|
14
|
+
|
|
15
|
+
@include mat.core();
|
|
16
|
+
|
|
17
|
+
body {
|
|
18
|
+
// BASE CSS PROPERTIES
|
|
19
|
+
margin: 0;
|
|
20
|
+
font-family: "Noto Sans";
|
|
21
|
+
font-style: normal;
|
|
22
|
+
font-size: 12px;
|
|
23
|
+
|
|
24
|
+
@include mat.core-theme($m3-light-theme);
|
|
25
|
+
@include mat.all-component-themes($m3-light-theme);
|
|
26
|
+
@include mat.color-variants-backwards-compatibility($m3-light-theme);
|
|
27
|
+
@include mat.form-field-theme($m3-light-theme, $color-variant: secondary);
|
|
28
|
+
.new-mat-autocomplete {
|
|
29
|
+
@include mat.button-density(-3);
|
|
30
|
+
};
|
|
31
|
+
}
|