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