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