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