client/src/sass/include/_mixins.scss

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