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