From ba69c0c3105a89340e206b78c70aecf1faa86800 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Helle=20Hiorth-Sch=C3=B8yen?= Date: Tue, 11 May 2021 10:11:35 +0200 Subject: [PATCH 1/2] use correct naming syntaxt on block classes --- .../full-page-example/Full-page-example.md | 16 ++--- src/shared/guidelines/Spacing.md | 26 +++---- src/shared/layout/block/Block.md | 6 +- src/shared/layout/block/block.css | 68 +++++++++++++++++++ 4 files changed, 92 insertions(+), 24 deletions(-) diff --git a/src/shared/commonCombos/full-page-example/Full-page-example.md b/src/shared/commonCombos/full-page-example/Full-page-example.md index bbb1963f4..3bf88d3e7 100644 --- a/src/shared/commonCombos/full-page-example/Full-page-example.md +++ b/src/shared/commonCombos/full-page-example/Full-page-example.md @@ -25,7 +25,7 @@
-
+
Home @@ -48,23 +48,23 @@ Current content
-
+

H1 Heading

-
+

H2 Heading

-
+
Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
-
+

H3 Heading

Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
-
+
-
+

H2 Heading

-
+
-
+

Block with responsive spacing top and bottom margins

-
+

Block with responsive spacing top and bottom margins

-
+

Block with responsive spacing top and bottom margins

