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