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