www.aleph1.co.uk Git - yaffs-website/blob - web/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css

   1 /**
   2  * @file
   3  * This file is used to style the search block.
   4  */
   5
   6 .search-form + h2 {
   7   margin: 0 14px 1rem;
   8 }
   9
  10 .search-block-form {
  11   display: none;
  12 }
  13
  14 @media screen and (min-width: 48em) {
  15   .search-block-form {
  16     display: block;
  17     flex: 0 1 50%;
  18   }
  19 }
  20
  21 .search-block-form form {
  22   display: flex;
  23   margin-top: 1.3rem;
  24   margin-bottom: 1.2rem;
  25 }
  26
  27 .search-iconwrap {
  28   /* Compensate for focus styling that offsets left alignment of icon */
  29   margin-left: -7px;
  30 }
  31
  32 @media screen and (min-width: 48em) {
  33   .search-iconwrap {
  34     display: none;
  35   }
  36 }
  37
  38 /* Search icon for mobile */
  39 .search-link {
  40   display: flex;
  41   justify-content: flex-end;
  42   align-items: center;
  43   width: 40px;
  44   height: 40px;
  45   /* Centres the icon when focused/hovered */
  46   margin-right: -7px;
  47   padding-right: 7px;
  48 }
  49 .search-link:focus,
  50 .search-link:hover {
  51   outline: 3px solid #00836d;
  52   background-color: #fff;
  53 }
  54 .search-link svg {
  55   display: block;
  56   width: 26px;
  57   height: auto;
  58 }
  59
  60 /* Search input */
  61 .form-type-search {
  62   margin-top: 0;
  63   margin-bottom: 0;
  64 }
  65
  66 .form-search {
  67   width: 20em;
  68   max-width: calc(100vw - 6.25em);
  69   height: auto;
  70   margin: 0 -2px 0 0;
  71   padding: 7px 8px 7px 32px;
  72   color: #464646;
  73   border: 1px solid #dbdbdb;
  74   border-right: none;
  75   border-radius: 3px;
  76   background: url(../../../../images/svg/search.svg) no-repeat 0.5em center #fff;
  77   font-size: 0.875rem;
  78   line-height: normal;
  79 }
  80
  81 .form-search:focus {
  82   margin: 0 0 -2px -2px;
  83   padding: 5px 8px 5px 32px;
  84   outline: none;
  85 }
  86
  87 .form-search::placeholder {
  88   opacity: 1;
  89 }
  90 .form-type-search .form-search {
  91   box-sizing: border-box; /* Override input[type="search"] of normalize.css */
  92 }
  93
  94 /* Search submit */
  95 .search-block-form .form-actions {
  96   position: relative;
  97   z-index: 1;
  98   margin-top: 0;
  99   margin-bottom: 0;
 100 }
 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;
 106 }
 107
 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 {
 112   margin: 0;
 113   border-top-left-radius: 4px;
 114   border-bottom-left-radius: 4px;
 115 }