@3dsource/source-ui 0.0.29 → 0.0.30
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/README.md +30 -18
- package/fesm2022/3dsource-source-ui.mjs +44 -44
- package/fesm2022/3dsource-source-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/material/checkbox.scss +102 -18
- package/styles/material/form-field.scss +256 -36
- package/styles/material/radio.scss +73 -15
- package/styles/material/select.scss +54 -36
- package/styles/material/theme.scss +307 -301
- package/styles/material/toggle.scss +82 -24
- package/styles/toastr/toastr.scss +1 -1
|
@@ -1,47 +1,105 @@
|
|
|
1
1
|
@use '@angular/material' as mat;
|
|
2
2
|
:root {
|
|
3
3
|
--matToggleShadow:
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
0 4px 12px 0 var(--src-shadow-light, rgba(148, 163, 184, 0.16)),
|
|
5
|
+
0 0 2px 0 var(--src-shadow-hard, rgba(71, 85, 105, 0.24));
|
|
6
|
+
|
|
6
7
|
@include mat.slide-toggle-overrides(
|
|
7
8
|
(
|
|
8
9
|
track-height: 24px,
|
|
9
10
|
track-width: 44px,
|
|
10
11
|
unselected-icon-size: 0,
|
|
11
12
|
selected-icon-size: 0,
|
|
12
|
-
track-outline-width:
|
|
13
|
-
|
|
14
|
-
unselected-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
unselected-
|
|
19
|
-
unselected-
|
|
20
|
-
unselected-
|
|
21
|
-
unselected-pressed-
|
|
13
|
+
track-outline-width: 1px,
|
|
14
|
+
selected-track-outline-width: 0,
|
|
15
|
+
disabled-unselected-track-outline-width: 0,
|
|
16
|
+
track-outline-color: var(--src-border-input-basic, #d1d5db),
|
|
17
|
+
handle-shape: var(--src-border-rounded-full, 9999px),
|
|
18
|
+
track-shape: var(--src-border-rounded-full, 9999px),
|
|
19
|
+
unselected-handle-color: var(--src-surface-container-main, #fff),
|
|
20
|
+
unselected-focus-handle-color: var(--src-surface-container-main, #fff),
|
|
21
|
+
unselected-hover-handle-color: var(--src-surface-container-main, #fff),
|
|
22
|
+
unselected-pressed-handle-color: var(--src-surface-container-main, #fff),
|
|
23
|
+
unselected-track-color: var(
|
|
24
|
+
--src-ui-secondary-default,
|
|
25
|
+
rgba(148, 163, 184, 0.16)
|
|
26
|
+
),
|
|
27
|
+
unselected-hover-track-color: var(
|
|
28
|
+
--src-ui-secondary-default-hover,
|
|
29
|
+
rgba(148, 163, 184, 0.08)
|
|
30
|
+
),
|
|
31
|
+
unselected-focus-track-color: var(
|
|
32
|
+
--src-ui-secondary-default,
|
|
33
|
+
rgba(148, 163, 184, 0.16)
|
|
34
|
+
),
|
|
35
|
+
unselected-pressed-track-color: var(
|
|
36
|
+
--src-ui-secondary-default,
|
|
37
|
+
rgba(148, 163, 184, 0.16)
|
|
38
|
+
),
|
|
39
|
+
disabled-unselected-track-color: var(
|
|
40
|
+
--src-ui-secondary-default,
|
|
41
|
+
rgba(148, 163, 184, 0.16)
|
|
42
|
+
),
|
|
22
43
|
with-icon-handle-size: 20px,
|
|
23
44
|
pressed-handle-size: 20px,
|
|
24
45
|
selected-handle-size: 20px,
|
|
25
46
|
|
|
26
|
-
selected-handle-color: var(--src-
|
|
27
|
-
selected-focus-handle-color: var(--src-
|
|
28
|
-
selected-hover-handle-color: var(--src-
|
|
29
|
-
selected-pressed-handle-color: var(--src-
|
|
30
|
-
selected-track-color: var(--src-
|
|
47
|
+
selected-handle-color: var(--src-surface-container-main, #fff),
|
|
48
|
+
selected-focus-handle-color: var(--src-surface-container-main, #fff),
|
|
49
|
+
selected-hover-handle-color: var(--src-surface-container-main, #fff),
|
|
50
|
+
selected-pressed-handle-color: var(--src-surface-container-main, #fff),
|
|
51
|
+
selected-track-color: var(--src-ui-accent-default, #017bff),
|
|
52
|
+
selected-focus-track-color: var(--src-ui-accent-default, #017bff),
|
|
53
|
+
selected-hover-track-color: var(--src-ui-accent-default-hover, #016fe6),
|
|
54
|
+
selected-pressed-track-color: var(--src-ui-accent-default, #017bff),
|
|
55
|
+
disabled-selected-track-color: var(
|
|
56
|
+
--src-surface-bg,
|
|
57
|
+
rgba(71, 85, 105, 0.24)
|
|
58
|
+
),
|
|
31
59
|
unselected-with-icon-handle-horizontal-margin: 0 2px,
|
|
32
60
|
selected-with-icon-handle-horizontal-margin: 0 22px,
|
|
33
61
|
handle-elevation-shadow: var(--matToggleShadow),
|
|
34
|
-
label-text-color: var(--src-color-text-default),
|
|
35
|
-
label-text-line-height: var(--src-lh-base),
|
|
36
|
-
label-text-size: var(--src-fs-base),
|
|
37
|
-
label-text-tracking: 0.005em,
|
|
38
62
|
)
|
|
39
63
|
);
|
|
40
64
|
}
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
65
|
+
|
|
66
|
+
.mat-mdc-slide-toggle {
|
|
67
|
+
.mdc-switch {
|
|
68
|
+
border-radius: var(--mat-sys-corner-full, 9999px);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.mdc-label {
|
|
72
|
+
color: var(--src-text-body-main, #111827);
|
|
73
|
+
line-height: var(--src-text-lineHeight, var(--src-font-line-sm));
|
|
74
|
+
font-size: var(--src-text-fontSize, var(--src-font-size-sm));
|
|
75
|
+
letter-spacing: 0;
|
|
76
|
+
font-weight: 500;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
.mat-internal-form-field {
|
|
80
|
+
& > label {
|
|
81
|
+
padding-left: var(--src-gap-lg, var(--src-space-3));
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
&.mdc-form-field--align-end > label {
|
|
85
|
+
padding-left: 0;
|
|
86
|
+
padding-right: var(--src-gap-lg, var(--src-space-3));
|
|
87
|
+
}
|
|
44
88
|
}
|
|
89
|
+
.mat-mdc-slide-toggle.cdk-focused {
|
|
90
|
+
--srcToggleFocusRing: 0 0 0 var(--src-shadow-focused, 4px)
|
|
91
|
+
var(--src-shadow-light, rgba(148, 163, 184, 0.16));
|
|
92
|
+
|
|
93
|
+
&.mat-mdc-slide-toggle-checked {
|
|
94
|
+
--srcToggleFocusRing: 0 0 0 var(--src-shadow-focused, 4px)
|
|
95
|
+
var(--src-shadow-accent-light, rgba(1, 123, 255, 0.16));
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.mdc-switch {
|
|
99
|
+
box-shadow: var(--srcToggleFocusRing);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
45
103
|
.mdc-switch__ripple::after {
|
|
46
104
|
display: none !important;
|
|
47
105
|
}
|