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