client/src/app/header/search-typeahead.component.scss

   1 @import '_mixins';
   2
   3 .jump-to-suggestions {
   4   top: 100%;
   5   left: 0;
   6   z-index: 35;
   7   width: 100%;
   8 }
   9
  10 #typeahead-help,
  11 #typeahead-instructions,
  12 my-suggestions ::ng-deep ul {
  13   border: 1px solid var(--mainBackgroundColor);
  14   border-bottom-right-radius: 3px;
  15   border-bottom-left-radius: 3px;
  16   background: var(--mainBackgroundColor);
  17   transition: .3s ease;
  18   transition-property: box-shadow;
  19 }
  20
  21 #typeahead-help,
  22 #typeahead-instructions {
  23   margin-top: 10px;
  24   width: 100%;
  25   padding: .5rem 1rem;
  26   white-space: normal;
  27
  28   ul {
  29     list-style: none;
  30     padding: 0;
  31     margin-bottom: .5rem;
  32
  33     em {
  34       font-weight: 600;
  35       margin-right: 0.2rem;
  36       font-style: normal;
  37     }
  38   }
  39 }
  40
  41 #typeahead-container {
  42   ::ng-deep input {
  43     border: 1px solid var(--mainBackgroundColor) !important;
  44     box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 20px 0px;
  45     flex-grow: 1;
  46     transition: box-shadow .3s ease, width .2s ease;
  47   }
  48
  49   ::ng-deep span {
  50     right: 10px;
  51   }
  52
  53   & > div:last-child {
  54     // we have to switch the display and not the opacity,
  55     // to avoid clashing with the rest of the interface.
  56     display: none;
  57   }
  58
  59   &:focus,
  60   ::ng-deep &:focus-within {
  61     & > div:last-child {
  62       display: initial !important;
  63
  64       #typeahead-help,
  65       #typeahead-instructions,
  66       my-suggestions ::ng-deep ul {
  67         box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 20px -5px;
  68       }
  69     }
  70
  71     ::ng-deep input {
  72       box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 20px 0px;
  73       border-end-start-radius: 0;
  74       border-end-end-radius: 0;
  75
  76       @media screen and (min-width: 900px) {
  77         width: 500px;
  78       }
  79     }
  80   }
  81 }
  82
  83 .glyphicon {
  84   top: 3px;
  85 }
  86
  87 .advanced-search-status {
  88   height: max-content;
  89   cursor: default;
  90
  91   &.c-help {
  92     cursor: help;
  93   }
  94 }
  95
  96 .small-title {
  97   @include in-content-small-title;
  98
  99   margin-bottom: .5rem;
 100 }
 101
 102 ::ng-deep my-suggestion {
 103   width: 100%;
 104 }