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

style fixes

parent 9d4fcfb3
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/components/link-box-list/link-box-list.scss
+ 4
− 48
View file @ 55903148
......@@ -3,7 +3,9 @@
}
.hy-link-box-list {
display: block;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
margin-right: auto;
margin-left: auto;
......@@ -12,55 +14,9 @@
@include breakpoint($medium) {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: left;
max-width: 100%;
margin: 0 calc(#{var(--gutter-medium)} * -0.5);
}
@include breakpoint($wide) {
margin: 0 calc(#{var(--gutter-wide)} * -0.5);
}
@include breakpoint($extrawide) {
margin: 0 calc(#{var(--gutter-extrawide)} * -0.5);
}
// 3 linkboxes in a row
.big {
@include breakpoint($medium) {
flex-grow: 1;
max-width: calc(((100% - #{var(--gutter-medium)} * 11) / 12) * 4 + #{var(--gutter-medium)} * 3);
padding: 0 calc(#{var(--gutter-medium)} * 0.5);
width: calc(((100% - #{var(--gutter-medium)} * 11) / 12) * 4 + #{var(--gutter-medium)} * 3);
}
@include breakpoint($wide) {
max-width: calc(((100% - #{var(--gutter-wide)} * 11) / 12) * 4 + #{var(--gutter-wide)} * 3);
padding: 0 calc(#{var(--gutter-wide)} * 0.5);
width: calc(((100% - #{var(--gutter-wide)} * 11) / 12) * 4 + #{var(--gutter-wide)} * 3);
}
@include breakpoint($extrawide) {
max-width: calc(((100% - #{var(--gutter-extrawide)} * 11) / 12) * 4 + #{var(--gutter-extrawide)} * 3);
padding: 0 calc(#{var(--gutter-extrawide)} * 0.5);
width: calc(((100% - #{var(--gutter-extrawide)} * 11) / 12) * 4 + #{var(--gutter-extrawide)} * 3);
}
}
// 4 linkboxes in a row
.small {
@include breakpoint($medium) {
flex-grow: 1;
max-width: calc(((100% - #{var(--gutter-medium)} * 11) / 12) * 6 + #{var(--gutter-medium)} * 5);
padding: 0 calc(#{var(--gutter-medium)} * 0.5);
width: calc(((100% - #{var(--gutter-medium)} * 11) / 12) * 6 + #{var(--gutter-medium)} * 5);
}
@include breakpoint($wide) {
max-width: calc(((100% - #{var(--gutter-wide)} * 11) / 12) * 3 + #{var(--gutter-wide)} * 2);
padding: 0 calc(#{var(--gutter-wide)} * 0.5);
width: calc(((100% - #{var(--gutter-wide)} * 11) / 12) * 3 + #{var(--gutter-wide)} * 2);
}
@include breakpoint($extrawide) {
max-width: calc(((100% - #{var(--gutter-extrawide)} * 11) / 12) * 3 + #{var(--gutter-extrawide)} * 2);
padding: 0 calc(#{var(--gutter-extrawide)} * 0.5);
width: calc(((100% - #{var(--gutter-extrawide)} * 11) / 12) * 3 + #{var(--gutter-extrawide)} * 2);
}
}
}
src/components/link-box-list/link-box-list.tsx
+ 1
− 2
View file @ 55903148
......@@ -57,8 +57,7 @@ export class LinkBoxList implements ComponentInterface {
- 8 items: small
- 9 items: big
* */
const classItem =
this.variant == LinkBoxVariants.landingPage ? 'big' : this.getBoxClassName(this._dataItems.length);
const classItem = this.getBoxClassName(this._dataItems.length);
const classItemAttributes = [this.variant, classItem].join(' ');
return (
......
src/components/link-box/link-box.scss
+ 92
− 25
View file @ 55903148
:host {
display: block;
}
.hy-link-box {
background: var(--grayscale-background-box);
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
margin-bottom: 32px;
margin-right: 0;
position: relative;
text-decoration: none;
@include breakpoint($medium) {
display: flex;
flex-direction: column;
justify-content: center;
margin-right: var(--gutter-medium);
}
@include breakpoint($wide) {
margin-right: var(--gutter-wide);
}
@include breakpoint($extrawide) {
margin-right: var(--gutter-extrawide);
}
.hy-link-box__link {
bottom: 12px;
position: absolute;
right: -6px;
}
article {
position: relative;
width: 100%;
}
}
:host(.big) {
@include breakpoint($medium) {
flex-grow: 1;
max-width: calc(((100% - #{var(--gutter-medium)} * 11) / 12) * 4 + #{var(--gutter-medium)} * 3);
width: calc(((100% - #{var(--gutter-medium)} * 11) / 12) * 4 + #{var(--gutter-medium)} * 3);
}
@include breakpoint($wide) {
max-width: calc(((100% - #{var(--gutter-wide)} * 11) / 12) * 4 + #{var(--gutter-wide)} * 3);
width: calc(((100% - #{var(--gutter-wide)} * 11) / 12) * 4 + #{var(--gutter-wide)} * 3);
}
@include breakpoint($extrawide) {
max-width: calc(((100% - #{var(--gutter-extrawide)} * 11) / 12) * 4 + #{var(--gutter-extrawide)} * 3);
width: calc(((100% - #{var(--gutter-extrawide)} * 11) / 12) * 4 + #{var(--gutter-extrawide)} * 3);
}
}
:host(.small) {
@include breakpoint($medium) {
flex-grow: 1;
max-width: calc(((100% - #{var(--gutter-medium)} * 11) / 12) * 6 + #{var(--gutter-medium)} * 5);
width: calc(((100% - #{var(--gutter-medium)} * 11) / 12) * 6 + #{var(--gutter-medium)} * 5);
}
@include breakpoint($wide) {
max-width: calc(((100% - #{var(--gutter-wide)} * 11) / 12) * 3 + #{var(--gutter-wide)} * 2);
width: calc(((100% - #{var(--gutter-wide)} * 11) / 12) * 3 + #{var(--gutter-wide)} * 2);
}
@include breakpoint($extrawide) {
max-width: calc(((100% - #{var(--gutter-extrawide)} * 11) / 12) * 3 + #{var(--gutter-extrawide)} * 2);
width: calc(((100% - #{var(--gutter-extrawide)} * 11) / 12) * 3 + #{var(--gutter-extrawide)} * 2);
}
}
:host(.big:nth-of-type(3n + 0)) {
margin-right: 0;
}
:host(.small:nth-of-type(2n + 0)) {
@include breakpoint($medium) {
margin-right: 0;
}
@include breakpoint($wide) {
margin-right: var(--gutter-wide);
}
@include breakpoint($extrawide) {
margin-right: var(--gutter-extrawide);
}
}
:host(.small:nth-of-type(4n + 0)) {
@include breakpoint($medium) {
margin-right: 0;
}
}
:host(:last-of-type) {
margin-right: 0;
}
.hy-link-box {
text-decoration: none;
@include breakpoint($medium) {
}
@include breakpoint($wide) {
text-align: left;
}
......@@ -52,6 +120,9 @@
// placed in Landing pages
.hy-link-box.landing {
.hy-link-box__text-container {
margin-bottom: 68px;
padding: 0 16px;
@include breakpoint($medium) {
padding: 0 16px;
}
......@@ -70,13 +141,6 @@
font-family: var(--main-font-family);
@include font-size(20px, 32px);
letter-spacing: -0.1px;
margin-bottom: 8px;
}
&__link {
display: flex;
justify-content: flex-end;
margin-bottom: 12px;
margin-right: -22px;
}
}
}
......@@ -84,6 +148,9 @@
// placed in Content pages
.hy-link-box.content {
.hy-link-box__text-container {
margin-bottom: 68px;
padding: 0 12px;
@include breakpoint($medium) {
padding: 0 12px;
}
......@@ -102,13 +169,13 @@
font-family: var(--main-font-family);
@include font-size(14px, 20px);
letter-spacing: -0.2px;
margin-bottom: 8px;
}
&__link {
display: flex;
justify-content: flex-end;
margin-bottom: 12px;
margin-right: -18px;
}
}
.hy-link-box__link {
display: flex;
justify-content: flex-end;
margin-bottom: 12px;
margin-right: -18px;
}
}
src/components/link-box/link-box.tsx
+ 6
− 6
View file @ 55903148
......@@ -30,7 +30,7 @@ export class LinkBox implements ComponentInterface {
'--aspectRatio': `${aspect}%` as 'aspectRatio'
};
return (
return [
<article>
<a class={classAttributes} href={this.url} target={target}>
<div class="hy-link-box__image-container" style={aspectRatio}>
......@@ -39,12 +39,12 @@ export class LinkBox implements ComponentInterface {
<div class={classTextContainer}>
<h3 class="hy-link-box__text-container__title">{this.textTitle}</h3>
{this.textDescription && <div class="hy-link-box__text-container__description">{this.textDescription}</div>}
<div class="hy-link-box__text-container__link">
<hy-cta-link url={this.url} />
</div>
</div>
</a>
</article>
);
</article>,
<div class="hy-link-box__link">
<hy-cta-link url={this.url} />
</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