@db-ux/core-components 3.0.3 → 3.0.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 (11) hide show
  1. package/build/components/custom-select/custom-select.css +0 -12
  2. package/build/components/input/input.css +5 -7
  3. package/build/components/select/select.css +0 -12
  4. package/build/components/textarea/textarea.css +5 -7
  5. package/build/styles/absolute.css +4 -4
  6. package/build/styles/index.css +4 -4
  7. package/build/styles/internal/_form-components.scss +14 -6
  8. package/build/styles/relative.css +4 -4
  9. package/build/styles/rollup.css +4 -4
  10. package/build/styles/webpack.css +4 -4
  11. package/package.json +3 -3
package/build/styles/internal/_form-components.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @use "sass:map";
2
2
  @use "sass:string";
3
+ @use "sass:list";
3
4
  @use "@db-ux/core-foundations/build/styles/icons";
4
5
  @use "@db-ux/core-foundations/build/styles/fonts";
5
6
  @use "@db-ux/core-foundations/build/styles/variables";
@@ -9,6 +10,11 @@
9
10
 
10
11
  @forward "../visually-hidden";
11
12
 
13
+ // https://developer.mozilla.org/en-US/docs/Web/CSS/:read-only
14
+ $valid-read-only-form-fields: input, textarea;
15
+ // https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing
16
+ $valid-field-sizing-form-fields: input, textarea;
17
+
12
18
  $dropdown-icon-transition: transform variables.$db-transition-straight-emotional;
13
19
  $dropdown-icon-transform: rotate(-180deg);
14
20
 
@@ -372,7 +378,7 @@ $input-valid-types:
372
378
  background-color: colors.$db-adaptive-bg-basic-transparent-semi-hovered;
373
379
  }
374
380
 
375
- &:is(input, textarea) {
381
+ @if list.index($valid-field-sizing-form-fields, $selector) {
376
382
  /* see https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing */
377
383
  &[data-field-sizing="content"] {
378
384
  field-sizing: content;
@@ -383,11 +389,13 @@ $input-valid-types:
383
389
  }
384
390
  }
385
391
 
386
- &:is(input, textarea):not(:disabled):read-only {
387
- background-color: var(
388
- --db-textarea-read-only,
389
- #{colors.$db-adaptive-bg-basic-level-1-default}
390
- ) !important;
392
+ @if list.index($valid-read-only-form-fields, $selector) {
393
+ &:not(:disabled):read-only {
394
+ background-color: var(
395
+ --db-#{$selector}-read-only,
396
+ #{colors.$db-adaptive-bg-basic-transparent-full-default}
397
+ ) !important;
398
+ }
391
399
  }
392
400
  }
393
401