client/src/sass/include/_mixins.scss

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