@sumaris-net/ngx-components 2.11.0 → 2.11.2
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/doc/changelog.md +5 -3
- package/esm2022/src/app/admin/users/users.mjs +3 -3
- package/esm2022/src/app/core/form/text-popover/text-popover.component.mjs +1 -1
- package/esm2022/src/app/shared/material/text/testing/text-form.testing.mjs +4 -3
- package/esm2022/src/app/shared/material/text/text-form.component.mjs +23 -11
- package/fesm2022/sumaris-net.ngx-components.mjs +27 -14
- package/fesm2022/sumaris-net.ngx-components.mjs.map +1 -1
- package/package.json +1 -1
- package/src/app/shared/material/text/text-form.component.d.ts +10 -1
- package/src/assets/manifest.json +1 -1
- package/src/theme/_ionic.globals.scss +3 -1
- package/src/theme/_material.globals.scss +1 -2
- package/src/theme/_material.scss +3 -23
- package/src/theme/_mixins.scss +38 -0
- package/src/theme/_ngx-components.forms.scss +26 -6
- package/src/theme/_ngx-components.scss +53 -8
- package/src/theme/_ngx-components.table.scss +8 -0
- package/src/theme/_theme.variables.scss +19 -48
package/package.json
CHANGED
|
@@ -3,6 +3,7 @@ import { ControlValueAccessor, FormGroupDirective, UntypedFormBuilder, UntypedFo
|
|
|
3
3
|
import { CdkTextareaAutosize } from '@angular/cdk/text-field';
|
|
4
4
|
import { AppForm } from '../../../core/form/form.class';
|
|
5
5
|
import { AppFloatLabelType } from '../../form/field.model';
|
|
6
|
+
import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
|
|
6
7
|
import * as i0 from "@angular/core";
|
|
7
8
|
export declare class TextForm extends AppForm<{
|
|
8
9
|
text: string;
|
|
@@ -22,6 +23,8 @@ export declare class TextForm extends AppForm<{
|
|
|
22
23
|
formControl: UntypedFormControl;
|
|
23
24
|
formControlName: string;
|
|
24
25
|
floatLabel: AppFloatLabelType;
|
|
26
|
+
appearance: MatFormFieldAppearance;
|
|
27
|
+
subscriptSizing: SubscriptSizing;
|
|
25
28
|
textAreaChanges: EventEmitter<string>;
|
|
26
29
|
textArea: ElementRef;
|
|
27
30
|
textInput: ElementRef;
|
|
@@ -43,5 +46,11 @@ export declare class TextForm extends AppForm<{
|
|
|
43
46
|
}): void;
|
|
44
47
|
private textFormValueChanged;
|
|
45
48
|
static ɵfac: i0.ɵɵFactoryDeclaration<TextForm, [null, null, null, { optional: true; }]>;
|
|
46
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<TextForm, "app-text-form", never, { "showError": { "alias": "showError"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "multiline": { "alias": "multiline"; "required": false; }; "autoHeight": { "alias": "autoHeight"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "validator": { "alias": "validator"; "required": false; }; "standalone": { "alias": "standalone"; "required": false; }; "formControl": { "alias": "formControl"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "floatLabel": { "alias": "floatLabel"; "required": false; }; }, { "textAreaChanges": "textAreaChanges"; }, never, ["[matError]"], false, never>;
|
|
49
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<TextForm, "app-text-form", never, { "showError": { "alias": "showError"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "multiline": { "alias": "multiline"; "required": false; }; "autoHeight": { "alias": "autoHeight"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "validator": { "alias": "validator"; "required": false; }; "standalone": { "alias": "standalone"; "required": false; }; "formControl": { "alias": "formControl"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "floatLabel": { "alias": "floatLabel"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; }; }, { "textAreaChanges": "textAreaChanges"; }, never, ["[matError]"], false, never>;
|
|
50
|
+
static ngAcceptInputType_showError: unknown;
|
|
51
|
+
static ngAcceptInputType_multiline: unknown;
|
|
52
|
+
static ngAcceptInputType_autoHeight: unknown;
|
|
53
|
+
static ngAcceptInputType_maxLength: unknown;
|
|
54
|
+
static ngAcceptInputType_autofocus: unknown;
|
|
55
|
+
static ngAcceptInputType_standalone: unknown;
|
|
47
56
|
}
|
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.11.
|
|
5
|
+
"version": "2.11.2",
|
|
6
6
|
"default_locale": "fr",
|
|
7
7
|
"description": "Angular components for building beautiful and responsive Apps",
|
|
8
8
|
"icons": [{
|
|
@@ -59,13 +59,15 @@ $background-color-rgb-value: 255, 255, 255;
|
|
|
59
59
|
$ion-toolbar-background: whitesmoke !default;
|
|
60
60
|
|
|
61
61
|
// Text color
|
|
62
|
+
$text-color-value: rgba(black, 0.87);
|
|
63
|
+
$text-color-rgb-value: 0,0,0;
|
|
64
|
+
|
|
62
65
|
$dark-primary-text: rgba(black, 0.87);
|
|
63
66
|
$dark-secondary-text: rgba(black, 0.54);
|
|
64
67
|
$dark-disabled-text: rgba(black, 0.38);
|
|
65
68
|
$light-primary-text: white;
|
|
66
69
|
$light-secondary-text: rgba(white, 0.7);
|
|
67
70
|
$light-disabled-text: rgba(white, 0.5);
|
|
68
|
-
$text-color: $dark-primary-text;
|
|
69
71
|
|
|
70
72
|
// Default General Colors
|
|
71
73
|
// --------------------------------------------------
|
|
@@ -47,7 +47,7 @@ $candy-app-accent: mat.define-palette($mat-indigo-app, A200, A100, A400);
|
|
|
47
47
|
// The warn palette is optional (defaults to red).
|
|
48
48
|
$candy-app-warn: mat.define-palette(mat.$red-palette);
|
|
49
49
|
// Create the theme object (a Sass map containing all of the palettes).
|
|
50
|
-
$candy-
|
|
50
|
+
$candy-light-theme: mat.define-light-theme((
|
|
51
51
|
color: (
|
|
52
52
|
primary: $candy-app-primary,
|
|
53
53
|
accent: $candy-app-accent,
|
|
@@ -55,7 +55,6 @@ $candy-app-theme: mat.define-light-theme((
|
|
|
55
55
|
),
|
|
56
56
|
typography: mat.define-typography-config(),
|
|
57
57
|
density: 0,
|
|
58
|
-
|
|
59
58
|
));
|
|
60
59
|
|
|
61
60
|
// --------------------------------------------------
|
package/src/theme/_material.scss
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
@use '@angular/material' as mat;
|
|
2
2
|
|
|
3
3
|
// --------------------------------------------------
|
|
4
|
-
// Standard
|
|
4
|
+
// Standard material style
|
|
5
5
|
// --------------------------------------------------
|
|
6
6
|
@include mat.core();
|
|
7
|
-
@include mat.all-component-themes($candy-
|
|
7
|
+
@include mat.all-component-themes($candy-light-theme);
|
|
8
|
+
|
|
8
9
|
|
|
9
10
|
// --------------------------------------------------
|
|
10
11
|
// Override material style
|
|
@@ -112,27 +113,6 @@
|
|
|
112
113
|
}
|
|
113
114
|
}
|
|
114
115
|
|
|
115
|
-
// Date picker
|
|
116
|
-
@media (orientation: landscape) {
|
|
117
|
-
.mat-datepicker-content-touch {
|
|
118
|
-
height: unset !important;
|
|
119
|
-
min-height: 80vh;
|
|
120
|
-
|
|
121
|
-
.mat-calendar-controls {
|
|
122
|
-
margin-top: 0;
|
|
123
|
-
}
|
|
124
|
-
.mat-datepicker-content-container {
|
|
125
|
-
&.mat-datepicker-content-container-with-actions {
|
|
126
|
-
height: unset !important;
|
|
127
|
-
}
|
|
128
|
-
.mat-datepicker-actions {
|
|
129
|
-
background-color: white;
|
|
130
|
-
margin-top: -12px;
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
}
|
|
136
116
|
|
|
137
117
|
.mat-option, .mat-mdc-option {
|
|
138
118
|
padding-top: var(--padding-top, 0) !important;
|
package/src/theme/_mixins.scss
CHANGED
|
@@ -102,6 +102,8 @@
|
|
|
102
102
|
@include generate-color-list($color-name);
|
|
103
103
|
}
|
|
104
104
|
|
|
105
|
+
--ion-text-color: #{$text-color};
|
|
106
|
+
--ion-text-color-rgb: #{$text-color-rgb};
|
|
105
107
|
--ion-grid-column-padding: #{$ion-grid-column-padding};
|
|
106
108
|
--ion-padding: #{$ion-padding};
|
|
107
109
|
--ion-margin: #{$ion-margin};
|
|
@@ -109,6 +111,9 @@
|
|
|
109
111
|
--ion-background-color-rgb: #{$background-color-rgb};
|
|
110
112
|
--ion-toolbar-height: #{$ion-toolbar-height};
|
|
111
113
|
--ion-toolbar-background: #{$ion-toolbar-background};
|
|
114
|
+
--ion-backdrop-color: #000000;
|
|
115
|
+
--ion-backdrop-color-rgb: 0, 0, 0;
|
|
116
|
+
--ion-backdrop-opacity: 0.32;
|
|
112
117
|
|
|
113
118
|
--expansion-panel-padding: var(--ion-padding);
|
|
114
119
|
--expansion-panel-header-padding: var(--ion-padding);
|
|
@@ -146,11 +151,44 @@
|
|
|
146
151
|
// Disable form footer, in mobile
|
|
147
152
|
--app-form-buttons-bar-height: 0px;
|
|
148
153
|
--app-footer-height: 0px;
|
|
154
|
+
|
|
155
|
+
|
|
149
156
|
}
|
|
150
157
|
|
|
151
158
|
@mixin css-variables-to-root-dark() {
|
|
159
|
+
|
|
160
|
+
// Change scroll bar style
|
|
161
|
+
color-scheme: dark;
|
|
162
|
+
|
|
152
163
|
@each $color-name,
|
|
153
164
|
$value in $colors {
|
|
154
165
|
@include generate-dark-color-list($color-name);
|
|
155
166
|
}
|
|
167
|
+
|
|
168
|
+
//--ion-text-color: #{$background-color-value};
|
|
169
|
+
//--ion-text-color-rgb: #{$background-color-rgb-value};
|
|
170
|
+
//--ion-background-color: #{$text-color-value};
|
|
171
|
+
//--ion-background-color-rgb: #{$text-color-rgb-value};
|
|
172
|
+
|
|
173
|
+
// Step colors
|
|
174
|
+
--ion-color-step-50: #{$text-color-step-50};
|
|
175
|
+
--ion-color-step-100: #{$text-color-step-100};
|
|
176
|
+
--ion-color-step-150: #{$text-color-step-150};
|
|
177
|
+
--ion-color-step-200: #{$text-color-step-200};
|
|
178
|
+
--ion-color-step-250: #{$text-color-step-250};
|
|
179
|
+
--ion-color-step-300: #{$text-color-step-200};
|
|
180
|
+
--ion-color-step-350: #{$text-color-step-350};
|
|
181
|
+
--ion-color-step-400: #{$text-color-step-400};
|
|
182
|
+
--ion-color-step-450: #{$text-color-step-450};
|
|
183
|
+
--ion-color-step-500: #{$text-color-step-500};
|
|
184
|
+
--ion-color-step-550: #{$text-color-step-550};
|
|
185
|
+
--ion-color-step-600: #{$text-color-step-600};
|
|
186
|
+
--ion-color-step-650: #{$text-color-step-650};
|
|
187
|
+
--ion-color-step-700: #{$text-color-step-700};
|
|
188
|
+
--ion-color-step-750: #{$text-color-step-750};
|
|
189
|
+
--ion-color-step-800: #{$text-color-step-800};
|
|
190
|
+
--ion-color-step-850: #{$text-color-step-850};
|
|
191
|
+
--ion-color-step-900: #{$text-color-step-900};
|
|
192
|
+
--ion-color-step-950: #{$text-color-step-950};
|
|
193
|
+
|
|
156
194
|
}
|
|
@@ -4,17 +4,37 @@
|
|
|
4
4
|
// --------------------------------------------------
|
|
5
5
|
.form-container,
|
|
6
6
|
form.form-container {
|
|
7
|
-
--ion-text-color: var(--app-form-color, #{$app-form-color});
|
|
8
7
|
color: var(--ion-text-color);
|
|
9
8
|
@include font-size(16px);
|
|
10
9
|
|
|
11
10
|
--mdc-filled-text-field-container-color: var(--app-form-field-background-color);
|
|
12
11
|
--mdc-filled-text-field-disabled-container-color: var(--app-form-field-disabled-background-color);
|
|
13
|
-
--mdc-filled-text-field-input-text-color: var(--
|
|
14
|
-
--mdc-filled-text-field-
|
|
12
|
+
--mdc-filled-text-field-input-text-color: var(--ion-text-color);
|
|
13
|
+
--mdc-filled-text-field-input-text-placeholder-color: var(--app-form-field-label-color);
|
|
14
|
+
--mdc-filled-text-field-caret-color: var(--ion-text-color);
|
|
15
15
|
--mdc-filled-text-field-label-text-color: var(--app-form-field-label-color);
|
|
16
|
+
--mdc-filled-text-field-label-text-tracking: normal;
|
|
16
17
|
--mdc-filled-text-field-disabled-label-text-color: var(--app-form-field-disabled-label-color);
|
|
18
|
+
--mdc-filled-text-field-disabled-input-text-color: var(--app-form-color-disabled);
|
|
19
|
+
--mdc-filled-text-field-active-indicator-color: var(--app-form-field-label-color);
|
|
17
20
|
--mdc-filled-text-field-hover-label-text-color: var(--app-form-field-label-color);
|
|
21
|
+
--mdc-filled-text-field-hover-active-indicator-color: var(--ion-text-color);
|
|
22
|
+
--mdc-filled-text-field-focus-label-text-color: var(--ion-color-primary);
|
|
23
|
+
--mdc-filled-text-field-focus-active-indicator-color: var(--ion-color-primary);
|
|
24
|
+
|
|
25
|
+
--mdc-outlined-text-field-input-text-color: var(--ion-text-color);
|
|
26
|
+
--mdc-outlined-text-field-input-text-placeholder-color: var(--app-form-field-label-color);
|
|
27
|
+
--mdc-outlined-text-field-caret-color: var(--ion-text-color);
|
|
28
|
+
--mdc-outlined-text-field-label-text-color: var(--app-form-field-label-color);
|
|
29
|
+
--mdc-outlined-text-field-label-text-tracking: normal;
|
|
30
|
+
--mdc-outlined-text-field-disabled-label-text-color: var(--app-form-field-disabled-label-color);
|
|
31
|
+
--mdc-outlined-text-field-disabled-input-text-color: var(--app-form-color-disabled);
|
|
32
|
+
--mdc-outlined-text-field-outline-color: var(--app-form-field-label-color);
|
|
33
|
+
--mdc-outlined-text-field-hover-label-text-color: var(--app-form-field-label-color);
|
|
34
|
+
--mdc-outlined-text-field-hover-outline-color: var(--ion-text-color);
|
|
35
|
+
--mdc-outlined-text-field-focus-label-text-color: var(--ion-color-primary);
|
|
36
|
+
--mdc-outlined-text-field-focus-outline-color: var(--ion-color-primary);
|
|
37
|
+
|
|
18
38
|
--mat-form-field-state-layer-color: var(--app-form-field-focus-background-color);
|
|
19
39
|
--mat-form-field-container-height: 45px;
|
|
20
40
|
--mat-form-field-container-text-size: inherit;
|
|
@@ -22,11 +42,11 @@ form.form-container {
|
|
|
22
42
|
--mat-form-field-container-vertical-padding: 8px;
|
|
23
43
|
--mat-form-field-filled-with-label-container-padding-top: 18px;
|
|
24
44
|
--mat-form-field-filled-with-label-container-padding-bottom: 0px;
|
|
25
|
-
|
|
45
|
+
|
|
26
46
|
--mat-select-trigger-text-size: var(--mat-form-field-container-text-size);
|
|
27
|
-
--mat-select-enabled-trigger-text-color: var(--
|
|
47
|
+
--mat-select-enabled-trigger-text-color: var(--ion-text-color);
|
|
28
48
|
--mat-select-disabled-trigger-text-color: var(--app-form-color-disabled);
|
|
29
|
-
--mdc-form-field-label-text-color: var(--
|
|
49
|
+
--mdc-form-field-label-text-color: var(--ion-text-color);
|
|
30
50
|
--mdc-switch-selected-track-color: var(--app-form-field-background-color-shade);
|
|
31
51
|
--mdc-switch-unselected-track-color: var(--app-form-field-background-color-shade);
|
|
32
52
|
--mdc-switch-selected-hover-track-color: var(--app-form-field-background-color-shade);
|
|
@@ -654,10 +654,26 @@ ion-alert button.alert-button {
|
|
|
654
654
|
cursor: pointer;
|
|
655
655
|
}
|
|
656
656
|
|
|
657
|
+
|
|
657
658
|
// --------------------------------------------------
|
|
658
|
-
//
|
|
659
|
+
// Overlay
|
|
659
660
|
// --------------------------------------------------
|
|
660
661
|
|
|
662
|
+
.cdk-overlay-dark-backdrop {
|
|
663
|
+
background: rgba(var(--ion-backdrop-color-rgb, 0,0,0), var(--ion-backdrop-opacity, 0.32));
|
|
664
|
+
}
|
|
665
|
+
|
|
666
|
+
// --------------------------------------------------
|
|
667
|
+
// Date and time picker
|
|
668
|
+
// --------------------------------------------------
|
|
669
|
+
// Date picker
|
|
670
|
+
.mat-datepicker-content {
|
|
671
|
+
--mat-datepicker-calendar-container-background-color: var(--ion-background-color, #fff) !important;
|
|
672
|
+
--mat-datepicker-calendar-container-text-color: var(--ion-text-color, #000000) !important;
|
|
673
|
+
--mat-datepicker-calendar-date-text-color: var(--ion-text-color);
|
|
674
|
+
--mat-datepicker-calendar-body-label-text-color: var(--ion-color-step-500);
|
|
675
|
+
--mat-datepicker-calendar-header-text-color: var(--ion-color-step-500);
|
|
676
|
+
}
|
|
661
677
|
mat-calendar {
|
|
662
678
|
.mat-calendar-header {
|
|
663
679
|
background-color: var(--ion-color-secondary) !important;
|
|
@@ -679,9 +695,30 @@ mat-calendar {
|
|
|
679
695
|
}
|
|
680
696
|
}
|
|
681
697
|
|
|
698
|
+
@media (orientation: landscape) {
|
|
699
|
+
.mat-datepicker-content-touch {
|
|
700
|
+
height: fit-content !important;
|
|
701
|
+
min-height: 310px;
|
|
702
|
+
|
|
703
|
+
.mat-calendar-controls {
|
|
704
|
+
margin-top: 0;
|
|
705
|
+
}
|
|
706
|
+
.mat-datepicker-content-container {
|
|
707
|
+
&.mat-datepicker-content-container-with-actions {
|
|
708
|
+
height: unset !important;
|
|
709
|
+
}
|
|
710
|
+
.mat-datepicker-actions {
|
|
711
|
+
background-color: var(--mat-datepicker-calendar-container-background-color);
|
|
712
|
+
margin-top: -12px;
|
|
713
|
+
}
|
|
714
|
+
}
|
|
715
|
+
}
|
|
716
|
+
}
|
|
717
|
+
|
|
682
718
|
|
|
719
|
+
// Time picker
|
|
683
720
|
.timepicker-backdrop-overlay {
|
|
684
|
-
background-color: rgba(
|
|
721
|
+
background-color: rgba(var(--ion-backdrop-color-rgb, 0,0,0), var(--ion-backdrop-opacity, 0.32)) !important;
|
|
685
722
|
z-index: 1000;
|
|
686
723
|
opacity: 1;
|
|
687
724
|
-webkit-tap-highlight-color: transparent;
|
|
@@ -690,7 +727,13 @@ mat-calendar {
|
|
|
690
727
|
|
|
691
728
|
ngx-material-timepicker-content {
|
|
692
729
|
--clock-hand-color: var(--ion-color-accent) !important;
|
|
693
|
-
--clock-face-
|
|
730
|
+
--clock-face-background-color: var(--ion-color-step-100, #f0f0f0) !important;
|
|
731
|
+
--clock-face-time-active-color: var(--ion-color-accent-contrast, #fff) !important;
|
|
732
|
+
--clock-face-time-inactive-color: var(--ion-color-step-900, #6c6c6c) !important;
|
|
733
|
+
--clock-face-time-disabled-color: var(--ion-color-step-200, #c5c5c5);
|
|
734
|
+
--clock-face-inner-time-inactive-color: var(--ion-color-step-700, #929292) !important;
|
|
735
|
+
--body-background-color: var(--ion-background-color, #fff);
|
|
736
|
+
|
|
694
737
|
// TODO review !
|
|
695
738
|
//@extend .mat-dialog-container !optional;
|
|
696
739
|
|
|
@@ -702,14 +745,16 @@ ngx-material-timepicker-content {
|
|
|
702
745
|
--dial-background-color: var(--ion-color-secondary) !important;
|
|
703
746
|
color: var(--ion-color-secondary-contrast) !important;
|
|
704
747
|
}
|
|
705
|
-
}
|
|
706
748
|
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
749
|
+
ngx-material-timepicker-dial-control {
|
|
750
|
+
outline-color: var(--ion-color-accent) !important;
|
|
751
|
+
input {
|
|
752
|
+
outline-color: inherit !important;
|
|
753
|
+
}
|
|
711
754
|
}
|
|
755
|
+
|
|
712
756
|
}
|
|
757
|
+
|
|
713
758
|
}
|
|
714
759
|
|
|
715
760
|
.mat-mdc-form-field-type-mat-chip-grid {
|
|
@@ -43,6 +43,14 @@
|
|
|
43
43
|
--mdc-filled-text-field-container-color: transparent;
|
|
44
44
|
--mdc-filled-text-field-disabled-container-color: transparent;
|
|
45
45
|
--mdc-filled-text-field-input-text-color: var(--ion-text-color);
|
|
46
|
+
--mdc-filled-text-field-input-text-placeholder-color: var(--app-form-field-label-color);
|
|
47
|
+
--mdc-filled-text-field-caret-color: var(--ion-text-color);
|
|
48
|
+
--mdc-filled-text-field-active-indicator-color: transparent;
|
|
49
|
+
--mdc-filled-text-field-hover-label-text-color: var(--app-form-field-label-color);
|
|
50
|
+
--mdc-filled-text-field-hover-active-indicator-color: transparent;
|
|
51
|
+
--mdc-filled-text-field-focus-label-text-color: var(--ion-color-primary);
|
|
52
|
+
--mdc-filled-text-field-focus-active-indicator-color: var(--ion-color-primary);
|
|
53
|
+
|
|
46
54
|
--mat-select-enabled-trigger-text-color: var(--ion-text-color);
|
|
47
55
|
--mat-select-disabled-trigger-text-color: var(--ion-text-color);
|
|
48
56
|
--mdc-form-field-label-text-color: var(--ion-text-color);
|
|
@@ -6,25 +6,6 @@ html {
|
|
|
6
6
|
@include css-variables-to-root-mobile();
|
|
7
7
|
}
|
|
8
8
|
|
|
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;
|
|
28
9
|
}
|
|
29
10
|
|
|
30
11
|
/*
|
|
@@ -98,13 +79,15 @@ html.dark {
|
|
|
98
79
|
--ion-color-light-shade: #1e2023;
|
|
99
80
|
--ion-color-light-tint: #383a3e;
|
|
100
81
|
|
|
82
|
+
--ion-text-color: rgba(255,255,255,0.87);
|
|
83
|
+
--ion-text-color-rgb: 255, 255, 255;
|
|
101
84
|
--ion-background-color: #000000;
|
|
102
85
|
--ion-background-color-rgb: 0, 0, 0;
|
|
103
86
|
--ion-toolbar-background: #1f1f1f;
|
|
104
|
-
--ion-text-color: #ffffff;
|
|
105
|
-
--ion-text-color-rgb: 255, 255, 255;
|
|
106
87
|
--ion-border-color: #222222;
|
|
107
88
|
--ion-backdrop-color: #ffffff;
|
|
89
|
+
--ion-backdrop-opacity: 0.15;
|
|
90
|
+
--ion-backdrop-color-rgb: 255, 255, 255;
|
|
108
91
|
|
|
109
92
|
--app-form-color-disabled: #949494;
|
|
110
93
|
--app-form-color: var(--ion-color-light-contrast);
|
|
@@ -114,16 +97,6 @@ html.dark {
|
|
|
114
97
|
--app-form-field-label-color: #949494;
|
|
115
98
|
--app-form-field-disabled-label-color: #7d7d7d;
|
|
116
99
|
|
|
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
100
|
ion-menu#menu {
|
|
128
101
|
--ion-item-text-color-selected: var(--ion-color-secondary100-contrast);
|
|
129
102
|
--ion-item-icon-color-selected: var(--ion-color-secondary100-contrast);
|
|
@@ -136,6 +109,8 @@ html.dark {
|
|
|
136
109
|
*/
|
|
137
110
|
|
|
138
111
|
html.ios.dark {
|
|
112
|
+
--ion-item-background: #000000;
|
|
113
|
+
--ion-card-background: #1c1c1d;
|
|
139
114
|
|
|
140
115
|
--ion-color-step-50: #0d0d0d;
|
|
141
116
|
--ion-color-step-100: #1a1a1a;
|
|
@@ -157,9 +132,6 @@ html.ios.dark {
|
|
|
157
132
|
--ion-color-step-900: #e6e6e6;
|
|
158
133
|
--ion-color-step-950: #f2f2f2;
|
|
159
134
|
|
|
160
|
-
--ion-item-background: #000000;
|
|
161
|
-
|
|
162
|
-
--ion-card-background: #1c1c1d;
|
|
163
135
|
}
|
|
164
136
|
|
|
165
137
|
/*
|
|
@@ -170,6 +142,19 @@ html.ios.dark {
|
|
|
170
142
|
html.md.dark {
|
|
171
143
|
--ion-background-color: #121212;
|
|
172
144
|
--ion-background-color-rgb: 18,18,18;
|
|
145
|
+
--ion-item-background: #1e1e1e;
|
|
146
|
+
--ion-tab-bar-background: #1f1f1f;
|
|
147
|
+
--ion-card-background: #1e1e1e;
|
|
148
|
+
|
|
149
|
+
ion-menu ion-content {
|
|
150
|
+
--background: transparent;
|
|
151
|
+
--background-color: var(--ion-background-color) !important;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
//.mat-mdc-table {
|
|
155
|
+
// --app-table-row-item-selected-background-color: var(--ion-color-accent);
|
|
156
|
+
// --app-table-row-item-selected-text-color: var(--ion-color-accent-contrast);
|
|
157
|
+
//}
|
|
173
158
|
|
|
174
159
|
--ion-color-step-50: #1e1e1e;
|
|
175
160
|
--ion-color-step-100: #2a2a2a;
|
|
@@ -190,19 +175,5 @@ html.md.dark {
|
|
|
190
175
|
--ion-color-step-850: #dbdbdb;
|
|
191
176
|
--ion-color-step-900: #e7e7e7;
|
|
192
177
|
--ion-color-step-950: #f3f3f3;
|
|
193
|
-
|
|
194
|
-
--ion-item-background: #1e1e1e;
|
|
195
|
-
--ion-tab-bar-background: #1f1f1f;
|
|
196
|
-
--ion-card-background: #1e1e1e;
|
|
197
|
-
|
|
198
|
-
ion-menu ion-content {
|
|
199
|
-
--background: transparent;
|
|
200
|
-
--background-color: var(--ion-background-color) !important;
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
//.mat-mdc-table {
|
|
204
|
-
// --app-table-row-item-selected-background-color: var(--ion-color-accent);
|
|
205
|
-
// --app-table-row-item-selected-text-color: var(--ion-color-accent-contrast);
|
|
206
|
-
//}
|
|
207
178
|
}
|
|
208
179
|
|