client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3
   4 .header {
   5   display: flex;
   6   margin-bottom: 20px;
   7
   8   a {
   9     @include peertube-button-link;
  10     @include grey-button;
  11     @include button-with-icon(18px, 3px, -1px);
  12   }
  13
  14   button {
  15     @include peertube-button;
  16     @include grey-button;
  17     @include button-with-icon(20px, 3px, -1px);
  18   }
  19
  20   .peertube-select-container {
  21     @include peertube-select-container(auto);
  22   }
  23 }
  24
  25 @media screen and (max-width: $mobile-view) {
  26   .header {
  27     flex-direction: column;
  28
  29     > :first-child,
  30     .peertube-select-container {
  31       margin-bottom: 15px;
  32     }
  33
  34     .peertube-select-container {
  35       @include margin-left(0 !important);
  36     }
  37   }
  38 }
  39
  40 @media screen and (min-width: $mobile-view) and (max-width: $small-view) {
  41   .header {
  42     a {
  43       font-size: 0;
  44       padding: 0 13px;
  45     }
  46
  47     .peertube-select-container {
  48       width: auto !important;
  49     }
  50   }
  51 }
  52
  53 @media screen and (min-width: $mobile-view) and (max-width: #{$small-view + $menu-width}) {
  54   :host-context(.main-col:not(.expanded)) {
  55     .header {
  56       a {
  57         font-size: 0;
  58         padding: 0 13px;
  59       }
  60
  61       .peertube-select-container {
  62         width: auto !important;
  63       }
  64     }
  65   }
  66 }