Skip to content
Snippets Groups Projects
Commit dbfbc457 authored by shamalainen's avatar shamalainen
Browse files

Add more improvements [WIP]

parent 5af4c6db
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/hy-hero/hy-hero.scss
+ 114
− 35
View file @ dbfbc457
...@@ -3,8 +3,23 @@ ...@@ -3,8 +3,23 @@
} }
.hy-hero { .hy-hero {
overflow: hidden;
position: relative;
@include breakpoint($extrawide) {
margin-left: 8px;
margin-right: 8px;
}
@include breakpoint($xlarge) {
margin-left: 0;
margin-right: 0;
}
&--blue { &--blue {
background-color: var(--brand-main-light); .hy-hero__content-container {
background-color: var(--brand-main-light);
}
.hy-hero__title { .hy-hero__title {
&:not(.hy-hero__title--overlay) { &:not(.hy-hero__title--overlay) {
...@@ -28,19 +43,28 @@ ...@@ -28,19 +43,28 @@
@include breakpoint($narrow) { @include breakpoint($narrow) {
box-shadow: 48px 0 0 var(--brand-main-light), -48px 0 0 var(--brand-main-light); box-shadow: 48px 0 0 var(--brand-main-light), -48px 0 0 var(--brand-main-light);
} }
@include breakpoint($wide) {
box-shadow: 32px 0 0 var(--brand-main-light), 0 0 0 var(--brand-main-light);
}
@include breakpoint($extrawide) {
box-shadow: 40px 0 0 var(--brand-main-light), 0 0 0 var(--brand-main-light);
}
} }
} }
} }
.hy-hero__description, .hy-hero__description {
.hy-hero__actions {
background-color: var(--brand-main-light); background-color: var(--brand-main-light);
color: var(--grayscale-white); color: var(--grayscale-white);
} }
} }
&--black { &--black {
background-color: var(--grayscale-black); .hy-hero__content-container {
background-color: var(--grayscale-black);
}
.hy-hero__title { .hy-hero__title {
&:not(.hy-hero__title--overlay) { &:not(.hy-hero__title--overlay) {
...@@ -64,19 +88,28 @@ ...@@ -64,19 +88,28 @@
@include breakpoint($narrow) { @include breakpoint($narrow) {
box-shadow: 48px 0 0 var(--grayscale-black), -48px 0 0 var(--grayscale-black); box-shadow: 48px 0 0 var(--grayscale-black), -48px 0 0 var(--grayscale-black);
} }
@include breakpoint($wide) {
box-shadow: 32px 0 0 var(--grayscale-black), 0 0 0 var(--grayscale-black);
}
@include breakpoint($extrawide) {
box-shadow: 40px 0 0 var(--grayscale-black), 0 0 0 var(--grayscale-black);
}
} }
} }
} }
.hy-hero__description, .hy-hero__description {
.hy-hero__actions {
background-color: var(--grayscale-black); background-color: var(--grayscale-black);
color: var(--grayscale-white); color: var(--grayscale-white);
} }
} }
&--white { &--white {
background-color: var(--grayscale-white); .hy-hero__content-container {
background-color: var(--grayscale-white);
}
.hy-hero__title { .hy-hero__title {
&:not(.hy-hero__title--overlay) { &:not(.hy-hero__title--overlay) {
...@@ -100,18 +133,31 @@ ...@@ -100,18 +133,31 @@
@include breakpoint($narrow) { @include breakpoint($narrow) {
box-shadow: 48px 0 0 var(--grayscale-white), -48px 0 0 var(--grayscale-white); box-shadow: 48px 0 0 var(--grayscale-white), -48px 0 0 var(--grayscale-white);
} }
@include breakpoint($wide) {
box-shadow: 32px 0 0 var(--grayscale-white), 0 0 0 var(--grayscale-white);
}
@include breakpoint($extrawide) {
box-shadow: 40px 0 0 var(--grayscale-white), 0 0 0 var(--grayscale-white);
}
} }
} }
} }
.hy-hero__description, .hy-hero__description {
.hy-hero__actions {
background-color: var(--grayscale-white); background-color: var(--grayscale-white);
color: var(--grayscale-black); color: var(--grayscale-black);
} }
} }
} }
.hy-hero__container {
@include breakpoint($wide) {
display: flex;
}
}
.hy-hero__image-container { .hy-hero__image-container {
background-position: 50% 50%; background-position: 50% 50%;
background-size: cover; background-size: cover;
...@@ -120,13 +166,12 @@ ...@@ -120,13 +166,12 @@
padding: 0; padding: 0;
position: relative; position: relative;
// @include breakpoint($wide) { @include breakpoint($wide) {
// background: white; background-color: var(--grayscale-white);
// order: 2; order: 2;
// padding: 6px 0; padding: 6px 0;
// width: 60%; width: 60%;
// z-index: 1; }
// }
} }
.hy-image__image { .hy-image__image {
...@@ -137,12 +182,33 @@ ...@@ -137,12 +182,33 @@
width: 100%; width: 100%;
} }
.hy-hero__content { .hy-hero__content-container {
padding: 0 1rem 2rem; padding: 0 1rem 2rem;
@include breakpoint($narrow) { @include breakpoint($narrow) {
padding: 0 2rem 40px; padding: 0 2rem 40px;
} }
@include breakpoint($wide) {
display: flex;
flex-direction: column;
justify-content: center;
order: 1;
padding: 52px 0;
position: relative;
width: 40%;
}
@include breakpoint($extrawide) {
padding: 80px 0;
}
}
.hy-hero__content {
@include breakpoint($wide) {
margin-left: 32px;
margin-right: -32px;
}
} }
.hy-hero__title-container { .hy-hero__title-container {
...@@ -179,12 +245,30 @@ ...@@ -179,12 +245,30 @@
max-width: 87% !important; max-width: 87% !important;
} }
@include breakpoint($wide) {
max-width: 120% !important;
}
@include breakpoint($extrawide) {
max-width: 115% !important;
}
span { span {
padding-top: 16px; padding-top: 16px;
@include breakpoint($narrow) { @include breakpoint($narrow) {
padding-top: 32px; padding-top: 32px;
} }
@include breakpoint($wide) {
padding-bottom: 28px;
padding-top: 24px;
}
@include breakpoint($extrawide) {
padding-bottom: 30px;
padding-top: 36px;
}
} }
} }
...@@ -222,31 +306,26 @@ ...@@ -222,31 +306,26 @@
@include breakpoint($wide) { @include breakpoint($wide) {
@include font-size(18px, 28px); @include font-size(18px, 28px);
letter-spacing: -0.1px; letter-spacing: -0.1px;
margin: 0;
padding: 16px 40px 20px 0;
max-width: 100%; max-width: 100%;
margin: 9px 0 0; position: relative;
padding: 0 24px 20px 0;
} }
@include breakpoint($extrawide) { @include breakpoint($extrawide) {
margin: 9px 0 0; padding: 28px 40px 32px 0;
padding: 0 24px 20px 0;
}
@include breakpoint($xlarge) {
padding: 0 40px 32px 0;
} }
// No sidebar, large desktop screens // No sidebar, large desktop screens
&__large { // &__large {
@include breakpoint($extrawide) { // @include breakpoint($extrawide) {
padding: 0 40px 32px 0; // padding: 0 40px 32px 0;
} // }
@include breakpoint($xlarge) { // @include breakpoint($xlarge) {
padding: 0 40px 36px 0; // padding: 0 40px 36px 0;
} // }
} // }
} }
// .hy-hero { // .hy-hero {
......
src/components/hy-hero/hy-hero.tsx
+ 30
− 28
View file @ dbfbc457
...@@ -91,35 +91,37 @@ export class HyHero { ...@@ -91,35 +91,37 @@ export class HyHero {
<figure class="hy-hero__image-container" style={aspectRatio}> <figure class="hy-hero__image-container" style={aspectRatio}>
<img alt={this.scLabel} class="hy-image__image" src={this.image} /> <img alt={this.scLabel} class="hy-image__image" src={this.image} />
</figure> </figure>
<div class={classContentContainer}> <div class="hy-hero__content-container">
<div class="hy-hero__title-container"> <div class={classContentContainer}>
<hy-heading <div class="hy-hero__title-container">
class="hy-hero__title" <hy-heading
heading={HeadingVarians.default} class="hy-hero__title"
section={HeadingSectionVariants.introduction} heading={HeadingVarians.default}
> section={HeadingSectionVariants.introduction}
{this.heading} >
</hy-heading> {this.heading}
<hy-heading </hy-heading>
class="hy-hero__title hy-hero__title--overlay" <hy-heading
heading={HeadingVarians.default} class="hy-hero__title hy-hero__title--overlay"
section={HeadingSectionVariants.introduction} heading={HeadingVarians.default}
> section={HeadingSectionVariants.introduction}
{this.heading} >
</hy-heading> {this.heading}
</div> </hy-heading>
{this.description && <p class={classDescription}>{this.description}</p>}
{this.url && (
<div class="hy-hero__actions">
<hy-cta-button
link-content={this.urlTitle}
sc-label={this.scLabel}
url={this.url}
is-external={this.isExternal}
variant={variant}
/>
</div> </div>
)} {this.description && <p class={classDescription}>{this.description}</p>}
{this.url && (
<div class="hy-hero__actions">
<hy-cta-button
link-content={this.urlTitle}
sc-label={this.scLabel}
url={this.url}
is-external={this.isExternal}
variant={variant}
/>
</div>
)}
</div>
</div> </div>
</div> </div>
</div> </div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment