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