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) {
 657   display: flex;
 658   min-height: 130px;
 659   padding-bottom: 20px;
 660   margin-bottom: 20px;
 661   border-bottom: 1px solid #C6C6C6;
 662
 663   @media screen and (max-width: $small-view) {
 664     @if $column-responsive {
 665       flex-direction: column;
 666       height: auto;
 667       align-items: center;
 668     } @else {
 669       min-height: initial;
 670       padding-bottom: 10px;
 671       margin-bottom: 10px;
 672     }
 673   }
 674 }
 675
 676 @mixin dropdown-with-icon-item {
 677   padding: 6px 15px;
 678
 679   my-global-icon {
 680     @include margin-right(10px);
 681
 682     width: 22px;
 683     opacity: .7;
 684     position: relative;
 685     top: -2px;
 686   }
 687 }
 688
 689 @mixin progressbar($small: false) {
 690   background-color: $grey-background-color;
 691   display: flex;
 692   height: 1rem;
 693   overflow: hidden;
 694   font-size: 0.75rem;
 695   border-radius: 0.25rem;
 696   position: relative;
 697
 698   span {
 699     position: absolute;
 700     color: $grey-foreground-color;
 701     @if $small {
 702       top: -1px;
 703     }
 704
 705     &:nth-of-type(1) {
 706       left: .2rem;
 707     }
 708     &:nth-of-type(2) {
 709       right: .2rem;
 710     }
 711   }
 712
 713   .progress-bar {
 714     color: pvar(--mainBackgroundColor);
 715     background-color: pvar(--mainColor);
 716     display: flex;
 717     flex-direction: column;
 718     justify-content: center;
 719     text-align: center;
 720     white-space: nowrap;
 721     transition: width 0.6s ease;
 722
 723     &.secondary {
 724       background-color: pvar(--secondaryColor);
 725     }
 726
 727     &.red {
 728       background-color: lighten($color: #c54130, $amount: 10);
 729     }
 730   }
 731 }
 732
 733 @mixin breadcrumb {
 734   display: flex;
 735   flex-wrap: wrap;
 736   padding: 0.75rem 1rem;
 737   margin-bottom: 1rem;
 738   list-style: none;
 739   background-color: pvar(--submenuBackgroundColor);
 740   border-radius: 0.25rem;
 741
 742   .breadcrumb-item {
 743     display: flex;
 744
 745     a {
 746       color: pvar(--mainColor);
 747     }
 748
 749     + .breadcrumb-item {
 750       @include padding-left(0.5rem);
 751
 752       &::before {
 753         @include padding-right(0.5rem);
 754
 755         display: inline-block;
 756         color: #6c757d;
 757         content: '/';
 758       }
 759     }
 760
 761     &.active {
 762       color: #6c757d;
 763     }
 764   }
 765 }
 766
 767 @mixin dashboard {
 768   display: flex;
 769   flex-wrap: wrap;
 770   margin: 0 -5px;
 771
 772   > div {
 773     box-sizing: border-box;
 774     flex: 0 0 percentage(math.div(1, 3));
 775     padding: 0 5px;
 776     margin-bottom: 10px;
 777
 778     > a {
 779       @include disable-default-a-behaviour;
 780
 781       text-decoration: none;
 782       color: inherit;
 783       display: block;
 784       font-size: 18px;
 785
 786       &:active,
 787       &:focus,
 788       &:hover {
 789         opacity: .8;
 790       }
 791     }
 792
 793     > a,
 794     > div {
 795       padding: 20px;
 796       background: pvar(--submenuBackgroundColor);
 797       border-radius: 4px;
 798       box-sizing: border-box;
 799       height: 100%;
 800     }
 801   }
 802
 803   .dashboard-num,
 804   .dashboard-text {
 805     text-align: center;
 806     font-size: 130%;
 807     color: pvar(--mainForegroundColor);
 808     line-height: 30px;
 809     margin-bottom: 20px;
 810   }
 811
 812   .dashboard-label {
 813     font-size: 90%;
 814     color: pvar(--inputPlaceholderColor);
 815     text-align: center;
 816   }
 817 }
 818
 819 @mixin divider($color: pvar(--submenuBackgroundColor), $background: pvar(--mainBackgroundColor)) {
 820   width: 95%;
 821   border-top: .05rem solid $color;
 822   height: .05rem;
 823   text-align: center;
 824   display: block;
 825   position: relative;
 826
 827   &[data-content] {
 828     margin: .8rem 0;
 829
 830     &::after {
 831       background: $background;
 832       color: $color;
 833       content: attr(data-content);
 834       display: inline-block;
 835       font-size: .7rem;
 836       padding: 0 .4rem;
 837       transform: translateY(-.65rem);
 838     }
 839   }
 840 }
 841
 842 @mixin chip {
 843   --chip-radius: 5rem;
 844   --chip-padding: .2rem .4rem;
 845   $avatar-height: 1.2rem;
 846
 847   align-items: center;
 848   border-radius: var(--chip-radius);
 849   display: inline-flex;
 850   font-size: 90%;
 851   color: pvar(--mainForegroundColor);
 852   height: $avatar-height;
 853   line-height: 1rem;
 854   margin: .1rem;
 855   max-width: 320px;
 856   overflow: hidden;
 857   padding: var(--chip-padding);
 858   text-decoration: none;
 859   text-overflow: ellipsis;
 860   vertical-align: middle;
 861   white-space: nowrap;
 862
 863   &.rectangular {
 864     --chip-radius: .2rem;
 865     --chip-padding: .2rem .3rem;
 866   }
 867
 868   my-actor-avatar {
 869     @include margin-left(-.4rem);
 870     @include margin-right(.2rem);
 871   }
 872
 873   &.two-lines {
 874     $avatar-height: 2rem;
 875
 876     height: $avatar-height;
 877
 878     my-actor-avatar {
 879       @include actor-avatar-size($avatar-height);
 880     }
 881
 882     div {
 883       margin: 0 .1rem;
 884
 885       display: flex;
 886       flex-direction: column;
 887       height: $avatar-height;
 888       justify-content: center;
 889     }
 890   }
 891 }
 892
 893 // applies ratio (default to 16:9) to a child element (using $selector) only using
 894 // an immediate's parent size. This allows to set a ratio without explicit
 895 // dimensions, as width/height cannot be computed from each other.
 896 @mixin block-ratio ($selector: 'div', $inverted-ratio: math.div(9, 16)) {
 897   $padding-percent: percentage($inverted-ratio);
 898
 899   position: relative;
 900   height: 0;
 901   width: 100%;
 902   padding-top: $padding-percent;
 903
 904   #{$selector} {
 905     position: absolute;
 906     width: 100%;
 907     height: 100%;
 908     top: 0;
 909
 910     @content;
 911   }
 912 }
 913
 914 @mixin sub-menu-h1 {
 915   ::ng-deep h1 {
 916     font-size: 1.3rem;
 917     border-bottom: 2px solid $grey-background-color;
 918     padding-bottom: 15px;
 919     margin-bottom: $sub-menu-margin-bottom;
 920
 921     > span > my-global-icon,
 922     > my-global-icon {
 923       @include margin-right(10px);
 924       width: 24px;
 925       height: 24px;
 926       vertical-align: top;
 927     }
 928
 929     .badge {
 930       @include margin-left(7px);
 931       vertical-align: top;
 932     }
 933   }
 934 }
 935
 936 @mixin play-icon ($width, $height) {
 937   width: 0;
 938   height: 0;
 939
 940   position: absolute;
 941   left: 50%;
 942   top: 50%;
 943   transform: translate(-50%, -50%) scale(0.5);
 944
 945   border-top: #{math.div($height, 2)} solid transparent;
 946   border-bottom: #{math.div($height, 2)} solid transparent;
 947
 948   border-left: $width solid rgba(255, 255, 255, 0.95);
 949 }
 950
 951 @mixin on-small-main-col () {
 952   :host-context(.main-col:not(.expanded)) {
 953     @media screen and (max-width: $small-view + $menu-width) {
 954       @content;
 955     }
 956   }
 957
 958   :host-context(.main-col.expanded) {
 959     @media screen and (max-width: $small-view) {
 960       @content;
 961     }
 962   }
 963 }
 964
 965 @mixin on-mobile-main-col () {
 966   :host-context(.main-col:not(.expanded)) {
 967     @media screen and (max-width: $mobile-view + $menu-width) {
 968       @content;
 969     }
 970   }
 971
 972   :host-context(.main-col.expanded) {
 973     @media screen and (max-width: $mobile-view) {
 974       @content;
 975     }
 976   }
 977 }
 978
 979 @mixin margin ($block-start, $inline-end, $block-end, $inline-start) {
 980   @include margin-left($inline-start);
 981   @include margin-right($inline-end);
 982
 983   margin-top: $block-start;
 984   margin-bottom: $block-end;
 985 }
 986
 987 @mixin padding ($block-start, $inline-end, $block-end, $inline-start) {
 988   @include padding-left($inline-start);
 989   @include padding-right($inline-end);
 990
 991   padding-top: $block-start;
 992   padding-bottom: $block-end;
 993 }
 994
 995 @mixin margin-left ($value) {
 996   @supports (margin-inline-start: $value) {
 997     margin-inline-start: $value;
 998   }
 999
1000   @supports not (margin-inline-start: $value) {
1001     margin-left: $value;
1002   }
1003 }
1004
1005 @mixin margin-right ($value) {
1006   @supports (margin-inline-end: $value) {
1007     margin-inline-end: $value;
1008   }
1009
1010   @supports not (margin-inline-end: $value) {
1011     margin-right: $value;
1012   }
1013 }
1014
1015 @mixin padding-left ($value) {
1016   @supports (padding-inline-start: $value) {
1017     padding-inline-start: $value;
1018   }
1019
1020   @supports not (padding-inline-start: $value) {
1021     padding-left: $value;
1022   }
1023 }
1024
1025 @mixin padding-right ($value) {
1026   @supports (padding-inline-end: $value) {
1027     padding-inline-end: $value;
1028   }
1029
1030   @supports not (padding-inline-end: $value) {
1031     padding-right: $value;
1032   }
1033 }