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