@onemrvapublic/design-system-theme 20.3.0-develop.3 → 20.3.0-develop.4

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 (2) hide show
  1. package/overrides/_form-field.scss +115 -36
  2. package/package.json +1 -1
package/overrides/_form-field.scss CHANGED
@@ -14,7 +14,7 @@
14
14
  outlined-hover-outline-color: var(--mat-sys-on-surface),
15
15
  outlined-outline-width: 1px,
16
16
  outlined-focus-outline-width: 2px,
17
- outlined-label-text-weight: var(--mat-sys-label-small),
17
+ outlined-label-text-weight: var(--mat-sys-label-small-weight),
18
18
  )
19
19
  );
20
20
 
@@ -90,51 +90,130 @@
90
90
  }
91
91
 
92
92
  /* BEGINNING - HERE TO FORCE READONLY STATE */
93
- mat-form-field.onemrva-readonly,
93
+ // TODO : should use the var as much as possible !!
94
+
94
95
  .onemrva-readonly {
96
+ pointer-events: none;
95
97
  input,
98
+ select,
96
99
  textarea {
97
- font-weight: 700;
98
- }
99
-
100
- .mdc-text-field--outlined:not(.mdc-text-field--disabled)
101
- .mat-mdc-notch-piece {
102
- border: 0;
103
- }
104
-
105
- .mat-mdc-text-field-wrapper.mdc-text-field mdc-text-field--outlined {
106
- .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(
107
- .mdc-text-field--focused
108
- ):hover
109
- .mat-mdc-notch-piece {
110
- border: 0;
100
+ &::placeholder {
101
+ opacity: 0 !important;
111
102
  }
112
103
  }
113
104
 
114
- .mdc-text-field--outlined:not(
115
- .mdc-text-field--disabled
116
- ).mdc-text-field--focused
117
- .mdc-notched-outline
118
- .mat-mdc-notch-piece {
119
- border-width: 0;
120
- }
105
+ @include mat.form-field-overrides(
106
+ (
107
+ outlined-outline-width: 0px,
108
+ outlined-focus-outline-width: 0px,
109
+ container-text-weight: 700,
110
+ outlined-label-text-weight: var(--mat-sys-label-small-weight),
111
+ subscript-text-weight: bold,
112
+ )
113
+ );
121
114
 
122
- .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(
123
- .mdc-text-field--focused
124
- ):hover
125
- .mat-mdc-notch-piece {
126
- border-color: var(--mat-form-field-outlined-outline-color);
115
+ mat-hint,
116
+ .mat-mdc-form-field-icon-suffix,
117
+ .mat-mdc-select-arrow-wrapper,
118
+ .mat-mdc-select-placeholder,
119
+ .mat-mdc-form-field-icon-prefix {
120
+ display: none;
127
121
  }
128
-
129
- .onemrva-input-phone-number .onemrva-text-number {
130
- padding-left: 0 !important;
122
+ .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper {
123
+ padding-left: max(
124
+ 16px,
125
+ var(
126
+ --mat-form-field-outlined-container-shape,
127
+ var(--mat-sys-corner-extra-small)
128
+ ) +
129
+ 4px
130
+ );
131
131
  }
132
-
133
- .mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align,
134
- mat-timepicker-toggle,
135
- .mat-mdc-form-field-text-prefix {
136
- display: none;
132
+ .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper {
133
+ padding-right: max(
134
+ 16px,
135
+ var(
136
+ --mat-form-field-outlined-container-shape,
137
+ var(--mat-sys-corner-extra-small)
138
+ )
139
+ );
137
140
  }
138
141
  }
142
+
143
+ //mat-form-field.onemrva-readonly,
144
+ //.onemrva-readonly {
145
+ // margin: var(--spacer-and-half) 0;
146
+ // pointer-events: none;
147
+ // input,
148
+ // textarea {
149
+ // &::placeholder {
150
+ // opacity: 0;
151
+ // }
152
+ // font-weight: 700;
153
+ // }
154
+ // .mat-mdc-select {
155
+ // .mat-mdc-select-arrow {
156
+ // display: none; /* hide the dropdown arrow */
157
+ // }
158
+ // &.mat-mdc-select-disabled .mat-mdc-select-trigger {
159
+ // opacity: 1;
160
+ // color: inherit;
161
+ // }
162
+ // .mat-mdc-text-field-wrapper {
163
+ // background: transparent;
164
+ // }
165
+ // }
166
+ // .mat-mdc-form-field-icon-suffix,
167
+ // .mat-mdc-form-field-icon-prefix {
168
+ // display: none;
169
+ // }
170
+ //
171
+ // .mat-mdc-form-field-focus-overlay,
172
+ // .mdc-line-ripple {
173
+ // display: none !important;
174
+ // }
175
+ //
176
+ //
177
+ //
178
+ // .mdc-text-field--outlined:not(.mdc-text-field--disabled)
179
+ // .mat-mdc-notch-piece {
180
+ // border: 0;
181
+ // }
182
+ //
183
+ // .mat-mdc-text-field-wrapper.mdc-text-field mdc-text-field--outlined {
184
+ // .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(
185
+ // .mdc-text-field--focused
186
+ // ):hover
187
+ // .mat-mdc-notch-piece {
188
+ // border: 0;
189
+ // }
190
+ // }
191
+ //
192
+ // .mdc-text-field--outlined:not(
193
+ // .mdc-text-field--disabled
194
+ // ).mdc-text-field--focused
195
+ // .mdc-notched-outline
196
+ // .mat-mdc-notch-piece {
197
+ // border-width: 0;
198
+ // }
199
+ //
200
+ // .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(
201
+ // .mdc-text-field--focused
202
+ // ):hover
203
+ // .mat-mdc-notch-piece {
204
+ // border-color: var(--mat-form-field-outlined-outline-color);
205
+ // }
206
+ //
207
+ // .onemrva-input-phone-number .onemrva-text-number {
208
+ // padding-left: 0 !important;
209
+ // }
210
+ //
211
+ // .mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align,
212
+ // mat-timepicker-toggle,
213
+ // mat-datepicker-toggle,
214
+ // .mat-mdc-form-field-text-prefix {
215
+ // display: none;
216
+ // }
217
+ //}
139
218
  /* END - HERE TO FORCE READONLY STATE */
140
219
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onemrvapublic/design-system-theme",
3
- "version": "v20.3.0-develop.3",
3
+ "version": "v20.3.0-develop.4",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },