Kyoo/Kyoo.WebApp/src/app/components/items-grid/items-grid.component.scss
2021-03-25 21:49:00 +01:00

128 lines
1.5 KiB
SCSS

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins/breakpoints";
button
{
outline: none;
}
.arrow
{
font-size: 12px;
}
.container-fluid
{
display: flex;
flex-wrap: wrap;
}
.show
{
width: 27%;
min-width: 100px;
max-width: 168px;
list-style: none;
margin: .5em;
text-decoration: none;
color: inherit;
outline: none;
@include media-breakpoint-up(sm)
{
width: 22%;
min-width: 120px;
}
@include media-breakpoint-up(md)
{
width: 18%;
margin: 1em;
}
@include media-breakpoint-up(lg)
{
width: 18%;
}
@include media-breakpoint-up(xl)
{
width: 15%;
}
&:focus, &:hover
{
> div
{
outline: solid var(--accentColor);
}
> .title
{
text-decoration: underline;
}
}
> div
{
width: 100%;
height: 0;
padding-top: 147.0588%;
background-size: cover;
background-color: #333333;
}
> p
{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
margin-bottom: 0;
opacity: 1;
&.date
{
opacity: 0.8;
font-size: 0.8em;
}
}
&:host-context(.hoverEnabled) &:hover
{
cursor: pointer;
}
}
::ng-deep .big-panel
{
width: 80vw !important;
max-width: none !important;
margin-left: -20vw;
margin-right: -20vw;
overflow-x: hidden;
@include media-breakpoint-up(sm)
{
width: 70vw !important;
}
@include media-breakpoint-up(md)
{
width: 50vw !important;
}
> div
{
text-align: center;
> mat-chip-list > div
{
justify-content: center;
margin: 0;
}
}
}