@eui/styles 16.2.2 → 16.2.3-snapshot-1694731195827

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 (13) hide show
  1. package/dist/styles/eui-extra-utilities.css +1 -1
  2. package/dist/styles/eui-extra-utilities.css.map +1 -1
  3. package/dist/styles/eui-legacy.css +1 -1
  4. package/dist/styles/eui-legacy.css.map +1 -1
  5. package/dist/styles/eui-print.css +1 -1
  6. package/dist/styles/eui-print.css.map +1 -1
  7. package/dist/styles/eui-showcase-all.css +2 -2
  8. package/dist/styles/eui-showcase-all.css.map +1 -1
  9. package/dist/styles/eui.css +1 -1
  10. package/dist/styles/eui.css.map +1 -1
  11. package/package.json +2 -2
  12. package/src/styles/02-base/mixins/_eui-clearable-input.scss +26 -13
  13. package/src/styles/02-base/mixins/_eui-input.scss +7 -5
package/package.json CHANGED
@@ -9,6 +9,6 @@
9
9
  "description": "eUI core styling",
10
10
  "author": "ec.europa.eui@gmail.com",
11
11
  "license": "EUPL-1.1",
12
- "version": "16.2.2",
13
- "tag": "latest"
12
+ "version": "16.2.3-snapshot-1694731195827",
13
+ "tag": "snapshot"
14
14
  }
package/src/styles/02-base/mixins/_eui-clearable-input.scss CHANGED
@@ -1,18 +1,31 @@
1
+ // This mixin sets the layout of the euiClearable directive
1
2
  @mixin eui-clearable-input() {
2
- align-items: center;
3
- background-color: v(eui-base-color-white);
4
- color: v(eui-base-color-grey-35);
5
- cursor: pointer;
6
- display: flex;
7
- font-size: v(eui-base-font-size-m);
8
- user-select: none;
3
+ .eui-clearable-wrapper {
4
+ align-items: center;
5
+ display: flex;
6
+ position: relative;
7
+ width: 100%;
9
8
 
10
- &:before {
11
- position: absolute;
12
- right: v(eui-base-spacing-s);
13
- }
9
+ .eui-input-text--clearable-icon {
10
+ bottom: calc(#{v(eui-base-spacing-s)} - 2px);
11
+ cursor: pointer;
12
+ position: absolute;
13
+ right: v(eui-base-spacing-s);
14
+ user-select: none;
15
+ visibility: visible;
16
+ z-index: v(eui-base-z-index-clearable-icon);
17
+
18
+ &:focus {
19
+ @include eui-accessible-focus-outline();
20
+ }
21
+
22
+ > svg {
23
+ fill: v(eui-base-color-grey-35);
14
24
 
15
- &:hover {
16
- color: v(eui-base-color-grey-100);
25
+ &:hover {
26
+ fill: v(eui-base-color-danger-100);
27
+ }
28
+ }
29
+ }
17
30
  }
18
31
  }
package/src/styles/02-base/mixins/_eui-input.scss CHANGED
@@ -2,7 +2,6 @@
2
2
  // Used for: eui-input-text, eui-input-number, eui-select, eui-textarea, eui-datepicker, eui-autocomplete
3
3
  @mixin eui-input() {
4
4
  @include eui-font(m, ui);
5
- @include eui-accessible-focus-border();
6
5
  appearance: none;
7
6
  background-color: v(eui-base-color-white);
8
7
  border: 1px solid v(eui-base-color-grey-50);
@@ -12,6 +11,8 @@
12
11
  min-height: calc(#{v(eui-base-spacing-2xl)} + #{v(eui-base-spacing-2xs)}); // DS aligned 44px
13
12
  padding: calc(#{v(eui-base-spacing-s)} - 1px); // Trick to have inner paddings without exceeding default min-height
14
13
  width: 100%;
14
+ @include eui-accessible-focus-border();
15
+ @include eui-clearable-input();
15
16
 
16
17
  &::placeholder {
17
18
  color: v(eui-base-color-grey-50) !important;
@@ -51,21 +52,22 @@
51
52
  padding-right: v(eui-base-spacing-2xl);
52
53
 
53
54
  &-icon {
54
- visibility: visible;
55
+ bottom: calc(#{v(eui-base-spacing-s)} - 2px);
56
+ cursor: pointer;
55
57
  position: absolute;
56
58
  right: v(eui-base-spacing-s);
57
- cursor: pointer;
58
59
  user-select: none;
60
+ visibility: visible;
59
61
 
60
62
  &:focus {
61
- @include eui-accessible-focus-border-rounded();
63
+ @include eui-accessible-focus-outline();
62
64
  }
63
65
 
64
66
  > svg {
65
67
  fill: v(eui-base-color-grey-35);
66
68
 
67
69
  &:hover {
68
- fill: v(eui-base-color-grey-100);
70
+ fill: v(eui-base-color-danger-100);
69
71
  }
70
72
  }
71
73
  }