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   &:focus-visible {
  55     outline: pvar(--mainColor) auto 1px;
  56   }
  57 }
  58
  59 .filters-toggle {
  60   border: 2px solid pvar(--mainForegroundColor);
  61
  62   my-global-icon {
  63     @include margin-left(5px);
  64   }
  65
  66   &.active my-global-icon {
  67     position: relative;
  68     top: -1px;
  69   }
  70
  71   &:not(.active) {
  72     my-global-icon ::ng-deep svg {
  73       transform: rotate(180deg);
  74     }
  75   }
  76 }
  77
  78 // Than have an icon
  79 .filters-toggle,
  80 .active-filter.can-remove {
  81   padding: 4px 11px 4px 15px;
  82 }
  83
  84 .active-filter {
  85   background-color: pvar(--channelBackgroundColor);
  86   display: flex;
  87   align-items: center;
  88
  89   &:not(.can-remove) {
  90     cursor: default;
  91   }
  92
  93   &.can-remove:hover {
  94     opacity: 0.9;
  95   }
  96
  97   my-global-icon {
  98     @include margin-left(10px);
  99
 100     width: 16px;
 101     color: pvar(--greyForegroundColor);
 102   }
 103 }
 104
 105 .sort {
 106   min-width: 250px;
 107   max-width: 300px;
 108   height: min-content;
 109
 110   ::ng-deep {
 111     .ng-select-container {
 112       height: 33px !important;
 113     }
 114
 115     .ng-value strong {
 116       @include margin-left(5px);
 117     }
 118   }
 119 }
 120
 121 my-select-languages,
 122 my-select-categories {
 123   width: 300px;
 124   display: inline-block;
 125 }
 126
 127 .label-description {
 128   font-size: 12px;
 129   font-style: italic;
 130   margin-bottom: 10px;
 131
 132   a {
 133     color: pvar(--mainColor);
 134   }
 135 }
 136
 137 @media screen and (max-width: $small-view) {
 138   .first-row {
 139     flex-direction: column;
 140   }
 141 }