123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 |
- .wp-block-search {
- flex-wrap: wrap;
- &.wp-block-search__button-inside {
- .wp-block-search__inside-wrapper{
- background: #{map-deep-get($config-global, "color", "white")};
- color: #{map-deep-get($config-elements, "form", "color", "text")};
- border: #{map-deep-get($config-elements, "form", "border", "width")} solid #{map-deep-get($config-elements, "form", "color", "border")};
- border-radius: #{map-deep-get($config-elements, "form", "border", "radius")};
- .wp-block-search__input {
- padding: #{map-deep-get($config-elements, "form", "padding")};
- }
- .wp-block-search__button {
- padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")};
- &.has-icon {
- padding: 0;
- }
- }
- }
- }
- .wp-block-search__label {
- font-weight: normal;
- }
- .wp-block-search__input {
- color: #{map-deep-get($config-elements, "form", "color", "text")};
- border: #{map-deep-get($config-elements, "form", "border", "width")} solid #{map-deep-get($config-elements, "form", "color", "border")};
- border-radius: #{map-deep-get($config-elements, "form", "border", "radius")};
- padding: #{map-deep-get($config-elements, "form", "padding")};
- font-size: #{map-deep-get($config-global, "font", "size", "base")};
- line-height: #{map-deep-get($config-global, "font", "size", "base")};
- @include font-family( map-deep-get($config-button, "font", "family") );
- max-width: inherit;
- margin-right: calc( .66 * #{map-deep-get($config-button, "padding", "horizontal")} );
- background: #{map-deep-get($config-global, "color", "white")};
- &:focus {
- color: #{map-deep-get($config-elements, "form", "color", "text")};
- border-color: #{map-deep-get($config-elements, "form", "color", "border")};
- }
- }
- .wp-block-search__button {
- @extend %button-style;
- border: none;
- box-shadow: none;
- &.has-icon {
- transform: scaleX(-1);
- padding: 0;
- min-width: calc(2* #{map-deep-get($config-button, "padding", "vertical")} + #{map-deep-get($config-global, "font", "size", "base")} + 4px);
- min-height: calc(2* #{map-deep-get($config-button, "padding", "vertical")} + #{map-deep-get($config-global, "font", "size", "base")} + 4px);
- svg {
- fill: currentColor;
- width: 29px;
- height: 29px;
- }
- }
- }
- }
|