_style.scss 2.2 KB

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