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

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