@igo2/sdg-theme 2.0.0-next.10 → 2.0.0-next.11

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.
Files changed (3) hide show
  1. package/package.json +2 -2
  2. package/src/material/_checkbox.scss +38 -48
  3. package/src/material/_radio-button.scss +36 -58
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@igo2/sdg-theme",
3
- "version": "2.0.0-next.10",
3
+ "version": "2.0.0-next.11",
4
4
  "license": "LiLiQ-R",
5
5
  "repository": {
6
6
  "type": "git",
@@ -22,7 +22,7 @@
22
22
  },
23
23
  "peerDependencies": {
24
24
  "@angular/material": "^21.0.0",
25
- "@igo2/sdg-core": "^2.0.0-next.10"
25
+ "@igo2/sdg-core": "^2.0.0-next.11"
26
26
  },
27
27
  "dependencies": {
28
28
  "tslib": "^2.6.0"
package/src/material/_checkbox.scss CHANGED
@@ -8,101 +8,96 @@
8
8
 
9
9
  $base-size: 8px;
10
10
  $checkbox-size: calc($base-size * 3);
11
- $size-with-padding: var(--mat-checkbox-state-layer-size);
12
11
 
13
12
  @include mat.checkbox-overrides(
14
13
  (
15
14
  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
-
15
+ label-text-line-height: var(--sdg-line-height-md),
16
+ label-text-color: var(--sdg-color-text),
17
+ label-text-font: var(--sdg-font-family-text),
18
+ label-text-weight: var(--sdg-font-weight-regular),
19
+ label-text-tracking: 0,
20
+ //
20
21
  disabled-label-color: $disabled-color,
21
22
  disabled-unselected-icon-color: $disabled-color,
22
23
  disabled-selected-checkmark-color: var(--sdg-color-grey-pale),
23
24
  disabled-selected-icon-color: $disabled-color,
24
-
25
+ //
25
26
  unselected-icon-color: $unselected-color,
26
27
  unselected-hover-icon-color: $unselected-color,
27
28
  unselected-focus-icon-color: $selected-color,
28
-
29
+ //
29
30
  unselected-hover-state-layer-opacity: 0,
30
31
  unselected-focus-state-layer-opacity: 0,
31
32
  unselected-pressed-state-layer-opacity: 0,
32
-
33
+ //
33
34
  unselected-hover-state-layer-color: transparent,
34
35
  unselected-focus-state-layer-color: transparent,
35
36
  unselected-pressed-state-layer-color: transparent,
36
-
37
+ //
38
+ selected-checkmark-color: var(--sdg-color-white),
39
+ //
37
40
  selected-icon-color: $selected-color,
38
41
  selected-hover-icon-color: $selected-color,
39
42
  selected-focus-icon-color: $selected-color,
40
43
  selected-pressed-icon-color: $selected-color,
41
-
44
+ //
42
45
  selected-hover-state-layer-opacity: 0,
43
46
  selected-focus-state-layer-opacity: 0,
44
47
  selected-pressed-state-layer-opacity: 0,
45
-
48
+ //
46
49
  selected-hover-state-layer-color: transparent,
47
50
  selected-focus-state-layer-color: transparent,
48
51
  selected-pressed-state-layer-color: transparent
49
52
  )
50
53
  );
51
54
 
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
- }
55
+ margin-left: calc($checkbox-size * -1 / 2);
61
56
 
62
57
  .mdc-checkbox {
63
58
  height: $checkbox-size;
64
59
  width: $checkbox-size;
65
- flex-basis: $checkbox-size;
60
+ flex: 0 0 $checkbox-size;
61
+
62
+ .mdc-checkbox__native-control {
63
+ top: calc($base-size / 2);
64
+ left: calc($base-size / 2);
65
+ right: calc($base-size / 2);
66
+
67
+ &:focus:checked ~ .mdc-checkbox__background {
68
+ border-color: $unselected-color;
69
+ }
70
+ }
66
71
 
67
72
  .mdc-checkbox__background {
68
73
  height: $checkbox-size;
69
74
  width: $checkbox-size;
70
75
  border-radius: 0px;
71
- }
72
- }
73
76
 
74
- .mat-mdc-checkbox-touch-target {
75
- height: $size-with-padding;
76
- width: $size-with-padding;
77
+ .mdc-checkbox__checkmark {
78
+ transform: scale(0.85);
79
+ }
80
+ }
77
81
  }
78
82
 
79
83
  .mdc-label {
80
84
  padding-left: 0;
81
- transform: translateY(
82
- 1px
83
- ); // visually center the label with the radio button
85
+ transform: translateY(1px); // visually center the label with the checkbox
84
86
  }
85
87
 
86
88
  &[compact] {
87
89
  $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
90
 
102
91
  .mdc-checkbox {
103
92
  height: $checkbox-size;
104
93
  width: $checkbox-size;
105
- flex-basis: $checkbox-size;
94
+ flex: 0 0 $checkbox-size;
95
+
96
+ .mdc-checkbox__native-control {
97
+ top: 0;
98
+ left: 0;
99
+ right: 0;
100
+ }
106
101
 
107
102
  .mdc-checkbox__background {
108
103
  height: $checkbox-size;
@@ -110,11 +105,6 @@
110
105
  border-width: 1px;
111
106
  }
112
107
  }
113
-
114
- .mat-mdc-checkbox-touch-target {
115
- height: $size-with-padding;
116
- width: $size-with-padding;
117
- }
118
108
  }
