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   color: pvar(--inputForegroundColor);
  93   background-color: pvar(--inputBackgroundColor);
  94   border: 1px solid $input-border-color;
  95   border-radius: 3px;
  96   font-size: 15px;
  97
  98   &::placeholder {
  99     color: pvar(--inputPlaceholderColor);
 100   }
 101
 102   &[readonly] {
 103     opacity: 0.7;
 104   }
 105
 106   @media screen and (max-width: calc(#{$width} + 40px)) {
 107     width: 100%;
 108   }
 109 }
 110
 111 @mixin peertube-input-group($width) {
 112   width: $width;
 113   min-height: $button-height;
 114   padding-top: 0;
 115   padding-bottom: 0;
 116   flex-wrap: nowrap;
 117
 118   .input-group-text {
 119     font-size: 14px;
 120     color: #808080;
 121   }
 122 }
 123
 124 @mixin peertube-textarea ($width, $height) {
 125   @include peertube-input-text($width);
 126
 127   color: pvar(--textareaForegroundColor) !important;
 128   background-color: pvar(--textareaBackgroundColor) !important;
 129   height: $height;
 130   padding: 5px 15px;
 131   font-size: 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: $input-border-color;
 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   border: 2px solid pvar(--mainColor);
 165   font-weight: $font-semibold;
 166
 167   &,
 168   &:active,
 169   &:focus {
 170     color: pvar(--mainColor);
 171     background-color: pvar(--mainBackgroundColor);
 172   }
 173
 174   &:hover {
 175     color: pvar(--mainColor);
 176     background-color: pvar(--mainColorLightest);
 177   }
 178
 179   &[disabled],
 180   &.disabled {
 181     cursor: default;
 182     color: pvar(--mainColor);
 183     background-color: $input-border-color;
 184   }
 185
 186   my-global-icon {
 187     @include apply-svg-color(pvar(--mainColor));
 188   }
 189 }
 190
 191 @mixin tertiary-button {
 192   @include button-focus($grey-button-outline-color);
 193
 194   color: pvar(--greyForegroundColor);
 195   background-color: transparent;
 196
 197   &[disabled],
 198   .disabled {
 199     cursor: default;
 200   }
 201
 202   my-global-icon {
 203     @include apply-svg-color(transparent);
 204   }
 205 }
 206
 207 @mixin grey-button {
 208   @include button-focus($grey-button-outline-color);
 209
 210   background-color: pvar(--greyBackgroundColor);
 211   color: pvar(--greyForegroundColor);
 212
 213   &:hover,
 214   &:active,
 215   &:focus,
 216   &[disabled],
 217   &.disabled {
 218     color: pvar(--greyForegroundColor);
 219     background-color: pvar(--greySecondaryBackgroundColor);
 220   }
 221
 222   &[disabled],
 223   &.disabled {
 224     cursor: default;
 225   }
 226
 227   my-global-icon {
 228     @include apply-svg-color(pvar(--greyForegroundColor));
 229   }
 230 }
 231
 232 @mixin danger-button {
 233   $color: lighten($color: #c54130, $amount: 10);
 234   $text: #fff6f5;
 235
 236   @include button-focus(scale-color($color, $alpha: -95%));
 237
 238   background-color: $color;
 239   color: $text;
 240
 241   &:hover,
 242   &:active,
 243   &:focus,
 244   &[disabled],
 245   &.disabled {
 246     background-color: lighten($color: $color, $amount: 10);
 247   }
 248
 249   &[disabled],
 250   &.disabled {
 251     cursor: default;
 252   }
 253
 254   my-global-icon {
 255     @include apply-svg-color($text);
 256   }
 257 }
 258
 259 @mixin peertube-button {
 260   padding: 0 13px;
 261
 262   border: 0;
 263   font-weight: $font-semibold;
 264   font-size: 15px;
 265   height: $button-height;
 266   line-height: $button-height;
 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   my-global-icon + * {
 275     @include margin-right(4px);
 276   }
 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   select[disabled] {
 375     background-color: #f9f9f9;
 376   }
 377
 378   @media screen and (max-width: $width) {
 379     width: 100%;
 380   }
 381
 382   &::after {
 383     top: 50%;
 384     right: calc(0% + 15px);
 385     content: ' ';
 386     height: 0;
 387     width: 0;
 388     position: absolute;
 389     pointer-events: none;
 390     border: 5px solid rgba(0, 0, 0, 0);
 391     border-top-color: #000;
 392     margin-top: -2px;
 393     z-index: 100;
 394   }
 395
 396   select {
 397     padding: 0 35px 0 12px;
 398     position: relative;
 399     border: 1px solid $input-border-color;
 400     background: transparent none;
 401     appearance: none;
 402     height: $button-height;
 403     text-overflow: ellipsis;
 404     color: pvar(--mainForegroundColor);
 405
 406     &:focus {
 407       outline: none;
 408     }
 409
 410     &:-moz-focusring {
 411       color: transparent;
 412       text-shadow: 0 0 0 #000;
 413     }
 414
 415     option {
 416       color: #000;
 417
 418       &[value=undefined] {
 419         font-weight: $font-semibold;
 420       }
 421     }
 422   }
 423
 424   &.peertube-select-button {
 425     @include grey-button;
 426
 427     select {
 428       font-weight: $font-semibold;
 429       color: pvar(--greyForegroundColor);
 430       border: 0;
 431     }
 432   }
 433 }
 434
 435 // Thanks: https://codepen.io/manabox/pen/raQmpL
 436 @mixin peertube-radio-container {
 437   [type=radio]:checked,
 438   [type=radio]:not(:checked) {
 439     position: absolute;
 440     left: -9999px;
 441   }
 442
 443   [type=radio]:checked + label,
 444   [type=radio]:not(:checked) + label {
 445     position: relative;
 446     padding-left: 28px;
 447     cursor: pointer;
 448     line-height: 20px;
 449     display: inline-block;
 450     font-size: 15px;
 451     font-weight: $font-regular;
 452   }
 453
 454   [type=radio]:checked + label::before,
 455   [type=radio]:not(:checked) + label::before {
 456     content: '';
 457     position: absolute;
 458     left: 0;
 459     top: 0;
 460     width: 18px;
 461     height: 18px;
 462     border: 1px solid $input-border-color;
 463     border-radius: 100%;
 464     background: #fff;
 465   }
 466
 467   [type=radio]:checked + label::after,
 468   [type=radio]:not(:checked) + label::after {
 469     content: '';
 470     width: 10px;
 471     height: 10px;
 472     background: pvar(--mainColor);
 473     position: absolute;
 474     top: 4px;
 475     left: 4px;
 476     border-radius: 100%;
 477     transition: all 0.2s ease;
 478   }
 479   [type=radio]:not(:checked) + label::after {
 480     opacity: 0;
 481     transform: scale(0);
 482   }
 483   [type=radio]:checked + label::after {
 484     opacity: 1;
 485     transform: scale(1);
 486   }
 487
 488   .form-group-description {
 489     display: block;
 490     margin-top: -7px;
 491     margin-bottom: 10px;
 492     margin-left: 29px;
 493   }
 494 }
 495
 496 @mixin peertube-checkbox ($border-width) {
 497   opacity: 0;
 498   position: absolute;
 499
 500   &:focus + span {
 501     box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
 502   }
 503
 504   + span {
 505     position: relative;
 506     width: 18px;
 507     min-width: 18px;
 508     height: 18px;
 509     border: $border-width solid $input-border-color;
 510     border-radius: 3px;
 511     vertical-align: middle;
 512     cursor: pointer;
 513
 514     &::after {
 515       content: '';
 516       position: absolute;
 517       top: calc(2px - #{$border-width});
 518       left: 5px;
 519       width: 5px;
 520       height: 12px;
 521       opacity: 0;
 522       transform: rotate(45deg) scale(0);
 523       border-right: 2px solid $bg-color;
 524       border-bottom: 2px solid $bg-color;
 525     }
 526   }
 527
 528   &:checked + span {
 529     border-color: transparent;
 530     background: pvar(--mainColor);
 531     animation: jelly 0.6s ease;
 532
 533     &::after {
 534       opacity: 1;
 535       transform: rotate(45deg) scale(1);
 536     }
 537   }
 538
 539   + span + span {
 540     @include margin-left(5px);
 541
 542     font-size: 15px;
 543     font-weight: $font-regular;
 544     cursor: pointer;
 545     display: inline;
 546   }
 547
 548   &[disabled] + span,
 549   &[disabled] + span + span {
 550     opacity: 0.5;
 551     cursor: default;
 552   }
 553 }
 554
 555 @mixin peertube-badge {
 556   border-radius: 2px;
 557   padding: 1/4em 1/2em;
 558   text-transform: uppercase;
 559   font-weight: $font-bold;
 560   font-size: 12px;
 561   letter-spacing: 1/3px;
 562
 563   &.badge-banned,
 564   &.badge-red {
 565     background-color: #ffcdd2;
 566     color: #c63737;
 567   }
 568
 569   &.badge-banned {
 570     text-decoration: line-through;
 571   }
 572
 573   &.badge-yellow {
 574     background-color: #feedaf;
 575     color: #8a5340;
 576   }
 577
 578   &.badge-brown {
 579     background-color: #ffd8b2;
 580     color: #805b36;
 581   }
 582
 583   &.badge-green {
 584     background-color: #c8e6c9;
 585     color: #256029;
 586   }
 587
 588   &.badge-blue {
 589     background-color: #b3e5fc;
 590     color: #23547b;
 591   }
 592
 593   &.badge-purple {
 594     background-color: #eccfff;
 595     color: #694382;
 596   }
 597 }
 598
 599 @mixin actor-avatar-size ($size) {
 600   display: inline-block;
 601   width: $size;
 602   height: $size;
 603   min-width: $size;
 604   min-height: $size;
 605 }
 606
 607 @mixin actor-counters ($separator-margin: 10px) {
 608   color: pvar(--greyForegroundColor);
 609   font-size: 16px;
 610   display: flex;
 611   align-items: center;
 612
 613   > *:not(:last-child)::after {
 614     content: '•';
 615     margin: 0 $separator-margin;
 616     color: pvar(--mainColor);
 617   }
 618 }
 619
 620 @mixin chevron ($size, $border-width) {
 621   border-style: solid;
 622   border-width: $border-width $border-width 0 0;
 623   content: '';
 624   display: inline-block;
 625   transform: rotate(-45deg);
 626   height: $size;
 627   width: $size;
 628 }
 629
 630 @mixin chevron-right ($size, $border-width) {
 631   @include chevron($size, $border-width);
 632
 633   left: 0;
 634   transform: rotate(45deg);
 635 }
 636
 637 @mixin chevron-left ($size, $border-width) {
 638   @include chevron($size, $border-width);
 639
 640   left: 0.25em;
 641   transform: rotate(-135deg);
 642 }
 643
 644 @mixin in-content-small-title {
 645   text-transform: uppercase;
 646   color: pvar(--mainColor);
 647   font-weight: $font-bold;
 648   font-size: 13px;
 649 }
 650
 651 @mixin settings-big-title {
 652   text-transform: uppercase;
 653   color: pvar(--mainColor);
 654   font-weight: $font-bold;
 655   font-size: 110%;
 656   margin-bottom: 10px;
 657 }
 658
 659 @mixin create-button {
 660   @include peertube-button-link;
 661   @include orange-button;
 662   @include button-with-icon(20px, 5px, -1px);
 663 }
 664
 665 @mixin row-blocks ($column-responsive: true, $min-height: 130px, $separator: true) {
 666   display: flex;
 667   min-height: $min-height;
 668   padding-bottom: 20px;
 669   margin-bottom: 20px;
 670
 671   @if $separator {
 672     border-bottom: 1px solid $input-border-color;
 673   }
 674
 675   @media screen and (max-width: $small-view) {
 676     @if $column-responsive {
 677       flex-direction: column;
 678       height: auto;
 679       align-items: center;
 680     } @else {
 681       min-height: initial;
 682       padding-bottom: 10px;
 683       margin-bottom: 10px;
 684     }
 685   }
 686 }
 687
 688 @mixin dropdown-with-icon-item {
 689   padding: 6px 15px;
 690
 691   my-global-icon {
 692     @include margin-right(10px);
 693
 694     width: 22px;
 695     opacity: .7;
 696     position: relative;
 697     top: -2px;
 698   }
 699 }
 700
 701 @mixin progressbar($small: false) {
 702   background-color: $grey-background-color;
 703   display: flex;
 704   height: 1rem;
 705   overflow: hidden;
 706   font-size: 0.75rem;
 707   border-radius: 0.25rem;
 708   position: relative;
 709
 710   span {
 711     position: absolute;
 712     color: $grey-foreground-color;
 713
 714     @if $small {
 715       top: -1px;
 716     }
 717
 718     &:nth-of-type(1) {
 719       left: .2rem;
 720     }
 721     &:nth-of-type(2) {
 722       right: .2rem;
 723     }
 724   }
 725
 726   .progress-bar {
 727     color: pvar(--mainBackgroundColor);
 728     background-color: pvar(--mainColor);
 729     display: flex;
 730     flex-direction: column;
 731     justify-content: center;
 732     text-align: center;
 733     white-space: nowrap;
 734     transition: width 0.6s ease;
 735
 736     &.secondary {
 737       background-color: pvar(--secondaryColor);
 738     }
 739
 740     &.red {
 741       background-color: lighten($color: #c54130, $amount: 10);
 742     }
 743   }
 744 }
 745
 746 @mixin breadcrumb {
 747   display: flex;
 748   flex-wrap: wrap;
 749   padding: 0.75rem 1rem;
 750   margin-bottom: 1rem;
 751   list-style: none;
 752   background-color: pvar(--submenuBackgroundColor);
 753   border-radius: 0.25rem;
 754
 755   .breadcrumb-item {
 756     display: flex;
 757
 758     a {
 759       color: pvar(--mainColor);
 760     }
 761
 762     + .breadcrumb-item {
 763       @include padding-left(0.5rem);
 764
 765       &::before {
 766         @include padding-right(0.5rem);
 767
 768         display: inline-block;
 769         color: #6c757d;
 770         content: '/';
 771       }
 772     }
 773
 774     &.active {
 775       color: #6c757d;
 776     }
 777   }
 778 }
 779
 780 @mixin dashboard {
 781   display: flex;
 782   flex-wrap: wrap;
 783   margin: 0 -5px;
 784
 785   > div {
 786     box-sizing: border-box;
 787     flex: 0 0 percentage(math.div(1, 3));
 788     padding: 0 5px;
 789     margin-bottom: 10px;
 790
 791     > a {
 792       @include disable-default-a-behaviour;
 793
 794       text-decoration: none;
 795       color: inherit;
 796       display: block;
 797       font-size: 18px;
 798
 799       &:active,
 800       &:focus,
 801       &:hover {
 802         opacity: .8;
 803       }
 804     }
 805
 806     > a,
 807     > div {
 808       padding: 20px;
 809       background: pvar(--submenuBackgroundColor);
 810       border-radius: 4px;
 811       box-sizing: border-box;
 812       height: 100%;
 813     }
 814   }
 815
 816   .dashboard-num,
 817   .dashboard-text {
 818     text-align: center;
 819     font-size: 130%;
 820     color: pvar(--mainForegroundColor);
 821     line-height: 30px;
 822     margin-bottom: 20px;
 823   }
 824
 825   .dashboard-label {
 826     font-size: 90%;
 827     color: pvar(--inputPlaceholderColor);
 828     text-align: center;
 829   }
 830 }
 831
 832 @mixin divider($color: pvar(--submenuBackgroundColor), $background: pvar(--mainBackgroundColor)) {
 833   width: 95%;
 834   border-top: .05rem solid $color;
 835   height: .05rem;
 836   text-align: center;
 837   display: block;
 838   position: relative;
 839
 840   &[data-content] {
 841     margin: .8rem 0;
 842
 843     &::after {
 844       background: $background;
 845       color: $color;
 846       content: attr(data-content);
 847       display: inline-block;
 848       font-size: .7rem;
 849       padding: 0 .4rem;
 850       transform: translateY(-.65rem);
 851     }
 852   }
 853 }
 854
 855 @mixin chip {
 856   --chip-radius: 5rem;
 857   --chip-padding: .2rem .4rem;
 858   $avatar-height: 1.2rem;
 859
 860   align-items: center;
 861   border-radius: var(--chip-radius);
 862   display: inline-flex;
 863   font-size: 90%;
 864   color: pvar(--mainForegroundColor);
 865   height: $avatar-height;
 866   line-height: 1rem;
 867   margin: .1rem;
 868   max-width: 320px;
 869   overflow: hidden;
 870   padding: var(--chip-padding);
 871   text-decoration: none;
 872   text-overflow: ellipsis;
 873   vertical-align: middle;
 874   white-space: nowrap;
 875
 876   &.rectangular {
 877     --chip-radius: .2rem;
 878     --chip-padding: .2rem .3rem;
 879   }
 880
 881   my-actor-avatar {
 882     @include margin-left(-.4rem);
 883     @include margin-right(.2rem);
 884   }
 885
 886   &.two-lines {
 887     $avatar-height: 2rem;
 888
 889     height: $avatar-height;
 890
 891     my-actor-avatar {
 892       display: inline-block;
 893     }
 894
 895     div {
 896       margin: 0 .1rem;
 897
 898       display: flex;
 899       flex-direction: column;
 900       height: $avatar-height;
 901       justify-content: center;
 902     }
 903   }
 904 }
 905
 906 // applies ratio (default to 16:9) to a child element (using $selector) only using
 907 // an immediate's parent size. This allows to set a ratio without explicit
 908 // dimensions, as width/height cannot be computed from each other.
 909 @mixin block-ratio ($selector: 'div', $inverted-ratio: math.div(9, 16)) {
 910   $padding-percent: percentage($inverted-ratio);
 911
 912   position: relative;
 913   height: 0;
 914   width: 100%;
 915   padding-top: $padding-percent;
 916
 917   #{$selector} {
 918     position: absolute;
 919     width: 100%;
 920     height: 100%;
 921     top: 0;
 922
 923     @content;
 924   }
 925 }
 926
 927 @mixin sub-menu-h1 {
 928   ::ng-deep h1 {
 929     font-size: 1.3rem;
 930     border-bottom: 2px solid $grey-background-color;
 931     padding-bottom: 15px;
 932     margin-bottom: $sub-menu-margin-bottom;
 933
 934     > span > my-global-icon,
 935     > my-global-icon {
 936       @include margin-right(10px);
 937       width: 24px;
 938       height: 24px;
 939       vertical-align: top;
 940     }
 941
 942     .badge {
 943       @include margin-left(7px);
 944       vertical-align: top;
 945     }
 946   }
 947 }
 948
 949 @mixin play-icon ($width, $height) {
 950   width: 0;
 951   height: 0;
 952
 953   position: absolute;
 954   left: 50%;
 955   top: 50%;
 956   transform: translate(-50%, -50%) scale(0.5);
 957
 958   border-top: #{math.div($height, 2)} solid transparent;
 959   border-bottom: #{math.div($height, 2)} solid transparent;
 960
 961   border-left: $width solid rgba(255, 255, 255, 0.95);
 962 }
 963
 964 @mixin on-small-main-col () {
 965   :host-context(.main-col:not(.expanded)) {
 966     @media screen and (max-width: $small-view + $menu-width) {
 967       @content;
 968     }
 969   }
 970
 971   :host-context(.main-col.expanded) {
 972     @media screen and (max-width: $small-view) {
 973       @content;
 974     }
 975   }
 976 }
 977
 978 @mixin on-mobile-main-col () {
 979   :host-context(.main-col:not(.expanded)) {
 980     @media screen and (max-width: $mobile-view + $menu-width) {
 981       @content;
 982     }
 983   }
 984
 985   :host-context(.main-col.expanded) {
 986     @media screen and (max-width: $mobile-view) {
 987       @content;
 988     }
 989   }
 990 }
 991
 992 @mixin margin ($block-start, $inline-end, $block-end, $inline-start) {
 993   @include margin-left($inline-start);
 994   @include margin-right($inline-end);
 995
 996   margin-top: $block-start;
 997   margin-bottom: $block-end;
 998 }
 999
1000 @mixin padding ($block-start, $inline-end, $block-end, $inline-start) {
1001   @include padding-left($inline-start);
1002   @include padding-right($inline-end);
1003
1004   padding-top: $block-start;
1005   padding-bottom: $block-end;
1006 }
1007
1008 @mixin margin-left ($value) {
1009   @supports (margin-inline-start: $value) {
1010     margin-inline-start: $value;
1011   }
1012
1013   @supports not (margin-inline-start: $value) {
1014     margin-left: $value;
1015   }
1016 }
1017
1018 @mixin margin-right ($value) {
1019   @supports (margin-inline-end: $value) {
1020     margin-inline-end: $value;
1021   }
1022
1023   @supports not (margin-inline-end: $value) {
1024     margin-right: $value;
1025   }
1026 }
1027
1028 @mixin padding-left ($value) {
1029   @supports (padding-inline-start: $value) {
1030     padding-inline-start: $value;
1031   }
1032
1033   @supports not (padding-inline-start: $value) {
1034     padding-left: $value;
1035   }
1036 }
1037
1038 @mixin padding-right ($value) {
1039   @supports (padding-inline-end: $value) {
1040     padding-inline-end: $value;
1041   }
1042
1043   @supports not (padding-inline-end: $value) {
1044     padding-right: $value;
1045   }
1046 }