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 #search-video {
   7   @include peertube-input-text($search-input-width);
   8
   9   @include padding-left(10px);
  10   @include padding-right(40px); // For the search icon
  11
  12   font-size: 14px;
  13
  14   &::placeholder {
  15     color: pvar(--inputPlaceholderColor);
  16   }
  17 }
  18
  19 .icon-search {
  20   @include icon(25px);
  21   @include margin-left(-35px);
  22
  23   height: 18px;
  24
  25   // yolo
  26   position: absolute;
  27   margin-top: 3.5px;
  28   right: 10px;
  29 }
  30
  31 .jump-to-suggestions {
  32   top: 100%;
  33   left: 0;
  34   z-index: z('search-typeahead');
  35   width: 100%;
  36 }
  37
  38 #typeahead-help,
  39 #typeahead-instructions,
  40 li.suggestion {
  41   border: 1px solid pvar(--mainBackgroundColor);
  42   background: pvar(--mainBackgroundColor);
  43   transition: .3s ease;
  44   transition-property: box-shadow;
  45   cursor: pointer;
  46
  47   // soft border-radius for the last suggestion and the link inside
  48   &:last-of-type {
  49     &,
  50     ::ng-deep a {
  51       border-bottom-right-radius: 3px;
  52       border-bottom-left-radius: 3px;
  53     }
  54   }
  55 }
  56
  57 #typeahead-help,
  58 #typeahead-instructions {
  59   margin-top: 10px;
  60   width: 100%;
  61   padding: .5rem 1rem;
  62   white-space: normal;
  63
  64   ul {
  65     list-style: none;
  66     padding: 0;
  67     margin-bottom: .5rem;
  68
  69     em {
  70       @include margin-right(0.2rem);
  71
  72       font-weight: 600;
  73       font-style: normal;
  74     }
  75   }
  76 }
  77
  78 #typeahead-container {
  79   input {
  80     border: 1px solid pvar(--mainBackgroundColor) !important;
  81     box-shadow: rgba(0, 0, 0, 0.1) 0 1px 20px 0;
  82     flex-grow: 1;
  83     transition: box-shadow .3s ease, width .2s ease;
  84   }
  85
  86   @media screen and (min-width: $mobile-view) {
  87     @include margin-left(10px);
  88   }
  89
  90   @media screen and (max-width: $small-view) {
  91     flex: 1;
  92
  93     input {
  94       width: 70px;
  95     }
  96   }
  97
  98   span {
  99     right: 10px;
 100   }
 101
 102   > div:last-child {
 103     // we have to switch the display and not the opacity,
 104     // to avoid clashing with the rest of the interface.
 105     display: none;
 106   }
 107
 108   &:focus,
 109   ::ng-deep &:focus-within {
 110     > div:last-child {
 111       @media screen and (min-width: $mobile-view) {
 112         display: initial !important;
 113       }
 114
 115       #typeahead-help,
 116       #typeahead-instructions,
 117       li.suggestion {
 118         box-shadow: rgba(0, 0, 0, 0.2) 0 10px 20px -5px;
 119       }
 120     }
 121
 122     ::ng-deep input {
 123       box-shadow: rgba(0, 0, 0, 0.2) 0 1px 20px 0;
 124       border-end-start-radius: 0;
 125       border-end-end-radius: 0;
 126
 127       @include media-breakpoint-up(lg) {
 128         width: 500px;
 129       }
 130     }
 131   }
 132 }
 133
 134 .glyphicon {
 135   top: 3px;
 136 }
 137
 138 .advanced-search-status {
 139   height: max-content;
 140   cursor: default;
 141
 142   &.c-help {
 143     cursor: help;
 144   }
 145 }
 146
 147 .small-title {
 148   @include in-content-small-title;
 149
 150   margin-bottom: .5rem;
 151 }
 152
 153 ::ng-deep my-suggestion {
 154   width: 100%;
 155 }