client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 .create-button {
   5   @include create-button('../../../assets/images/global/add.svg');
   6 }
   7
   8 /deep/ .action-button {
   9   &.action-button-delete {
  10     margin-right: 10px;
  11   }
  12 }
  13
  14 .video-channel {
  15   display: flex;
  16   min-height: 130px;
  17   padding-bottom: 20px;
  18   margin-bottom: 20px;
  19   border-bottom: 1px solid #C6C6C6;
  20
  21   img {
  22     @include avatar(80px);
  23
  24     margin-right: 10px;
  25   }
  26
  27   .video-channel-info {
  28     flex-grow: 1;
  29
  30     a.video-channel-names {
  31       @include disable-default-a-behaviour;
  32
  33       display: flex;
  34       color: #000;
  35
  36       .video-channel-display-name {
  37         font-weight: $font-semibold;
  38         font-size: 18px;
  39       }
  40
  41       .video-channel-name {
  42         font-size: 14px;
  43         color: #777272;
  44       }
  45     }
  46   }
  47
  48   .video-channel-buttons {
  49     min-width: 190px;
  50   }
  51 }
  52
  53 .video-channels-header {
  54   text-align: right;
  55   margin: 20px 0 50px;
  56 }
  57
  58 @media screen and (max-width: 800px) {
  59   .video-channels-header {
  60     text-align: center;
  61   }
  62
  63   .video-channel {
  64     flex-direction: column;
  65     height: auto;
  66     text-align: center;
  67
  68     .video-channel-names {
  69       justify-content: center;
  70     }
  71
  72     img {
  73       margin-right: 0;
  74     }
  75
  76     .video-channel-buttons {
  77       margin-top: 10px;
  78     }
  79   }
  80 }