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

Update adjacent image text size

parent 7f164cfe
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/adjacent-image-text/adjacent-image-text.scss
+ 125
− 118
View file @ b8ac728a
......@@ -19,152 +19,159 @@ $margin-narrow: 32px;
background: var(--grayscale-background-box);
flex-direction: row;
}
}
&__image-container {
display: flex;
flex: 1;
justify-content: stretch;
margin-bottom: 0;
min-height: 10rem;
position: relative;
padding-bottom: $margin-narrow;
.hy-adjacent-image-text__image-container {
display: flex;
flex: 1;
justify-content: stretch;
margin-bottom: 0;
min-height: 10rem;
position: relative;
padding-bottom: $margin-narrow;
@include breakpoint($narrow) {
padding-bottom: 0;
}
@include breakpoint($wide) {
flex-basis: 50%;
margin: 0 calc(#{var(--gutter-wide)} * -1) 0 0;
z-index: 1;
}
@include breakpoint($extrawide) {
margin: 0 calc(#{var(--gutter-extrawide)} * -1) 0 0;
}
img {
height: 100%;
object-fit: cover;
width: 100%;
@include breakpoint($narrow) {
padding-bottom: 0;
max-height: 420px;
min-height: 160px;
}
@include breakpoint($wide) {
flex-basis: 50%;
margin: 0 calc(#{var(--gutter-wide)} * -1) 0 0;
z-index: 1;
max-height: 100%;
}
}
}
@include breakpoint($extrawide) {
margin: 0 calc(#{var(--gutter-extrawide)} * -1) 0 0;
}
img {
height: 100%;
object-fit: cover;
width: 100%;
@include breakpoint($narrow) {
max-height: 420px;
min-height: 160px;
}
.hy-adjacent-image-text__text-container {
background: var(--grayscale-background-box);
border-image: none;
display: flex;
flex: 1;
flex-direction: column;
-webkit-border-image: none;
-moz-border-image: none;
-o-border-image: none;
@include breakpoint($wide) {
max-height: 100%;
}
}
@include breakpoint($narrow) {
border-left: 1px solid transparent;
border-image: linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;
margin-left: 66px;
margin-top: -63px;
padding-top: 38px;
position: relative;
z-index: 98;
-webkit-border-image: -webkit-linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;
-moz-border-image: linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;
-o-border-image: linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;
}
&__text-container {
background: var(--grayscale-background-box);
@include breakpoint($wide) {
border-image: none;
display: flex;
flex: 1;
flex-direction: column;
border-left: none;
flex-basis: 50%;
margin-left: 0;
margin-top: 0;
padding-top: 0;
z-index: 0;
-webkit-border-image: none;
-moz-border-image: none;
-o-border-image: none;
}
}
@include breakpoint($narrow) {
border-left: 1px solid transparent;
border-image: linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;
margin-left: 66px;
margin-top: -63px;
padding-top: 38px;
position: relative;
z-index: 98;
-webkit-border-image: -webkit-linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0
100%;
-moz-border-image: linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;
-o-border-image: linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%;
}
.hy-adjacent-image-text__text-container__links-wrapper {
padding-left: 1rem;
@include breakpoint($narrow) {
padding-left: 50px;
}
@include breakpoint($wide) {
margin: 0 0 0 14%;
padding: 0;
}
}
@include breakpoint($wide) {
border-image: none;
border-left: none;
flex-basis: 50%;
margin-left: 0;
margin-top: 0;
padding-top: 0;
z-index: 0;
-webkit-border-image: none;
-moz-border-image: none;
-o-border-image: none;
}
.hy-adjacent-image-text__text-container__info-wrapper {
padding-left: 0;
padding-right: 0;
&__links-wrapper {
padding-left: 1rem;
@include breakpoint($narrow) {
padding-left: 50px;
}
@include breakpoint($wide) {
margin: 0 0 0 14%;
padding: 0;
}
}
@include breakpoint($narrow) {
padding-left: 50px;
}
&__info-wrapper {
padding-left: 0;
padding-right: 0;
@include breakpoint($wide) {
margin: 0 7% 0 14%;
padding: 0;
}
}
@include breakpoint($narrow) {
padding-left: 50px;
}
.hy-adjacent-image-text__text-container__title {
@include font-size(22px, 28px);
@include font-weight($bold);
color: var(--brand-main-nearly-black);
font-family: var(--main-font-family);
letter-spacing: -0.69px;
margin-top: 32px;
padding: 0 1rem;
@include breakpoint($wide) {
margin: 0 7% 0 14%;
padding: 0;
}
}
@include breakpoint($narrow) {
@include font-size(32px, 40px);
letter-spacing: -1px;
margin-top: 41px;
padding: 0;
}
}
&__title {
@include font-size(22px, 28px);
@include font-weight($bold);
color: var(--brand-main-nearly-black);
font-family: var(--main-font-family);
letter-spacing: -0.69px;
margin-top: 32px;
padding: 0 1rem;
@include breakpoint($narrow) {
@include font-size(32px, 40px);
letter-spacing: -1px;
margin-top: 41px;
padding: 0;
}
}
.hy-adjacent-image-text__text-container__description {
@include font-size(15px, 22px);
@include font-weight($regular);
color: var(--grayscale-dark);
font-family: var(--main-font-family);
margin: 20px 0 32px 0;
padding: 0 1rem;
&__description {
color: var(--grayscale-dark);
font-family: var(--main-font-family);
font-size: 14px;
letter-spacing: 0;
line-height: 20px;
margin: 20px 0 32px 0;
padding: 0 1rem;
@include breakpoint($narrow) {
font-size: 20px;
letter-spacing: -0.1;
line-height: 32px;
margin: 20px 0 61px 0;
padding: 0;
}
}
@include breakpoint($narrow) {
@include font-size(16px, 24px);
margin: 20px 0 61px 0;
padding: 0;
}
@include breakpoint($xlarge) {
@include font-size(17px, 26px);
margin-bottom: 40px;
}
&__link {
display: flex;
justify-content: flex-end;
margin-bottom: 12px;
margin-right: -6px;
&__large {
@include breakpoint($extrawide) {
@include font-size(17px, 26px);
}
}
}
.hy-adjacent-image-text__text-container__link {
display: flex;
justify-content: flex-end;
margin-bottom: 12px;
margin-right: -6px;
}
.hy-adjacent-image-text::after {
content: '';
clear: both;
......
src/components/adjacent-image-text/adjacent-image-text.tsx
+ 5
− 1
View file @ b8ac728a
......@@ -57,7 +57,11 @@ export class AdjacentImageText implements ComponentInterface {
<div class={contentClassAttributes}>
<div class="hy-adjacent-image-text__text-container__info-wrapper">
<div class="hy-adjacent-image-text__text-container__title">{this.textTitle}</div>
<div class="hy-adjacent-image-text__text-container__description">{this.textDescription}</div>
<p
class={`hy-adjacent-image-text__text-container__description hy-adjacent-image-text__text-container__description__${this.headerstyle}`}
>
{this.textDescription}
</p>
</div>
<div class="hy-adjacent-image-text__text-container__links-wrapper">
{this.mainUrl && (
......
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