From 51f1bd5578da4293d245f6d1754a1ad00b571f94 Mon Sep 17 00:00:00 2001
From: shamalainen <sebastian@hamse.fi>
Date: Tue, 2 Feb 2021 15:33:27 +0200
Subject: [PATCH] Update accordion hy-two-columns vertical paddings
---
.../accordion-item/accordion-item.scss | 10 ++++--
.../hy-two-columns/hy-two-columns.scss | 32 ++++++++++++-------
.../hy-two-columns/hy-two-columns.tsx | 4 +--
.../test/hy-two-columns.spec.tsx | 4 +--
.../paragraph-text/paragraph-text.scss | 4 +++
5 files changed, 36 insertions(+), 18 deletions(-)
diff --git a/src/components/accordion-item/accordion-item.scss b/src/components/accordion-item/accordion-item.scss
index cedea9e2..217d1f30 100644
--- a/src/components/accordion-item/accordion-item.scss
+++ b/src/components/accordion-item/accordion-item.scss
@@ -202,9 +202,15 @@
display: block;
}
- hy-box {
+ > hy-box {
+ padding: 20px 16px 0;
+
@include breakpoint($narrow) {
- padding: 0 2rem;
+ padding: 20px 24px 0;
+ }
+
+ @include breakpoint($extrawide) {
+ padding: 24px 32px 0;
}
}
}
diff --git a/src/components/hy-two-columns/hy-two-columns.scss b/src/components/hy-two-columns/hy-two-columns.scss
index 532c5659..616ce3ef 100644
--- a/src/components/hy-two-columns/hy-two-columns.scss
+++ b/src/components/hy-two-columns/hy-two-columns.scss
@@ -29,18 +29,35 @@
flex-direction: row-reverse;
}
- .hy-two-columns--side {
+ .hy-two-columns__item--side {
margin-left: 0;
margin-right: 0;
@include breakpoint($narrow) {
margin-right: 5.79%;
}
+
@include breakpoint($wide) {
margin-right: 8.5%;
}
}
}
+}
+
+.hy-two-columns__item {
+ width: 100%;
+
+ [slot='main'] {
+ width: 100%;
+
+ .hy-paragraph-text {
+ width: 100% !important;
+ }
+ }
+
+ [slot='side'] {
+ width: 100%;
+ }
&--main {
display: flex;
@@ -50,16 +67,10 @@
@include breakpoint($narrow) {
flex-basis: 67.01%;
}
+
@include breakpoint($wide) {
flex-basis: 63%;
}
-
- [slot='main'] {
- width: 100%;
- .hy-paragraph-text {
- width: 100% !important;
- }
- }
}
&--side {
@@ -75,16 +86,13 @@
flex-basis: 32.99%; // sidebar width is always 4.5 column of the global 12-col content area grid.
margin-left: 5.79%; // (half of the column+gutter) of global 12-col grid = gap between main and sidebar
}
+
@include breakpoint($wide) {
flex-basis: 37%;
margin-left: 8.5%; // (1 column + gutter) of global 12-col grid = gap between main and sidebar
padding: 0;
}
- [slot='side'] {
- width: 100%;
- }
-
// Key figure block inside Sidebar
hy-key-figure {
padding: 0 10.67%;
diff --git a/src/components/hy-two-columns/hy-two-columns.tsx b/src/components/hy-two-columns/hy-two-columns.tsx
index 850ac891..2d7c3586 100644
--- a/src/components/hy-two-columns/hy-two-columns.tsx
+++ b/src/components/hy-two-columns/hy-two-columns.tsx
@@ -14,10 +14,10 @@ export class HyTwoColumns {
return (
<Host>
<div class={classAttributes}>
- <div class="hy-two-columns--main">
+ <div class="hy-two-columns__item hy-two-columns__item--main">
<slot name="main"></slot>
</div>
- <div class="hy-two-columns--side">
+ <div class="hy-two-columns__item hy-two-columns__item--side">
<slot name="side"></slot>
</div>
</div>
diff --git a/src/components/hy-two-columns/test/hy-two-columns.spec.tsx b/src/components/hy-two-columns/test/hy-two-columns.spec.tsx
index 9f22b323..c618870c 100644
--- a/src/components/hy-two-columns/test/hy-two-columns.spec.tsx
+++ b/src/components/hy-two-columns/test/hy-two-columns.spec.tsx
@@ -14,10 +14,10 @@ describe('hy-two-columns', () => {
expect(page.root).toEqualHtml(`
<hy-two-columns>
<div class="hy-two-columns">
- <div class="hy-two-columns--main">
+ <div class="hy-two-columns__item hy-two-columns__item--main">
<div slot="main"></div>
</div>
- <div class="hy-two-columns--side">
+ <div class="hy-two-columns__item hy-two-columns__item--side">
<div slot="side"></div>
</div>
</div>
diff --git a/src/components/paragraph-text/paragraph-text.scss b/src/components/paragraph-text/paragraph-text.scss
index c26d1ac7..2c20ce50 100644
--- a/src/components/paragraph-text/paragraph-text.scss
+++ b/src/components/paragraph-text/paragraph-text.scss
@@ -65,5 +65,9 @@
p {
margin-top: 0;
padding-top: 0;
+
+ &:last-of-type {
+ margin-bottom: 0;
+ }
}
}
--
GitLab