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
  17 @mixin ellipsis {
  18   white-space: nowrap;
  19   overflow: hidden;
  20   text-overflow: ellipsis;
  21 }
  22
  23 @mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2) {
  24   display: block;
  25   /* Fallback for non-webkit */
  26   display: -webkit-box;
  27   max-height: $font-size * $number-of-lines;
  28   /* Fallback for non-webkit */
  29   font-size: $font-size;
  30   line-height: $font-size;
  31   overflow: hidden;
  32   text-overflow: ellipsis;
  33 }
  34
  35 @mixin prefix($property, $parameters...) {
  36   @each $prefix in -webkit-, -moz-, -ms-, -o-, "" {
  37     #{$prefix}#{$property}: $parameters;
  38   }
  39 }
  40
  41 @mixin peertube-word-wrap {
  42   word-break: break-word;
  43   word-wrap: break-word;
  44   overflow-wrap: break-word;
  45   -webkit-hyphens: auto;
  46   -ms-hyphens: auto;
  47   -moz-hyphens: auto;
  48   hyphens: auto;
  49 }
  50
  51 @mixin apply-svg-color ($color) {
  52   ::ng-deep svg {
  53     path[fill="#000000"],
  54     g[fill="#000000"],
  55     rect[fill="#000000"],
  56     circle[fill="#000000"],
  57     polygon[fill="#000000"] {
  58       fill: $color;
  59     }
  60
  61     path[stroke="#000000"],
  62     g[stroke="#000000"],
  63     rect[stroke="#000000"],
  64     circle[stroke="#000000"],
  65     polygon[stroke="#000000"] {
  66       stroke: $color;
  67     }
  68
  69     stop[stop-color="#000000"] {
  70       stop-color: $color;
  71     }
  72   }
  73 }
  74
  75 @mixin fill-svg-color ($color) {
  76   ::ng-deep svg {
  77     path {
  78       fill: $color;
  79     }
  80   }
  81 }
  82
  83 @mixin button-focus-visible-shadow($color) {
  84   &.focus-visible {
  85     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px $color;
  86   }
  87 }
  88
  89 @mixin peertube-input-text($width) {
  90   display: inline-block;
  91   height: $button-height;
  92   width: $width;
  93   background: var(--inputBackgroundColor);
  94   border: 1px solid #C6C6C6;
  95   border-radius: 3px;
  96   padding-left: 15px;
  97   padding-right: 15px;
  98   font-size: 15px;
  99
 100   &::placeholder {
 101     color: var(--inputPlaceholderColor);
 102   }
 103
 104   @media screen and (max-width: $width) {
 105     width: 100%;
 106   }
 107 }
 108
 109 @mixin peertube-input-group($width) {
 110   width: $width;
 111   min-height: $button-height;
 112   padding-top: 0;
 113   padding-bottom: 0;
 114
 115   .input-group-text{
 116     font-size: 14px;
 117     color: gray;
 118   }
 119 }
 120
 121 @mixin peertube-textarea ($width, $height) {
 122   @include peertube-input-text($width);
 123
 124   height: $height;
 125   padding: 5px 15px;
 126   font-size: 15px;
 127 }
 128
 129 @mixin orange-button {
 130   @include button-focus-visible-shadow(var(--mainHoverColor));
 131
 132   &, &:active, &:focus {
 133     color: #fff;
 134     background-color: var(--mainColor);
 135   }
 136
 137   &:hover {
 138     color: #fff;
 139     background-color: var(--mainHoverColor);
 140   }
 141
 142   &[disabled], &.disabled {
 143     cursor: default;
 144     color: #fff;
 145     background-color: #C6C6C6;
 146   }
 147
 148   my-global-icon {
 149     @include apply-svg-color(#fff)
 150   }
 151 }
 152
 153 @mixin tertiary-button {
 154   color: $grey-foreground-color;
 155   background-color: transparent;
 156
 157   &[disabled], &.disabled {
 158     cursor: default;
 159   }
 160
 161   my-global-icon {
 162     @include apply-svg-color(transparent)
 163   }
 164 }
 165
 166 @mixin grey-button {
 167   &, &:active, &:focus {
 168     background-color: $grey-background-color;
 169     color: $grey-foreground-color;
 170   }
 171
 172   &:hover, &:active, &:focus, &[disabled], &.disabled {
 173     color: $grey-foreground-color;
 174     background-color: $grey-background-hover-color;
 175   }
 176
 177   &[disabled], &.disabled {
 178     cursor: default;
 179   }
 180
 181   my-global-icon {
 182     @include apply-svg-color($grey-foreground-color)
 183   }
 184 }
 185
 186 @mixin peertube-button {
 187   border: none;
 188   font-weight: $font-semibold;
 189   font-size: 15px;
 190   height: $button-height;
 191   line-height: $button-height;
 192   border-radius: 3px;
 193   text-align: center;
 194   padding: 0 17px 0 13px;
 195   cursor: pointer;
 196 }
 197
 198 @mixin peertube-button-link {
 199   display: inline-block;
 200
 201   @include disable-default-a-behaviour;
 202   @include peertube-button;
 203 }
 204
 205 @mixin peertube-button-outline {
 206   display: inline-block;
 207
 208   @include disable-default-a-behaviour;
 209   @include peertube-button;
 210
 211   border: 1px solid;
 212 }
 213
 214 @mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
 215   my-global-icon {
 216     position: relative;
 217     width: $width;
 218     margin-right: $margin-right;
 219     top: $top;
 220   }
 221 }
 222
 223 @mixin peertube-button-file ($width) {
 224   position: relative;
 225   overflow: hidden;
 226   display: inline-block;
 227   width: $width;
 228   min-height: 30px;
 229
 230   @include peertube-button;
 231   @include orange-button;
 232
 233   input[type=file] {
 234     position: absolute;
 235     top: 0;
 236     right: 0;
 237     width: 100%;
 238     height: 100%;
 239     font-size: 100px;
 240     text-align: right;
 241     filter: alpha(opacity=0);
 242     opacity: 0;
 243     outline: none;
 244     background: white;
 245     cursor: inherit;
 246     display: block;
 247   }
 248 }
 249
 250 @mixin icon ($size) {
 251   display: inline-block;
 252   background-repeat: no-repeat;
 253   background-size: contain;
 254   width: $size;
 255   height: $size;
 256   vertical-align: middle;
 257   cursor: pointer;
 258 }
 259
 260 @mixin select-arrow-down {
 261   top: 50%;
 262   right: calc(0% + 15px);
 263   content: " ";
 264   height: 0;
 265   width: 0;
 266   position: absolute;
 267   pointer-events: none;
 268   border: 5px solid rgba(0, 0, 0, 0);
 269   border-top-color: #000;
 270   margin-top: -2px;
 271   z-index: 100;
 272 }
 273
 274 @mixin peertube-select-container ($width) {
 275   padding: 0;
 276   margin: 0;
 277   border: 1px solid #C6C6C6;
 278   width: $width;
 279   border-radius: 3px;
 280   overflow: hidden;
 281   background: var(--inputBackgroundColor);
 282   position: relative;
 283   font-size: 15px;
 284
 285   &.disabled {
 286     background-color: #E5E5E5;
 287
 288     select {
 289       cursor: default;
 290     }
 291   }
 292
 293   @media screen and (max-width: $width) {
 294     width: 100%;
 295   }
 296
 297   &:after {
 298     @include select-arrow-down;
 299   }
 300
 301   select {
 302     padding: 0 35px 0 12px;
 303     width: calc(100% + 2px);
 304     position: relative;
 305     left: 1px;
 306     border: none;
 307     box-shadow: none;
 308     background: transparent none;
 309     appearance: none;
 310     cursor: pointer;
 311     height: $button-height;
 312     text-overflow: ellipsis;
 313     color: var(--mainForegroundColor);
 314
 315     &:focus {
 316       outline: none;
 317     }
 318
 319     &:-moz-focusring {
 320       color: transparent;
 321       text-shadow: 0 0 0 #000;
 322     }
 323
 324     option {
 325       color: #000;
 326     }
 327   }
 328 }
 329
 330 // Thanks: https://codepen.io/triss90/pen/XNEdRe/
 331 @mixin peertube-radio-container {
 332   input[type="radio"] {
 333     display: none;
 334
 335     & + label {
 336       font-weight: $font-regular;
 337       cursor: pointer;
 338
 339       &:before {
 340         position: relative;
 341         top: -2px;
 342         content: '';
 343         background: #fff;
 344         border-radius: 100%;
 345         border: 1px solid #000;
 346         display: inline-block;
 347         width: 15px;
 348         height: 15px;
 349         vertical-align: middle;
 350         cursor: pointer;
 351         text-align: center;
 352         margin-right: 10px;
 353       }
 354     }
 355
 356     &:checked + label:before {
 357       background-color: #000;
 358       box-shadow: inset 0 0 0 4px #fff;
 359     }
 360
 361     &:focus + label:before {
 362       outline: none;
 363       border-color: #000;
 364     }
 365   }
 366 }
 367
 368 @mixin peertube-checkbox ($border-width) {
 369   opacity: 0;
 370   position: absolute;
 371
 372   &:focus + span {
 373     box-shadow: 0 0 0 .1rem rgba(87, 85, 217, .2);
 374   }
 375
 376   & + span {
 377     position: relative;
 378     width: 18px;
 379     min-width: 18px;
 380     height: 18px;
 381     border: $border-width solid $fg-color;
 382     border-radius: 3px;
 383     vertical-align: middle;
 384     cursor: pointer;
 385
 386     &:after {
 387       content: '';
 388       position: absolute;
 389       top: calc(2px - #{$border-width});
 390       left: 5px;
 391       width: 5px;
 392       height: 12px;
 393       opacity: 0;
 394       transform: rotate(45deg) scale(0);
 395       border-right: 2px solid $bg-color;
 396       border-bottom: 2px solid $bg-color;
 397     }
 398   }
 399
 400   &:checked + span {
 401     border-color: transparent;
 402     background: var(--mainColor);
 403     animation: jelly 0.6s ease;
 404
 405     &:after {
 406       opacity: 1;
 407       transform: rotate(45deg) scale(1);
 408     }
 409   }
 410
 411   & + span + span {
 412     font-size: 15px;
 413     font-weight: $font-regular;
 414     margin-left: 5px;
 415     cursor: pointer;
 416     display: inline;
 417   }
 418
 419   &[disabled] + span,
 420   &[disabled] + span + span{
 421     opacity: 0.5;
 422     cursor: default;
 423   }
 424 }
 425
 426
 427 @mixin avatar ($size) {
 428   object-fit: cover;
 429   border-radius: 50%;
 430   width: $size;
 431   height: $size;
 432   min-width: $size;
 433   min-height: $size;
 434 }
 435
 436 @mixin chevron ($size, $border-width) {
 437   border-style: solid;
 438   border-width: $border-width $border-width 0 0;
 439   content: '';
 440   display: inline-block;
 441   transform: rotate(-45deg);
 442   height: $size;
 443   width: $size;
 444 }
 445
 446 @mixin chevron-right ($size, $border-width) {
 447   @include chevron($size, $border-width);
 448
 449   left: 0;
 450   transform: rotate(45deg);
 451 }
 452
 453 @mixin chevron-left ($size, $border-width) {
 454   @include chevron($size, $border-width);
 455
 456   left: 0.25em;
 457   transform: rotate(-135deg);
 458 }
 459
 460 @mixin in-content-small-title {
 461   text-transform: uppercase;
 462   color: var(--mainColor);
 463   font-weight: $font-bold;
 464   font-size: 13px;
 465 }
 466
 467 @mixin settings-big-title {
 468   text-transform: uppercase;
 469   color: var(--mainColor);
 470   font-weight: $font-bold;
 471   font-size: 110%;
 472   margin-bottom: 10px;
 473 }
 474
 475 @mixin actor-owner {
 476   @include disable-default-a-behaviour;
 477
 478   font-size: 13px;
 479   margin-top: 4px;
 480   color: var(--mainForegroundColor);
 481
 482   span:hover {
 483     opacity: 0.8;
 484   }
 485
 486   img {
 487     @include avatar(18px);
 488
 489     margin-left: 7px;
 490     position: relative;
 491     top: -2px;
 492   }
 493 }
 494
 495 @mixin sub-menu-with-actor {
 496   height: max-content;
 497   display: flex;
 498   flex-direction: column;
 499   align-items: flex-start;
 500
 501   .actor {
 502     display: flex;
 503     margin-top: 20px;
 504     margin-bottom: 20px;
 505
 506     img {
 507       @include avatar(80px);
 508
 509       margin-right: 20px;
 510     }
 511
 512     .actor-info {
 513       display: flex;
 514       flex-direction: column;
 515       justify-content: center;
 516
 517       .actor-names {
 518         display: flex;
 519         align-items: center;
 520         flex-wrap: wrap;
 521
 522         .actor-display-name {
 523           font-size: 23px;
 524           font-weight: $font-bold;
 525           margin-right: 7px;
 526         }
 527
 528         .actor-name {
 529           position: relative;
 530           top: 3px;
 531           font-size: 14px;
 532           color: $grey-actor-name;
 533         }
 534       }
 535
 536       .actor-lower {
 537         grid-area: lower;
 538       }
 539
 540       .actor-followers {
 541         font-size: 15px;
 542       }
 543
 544       .actor-owner {
 545         @include actor-owner;
 546       }
 547     }
 548   }
 549
 550   .links {
 551     margin-top: 0;
 552     margin-bottom: 15px;
 553
 554     a {
 555       margin-top: 0;
 556       margin-bottom: 0;
 557       text-transform: uppercase;
 558       font-weight: 600;
 559       font-size: 110%;
 560
 561       @media screen and (max-width: $mobile-view) {
 562         font-size: 130%;
 563       }
 564     }
 565   }
 566 }
 567
 568 @mixin create-button {
 569   @include peertube-button-link;
 570   @include orange-button;
 571   @include button-with-icon(20px, 5px, -1px);
 572 }
 573
 574 @mixin row-blocks {
 575   display: flex;
 576   min-height: 130px;
 577   padding-bottom: 20px;
 578   margin-bottom: 20px;
 579   border-bottom: 1px solid #C6C6C6;
 580
 581   @media screen and (max-width: 800px) {
 582     flex-direction: column;
 583     height: auto;
 584     align-items: center;
 585   }
 586 }
 587
 588 @mixin dropdown-with-icon-item {
 589   padding: 6px 15px;
 590
 591   my-global-icon {
 592     width: 22px;
 593     opacity: .7;
 594
 595     margin-right: 10px;
 596     position: relative;
 597     top: -2px;
 598   }
 599 }
 600
 601 @mixin progressbar {
 602   background-color: $grey-background-color;
 603   display: flex;
 604   height: 1rem;
 605   overflow: hidden;
 606   font-size: 0.75rem;
 607   border-radius: 0.25rem;
 608
 609   .progress-bar {
 610     color: var(--mainBackgroundColor);
 611     background-color: var(--mainColor);
 612     display: flex;
 613     flex-direction: column;
 614     justify-content: center;
 615     text-align: center;
 616     white-space: nowrap;
 617     transition: width 0.6s ease;
 618
 619     &.secondary {
 620       background-color: var(--secondaryColor);
 621     }
 622   }
 623 }
 624
 625 @mixin breadcrumb {
 626   display: flex;
 627   flex-wrap: wrap;
 628   padding: 0.75rem 1rem;
 629   margin-bottom: 1rem;
 630   list-style: none;
 631   background-color: var(--submenuColor);
 632   border-radius: 0.25rem;
 633
 634   .breadcrumb-item {
 635     display: flex;
 636
 637     a {
 638       color: var(--mainColor);
 639     }
 640
 641     & + .breadcrumb-item {
 642       padding-left: 0.5rem;
 643       &::before {
 644         display: inline-block;
 645         padding-right: 0.5rem;
 646         color: #6c757d;
 647         content: "/";
 648       }
 649     }
 650
 651     &.active {
 652       color: #6c757d;
 653     }
 654   }
 655 }
 656
 657 @mixin dashboard {
 658   display: flex;
 659   flex-wrap: wrap;
 660   margin: 0 -5px;
 661
 662   & > div {
 663     box-sizing: border-box;
 664     flex: 0 0 percentage(1/3);
 665     padding: 0 5px;
 666     margin-bottom: 10px;
 667
 668     & > a {
 669       text-decoration: none;
 670       color: inherit;
 671       display: block;
 672       font-size: 18px;
 673
 674       &:active,
 675       &:focus,
 676       &:hover {
 677         opacity: .8;
 678       }
 679     }
 680
 681     & > a,
 682     & > div {
 683       padding: 20px;
 684       background: var(--submenuColor);
 685       border-radius: 4px;
 686       box-sizing: border-box;
 687       height: 100%;
 688     }
 689   }
 690
 691   .dashboard-num, .dashboard-text {
 692     text-align: center;
 693     font-size: 130%;
 694     line-height: 21px;
 695     color: var(--mainForegroundColor);
 696     line-height: 30px;
 697     margin-bottom: 20px;
 698   }
 699
 700   .dashboard-label {
 701     font-size: 90%;
 702     color: var(--inputPlaceholderColor);
 703     text-align: center;
 704   }
 705 }