@igo2/sdg-core 1.0.0 → 1.1.0-next.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.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/src/style/overrides/material/_form-field.scss +133 -14
  3. package/src/style/overrides/material/_index.scss +2 -2
  4. package/src/style/overrides/material/_select.scss +74 -0
  5. package/src/style/overrides/material/_input.scss +0 -5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@igo2/sdg-core",
3
- "version": "1.0.0",
3
+ "version": "1.1.0-next.1",
4
4
  "license": "LiLiQ-R",
5
5
  "repository": {
6
6
  "type": "git",
package/src/style/overrides/material/_form-field.scss CHANGED
@@ -1,20 +1,139 @@
1
- @use 'sass:map';
2
1
  @use '@angular/material' as mat;
3
- @use '../../../tokens/sys-colors';
4
2
 
5
3
  @mixin overrides() {
6
- .mat-mdc-text-field-wrapper,
7
- .mdc-notched-outline__leading,
8
- .mdc-notched-outline__trailing {
9
- border-radius: 0 !important;
4
+ .mat-mdc-form-field {
5
+ $blue-dark: var(--sdg-color-blue-dark);
6
+ $grey-medium: var(--sdg-color-grey-medium);
7
+ $red-normal: var(--sdg-color-red-normal);
8
+
9
+ $text-font: var(--sdg-font-family-text);
10
+ $text-line-height: var(--sdg-line-height-md);
11
+ $text-size: var(--sdg-font-size-md);
12
+
13
+ max-width: 100%;
14
+
15
+ @include mat.form-field-density(-4);
16
+
17
+ @include mat.form-field-overrides(
18
+ (
19
+ outlined-outline-width: 1px,
20
+ outlined-outline-color: $grey-medium,
21
+ outlined-disabled-input-text-color: $grey-medium,
22
+ outlined-disabled-outline-color: $grey-medium,
23
+ outlined-error-hover-outline-color: $red-normal,
24
+ outlined-focus-outline-width: 2px,
25
+ outlined-focus-outline-color: $blue-dark,
26
+ outlined-hover-outline-color: $grey-medium,
27
+ outlined-input-text-color: $blue-dark,
28
+ outlined-input-text-placeholder-color: $grey-medium,
29
+ outlined-container-shape: 0,
30
+ //
31
+ disabled-input-text-placeholder-color: $grey-medium,
32
+ //
33
+ error-text-color: $red-normal,
34
+ //
35
+ focus-state-layer-opacity: 0,
36
+ //
37
+ hover-state-layer-opacity: 0,
38
+ //
39
+ state-layer-color: transparent,
40
+ //
41
+ container-text-font: $text-font,
42
+ container-text-line-height: $text-line-height,
43
+ container-text-size: $text-size
44
+ )
45
+ );
46
+
47
+ &.mat-form-field-disabled {
48
+ .mdc-text-field {
49
+ background-color: var(--sdg-color-grey-pale);
50
+ }
51
+
52
+ mat-hint {
53
+ color: var(--sdg-color-grey-normal) !important;
54
+ }
55
+ }
56
+
57
+ .mdc-text-field {
58
+ padding: 0 8px;
59
+
60
+ &--focused {
61
+ outline: 2px solid var(--sdg-color-blue-light);
62
+ }
63
+
64
+ &--disabled {
65
+ background-color: var(--sdg-color-grey-pale);
66
+ }
67
+ }
68
+
69
+ &[xl] {
70
+ width: 825px;
71
+ }
72
+
73
+ &[lg],
74
+ &[multi] {
75
+ width: 528px;
76
+ }
77
+
78
+ &[md] {
79
+ width: 249px;
80
+ }
81
+
82
+ &[sm] {
83
+ width: 156px;
84
+ }
85
+
86
+ &[xs] {
87
+ width: 63px;
88
+ }
89
+
90
+ .mat-mdc-form-field-subscript-wrapper {
91
+ .mat-mdc-form-field-hint-wrapper {
92
+ padding: 0;
93
+
94
+ mat-hint {
95
+ padding-top: 4px;
96
+ font-family: $text-font;
97
+ font-weight: 400;
98
+ font-size: var(--sdg-font-size-sm);
99
+ line-height: var(--sdg-line-height-sm);
100
+ color: var(--sdg-color-grey-dark);
101
+ }
102
+ }
103
+ }
104
+
105
+ .mat-mdc-form-field-error-wrapper {
106
+ padding: 0;
107
+
108
+ mat-error {
109
+ display: flex;
110
+ align-items: center;
111
+ column-gap: 8px;
112
+ padding-top: 8px;
113
+ font-family: $text-font;
114
+ font-weight: 600;
115
+ font-size: $text-size;
116
+ line-height: $text-line-height;
117
+
118
+ mat-icon {
119
+ font-size: 24px;
120
+ width: 24px;
121
+ height: 24px;
122
+ }
123
+ }
124
+ }
10
125
  }
11
126
 
12
- @include mat.form-field-overrides(
13
- (
14
- outlined-outline-color: rgba(
15
- map.get(sys-colors.$light-colors, 'black'),
16
- 0.38
17
- )
18
- )
19
- );
127
+ .mat-mdc-input-element {
128
+ &::-webkit-scrollbar {
129
+ background-color: transparent;
130
+ width: 8px;
131
+ height: auto;
132
+ }
133
+
134
+ &::-webkit-scrollbar-thumb {
135
+ background: var(--sdg-color-blue-piv);
136
+ border-radius: 4px;
137
+ }
138
+ }
20
139
  }
package/src/style/overrides/material/_index.scss CHANGED
@@ -5,7 +5,7 @@
5
5
  @use './divider';
6
6
  @use './form-field';
7
7
  @use './icon';
8
- @use './input';
8
+ @use './select';
9
9
  @use './sidenav';
10
10
  @use './radio-button';
11
11
  @use './tab';
@@ -16,9 +16,9 @@
16
16
  @include chip.overrides();
17
17
  @include dialog.overrides();
18
18
  @include divider.overrides();
19
+ @include select.overrides();
19
20
  @include form-field.overrides();
20
21
  @include icon.overrides();
21
- @include input.overrides();
22
22
  @include sidenav.overrides();
23
23
  @include radio-button.overrides();
24
24
  @include tab.overrides();
package/src/style/overrides/material/_select.scss ADDED
@@ -0,0 +1,74 @@
1
+ @use '@angular/material' as mat;
2
+
3
+ @mixin overrides() {
4
+ $blue-dark: var(--sdg-color-blue-dark);
5
+ $blue-piv: var(--sdg-color-blue-piv);
6
+ $grey-medium: var(--sdg-color-grey-medium);
7
+
8
+ $text-font: var(--sdg-font-family-text);
9
+ $text-line-height: var(--sdg-line-height-md);
10
+ $text-size: var(--sdg-font-size-md);
11
+
12
+ .mat-mdc-form-field {
13
+ @include mat.select-overrides(
14
+ (
15
+ enabled-trigger-text-color: $blue-dark,
16
+ enabled-arrow-color: $blue-piv,
17
+ //
18
+ disabled-trigger-text-color: $grey-medium,
19
+ disabled-arrow-color: var(--sdg-color-grey-normal),
20
+ //
21
+ placeholder-text-color: $grey-medium,
22
+ //
23
+ trigger-text-font: $text-font,
24
+ trigger-text-line-height: $text-line-height,
25
+ trigger-text-size: $text-size
26
+ )
27
+ );
28
+ }
29
+
30
+ .mat-mdc-select-panel {
31
+ @include mat.select-overrides(
32
+ (
33
+ container-elevation-shadow: none,
34
+ //
35
+ panel-background-color: white
36
+ )
37
+ );
38
+
39
+ padding: 0 !important;
40
+ border: 1px solid $grey-medium;
41
+ border-radius: 0 !important;
42
+
43
+ .mat-mdc-option {
44
+ min-height: 0;
45
+ padding: 8px;
46
+
47
+ .mdc-list-item__primary-text {
48
+ color: $blue-dark;
49
+ font-family: $text-font;
50
+ font-size: $text-size;
51
+ line-height: $text-line-height;
52
+ }
53
+
54
+ &:hover {
55
+ background-color: var(--sdg-color-grey-pale);
56
+ }
57
+
58
+ &-active {
59
+ background-color: var(--sdg-color-blue-pale) !important;
60
+ }
61
+ }
62
+
63
+ &::-webkit-scrollbar {
64
+ background-color: transparent;
65
+ width: 8px;
66
+ height: auto;
67
+ }
68
+
69
+ &::-webkit-scrollbar-thumb {
70
+ background: $blue-piv;
71
+ border-radius: 4px;
72
+ }
73
+ }
74
+ }
package/src/style/overrides/material/_input.scss DELETED
@@ -1,5 +0,0 @@
1
- @mixin overrides() {
2
- .mat-mdc-input-element {
3
- color: var(--sdg-color-grey-medium) !important;
4
- }
5
- }