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 peertube-button-file ($width) {
  88   position: relative;
  89   overflow: hidden;
  90   display: inline-block;
  91   width: $width;
  92
  93   @include peertube-button;
  94   @include orange-button;
  95
  96   input[type=file] {
  97     position: absolute;
  98     top: 0;
  99     right: 0;
 100     min-width: 100%;
 101     min-height: 100%;
 102     font-size: 100px;
 103     text-align: right;
 104     filter: alpha(opacity=0);
 105     opacity: 0;
 106     outline: none;
 107     background: white;
 108     cursor: inherit;
 109     display: block;
 110   }
 111 }
 112
 113 @mixin icon ($size) {
 114   display: inline-block;
 115   background-repeat: no-repeat;
 116   background-size: contain;
 117   width: $size;
 118   height: $size;
 119   vertical-align: middle;
 120   cursor: pointer;
 121 }
 122
 123 @mixin peertube-select-container ($width) {
 124   padding: 0;
 125   margin: 0;
 126   border: 1px solid #C6C6C6;
 127   width: $width;
 128   border-radius: 3px;
 129   overflow: hidden;
 130   background: #fff;
 131   position: relative;
 132   font-size: 15px;
 133
 134   &:after {
 135     top: 50%;
 136     right: calc(0% + 15px);
 137     content: " ";
 138     height: 0;
 139     width: 0;
 140     position: absolute;
 141     pointer-events: none;
 142     border: 5px solid rgba(0, 0, 0, 0);
 143     border-top-color: #000000;
 144     margin-top: -2px;
 145     z-index: 100;
 146   }
 147
 148   select {
 149     padding: 0 12px;
 150     width: calc(100% + 2px);
 151     position: relative;
 152     left: 1px;
 153     border: none;
 154     box-shadow: none;
 155     background: transparent none;
 156     appearance: none;
 157     cursor: pointer;
 158     height: $button-height;
 159
 160     &:focus {
 161       outline: none;
 162     }
 163
 164     &:-moz-focusring {
 165       color: transparent;
 166       text-shadow: 0 0 0 #000;
 167     }
 168   }
 169 }
 170
 171 @mixin peertube-select-disabled-container ($width) {
 172   @include peertube-select-container($width);
 173
 174   background-color: #E5E5E5;
 175
 176   select {
 177     cursor: default;
 178   }
 179 }
 180
 181 // Thanks: https://codepen.io/triss90/pen/XNEdRe/
 182 @mixin peertube-radio-container {
 183   input[type="radio"] {
 184     display: none;
 185
 186     & + label {
 187       font-weight: $font-regular;
 188       cursor: pointer;
 189
 190       &:before {
 191         position: relative;
 192         top: -2px;
 193         content: '';
 194         background: #fff;
 195         border-radius: 100%;
 196         border: 1px solid #000;
 197         display: inline-block;
 198         width: 15px;
 199         height: 15px;
 200         vertical-align: middle;
 201         cursor: pointer;
 202         text-align: center;
 203         margin-right: 10px;
 204       }
 205     }
 206
 207     &:checked + label:before {
 208       background-color: #000;
 209       box-shadow: inset 0 0 0 4px #fff;
 210     }
 211
 212     &:focus + label:before {
 213       outline: none;
 214       border-color: #000;
 215     }
 216   }
 217 }
 218
 219 @mixin peertube-checkbox ($border-width) {
 220   display: none;
 221
 222   & + label {
 223     position: relative;
 224     width: 18px;
 225     height: 18px;
 226     border: $border-width solid #000;
 227     border-radius: 3px;
 228     vertical-align: middle;
 229     cursor: pointer;
 230
 231     &:after {
 232       content: '';
 233       position: absolute;
 234       top: calc(2px - #{$border-width});
 235       left: 5px;
 236       width: 5px;
 237       height: 12px;
 238       opacity: 0;
 239       transform: rotate(45deg) scale(0);
 240       border-right: 2px solid #fff;
 241       border-bottom: 2px solid #fff;
 242     }
 243   }
 244
 245   &:checked + label {
 246     border-color: transparent;
 247     background: $orange-color;
 248     animation: jelly 0.6s ease;
 249
 250     &:after {
 251       opacity: 1;
 252       transform: rotate(45deg) scale(1);
 253     }
 254   }
 255
 256   & + label + label {
 257     font-size: 15px;
 258     font-weight: $font-regular;
 259     margin-left: 5px;
 260     cursor: pointer;
 261   }
 262 }
 263
 264
 265 @mixin avatar ($size) {
 266   object-fit: cover;
 267   border-radius:50%;
 268   width: $size;
 269   height: $size;
 270 }