119
109
  }
120
110
  }
package/src/material/_radio-button.scss CHANGED
@@ -4,7 +4,6 @@
4
4
  .mat-mdc-radio-group {
5
5
  display: flex;
6
6
  flex-flow: column;
7
- row-gap: 16px;
8
7
  }
9
8
 
10
9
  .mat-mdc-radio-button {
@@ -12,113 +11,92 @@
12
11
  $unselected-color: var(--sdg-color-blue-dark);
13
12
  $selected-color: var(--sdg-color-blue-normal);
14
13
 
15
- $radio-button-size: 24px;
16
- $size-with-padding: calc($radio-button-size + 4px);
14
+ $base-size: 8px;
15
+ $radio-button-size: calc($base-size * 3);
17
16
 
18
17
  @include mat.radio-overrides(
19
18
  (
20
19
  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
-
20
+ label-text-line-height: var(--sdg-line-height-md),
21
+ label-text-color: var(--sdg-color-text),
22
+ label-text-font: var(--sdg-font-family-text),
23
+ label-text-weight: var(--sdg-font-weight-regular),
24
+ label-text-tracking: 0,
25
+ //
25
26
  ripple-color: transparent,
26
27
  checked-ripple-color: transparent,
27
-
28
+ //
28
29
  disabled-label-color: $disabled-color,
29
30
  disabled-unselected-icon-color: $disabled-color,
30
31
  disabled-unselected-icon-opacity: 1,
31
32
  disabled-selected-icon-color: $disabled-color,
32
33
  disabled-selected-icon-opacity: 1,
33
-
34
+ //
34
35
  unselected-icon-color: $unselected-color,
35
36
  unselected-hover-icon-color: $unselected-color,
36
37
  unselected-focus-icon-color: $selected-color,
37
38
  unselected-pressed-icon-color: $selected-color,
38
-
39
+ //
39
40
  selected-icon-color: $selected-color,
40
41
  selected-hover-icon-color: $selected-color,
41
42
  selected-focus-icon-color: $selected-color,
42
- selected-pressed-icon-color: $selected-color,
43
-
44
- state-layer-size: $size-with-padding
43
+ selected-pressed-icon-color: $selected-color
45
44
  )
46
45
  );
47
46
 
47
+ margin-left: calc($radio-button-size * -1 / 2);
48
+
48
49
  .mdc-radio {
49
50
  height: $radio-button-size;
50
51
  width: $radio-button-size;
51
- padding: calc(
52
- (var(--mat-radio-state-layer-size, 40px) - $radio-button-size) / 2
53
- );
52
+ flex: 0 0 $radio-button-size;
54
53
 
55
- .mdc-radio__native-control:checked
56
- + .mdc-radio__background
57
- > .mdc-radio__inner-circle {
58
- transform: scale(0.6);
54
+ .mdc-radio__native-control {
55
+ top: calc($base-size / 2);
56
+ left: calc($base-size / 2);
57
+ right: calc($base-size / 2);
58
+
59
+ &:checked + .mdc-radio__background > .mdc-radio__inner-circle {
60
+ transform: scale(0.6);
61
+ }
59
62
  }
60
63
 
61
64
  .mdc-radio__background {
62
65
  height: $radio-button-size;
63
66
  width: $radio-button-size;
64
-
65
- .mdc-radio__inner-circle {
66
- border-width: calc($radio-button-size / 2);
67
- }
68
67
  }
69
68
  }
70
69
 
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
- }
70
+ .mdc-label {
71
+ padding: 0;
72
+ transform: translateY(
73
+ 1px
74
+ ); // visually center the label with the radio button
85
75
  }
86
76
 
87
77
  &[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
- );
78
+ $radio-button-size: calc($base-size * 2);
96
79
 
97
80
  .mdc-radio {
98
81
  height: $radio-button-size;
99
82
  width: $radio-button-size;
100
- padding: calc(
101
- (var(--mat-radio-state-layer-size, 40px) - $radio-button-size) / 2
102
- );
83
+ flex: 0 0 $radio-button-size;
84
+
85
+ .mdc-radio__native-control {
86
+ top: 0;
87
+ left: 0;
88
+ right: 0;
89
+ }
103
90
 
104
91
  .mdc-radio__background {
105
92
  height: $radio-button-size;
106
93
  width: $radio-button-size;
107
94
 
108
- .mdc-radio__inner-circle {
109
- border-width: calc($radio-button-size / 2);
110
- }
111
-
112
95
  .mdc-radio__outer-circle {
113
96
  border-width: 1px;
114
97
  }
115
98
  }
116
99
  }
117
-
118
- .mat-mdc-radio-touch-target {
119
- height: $size-with-padding;
120
- width: $size-with-padding;
121
- }
122
100
  }
123
101
  }
124
102
  }