client/src/app/shared/shared-video-miniature/video-filters-header.component.scss

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3
   4 .root {
   5   margin-bottom: 45px;
   6 }
   7
   8 .first-row {
   9   display: flex;
  10   justify-content: space-between;
  11 }
  12
  13 .active-filters {
  14   display: flex;
  15   flex-wrap: wrap;
  16 }
  17
  18 .filters {
  19   display: flex;
  20   flex-wrap: wrap;
  21   margin-top: 25px;
  22
  23   border-bottom: 1px solid $separator-border-color;
  24
  25   input[type=radio] + label {
  26     font-weight: $font-regular;
  27   }
  28
  29   .form-group > label:first-child {
  30     display: block;
  31
  32     &.with-description {
  33       margin-bottom: 0;
  34     }
  35
  36     &:not(.with-description) {
  37       margin-bottom: 10px;
  38     }
  39   }
  40
  41   .form-group {
  42     @include margin-right(30px);
  43   }
  44 }
  45
  46 .pastille {
  47   @include margin-right(15px);
  48
  49   border-radius: 24px;
  50   padding: 4px 15px;
  51   margin-bottom: 15px;
  52   cursor: pointer;
  53 }
  54
  55 .filters-toggle {
  56   border: 2px solid pvar(--mainForegroundColor);
  57
  58   my-global-icon {
  59     @include margin-left(5px);
  60   }
  61
  62   &.active my-global-icon {
  63     position: relative;
  64     top: -1px;
  65   }
  66
  67   &:not(.active) {
  68     my-global-icon ::ng-deep svg {
  69       transform: rotate(180deg);
  70     }
  71   }
  72 }
  73
  74 // Than have an icon
  75 .filters-toggle,
  76 .active-filter.can-remove {
  77   padding: 4px 11px 4px 15px;
  78 }
  79
  80 .active-filter {
  81   background-color: pvar(--channelBackgroundColor);
  82   display: flex;
  83   align-items: center;
  84
  85   &:not(.can-remove) {
  86     cursor: default;
  87   }
  88
  89   &.can-remove:hover {
  90     opacity: 0.9;
  91   }
  92
  93   my-global-icon {
  94     @include margin-left(10px);
  95
  96     width: 16px;
  97     color: pvar(--greyForegroundColor);
  98   }
  99 }
 100
 101 .sort {
 102   min-width: 250px;
 103   max-width: 300px;
 104   height: min-content;
 105
 106   ::ng-deep {
 107     .ng-select-container {
 108       height: 33px !important;
 109     }
 110
 111     .ng-value strong {
 112       @include margin-left(5px);
 113     }
 114   }
 115 }
 116
 117 my-select-languages,
 118 my-select-categories {
 119   width: 300px;
 120   display: inline-block;
 121 }
 122
 123 .label-description {
 124   font-size: 12px;
 125   font-style: italic;
 126   margin-bottom: 10px;
 127
 128   a {
 129     color: pvar(--mainColor);
 130   }
 131 }
 132
 133 @media screen and (max-width: $small-view) {
 134   .first-row {
 135     flex-direction: column;
 136   }
 137 }