_search.scss 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. // Import screen reader classes from Seedlet.
  2. @import "../../../seedlet/assets/sass/base/accessibility";
  3. .search-results {
  4. .site-main > * {
  5. padding: var(--global--spacing-vertical) 0;
  6. }
  7. .search-form {
  8. padding-bottom: 0;
  9. margin-bottom: var(--global--spacing-vertical);
  10. }
  11. .entry-title {
  12. font-size: var(--heading--font-size-h2);
  13. }
  14. .entry-header {
  15. margin-bottom: 0;
  16. }
  17. }
  18. .search-form {
  19. border-bottom: var(--form--border-width) solid var(--form--border-color);
  20. flex-direction: row-reverse;
  21. & > label {
  22. margin-right: 0;
  23. padding-left: 30px;
  24. position: relative;
  25. &:before {
  26. content: "";
  27. position: absolute;
  28. top: 0;
  29. left: 0;
  30. background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='search-icon' class='search-icon' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z'%3E%3C/path%3E%3C/svg%3E");
  31. background-repeat: no-repeat;
  32. background-position: center center;
  33. width: 24px;
  34. height: 100%;
  35. }
  36. }
  37. input[type="search"] {
  38. border: none;
  39. padding-top: var(--button--padding-vertical);
  40. padding-bottom: var(--button--padding-vertical);
  41. font-size: var(--global--font-size-sm);
  42. color: var(--entry-header--color);
  43. }
  44. input[type="submit"] {
  45. background: none;
  46. color: var(--entry-header--color);
  47. @extend .screen-reader-text;
  48. }
  49. }