diff --git a/src/shared/layout/block/block.css b/src/shared/layout/block/block.css index fc9269f31..c59d4d74d 100644 --- a/src/shared/layout/block/block.css +++ b/src/shared/layout/block/block.css @@ -51,6 +51,39 @@ /* Use these responsive classes for spacing in mobile and desktop */ + &--mt-small-1-responsive { margin-top: var(--hw-spacing-small-1); } + &--mt-small-2-responsive { margin-top: var(--hw-spacing-small-2); } + &--mt-small-3-responsive { margin-top: var(--hw-spacing-small-3); } + &--mt-small-4-responsive { margin-top: var(--hw-spacing-small-4); } + + &--mb-small-1-responsive { margin-bottom: var(--hw-spacing-small-1); } + &--mb-small-2-responsive { margin-bottom: var(--hw-spacing-small-2); } + &--mb-small-3-responsive { margin-bottom: var(--hw-spacing-small-3); } + &--mb-small-4-responsive { margin-bottom: var(--hw-spacing-small-4); } + + &--mt-medium-1-responsive { margin-top: var(--hw-spacing-medium-1); } + &--mt-medium-2-responsive { margin-top: var(--hw-spacing-medium-2); } + &--mt-medium-3-responsive { margin-top: var(--hw-spacing-medium-3); } + &--mt-medium-4-responsive { margin-top: var(--hw-spacing-medium-4); } + + &--mb-medium-1-responsive { margin-bottom: var(--hw-spacing-medium-1); } + &--mb-medium-2-responsive { margin-bottom: var(--hw-spacing-medium-2); } + &--mb-medium-3-responsive { margin-bottom: var(--hw-spacing-medium-3); } + &--mb-medium-4-responsive { margin-bottom: var(--hw-spacing-medium-4); } + + &--mt-large-1-responsive { margin-top: var(--hw-spacing-large-1); } + &--mt-large-2-responsive { margin-top: var(--hw-spacing-large-2); } + &--mt-large-3-responsive { margin-top: var(--hw-spacing-large-3); } + &--mt-large-4-responsive { margin-top: var(--hw-spacing-large-4); } + &--mt-large-5-responsive { margin-top: var(--hw-spacing-large-5); } + + &--mb-large-1-responsive { margin-bottom: var(--hw-spacing-large-1); } + &--mb-large-2-responsive { margin-bottom: var(--hw-spacing-large-2); } + &--mb-large-3-responsive { margin-bottom: var(--hw-spacing-large-3); } + &--mb-large-4-responsive { margin-bottom: var(--hw-spacing-large-4); } + &--mb-large-5-responsive { margin-bottom: var(--hw-spacing-large-5); } + + /************ Deprecated, should be removed by May 20th 2021 */ &--mt-small-1--responsive { margin-top: var(--hw-spacing-small-1); } &--mt-small-2--responsive { margin-top: var(--hw-spacing-small-2); } &--mt-small-3--responsive { margin-top: var(--hw-spacing-small-3); } @@ -83,6 +116,8 @@ &--mb-large-4--responsive { margin-bottom: var(--hw-spacing-large-4); } &--mb-large-5--responsive { margin-bottom: var(--hw-spacing-large-5); } + /*********************************************************************/ + /******** Padding ********/ &--py { @@ -144,6 +179,37 @@ * Modifiers: padding and padding variations */ + &--mt-small-2-responsive { margin-top: var(--hw-spacing-small-1); } + &--mt-small-3-responsive { margin-top: var(--hw-spacing-small-2); } + &--mt-small-4-responsive { margin-top: var(--hw-spacing-small-3); } + + &--mb-small-2-responsive { margin-bottom: var(--hw-spacing-small-1); } + &--mb-small-3-responsive { margin-bottom: var(--hw-spacing-small-2); } + &--mb-small-4-responsive { margin-bottom: var(--hw-spacing-small-3); } + + &--mt-medium-1-responsive { margin-top: var(--hw-spacing-small-4); } + &--mt-medium-2-responsive { margin-top: var(--hw-spacing-medium-1); } + &--mt-medium-3-responsive { margin-top: var(--hw-spacing-medium-2); } + &--mt-medium-4-responsive { margin-top: var(--hw-spacing-medium-3); } + + &--mb-medium-1-responsive { margin-bottom: var(--hw-spacing-small-4); } + &--mb-medium-2-responsive { margin-bottom: var(--hw-spacing-medium-1); } + &--mb-medium-3-responsive { margin-bottom: var(--hw-spacing-medium-2); } + &--mb-medium-4-responsive { margin-bottom: var(--hw-spacing-medium-3); } + + &--mt-large-1-responsive { margin-top: var(--hw-spacing-medium-4); } + &--mt-large-2-responsive { margin-top: var(--hw-spacing-large-1); } + &--mt-large-3-responsive { margin-top: var(--hw-spacing-large-2); } + &--mt-large-4-responsive { margin-top: var(--hw-spacing-large-3); } + &--mt-large-5-responsive { margin-top: var(--hw-spacing-large-4); } + + &--mb-large-1-responsive { margin-bottom: var(--hw-spacing-medium-4); } + &--mb-large-2-responsive { margin-bottom: var(--hw-spacing-large-1); } + &--mb-large-3-responsive { margin-bottom: var(--hw-spacing-large-2); } + &--mb-large-4-responsive { margin-bottom: var(--hw-spacing-large-3); } + &--mb-large-5-responsive { margin-bottom: var(--hw-spacing-large-4); } + + /* Deprecated, these classes should be deleted before May 20th 2021 */ &--mt-small-2--responsive { margin-top: var(--hw-spacing-small-1); } &--mt-small-3--responsive { margin-top: var(--hw-spacing-small-2); } &--mt-small-4--responsive { margin-top: var(--hw-spacing-small-3); } @@ -173,6 +239,8 @@ &--mb-large-3--responsive { margin-bottom: var(--hw-spacing-large-2); } &--mb-large-4--responsive { margin-bottom: var(--hw-spacing-large-3); } &--mb-large-5--responsive { margin-bottom: var(--hw-spacing-large-4); } + + /*******************************************************/ &--py-responsive { padding-top: var(--hw-spacing-medium-2); From 16dbe7fb89ad0cc0c910649ffb527bd60aa57bee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Helle=20Hiorth-Sch=C3=B8yen?= Date: Tue, 11 May 2021 10:29:29 +0200 Subject: [PATCH 2/2] removed obsolete doc --- src/shared/guidelines/Spacing.md | 21 +-------------------- 1 file changed, 1 insertion(+), 20 deletions(-) diff --git a/src/shared/guidelines/Spacing.md b/src/shared/guidelines/Spacing.md index 47edd2ea0..2240a8f08 100644 --- a/src/shared/guidelines/Spacing.md +++ b/src/shared/guidelines/Spacing.md @@ -43,26 +43,7 @@ noSource: true --hw-spacing-large-5: 160px; ``` ## Responsive spacing -For desktop the value is same as above and its one level down for mobile devices - - -```code - --hw-spacing-small-1-responsive: 4px; - --hw-spacing-small-2-responsive: 8px; - --hw-spacing-small-3-responsive: 12px; - --hw-spacing-small-4-responsive: 16px; - --hw-spacing-medium-1-responsive: 20px; - --hw-spacing-medium-2-responsive: 24px; - --hw-spacing-medium-3-responsive: 32px; - --hw-spacing-medium-4-responsive: 40px; - --hw-spacing-large-1-responsive: 48px; - --hw-spacing-large-2-responsive: 64px; - --hw-spacing-large-3-responsive: 80px; - --hw-spacing-large-4-responsive: 120px; - --hw-spacing-large-5-responsive: 160px; -``` - - +The value should be same as above but one level down for mobile devices. # Design guidelines