client/src/sass/include/_mixins.scss

   1 @import '_variables';
   2
   3 @mixin disable-default-a-behaviour {
   4   &:hover, &:focus, &:active {
   5     text-decoration: none !important;
   6     outline: none !important;
   7   }
   8 }
   9
  10 @mixin disable-outline {
  11   &:focus:not(.focus-visible) {
  12     outline: none;
  13   }
  14 }
  15
  16 @mixin ellipsis {
  17   white-space: nowrap;
  18   overflow: hidden;
  19   text-overflow: ellipsis;
  20 }
  21
  22 @mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2) {
  23   display: block;
  24   /* Fallback for non-webkit */
  25   display: -webkit-box;
  26   -webkit-line-clamp: $number-of-lines;
  27   /* Fallback for non-webkit */
  28   font-size: $font-size;
  29   line-height: $font-size;
  30   overflow: hidden;
  31   text-overflow: ellipsis;
  32   max-height: $font-size * $number-of-lines;
  33 }
  34
  35 @mixin fade-text ($fade-after, $background-color) {
  36   position: relative;
  37   overflow: hidden;
  38
  39   &:after {
  40     content: '';
  41     pointer-events: none;
  42     width: 100%;
  43     height: 100%;
  44     position: absolute;
  45     left: 0;
  46     top: 0;
  47     background: linear-gradient(transparent $fade-after, $background-color);
  48   }
  49 }
  50
  51 @mixin peertube-word-wrap {
  52   word-break: break-word;
  53   word-wrap: break-word;
  54   overflow-wrap: break-word;
  55   hyphens: auto;
  56 }
  57
  58 @mixin apply-svg-color ($color) {
  59   ::ng-deep .feather,
  60   ::ng-deep .material {
  61     color: $color;
  62   }
  63 }
  64
  65 @mixin fill-svg-color ($color) {
  66   ::ng-deep svg {
  67     path {
  68       fill: $color;
  69     }
  70   }
  71 }
  72
  73 @mixin button-focus($color) {
  74   &:focus,
  75   &.focus-visible {
  76     box-shadow: #{$focus-box-shadow-form} $color;
  77   }
  78 }
  79
  80 @mixin peertube-input-text($width) {
  81   display: inline-block;
  82   height: $button-height;
  83   width: $width;
  84   color: pvar(--inputForegroundColor);
  85   background-color: pvar(--inputBackgroundColor);
  86   border: 1px solid #C6C6C6;
  87   border-radius: 3px;
  88   padding-left: 15px;
  89   padding-right: 15px;
  90   font-size: 15px;
  91
  92   &::placeholder {
  93     color: pvar(--inputPlaceholderColor);
  94   }
  95
  96   &[readonly] {
  97     opacity: 0.7;
  98   }
  99
 100   @media screen and (max-width: $width) {
 101     width: 100%;
 102   }
 103 }
 104
 105 @mixin peertube-input-group($width) {
 106   width: $width;
 107   min-height: $button-height;
 108   padding-top: 0;
 109   padding-bottom: 0;
 110   flex-wrap: nowrap;
 111
 112   .input-group-text{
 113     font-size: 14px;
 114     color: gray;
 115   }
 116 }
 117
 118 @mixin peertube-textarea ($width, $height) {
 119   @include peertube-input-text($width);
 120
 121   color: pvar(--textareaForegroundColor);
 122   background-color: pvar(--textareaBackgroundColor);
 123   height: $height;
 124   padding: 5px 15px;
 125   font-size: 15px;
 126 }
 127
 128 @mixin orange-button {
 129   @include button-focus(pvar(--mainColorLightest));
 130
 131   &, &:active, &:focus {
 132     color: #fff;
 133     background-color: pvar(--mainColor);
 134   }
 135
 136   &:hover {
 137     color: #fff;
 138     background-color: pvar(--mainHoverColor);
 139   }
 140
 141   &[disabled], &.disabled {
 142     cursor: default;
 143     color: #fff;
 144     background-color: #C6C6C6;
 145   }
 146
 147   my-global-icon {
 148     @include apply-svg-color(#fff)
 149   }
 150 }
 151
 152 @mixin orange-button-inverted {
 153   @include button-focus(pvar(--mainColorLightest));
 154
 155   border: 2px solid pvar(--mainColor);
 156   font-weight: $font-semibold;
 157
 158   &, &:active, &:focus {
 159     color: pvar(--mainColor);
 160     background-color: pvar(--mainBackgroundColor);
 161   }
 162
 163   &:hover {
 164     color: pvar(--mainColor);
 165     background-color: pvar(--mainColorLightest);
 166   }
 167
 168   &[disabled], &.disabled {
 169     cursor: default;
 170     color: pvar(--mainColor);
 171     background-color: #C6C6C6;
 172   }
 173
 174   my-global-icon {
 175     @include apply-svg-color(pvar(--mainColor))
 176   }
 177 }
 178
 179 @mixin tertiary-button {
 180   @include button-focus($grey-button-outline-color);
 181
 182   color: pvar(--greyForegroundColor);
 183   background-color: transparent;
 184
 185   &[disabled], &.disabled {
 186     cursor: default;
 187   }
 188
 189   my-global-icon {
 190     @include apply-svg-color(transparent)
 191   }
 192 }
 193
 194 @mixin grey-button {
 195   @include button-focus($grey-button-outline-color);
 196
 197   background-color: $grey-background-color;
 198   color: pvar(--greyForegroundColor);
 199
 200   &:hover, &:active, &:focus, &[disabled], &.disabled {
 201     color: pvar(--greyForegroundColor);
 202     background-color: $grey-background-hover-color;
 203   }
 204
 205   &[disabled], &.disabled {
 206     cursor: default;
 207   }
 208
 209   my-global-icon {
 210     @include apply-svg-color(pvar(--greyForegroundColor))
 211   }
 212 }
 213
 214 @mixin danger-button {
 215   $color: lighten($color: #c54130, $amount: 10);
 216   $text: #fff6f5;
 217
 218   @include button-focus(scale-color($color, $alpha: -95%));
 219   background-color: $color;
 220   color: $text;
 221
 222   &:hover, &:active, &:focus, &[disabled], &.disabled {
 223     background-color: lighten($color: $color, $amount: 10);
 224   }
 225
 226   &[disabled], &.disabled {
 227     cursor: default;
 228   }
 229
 230   my-global-icon {
 231     @include apply-svg-color($text)
 232   }
 233 }
 234
 235 @mixin peertube-button {
 236   border: none;
 237   font-weight: $font-semibold;
 238   font-size: 15px;
 239   height: $button-height;
 240   line-height: $button-height;
 241   // FIXME: because of primeng that redefines border-radius of all input[type="..."]
 242   border-radius: 3px !important;
 243   text-align: center;
 244   padding: 0 17px 0 13px;
 245   cursor: pointer;
 246 }
 247
 248 @mixin peertube-button-link {
 249   display: inline-block;
 250
 251   @include disable-default-a-behaviour;
 252   @include peertube-button;
 253 }
 254
 255 @mixin peertube-button-outline {
 256   display: inline-block;
 257
 258   @include disable-default-a-behaviour;
 259   @include peertube-button;
 260
 261   border: 1px solid;
 262 }
 263
 264 @mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
 265   display: inline-flex;
 266   align-items: center;
 267   line-height: normal !important;
 268
 269   my-global-icon {
 270     position: relative;
 271     width: $width;
 272     margin-right: $margin-right;
 273     top: $top;
 274   }
 275 }
 276
 277 @mixin peertube-file {
 278   position: relative;
 279   overflow: hidden;
 280   display: inline-block;
 281   min-height: 30px;
 282
 283   input[type=file] {
 284     position: absolute;
 285     top: 0;
 286     right: 0;
 287     width: 100%;
 288     height: 100%;
 289     font-size: 100px;
 290     text-align: right;
 291     filter: alpha(opacity=0);
 292     opacity: 0;
 293     outline: none;
 294     background: white;
 295     cursor: inherit;
 296     display: block;
 297   }
 298 }
 299
 300 @mixin peertube-button-file ($width) {
 301   width: $width;
 302
 303   @include peertube-file;
 304   @include peertube-button;
 305 }
 306
 307 @mixin icon ($size) {
 308   display: inline-block;
 309   background-repeat: no-repeat;
 310   background-size: contain;
 311   width: $size;
 312   height: $size;
 313   vertical-align: middle;
 314   cursor: pointer;
 315 }
 316
 317 @mixin select-arrow-down {
 318   top: 50%;
 319   right: calc(0% + 15px);
 320   content: " ";
 321   height: 0;
 322   width: 0;
 323   position: absolute;
 324   pointer-events: none;
 325   border: 5px solid rgba(0, 0, 0, 0);
 326   border-top-color: #000;
 327   margin-top: -2px;
 328   z-index: 100;
 329 }
 330
 331 @mixin responsive-width ($width) {
 332   width: $width;
 333
 334   @media screen and (max-width: $width) {
 335     width: 100%;
 336   }
 337 }
 338
 339 @mixin peertube-select-container ($width) {
 340   padding: 0;
 341   margin: 0;
 342   width: $width;
 343   border-radius: 3px;
 344   color: pvar(--inputForegroundColor);
 345   background: pvar(--inputBackgroundColor);
 346   position: relative;
 347   font-size: 15px;
 348
 349   &.disabled {
 350     background-color: #E5E5E5;
 351
 352     select {
 353       cursor: default;
 354     }
 355   }
 356
 357   @media screen and (max-width: $width) {
 358     width: 100%;
 359   }
 360
 361   &:after {
 362     @include select-arrow-down;
 363   }
 364
 365   select {
 366     padding: 0 35px 0 12px;
 367     position: relative;
 368     border: 1px solid #C6C6C6;
 369     background: transparent none;
 370     appearance: none;
 371     cursor: pointer;
 372     height: $button-height;
 373     text-overflow: ellipsis;
 374     color: pvar(--mainForegroundColor);
 375
 376     &:focus {
 377       outline: none;
 378     }
 379
 380     &:-moz-focusring {
 381       color: transparent;
 382       text-shadow: 0 0 0 #000;
 383     }
 384
 385     option {
 386       color: #000;
 387     }
 388   }
 389
 390   &.peertube-select-button {
 391     @include grey-button;
 392
 393     select,
 394     option {
 395       font-weight: $font-semibold;
 396       color: pvar(--greyForegroundColor);
 397       border: none;
 398     }
 399   }
 400 }
 401
 402 // Thanks: https://codepen.io/triss90/pen/XNEdRe/
 403 @mixin peertube-radio-container {
 404   input[type="radio"] {
 405     display: none;
 406
 407     & + label {
 408       font-weight: $font-regular;
 409       cursor: pointer;
 410
 411       &:before {
 412         position: relative;
 413         top: -2px;
 414         content: '';
 415         background: #fff;
 416         border-radius: 100%;
 417         border: 1px solid #000;
 418         display: inline-block;
 419         width: 15px;
 420         height: 15px;
 421         vertical-align: middle;
 422         cursor: pointer;
 423         text-align: center;
 424         margin-right: 10px;
 425       }
 426     }
 427
 428     &:checked + label:before {
 429       background-color: #000;
 430       box-shadow: inset 0 0 0 4px #fff;
 431     }
 432
 433     &:focus + label:before {
 434       outline: none;
 435       border-color: #000;
 436     }
 437   }
 438 }
 439
 440 @mixin peertube-checkbox ($border-width) {
 441   opacity: 0;
 442   position: absolute;
 443
 444   &:focus + span {
 445     box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
 446   }
 447
 448   & + span {
 449     position: relative;
 450     width: 18px;
 451     min-width: 18px;
 452     height: 18px;
 453     border: $border-width solid #C6C6C6;
 454     border-radius: 3px;
 455     vertical-align: middle;
 456     cursor: pointer;
 457
 458     &:after {
 459       content: '';
 460       position: absolute;
 461       top: calc(2px - #{$border-width});
 462       left: 5px;
 463       width: 5px;
 464       height: 12px;
 465       opacity: 0;
 466       transform: rotate(45deg) scale(0);
 467       border-right: 2px solid $bg-color;
 468       border-bottom: 2px solid $bg-color;
 469     }
 470   }
 471
 472   &:checked + span {
 473     border-color: transparent;
 474     background: pvar(--mainColor);
 475     animation: jelly 0.6s ease;
 476
 477     &:after {
 478       opacity: 1;
 479       transform: rotate(45deg) scale(1);
 480     }
 481   }
 482
 483   & + span + span {
 484     font-size: 15px;
 485     font-weight: $font-regular;
 486     margin-left: 5px;
 487     cursor: pointer;
 488     display: inline;
 489   }
 490
 491   &[disabled] + span,
 492   &[disabled] + span + span{
 493     opacity: 0.5;
 494     cursor: default;
 495   }
 496 }
 497
 498 @mixin table-badge {
 499   border-radius: 2px;
 500   padding: 1/4em 1/2em;
 501   text-transform: uppercase;
 502   font-weight: $font-bold;
 503   font-size: 12px;
 504   letter-spacing: 1/3px;
 505
 506   &.badge-banned,
 507   &.badge-red {
 508     background-color: #ffcdd2;
 509     color: #c63737;
 510   }
 511
 512   &.badge-banned {
 513     text-decoration: line-through;
 514   }
 515
 516   &.badge-yellow {
 517     background-color: #feedaf;
 518     color: #8a5340;
 519   }
 520
 521   &.badge-brown {
 522     background-color: #ffd8b2;
 523     color: #805b36;
 524   }
 525
 526   &.badge-green {
 527     background-color: #c8e6c9;
 528     color: #256029;
 529   }
 530
 531   &.badge-blue {
 532     background-color: #b3e5fc;
 533     color: #23547b;
 534   }
 535
 536   &.badge-purple {
 537     background-color: #eccfff;
 538     color: #694382;
 539   }
 540 }
 541
 542 @mixin avatar ($size) {
 543   object-fit: cover;
 544   border-radius: 50%;
 545   width: $size;
 546   height: $size;
 547   min-width: $size;
 548   min-height: $size;
 549 }
 550
 551 @mixin channel-avatar ($size) {
 552   width: $size;
 553   height: $size;
 554   min-width: $size;
 555   min-height: $size;
 556   border-radius: 5px;
 557 }
 558
 559 @mixin chevron ($size, $border-width) {
 560   border-style: solid;
 561   border-width: $border-width $border-width 0 0;
 562   content: '';
 563   display: inline-block;
 564   transform: rotate(-45deg);
 565   height: $size;
 566   width: $size;
 567 }
 568
 569 @mixin chevron-right ($size, $border-width) {
 570   @include chevron($size, $border-width);
 571
 572   left: 0;
 573   transform: rotate(45deg);
 574 }
 575
 576 @mixin chevron-left ($size, $border-width) {
 577   @include chevron($size, $border-width);
 578
 579   left: 0.25em;
 580   transform: rotate(-135deg);
 581 }
 582
 583 @mixin in-content-small-title {
 584   text-transform: uppercase;
 585   color: pvar(--mainColor);
 586   font-weight: $font-bold;
 587   font-size: 13px;
 588 }
 589
 590 @mixin settings-big-title {
 591   text-transform: uppercase;
 592   color: pvar(--mainColor);
 593   font-weight: $font-bold;
 594   font-size: 110%;
 595   margin-bottom: 10px;
 596 }
 597
 598 @mixin actor-owner {
 599   @include disable-default-a-behaviour;
 600
 601   font-size: 13px;
 602   margin-top: 4px;
 603   color: pvar(--mainForegroundColor);
 604
 605   span:hover {
 606     opacity: 0.8;
 607   }
 608
 609   img {
 610     @include avatar(18px);
 611
 612     margin-left: 7px;
 613     position: relative;
 614     top: -2px;
 615   }
 616 }
 617
 618 @mixin create-button {
 619   @include peertube-button-link;
 620   @include orange-button;
 621   @include button-with-icon(20px, 5px, -1px);
 622 }
 623
 624 @mixin row-blocks ($column-responsive: true) {
 625   display: flex;
 626   min-height: 130px;
 627   padding-bottom: 20px;
 628   margin-bottom: 20px;
 629   border-bottom: 1px solid #C6C6C6;
 630
 631   @media screen and (max-width: $small-view) {
 632     @if $column-responsive {
 633       flex-direction: column;
 634       height: auto;
 635       align-items: center;
 636     } @else {
 637       min-height: initial;
 638       padding-bottom: 10px;
 639       margin-bottom: 10px;
 640     }
 641   }
 642 }
 643
 644 @mixin dropdown-with-icon-item {
 645   padding: 6px 15px;
 646
 647   my-global-icon {
 648     width: 22px;
 649     opacity: .7;
 650
 651     margin-right: 10px;
 652     position: relative;
 653     top: -2px;
 654   }
 655 }
 656
 657 @mixin progressbar($small: false) {
 658   background-color: $grey-background-color;
 659   display: flex;
 660   height: 1rem;
 661   overflow: hidden;
 662   font-size: 0.75rem;
 663   border-radius: 0.25rem;
 664   position: relative;
 665
 666   span {
 667     position: absolute;
 668     color: $grey-foreground-color;
 669     @if $small {
 670       top: -1px;
 671     }
 672
 673     &:nth-of-type(1) {
 674       left: .2rem;
 675     }
 676     &:nth-of-type(2) {
 677       right: .2rem;
 678     }
 679   }
 680
 681   .progress-bar {
 682     color: pvar(--mainBackgroundColor);
 683     background-color: pvar(--mainColor);
 684     display: flex;
 685     flex-direction: column;
 686     justify-content: center;
 687     text-align: center;
 688     white-space: nowrap;
 689     transition: width 0.6s ease;
 690
 691     &.secondary {
 692       background-color: pvar(--secondaryColor);
 693     }
 694
 695     &.red {
 696       background-color: lighten($color: #c54130, $amount: 10);
 697     }
 698   }
 699 }
 700
 701 @mixin breadcrumb {
 702   display: flex;
 703   flex-wrap: wrap;
 704   padding: 0.75rem 1rem;
 705   margin-bottom: 1rem;
 706   list-style: none;
 707   background-color: pvar(--submenuBackgroundColor);
 708   border-radius: 0.25rem;
 709
 710   .breadcrumb-item {
 711     display: flex;
 712
 713     a {
 714       color: pvar(--mainColor);
 715     }
 716
 717     & + .breadcrumb-item {
 718       padding-left: 0.5rem;
 719       &::before {
 720         display: inline-block;
 721         padding-right: 0.5rem;
 722         color: #6c757d;
 723         content: "/";
 724       }
 725     }
 726
 727     &.active {
 728       color: #6c757d;
 729     }
 730   }
 731 }
 732
 733 @mixin dashboard {
 734   display: flex;
 735   flex-wrap: wrap;
 736   margin: 0 -5px;
 737
 738   & > div {
 739     box-sizing: border-box;
 740     flex: 0 0 percentage(1/3);
 741     padding: 0 5px;
 742     margin-bottom: 10px;
 743
 744     & > a {
 745       @include disable-default-a-behaviour;
 746
 747       text-decoration: none;
 748       color: inherit;
 749       display: block;
 750       font-size: 18px;
 751
 752       &:active,
 753       &:focus,
 754       &:hover {
 755         opacity: .8;
 756       }
 757     }
 758
 759     & > a,
 760     & > div {
 761       padding: 20px;
 762       background: pvar(--submenuBackgroundColor);
 763       border-radius: 4px;
 764       box-sizing: border-box;
 765       height: 100%;
 766     }
 767   }
 768
 769   .dashboard-num, .dashboard-text {
 770     text-align: center;
 771     font-size: 130%;
 772     color: pvar(--mainForegroundColor);
 773     line-height: 30px;
 774     margin-bottom: 20px;
 775   }
 776
 777   .dashboard-label {
 778     font-size: 90%;
 779     color: pvar(--inputPlaceholderColor);
 780     text-align: center;
 781   }
 782 }
 783
 784 @mixin divider($color: pvar(--submenuBackgroundColor), $background: pvar(--mainBackgroundColor)) {
 785   width: 95%;
 786   border-top: .05rem solid $color;
 787   height: .05rem;
 788   text-align: center;
 789   display: block;
 790   position: relative;
 791
 792   &[data-content] {
 793     margin: .8rem 0;
 794
 795     &::after {
 796       background: $background;
 797       color: $color;
 798       content: attr(data-content);
 799       display: inline-block;
 800       font-size: .7rem;
 801       padding: 0 .4rem;
 802       transform: translateY(-.65rem);
 803     }
 804   }
 805 }
 806
 807 @mixin chip {
 808   --chip-radius: 5rem;
 809   --chip-padding: .2rem .4rem;
 810   $avatar-height: 1.2rem;
 811
 812   align-items: center;
 813   border-radius: var(--chip-radius);
 814   display: inline-flex;
 815   font-size: 90%;
 816   color: pvar(--mainForegroundColor);
 817   height: $avatar-height;
 818   line-height: 1rem;
 819   margin: .1rem;
 820   max-width: 320px;
 821   overflow: hidden;
 822   padding: var(--chip-padding);
 823   text-decoration: none;
 824   text-overflow: ellipsis;
 825   vertical-align: middle;
 826   white-space: nowrap;
 827
 828   &.rectangular {
 829     --chip-radius: .2rem;
 830     --chip-padding: .2rem .3rem;
 831   }
 832
 833   .avatar {
 834     margin-left: -.4rem;
 835     margin-right: .2rem;
 836     height: $avatar-height;
 837     width: $avatar-height;
 838
 839     border-radius: 50%;
 840     display: inline-block;
 841     line-height: 1.25;
 842     position: relative;
 843     vertical-align: middle;
 844   }
 845
 846   &.two-lines {
 847     $avatar-height: 2rem;
 848
 849     height: $avatar-height;
 850
 851     .avatar {
 852       height: $avatar-height;
 853       width: $avatar-height;
 854     }
 855
 856     div {
 857       display: flex;
 858       flex-direction: column;
 859       height: $avatar-height;
 860       margin-left: .1rem;
 861       margin-right: .1rem;
 862       justify-content: center;
 863     }
 864   }
 865 }
 866
 867 @mixin admin-sub-header-responsive {
 868   flex-direction: column;
 869
 870   .form-sub-title {
 871     margin-right: 0px !important;
 872     margin-bottom: 10px;
 873     text-align: center;
 874   }
 875
 876   .admin-sub-nav {
 877     display: block;
 878     overflow-x: auto;
 879     white-space: nowrap;
 880     height: 50px;
 881     padding: 10px 0;
 882     width: 100%;
 883
 884     a {
 885       margin-left: 5px;
 886     }
 887   }
 888 }
 889
 890 // applies ratio (default to 16:9) to a child element (using $selector) only using
 891 // an immediate's parent size. This allows to set a ratio without explicit
 892 // dimensions, as width/height cannot be computed from each other.
 893 @mixin block-ratio ($selector: 'div', $inverted-ratio: 9/16) {
 894   $padding-percent: percentage($inverted-ratio);
 895
 896   position: relative;
 897   height: 0;
 898   width: 100%;
 899   padding-top: $padding-percent;
 900
 901   #{$selector} {
 902     position: absolute;
 903     width: 100%;
 904     height: 100%;
 905     top: 0;
 906     @content;
 907   }
 908 }
 909
 910 @mixin sub-menu-h1 {
 911   ::ng-deep h1 {
 912     font-size: 1.3rem;
 913     border-bottom: 2px solid $grey-background-color;
 914     padding-bottom: 15px;
 915     margin-bottom: $sub-menu-margin-bottom;
 916
 917     > my-global-icon {
 918       margin-right: 10px;
 919       vertical-align: bottom;
 920       width: 24px;
 921       height: 24px;
 922     }
 923
 924     .badge {
 925       margin-left: 7px;
 926     }
 927   }
 928 }
 929
 930 @mixin play-icon ($width, $height) {
 931   width: 0;
 932   height: 0;
 933
 934   position: absolute;
 935   left: 50%;
 936   top: 50%;
 937   transform: translate(-50%, -50%) scale(0.5);
 938
 939   border-top: ($height / 2) solid transparent;
 940   border-bottom: ($height / 2) solid transparent;
 941
 942   border-left: $width solid rgba(255, 255, 255, 0.95);
 943 }
 944
 945 @mixin on-small-main-col () {
 946   :host-context(.main-col:not(.expanded)) {
 947     @media screen and (max-width: $small-view + $menu-width) {
 948       @content;
 949     }
 950   }
 951
 952   :host-context(.main-col.expanded) {
 953     @media screen and (max-width: $small-view) {
 954       @content;
 955     }
 956   }
 957 }
 958
 959 @mixin on-mobile-main-col () {
 960   :host-context(.main-col:not(.expanded)) {
 961     @media screen and (max-width: $mobile-view + $menu-width) {
 962       @content;
 963     }
 964   }
 965
 966   :host-context(.main-col.expanded) {
 967     @media screen and (max-width: $mobile-view) {
 968       @content;
 969     }
 970   }
 971 }