_style.scss 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. .wp-block-search {
  2. flex-wrap: wrap;
  3. &.wp-block-search__button-inside {
  4. .wp-block-search__inside-wrapper{
  5. background: transparent;
  6. border: var(--form--border-width) solid var(--form--border-color);
  7. border-radius: var(--form--border-radius);
  8. .wp-block-search__input {
  9. padding: var(--form--spacing-unit);
  10. }
  11. .wp-block-search__button {
  12. padding: var(--button--padding-vertical) var(--button--padding-horizontal);
  13. &.has-icon {
  14. padding: 0;
  15. }
  16. }
  17. }
  18. }
  19. .wp-block-search__label {
  20. font-weight: normal;
  21. }
  22. .wp-block-search__input {
  23. font-family: var(--form--font-family);
  24. font-size: var(--form--font-size);
  25. line-height: var(--form--line-height);
  26. border: var(--form--border-width) solid var(--form--border-color);
  27. border-radius: var(--form--border-radius);
  28. color: var(--form--color-text);
  29. line-height: var(--global--line-height-body);
  30. max-width: inherit;
  31. margin-right: calc( .66 * var(--global--spacing-horizontal) );
  32. padding: var(--form--spacing-unit);
  33. background: transparent;
  34. &:focus {
  35. color: var(--form--color-text);
  36. border-color: var(--form--border-color);
  37. }
  38. }
  39. .wp-block-search__button {
  40. @include button-style();
  41. border: none;
  42. box-shadow: none;
  43. &.has-icon {
  44. transform: scaleX(-1);
  45. padding: 0;
  46. min-width: calc(2* var(--button--padding-vertical) + 16px);
  47. min-height: calc(2* var(--button--padding-vertical) + 16px);
  48. svg {
  49. fill: currentColor;
  50. width: 29px;
  51. height: 29px;
  52. }
  53. }
  54. }
  55. }