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 1rem 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; /* LTR */
  71   padding: 7px 8px 7px 32px;
  72   color: #464646;
  73   border: 1px solid #dbdbdb; /* LTR */
  74   border-right: none; /* LTR */
  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 [dir=rtl] .form-search {
  81   margin: 0 0 0 -2px;
  82   border-left: none;
  83   border-right: 1px solid #dbdbdb;
  84 }
  85
  86 .form-search:focus {
  87   margin: 0 0 -2px -2px; /* LTR */
  88   padding: 5px 8px 5px 32px;
  89   outline: none;
  90 }
  91 [dir=rtl] .form-search:focus {
  92   margin: 0 -2px -2px 0;
  93   background-position: 0.35em;
  94   border: 3px solid #00836d;
  95 }
  96
  97 .form-search::placeholder {
  98   opacity: 1;
  99 }
 100 .form-type-search .form-search {
 101   box-sizing: border-box; /* Override input[type="search"] of normalize.css */
 102 }
 103
 104 /* Search submit */
 105 .search-block-form .form-actions {
 106   position: relative;
 107   z-index: 1;
 108   margin-top: 0;
 109   margin-bottom: 0;
 110 }
 111 .search-block-form .form-submit,
 112 .search-form .form-submit {
 113   /* Take off the border radius on the left side as it bumps into the search field */
 114   border-top-left-radius: 0; /* LTR */
 115   border-bottom-left-radius: 0; /* LTR */
 116 }
 117 [dir=rtl] .search-block-form .form-submit,
 118 [dir=rtl] .search-form .form-submit {
 119   /* Take off the border radius on the left side as it bumps into the search field */
 120   border-top-left-radius: 4px;
 121   border-bottom-left-radius: 4px;
 122   border-top-right-radius: 0;
 123   border-bottom-right-radius: 0;
 124 }
 125
 126 .search-block-form .form-submit:focus,
 127 .search-block-form .form-submit:hover,
 128 .search-form .form-submit:focus,
 129 .search-form .form-submit:hover {
 130   margin: 0;
 131   border-top-left-radius: 4px; /* LTR */
 132   border-bottom-left-radius: 4px; /* LTR */
 133 }
 134 /* Apply border radius to all corners to override LTR and RTL (normal state) changes. */
 135 [dir=rtl] .search-block-form .form-submit:focus,
 136 [dir=rtl] .search-block-form .form-submit:hover,
 137 [dir=rtl] .search-form .form-submit:focus,
 138 [dir=rtl] .search-form .form-submit:hover {
 139   margin: 0;
 140   border-radius: 4px;
 141 }