_search.scss 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. @import "button-mixins";
  2. .wp-block-search {
  3. &.wp-block-search__button-inside {
  4. .wp-block-search__inside-wrapper {
  5. padding: var(--wp--custom--form--border--width);
  6. border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
  7. border-radius: var(--wp--custom--form--border--radius);
  8. .wp-block-search__input {
  9. padding: 0 var(--wp--custom--form--padding);
  10. }
  11. }
  12. }
  13. .wp-block-search__input {
  14. padding: var(--wp--custom--form--padding);
  15. border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--custom--form--border--color);
  16. }
  17. &.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button,
  18. .wp-block-search__button {
  19. @include button-hover-styles;
  20. &.has-icon {
  21. line-height: 0;
  22. }
  23. }
  24. .wp-block-search__input {
  25. &::placeholder {
  26. color: var(--wp--custom--form--color--text);
  27. opacity: 0.66;
  28. }
  29. }
  30. /* Block Styles */
  31. &.is-style-small-search {
  32. --wp--custom--button--typography--font-size: calc(0.8 * var(--wp--preset--font-size--small));
  33. .wp-block-search__input {
  34. padding: calc(0.5 * var(--wp--custom--form--padding));
  35. }
  36. }
  37. }