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

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 (3) hide show
  1. package/overrides/_form-field.scss +57 -116
  2. package/overrides/_select.scss +8 -0
  3. package/package.json +1 -1
package/overrides/_form-field.scss CHANGED
@@ -92,128 +92,69 @@
92
92
  /* BEGINNING - HERE TO FORCE READONLY STATE */
93
93
  // TODO : should use the var as much as possible !!
94
94
 
95
- .onemrva-readonly {
95
+ .onemrva-readonly,
96
+ form.onemrva-readonly {
96
97
  pointer-events: none;
97
- input,
98
- select,
99
- textarea {
100
- &::placeholder {
101
- opacity: 0 !important;
102
- }
98
+ &,
99
+ * {
100
+ cursor: not-allowed !important;
103
101
  }
104
102
 
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
- );
103
+ &:not(.mat-form-field-disabled),
104
+ mat-form-field:not(.mat-form-field-disabled) {
105
+ input,
106
+ select,
107
+ textarea {
108
+ &::placeholder {
109
+ opacity: 0 !important;
110
+ }
111
+ }
114
112
 
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;
121
- }
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
- }
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)
113
+ mat-label,
114
+ label {
115
+ pointer-events: none !important;
116
+ }
117
+
118
+ .mat-select-counter,
119
+ button[type='submit'] {
120
+ display: none !important;
121
+ }
122
+
123
+ @include mat.form-field-overrides(
124
+ (
125
+ outlined-outline-width: 0px,
126
+ outlined-focus-outline-width: 0px,
127
+ outlined-label-text-weight: var(--mat-sys-label-small-weight),
128
+ subscript-text-weight: bold,
138
129
  )
139
130
  );
131
+
132
+ mat-hint,
133
+ .mat-mdc-form-field-icon-suffix,
134
+ .mat-mdc-select-arrow-wrapper,
135
+ .mat-mdc-select-placeholder,
136
+ .mat-mdc-form-field-icon-prefix {
137
+ display: none;
138
+ }
139
+ .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper {
140
+ padding-left: max(
141
+ 16px,
142
+ var(
143
+ --mat-form-field-outlined-container-shape,
144
+ var(--mat-sys-corner-extra-small)
145
+ ) +
146
+ 4px
147
+ );
148
+ }
149
+ .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper {
150
+ padding-right: max(
151
+ 16px,
152
+ var(
153
+ --mat-form-field-outlined-container-shape,
154
+ var(--mat-sys-corner-extra-small)
155
+ )
156
+ );
157
+ }
140
158
  }
141
159
  }
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
- //}
218
- /* END - HERE TO FORCE READONLY STATE */
219
160
  }
package/overrides/_select.scss CHANGED
@@ -10,6 +10,14 @@
10
10
  }
11
11
  }
12
12
  }
13
+
14
+ .onemrva-readonly {
15
+ .mat-mdc-select-value-text,
16
+ .mat-mdc-select-value {
17
+ white-space: unset;
18
+ }
19
+ }
20
+
13
21
  .cdk-overlay-container {
14
22
  .mat-mdc-select-panel {
15
23
  //overflow: hidden;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onemrvapublic/design-system-theme",
3
- "version": "v20.3.0-develop.4",
3
+ "version": "v20.3.0-develop.5",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },