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