Skip to content
Snippets Groups Projects
Commit e70347eb authored by Ekaterina Kondareva's avatar Ekaterina Kondareva
Browse files

Merge branch 'NXSTAGE-1412-text-styles' into 'development' 

NXSTAGE-1412: Update texts to use ingress/body text specs

See merge request julkiset-sivut/design-system-lib!161
parents becc615f b8ac728a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 157 additions and 144 deletions
src/components/adjacent-image-text/adjacent-image-text.scss
+ 125
− 118
View file @ e70347eb
...@@ -19,152 +19,159 @@ $margin-narrow: 32px; ...@@ -19,152 +19,159 @@ $margin-narrow: 32px;
background: var(--grayscale-background-box); background: var(--grayscale-background-box);
flex-direction: row; flex-direction: row;
} }
}
&__image-container { .hy-adjacent-image-text__image-container {
display: flex; display: flex;
flex: 1; flex: 1;
justify-content: stretch; justify-content: stretch;
margin-bottom: 0; margin-bottom: 0;
min-height: 10rem; min-height: 10rem;
position: relative; position: relative;
padding-bottom: $margin-narrow; 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) { @include breakpoint($narrow) {
padding-bottom: 0; max-height: 420px;
min-height: 160px;
} }
@include breakpoint($wide) { @include breakpoint($wide) {
flex-basis: 50%; max-height: 100%;
margin: 0 calc(#{var(--gutter-wide)} * -1) 0 0;
z-index: 1;
} }
}
}
@include breakpoint($extrawide) { .hy-adjacent-image-text__text-container {
margin: 0 calc(#{var(--gutter-extrawide)} * -1) 0 0; background: var(--grayscale-background-box);
} border-image: none;
display: flex;
img { flex: 1;
height: 100%; flex-direction: column;
object-fit: cover; -webkit-border-image: none;
width: 100%; -moz-border-image: none;
-o-border-image: none;
@include breakpoint($narrow) {
max-height: 420px;
min-height: 160px;
}
@include breakpoint($wide) { @include breakpoint($narrow) {
max-height: 100%; 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 { @include breakpoint($wide) {
background: var(--grayscale-background-box);
border-image: none; border-image: none;
display: flex; border-left: none;
flex: 1; flex-basis: 50%;
flex-direction: column; margin-left: 0;
margin-top: 0;
padding-top: 0;
z-index: 0;
-webkit-border-image: none; -webkit-border-image: none;
-moz-border-image: none; -moz-border-image: none;
-o-border-image: none; -o-border-image: none;
}
}
@include breakpoint($narrow) { .hy-adjacent-image-text__text-container__links-wrapper {
border-left: 1px solid transparent; padding-left: 1rem;
border-image: linear-gradient(to bottom, var(--grayscale-medium-dark), rgba(0, 0, 0, 0)) 1 0 0 100%; @include breakpoint($narrow) {
margin-left: 66px; padding-left: 50px;
margin-top: -63px; }
padding-top: 38px; @include breakpoint($wide) {
position: relative; margin: 0 0 0 14%;
z-index: 98; padding: 0;
-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%;
}
@include breakpoint($wide) { .hy-adjacent-image-text__text-container__info-wrapper {
border-image: none; padding-left: 0;
border-left: none; padding-right: 0;
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;
}
&__links-wrapper { @include breakpoint($narrow) {
padding-left: 1rem; padding-left: 50px;
@include breakpoint($narrow) { }
padding-left: 50px;
}
@include breakpoint($wide) {
margin: 0 0 0 14%;
padding: 0;
}
}
&__info-wrapper { @include breakpoint($wide) {
padding-left: 0; margin: 0 7% 0 14%;
padding-right: 0; padding: 0;
}
}
@include breakpoint($narrow) { .hy-adjacent-image-text__text-container__title {
padding-left: 50px; @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) { @include breakpoint($narrow) {
margin: 0 7% 0 14%; @include font-size(32px, 40px);
padding: 0; letter-spacing: -1px;
} margin-top: 41px;
} padding: 0;
}
}
&__title { .hy-adjacent-image-text__text-container__description {
@include font-size(22px, 28px); @include font-size(15px, 22px);
@include font-weight($bold); @include font-weight($regular);
color: var(--brand-main-nearly-black); color: var(--grayscale-dark);
font-family: var(--main-font-family); font-family: var(--main-font-family);
letter-spacing: -0.69px; margin: 20px 0 32px 0;
margin-top: 32px; padding: 0 1rem;
padding: 0 1rem;
@include breakpoint($narrow) {
@include font-size(32px, 40px);
letter-spacing: -1px;
margin-top: 41px;
padding: 0;
}
}
&__description { @include breakpoint($narrow) {
color: var(--grayscale-dark); @include font-size(16px, 24px);
font-family: var(--main-font-family); margin: 20px 0 61px 0;
font-size: 14px; padding: 0;
letter-spacing: 0; }
line-height: 20px;
margin: 20px 0 32px 0; @include breakpoint($xlarge) {
padding: 0 1rem; @include font-size(17px, 26px);
margin-bottom: 40px;
@include breakpoint($narrow) { }
font-size: 20px;
letter-spacing: -0.1;
line-height: 32px;
margin: 20px 0 61px 0;
padding: 0;
}
}
&__link { &__large {
display: flex; @include breakpoint($extrawide) {
justify-content: flex-end; @include font-size(17px, 26px);
margin-bottom: 12px;
margin-right: -6px;
} }
} }
} }
.hy-adjacent-image-text__text-container__link {
display: flex;
justify-content: flex-end;
margin-bottom: 12px;
margin-right: -6px;
}
.hy-adjacent-image-text::after { .hy-adjacent-image-text::after {
content: ''; content: '';
clear: both; clear: both;
......
src/components/adjacent-image-text/adjacent-image-text.tsx
+ 5
− 1
View file @ e70347eb
...@@ -57,7 +57,11 @@ export class AdjacentImageText implements ComponentInterface { ...@@ -57,7 +57,11 @@ export class AdjacentImageText implements ComponentInterface {
<div class={contentClassAttributes}> <div class={contentClassAttributes}>
<div class="hy-adjacent-image-text__text-container__info-wrapper"> <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__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>
<div class="hy-adjacent-image-text__text-container__links-wrapper"> <div class="hy-adjacent-image-text__text-container__links-wrapper">
{this.mainUrl && ( {this.mainUrl && (
......
src/components/hy-hero/hy-hero.scss
+ 7
− 9
View file @ e70347eb
...@@ -379,6 +379,7 @@ ...@@ -379,6 +379,7 @@
color: var(--grayscale-black); color: var(--grayscale-black);
@include breakpoint($extrawide) { @include breakpoint($extrawide) {
@include font-size(17px, 26px);
max-width: 34%; max-width: 34%;
} }
} }
...@@ -586,20 +587,16 @@ ...@@ -586,20 +587,16 @@
} }
} }
// TODO: Update this to use styles straight from DSLIB (Ingress).
.hy-hero__description { .hy-hero__description {
@include font-size(16px); @include font-size(15px, 22px);
color: var(--grayscale-black); color: var(--grayscale-black);
font-family: var(--main-font-family); font-family: var(--main-font-family);
font-weight: 600;
letter-spacing: -0.1px;
line-height: 22px;
margin: 0; margin: 0;
padding: 0; padding: 0;
position: relative; position: relative;
@include breakpoint($narrow) { @include breakpoint($narrow) {
line-height: 24px; @include font-size(16px, 24px);
} }
@include breakpoint($wide) { @include breakpoint($wide) {
...@@ -609,12 +606,13 @@ ...@@ -609,12 +606,13 @@
} }
@include breakpoint($extrawide) { @include breakpoint($extrawide) {
@include font-size(18px);
letter-spacing: -0.16px;
line-height: 26px;
max-width: 37%; max-width: 37%;
padding: 28px 20px 32px 0; padding: 28px 20px 32px 0;
} }
@include breakpoint($xlarge) {
@include font-size(17px, 26px);
}
} }
.hy-hero__actions { .hy-hero__actions {
......
src/components/hy-introduction/hy-introduction.scss
+ 6
− 6
View file @ e70347eb
...@@ -221,30 +221,30 @@ ...@@ -221,30 +221,30 @@
} }
&__description { &__description {
@include font-size(16px, 24px); @include font-size(15px, 22px);
@include font-weight($semibold); @include font-weight($regular);
color: var(--grayscale-black); color: var(--grayscale-black);
font-family: var(--main-font-family); font-family: var(--main-font-family);
letter-spacing: -0.1px;
margin-bottom: 28px; margin-bottom: 28px;
margin-top: 0;
@include breakpoint($narrow) { @include breakpoint($narrow) {
@include font-size(18px, 28px); @include font-size(16px, 24px);
} }
@include breakpoint($wide) { @include breakpoint($wide) {
@include font-size(18px, 28px);
margin-bottom: 32px; margin-bottom: 32px;
} }
@include breakpoint($extrawide) { @include breakpoint($extrawide) {
margin-bottom: 32px; margin-bottom: 32px;
} }
@include breakpoint($xlarge) { @include breakpoint($xlarge) {
@include font-size(17px, 26px);
margin-bottom: 40px; margin-bottom: 40px;
} }
&__large { &__large {
@include breakpoint($extrawide) { @include breakpoint($extrawide) {
@include font-size(17px, 26px);
margin-bottom: 40px; margin-bottom: 40px;
} }
} }
......
src/components/hy-introduction/hy-introduction.tsx
+ 1
− 1
View file @ e70347eb
...@@ -66,7 +66,7 @@ export class HyIntroduction { ...@@ -66,7 +66,7 @@ export class HyIntroduction {
> >
{this.textTitle} {this.textTitle}
</hy-heading> </hy-heading>
<div class={classDescription}>{this.textDescription}</div> <p class={classDescription}>{this.textDescription}</p>
{this.url && ( {this.url && (
<div class="hy-introduction__link__container"> <div class="hy-introduction__link__container">
<a class="hy-introduction__link" href={this.url} aria-label={this.scLabel} target={target}> <a class="hy-introduction__link" href={this.url} aria-label={this.scLabel} target={target}>
......
src/components/ingress/ingress.scss
+ 13
− 9
View file @ e70347eb
...@@ -3,25 +3,29 @@ ...@@ -3,25 +3,29 @@
} }
p.hy-ingress { p.hy-ingress {
color: var(--grayscale-dark); @include font-size(16px, 24px);
color: var(--grayscale-black);
font-family: var(--main-font-family); font-family: var(--main-font-family);
font-size: 20px; margin: 0 0 2rem;
letter-spacing: -0.1px;
line-height: 32px; @include breakpoint($narrow) {
margin: 0; @include font-size(18px, 28px);
margin-bottom: 2rem; }
@include breakpoint($wide) { @include breakpoint($wide) {
margin-bottom: 2.25rem; margin: 0 0 2.25rem;
} }
@include breakpoint($xlarge) { @include breakpoint($xlarge) {
margin-bottom: 3rem; @include font-size(18px, 32px);
margin: 0 0 3rem;
} }
// No sidebar, large desktop styles // No sidebar, large desktop styles
&__large { &__large {
@include breakpoint($extrawide) { @include breakpoint($extrawide) {
margin-bottom: 3rem; @include font-size(18px, 32px);
margin: 0 0 3rem;
} }
} }
} }
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