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 peertube-textarea ($width, $height) {
  26   @include peertube-input-text($width);
  27
  28   height: $height;
  29   padding: 5px 15px;
  30   font-size: 15px;
  31 }
  32
  33 @mixin orange-button {
  34   &, &:active, &:focus {
  35     color: #fff;
  36     background-color: $orange-color;
  37   }
  38
  39   &:hover {
  40     color: #fff;
  41     background-color: $orange-hoover-color;
  42   }
  43
  44   &[disabled], &.disabled {
  45     cursor: default;
  46     color: #fff;
  47     background-color: #C6C6C6;
  48   }
  49 }
  50
  51 @mixin grey-button {
  52   &, &:active, &:focus {
  53     background-color: $grey-color;
  54     color: #585858;
  55   }
  56
  57   &:hover, &:active, &:focus, &[disabled], &.disabled {
  58     color: #585858;
  59     background-color: $grey-hoover-color;
  60   }
  61
  62   &[disabled], &.disabled {
  63     cursor: default;
  64   }
  65 }
  66
  67 @mixin peertube-button {
  68   border: none;
  69   font-weight: $font-semibold;
  70   font-size: 15px;
  71   height: $button-height;
  72   line-height: $button-height;
  73   border-radius: 3px;
  74   text-align: center;
  75   padding: 0 17px 0 13px;
  76   cursor: pointer;
  77   outline: 0;
  78 }
  79
  80 @mixin peertube-button-link {
  81   display: inline-block;
  82
  83   @include disable-default-a-behaviour;
  84   @include peertube-button;
  85 }
  86
  87 @mixin avatar ($size) {
  88   width: $size;
  89   height: $size;
  90 }
  91
  92 @mixin icon ($size) {
  93   display: inline-block;
  94   background-repeat: no-repeat;
  95   background-size: contain;
  96   width: $size;
  97   height: $size;
  98   vertical-align: middle;
  99   cursor: pointer;
 100 }
 101
 102
 103 @mixin peertube-select-container ($width) {
 104   padding: 0;
 105   margin: 0;
 106   border: 1px solid #C6C6C6;
 107   width: $width;
 108   border-radius: 3px;
 109   overflow: hidden;
 110   background: #fff;
 111   position: relative;
 112   font-size: 15px;
 113
 114   &:after {
 115     top: 50%;
 116     right: calc(0% + 15px);
 117     content: " ";
 118     height: 0;
 119     width: 0;
 120     position: absolute;
 121     pointer-events: none;
 122     border: 5px solid rgba(0, 0, 0, 0);
 123     border-top-color: #000000;
 124     margin-top: -2px;
 125     z-index: 100;
 126   }
 127
 128   select {
 129     padding: 0 12px;
 130     width: calc(100% + 2px);
 131     position: relative;
 132     left: 1px;
 133     border: none;
 134     box-shadow: none;
 135     background: transparent none;
 136     appearance: none;
 137     cursor: pointer;
 138     height: $button-height;
 139
 140     &:focus {
 141       outline: none;
 142     }
 143
 144     &:-moz-focusring {
 145       color: transparent;
 146       text-shadow: 0 0 0 #000;
 147     }
 148   }
 149 }
 150
 151 @mixin peertube-select-disabled-container ($width) {
 152   @include peertube-select-container($width);
 153
 154   background-color: #E5E5E5;
 155
 156   select {
 157     cursor: default;
 158   }
 159 }
 160
 161 // Thanks: https://codepen.io/triss90/pen/XNEdRe/
 162 @mixin peertube-radio-container {
 163   input[type="radio"] {
 164     display: none;
 165
 166     & + label {
 167       font-weight: $font-regular;
 168       cursor: pointer;
 169
 170       &:before {
 171         position: relative;
 172         top: -2px;
 173         content: '';
 174         background: #fff;
 175         border-radius: 100%;
 176         border: 1px solid #000;
 177         display: inline-block;
 178         width: 15px;
 179         height: 15px;
 180         vertical-align: middle;
 181         cursor: pointer;
 182         text-align: center;
 183         margin-right: 10px;
 184       }
 185     }
 186
 187     &:checked + label:before {
 188       background-color: #000;
 189       box-shadow: inset 0 0 0 4px #fff;
 190     }
 191
 192     &:focus + label:before {
 193       outline: none;
 194       border-color: #000;
 195     }
 196   }
 197 }
 198
 199 @mixin peertube-checkbox ($border-width) {
 200   display: none;
 201
 202   & + label {
 203     position: relative;
 204     width: 18px;
 205     height: 18px;
 206     border: $border-width solid #000;
 207     border-radius: 3px;
 208     vertical-align: middle;
 209     cursor: pointer;
 210
 211     &:after {
 212       content: '';
 213       position: absolute;
 214       top: calc(2px - #{$border-width});
 215       left: 5px;
 216       width: 5px;
 217       height: 12px;
 218       opacity: 0;
 219       transform: rotate(45deg) scale(0);
 220       border-right: 2px solid #fff;
 221       border-bottom: 2px solid #fff;
 222     }
 223   }
 224
 225   &:checked + label {
 226     border-color: transparent;
 227     background: $orange-color;
 228     animation: jelly 0.6s ease;
 229
 230     &:after {
 231       opacity: 1;
 232       transform: rotate(45deg) scale(1);
 233     }
 234   }
 235
 236   & + label + label {
 237     font-size: 15px;
 238     font-weight: $font-regular;
 239     margin-left: 5px;
 240     cursor: pointer;
 241   }
 242 }
 243