@sumaris-net/ngx-components 2.10.11 → 2.11.0

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/doc/changelog.md +3 -0
  2. package/package.json +1 -1
  3. package/src/assets/manifest.json +1 -1
  4. package/src/theme/_ngx-components.forms.scss +9 -2
  5. package/src/theme/_theme.variables.scss +100 -86
package/doc/changelog.md CHANGED
@@ -822,3 +822,6 @@ enh: Environment: add useHash property to configure Angular router to use hash U
822
822
 
823
823
  # 2.10.0
824
824
  - enh(deps): Upgrade to apollo-angular 7.1.2 and apollo 3.11 (+ fix breaking changes in graphql.service.ts)
825
+
826
+ # 2.10.2
827
+ - fix(css): Dark theme: fix checkbox style, and autocomplete panel
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@sumaris-net/ngx-components",
3
3
  "description": "SUMARiS Angular components",
4
- "version": "2.10.11",
4
+ "version": "2.11.0",
5
5
  "author": "contact@e-is.pro",
6
6
  "license": "AGPL-3.0",
7
7
  "readmeFilename": "README.md",
package/src/assets/manifest.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "ngx-sumaris-components",
3
3
  "short_name": "ngx-sumaris-components",
4
4
  "manifest_version": 1,
5
- "version": "2.10.11",
5
+ "version": "2.11.0",
6
6
  "default_locale": "fr",
7
7
  "description": "Angular components for building beautiful and responsive Apps",
