client/src/sass/include/_mixins.scss

   1 @use 'sass:math';
   2 @use '_variables' as *;
   3
   4 @import '_bootstrap-mixins';
   5
   6 @mixin disable-default-a-behaviour {
   7   &:hover,
   8   &:focus,
   9   &:active {
  10     text-decoration: none !important;
  11   }
  12
  13   &:focus:not(.focus-visible) {
  14     outline: none !important;
  15   }
  16 }
  17
  18 @mixin disable-outline {
  19   &:focus:not(.focus-visible) {
  20     outline: none !important;
  21   }
  22 }
  23
  24 @mixin ellipsis {
  25   white-space: nowrap;
  26   overflow: hidden;
  27   text-overflow: ellipsis;
  28 }
  29
  30 @mixin muted {
  31   color: pvar(--greyForegroundColor) !important;
  32 }
  33
  34 @mixin fade-text ($fade-after, $background-color) {
  35   position: relative;
  36   overflow: hidden;
  37
  38   &::after {
  39     content: '';
  40     pointer-events: none;
  41     width: 100%;
  42     height: 100%;
  43     position: absolute;
  44     left: 0;
  45     top: 0;
  46     background: linear-gradient(transparent $fade-after, $background-color);
  47   }
  48 }
  49
  50 @mixin peertube-word-wrap ($with-hyphen: true) {
  51   word-break: break-word;
  52   word-wrap: break-word;
  53   overflow-wrap: break-word;
  54
  55   @if $with-hyphen {
  56     hyphens: auto;
  57   }
  58 }
  59
  60 @mixin apply-svg-color ($color) {
  61   ::ng-deep .feather,
  62   ::ng-deep .material,
  63   ::ng-deep .misc {
  64     color: $color;
  65   }
  66 }
  67
  68 @mixin fill-svg-color ($color) {
  69   ::ng-deep svg {
  70     path {
  71       fill: $color;
  72     }
  73   }
  74 }
  75
  76 @mixin button-focus($color) {
  77   &:focus,
  78   &.focus-visible {
  79     box-shadow: #{$focus-box-shadow-form} $color;
  80   }
  81 }
  82
  83 @mixin rounded-line-height-1-5 ($font-size) {
  84   line-height: $font-size + math.round(math.div($font-size, 2));
  85 }
  86
  87 @mixin peertube-input-text($width, $font-size: $form-input-font-size) {
  88   @include rounded-line-height-1-5($font-size);
  89
  90   font-size: $font-size;
  91
  92   padding: 3px 15px;
  93   display: inline-block;
  94   width: $width;
  95   max-width: $width;
  96   color: pvar(--inputForegroundColor);
  97   background-color: pvar(--inputBackgroundColor);
  98   border: 1px solid pvar(--inputBorderColor);
  99   border-radius: 3px;
 100
 101   &::placeholder {
 102     color: pvar(--inputPlaceholderColor);
 103   }
 104
 105   &[readonly] {
 106     opacity: 0.7;
 107   }
 108
 109   @media screen and (max-width: calc(#{$width} + 40px)) {
 110     width: 100%;
 111   }
 112 }
 113
 114 @mixin peertube-textarea ($width, $height) {
 115   @include peertube-input-text($width);
 116
 117   color: pvar(--textareaForegroundColor) !important;
 118   background-color: pvar(--textareaBackgroundColor) !important;
 119   height: $height;
 120   padding: 5px 15px;
 121 }
 122
 123 @mixin orange-button {
 124   @include button-focus(pvar(--mainColorLightest));
 125
 126   &,
 127   &:active,
 128   &:focus {
 129     color: #fff;
 130     background-color: pvar(--mainColor);
 131   }
 132
 133   &:hover {
 134     color: #fff;
 135     background-color: pvar(--mainHoverColor);
 136   }
 137
 138   &[disabled],
 139   &.disabled {
 140     cursor: default;
 141     color: #fff;
 142     background-color: pvar(--inputBorderColor);
 143   }
 144
 145   my-global-icon {
 146     @include apply-svg-color(#fff);
 147   }
 148 }
 149
 150 @mixin orange-button-inverted {
 151   @include button-focus(pvar(--mainColorLightest));
 152
 153   padding: 2px 13px;
 154   border: 2px solid pvar(--mainColor);
 155   font-weight: $font-semibold;
 156
 157   &,
 158   &:active,
 159   &:focus {
 160     color: pvar(--mainColor);
 161     background-color: pvar(--mainBackgroundColor);
 162   }
 163
 164   &:hover {
 165     color: pvar(--mainColor);
 166     background-color: pvar(--mainColorLightest);
 167   }
 168
 169   &[disabled],
 170   &.disabled {
 171     cursor: default;
 172     color: pvar(--mainColor);
 173     background-color: pvar(--inputBorderColor);
 174   }
 175
 176   my-global-icon {
 177     @include apply-svg-color(pvar(--mainColor));
 178   }
 179 }
 180
 181 @mixin tertiary-button {
 182   @include button-focus($grey-button-outline-color);
 183
 184   color: pvar(--greyForegroundColor);
 185   background-color: transparent;
 186
 187   &[disabled],
 188   .disabled {
 189     cursor: default;
 190   }
 191
 192   my-global-icon {
 193     @include apply-svg-color(transparent);
 194   }
 195 }
 196
 197 @mixin grey-button {
 198   @include button-focus($grey-button-outline-color);
 199
 200   background-color: pvar(--greyBackgroundColor);
 201   color: pvar(--greyForegroundColor);
 202
 203   &:hover,
 204   &:active,
 205   &:focus,
 206   &[disabled],
 207   &.disabled {
 208     color: pvar(--greyForegroundColor);
 209     background-color: pvar(--greySecondaryBackgroundColor);
 210   }
 211
 212   &[disabled],
 213   &.disabled {
 214     cursor: default;
 215   }
 216
 217   my-global-icon {
 218     @include apply-svg-color(pvar(--greyForegroundColor));
 219   }
 220 }
 221
 222 @mixin danger-button {
 223   $color: lighten($color: #c54130, $amount: 10);
 224   $text: #fff6f5;
 225
 226   @include button-focus(scale-color($color, $alpha: -95%));
 227
 228   background-color: $color;
 229   color: $text;
 230
 231   &:hover,
 232   &:active,
 233   &:focus,
 234   &[disabled],
 235   &.disabled {
 236     background-color: lighten($color: $color, $amount: 10);
 237   }
 238
 239   &[disabled],
 240   &.disabled {
 241     cursor: default;
 242   }
 243
 244   my-global-icon {
 245     @include apply-svg-color($text);
 246   }
 247 }
 248
 249 @mixin peertube-button {
 250   @include rounded-line-height-1-5($button-font-size);
 251
 252   padding: 4px 13px;
 253
 254   border: 0;
 255   font-weight: $font-semibold;
 256
 257   // Because of primeng that redefines border-radius of all input[type="..."]
 258   border-radius: 3px !important;
 259
 260   text-align: center;
 261   cursor: pointer;
 262
 263   font-size: $button-font-size;
 264
 265   my-global-icon + * {
 266     @include margin-right(4px);
 267     @include margin-left(4px);
 268   }
 269 }
 270
 271 @mixin peertube-button-big {
 272   height: auto;
 273   padding: 10px 25px;
 274   font-size: 18px;
 275   line-height: 1.2;
 276   border: 0;
 277   font-weight: $font-semibold;
 278
 279   // Because of primeng that redefines border-radius of all input[type="..."]
 280   border-radius: 3px !important;
 281 }
 282
 283 @mixin peertube-button-link {
 284   @include disable-default-a-behaviour;
 285   @include peertube-button;
 286
 287   display: inline-block;
 288 }
 289
 290 @mixin peertube-button-big-link {
 291   @include disable-default-a-behaviour;
 292   @include peertube-button-big;
 293
 294   display: inline-block;
 295 }
 296
 297 @mixin peertube-button-outline {
 298   @include disable-default-a-behaviour;
 299   @include peertube-button;
 300
 301   display: inline-block;
 302   border: 1px solid;
 303 }
 304
 305 @mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
 306   my-global-icon {
 307     @include margin-right($margin-right);
 308
 309     position: relative;
 310     width: $width;
 311     top: $top;
 312   }
 313 }
 314
 315 @mixin peertube-file {
 316   position: relative;
 317   overflow: hidden;
 318   display: inline-block;
 319
 320   input[type=file] {
 321     position: absolute;
 322     top: 0;
 323     right: 0;
 324     width: 100%;
 325     height: 100%;
 326     font-size: 100px;
 327     text-align: end;
 328     filter: alpha(opacity=0);
 329     opacity: 0;
 330     outline: none;
 331     background: pvar(--mainBackgroundColor);
 332     cursor: inherit;
 333     display: block;
 334   }
 335 }
 336
 337 @mixin peertube-button-file ($width) {
 338   @include peertube-file;
 339   @include peertube-button;
 340
 341   width: $width;
 342 }
 343
 344 @mixin icon ($size) {
 345   display: inline-block;
 346   background-repeat: no-repeat;
 347   background-size: contain;
 348   width: $size;
 349   height: $size;
 350   vertical-align: middle;
 351   cursor: pointer;
 352 }
 353
 354 @mixin responsive-width ($width) {
 355   width: $width;
 356
 357   @media screen and (max-width: $width) {
 358     width: 100%;
 359   }
 360 }
 361
 362 @mixin peertube-select-container ($width) {
 363   padding: 0;
 364   margin: 0;
 365   width: $width;
 366   border-radius: 3px;
 367   color: pvar(--inputForegroundColor);
 368   background: pvar(--inputBackgroundColor);
 369   position: relative;
 370   height: min-content;
 371
 372   &.disabled {
 373     background-color: #E5E5E5;
 374
 375     select {
 376       cursor: default;
 377     }
 378   }
 379
 380   select[disabled] {
 381     background-color: #f9f9f9;
 382   }
 383
 384   @media screen and (max-width: $width) {
 385     width: 100%;
 386   }
 387
 388   &::after {
 389     top: 50%;
 390     right: calc(0% + 15px);
 391     content: ' ';
 392     height: 0;
 393     width: 0;
 394     position: absolute;
 395     pointer-events: none;
 396     border: 5px solid rgba(0, 0, 0, 0);
 397     border-top-color: pvar(--mainForegroundColor);
 398     margin-top: -2px;
 399     z-index: 100;
 400   }
 401
 402   select {
 403     @include rounded-line-height-1-5($form-input-font-size);
 404
 405     font-size: $form-input-font-size;
 406
 407     padding: 3px 35px 3px 12px;
 408     position: relative;
 409     border: 1px solid pvar(--inputBorderColor);
 410     background: transparent none;
 411     appearance: none;
 412     text-overflow: ellipsis;
 413     color: pvar(--mainForegroundColor);
 414
 415     &:focus {
 416       outline: none;
 417     }
 418
 419     &:-moz-focusring {
 420       color: transparent;
 421       text-shadow: 0 0 0 #000;
 422     }
 423
 424     option {
 425       color: #000;
 426
 427       &[value=undefined] {
 428         font-weight: $font-semibold;
 429       }
 430     }
 431   }
 432
 433   &.peertube-select-button {
 434     @include grey-button;
 435
 436     select {
 437       font-weight: $font-semibold;
 438       color: pvar(--greyForegroundColor);
 439       border: 0;
 440
 441       // No border, add +1 to vertical padding
 442       padding: 4px 35px 4px 12px;
 443     }
 444   }
 445 }
 446
 447 // Thanks: https://codepen.io/manabox/pen/raQmpL
 448 @mixin peertube-radio-container {
 449   label {
 450     font-size: $form-input-font-size;
 451   }
 452
 453   [type=radio]:checked,
 454   [type=radio]:not(:checked) {
 455     position: absolute;
 456     opacity: 0;
 457     cursor: pointer;
 458     height: 0;
 459     width: 0;
 460   }
 461
 462   [type=radio]:checked + label,
 463   [type=radio]:not(:checked) + label {
 464     position: relative;
 465     padding-left: 28px;
 466     cursor: pointer;
 467     line-height: 20px;
 468     display: inline-block;
 469     font-weight: $font-regular;
 470   }
 471
 472   [type=radio]:checked + label::before,
 473   [type=radio]:not(:checked) + label::before {
 474     content: '';
 475     position: absolute;
 476     left: 0;
 477     top: 0;
 478     width: 18px;
 479     height: 18px;
 480     border: 1px solid pvar(--inputBorderColor);
 481     border-radius: 100%;
 482     background: #fff;
 483   }
 484
 485   [type=radio]:checked + label::after,
 486   [type=radio]:not(:checked) + label::after {
 487     content: '';
 488     width: 10px;
 489     height: 10px;
 490     background: pvar(--mainColor);
 491     position: absolute;
 492     top: 4px;
 493     left: 4px;
 494     border-radius: 100%;
 495     transition: all 0.2s ease;
 496   }
 497   [type=radio]:not(:checked) + label::after {
 498     opacity: 0;
 499     transform: scale(0);
 500   }
 501   [type=radio]:checked + label::after {
 502     opacity: 1;
 503     transform: scale(1);
 504   }
 505
 506   .form-group-description {
 507     display: block;
 508     margin-top: -7px;
 509     margin-bottom: 10px;
 510     margin-left: 29px;
 511   }
 512 }
 513
 514 @mixin peertube-checkbox ($border-width) {
 515   opacity: 0;
 516   position: absolute;
 517
 518   &:focus + span {
 519     box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
 520   }
 521
 522   + span {
 523     position: relative;
 524     width: 18px;
 525     min-width: 18px;
 526     height: 18px;
 527     border: $border-width solid pvar(--inputBorderColor);
 528     border-radius: 3px;
 529     vertical-align: middle;
 530     cursor: pointer;
 531
 532     &::after {
 533       content: '';
 534       position: absolute;
 535       top: calc(2px - #{$border-width});
 536       left: 5px;
 537       width: 5px;
 538       height: 12px;
 539       opacity: 0;
 540       transform: rotate(45deg) scale(0);
 541       border-right: 2px solid pvar(--mainBackgroundColor);
 542       border-bottom: 2px solid pvar(--mainBackgroundColor);
 543     }
 544   }
 545
 546   &:checked + span {
 547     border-color: transparent;
 548     background: pvar(--mainColor);
 549     animation: jelly 0.6s ease;
 550
 551     &::after {
 552       opacity: 1;
 553       transform: rotate(45deg) scale(1);
 554     }
 555   }
 556
 557   + span + span {
 558     @include margin-left(5px);
 559
 560     font-weight: $font-regular;
 561     cursor: pointer;
 562     display: inline;
 563   }
 564
 565   &[disabled] + span,
 566   &[disabled] + span + span {
 567     opacity: 0.5;
 568     cursor: default;
 569   }
 570 }
 571
 572 @mixin actor-avatar-size ($size) {
 573   display: inline-block;
 574   width: $size;
 575   height: $size;
 576   min-width: $size;
 577   min-height: $size;
 578 }
 579
 580 @mixin actor-counters ($separator-margin: 10px) {
 581   color: pvar(--greyForegroundColor);
 582   display: flex;
 583   align-items: center;
 584
 585   > *:not(:last-child)::after {
 586     content: '•';
 587     margin: 0 $separator-margin;
 588     color: pvar(--mainColor);
 589   }
 590 }
 591
 592 @mixin in-content-small-title {
 593   text-transform: uppercase;
 594   color: pvar(--mainColor);
 595   font-weight: $font-bold;
 596   font-size: 13px;
 597 }
 598
 599 @mixin settings-big-title {
 600   text-transform: uppercase;
 601   color: pvar(--mainColor);
 602   font-weight: $font-bold;
 603   font-size: 1rem;
 604   margin-bottom: 10px;
 605 }
 606
 607 @mixin create-button {
 608   @include peertube-button-link;
 609   @include orange-button;
 610   @include button-with-icon(20px, 5px, -1px);
 611 }
 612
 613 @mixin row-blocks ($column-responsive: true, $min-height: 130px, $separator: true) {
 614   display: flex;
 615   min-height: $min-height;
 616   padding-bottom: 20px;
 617   margin-bottom: 20px;
 618
 619   @if $separator {
 620     border-bottom: 1px solid pvar(--inputBorderColor);
 621   }
 622
 623   @media screen and (max-width: $small-view) {
 624     @if $column-responsive {
 625       flex-direction: column;
 626       height: auto;
 627       align-items: center;
 628     } @else {
 629       min-height: initial;
 630       padding-bottom: 10px;
 631       margin-bottom: 10px;
 632     }
 633   }
 634 }
 635
 636 @mixin dropdown-with-icon-item {
 637   padding: 6px 15px;
 638
 639   my-global-icon {
 640     @include margin-right(10px);
 641
 642     width: 22px;
 643     opacity: .7;
 644     position: relative;
 645     top: -2px;
 646   }
 647 }
 648
 649 @mixin progressbar($small: false) {
 650   background-color: pvar(--greyBackgroundColor);
 651   display: flex;
 652   height: 1rem;
 653   overflow: hidden;
 654   font-size: 0.75rem;
 655   border-radius: 0.25rem;
 656   position: relative;
 657
 658   span {
 659     position: absolute;
 660     color: pvar(--greyForegroundColor);
 661
 662     @if $small {
 663       top: -1px;
 664     }
 665
 666     &:nth-of-type(1) {
 667       left: .2rem;
 668     }
 669     &:nth-of-type(2) {
 670       right: .2rem;
 671     }
 672   }
 673
 674   .progress-bar {
 675     color: pvar(--mainBackgroundColor);
 676     background-color: pvar(--mainColor);
 677     display: flex;
 678     flex-direction: column;
 679     justify-content: center;
 680     text-align: center;
 681     white-space: nowrap;
 682     transition: width 0.6s ease;
 683
 684     &.red {
 685       background-color: lighten($color: #c54130, $amount: 10);
 686     }
 687   }
 688 }
 689
 690 @mixin breadcrumb {
 691   display: flex;
 692   flex-wrap: wrap;
 693   padding: 0;
 694   margin-bottom: 1rem;
 695   list-style: none;
 696   font-weight: $font-semibold;
 697
 698   .breadcrumb-item {
 699     display: flex;
 700
 701     a {
 702       color: pvar(--mainColor);
 703     }
 704
 705     + .breadcrumb-item {
 706       @include padding-left(0.5rem);
 707
 708       &::before {
 709         @include padding-right(0.5rem);
 710
 711         display: inline-block;
 712         color: #6c757d;
 713         content: '/';
 714       }
 715     }
 716
 717     &.active {
 718       color: #6c757d;
 719     }
 720   }
 721 }
 722
 723 @mixin dashboard {
 724   display: flex;
 725   flex-wrap: wrap;
 726   margin: 0 -5px;
 727
 728   > div {
 729     box-sizing: border-box;
 730     flex: 0 0 percentage(math.div(1, 3));
 731     padding: 0 5px;
 732     margin-bottom: 10px;
 733
 734     > a {
 735       @include disable-default-a-behaviour;
 736
 737       text-decoration: none;
 738       color: inherit;
 739       display: block;
 740       font-size: 18px;
 741
 742       &:active,
 743       &:focus,
 744       &:hover {
 745         opacity: .8;
 746       }
 747     }
 748
 749     > a,
 750     > div {
 751       padding: 20px;
 752       background: pvar(--submenuBackgroundColor);
 753       border-radius: 4px;
 754       box-sizing: border-box;
 755       height: 100%;
 756     }
 757   }
 758
 759   .dashboard-num,
 760   .dashboard-text {
 761     text-align: center;
 762     font-size: 130%;
 763     color: pvar(--mainForegroundColor);
 764     line-height: 30px;
 765     margin-bottom: 20px;
 766   }
 767
 768   .dashboard-label {
 769     font-size: 90%;
 770     color: pvar(--inputPlaceholderColor);
 771     text-align: center;
 772   }
 773 }
 774
 775 @mixin divider($color: pvar(--submenuBackgroundColor), $background: pvar(--mainBackgroundColor)) {
 776   width: 95%;
 777   border-top: .05rem solid $color;
 778   height: .05rem;
 779   text-align: center;
 780   display: block;
 781   position: relative;
 782
 783   &[data-content] {
 784     margin: .8rem 0;
 785
 786     &::after {
 787       background: $background;
 788       color: $color;
 789       content: attr(data-content);
 790       display: inline-block;
 791       font-size: .7rem;
 792       padding: 0 .4rem;
 793       transform: translateY(-.65rem);
 794     }
 795   }
 796 }
 797
 798 @mixin chip {
 799   --avatar-size: 1.2rem;
 800
 801   display: inline-flex;
 802   color: pvar(--mainForegroundColor);
 803   height: var(--avatar-size);
 804   max-width: 320px;
 805   overflow: hidden;
 806   text-decoration: none;
 807   text-overflow: ellipsis;
 808   vertical-align: middle;
 809   white-space: nowrap;
 810
 811   my-actor-avatar {
 812     @include margin-right(.2rem);
 813
 814     border-radius: 5rem;
 815     width: var(--avatar-size);
 816     height: var(--avatar-size);
 817   }
 818
 819   &.two-lines {
 820     --avatar-size: 2rem;
 821
 822     font-size: 14px;
 823     line-height: 1rem;
 824
 825     my-actor-avatar {
 826       display: inline-block;
 827     }
 828
 829     > div {
 830       display: flex;
 831       flex-direction: column;
 832       justify-content: center;
 833     }
 834   }
 835 }
 836
 837 // applies ratio (default to 16:9) to a child element (using $selector) only using
 838 // an immediate's parent size. This allows to set a ratio without explicit
 839 // dimensions, as width/height cannot be computed from each other.
 840 @mixin block-ratio ($selector: 'div', $inverted-ratio: math.div(9, 16)) {
 841   $padding-percent: percentage($inverted-ratio);
 842
 843   position: relative;
 844   height: 0;
 845   width: 100%;
 846   padding-top: $padding-percent;
 847
 848   #{$selector} {
 849     position: absolute;
 850     width: 100%;
 851     height: 100%;
 852     top: 0;
 853
 854     @content;
 855   }
 856 }
 857
 858 @mixin sub-menu-h1 {
 859   ::ng-deep h1 {
 860     font-size: 1.3rem;
 861     border-bottom: 2px solid $grey-background-color;
 862     padding-bottom: 15px;
 863     margin-bottom: $sub-menu-margin-bottom;
 864
 865     > span > my-global-icon,
 866     > my-global-icon {
 867       @include margin-right(10px);
 868       width: 24px;
 869       height: 24px;
 870       vertical-align: top;
 871     }
 872
 873     .pt-badge {
 874       @include margin-left(7px);
 875
 876       vertical-align: top;
 877     }
 878   }
 879 }
 880
 881 @mixin play-icon ($width, $height) {
 882   width: 0;
 883   height: 0;
 884
 885   position: absolute;
 886   left: 50%;
 887   top: 50%;
 888   transform: translate(-50%, -50%) scale(0.5);
 889
 890   border-top: #{math.div($height, 2)} solid transparent;
 891   border-bottom: #{math.div($height, 2)} solid transparent;
 892
 893   border-left: $width solid rgba(255, 255, 255, 0.95);
 894 }
 895
 896 @mixin on-small-main-col () {
 897   :host-context(.main-col:not(.expanded)) {
 898     @media screen and (max-width: $small-view + $menu-width) {
 899       @content;
 900     }
 901   }
 902
 903   :host-context(.main-col.expanded) {
 904     @media screen and (max-width: $small-view) {
 905       @content;
 906     }
 907   }
 908 }
 909
 910 @mixin on-mobile-main-col () {
 911   :host-context(.main-col:not(.expanded)) {
 912     @media screen and (max-width: $mobile-view + $menu-width) {
 913       @content;
 914     }
 915   }
 916
 917   :host-context(.main-col.expanded) {
 918     @media screen and (max-width: $mobile-view) {
 919       @content;
 920     }
 921   }
 922 }
 923
 924 @mixin margin ($arg1: null, $arg2: null, $arg3: null, $arg4: null) {
 925   @if $arg2 == null and $arg3 == null and $arg4 == null {
 926     @include margin-original($arg1, $arg1, $arg1, $arg1);
 927   } @else if $arg3 == null and $arg4 == null {
 928     @include margin-original($arg1, $arg2, $arg1, $arg2);
 929   } @else if $arg4 == null {
 930     @include margin-original($arg1, $arg2, $arg3, $arg2);
 931   } @else {
 932     @include margin-original($arg1, $arg2, $arg3, $arg4);
 933   }
 934 }
 935
 936 @mixin margin-original ($block-start, $inline-end, $block-end, $inline-start) {
 937   @include margin-left($inline-start);
 938   @include margin-right($inline-end);
 939   @include margin-top($block-start);
 940   @include margin-bottom($block-end);
 941 }
 942
 943 @mixin margin-left ($value) {
 944   @supports (margin-inline-start: $value) {
 945     @include rfs($value, margin-inline-start);
 946   }
 947
 948   @supports not (margin-inline-start: $value) {
 949     @include rfs($value, margin-left);
 950   }
 951 }
 952
 953 @mixin margin-right ($value) {
 954   @supports (margin-inline-end: $value) {
 955     @include rfs($value, margin-inline-end);
 956   }
 957
 958   @supports not (margin-inline-end: $value) {
 959     @include rfs($value, margin-right);
 960   }
 961 }
 962
 963 @mixin padding-original ($block-start, $inline-end, $block-end, $inline-start) {
 964   @include padding-left($inline-start);
 965   @include padding-right($inline-end);
 966   @include padding-top($block-start);
 967   @include padding-bottom($block-end);
 968 }
 969
 970
 971 @mixin padding ($arg1: null, $arg2: null, $arg3: null, $arg4: null) {
 972   @if $arg2 == null and $arg3 == null and $arg4 == null {
 973     @include padding-original($arg1, $arg1, $arg1, $arg1);
 974   } @else if $arg3 == null and $arg4 == null {
 975     @include padding-original($arg1, $arg2, $arg1, $arg2);
 976   } @else if $arg4 == null {
 977     @include padding-original($arg1, $arg2, $arg3, $arg2);
 978   } @else {
 979     @include padding-original($arg1, $arg2, $arg3, $arg4);
 980   }
 981 }
 982
 983 @mixin padding-left ($value) {
 984   @supports (padding-inline-start: $value) {
 985     @include rfs($value, padding-inline-start);
 986   }
 987
 988   @supports not (padding-inline-start: $value) {
 989     @include rfs($value, padding-left);
 990   }
 991 }
 992
 993 @mixin padding-right ($value) {
 994   @supports (padding-inline-end: $value) {
 995     @include rfs($value, padding-inline-end);
 996   }
 997
 998   @supports not (padding-inline-end: $value) {
 999     @include rfs($value, padding-right);
1000   }
1001 }