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   &, &:active, &:focus {
  27     color: #fff;
  28     background-color: $orange-color;
  29   }
  30
  31   &:hover {
  32     color: #fff;
  33     background-color: $orange-hoover-color;
  34   }
  35
  36   &[disabled], &.disabled {
  37     cursor: default;
  38     color: #fff;
  39     background-color: #C6C6C6;
  40   }
  41 }
  42
  43 @mixin grey-button {
  44   &, &:active, &:focus {
  45     background-color: $grey-color;
  46     color: #585858;
  47   }
  48
  49   &:hover, &:active, &:focus, &[disabled], &.disabled {
  50     color: #585858;
  51     background-color: $grey-hoover-color;
  52   }
  53
  54   &[disabled], &.disabled {
  55     cursor: default;
  56   }
  57 }
  58
  59 @mixin peertube-button {
  60   border: none;
  61   font-weight: $font-semibold;
  62   font-size: 15px;
  63   height: $button-height;
  64   line-height: $button-height;
  65   border-radius: 3px;
  66   text-align: center;
  67   padding: 0 17px 0 13px;
  68   cursor: pointer;
  69   outline: 0;
  70 }
  71
  72 @mixin peertube-button-link {
  73   display: inline-block;
  74
  75   @include disable-default-a-behaviour;
  76   @include peertube-button;
  77 }
  78
  79 @mixin avatar ($size) {
  80   width: $size;
  81   height: $size;
  82 }
  83
  84 @mixin icon ($size) {
  85   display: inline-block;
  86   background-repeat: no-repeat;
  87   background-size: contain;
  88   width: $size;
  89   height: $size;
  90   vertical-align: middle;
  91   cursor: pointer;
  92 }
  93
  94
  95 @mixin peertube-select-container ($width) {
  96   padding: 0;
  97   margin: 0;
  98   border: 1px solid #C6C6C6;
  99   width: $width;
 100   border-radius: 3px;
 101   overflow: hidden;
 102   background: #fff;
 103   position: relative;
 104
 105   &:after {
 106     top: 50%;
 107     right: calc(0% + 15px);
 108     content: " ";
 109     height: 0;
 110     width: 0;
 111     position: absolute;
 112     pointer-events: none;
 113     border: 5px solid rgba(0, 0, 0, 0);
 114     border-top-color: #000000;
 115     margin-top: -2px;
 116     z-index: 100;
 117   }
 118
 119   select {
 120     padding: 0 12px;
 121     width: calc(100% + 2px);
 122     position: relative;
 123     left: 1px;
 124     border: none;
 125     box-shadow: none;
 126     background: transparent none;
 127     appearance: none;
 128     cursor: pointer;
 129     height: $button-height;
 130
 131     &:focus {
 132       outline: none;
 133     }
 134
 135     &:-moz-focusring {
 136       color: transparent;
 137       text-shadow: 0 0 0 #000;
 138     }
 139   }
 140 }
 141
 142 @mixin peertube-select-disabled-container ($width) {
 143   @include peertube-select-container($width);
 144
 145   background-color: #E5E5E5;
 146
 147   select {
 148     cursor: default;
 149   }
 150 }