diff options
author | Chocobozzz <me@florianbigard.com> | 2021-08-25 11:42:30 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2021-08-25 11:42:30 +0200 |
commit | fdec51e3846d50e3375612a6820ed3ab0b5fcd25 (patch) | |
tree | 17283e85a6794c9e8fe3f5d4478a406d8d188425 /client/src/sass | |
parent | 59c8902a57991be29f0aacac1642389fb770c6ed (diff) | |
parent | dd24f1bb0a4b252e5342b251ba36853364da7b8e (diff) | |
download | PeerTube-fdec51e3846d50e3375612a6820ed3ab0b5fcd25.tar.gz PeerTube-fdec51e3846d50e3375612a6820ed3ab0b5fcd25.tar.zst PeerTube-fdec51e3846d50e3375612a6820ed3ab0b5fcd25.zip |
Merge branch 'feature/video-filters' into develop
Diffstat (limited to 'client/src/sass')
-rw-r--r-- | client/src/sass/bootstrap.scss | 1 | ||||
-rw-r--r-- | client/src/sass/classes.scss | 4 | ||||
-rw-r--r-- | client/src/sass/include/_mixins.scss | 77 |
3 files changed, 50 insertions, 32 deletions
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss index 4f6e08c1b..4e88d9706 100644 --- a/client/src/sass/bootstrap.scss +++ b/client/src/sass/bootstrap.scss | |||
@@ -287,6 +287,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; | |||
287 | 287 | ||
288 | &.show { | 288 | &.show { |
289 | max-height: 1500px; | 289 | max-height: 1500px; |
290 | overflow: inherit !important; | ||
290 | } | 291 | } |
291 | } | 292 | } |
292 | 293 | ||
diff --git a/client/src/sass/classes.scss b/client/src/sass/classes.scss index 2d8117ee5..1cd7a6058 100644 --- a/client/src/sass/classes.scss +++ b/client/src/sass/classes.scss | |||
@@ -24,3 +24,7 @@ | |||
24 | .tertiary-button { | 24 | .tertiary-button { |
25 | @include tertiary-button; | 25 | @include tertiary-button; |
26 | } | 26 | } |
27 | |||
28 | .peertube-radio-container { | ||
29 | @include peertube-radio-container; | ||
30 | } | ||
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 4d4c52b34..9f6d69131 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss | |||
@@ -420,42 +420,55 @@ | |||
420 | } | 420 | } |
421 | } | 421 | } |
422 | 422 | ||
423 | // Thanks: https://codepen.io/triss90/pen/XNEdRe/ | 423 | // Thanks: https://codepen.io/manabox/pen/raQmpL |
424 | @mixin peertube-radio-container { | 424 | @mixin peertube-radio-container { |
425 | input[type=radio] { | 425 | [type=radio]:checked, |
426 | display: none; | 426 | [type=radio]:not(:checked) { |
427 | 427 | position: absolute; | |
428 | + label { | 428 | left: -9999px; |
429 | font-weight: $font-regular; | 429 | } |
430 | cursor: pointer; | ||
431 | 430 | ||
432 | &::before { | 431 | [type=radio]:checked + label, |
433 | @include margin-right(10px); | 432 | [type=radio]:not(:checked) + label { |
434 | 433 | position: relative; | |
435 | position: relative; | 434 | padding-left: 28px; |
436 | top: -2px; | 435 | cursor: pointer; |
437 | content: ''; | 436 | line-height: 20px; |
438 | background: #fff; | 437 | display: inline-block; |
439 | border-radius: 100%; | 438 | } |
440 | border: 1px solid #000; | ||
441 | display: inline-block; | ||
442 | width: 15px; | ||
443 | height: 15px; | ||
444 | vertical-align: middle; | ||
445 | cursor: pointer; | ||
446 | text-align: center; | ||
447 | } | ||
448 | } | ||
449 | 439 | ||
450 | &:checked + label::before { | 440 | [type=radio]:checked + label::before, |
451 | background-color: #000; | 441 | [type=radio]:not(:checked) + label::before { |
452 | box-shadow: inset 0 0 0 4px #fff; | 442 | content: ''; |
453 | } | 443 | position: absolute; |
444 | left: 0; | ||
445 | top: 0; | ||
446 | width: 18px; | ||
447 | height: 18px; | ||
448 | border: 1px solid #C6C6C6; | ||
449 | border-radius: 100%; | ||
450 | background: #fff; | ||
451 | } | ||
454 | 452 | ||
455 | &:focus + label::before { | 453 | [type=radio]:checked + label::after, |
456 | outline: none; | 454 | [type=radio]:not(:checked) + label::after { |
457 | border-color: #000; | 455 | content: ''; |
458 | } | 456 | width: 10px; |
457 | height: 10px; | ||
458 | background: pvar(--mainColor); | ||
459 | position: absolute; | ||
460 | top: 4px; | ||
461 | left: 4px; | ||
462 | border-radius: 100%; | ||
463 | transition: all 0.2s ease; | ||
464 | } | ||
465 | [type=radio]:not(:checked) + label::after { | ||
466 | opacity: 0; | ||
467 | transform: scale(0); | ||
468 | } | ||
469 | [type=radio]:checked + label::after { | ||
470 | opacity: 1; | ||
471 | transform: scale(1); | ||
459 | } | 472 | } |
460 | } | 473 | } |
461 | 474 | ||