client/src/sass/_mixins.scss

   1 @mixin disable-default-a-behaviour {
   2   &:hover, &:focus, &:active {
   3     text-decoration: none !important;
   4     outline: none !important;
   5   }
   6 }
   7
   8 @mixin peertube-input-text($width) {
   9   display: inline-block;
  10   height: $button-height;
  11   width: $width;
  12   background: #fff;
  13   border: 1px solid #C6C6C6;
  14   border-radius: 3px;
  15   padding-left: 15px;
  16
  17   &::placeholder {
  18     color: #585858;
  19   }
  20 }
  21
  22 @mixin orange-button {
  23   color: #fff;
  24   background-color: $orange-color;
  25
  26   &:hover, &:active, &:focus {
  27     color: #fff;
  28     background-color: $orange-hoover-color;
  29   }
  30
  31   &[disabled], &.disabled {
  32     cursor: default;
  33     color: #fff;
  34     background-color: #C6C6C6;
  35   }
  36 }
  37
  38 @mixin grey-button {
  39   background-color: $grey-color;
  40   color: #585858;
  41
  42   &:hover, &:active, &:focus, &[disabled], &.disabled {
  43     color: #585858;
  44     background-color: $grey-hoover-color;
  45   }
  46
  47   &[disabled], &.disabled {
  48     cursor: default;
  49   }
  50 }
  51
  52 @mixin peertube-button {
  53   border: none;
  54   font-weight: $font-semibold;
  55   font-size: 15px;
  56   height: $button-height;
  57   line-height: $button-height;
  58   border-radius: 3px;
  59   text-align: center;
  60   padding: 0 17px 0 13px;
  61   cursor: pointer;
  62   outline: 0;
  63 }
  64
  65 @mixin peertube-button-link {
  66   display: inline-block;
  67
  68   @include disable-default-a-behaviour;
  69   @include peertube-button;
  70 }
  71
  72 @mixin avatar ($size) {
  73   width: $size;
  74   height: $size;
  75 }
  76
  77 @mixin icon ($size) {
  78   display: inline-block;
  79   background-repeat: no-repeat;
  80   background-size: contain;
  81   width: $size;
  82   height: $size;
  83   vertical-align: middle;
  84   cursor: pointer;
  85 }
  86
  87
  88 @mixin peertube-select ($width) {
  89   background-color: #fff;
  90   border: 1px solid #C6C6C6;
  91   height: $button-height;
  92   width: $width;
  93   border-radius: 3px;
  94   padding-left: 15px;
  95 }