client/src/sass/include/_mixins.scss

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