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