@igo2/sdg-core 1.0.0-next.86 → 1.0.0-next.88
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
@use '@angular/material' as mat;
|
|
2
|
+
|
|
3
|
+
@mixin overrides() {
|
|
4
|
+
.mat-mdc-checkbox {
|
|
5
|
+
$disabled-color: var(--sdg-color-grey-light);
|
|
6
|
+
$unselected-color: var(--sdg-color-blue-dark);
|
|
7
|
+
$selected-color: var(--sdg-color-blue-normal);
|
|
8
|
+
|
|
9
|
+
$base-size: 8px;
|
|
10
|
+
$checkbox-size: calc($base-size * 3);
|
|
11
|
+
$size-with-padding: var(--mdc-checkbox-state-layer-size);
|
|
12
|
+
|
|
13
|
+
@include mat.checkbox-overrides(
|
|
14
|
+
(
|
|
15
|
+
label-text-size: var(--sdg-font-size-md),
|
|
16
|
+
label-text-line-height: var(--sdg-font-size-md),
|
|
17
|
+
// same as font size to avoid extra space above and below
|
|
18
|
+
label-text-color: $unselected-color,
|
|
19
|
+
|
|
20
|
+
disabled-label-color: $disabled-color,
|
|
21
|
+
disabled-unselected-icon-color: $disabled-color,
|
|
22
|
+
disabled-selected-checkmark-color: var(--sdg-color-grey-pale),
|
|
23
|
+
disabled-selected-icon-color: $disabled-color,
|
|
24
|
+
|
|
25
|
+
unselected-icon-color: $unselected-color,
|
|
26
|
+
unselected-hover-icon-color: $unselected-color,
|
|
27
|
+
unselected-focus-icon-color: $selected-color,
|
|
28
|
+
|
|
29
|
+
unselected-hover-state-layer-opacity: 0,
|
|
30
|
+
unselected-focus-state-layer-opacity: 0,
|
|
31
|
+
unselected-pressed-state-layer-opacity: 0,
|
|
32
|
+
|
|
33
|
+
unselected-hover-state-layer-color: transparent,
|
|
34
|
+
unselected-focus-state-layer-color: transparent,
|
|
35
|
+
unselected-pressed-state-layer-color: transparent,
|
|
36
|
+
|
|
37
|
+
selected-icon-color: $selected-color,
|
|
38
|
+
selected-hover-icon-color: $selected-color,
|
|
39
|
+
selected-focus-icon-color: $selected-color,
|
|
40
|
+
selected-pressed-icon-color: $selected-color,
|
|
41
|
+
|
|
42
|
+
selected-hover-state-layer-opacity: 0,
|
|
43
|
+
selected-focus-state-layer-opacity: 0,
|
|
44
|
+
selected-pressed-state-layer-opacity: 0,
|
|
45
|
+
|
|
46
|
+
selected-hover-state-layer-color: transparent,
|
|
47
|
+
selected-focus-state-layer-color: transparent,
|
|
48
|
+
selected-pressed-state-layer-color: transparent
|
|
49
|
+
)
|
|
50
|
+
);
|
|
51
|
+
|
|
52
|
+
.mdc-checkbox__native-control {
|
|
53
|
+
top: calc($base-size / 2);
|
|
54
|
+
left: calc($base-size / 2);
|
|
55
|
+
right: calc($base-size / 2);
|
|
56
|
+
|
|
57
|
+
&:focus:checked ~ .mdc-checkbox__background {
|
|
58
|
+
border-color: $unselected-color;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.mdc-checkbox {
|
|
63
|
+
height: $checkbox-size;
|
|
64
|
+
width: $checkbox-size;
|
|
65
|
+
flex-basis: $checkbox-size;
|
|
66
|
+
|
|
67
|
+
.mdc-checkbox__background {
|
|
68
|
+
height: $checkbox-size;
|
|
69
|
+
width: $checkbox-size;
|
|
70
|
+
border-radius: 0px;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.mat-mdc-checkbox-touch-target {
|
|
75
|
+
height: $size-with-padding;
|
|
76
|
+
width: $size-with-padding;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.mdc-label {
|
|
80
|
+
padding-left: 0;
|
|
81
|
+
transform: translateY(
|
|
82
|
+
1px
|
|
83
|
+
); // visually center the label with the radio button
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
&[compact] {
|
|
87
|
+
$checkbox-size: calc($base-size * 2);
|
|
88
|
+
$size-with-padding: calc($checkbox-size + ($base-size * 2));
|
|
89
|
+
|
|
90
|
+
@include mat.checkbox-overrides(
|
|
91
|
+
(
|
|
92
|
+
state-layer-size: $size-with-padding
|
|
93
|
+
)
|
|
94
|
+
);
|
|
95
|
+
|
|
96
|
+
.mdc-checkbox__native-control {
|
|
97
|
+
top: 0;
|
|
98
|
+
left: 0;
|
|
99
|
+
right: 0;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.mdc-checkbox {
|
|
103
|
+
height: $checkbox-size;
|
|
104
|
+
width: $checkbox-size;
|
|
105
|
+
flex-basis: $checkbox-size;
|
|
106
|
+
|
|
107
|
+
.mdc-checkbox__background {
|
|
108
|
+
height: $checkbox-size;
|
|
109
|
+
width: $checkbox-size;
|
|
110
|
+
border-width: 1px;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.mat-mdc-checkbox-touch-target {
|
|
115
|
+
height: $size-with-padding;
|
|
116
|
+
width: $size-with-padding;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
}
|
|
@@ -1,17 +1,21 @@
|
|
|
1
1
|
@use './button';
|
|
2
|
+
@use './checkbox';
|
|
2
3
|
@use './dialog';
|
|
3
4
|
@use './divider';
|
|
4
5
|
@use './form-field';
|
|
5
6
|
@use './icon';
|
|
6
7
|
@use './input';
|
|
7
8
|
@use './sidenav';
|
|
9
|
+
@use './radio-button';
|
|
8
10
|
|
|
9
11
|
@mixin overrides() {
|
|
10
12
|
@include button.overrides();
|
|
13
|
+
@include checkbox.overrides();
|
|
11
14
|
@include dialog.overrides();
|
|
12
15
|
@include divider.overrides();
|
|
13
16
|
@include form-field.overrides();
|
|
14
17
|
@include icon.overrides();
|
|
15
18
|
@include input.overrides();
|
|
16
19
|
@include sidenav.overrides();
|
|
20
|
+
@include radio-button.overrides();
|
|
17
21
|
}
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
@use '@angular/material' as mat;
|
|
2
|
+
|
|
3
|
+
@mixin overrides() {
|
|
4
|
+
.mat-mdc-radio-group {
|
|
5
|
+
display: flex;
|
|
6
|
+
flex-flow: column;
|
|
7
|
+
row-gap: 16px;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.mat-mdc-radio-button {
|
|
11
|
+
$disabled-color: var(--sdg-color-grey-light);
|
|
12
|
+
$unselected-color: var(--sdg-color-blue-dark);
|
|
13
|
+
$selected-color: var(--sdg-color-blue-normal);
|
|
14
|
+
|
|
15
|
+
$radio-button-size: 24px;
|
|
16
|
+
$size-with-padding: calc($radio-button-size + 4px);
|
|
17
|
+
|
|
18
|
+
@include mat.radio-overrides(
|
|
19
|
+
(
|
|
20
|
+
label-text-size: var(--sdg-font-size-md),
|
|
21
|
+
label-text-line-height: var(--sdg-font-size-md),
|
|
22
|
+
// same as font size to avoid extra space above and below
|
|
23
|
+
label-text-color: $unselected-color,
|
|
24
|
+
|
|
25
|
+
ripple-color: transparent,
|
|
26
|
+
checked-ripple-color: transparent,
|
|
27
|
+
|
|
28
|
+
disabled-label-color: $disabled-color,
|
|
29
|
+
disabled-unselected-icon-color: $disabled-color,
|
|
30
|
+
disabled-unselected-icon-opacity: 1,
|
|
31
|
+
disabled-selected-icon-color: $disabled-color,
|
|
32
|
+
disabled-selected-icon-opacity: 1,
|
|
33
|
+
|
|
34
|
+
unselected-icon-color: $unselected-color,
|
|
35
|
+
unselected-hover-icon-color: $unselected-color,
|
|
36
|
+
unselected-focus-icon-color: $selected-color,
|
|
37
|
+
unselected-pressed-icon-color: $selected-color,
|
|
38
|
+
|
|
39
|
+
selected-icon-color: $selected-color,
|
|
40
|
+
selected-hover-icon-color: $selected-color,
|
|
41
|
+
selected-focus-icon-color: $selected-color,
|
|
42
|
+
selected-pressed-icon-color: $selected-color,
|
|
43
|
+
|
|
44
|
+
state-layer-size: $size-with-padding
|
|
45
|
+
)
|
|
46
|
+
);
|
|
47
|
+
|
|
48
|
+
.mdc-radio {
|
|
49
|
+
height: $radio-button-size;
|
|
50
|
+
width: $radio-button-size;
|
|
51
|
+
padding: calc(
|
|
52
|
+
(var(--mdc-radio-state-layer-size, 40px) - $radio-button-size) / 2
|
|
53
|
+
);
|
|
54
|
+
|
|
55
|
+
.mdc-radio__native-control:checked
|
|
56
|
+
+ .mdc-radio__background
|
|
57
|
+
> .mdc-radio__inner-circle {
|
|
58
|
+
transform: scale(0.6);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.mdc-radio__background {
|
|
62
|
+
height: $radio-button-size;
|
|
63
|
+
width: $radio-button-size;
|
|
64
|
+
|
|
65
|
+
.mdc-radio__inner-circle {
|
|
66
|
+
border-width: calc($radio-button-size / 2);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.mat-mdc-radio-touch-target {
|
|
72
|
+
height: $size-with-padding;
|
|
73
|
+
width: $size-with-padding;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.mdc-form-field {
|
|
77
|
+
column-gap: 8px;
|
|
78
|
+
|
|
79
|
+
.mdc-label {
|
|
80
|
+
padding: 0;
|
|
81
|
+
transform: translateY(
|
|
82
|
+
1px
|
|
83
|
+
); // visually center the label with the radio button
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
&[compact] {
|
|
88
|
+
$radio-button-size: 16px;
|
|
89
|
+
$size-with-padding: calc($radio-button-size + 4px);
|
|
90
|
+
|
|
91
|
+
@include mat.radio-overrides(
|
|
92
|
+
(
|
|
93
|
+
state-layer-size: $size-with-padding
|
|
94
|
+
)
|
|
95
|
+
);
|
|
96
|
+
|
|
97
|
+
.mdc-radio {
|
|
98
|
+
height: $radio-button-size;
|
|
99
|
+
width: $radio-button-size;
|
|
100
|
+
padding: calc(
|
|
101
|
+
(var(--mdc-radio-state-layer-size, 40px) - $radio-button-size) / 2
|
|
102
|
+
);
|
|
103
|
+
|
|
104
|
+
.mdc-radio__background {
|
|
105
|
+
height: $radio-button-size;
|
|
106
|
+
width: $radio-button-size;
|
|
107
|
+
|
|
108
|
+
.mdc-radio__inner-circle {
|
|
109
|
+
border-width: calc($radio-button-size / 2);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.mdc-radio__outer-circle {
|
|
113
|
+
border-width: 1px;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.mat-mdc-radio-touch-target {
|
|
119
|
+
height: $size-with-padding;
|
|
120
|
+
width: $size-with-padding;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
}
|