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

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 .no-result {
   5   height: 70vh;
   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   margin-left: 40px;
  15   margin-top: 40px;
  16
  17   .results-counter {
  18     font-size: 15px;
  19     padding-bottom: 20px;
  20     margin-bottom: 30px;
  21     border-bottom: 1px solid #DADADA;
  22
  23     .search-value {
  24       font-weight: $font-semibold;
  25     }
  26   }
  27
  28   .entry {
  29     display: flex;
  30     min-height: 130px;
  31     padding-bottom: 20px;
  32     margin-bottom: 20px;
  33
  34     &.video {
  35
  36       my-video-thumbnail {
  37         margin-right: 10px;
  38       }
  39
  40       .video-info {
  41         flex-grow: 1;
  42
  43         .video-info-name {
  44           @include disable-default-a-behaviour;
  45
  46           color: #000;
  47           display: block;
  48           width: fit-content;
  49           font-size: 18px;
  50           font-weight: $font-semibold;
  51         }
  52
  53         .video-info-date-views {
  54           font-size: 14px;
  55         }
  56
  57         .video-info-account {
  58           @include disable-default-a-behaviour;
  59
  60           display: block;
  61           width: fit-content;
  62           overflow: hidden;
  63           text-overflow: ellipsis;
  64           white-space: nowrap;
  65           font-size: 14px;
  66           color: #585858;
  67
  68           &:hover {
  69             color: #303030;
  70           }
  71         }
  72       }
  73     }
  74   }
  75 }
  76
  77 @media screen and (max-width: 800px) {
  78   .entry {
  79     flex-direction: column;
  80     height: auto;
  81     text-align: center;
  82
  83     &.video {
  84       .video-info-name {
  85         margin: auto;
  86       }
  87
  88       my-video-thumbnail {
  89         margin-right: 0;
  90       }
  91     }
  92   }
  93 }