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