Skip to content
Snippets Groups Projects
Commit ba95d01d authored by katja's avatar katja
Browse files

Merge branch 'development' 

merging dev into master
parents 7cb88a21 e70347eb
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 @ ba95d01d
......@@ -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 @ ba95d01d
......@@ -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 && (
......
src/components/hy-hero/hy-hero.scss
+ 7
− 9
View file @ ba95d01d
......@@ -379,6 +379,7 @@
color: var(--grayscale-black);
@include breakpoint($extrawide) {
@include font-size(17px, 26px);
max-width: 34%;
}
}
......@@ -586,20 +587,16 @@
}
}
// TODO: Update this to use styles straight from DSLIB (Ingress).
.hy-hero__description {
@include font-size(16px);
@include font-size(15px, 22px);
color: var(--grayscale-black);
font-family: var(--main-font-family);
font-weight: 600;
letter-spacing: -0.1px;
line-height: 22px;
margin: 0;
padding: 0;
position: relative;
@include breakpoint($narrow) {
line-height: 24px;
@include font-size(16px, 24px);
}
@include breakpoint($wide) {
......@@ -609,12 +606,13 @@
}
@include breakpoint($extrawide) {
@include font-size(18px);
letter-spacing: -0.16px;
line-height: 26px;
max-width: 37%;
padding: 28px 20px 32px 0;
}
@include breakpoint($xlarge) {
@include font-size(17px, 26px);
}
}
.hy-hero__actions {
......
src/components/hy-introduction/hy-introduction.scss
+ 6
− 6
View file @ ba95d01d
......@@ -221,30 +221,30 @@
}
&__description {
@include font-size(16px, 24px);
@include font-weight($semibold);
@include font-size(15px, 22px);
@include font-weight($regular);
color: var(--grayscale-black);
font-family: var(--main-font-family);
letter-spacing: -0.1px;
margin-bottom: 28px;
margin-top: 0;
@include breakpoint($narrow) {
@include font-size(18px, 28px);
@include font-size(16px, 24px);
}
@include breakpoint($wide) {
@include font-size(18px, 28px);
margin-bottom: 32px;
}
@include breakpoint($extrawide) {
margin-bottom: 32px;
}
@include breakpoint($xlarge) {
@include font-size(17px, 26px);
margin-bottom: 40px;
}
&__large {
@include breakpoint($extrawide) {
@include font-size(17px, 26px);
margin-bottom: 40px;
}
}
......
src/components/hy-introduction/hy-introduction.tsx
+ 1
− 1
View file @ ba95d01d
......@@ -66,7 +66,7 @@ export class HyIntroduction {
>
{this.textTitle}
</hy-heading>
<div class={classDescription}>{this.textDescription}</div>
<p class={classDescription}>{this.textDescription}</p>
{this.url && (
<div class="hy-introduction__link__container">
<a class="hy-introduction__link" href={this.url} aria-label={this.scLabel} target={target}>
......
src/components/ingress/ingress.scss
+ 13
− 9
View file @ ba95d01d
......@@ -3,25 +3,29 @@
}
p.hy-ingress {
color: var(--grayscale-dark);
@include font-size(16px, 24px);
color: var(--grayscale-black);
font-family: var(--main-font-family);
font-size: 20px;
letter-spacing: -0.1px;
line-height: 32px;
margin: 0;
margin-bottom: 2rem;
margin: 0 0 2rem;
@include breakpoint($narrow) {
@include font-size(18px, 28px);
}
@include breakpoint($wide) {
margin-bottom: 2.25rem;
margin: 0 0 2.25rem;
}
@include breakpoint($xlarge) {
margin-bottom: 3rem;
@include font-size(18px, 32px);
margin: 0 0 3rem;
}
// No sidebar, large desktop styles
&__large {
@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