3 * This file is used to style the search block.
14 @media screen and (min-width: 48em) {
21 .search-block-form form {
24 margin-bottom: 1.2rem;
28 /* Compensate for focus styling that offsets left alignment of icon */
32 @media screen and (min-width: 48em) {
38 /* Search icon for mobile */
41 justify-content: flex-end;
45 /* Centres the icon when focused/hovered */
51 outline: 3px solid #00836d;
52 background-color: #fff;
68 max-width: calc(100vw - 6.25em);
71 padding: 7px 8px 7px 32px;
73 border: 1px solid #dbdbdb;
76 background: url(../../../../images/svg/search.svg) no-repeat 0.5em center #fff;
82 margin: 0 0 -2px -2px;
83 padding: 5px 8px 5px 32px;
87 .form-search::placeholder {
90 .form-type-search .form-search {
91 box-sizing: border-box; /* Override input[type="search"] of normalize.css */
95 .search-block-form .form-actions {
101 .search-block-form .form-submit,
102 .search-form .form-submit {
103 /* Take off the border radius on the left side as it bumps into the search field */
104 border-top-left-radius: 0;
105 border-bottom-left-radius: 0;
108 .search-block-form .form-submit:focus,
109 .search-block-form .form-submit:hover,
110 .search-form .form-submit:focus,
111 .search-form .form-submit:hover {
113 border-top-left-radius: 4px;
114 border-bottom-left-radius: 4px;