Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save zikosichi/af0444c0193dd7b4b66cb5fe93c335f3 to your computer and use it in GitHub Desktop.
Save zikosichi/af0444c0193dd7b4b66cb5fe93c335f3 to your computer and use it in GitHub Desktop.
// Simple style for the content of parent & child
p{
margin: 0;
background-color: #fff;
color: #00B9AE;
padding: 20px;
border-radius: 10px;
box-shadow: 0 3px 6px rgba(#CC8367, 0.22);
}
.hv-item{
display: flex;
flex-direction: column;
margin: auto;
.hv-item-parent{
margin-bottom: $bottom-margin;
position: relative;
display: flex;
justify-content: center;
&:after{
position: absolute;
content: '';
width: $line-width;
height: $bottom-margin / 2;
bottom: 0;
left: 50%;
background-color: $line-color;
transform: translateY(100%);
}
}
.hv-item-children{
display: flex;
justify-content: center;
.hv-item-child{
padding: 0 15px;
position: relative;
&:before, &:after{
content: '';
position: absolute;
background-color: $line-color;
left: 0;
}
&:before{
left: 50%;
top: 0;
transform: translateY(-100%);
width: $line-width;
height: $bottom-margin / 2;
}
&:after{
top: -$bottom-margin / 2;
transform: translateY(-100%);
height: $line-width;
width: 100%;
}
&:first-child:after{
left: 50%;
width: 50%;
}
&:last-child:after{
width: calc(50% + 1px);
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment