@viewdo/dxp-story-player-assets
Version:
## Installation
204 lines (151 loc) • 4.76 kB
text/less
.viewdo-toc(@primary: #2d5174, @secondary: #6d5f8c, @theme: default){
body #state-player>*:first-child.toc{
width: 100%;
max-width: 58.75rem;
box-sizing: border-box;
padding: 0 1rem;
display: block;
}
div[class^="viewdo-toc-grid-"]{
display: flex;
flex-flow: wrap;
justify-content: center;
width: 100%;
.viewdo-toc-thumb{
margin: 1%;
width: 48%;
>div{
padding-top: 64%;
position: relative;
overflow: hidden;
cursor: pointer;
box-shadow: inset 0 0 0 .25rem @contrast;
.label{
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
background: fadeout(@contrast, 10%);
color: @contrastInverted;
padding: .5rem 0;
text-transform: uppercase;
font-size: .75rem;
font-weight: bold;
z-index: 1;
}
.background{
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
transition: all 0.5s ease;
top: 0;
}
&:before{
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
top: 0;
left: 0;
z-index: 1;
box-shadow: inset 0px 0px 0px 4px @contrast;
}
&:hover{
.background{
transform: scale3d(1.2, 1.2, 1);
}
}
}
}
&.viewdo-toc-circle{
.viewdo-toc-thumb{
>div{
padding-top: 100%;
border-radius: 50%;
.label {
top: 70%
}
.background {
overflow: hidden;
}
&:hover .background {
overflow: hidden;
}
}
}
}
}
.responsive(desktop,{
div[class^="viewdo-toc-grid-"]{
.viewdo-toc-thumb{
margin: 1%;
width: 23%;
}
}
.viewdo-toc-grid-1{
.viewdo-toc-thumb{
margin-right: 38.5%;
margin-left: 38.5%;
}
}
.viewdo-toc-grid-2,
.viewdo-toc-grid-4{
.viewdo-toc-thumb{
&:nth-child(odd){
margin-left: 26%;
}
&:nth-child(even){
margin-right: 26%;
}
}
}
.viewdo-toc-grid-5{
.viewdo-toc-thumb{
&:nth-child(1){
margin-left: 13.5%;
}
&:nth-child(3){
margin-right: 13.5%;
}
}
}
.viewdo-toc-grid-6{
.viewdo-toc-thumb{
&:nth-child(1){
margin-left: 13.5%;
}
&:nth-child(3){
margin-right: 13.5%;
}
}
}
});
}
.viewdo-toc(@primary: #2d5174, @secondary: #6d5f8c, @theme: default) when (@theme = dark){
div[class^="viewdo-toc-grid-"]{
.viewdo-toc-thumb{
>div{
.label{
background: fadeout(@primary, 10%);
color: black;
}
}
}
}
}
.viewdo-toc(@primary: #2d5174, @secondary: #6d5f8c, @theme: default) when (@theme = light){
div[class^="viewdo-toc-grid-"]{
.viewdo-toc-thumb{
>div{
.label{
background: fadeout(@primary, 10%);
color: black;
}
}
}
}
}