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