@elderbyte/ngx-starter 15.7.2 → 15.8.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.
- package/_index.scss +3 -3
- package/esm2020/lib/components/i18n/entities/elder-localized-input/elder-localized-input.component.mjs +3 -3
- package/fesm2015/elderbyte-ngx-starter.mjs +3 -2
- package/fesm2015/elderbyte-ngx-starter.mjs.map +1 -1
- package/fesm2020/elderbyte-ngx-starter.mjs +3 -2
- package/fesm2020/elderbyte-ngx-starter.mjs.map +1 -1
- package/package.json +1 -1
- package/theming/_elder-common.scss +5 -1
- package/theming/_elder-style-fixes.scss +87 -3
- package/theming/_mat-icon-button-size.scss +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
@use 'mat-icon-button-size' as icon-button-size;
|
|
2
|
+
@use '@angular/material' as mat;
|
|
2
3
|
|
|
3
|
-
@mixin elder-common-styles ($common-sizes) {
|
|
4
|
+
@mixin elder-common-styles ($theme, $common-sizes) {
|
|
5
|
+
|
|
6
|
+
$form-field-density: map-get($theme, elder, density, form-field);
|
|
7
|
+
@include mat.private-form-field-density($form-field-density);
|
|
4
8
|
|
|
5
9
|
/***************************************************************************
|
|
6
10
|
* *
|
|
@@ -1,9 +1,33 @@
|
|
|
1
|
+
@use '@angular/material' as mat;
|
|
1
2
|
|
|
2
|
-
|
|
3
|
+
|
|
4
|
+
@mixin elder-style-fixes($theme) {
|
|
3
5
|
@include _ng-style-fixes;
|
|
4
|
-
@include _mat-style-fixes;
|
|
6
|
+
@include _mat-style-fixes($theme);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@function calc-form-icon-padding($theme) {
|
|
10
|
+
$density: map-get($theme, elder, density, form-field);
|
|
11
|
+
@return calc(12px + #{$density}px * 2);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
@function calc-form-icon-size($theme) {
|
|
15
|
+
$density: map-get($theme, elder, density, form-field);
|
|
16
|
+
|
|
17
|
+
@if $density > -3 {
|
|
18
|
+
@return 48px;
|
|
19
|
+
} @else {
|
|
20
|
+
@return 40px;
|
|
21
|
+
}
|
|
5
22
|
}
|
|
6
23
|
|
|
24
|
+
@function calc-padding-top-form-field-inflix($density) {
|
|
25
|
+
@if $density > -3 {
|
|
26
|
+
@return 20px;
|
|
27
|
+
} @else {
|
|
28
|
+
@return 14px;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
7
31
|
|
|
8
32
|
@mixin _ng-style-fixes {
|
|
9
33
|
// Trick to ensure flex functionality within router-outlet
|
|
@@ -18,8 +42,10 @@
|
|
|
18
42
|
}
|
|
19
43
|
}
|
|
20
44
|
|
|
45
|
+
@mixin _mat-style-fixes($theme) {
|
|
21
46
|
|
|
22
|
-
|
|
47
|
+
$iconSize: calc-form-icon-size($theme);
|
|
48
|
+
$iconPadding: calc-form-icon-padding($theme);
|
|
23
49
|
|
|
24
50
|
// Globally disable automatic scrolling of Material Drawer Container
|
|
25
51
|
.mat-drawer-inner-container {
|
|
@@ -88,7 +114,62 @@
|
|
|
88
114
|
Material Form Field Label stealing clicks
|
|
89
115
|
*******************************/
|
|
90
116
|
|
|
117
|
+
.mdc-text-field {
|
|
118
|
+
overflow: visible;
|
|
119
|
+
}
|
|
120
|
+
|
|
91
121
|
.mat-mdc-form-field {
|
|
122
|
+
$mat-mdc-form-field-label-transform: 0.75;
|
|
123
|
+
$mat-mdc-form-field-label-offset-x: -16px;
|
|
124
|
+
|
|
125
|
+
a {
|
|
126
|
+
display: flex;
|
|
127
|
+
justify-content: center;
|
|
128
|
+
align-items: center;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
/******************************
|
|
132
|
+
Fix text and hover placement of small filled form fields
|
|
133
|
+
*******************************/
|
|
134
|
+
|
|
135
|
+
$form-field-density: map-get($theme, elder, density, form-field);
|
|
136
|
+
|
|
137
|
+
@if $form-field-density < -1 {
|
|
138
|
+
.mdc-text-field--filled {
|
|
139
|
+
.mdc-floating-label--float-above {
|
|
140
|
+
transform: var( $mat-mdc-form-field-label-transform, translateY(-50%) translateX(calc(1 * (44px + var($mat-mdc-form-field-label-offset-x, 0px))))) !important;
|
|
141
|
+
}
|
|
142
|
+
.mat-mdc-form-field-infix {
|
|
143
|
+
padding-top: calc-padding-top-form-field-inflix($form-field-density) !important;
|
|
144
|
+
padding-bottom: 2px !important;
|
|
145
|
+
min-height: 40px; // (24 + 2*16) = 56px by default
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.mat-mdc-form-field-icon-prefix>.mat-icon, .mat-mdc-form-field-icon-suffix>.mat-icon {
|
|
151
|
+
width: $iconSize !important;
|
|
152
|
+
height: $iconSize !important;
|
|
153
|
+
padding: 0 $iconPadding !important;
|
|
154
|
+
display: flex;
|
|
155
|
+
justify-content: center;
|
|
156
|
+
align-items: center;
|
|
157
|
+
box-sizing: border-box;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.mat-mdc-icon-button .mat-mdc-button-touch-target {
|
|
161
|
+
width: $iconSize !important;
|
|
162
|
+
height: $iconSize !important;
|
|
163
|
+
line-height: 0;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.mat-mdc-icon-button.mat-mdc-button-base {
|
|
167
|
+
width: $iconSize !important;
|
|
168
|
+
height: $iconSize !important;
|
|
169
|
+
padding: 0 $iconPadding !important;
|
|
170
|
+
line-height: 0;
|
|
171
|
+
}
|
|
172
|
+
|
|
92
173
|
.mat-mdc-floating-label.mdc-floating-label {
|
|
93
174
|
pointer-events: none!important;
|
|
94
175
|
mat-label {
|
|
@@ -110,5 +191,8 @@
|
|
|
110
191
|
padding-right: 0;
|
|
111
192
|
}
|
|
112
193
|
}
|
|
194
|
+
}
|
|
113
195
|
|
|
196
|
+
.mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-floating-label {
|
|
197
|
+
display: block !important;
|
|
114
198
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* Based on https://github.com/btxtiger/mat-icon-button-sizes
|
|
3
3
|
* The default factor between button and icon size is *= 0.6
|
|
4
4
|
*/
|
|
5
|
-
@mixin matIconButtonSize($buttonSize, $iconSize) {
|
|
5
|
+
@mixin matIconButtonSize($buttonSize, $iconSize) {
|
|
6
6
|
width: $buttonSize !important;
|
|
7
7
|
height: $buttonSize !important;
|
|
8
8
|
padding: 0px !important;
|