8
8
  "icons": [{
package/src/theme/_ngx-components.forms.scss CHANGED
@@ -34,7 +34,7 @@ form.form-container {
34
34
 
35
35
  .mat-form-field-disabled,
36
36
  .mat-mdc-input-element:disabled {
37
- color: #{$app-form-color-disabled} !important;
37
+ color: var(--app-form-color-disabled, #{$app-form-color-disabled}) !important;
38
38
  }
39
39
 
40
40
  .mat-form-field-disabled {
@@ -188,6 +188,10 @@ form.form-container {
188
188
 
189
189
  .mat-mdc-checkbox {
190
190
  --mdc-form-field-label-text-color: var(--app-form-color);
191
+ --mdc-checkbox-unselected-icon-color: var(--app-form-color);
192
+ --mdc-checkbox-unselected-focus-icon-color: var(--app-form-color);
193
+ --mdc-checkbox-unselected-hover-icon-color: var(--app-form-color);
194
+ --mdc-checkbox-unselected-pressed-icon-color: var(--app-form-color);
191
195
  }
192
196
 
193
197
  .mat-mdc-slide-toggle {
@@ -271,12 +275,15 @@ ion-grid.form-container {
271
275
 
272
276
  // Dark mode mode
273
277
  html.dark {
278
+ div.mat-mdc-autocomplete-panel,
274
279
  div.mat-mdc-select-panel {
275
- --mat-select-panel-background-color: var(--ion-color-light);
280
+ --mat-select-panel-background-color: var(--ion-color-step-100);
281
+ --mat-autocomplete-background-color: var(--ion-color-step-100);
276
282
 
277
283
  .mat-mdc-option {
278
284
  --mat-option-label-text-color: var(--ion-text-color);
279
285
  --mat-option-selected-state-label-text-color: var(--ion-color-primary);
286
+ --mat-minimal-pseudo-checkbox-selected-checkmark-color: var(--ion-color-primary);
280
287
  color: var(--mat-option-label-text-color) !important;
281
288
  }
282
289
  }
package/src/theme/_theme.variables.scss CHANGED
@@ -6,90 +6,25 @@ html {
6
6
  @include css-variables-to-root-mobile();
7
7
  }
8
8
 
9
- &.dark {
10
-
11
- @include css-variables-to-root-dark();
12
-
13
- --ion-color-primary: #428cff;
14
- --ion-color-primary-rgb: 66, 140, 255;
15
- --ion-color-primary-contrast: #ffffff;
16
- --ion-color-primary-contrast-rgb: 255, 255, 255;
17
- --ion-color-primary-shade: #3a7be0;
18
- --ion-color-primary-tint: #5598ff;
19
-
20
- --ion-color-secondary: #75C4FD;
21
- --ion-color-secondary-rgb: 117, 196, 253;
22
- --ion-color-secondary-contrast: #ffffff;
23
- --ion-color-secondary-contrast-rgb: 255, 255, 255;
24
- --ion-color-secondary-shade: #46b0e0;
25
- --ion-color-secondary-tint: #62ceff;
26
-
27
- --ion-color-tertiary: #6a64ff;
28
- --ion-color-tertiary-rgb: 106, 100, 255;
29
- --ion-color-tertiary-contrast: #ffffff;
30
- --ion-color-tertiary-contrast-rgb: 255, 255, 255;
31
- --ion-color-tertiary-shade: #5d58e0;
32
- --ion-color-tertiary-tint: #7974ff;
33
-
34
- --ion-color-success: #2fdf75;
35
- --ion-color-success-rgb: 47, 223, 117;
36
- --ion-color-success-contrast: #000000;
37
- --ion-color-success-contrast-rgb: 0, 0, 0;
38
- --ion-color-success-shade: #29c467;
39
- --ion-color-success-tint: #44e283;
40
-
41
- --ion-color-warning: #FF6434;
42
- --ion-color-warning-rgb: 255, 100, 52;
43
- --ion-color-warning-contrast: #000000;
44
- --ion-color-warning-contrast-rgb: 0, 0, 0;
45
- --ion-color-warning-shade: #E0BB4B;
46
- --ion-color-warning-tint: #FFDA48;
47
-
48
- --ion-color-danger: #fa0021;
49
- --ion-color-danger-rgb: 255, 0, 33;
50
- --ion-color-danger-contrast: #ffffff;
51
- --ion-color-danger-contrast-rgb: 255, 255, 255;
52
- --ion-color-danger-shade: #e04055;
53
- --ion-color-danger-tint: #ff5b71;
54
-
55
- --ion-color-dark: #f4f5f8;
56
- --ion-color-dark-rgb: 244, 245, 248;
57
- --ion-color-dark-contrast: #000000;
58
- --ion-color-dark-contrast-rgb: 0, 0, 0;
59
- --ion-color-dark-shade: #d7d8da;
60
- --ion-color-dark-tint: #f5f6f9;
61
-
62
- --ion-color-medium: #989aa2;
63
- --ion-color-medium-rgb: 152, 154, 162;
64
- --ion-color-medium-contrast: #000000;
65
- --ion-color-medium-contrast-rgb: 0, 0, 0;
66
- --ion-color-medium-shade: #86888f;
67
- --ion-color-medium-tint: #a2a4ab;
68
-
69
- --ion-color-light: #222428;
70
- --ion-color-light-rgb: 34, 36, 40;
71
- --ion-color-light-contrast: #ffffff;
72
- --ion-color-light-contrast-rgb: 255, 255, 255;
73
- --ion-color-light-shade: #1e2023;
74
- --ion-color-light-tint: #383a3e;
75
-
76
- --mat-select-panel-background-color: var(--ion-color-step-100);
77
-
78
- ion-modal {
79
- --ion-background-color: var(--ion-color-step-100);
80
- --ion-toolbar-background: var(--ion-color-step-150);
81
- --ion-toolbar-border-color: var(--ion-color-step-250);
82
- }
83
-
84
- ion-alert {
85
- --ion-background-color: var(--ion-color-step-100);
86
- }
87
-
88
- ion-menu#menu {
89
- --ion-item-text-color-selected: var(--ion-color-secondary100-contrast);
90
- --ion-item-icon-color-selected: var(--ion-color-secondary100-contrast);
91
- }
92
- }
9
+ --ion-color-step-50: #f3f3f3;
10
+ --ion-color-step-100: #e7e7e7;
11
+ --ion-color-step-150: #dbdbdb;
12
+ --ion-color-step-200: #d0d0d0;
13
+ --ion-color-step-250: #c4c4c4;
14
+ --ion-color-step-300: #b8b8b8;
15
+ --ion-color-step-350: #acacac;
16
+ --ion-color-step-400: #a0a0a0;
17
+ --ion-color-step-450: #949494;
18
+ --ion-color-step-500: #898989;
19
+ --ion-color-step-550: #7d7d7d;
20
+ --ion-color-step-600: #717171;
21
+ --ion-color-step-650: #656565;
22
+ --ion-color-step-700: #595959;
23
+ --ion-color-step-750: #4d4d4d;
24
+ --ion-color-step-800: #414141;
25
+ --ion-color-step-850: #363636;
26
+ --ion-color-step-900: #2a2a2a;
27
+ --ion-color-step-950: #1e1e1e;
93
28
  }
94
29
 
95
30
  /*
@@ -98,12 +33,78 @@ html {
98
33
  */
99
34
 
100
35
  html.dark {
36
+ @include css-variables-to-root-dark();
37
+
38
+ --ion-color-primary: #428cff;
39
+ --ion-color-primary-rgb: 66, 140, 255;
40
+ --ion-color-primary-contrast: #ffffff;
41
+ --ion-color-primary-contrast-rgb: 255, 255, 255;
42
+ --ion-color-primary-shade: #3a7be0;
43
+ --ion-color-primary-tint: #5598ff;
44
+
45
+ /*--ion-color-secondary: #75C4FD;
46
+ --ion-color-secondary-rgb: 117, 196, 253;
47
+ --ion-color-secondary-contrast: #ffffff;
48
+ --ion-color-secondary-contrast-rgb: 255, 255, 255;
49
+ --ion-color-secondary-shade: #46b0e0;
50
+ --ion-color-secondary-tint: #62ceff;*/
51
+
52
+ //--ion-color-tertiary: #6a64ff;
53
+ //--ion-color-tertiary-rgb: 106, 100, 255;
54
+ //--ion-color-tertiary-contrast: #ffffff;
55
+ //--ion-color-tertiary-contrast-rgb: 255, 255, 255;
56
+ //--ion-color-tertiary-shade: #5d58e0;
57
+ //--ion-color-tertiary-tint: #7974ff;
58
+
59
+ --ion-color-success: #2fdf75;
60
+ --ion-color-success-rgb: 47, 223, 117;
61
+ --ion-color-success-contrast: #000000;
62
+ --ion-color-success-contrast-rgb: 0, 0, 0;
63
+ --ion-color-success-shade: #29c467;
64
+ --ion-color-success-tint: #44e283;
65
+
66
+ --ion-color-warning: #FF6434;
67
+ --ion-color-warning-rgb: 255, 100, 52;
68
+ --ion-color-warning-contrast: #000000;
69
+ --ion-color-warning-contrast-rgb: 0, 0, 0;
70
+ --ion-color-warning-shade: #E0BB4B;
71
+ --ion-color-warning-tint: #FFDA48;
72
+
73
+ --ion-color-danger: #fa0021;
74
+ --ion-color-danger-rgb: 255, 0, 33;
75
+ --ion-color-danger-contrast: #ffffff;
76
+ --ion-color-danger-contrast-rgb: 255, 255, 255;
77
+ --ion-color-danger-shade: #e04055;
78
+ --ion-color-danger-tint: #ff5b71;
79
+
80
+ --ion-color-dark: #f4f5f8;
81
+ --ion-color-dark-rgb: 244, 245, 248;
82
+ --ion-color-dark-contrast: #000000;
83
+ --ion-color-dark-contrast-rgb: 0, 0, 0;
84
+ --ion-color-dark-shade: #d7d8da;
85
+ --ion-color-dark-tint: #f5f6f9;
86
+
87
+ --ion-color-medium: #989aa2;
88
+ --ion-color-medium-rgb: 152, 154, 162;
89
+ --ion-color-medium-contrast: #000000;
90
+ --ion-color-medium-contrast-rgb: 0, 0, 0;
91
+ --ion-color-medium-shade: #86888f;
92
+ --ion-color-medium-tint: #a2a4ab;
93
+
94
+ --ion-color-light: #222428;
95
+ --ion-color-light-rgb: 34, 36, 40;
96
+ --ion-color-light-contrast: #ffffff;
97
+ --ion-color-light-contrast-rgb: 255, 255, 255;
98
+ --ion-color-light-shade: #1e2023;
99
+ --ion-color-light-tint: #383a3e;
100
+
101
101
  --ion-background-color: #000000;
102
102
  --ion-background-color-rgb: 0, 0, 0;
103
103
  --ion-toolbar-background: #1f1f1f;
104
104
  --ion-text-color: #ffffff;
105
105
  --ion-text-color-rgb: 255, 255, 255;
106
106
  --ion-border-color: #222222;
107
+ --ion-backdrop-color: #ffffff;
107
108
 
108
109
  --app-form-color-disabled: #949494;
109
110
  --app-form-color: var(--ion-color-light-contrast);
@@ -112,6 +113,21 @@ html.dark {
112
113
  --app-form-field-disabled-background-color: #282828;
113
114
  --app-form-field-label-color: #949494;
114
115
  --app-form-field-disabled-label-color: #7d7d7d;
116
+
117
+ ion-modal {
118
+ --ion-background-color: var(--ion-color-step-100);
119
+ --ion-toolbar-background: var(--ion-color-step-150);
120
+ --ion-toolbar-border-color: var(--ion-color-step-250);
121
+ }
122
+
123
+ ion-alert {
124
+ --ion-background-color: var(--ion-color-step-100);
125
+ }
126
+
127
+ ion-menu#menu {
128
+ --ion-item-text-color-selected: var(--ion-color-secondary100-contrast);
129
+ --ion-item-icon-color-selected: var(--ion-color-secondary100-contrast);
130
+ }
115
131
  }
116
132
 
117
133
  /*
@@ -176,9 +192,7 @@ html.md.dark {
176
192
  --ion-color-step-950: #f3f3f3;
177
193
 
178
194
  --ion-item-background: #1e1e1e;
179
-
180
195
  --ion-tab-bar-background: #1f1f1f;
181
-
182
196
  --ion-card-background: #1e1e1e;
183
197
 
184
198
  ion-menu ion-content {