diff --git a/.changeset/kind-papayas-provide.md b/.changeset/kind-papayas-provide.md new file mode 100644 index 0000000000..e9655a9436 --- /dev/null +++ b/.changeset/kind-papayas-provide.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-styles': major +--- + +Removed the following placeholders: `%list-adjustment`, `%module-container`, `%default-module-spacer`, `%text-container`. diff --git a/packages/styles/src/placeholders/_text.scss b/packages/styles/src/placeholders/_text.scss index c222746da6..75243af932 100644 --- a/packages/styles/src/placeholders/_text.scss +++ b/packages/styles/src/placeholders/_text.scss @@ -1,38 +1,7 @@ -@use 'sass:map'; -@use './../themes/bootstrap/core' as *; -@use './../variables/spacing'; @use './../variables/type'; -@use './../variables/color'; -@use './../mixins/size' as size-mx; @use './../mixins/type' as type-mx; @use './../variables/components/paragraph'; -%list-adjustment { - ul { - position: relative; - margin-top: paragraph.$text-bottom-space; - margin-bottom: paragraph.$text-bottom-space; - padding-left: map.get(spacing.$post-sizes, 'big'); - list-style: none; - text-align: left; - - li { - margin-bottom: paragraph.$text-bottom-space * 0.5; - - &::before { - content: '\2013'; - display: inline-block; - position: absolute; - left: 0; - } - - &:last-child { - margin-bottom: 0; - } - } - } -} - @each $key, $value in type.$font-curves { %font-curve-#{$key} { @include type-mx.font-curve($key); @@ -42,114 +11,3 @@ %text-bottom-spacer { margin-bottom: paragraph.$text-bottom-space; // 0.8 times the size of the current font (20px) = 16px } - -// Removes margin-top from first and margin-bottom from last child -%module-container { - > :first-child { - margin-top: 0; - } - - > :last-child { - margin-bottom: 0; - } -} - -%default-module-spacer { - margin-top: map.get(spacing.$post-sizes, 'huge'); // 56px - margin-bottom: map.get(spacing.$post-sizes, 'huge'); // 56px - - @include media-breakpoint-up(md) { - margin-top: map.get(spacing.$post-sizes, 'giant'); // 80px - margin-bottom: map.get(spacing.$post-sizes, 'giant'); // 80px - } -} - -%text-container { - @extend %module-container; - - ul { - position: relative; - margin-top: paragraph.$text-bottom-space; - margin-bottom: paragraph.$text-bottom-space; - padding-left: map.get(spacing.$post-sizes, 'big'); - list-style: none; - - li { - @extend %font-curve-regular; - @extend %text-bottom-spacer; - - &::before { - content: '\2013'; - display: inline-block; - position: absolute; - left: 0; - } - - &:last-child { - margin-bottom: 0; - } - } - - &.bulletpoints { - padding-left: map.get(spacing.$post-sizes, 'big'); - - @include media-breakpoint-up(md) { - padding-left: map.get(spacing.$post-sizes, 'bigger-big'); - } - - li { - position: relative; - - // stylelint-disable-next-line max-nesting-depth - &::before { - content: ''; - position: absolute; - top: 2px; - left: -(map.get(spacing.$post-sizes, 'big')); - width: map.get(spacing.$post-sizes, 'small-large'); - height: map.get(spacing.$post-sizes, 'small-large'); - border-radius: 50%; - - @include media-breakpoint-up(md) { - left: -(map.get(spacing.$post-sizes, 'bigger-big')); - width: map.get(spacing.$post-sizes, 'large'); - height: map.get(spacing.$post-sizes, 'large'); - } - } - } - } - } - - ol { - position: relative; - margin-top: paragraph.$text-bottom-space; - margin-bottom: paragraph.$text-bottom-space; - padding-left: map.get(spacing.$post-sizes, 'big'); - list-style: none; - counter-reset: li-counter; - - li { - counter-increment: li-counter; - - &::before { - content: counter(li-counter) '.'; - position: absolute; - left: 0; - } - } - } - - .h-highlighted { - @extend %font-curve-regular; - @extend %text-bottom-spacer; - @include size-mx.bezel-regular; - background-color: rgba(map.get(color.$background-colors, 'nightblue-bright'), 0.1); - - @include media-breakpoint-up(lg) { - @include size-mx.bezel-medium; - } - @include media-breakpoint-up(xxl) { - @include size-mx.bezel-large; - } - } -} diff --git a/packages/styles/tests/placeholders/index.test.scss b/packages/styles/tests/placeholders/index.test.scss index c5660e8a7c..d252766e0a 100644 --- a/packages/styles/tests/placeholders/index.test.scss +++ b/packages/styles/tests/placeholders/index.test.scss @@ -3,7 +3,3 @@ .toggler-icon { @extend %toggler-icon; } - -.list-adjustment { - @extend %list-adjustment; -} diff --git a/packages/styles/tests/placeholders/text.test.scss b/packages/styles/tests/placeholders/text.test.scss index 9c0dbab3a0..21ef8211a7 100644 --- a/packages/styles/tests/placeholders/text.test.scss +++ b/packages/styles/tests/placeholders/text.test.scss @@ -1,8 +1,6 @@ @use 'src/placeholders/text'; .list-adjustment { - @extend %list-adjustment; - @extend %module-container; @extend %font-curve-tiny; @extend %font-curve-small; @extend %font-curve-regular; @@ -11,9 +9,4 @@ @extend %font-curve-large; @extend %font-curve-big; @extend %text-bottom-spacer; - @extend %default-module-spacer; -} - -.text-container { - @extend %text-container; }