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   &::-moz-focus-inner {
  16     border: 0;
  17     padding: 0
  18   }
  19 }
  20
  21
  22 @mixin ellipsis {
  23   white-space: nowrap;
  24   overflow: hidden;
  25   text-overflow: ellipsis;
  26 }
  27
  28 @mixin ellipsis-multiline($font-size: 16px, $number-of-lines: 2) {
  29   display: block;
  30   /* Fallback for non-webkit */
  31   display: -webkit-box;
  32   max-height: $font-size * $number-of-lines;
  33   /* Fallback for non-webkit */
  34   font-size: $font-size;
  35   line-height: $font-size;
  36   overflow: hidden;
  37   text-overflow: ellipsis;
  38 }
  39
  40 @mixin prefix($property, $parameters...) {
  41   @each $prefix in -webkit-, -moz-, -ms-, -o-, "" {
  42     #{$prefix}#{$property}: $parameters;
  43   }
  44 }
  45
  46 @mixin peertube-word-wrap {
  47   word-break: normal;
  48   word-wrap: break-word;
  49   overflow-wrap: break-word;
  50   -webkit-hyphens: auto;
  51   -ms-hyphens: auto;
  52   -moz-hyphens: auto;
  53   hyphens: auto;
  54 }
  55
  56 @mixin apply-svg-color ($color) {
  57   /deep/ svg {
  58     path[fill="#000000"],
  59     g[fill="#000000"],
  60     rect[fill="#000000"],
  61     circle[fill="#000000"],
  62     polygon[fill="#000000"] {
  63       fill: $color;
  64     }
  65
  66     path[stroke="#000000"],
  67     g[stroke="#000000"],
  68     rect[stroke="#000000"],
  69     circle[stroke="#000000"],
  70     polygon[stroke="#000000"] {
  71       stroke: $color;
  72     }
  73
  74     stop[stop-color="#000000"] {
  75       stop-color: $color;
  76     }
  77   }
  78 }
  79
  80 @mixin peertube-input-text($width) {
  81   display: inline-block;
  82   height: $button-height;
  83   width: $width;
  84   background: var(--inputColor);
  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: var(--inputPlaceholderColor);
  93   }
  94
  95   @media screen and (max-width: $width) {
  96     width: 100%;
  97   }
  98 }
  99
 100 @mixin peertube-input-group($width) {
 101   width: $width;
 102   height: $button-height;
 103   padding-top: 0;
 104   padding-bottom: 0;
 105
 106   .input-group-text{
 107     font-size: 14px;
 108     color: gray;
 109   }
 110 }
 111
 112 @mixin peertube-textarea ($width, $height) {
 113   @include peertube-input-text($width);
 114
 115   height: $height;
 116   padding: 5px 15px;
 117   font-size: 15px;
 118 }
 119
 120 @mixin orange-button {
 121   &, &:active, &:focus {
 122     color: #fff;
 123     background-color: var(--mainColor);
 124   }
 125
 126   &:hover {
 127     color: #fff;
 128     background-color: var(--mainHoverColor);
 129   }
 130
 131   &[disabled], &.disabled {
 132     cursor: default;
 133     color: #fff;
 134     background-color: #C6C6C6;
 135   }
 136
 137   my-global-icon {
 138     @include apply-svg-color(#fff)
 139   }
 140 }
 141
 142 @mixin grey-button {
 143   &, &:active, &:focus {
 144     background-color: $grey-background-color;
 145     color: $grey-foreground-color;
 146   }
 147
 148   &:hover, &:active, &:focus, &[disabled], &.disabled {
 149     color: $grey-foreground-color;
 150     background-color: $grey-background-hover-color;
 151   }
 152
 153   &[disabled], &.disabled {
 154     cursor: default;
 155   }
 156
 157   my-global-icon {
 158     @include apply-svg-color($grey-foreground-color)
 159   }
 160 }
 161
 162 @mixin peertube-button {
 163   border: none;
 164   font-weight: $font-semibold;
 165   font-size: 15px;
 166   height: $button-height;
 167   line-height: $button-height;
 168   border-radius: 3px;
 169   text-align: center;
 170   padding: 0 17px 0 13px;
 171   cursor: pointer;
 172   outline: 0;
 173 }
 174
 175 @mixin peertube-button-link {
 176   display: inline-block;
 177
 178   @include disable-default-a-behaviour;
 179   @include peertube-button;
 180 }
 181
 182 @mixin button-with-icon($width: 20px, $margin-right: 3px, $top: -1px) {
 183   my-global-icon {
 184     position: relative;
 185     width: $width;
 186     margin-right: $margin-right;
 187     top: $top;
 188   }
 189 }
 190
 191 @mixin peertube-button-file ($width) {
 192   position: relative;
 193   overflow: hidden;
 194   display: inline-block;
 195   width: $width;
 196
 197   @include peertube-button;
 198   @include orange-button;
 199
 200   input[type=file] {
 201     position: absolute;
 202     top: 0;
 203     right: 0;
 204     min-width: 100%;
 205     min-height: 100%;
 206     font-size: 100px;
 207     text-align: right;
 208     filter: alpha(opacity=0);
 209     opacity: 0;
 210     outline: none;
 211     background: white;
 212     cursor: inherit;
 213     display: block;
 214   }
 215 }
 216
 217 @mixin icon ($size) {
 218   display: inline-block;
 219   background-repeat: no-repeat;
 220   background-size: contain;
 221   width: $size;
 222   height: $size;
 223   vertical-align: middle;
 224   cursor: pointer;
 225 }
 226
 227 @mixin peertube-select-container ($width) {
 228   padding: 0;
 229   margin: 0;
 230   border: 1px solid #C6C6C6;
 231   width: $width;
 232   border-radius: 3px;
 233   overflow: hidden;
 234   background: var(--inputColor);
 235   position: relative;
 236   font-size: 15px;
 237
 238   &.disabled {
 239     background-color: #E5E5E5;
 240
 241     select {
 242       cursor: default;
 243     }
 244   }
 245
 246   @media screen and (max-width: $width) {
 247     width: 100%;
 248   }
 249
 250   &:after {
 251     top: 50%;
 252     right: calc(0% + 15px);
 253     content: " ";
 254     height: 0;
 255     width: 0;
 256     position: absolute;
 257     pointer-events: none;
 258     border: 5px solid rgba(0, 0, 0, 0);
 259     border-top-color: #000;
 260     margin-top: -2px;
 261     z-index: 100;
 262   }
 263
 264   select {
 265     padding: 0 35px 0 12px;
 266     width: calc(100% + 2px);
 267     position: relative;
 268     left: 1px;
 269     border: none;
 270     box-shadow: none;
 271     background: transparent none;
 272     appearance: none;
 273     cursor: pointer;
 274     height: $button-height;
 275     text-overflow: ellipsis;
 276     color: var(--mainForegroundColor);
 277
 278     &:focus {
 279       outline: none;
 280     }
 281
 282     &:-moz-focusring {
 283       color: transparent;
 284       text-shadow: 0 0 0 #000;
 285     }
 286
 287     option {
 288       color: #000;
 289     }
 290   }
 291 }
 292
 293 // Thanks: https://codepen.io/triss90/pen/XNEdRe/
 294 @mixin peertube-radio-container {
 295   input[type="radio"] {
 296     display: none;
 297
 298     & + label {
 299       font-weight: $font-regular;
 300       cursor: pointer;
 301
 302       &:before {
 303         position: relative;
 304         top: -2px;
 305         content: '';
 306         background: #fff;
 307         border-radius: 100%;
 308         border: 1px solid #000;
 309         display: inline-block;
 310         width: 15px;
 311         height: 15px;
 312         vertical-align: middle;
 313         cursor: pointer;
 314         text-align: center;
 315         margin-right: 10px;
 316       }
 317     }
 318
 319     &:checked + label:before {
 320       background-color: #000;
 321       box-shadow: inset 0 0 0 4px #fff;
 322     }
 323
 324     &:focus + label:before {
 325       outline: none;
 326       border-color: #000;
 327     }
 328   }
 329 }
 330
 331 @mixin peertube-checkbox ($border-width) {
 332   opacity: 0;
 333   position: absolute;
 334
 335   &:focus + span {
 336     outline: 1px solid #1e5180;
 337   }
 338
 339   & + span {
 340     position: relative;
 341     width: 18px;
 342     height: 18px;
 343     border: $border-width solid var(--mainForegroundColor);
 344     border-radius: 3px;
 345     vertical-align: middle;
 346     cursor: pointer;
 347
 348     &:after {
 349       content: '';
 350       position: absolute;
 351       top: calc(2px - #{$border-width});
 352       left: 5px;
 353       width: 5px;
 354       height: 12px;
 355       opacity: 0;
 356       transform: rotate(45deg) scale(0);
 357       border-right: 2px solid var(--mainBackgroundColor);
 358       border-bottom: 2px solid var(--mainBackgroundColor);
 359     }
 360   }
 361
 362   &:checked + span {
 363     border-color: transparent;
 364     background: var(--mainColor);
 365     animation: jelly 0.6s ease;
 366
 367     &:after {
 368       opacity: 1;
 369       transform: rotate(45deg) scale(1);
 370     }
 371   }
 372
 373   & + span + span {
 374     font-size: 15px;
 375     font-weight: $font-regular;
 376     margin-left: 5px;
 377     cursor: pointer;
 378     display: inline;
 379   }
 380
 381   &[disabled] + span,
 382   &[disabled] + span + span{
 383     opacity: 0.5;
 384     cursor: default;
 385   }
 386 }
 387
 388
 389 @mixin avatar ($size) {
 390   object-fit: cover;
 391   border-radius: 50%;
 392   width: $size;
 393   height: $size;
 394 }
 395
 396 @mixin chevron ($size, $border-width) {
 397   border-style: solid;
 398   border-width: $border-width $border-width 0 0;
 399   content: '';
 400   display: inline-block;
 401   transform: rotate(-45deg);
 402   height: $size;
 403   width: $size;
 404 }
 405
 406 @mixin chevron-right ($size, $border-width) {
 407   @include chevron($size, $border-width);
 408
 409   left: 0;
 410   transform: rotate(45deg);
 411 }
 412
 413 @mixin chevron-left ($size, $border-width) {
 414   @include chevron($size, $border-width);
 415
 416   left: 0.25em;
 417   transform: rotate(-135deg);
 418 }
 419
 420 @mixin in-content-small-title {
 421   text-transform: uppercase;
 422   color: var(--mainColor);
 423   font-weight: $font-bold;
 424   font-size: 13px;
 425 }
 426
 427 @mixin actor-owner {
 428   @include disable-default-a-behaviour;
 429
 430   display: inline-table;
 431   font-size: 13px;
 432   margin-top: 4px;
 433   color: var(--mainForegroundColor);
 434
 435   span:hover {
 436     opacity: 0.8;
 437   }
 438
 439   img {
 440     @include avatar(18px);
 441
 442     margin-left: 7px;
 443     position: relative;
 444     top: -2px;
 445   }
 446 }
 447
 448 @mixin sub-menu-with-actor {
 449   height: 160px;
 450   display: flex;
 451   flex-direction: column;
 452   align-items: flex-start;
 453
 454   .actor {
 455     display: flex;
 456     margin-top: 20px;
 457     margin-bottom: 20px;
 458
 459     img {
 460       @include avatar(80px);
 461
 462       margin-right: 20px;
 463     }
 464
 465     .actor-info {
 466       display: flex;
 467       flex-direction: column;
 468       justify-content: center;
 469
 470       .actor-names {
 471         display: flex;
 472         align-items: center;
 473
 474         .actor-display-name {
 475           font-size: 23px;
 476           font-weight: $font-bold;
 477         }
 478
 479         .actor-name {
 480           margin-left: 7px;
 481           position: relative;
 482           top: 3px;
 483           font-size: 14px;
 484           color: $grey-actor-name;
 485         }
 486       }
 487
 488       .actor-followers {
 489         font-size: 15px;
 490       }
 491
 492       .actor-owner {
 493         @include actor-owner;
 494       }
 495     }
 496   }
 497
 498   .links {
 499     margin-top: 0;
 500     margin-bottom: 10px;
 501
 502     a {
 503       margin-top: 0;
 504       margin-bottom: 0;
 505     }
 506   }
 507 }
 508
 509 @mixin create-button {
 510   @include peertube-button-link;
 511   @include orange-button;
 512   @include button-with-icon(20px, 5px, -1px);
 513 }
 514
 515 @mixin row-blocks {
 516   display: flex;
 517   min-height: 130px;
 518   padding-bottom: 20px;
 519   margin-bottom: 20px;
 520   border-bottom: 1px solid #C6C6C6;
 521
 522   @media screen and (max-width: 800px) {
 523     flex-direction: column;
 524     height: auto;
 525     align-items: center;
 526   }
 527 }
 528
 529 @mixin dropdown-with-icon-item {
 530   padding: 6px 24px;
 531
 532   my-global-icon {
 533     width: 24px;
 534
 535     margin-right: 10px;
 536     position: relative;
 537     top: -2px;
 538   }
 539 }