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