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 #C6C6C6;
  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);
 128   background-color: pvar(--textareaBackgroundColor);
 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: #C6C6C6;
 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: #C6C6C6;
 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: $grey-background-color;
 211   color: pvar(--greyForegroundColor);
 212
 213   &:hover,
 214   &:active,
 215   &:focus,
 216   &[disabled],
 217   &.disabled {
 218     color: pvar(--greyForegroundColor);
 219     background-color: $grey-background-hover-color;
 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   @include padding(0, 17px, 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   // FIXME: because of primeng that redefines border-radius of all input[type="..."]
 268   border-radius: 3px !important;
 269   text-align: center;
 270   cursor: pointer;
 271 }
 272
 273 @mixin peertube-button-link {
 274   @include disable-default-a-behaviour;
 275   @include peertube-button;
 276
 277   display: inline-block;
 278 }
 279
 280 @mixin peertube-button-outline {
 281   @include disable-default-a-behaviour;
 282   @include peertube-button;
 283
 284   display: inline-block;
 285   border: 1px solid;
 286 }
 287
 288 @mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
 289   display: inline-flex;
 290   align-items: center;
 291   line-height: normal !important;
 292
 293   my-global-icon {
 294     @include margin-right($margin-right);
 295
 296     position: relative;
 297     width: $width;
 298     top: $top;
 299   }
 300 }
 301
 302 @mixin peertube-file {
 303   position: relative;
 304   overflow: hidden;
 305   display: inline-block;
 306   min-height: 30px;
 307
 308   input[type=file] {
 309     position: absolute;
 310     top: 0;
 311     right: 0;
 312     width: 100%;
 313     height: 100%;
 314     font-size: 100px;
 315     text-align: end;
 316     filter: alpha(opacity=0);
 317     opacity: 0;
 318     outline: none;
 319     background: #fff;
 320     cursor: inherit;
 321     display: block;
 322   }
 323 }
 324
 325 @mixin peertube-button-file ($width) {
 326   @include peertube-file;
 327   @include peertube-button;
 328
 329   width: $width;
 330 }
 331
 332 @mixin icon ($size) {
 333   display: inline-block;
 334   background-repeat: no-repeat;
 335   background-size: contain;
 336   width: $size;
 337   height: $size;
 338   vertical-align: middle;
 339   cursor: pointer;
 340 }
 341
 342 @mixin responsive-width ($width) {
 343   width: $width;
 344
 345   @media screen and (max-width: $width) {
 346     width: 100%;
 347   }
 348 }
 349
 350 @mixin peertube-select-container ($width) {
 351   padding: 0;
 352   margin: 0;
 353   width: $width;
 354   border-radius: 3px;
 355   color: pvar(--inputForegroundColor);
 356   background: pvar(--inputBackgroundColor);
 357   position: relative;
 358   font-size: 15px;
 359
 360   &.disabled {
 361     background-color: #E5E5E5;
 362
 363     select {
 364       cursor: default;
 365     }
 366   }
 367   select[disabled] {
 368     background-color: #f9f9f9;
 369   }
 370
 371   @media screen and (max-width: $width) {
 372     width: 100%;
 373   }
 374
 375   &::after {
 376     top: 50%;
 377     right: calc(0% + 15px);
 378     content: ' ';
 379     height: 0;
 380     width: 0;
 381     position: absolute;
 382     pointer-events: none;
 383     border: 5px solid rgba(0, 0, 0, 0);
 384     border-top-color: #000;
 385     margin-top: -2px;
 386     z-index: 100;
 387   }
 388
 389   select {
 390     padding: 0 35px 0 12px;
 391     position: relative;
 392     border: 1px solid #C6C6C6;
 393     background: transparent none;
 394     appearance: none;
 395     cursor: pointer;
 396     height: $button-height;
 397     text-overflow: ellipsis;
 398     color: pvar(--mainForegroundColor);
 399
 400     &:focus {
 401       outline: none;
 402     }
 403
 404     &:-moz-focusring {
 405       color: transparent;
 406       text-shadow: 0 0 0 #000;
 407     }
 408
 409     option {
 410       color: #000;
 411     }
 412   }
 413
 414   &.peertube-select-button {
 415     @include grey-button;
 416
 417     select,
 418     option {
 419       font-weight: $font-semibold;
 420       color: pvar(--greyForegroundColor);
 421       border: 0;
 422     }
 423   }
 424 }
 425
 426 // Thanks: https://codepen.io/manabox/pen/raQmpL
 427 @mixin peertube-radio-container {
 428   [type=radio]:checked,
 429   [type=radio]:not(:checked) {
 430     position: absolute;
 431     left: -9999px;
 432   }
 433
 434   [type=radio]:checked + label,
 435   [type=radio]:not(:checked) + label {
 436     position: relative;
 437     padding-left: 28px;
 438     cursor: pointer;
 439     line-height: 20px;
 440     display: inline-block;
 441     font-size: 15px;
 442     font-weight: $font-regular;
 443   }
 444
 445   [type=radio]:checked + label::before,
 446   [type=radio]:not(:checked) + label::before {
 447     content: '';
 448     position: absolute;
 449     left: 0;
 450     top: 0;
 451     width: 18px;
 452     height: 18px;
 453     border: 1px solid #C6C6C6;
 454     border-radius: 100%;
 455     background: #fff;
 456   }
 457
 458   [type=radio]:checked + label::after,
 459   [type=radio]:not(:checked) + label::after {
 460     content: '';
 461     width: 10px;
 462     height: 10px;
 463     background: pvar(--mainColor);
 464     position: absolute;
 465     top: 4px;
 466     left: 4px;
 467     border-radius: 100%;
 468     transition: all 0.2s ease;
 469   }
 470   [type=radio]:not(:checked) + label::after {
 471     opacity: 0;
 472     transform: scale(0);
 473   }
 474   [type=radio]:checked + label::after {
 475     opacity: 1;
 476     transform: scale(1);
 477   }
 478
 479   .form-group-description {
 480     display: block;
 481     margin-top: -7px;
 482     margin-bottom: 10px;
 483     margin-left: 29px;
 484   }
 485 }
 486
 487 @mixin peertube-checkbox ($border-width) {
 488   opacity: 0;
 489   position: absolute;
 490
 491   &:focus + span {
 492     box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
 493   }
 494
 495   + span {
 496     position: relative;
 497     width: 18px;
 498     min-width: 18px;
 499     height: 18px;
 500     border: $border-width solid #C6C6C6;
 501     border-radius: 3px;
 502     vertical-align: middle;
 503     cursor: pointer;
 504
 505     &::after {
 506       content: '';
 507       position: absolute;
 508       top: calc(2px - #{$border-width});
 509       left: 5px;
 510       width: 5px;
 511       height: 12px;
 512       opacity: 0;
 513       transform: rotate(45deg) scale(0);
 514       border-right: 2px solid $bg-color;
 515       border-bottom: 2px solid $bg-color;
 516     }
 517   }
 518
 519   &:checked + span {
 520     border-color: transparent;
 521     background: pvar(--mainColor);
 522     animation: jelly 0.6s ease;
 523
 524     &::after {
 525       opacity: 1;
 526       transform: rotate(45deg) scale(1);
 527     }
 528   }
 529
 530   + span + span {
 531     @include margin-left(5px);
 532
 533     font-size: 15px;
 534     font-weight: $font-regular;
 535     cursor: pointer;
 536     display: inline;
 537   }
 538
 539   &[disabled] + span,
 540   &[disabled] + span + span {
 541     opacity: 0.5;
 542     cursor: default;
 543   }
 544 }
 545
 546 @mixin table-badge {
 547   border-radius: 2px;
 548   padding: 1/4em 1/2em;
 549   text-transform: uppercase;
 550   font-weight: $font-bold;
 551   font-size: 12px;
 552   letter-spacing: 1/3px;
 553
 554   &.badge-banned,
 555   &.badge-red {
 556     background-color: #ffcdd2;
 557     color: #c63737;
 558   }
 559
 560   &.badge-banned {
 561     text-decoration: line-through;
 562   }
 563
 564   &.badge-yellow {
 565     background-color: #feedaf;
 566     color: #8a5340;
 567   }
 568
 569   &.badge-brown {
 570     background-color: #ffd8b2;
 571     color: #805b36;
 572   }
 573
 574   &.badge-green {
 575     background-color: #c8e6c9;
 576     color: #256029;
 577   }
 578
 579   &.badge-blue {
 580     background-color: #b3e5fc;
 581     color: #23547b;
 582   }
 583
 584   &.badge-purple {
 585     background-color: #eccfff;
 586     color: #694382;
 587   }
 588 }
 589
 590 @mixin actor-avatar-size ($size) {
 591   display: inline-block;
 592   width: $size;
 593   height: $size;
 594   min-width: $size;
 595   min-height: $size;
 596 }
 597
 598 @mixin actor-counters ($separator-margin: 10px) {
 599   color: pvar(--greyForegroundColor);
 600   font-size: 16px;
 601   display: flex;
 602   align-items: center;
 603
 604   > *:not(:last-child)::after {
 605     content: '•';
 606     margin: 0 $separator-margin;
 607     color: pvar(--mainColor);
 608   }
 609 }
 610
 611 @mixin chevron ($size, $border-width) {
 612   border-style: solid;
 613   border-width: $border-width $border-width 0 0;
 614   content: '';
 615   display: inline-block;
 616   transform: rotate(-45deg);
 617   height: $size;
 618   width: $size;
 619 }
 620
 621 @mixin chevron-right ($size, $border-width) {
 622   @include chevron($size, $border-width);
 623
 624   left: 0;
 625   transform: rotate(45deg);
 626 }
 627
 628 @mixin chevron-left ($size, $border-width) {
 629   @include chevron($size, $border-width);
 630
 631   left: 0.25em;
 632   transform: rotate(-135deg);
 633 }
 634
 635 @mixin in-content-small-title {
 636   text-transform: uppercase;
 637   color: pvar(--mainColor);
 638   font-weight: $font-bold;
 639   font-size: 13px;
 640 }
 641
 642 @mixin settings-big-title {
 643   text-transform: uppercase;
 644   color: pvar(--mainColor);
 645   font-weight: $font-bold;
 646   font-size: 110%;
 647   margin-bottom: 10px;
 648 }
 649
 650 @mixin create-button {
 651   @include peertube-button-link;
 652   @include orange-button;
 653   @include button-with-icon(20px, 5px, -1px);
 654 }
 655
 656 @mixin row-blocks ($column-responsive: true, $min-height: 130px, $separator: true) {
 657   display: flex;
 658   min-height: $min-height;
 659   padding-bottom: 20px;
 660   margin-bottom: 20px;
 661
 662   @if $separator {
 663     border-bottom: 1px solid #C6C6C6;
 664   }
 665
 666   @media screen and (max-width: $small-view) {
 667     @if $column-responsive {
 668       flex-direction: column;
 669       height: auto;
 670       align-items: center;
 671     } @else {
 672       min-height: initial;
 673       padding-bottom: 10px;
 674       margin-bottom: 10px;
 675     }
 676   }
 677 }
 678
 679 @mixin dropdown-with-icon-item {
 680   padding: 6px 15px;
 681
 682   my-global-icon {
 683     @include margin-right(10px);
 684
 685     width: 22px;
 686     opacity: .7;
 687     position: relative;
 688     top: -2px;
 689   }
 690 }
 691
 692 @mixin progressbar($small: false) {
 693   background-color: $grey-background-color;
 694   display: flex;
 695   height: 1rem;
 696   overflow: hidden;
 697   font-size: 0.75rem;
 698   border-radius: 0.25rem;
 699   position: relative;
 700
 701   span {
 702     position: absolute;
 703     color: $grey-foreground-color;
 704     @if $small {
 705       top: -1px;
 706     }
 707
 708     &:nth-of-type(1) {
 709       left: .2rem;
 710     }
 711     &:nth-of-type(2) {
 712       right: .2rem;
 713     }
 714   }
 715
 716   .progress-bar {
 717     color: pvar(--mainBackgroundColor);
 718     background-color: pvar(--mainColor);
 719     display: flex;
 720     flex-direction: column;
 721     justify-content: center;
 722     text-align: center;
 723     white-space: nowrap;
 724     transition: width 0.6s ease;
 725
 726     &.secondary {
 727       background-color: pvar(--secondaryColor);
 728     }
 729
 730     &.red {
 731       background-color: lighten($color: #c54130, $amount: 10);
 732     }
 733   }
 734 }
 735
 736 @mixin breadcrumb {
 737   display: flex;
 738   flex-wrap: wrap;
 739   padding: 0.75rem 1rem;
 740   margin-bottom: 1rem;
 741   list-style: none;
 742   background-color: pvar(--submenuBackgroundColor);
 743   border-radius: 0.25rem;
 744
 745   .breadcrumb-item {
 746     display: flex;
 747
 748     a {
 749       color: pvar(--mainColor);
 750     }
 751
 752     + .breadcrumb-item {
 753       @include padding-left(0.5rem);
 754
 755       &::before {
 756         @include padding-right(0.5rem);
 757
 758         display: inline-block;
 759         color: #6c757d;
 760         content: '/';
 761       }
 762     }
 763
 764     &.active {
 765       color: #6c757d;
 766     }
 767   }
 768 }
 769
 770 @mixin dashboard {
 771   display: flex;
 772   flex-wrap: wrap;
 773   margin: 0 -5px;
 774
 775   > div {
 776     box-sizing: border-box;
 777     flex: 0 0 percentage(math.div(1, 3));
 778     padding: 0 5px;
 779     margin-bottom: 10px;
 780
 781     > a {
 782       @include disable-default-a-behaviour;
 783
 784       text-decoration: none;
 785       color: inherit;
 786       display: block;
 787       font-size: 18px;
 788
 789       &:active,
 790       &:focus,
 791       &:hover {
 792         opacity: .8;
 793       }
 794     }
 795
 796     > a,
 797     > div {
 798       padding: 20px;
 799       background: pvar(--submenuBackgroundColor);
 800       border-radius: 4px;
 801       box-sizing: border-box;
 802       height: 100%;
 803     }
 804   }
 805
 806   .dashboard-num,
 807   .dashboard-text {
 808     text-align: center;
 809     font-size: 130%;
 810     color: pvar(--mainForegroundColor);
 811     line-height: 30px;
 812     margin-bottom: 20px;
 813   }
 814
 815   .dashboard-label {
 816     font-size: 90%;
 817     color: pvar(--inputPlaceholderColor);
 818     text-align: center;
 819   }
 820 }
 821
 822 @mixin divider($color: pvar(--submenuBackgroundColor), $background: pvar(--mainBackgroundColor)) {
 823   width: 95%;
 824   border-top: .05rem solid $color;
 825   height: .05rem;
 826   text-align: center;
 827   display: block;
 828   position: relative;
 829
 830   &[data-content] {
 831     margin: .8rem 0;
 832
 833     &::after {
 834       background: $background;
 835       color: $color;
 836       content: attr(data-content);
 837       display: inline-block;
 838       font-size: .7rem;
 839       padding: 0 .4rem;
 840       transform: translateY(-.65rem);
 841     }
 842   }
 843 }
 844
 845 @mixin chip {
 846   --chip-radius: 5rem;
 847   --chip-padding: .2rem .4rem;
 848   $avatar-height: 1.2rem;
 849
 850   align-items: center;
 851   border-radius: var(--chip-radius);
 852   display: inline-flex;
 853   font-size: 90%;
 854   color: pvar(--mainForegroundColor);
 855   height: $avatar-height;
 856   line-height: 1rem;
 857   margin: .1rem;
 858   max-width: 320px;
 859   overflow: hidden;
 860   padding: var(--chip-padding);
 861   text-decoration: none;
 862   text-overflow: ellipsis;
 863   vertical-align: middle;
 864   white-space: nowrap;
 865
 866   &.rectangular {
 867     --chip-radius: .2rem;
 868     --chip-padding: .2rem .3rem;
 869   }
 870
 871   my-actor-avatar {
 872     @include margin-left(-.4rem);
 873     @include margin-right(.2rem);
 874   }
 875
 876   &.two-lines {
 877     $avatar-height: 2rem;
 878
 879     height: $avatar-height;
 880
 881     my-actor-avatar {
 882       @include actor-avatar-size($avatar-height);
 883     }
 884
 885     div {
 886       margin: 0 .1rem;
 887
 888       display: flex;
 889       flex-direction: column;
 890       height: $avatar-height;
 891       justify-content: center;
 892     }
 893   }
 894 }
 895
 896 // applies ratio (default to 16:9) to a child element (using $selector) only using
 897 // an immediate's parent size. This allows to set a ratio without explicit
 898 // dimensions, as width/height cannot be computed from each other.
 899 @mixin block-ratio ($selector: 'div', $inverted-ratio: math.div(9, 16)) {
 900   $padding-percent: percentage($inverted-ratio);
 901
 902   position: relative;
 903   height: 0;
 904   width: 100%;
 905   padding-top: $padding-percent;
 906
 907   #{$selector} {
 908     position: absolute;
 909     width: 100%;
 910     height: 100%;
 911     top: 0;
 912
 913     @content;
 914   }
 915 }
 916
 917 @mixin sub-menu-h1 {
 918   ::ng-deep h1 {
 919     font-size: 1.3rem;
 920     border-bottom: 2px solid $grey-background-color;
 921     padding-bottom: 15px;
 922     margin-bottom: $sub-menu-margin-bottom;
 923
 924     > span > my-global-icon,
 925     > my-global-icon {
 926       @include margin-right(10px);
 927       width: 24px;
 928       height: 24px;
 929       vertical-align: top;
 930     }
 931
 932     .badge {
 933       @include margin-left(7px);
 934       vertical-align: top;
 935     }
 936   }
 937 }
 938
 939 @mixin play-icon ($width, $height) {
 940   width: 0;
 941   height: 0;
 942
 943   position: absolute;
 944   left: 50%;
 945   top: 50%;
 946   transform: translate(-50%, -50%) scale(0.5);
 947
 948   border-top: #{math.div($height, 2)} solid transparent;
 949   border-bottom: #{math.div($height, 2)} solid transparent;
 950
 951   border-left: $width solid rgba(255, 255, 255, 0.95);
 952 }
 953
 954 @mixin on-small-main-col () {
 955   :host-context(.main-col:not(.expanded)) {
 956     @media screen and (max-width: $small-view + $menu-width) {
 957       @content;
 958     }
 959   }
 960
 961   :host-context(.main-col.expanded) {
 962     @media screen and (max-width: $small-view) {
 963       @content;
 964     }
 965   }
 966 }
 967
 968 @mixin on-mobile-main-col () {
 969   :host-context(.main-col:not(.expanded)) {
 970     @media screen and (max-width: $mobile-view + $menu-width) {
 971       @content;
 972     }
 973   }
 974
 975   :host-context(.main-col.expanded) {
 976     @media screen and (max-width: $mobile-view) {
 977       @content;
 978     }
 979   }
 980 }
 981
 982 @mixin margin ($block-start, $inline-end, $block-end, $inline-start) {
 983   @include margin-left($inline-start);
 984   @include margin-right($inline-end);
 985
 986   margin-top: $block-start;
 987   margin-bottom: $block-end;
 988 }
 989
 990 @mixin padding ($block-start, $inline-end, $block-end, $inline-start) {
 991   @include padding-left($inline-start);
 992   @include padding-right($inline-end);
 993
 994   padding-top: $block-start;
 995   padding-bottom: $block-end;
 996 }
 997
 998 @mixin margin-left ($value) {
 999   @supports (margin-inline-start: $value) {
1000     margin-inline-start: $value;
1001   }
1002
1003   @supports not (margin-inline-start: $value) {
1004     margin-left: $value;
1005   }
1006 }
1007
1008 @mixin margin-right ($value) {
1009   @supports (margin-inline-end: $value) {
1010     margin-inline-end: $value;
1011   }
1012
1013   @supports not (margin-inline-end: $value) {
1014     margin-right: $value;
1015   }
1016 }
1017
1018 @mixin padding-left ($value) {
1019   @supports (padding-inline-start: $value) {
1020     padding-inline-start: $value;
1021   }
1022
1023   @supports not (padding-inline-start: $value) {
1024     padding-left: $value;
1025   }
1026 }
1027
1028 @mixin padding-right ($value) {
1029   @supports (padding-inline-end: $value) {
1030     padding-inline-end: $value;
1031   }
1032
1033   @supports not (padding-inline-end: $value) {
1034     padding-right: $value;
1035   }
1036 }