client/src/app/search/search.component.scss

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 .no-result {
   5   height: 40vh;
   6   display: flex;
   7   align-items: center;
   8   justify-content: center;
   9   font-size: 16px;
  10   font-weight: $font-semibold;
  11 }
  12
  13 .search-result {
  14   padding: 40px;
  15
  16   .results-header {
  17     font-size: 16px;
  18     padding-bottom: 20px;
  19     margin-bottom: 30px;
  20     border-bottom: 1px solid #DADADA;
  21
  22     .first-line {
  23       display: flex;
  24       flex-direction: row;
  25
  26       .results-counter {
  27         flex-grow: 1;
  28
  29         .search-value {
  30           font-weight: $font-semibold;
  31         }
  32       }
  33
  34       .results-filter-button {
  35
  36         .icon.icon-filter {
  37           @include icon(20px);
  38
  39           position: relative;
  40           top: -1px;
  41           margin-right: 5px;
  42           background-image: url('../../assets/images/search/filter.svg');
  43         }
  44       }
  45     }
  46
  47     .results-filter {
  48       // Animation when we show/hide the filters
  49       transition: max-height 0.3s;
  50       display: block !important;
  51       overflow: hidden !important;
  52       max-height: 0;
  53
  54       &.show {
  55         max-height: 1500px;
  56       }
  57     }
  58   }
  59
  60   .entry {
  61     display: flex;
  62     min-height: 130px;
  63     padding-bottom: 20px;
  64     margin-bottom: 20px;
  65
  66     &.video {
  67
  68       my-video-thumbnail {
  69         margin-right: 10px;
  70       }
  71
  72       .video-info {
  73         flex-grow: 1;
  74
  75         .video-info-name {
  76           @include disable-default-a-behaviour;
  77
  78           color: #000;
  79           display: block;
  80           width: fit-content;
  81           font-size: 18px;
  82           font-weight: $font-semibold;
  83         }
  84
  85         .video-info-date-views {
  86           font-size: 14px;
  87         }
  88
  89         .video-info-account {
  90           @include disable-default-a-behaviour;
  91
  92           display: block;
  93           width: fit-content;
  94           overflow: hidden;
  95           text-overflow: ellipsis;
  96           white-space: nowrap;
  97           font-size: 14px;
  98           color: #585858;
  99
 100           &:hover {
 101             color: #303030;
 102           }
 103         }
 104       }
 105     }
 106
 107     &.video-channel {
 108
 109       img {
 110         @include avatar(120px);
 111
 112         margin: 0 50px 0 40px;
 113       }
 114
 115       .video-channel-info {
 116         flex-grow: 1;
 117         width: fit-content;
 118
 119         .video-channel-names {
 120           @include disable-default-a-behaviour;
 121
 122           display: flex;
 123           align-items: baseline;
 124           color: #000;
 125           width: fit-content;
 126
 127           .video-channel-display-name {
 128             font-weight: $font-semibold;
 129             font-size: 18px;
 130           }
 131
 132           .video-channel-name {
 133             font-size: 14px;
 134             color: $grey-actor-name;
 135             margin-left: 5px;
 136           }
 137         }
 138       }
 139     }
 140   }
 141 }
 142
 143 @media screen and (max-width: 800px) {
 144   .search-result {
 145     margin: 20px 10px;
 146   }
 147
 148   .results-header {
 149     font-size: 15px !important;
 150   }
 151
 152   .entry {
 153     flex-direction: column;
 154     height: auto;
 155     text-align: center;
 156
 157     &.video {
 158       .video-info-name,
 159       .video-info-account {
 160         margin: auto;
 161       }
 162
 163       my-video-thumbnail {
 164         margin-right: 0 !important;
 165
 166         /deep/ .video-thumbnail {
 167           width: 100%;
 168           height: auto;
 169
 170           img {
 171             width: 100%;
 172             height: auto;
 173           }
 174         }
 175       }
 176     }
 177   }
 178 }