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