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