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-word-wrap {
  20   word-break: normal;
  21   word-wrap: break-word;
  22   overflow-wrap: break-word;
  23   -webkit-hyphens: auto;
  24   -ms-hyphens: auto;
  25   -moz-hyphens: auto;
  26   hyphens: auto;
  27   text-align: justify;
  28 }
  29
  30 @mixin peertube-input-text($width) {
  31   display: inline-block;
  32   height: $button-height;
  33   width: $width;
  34   background: #fff;
  35   border: 1px solid #C6C6C6;
  36   border-radius: 3px;
  37   padding-left: 15px;
  38   padding-right: 15px;
  39
  40   &::placeholder {
  41     color: #585858;
  42   }
  43 }
  44
  45 @mixin peertube-textarea ($width, $height) {
  46   @include peertube-input-text($width);
  47
  48   height: $height;
  49   padding: 5px 15px;
  50   font-size: 15px;
  51 }
  52
  53 @mixin orange-button {
  54   &, &:active, &:focus {
  55     color: #fff;
  56     background-color: $orange-color;
  57   }
  58
  59   &:hover {
  60     color: #fff;
  61     background-color: $orange-hoover-color;
  62   }
  63
  64   &[disabled], &.disabled {
  65     cursor: default;
  66     color: #fff;
  67     background-color: #C6C6C6;
  68   }
  69 }
  70
  71 @mixin grey-button {
  72   &, &:active, &:focus {
  73     background-color: $grey-color;
  74     color: #585858;
  75   }
  76
  77   &:hover, &:active, &:focus, &[disabled], &.disabled {
  78     color: #585858;
  79     background-color: $grey-hoover-color;
  80   }
  81
  82   &[disabled], &.disabled {
  83     cursor: default;
  84   }
  85 }
  86
  87 @mixin peertube-button {
  88   border: none;
  89   font-weight: $font-semibold;
  90   font-size: 15px;
  91   height: $button-height;
  92   line-height: $button-height;
  93   border-radius: 3px;
  94   text-align: center;
  95   padding: 0 17px 0 13px;
  96   cursor: pointer;
  97   outline: 0;
  98 }
  99
 100 @mixin peertube-button-link {
 101   display: inline-block;
 102
 103   @include disable-default-a-behaviour;
 104   @include peertube-button;
 105 }
 106
 107 @mixin peertube-button-file ($width) {
 108   position: relative;
 109   overflow: hidden;
 110   display: inline-block;
 111   width: $width;
 112
 113   @include peertube-button;
 114   @include orange-button;
 115
 116   input[type=file] {
 117     position: absolute;
 118     top: 0;
 119     right: 0;
 120     min-width: 100%;
 121     min-height: 100%;
 122     font-size: 100px;
 123     text-align: right;
 124     filter: alpha(opacity=0);
 125     opacity: 0;
 126     outline: none;
 127     background: white;
 128     cursor: inherit;
 129     display: block;
 130   }
 131 }
 132
 133 @mixin icon ($size) {
 134   display: inline-block;
 135   background-repeat: no-repeat;
 136   background-size: contain;
 137   width: $size;
 138   height: $size;
 139   vertical-align: middle;
 140   cursor: pointer;
 141 }
 142
 143 @mixin peertube-select-container ($width) {
 144   padding: 0;
 145   margin: 0;
 146   border: 1px solid #C6C6C6;
 147   width: $width;
 148   border-radius: 3px;
 149   overflow: hidden;
 150   background: #fff;
 151   position: relative;
 152   font-size: 15px;
 153
 154   &:after {
 155     top: 50%;
 156     right: calc(0% + 15px);
 157     content: " ";
 158     height: 0;
 159     width: 0;
 160     position: absolute;
 161     pointer-events: none;
 162     border: 5px solid rgba(0, 0, 0, 0);
 163     border-top-color: #000;
 164     margin-top: -2px;
 165     z-index: 100;
 166   }
 167
 168   select {
 169     padding: 0 35px 0 12px;
 170     width: calc(100% + 2px);
 171     position: relative;
 172     left: 1px;
 173     border: none;
 174     box-shadow: none;
 175     background: transparent none;
 176     appearance: none;
 177     cursor: pointer;
 178     height: $button-height;
 179     text-overflow: ellipsis;
 180
 181     &:focus {
 182       outline: none;
 183     }
 184
 185     &:-moz-focusring {
 186       color: transparent;
 187       text-shadow: 0 0 0 #000;
 188     }
 189   }
 190 }
 191
 192 @mixin peertube-select-disabled-container ($width) {
 193   @include peertube-select-container($width);
 194
 195   background-color: #E5E5E5;
 196
 197   select {
 198     cursor: default;
 199   }
 200 }
 201
 202 // Thanks: https://codepen.io/triss90/pen/XNEdRe/
 203 @mixin peertube-radio-container {
 204   input[type="radio"] {
 205     display: none;
 206
 207     & + label {
 208       font-weight: $font-regular;
 209       cursor: pointer;
 210
 211       &:before {
 212         position: relative;
 213         top: -2px;
 214         content: '';
 215         background: #fff;
 216         border-radius: 100%;
 217         border: 1px solid #000;
 218         display: inline-block;
 219         width: 15px;
 220         height: 15px;
 221         vertical-align: middle;
 222         cursor: pointer;
 223         text-align: center;
 224         margin-right: 10px;
 225       }
 226     }
 227
 228     &:checked + label:before {
 229       background-color: #000;
 230       box-shadow: inset 0 0 0 4px #fff;
 231     }
 232
 233     &:focus + label:before {
 234       outline: none;
 235       border-color: #000;
 236     }
 237   }
 238 }
 239
 240 @mixin peertube-checkbox ($border-width) {
 241   display: none;
 242
 243   & + label {
 244     position: relative;
 245     width: 18px;
 246     height: 18px;
 247     border: $border-width solid #000;
 248     border-radius: 3px;
 249     vertical-align: middle;
 250     cursor: pointer;
 251
 252     &:after {
 253       content: '';
 254       position: absolute;
 255       top: calc(2px - #{$border-width});
 256       left: 5px;
 257       width: 5px;
 258       height: 12px;
 259       opacity: 0;
 260       transform: rotate(45deg) scale(0);
 261       border-right: 2px solid #fff;
 262       border-bottom: 2px solid #fff;
 263     }
 264   }
 265
 266   &:checked + label {
 267     border-color: transparent;
 268     background: $orange-color;
 269     animation: jelly 0.6s ease;
 270
 271     &:after {
 272       opacity: 1;
 273       transform: rotate(45deg) scale(1);
 274     }
 275   }
 276
 277   & + label + label {
 278     font-size: 15px;
 279     font-weight: $font-regular;
 280     margin-left: 5px;
 281     cursor: pointer;
 282     display: inline;
 283   }
 284
 285   &[disabled] + label,
 286   &[disabled] + label + label{
 287     opacity: 0.5;
 288     cursor: default;
 289   }
 290 }
 291
 292
 293 @mixin avatar ($size) {
 294   object-fit: cover;
 295   border-radius: 50%;
 296   width: $size;
 297   height: $size;
 298 }
 299
 300 @mixin chevron ($size, $border-width) {
 301   border-style: solid;
 302   border-width: $border-width $border-width 0 0;
 303   content: '';
 304   display: inline-block;
 305   transform: rotate(-45deg);
 306   height: $size;
 307   width: $size;
 308 }
 309
 310 @mixin chevron-right ($size, $border-width) {
 311   @include chevron($size, $border-width);
 312
 313   left: 0;
 314   transform: rotate(45deg);
 315 }
 316
 317 @mixin chevron-left ($size, $border-width) {
 318   @include chevron($size, $border-width);
 319
 320   left: 0.25em;
 321   transform: rotate(-135deg);
 322 }
 323
 324 @mixin in-content-small-title {
 325   text-transform: uppercase;
 326   color: $orange-color;
 327   font-weight: $font-bold;
 328   font-size: 13px;
 329 }
 330
 331 @mixin sub-menu-with-actor {
 332   height: 160px;
 333   display: flex;
 334   flex-direction: column;
 335   align-items: start;
 336
 337   .actor {
 338     display: flex;
 339     margin-top: 20px;
 340     margin-bottom: 20px;
 341
 342     img {
 343       @include avatar(80px);
 344
 345       margin-right: 20px;
 346     }
 347
 348     .actor-info {
 349       display: flex;
 350       flex-direction: column;
 351       justify-content: center;
 352
 353       .actor-names {
 354         display: flex;
 355         align-items: center;
 356
 357         .actor-display-name {
 358           font-size: 23px;
 359           font-weight: $font-bold;
 360         }
 361
 362         .actor-name {
 363           margin-left: 7px;
 364           position: relative;
 365           top: 3px;
 366           font-size: 14px;
 367           color: #777272;
 368         }
 369       }
 370
 371       .actor-followers {
 372         font-size: 15px;
 373       }
 374
 375       .actor-owner {
 376         @include disable-default-a-behaviour;
 377
 378         display: block;
 379         font-size: 13px;
 380         margin-top: 4px;
 381         color: #000;
 382
 383         span:hover {
 384           opacity: 0.8;
 385         }
 386
 387         img {
 388           @include avatar(18px);
 389
 390           margin-left: 7px;
 391           position: relative;
 392           top: -2px;
 393         }
 394       }
 395     }
 396   }
 397
 398   .links {
 399     margin-top: 0;
 400     margin-bottom: 10px;
 401
 402     a {
 403       margin-top: 0;
 404       margin-bottom: 0;
 405     }
 406   }
 407 }
 408
 409 @mixin create-button ($imageUrl) {
 410   @include peertube-button-link;
 411   @include orange-button;
 412
 413   .icon.icon-add {
 414     @include icon(22px);
 415
 416     margin-right: 3px;
 417     background-image: url($imageUrl);
 418   }
 419 }