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

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