Skip to content

Commit

Permalink
Search block: fix overflow width (#49192)
Browse files Browse the repository at this point in the history
* fix search block width for button inside variant

* address review feedback
  • Loading branch information
madhusudhand authored Mar 22, 2023
1 parent 1dfec0a commit fd98542
Showing 1 changed file with 16 additions and 12 deletions.
28 changes: 16 additions & 12 deletions packages/block-library/src/search/style.scss
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
$button-spacing-x: $grid-unit-10 + math.div($grid-unit-05, 2); // 10px
$button-spacing-y: math.div($grid-unit-15, 2); // 6px

.wp-block-search__button {
margin-left: 0.625em;
margin-left: $button-spacing-x;
word-break: normal;

&.has-icon {
line-height: 0;
}

svg {
min-width: 1.5em;
min-height: 1.5em;
min-width: $grid-unit-30;
min-height: $grid-unit-30;
fill: currentColor;
vertical-align: text-bottom;
}
Expand All @@ -17,8 +20,8 @@
// These rules are set to zero specificity to keep the default styles for search buttons.
// They are needed for backwards compatibility.
:where(.wp-block-search__button) {
border: 1px solid #ccc;
padding: 0.375em 0.625em;
border: 1px solid $gray-400;
padding: $button-spacing-y $button-spacing-x;
}

.wp-block-search__inside-wrapper {
Expand All @@ -33,12 +36,12 @@
}

.wp-block-search__input {
padding: 8px;
padding: $grid-unit-10;
flex-grow: 1;
margin-left: 0;
margin-right: 0;
min-width: 3em;
border: 1px solid #949494;
min-width: 3rem;
border: 1px solid $gray-600;
// !important used to forcibly prevent undesired application of
// text-decoration styles on the input field.
text-decoration: unset !important;
Expand All @@ -52,13 +55,14 @@

// We are lowering the specificity so that the button element can override the rule for the button inside the search block.
:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
padding: 4px;
border: 1px solid #949494;
padding: $grid-unit-05;
border: 1px solid $gray-600;
box-sizing: border-box;

.wp-block-search__input {
border-radius: 0;
border: none;
padding: 0 0 0 0.25em;
padding: 0 $grid-unit-05;

&:focus {
outline: none;
Expand All @@ -67,7 +71,7 @@

// For lower specificity.
:where(.wp-block-search__button) {
padding: 0.125em 0.5em;
padding: $grid-unit-05 $grid-unit-10;
}
}

Expand Down

0 comments on commit fd98542

Please sign in to comment.