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