mirror of https://github.com/Chocobozzz/PeerTube
Make video-add-nav tabs scrollable on small devices (#2677)
* Make video-add-nav tabs scrollable on small devices * Handle video-add-nav scroll with menu Co-authored-by: kimsible <kimsible@users.noreply.github.com>pull/2692/head
parent
2dd530129f
commit
9181bc0c80
|
@ -4,6 +4,7 @@
|
|||
$border-width: 3px;
|
||||
$border-type: solid;
|
||||
$border-color: #EAEAEA;
|
||||
$nav-link-height: 40px;
|
||||
|
||||
.margin-content {
|
||||
padding-top: 50px;
|
||||
|
@ -25,7 +26,7 @@ $border-color: #EAEAEA;
|
|||
@include disable-default-a-behaviour;
|
||||
|
||||
margin-bottom: -$border-width;
|
||||
height: 40px !important;
|
||||
height: $nav-link-height !important;
|
||||
padding: 0 30px !important;
|
||||
font-size: 15px;
|
||||
|
||||
|
@ -60,3 +61,29 @@ $border-color: #EAEAEA;
|
|||
border: 3px dashed var(--mainColor);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin nav-scroll {
|
||||
::ng-deep .video-add-nav {
|
||||
height: #{$nav-link-height + $border-width * 2};
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
flex-wrap: unset;
|
||||
|
||||
/* Hide active tab style to not have a moving tab effect */
|
||||
a.nav-link.active {
|
||||
border: none;
|
||||
background-color: var(--mainBackgroundColor) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Make .video-add-nav tabs scrollable on small devices */
|
||||
@media screen and (max-width: $small-view) {
|
||||
@include nav-scroll();
|
||||
}
|
||||
|
||||
@media screen and (max-width: #{$small-view + $menu-width}) {
|
||||
:host-context(.main-col:not(.expanded)) {
|
||||
@include nav-scroll();
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue