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