| @@ -3,33 +3,50 @@ | ||
| 3 | 3 | align-items: center; |
| 4 | 4 | gap: 12px; |
| 5 | 5 | padding: 0 0 12px 0; |
| 6 | 6 | |
| 7 | + // The field's frame lives on the wrapper, not the input, and the icon is | |
| 8 | + // a flex sibling rather than an overlay. Themes style bare inputs | |
| 9 | + // (`input[type="text"]`) which outranks a single class, so an overlaid | |
| 10 | + // icon ended up sitting on top of the placeholder whenever a theme | |
| 11 | + // replaced our padding. Laid out in flow, they cannot collide. | |
| 7 | 12 | &__input-wrapper { |
| 8 | - position: relative; | |
| 9 | 13 | display: flex; |
| 10 | 14 | align-items: center; |
| 15 | + gap: 8px; | |
| 11 | 16 | flex: 0 0 auto; |
| 12 | 17 | max-width: 300px; |
| 18 | + padding: 8px 10px; | |
| 19 | + border: 1px solid var(--wp--preset--color--contrast, #1e1e1e); | |
| 20 | + border-radius: 4px; | |
| 21 | + | |
| 22 | + &:focus-within { | |
| 23 | + border-color: var(--wp-admin-theme-color, #007cba); | |
| 24 | + box-shadow: 0 0 0 1px var(--wp-admin-theme-color, #007cba); | |
| 25 | + } | |
| 13 | 26 | } |
| 14 | 27 | |
| 15 | 28 | &__icon { |
| 16 | - position: absolute; | |
| 17 | - left: 10px; | |
| 29 | + display: flex; | |
| 30 | + flex: 0 0 auto; | |
| 18 | 31 | color: #757575; |
| 19 | 32 | pointer-events: none; |
| 20 | 33 | } |
| 21 | 34 | |
| 22 | - &__input { | |
| 23 | - padding: 8px 36px 8px 36px; | |
| 24 | - border: 1px solid var(--wp--preset--color--contrast, #1e1e1e); | |
| 25 | - border-radius: 4px; | |
| 35 | + // Scoped one level deeper so a theme's `input[type="text"]` rules do not | |
| 36 | + // win over the reset. | |
| 37 | + .tableberg-search__input { | |
| 38 | + flex: 1 1 auto; | |
| 39 | + min-width: 0; | |
| 40 | + margin: 0; | |
| 41 | + padding: 0; | |
| 42 | + border: 0; | |
| 43 | + border-radius: 0; | |
| 44 | + background-color: transparent; | |
| 45 | + color: inherit; | |
| 26 | 46 | font-size: 0.875em; |
| 27 | 47 | font-family: inherit; |
| 28 | 48 | line-height: 1.4; |
| 29 | - width: 100%; | |
| 30 | - background-color: transparent; | |
| 31 | - color: inherit; | |
| 32 | 49 | |
| 33 | 50 | &::placeholder { |
| 34 | 51 | color: #757575; |
| 35 | 52 | } |
| @@ -34,26 +51,26 @@ | ||
| 34 | 51 | color: #757575; |
| 35 | 52 | } |
| 36 | 53 | |
| 37 | 54 | &:focus { |
| 55 | + border: 0; | |
| 38 | 56 | outline: none; |
| 39 | - border-color: var(--wp-admin-theme-color, #007cba); | |
| 40 | - box-shadow: 0 0 0 1px var(--wp-admin-theme-color, #007cba); | |
| 57 | + box-shadow: none; | |
| 41 | 58 | } |
| 42 | 59 | } |
| 43 | 60 | |
| 44 | - &__clear { | |
| 45 | - position: absolute; | |
| 46 | - right: 6px; | |
| 61 | + .tableberg-search__clear { | |
| 62 | + flex: 0 0 auto; | |
| 63 | + display: flex; | |
| 64 | + align-items: center; | |
| 65 | + justify-content: center; | |
| 66 | + margin: 0; | |
| 67 | + padding: 0; | |
| 47 | 68 | background: transparent; |
| 48 | 69 | border: none; |
| 49 | - padding: 4px; | |
| 70 | + border-radius: 2px; | |
| 50 | 71 | cursor: pointer; |
| 51 | 72 | color: #757575; |
| 52 | - display: flex; | |
| 53 | - align-items: center; | |
| 54 | - justify-content: center; | |
| 55 | - border-radius: 2px; | |
| 56 | 73 | |
| 57 | 74 | &:hover { |
| 58 | 75 | color: var(--wp--preset--color--contrast, #1e1e1e); |
| 59 | 76 | background-color: rgba(0, 0, 0, 0.05); |
