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