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-instructions,
  11 #jump-to-results {
  12   border: 1px solid var(--mainBackgroundColor);
  13   border-bottom-right-radius: 3px;
  14   border-bottom-left-radius: 3px;
  15   background: var(--mainBackgroundColor);
  16   transition: .3s ease;
  17   transition-property: box-shadow;
  18 }
  19
  20 #typeahead-instructions {
  21   margin-top: 10px;
  22   width: 100%;
  23   padding: .5rem 1rem;
  24
  25   ul {
  26     list-style: none;
  27     padding: 0;
  28     margin-bottom: .5rem;
  29
  30     em {
  31       font-weight: 600;
  32       margin-right: 0.2rem;
  33       font-style: normal;
  34     }
  35   }
  36 }
  37
  38 #typeahead-container {
  39   ::ng-deep input {
  40     border: 1px solid var(--mainBackgroundColor) !important;
  41     box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 20px 0px;
  42     flex-grow: 1;
  43     transition: box-shadow .3s ease, width .2s ease;
  44   }
  45
  46   ::ng-deep span {
  47     right: 10px;
  48   }
  49
  50   & > div:last-child {
  51     // we have to switch the display and not the opacity,
  52     // to avoid clashing with the rest of the interface.
  53     display: none;
  54   }
  55
  56   &:focus,
  57   ::ng-deep &:focus-within {
  58     & > div:last-child {
  59       display: initial !important;
  60
  61       #typeahead-instructions,
  62       #jump-to-results {
  63         box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 20px -5px;
  64       }
  65     }
  66
  67     ::ng-deep input {
  68       box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 20px 0px;
  69       border-end-start-radius: 0;
  70       border-end-end-radius: 0;
  71
  72       @media screen and (min-width: 900px) {
  73         width: 500px;
  74       }
  75     }
  76   }
  77 }
  78
  79 a.focus-visible {
  80   background-color: var(--mainHoverColor);
  81 }
  82
  83 a {
  84   @include disable-default-a-behaviour;
  85   width: 100%;
  86
  87   &, &:hover {
  88     color: var(--mainForegroundColor);
  89   }
  90 }
  91
  92 .bg-gray {
  93   background-color: var(--mainBackgroundColor);
  94 }
  95
  96 .text-gray-light {
  97   color: var(--mainForegroundColor);
  98 }
  99
 100 .glyphicon {
 101   top: 3px;
 102 }
 103
 104 .advanced-search-status {
 105   cursor: help;
 106 }
 107
 108 .small-title {
 109   @include in-content-small-title;
 110
 111   margin-bottom: .5rem;
 112 }
 113
 114 my-global-icon {
 115   width: 17px;
 116   position: relative;
 117   top: -2px;
 118   margin: 5px;
 119
 120   @include apply-svg-color(var(--mainForegroundColor))
 121 }