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