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