@sumaris-net/ngx-components 2.10.11 → 2.11.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.
- package/doc/changelog.md +3 -0
- package/package.json +1 -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 +58 -0
- package/src/theme/_ngx-components.forms.scss +10 -2
- package/src/theme/_ngx-components.scss +53 -8
- package/src/theme/_theme.variables.scss +90 -105
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
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.
|
|
5
|
+
"version": "2.11.1",
|
|
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);
|
|
@@ -138,6 +143,26 @@
|
|
|
138
143
|
--app-form-field-disabled-label-color: #{$app-form-field-disabled-label-color};
|
|
139
144
|
--app-table-row-item-selected-background-color: #{$app-table-row-item-selected-background-color};
|
|
140
145
|
--app-table-row-item-selected-text-color: #{$app-table-row-item-selected-text-color};
|
|
146
|
+
|
|
147
|
+
--ion-color-step-50: #{$background-color-step-50};
|
|
148
|
+
--ion-color-step-100: #{$background-color-step-100};
|
|
149
|
+
--ion-color-step-150: #{$background-color-step-150};
|
|
150
|
+
--ion-color-step-200: #{$background-color-step-200};
|
|
151
|
+
--ion-color-step-250: #{$background-color-step-250};
|
|
152
|
+
--ion-color-step-300: #{$background-color-step-200};
|
|
153
|
+
--ion-color-step-350: #{$background-color-step-350};
|
|
154
|
+
--ion-color-step-400: #{$background-color-step-400};
|
|
155
|
+
--ion-color-step-450: #{$background-color-step-450};
|
|
156
|
+
--ion-color-step-500: #{$background-color-step-500};
|
|
157
|
+
--ion-color-step-550: #{$background-color-step-550};
|
|
158
|
+
--ion-color-step-600: #{$background-color-step-600};
|
|
159
|
+
--ion-color-step-650: #{$background-color-step-650};
|
|
160
|
+
--ion-color-step-700: #{$background-color-step-700};
|
|
161
|
+
--ion-color-step-750: #{$background-color-step-750};
|
|
162
|
+
--ion-color-step-800: #{$background-color-step-800};
|
|
163
|
+
--ion-color-step-850: #{$background-color-step-850};
|
|
164
|
+
--ion-color-step-900: #{$background-color-step-900};
|
|
165
|
+
--ion-color-step-950: #{$background-color-step-950};
|
|
141
166
|
}
|
|
142
167
|
|
|
143
168
|
@mixin css-variables-to-root-mobile() {
|
|
@@ -146,11 +171,44 @@
|
|
|
146
171
|
// Disable form footer, in mobile
|
|
147
172
|
--app-form-buttons-bar-height: 0px;
|
|
148
173
|
--app-footer-height: 0px;
|
|
174
|
+
|
|
175
|
+
|
|
149
176
|
}
|
|
150
177
|
|
|
151
178
|
@mixin css-variables-to-root-dark() {
|
|
179
|
+
|
|
180
|
+
// Change scroll bar style
|
|
181
|
+
color-scheme: dark;
|
|
182
|
+
|
|
152
183
|
@each $color-name,
|
|
153
184
|
$value in $colors {
|
|
154
185
|
@include generate-dark-color-list($color-name);
|
|
155
186
|
}
|
|
187
|
+
|
|
188
|
+
//--ion-text-color: #{$background-color-value};
|
|
189
|
+
//--ion-text-color-rgb: #{$background-color-rgb-value};
|
|
190
|
+
//--ion-background-color: #{$text-color-value};
|
|
191
|
+
//--ion-background-color-rgb: #{$text-color-rgb-value};
|
|
192
|
+
|
|
193
|
+
// Step colors
|
|
194
|
+
--ion-color-step-50: #{$text-color-step-50};
|
|
195
|
+
--ion-color-step-100: #{$text-color-step-100};
|
|
196
|
+
--ion-color-step-150: #{$text-color-step-150};
|
|
197
|
+
--ion-color-step-200: #{$text-color-step-200};
|
|
198
|
+
--ion-color-step-250: #{$text-color-step-250};
|
|
199
|
+
--ion-color-step-300: #{$text-color-step-200};
|
|
200
|
+
--ion-color-step-350: #{$text-color-step-350};
|
|
201
|
+
--ion-color-step-400: #{$text-color-step-400};
|
|
202
|
+
--ion-color-step-450: #{$text-color-step-450};
|
|
203
|
+
--ion-color-step-500: #{$text-color-step-500};
|
|
204
|
+
--ion-color-step-550: #{$text-color-step-550};
|
|
205
|
+
--ion-color-step-600: #{$text-color-step-600};
|
|
206
|
+
--ion-color-step-650: #{$text-color-step-650};
|
|
207
|
+
--ion-color-step-700: #{$text-color-step-700};
|
|
208
|
+
--ion-color-step-750: #{$text-color-step-750};
|
|
209
|
+
--ion-color-step-800: #{$text-color-step-800};
|
|
210
|
+
--ion-color-step-850: #{$text-color-step-850};
|
|
211
|
+
--ion-color-step-900: #{$text-color-step-900};
|
|
212
|
+
--ion-color-step-950: #{$text-color-step-950};
|
|
213
|
+
|
|
156
214
|
}
|
|
@@ -23,6 +23,7 @@ form.form-container {
|
|
|
23
23
|
--mat-form-field-filled-with-label-container-padding-top: 18px;
|
|
24
24
|
--mat-form-field-filled-with-label-container-padding-bottom: 0px;
|
|
25
25
|
--mdc-filled-text-field-label-text-tracking: normal;
|
|
26
|
+
--mdc-filled-text-field-disabled-input-text-color: var(--app-form-color-disabled);
|
|
26
27
|
--mat-select-trigger-text-size: var(--mat-form-field-container-text-size);
|
|
27
28
|
--mat-select-enabled-trigger-text-color: var(--app-form-color);
|
|
28
29
|
--mat-select-disabled-trigger-text-color: var(--app-form-color-disabled);
|
|
@@ -34,7 +35,7 @@ form.form-container {
|
|
|
34
35
|
|
|
35
36
|
.mat-form-field-disabled,
|
|
36
37
|
.mat-mdc-input-element:disabled {
|
|
37
|
-
color: #{$app-form-color-disabled} !important;
|
|
38
|
+
color: var(--app-form-color-disabled, #{$app-form-color-disabled}) !important;
|
|
38
39
|
}
|
|
39
40
|
|
|
40
41
|
.mat-form-field-disabled {
|
|
@@ -188,6 +189,10 @@ form.form-container {
|
|
|
188
189
|
|
|
189
190
|
.mat-mdc-checkbox {
|
|
190
191
|
--mdc-form-field-label-text-color: var(--app-form-color);
|
|
192
|
+
--mdc-checkbox-unselected-icon-color: var(--app-form-color);
|
|
193
|
+
--mdc-checkbox-unselected-focus-icon-color: var(--app-form-color);
|
|
194
|
+
--mdc-checkbox-unselected-hover-icon-color: var(--app-form-color);
|
|
195
|
+
--mdc-checkbox-unselected-pressed-icon-color: var(--app-form-color);
|
|
191
196
|
}
|
|
192
197
|
|
|
193
198
|
.mat-mdc-slide-toggle {
|
|
@@ -271,12 +276,15 @@ ion-grid.form-container {
|
|
|
271
276
|
|
|
272
277
|
// Dark mode mode
|
|
273
278
|
html.dark {
|
|
279
|
+
div.mat-mdc-autocomplete-panel,
|
|
274
280
|
div.mat-mdc-select-panel {
|
|
275
|
-
--mat-select-panel-background-color: var(--ion-color-
|
|
281
|
+
--mat-select-panel-background-color: var(--ion-color-step-100);
|
|
282
|
+
--mat-autocomplete-background-color: var(--ion-color-step-100);
|
|
276
283
|
|
|
277
284
|
.mat-mdc-option {
|
|
278
285
|
--mat-option-label-text-color: var(--ion-text-color);
|
|
279
286
|
--mat-option-selected-state-label-text-color: var(--ion-color-primary);
|
|
287
|
+
--mat-minimal-pseudo-checkbox-selected-checkmark-color: var(--ion-color-primary);
|
|
280
288
|
color: var(--mat-option-label-text-color) !important;
|
|
281
289
|
}
|
|
282
290
|
}
|
|
@@ -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 {
|
|
@@ -6,90 +6,6 @@ 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
|
-
}
|
|
93
9
|
}
|
|
94
10
|
|
|
95
11
|
/*
|
|
@@ -98,12 +14,80 @@ html {
|
|
|
98
14
|
*/
|
|
99
15
|
|
|
100
16
|
html.dark {
|
|
17
|
+
@include css-variables-to-root-dark();
|
|
18
|
+
|
|
19
|
+
--ion-color-primary: #428cff;
|
|
20
|
+
--ion-color-primary-rgb: 66, 140, 255;
|
|
21
|
+
--ion-color-primary-contrast: #ffffff;
|
|
22
|
+
--ion-color-primary-contrast-rgb: 255, 255, 255;
|
|
23
|
+
--ion-color-primary-shade: #3a7be0;
|
|
24
|
+
--ion-color-primary-tint: #5598ff;
|
|
25
|
+
|
|
26
|
+
/*--ion-color-secondary: #75C4FD;
|
|
27
|
+
--ion-color-secondary-rgb: 117, 196, 253;
|
|
28
|
+
--ion-color-secondary-contrast: #ffffff;
|
|
29
|
+
--ion-color-secondary-contrast-rgb: 255, 255, 255;
|
|
30
|
+
--ion-color-secondary-shade: #46b0e0;
|
|
31
|
+
--ion-color-secondary-tint: #62ceff;*/
|
|
32
|
+
|
|
33
|
+
//--ion-color-tertiary: #6a64ff;
|
|
34
|
+
//--ion-color-tertiary-rgb: 106, 100, 255;
|
|
35
|
+
//--ion-color-tertiary-contrast: #ffffff;
|
|
36
|
+
//--ion-color-tertiary-contrast-rgb: 255, 255, 255;
|
|
37
|
+
//--ion-color-tertiary-shade: #5d58e0;
|
|
38
|
+
//--ion-color-tertiary-tint: #7974ff;
|
|
39
|
+
|
|
40
|
+
--ion-color-success: #2fdf75;
|
|
41
|
+
--ion-color-success-rgb: 47, 223, 117;
|
|
42
|
+
--ion-color-success-contrast: #000000;
|
|
43
|
+
--ion-color-success-contrast-rgb: 0, 0, 0;
|
|
44
|
+
--ion-color-success-shade: #29c467;
|
|
45
|
+
--ion-color-success-tint: #44e283;
|
|
46
|
+
|
|
47
|
+
--ion-color-warning: #FF6434;
|
|
48
|
+
--ion-color-warning-rgb: 255, 100, 52;
|
|
49
|
+
--ion-color-warning-contrast: #000000;
|
|
50
|
+
--ion-color-warning-contrast-rgb: 0, 0, 0;
|
|
51
|
+
--ion-color-warning-shade: #E0BB4B;
|
|
52
|
+
--ion-color-warning-tint: #FFDA48;
|
|
53
|
+
|
|
54
|
+
--ion-color-danger: #fa0021;
|
|
55
|
+
--ion-color-danger-rgb: 255, 0, 33;
|
|
56
|
+
--ion-color-danger-contrast: #ffffff;
|
|
57
|
+
--ion-color-danger-contrast-rgb: 255, 255, 255;
|
|
58
|
+
--ion-color-danger-shade: #e04055;
|
|
59
|
+
--ion-color-danger-tint: #ff5b71;
|
|
60
|
+
|
|
61
|
+
--ion-color-dark: #f4f5f8;
|
|
62
|
+
--ion-color-dark-rgb: 244, 245, 248;
|
|
63
|
+
--ion-color-dark-contrast: #000000;
|
|
64
|
+
--ion-color-dark-contrast-rgb: 0, 0, 0;
|
|
65
|
+
--ion-color-dark-shade: #d7d8da;
|
|
66
|
+
--ion-color-dark-tint: #f5f6f9;
|
|
67
|
+
|
|
68
|
+
--ion-color-medium: #989aa2;
|
|
69
|
+
--ion-color-medium-rgb: 152, 154, 162;
|
|
70
|
+
--ion-color-medium-contrast: #000000;
|
|
71
|
+
--ion-color-medium-contrast-rgb: 0, 0, 0;
|
|
72
|
+
--ion-color-medium-shade: #86888f;
|
|
73
|
+
--ion-color-medium-tint: #a2a4ab;
|
|
74
|
+
|
|
75
|
+
--ion-color-light: #222428;
|
|
76
|
+
--ion-color-light-rgb: 34, 36, 40;
|
|
77
|
+
--ion-color-light-contrast: #ffffff;
|
|
78
|
+
--ion-color-light-contrast-rgb: 255, 255, 255;
|
|
79
|
+
--ion-color-light-shade: #1e2023;
|
|
80
|
+
--ion-color-light-tint: #383a3e;
|
|
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;
|
|
88
|
+
--ion-backdrop-color: #ffffff;
|
|
89
|
+
--ion-backdrop-opacity: 0.15;
|
|
90
|
+
--ion-backdrop-color-rgb: 255, 255, 255;
|
|
107
91
|
|
|
108
92
|
--app-form-color-disabled: #949494;
|
|
109
93
|
--app-form-color: var(--ion-color-light-contrast);
|
|
@@ -112,6 +96,11 @@ html.dark {
|
|
|
112
96
|
--app-form-field-disabled-background-color: #282828;
|
|
113
97
|
--app-form-field-label-color: #949494;
|
|
114
98
|
--app-form-field-disabled-label-color: #7d7d7d;
|
|
99
|
+
|
|
100
|
+
ion-menu#menu {
|
|
101
|
+
--ion-item-text-color-selected: var(--ion-color-secondary100-contrast);
|
|
102
|
+
--ion-item-icon-color-selected: var(--ion-color-secondary100-contrast);
|
|
103
|
+
}
|
|
115
104
|
}
|
|
116
105
|
|
|
117
106
|
/*
|
|
@@ -120,6 +109,8 @@ html.dark {
|
|
|
120
109
|
*/
|
|
121
110
|
|
|
122
111
|
html.ios.dark {
|
|
112
|
+
--ion-item-background: #000000;
|
|
113
|
+
--ion-card-background: #1c1c1d;
|
|
123
114
|
|
|
124
115
|
--ion-color-step-50: #0d0d0d;
|
|
125
116
|
--ion-color-step-100: #1a1a1a;
|
|
@@ -141,9 +132,6 @@ html.ios.dark {
|
|
|
141
132
|
--ion-color-step-900: #e6e6e6;
|
|
142
133
|
--ion-color-step-950: #f2f2f2;
|
|
143
134
|
|
|
144
|
-
--ion-item-background: #000000;
|
|
145
|
-
|
|
146
|
-
--ion-card-background: #1c1c1d;
|
|
147
135
|
}
|
|
148
136
|
|
|
149
137
|
/*
|
|
@@ -154,6 +142,19 @@ html.ios.dark {
|
|
|
154
142
|
html.md.dark {
|
|
155
143
|
--ion-background-color: #121212;
|
|
156
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
|
+
//}
|
|
157
158
|
|
|
158
159
|
--ion-color-step-50: #1e1e1e;
|
|
159
160
|
--ion-color-step-100: #2a2a2a;
|
|
@@ -174,21 +175,5 @@ html.md.dark {
|
|
|
174
175
|
--ion-color-step-850: #dbdbdb;
|
|
175
176
|
--ion-color-step-900: #e7e7e7;
|
|
176
177
|
--ion-color-step-950: #f3f3f3;
|
|
177
|
-
|
|
178
|
-
--ion-item-background: #1e1e1e;
|
|
179
|
-
|
|
180
|
-
--ion-tab-bar-background: #1f1f1f;
|
|
181
|
-
|
|
182
|
-
--ion-card-background: #1e1e1e;
|
|
183
|
-
|
|
184
|
-
ion-menu ion-content {
|
|
185
|
-
--background: transparent;
|
|
186
|
-
--background-color: var(--ion-background-color) !important;
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
//.mat-mdc-table {
|
|
190
|
-
// --app-table-row-item-selected-background-color: var(--ion-color-accent);
|
|
191
|
-
// --app-table-row-item-selected-text-color: var(--ion-color-accent-contrast);
|
|
192
|
-
//}
|
|
193
178
|
}
|
|
194
179
|
|