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