Skip to content

Instantly share code, notes, and snippets.

@mharis

mharis/hero.scss

Created Nov 14, 2018
Embed
What would you like to do?
//*!--------------------------------------------------------------
// Gutenberg Hero Block
//--------------------------------------------------------------
$color-black: #000;
$color-white: #fff;
.wds-hero {
margin-bottom: 0;
overflow-y: hidden;
position: relative;
z-index: 1;
//*!Transparent overlay.
&::after {
background-color: rgba($color-black, 0.5);
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
} // &:after
// Content container.
&-content {
align-items: center;
color: $color-white;
display: flex;
flex-direction: column;
height: 500px;
justify-content: center;
margin: 0 auto;
max-width: 50%;
position: relative;
text-align: center;
z-index: 3;
} // .wds-hero-content
// Set title text color.
&-title {
color: $color-white;
margin: 0 0 20px 0;
} // .wds-hero-description
// Add padding to description.
&-description {
color: $color-white;
margin: 0 0 15px 0;
} // .hero-description
// Set button text color.
.wds-button-hero {
color: $color-white;
} // a.wds-button-hero
.image-background {
display: block;
height: 100%;
margin: 0;
object-fit: cover;
object-position: center center;
position: absolute;
width: 100%;
z-index: -1;
img {
height: 100%;
object-fit: cover;
width: 100%;
}
} // .image-background
} // .hero
//-----------------------------------------
// IE Fixes
//-----------------------------------------
.ie .wds-hero {
// IE seems to have some width issues with flexbox,
// the text is rendered wider than its container
// and doesn't wrap. This fixes that.
.wds-hero-title,
.wds-hero-description {
width: 100%;
} // .wds-hero-title, .wds-hero-description
} // .ie .wdshero
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment