.docCards{
/**************** Overriding existing CSS ****************/
&>header {padding-top: 20px;}
#decoration, &>footer {display: none;}
&>main{
overflow-x: hidden;
padding: 0;
&::before,&::after {display: none;}
}
&::after{
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0; right: 0;
height: 30px;
pointer-events: none;
background-image: linear-gradient(rgba(21, 18, 24, 0) 0%, #151218 100%);
}
&.open::after{
background-image: linear-gradient(rgba(253,243,226, 0) 0%, rgba(253,243,226, 1) 100%);
z-index: 1;
}
/**************** CARDS ****************/
$cardH: 300px;
$cardAnimS: 1s;
.cards{
flex: 1;
flex-shrink: 0;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width: calc(100% + 18px); // Hide scrollbar
overflow-y: scroll;
overflow-x: hidden;
padding-top: 20px;
a {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
height: $cardH;
flex: 0 0 100%;
@for $i from 2 through 8 {@media screen and (min-width: ($i * 400px)) {
flex: 0 0 (100%/$i);
}}
overflow: hidden;
background-image: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .8) 100%);
box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
img{
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%; height: 100%;
object-fit: cover;
filter: grayscale(1);
transition: transform .5s ease-in;
}
&:hover{img{transform: scale(1.2);}}
&::after{
content: "";
display: block;
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
z-index: -1;
background-color: rgb(245, 171, 69);
mix-blend-mode: multiply;
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { // IE fallback
background-color: rgba(245, 171, 69, 0.8);
}
}
h2{
order: 1;
margin: 0; padding: 10px 30px 30px 30px;
font-size: 1.8em;
font-weight: normal;
}
span{
order: 0;
padding: 0 30px;
font-weight: bold;
}
font-family: "Lato", sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
color: white;
}
}
/**************** PAPER - content ****************/
.paper{
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
overflow: hidden;
flex: 0;
background-color: #fdf3e2;
background-image: url("https://www.transparenttextures.com/patterns/rice-paper-2.png");
color: black;
&, & .sub{
border-top: 1px solid rgba(141, 140, 143, 0.2);
box-shadow: 0px -5px 10px -5px rgba(110, 104, 110, 0.9);
}
.nav{
width: 100%; max-width: 900px;
margin: 15px auto; padding: 0 4vw;
}
.content{
display: flex;
flex-direction: column;
justify-content: flex-start;
flex: 1;
height: 100%;
.group, .sub{
overflow: hidden;
flex: 0 0px;
&.open{
flex: 1;
//flex: 1 0 auto;
}
}
}
article{
max-width: 800px;
margin: 0 auto; padding: 0 4vw;
}
h3{text-align: center;}
section.keypeople{
.sub-items{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
a{
display: flex;
flex-direction: column;
align-items: center;
width: 100px;
margin: 0 40px 40px 40px;
text-decoration: none;
img{
height: 100px; width: 100px;
border-radius: 50%;
object-fit: cover;
}
h4, span{
margin: 5px 0 0 0; padding: 0;
color: black;
font-size: .8em;
white-space: nowrap;
text-align: center;
}
span{
text-transform: lowercase;
color: #8d8c8f;
}
}
}
}
footer{
padding: 10px 4vw 20px 4vw;
background: none; // override existing CSS
&::before{
content: "";
position: absolute;
top: 0;
left: 0; right: 0;
display: block;
border-top: 1px solid rgba(141, 140, 143, 0.2);
height: 0; background: none; // override existing CSS
}
}
}
/**************** Open content ****************/
/* https://codepen.io/brundolf/pen/mWWrOe */
.cards,.paper, .paper .group, .paper .sub {
transition: flex $cardAnimS ease-out; // note that we're transitioning flex, not height!
height: auto;
}
&.open{
.cards{
flex: 0 0 $cardH;
height: $cardH;
&::after{
content: "";
display: block;
height: 100vh; width: 1px;
}
a:not(.active)::after{
background-image: linear-gradient(rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .7) 100%);
}
}
.paper{
flex: 1;
animation-name: paperOverflow;
animation-delay: $cardAnimS;
animation-fill-mode: forwards;
}
}
@keyframes paperOverflow {
100% {overflow: initial;}
}
}
/**************** Reusable styling ****************/
.back{
cursor: pointer;
font-family: "Lato", sans-serif;
text-transform: uppercase;
font-size: 0.75em;
letter-spacing: 1.5px;
font-weight: bold;
}
View Compiled
//******************************************************************************
//Add dummy content
var numItems = 20, $b = $('.docCards'), $cards = $b.find( "section.cards" ), $paper = $b.find( "section.paper" ),
arrSubPic = ["https://alwayspeachy.files.wordpress.com/2014/08/pig-03.jpg", "https://i0.wp.com/www.wikitricky.com/wp-content/uploads/2018/02/AMVC-Piglet.jpg?resize=600%2C400","https://c.pxhere.com/photos/ba/10/cow_animal_cow_head_cows_cattle_animals_white_milk_cow-984028.jpg!d"],
subHTML = "";
$.get("https://baconipsum.com/api/?type=filler&format=html", function( fill ) {
for (i = 0; i < arrSubPic.length; i++){
subHTML += '<a href="#sub'+i+'">\
<img alt="A pig" src="'+arrSubPic[i]+'">\
<h4>Subcategory</h4>\
<span>Class</span>\
</a>';
$paper.find('.sub').append('\
<article id="sub'+i+'">'
+fill+'\
</article>');
}
$.get("https://baconipsum.com/api/?type=meat-and-filler&format=html", function( lorem ) {
for (i = 0; i < numItems; i++){
$cards.append('\
<a href="#card'+i+'">\
<img src="https://picsum.photos/30'+i+'/201/"/>\
<h2>Title</h2>\
<span>type</span>\
</a>'
);
$paper.find('.group').append('\
<article id="card'+i+'">'
+lorem+'\
<section class="keypeople">\
<h3>Subitems</h3>\
<div class="sub-items">'
+subHTML+
'</div>\
</section>\
</article>');
};
});
});
//******************************************************************************
//Open content on card click
var curScrollPos = 0, itemScrollPos = 0, orgLeft = 0, orgNum = 0;
$('.docCards').on('click', '.cards a', function(e){ e.preventDefault(); // Prevent jump to anchor
var $t = $(this);
$('.active').removeClass('active'); $t.addClass('active');
$paper.scrollTop( 0 ).find('article').hide().siblings($t.attr('href')).show();
$b.find( '.group' ).addClass('open');
//Get active org positions for resizing
orgLeft = $t.position().left;
orgNum = Math.round(orgLeft/400);
if(!$b.hasClass('open')){
//Get org positions for when closing
curScrollPos = $cards.scrollTop();
itemScrollPos = $cards.scrollTop() + $t.position().top - 20;
//Scroll selected card to top
$cards.animate({ scrollTop: $cards.scrollTop() + $t.position().top - 20 },{
duration: 900, //$t.position().top/3*2, 750 bottom - 900 top
complete: function(){setTimeout(function(){
//Add styling for wrapping end overflow
$cards.css({
'flex-wrap':'nowrap',
'overflow-y': 'hidden' //Opera fix
});
$paper.css({
'flex': '1 0 auto' //Opera fix
});
//Scroll
var scrollTo = $t.position().left - orgLeft,
scrollW = $cards[0].scrollWidth;
if (scrollTo > scrollW){scrollTo = scrollW} $cards.scrollLeft(scrollTo).scrollTop(0); //ScrollTop = Opera fix
//checkScrollLR(); //To force check of refuiered scroll areas
}, 300);}
});
$b.addClass('open');
};
}).on('click', '.sub-items a, .sub > .nav a.back', function(e){
if(!$(e.target).hasClass('back')){
$paper.find('.sub article').hide().siblings($(this).closest('a').attr('href')).show();
} setTimeout(function(){ // Give time to manipulate DOM
$('.group, .sub').toggleClass('open');
}, 300);
}).on('click', '.paper > .nav a.back', function(){
$('.open').removeClass('open');
$('.active').removeClass('active');
$cards.css({
'flex-wrap':'wrap',
'overflow-y': 'scroll' //Opera fix
}).scrollTop(itemScrollPos).animate({
scrollTop: curScrollPos
});
$paper.css({
'flex': '' //Opera fix
});
});
$( window ).resize(function() {
console.log('*********resize*******')
var $curActiveItem = $('.active'),
numItemsFitWidth = Math.round($b.width() / $curActiveItem.width()),
calcNum = Math.max(Math.min(numItemsFitWidth-orgNum, orgNum), 0),
scrollTo = ($curActiveItem.index()-calcNum)*$curActiveItem.width();
$cards.scrollLeft(scrollTo);
});
