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   @media screen and (min-width: 500px) {
  50     margin-left: 10px;
  51   }
  52
  53   @media screen and (max-width: 800px) {
  54     flex: 1;
  55
  56     ::ng-deep input {
  57       width: unset;
  58     }
  59   }
  60
  61   ::ng-deep span {
  62     right: 10px;
  63   }
  64
  65   & > div:last-child {
  66     // we have to switch the display and not the opacity,
  67     // to avoid clashing with the rest of the interface.
  68     display: none;
  69   }
  70
  71   &:focus,
  72   ::ng-deep &:focus-within {
  73     & > div:last-child {
  74       @media screen and (min-width: 500px) {
  75         display: initial !important;
  76       }
  77
  78       #typeahead-help,
  79       #typeahead-instructions,
  80       my-suggestions ::ng-deep ul {
  81         box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 20px -5px;
  82       }
  83     }
  84
  85     ::ng-deep input {
  86       box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 20px 0px;
  87       border-end-start-radius: 0;
  88       border-end-end-radius: 0;
  89
  90       @media screen and (min-width: 900px) {
  91         width: 500px;
  92       }
  93     }
  94   }
  95 }
  96
  97 .glyphicon {
  98   top: 3px;
  99 }
 100
 101 .advanced-search-status {
 102   height: max-content;
 103   cursor: default;
 104
 105   &.c-help {
 106     cursor: help;
 107   }
 108 }
 109
 110 .small-title {
 111   @include in-content-small-title;
 112
 113   margin-bottom: .5rem;
 114 }
 115
 116 ::ng-deep my-suggestion {
 117   width: 100%;
 118 }