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