From 1224a68e83ae4b26c5d65af6718a28ea7e36b18e Mon Sep 17 00:00:00 2001 From: Gery Hirschfeld Date: Tue, 19 Mar 2024 09:46:16 +0100 Subject: [PATCH] fix compact migration and grid --- .changeset/unlucky-cameras-jam.md | 5 ++++ .../02-upgrade/upgrade-guide.v16.stories.mdx | 2 +- packages/css/src/core/grid.sass | 25 +++++++++++++++++++ packages/styles/bin/index.mjs | 3 +++ 4 files changed, 34 insertions(+), 1 deletion(-) create mode 100644 .changeset/unlucky-cameras-jam.md diff --git a/.changeset/unlucky-cameras-jam.md b/.changeset/unlucky-cameras-jam.md new file mode 100644 index 0000000000..d7a23152ac --- /dev/null +++ b/.changeset/unlucky-cameras-jam.md @@ -0,0 +1,5 @@ +--- +'@baloise/ds-core': patch +--- + +**styles**: add migration for compact theme and grid diff --git a/docs/stories/development/02-upgrade/upgrade-guide.v16.stories.mdx b/docs/stories/development/02-upgrade/upgrade-guide.v16.stories.mdx index ab7f9cac05..b1b714b3c6 100644 --- a/docs/stories/development/02-upgrade/upgrade-guide.v16.stories.mdx +++ b/docs/stories/development/02-upgrade/upgrade-guide.v16.stories.mdx @@ -281,7 +281,7 @@ package CLI. Here's how to proceed: 1. **Install Styles:** First we need to install the new styles package if yet not there. ```bash -npm add -D -E @baloise/ds-styles@16 +npm add -E @baloise/ds-styles@16 ``` 2. **Start CLI:**: Run the migration CLI to rename the changed CSS utility classes. The CLI updates the global stylesheet, component stylesheets, HTML files and Angular inline templates. diff --git a/packages/css/src/core/grid.sass b/packages/css/src/core/grid.sass index 0ac1f5bdc9..a4b395272d 100644 --- a/packages/css/src/core/grid.sass +++ b/packages/css/src/core/grid.sass @@ -1,71 +1,95 @@ @use "sass:math" +.grid, .columns flex-basis: 0 flex-grow: 1 flex-shrink: 1 +.col, .column display: block flex-basis: 0 flex-grow: 1 flex-shrink: 1 padding: var(--bal-column-gap) + .grid.is-mobile > &.is-narrow, .columns.is-mobile > &.is-narrow flex: none width: unset + .grid.is-mobile > &.is-full, .columns.is-mobile > &.is-full flex: none width: 100% + .grid.is-mobile > &.is-three-quarters, .columns.is-mobile > &.is-three-quarters flex: none width: 75% + .grid.is-mobile > &.is-two-thirds, .columns.is-mobile > &.is-two-thirds flex: none width: 66.6666% + .grid.is-mobile > &.is-half, .columns.is-mobile > &.is-half flex: none width: 50% + .grid.is-mobile > &.is-one-third, .columns.is-mobile > &.is-one-third flex: none width: 33.3333% + .grid.is-mobile > &.is-one-quarter, .columns.is-mobile > &.is-one-quarter flex: none width: 25% + .grid.is-mobile > &.is-one-fifth, .columns.is-mobile > &.is-one-fifth flex: none width: 20% + .grid.is-mobile > &.is-two-fifths, .columns.is-mobile > &.is-two-fifths flex: none width: 40% + .grid.is-mobile > &.is-three-fifths, .columns.is-mobile > &.is-three-fifths flex: none width: 60% + .grid.is-mobile > &.is-four-fifths, .columns.is-mobile > &.is-four-fifths flex: none width: 80% + .grid.is-mobile > &.is-offset-three-quarters, .columns.is-mobile > &.is-offset-three-quarters +ltr-property("margin", 75%, false) + .grid.is-mobile > &.is-offset-two-thirds, .columns.is-mobile > &.is-offset-two-thirds +ltr-property("margin", 66.6666%, false) + .grid.is-mobile > &.is-offset-half, .columns.is-mobile > &.is-offset-half +ltr-property("margin", 50%, false) + .grid.is-mobile > &.is-offset-one-third, .columns.is-mobile > &.is-offset-one-third +ltr-property("margin", 33.3333%, false) + .grid.is-mobile > &.is-offset-one-quarter, .columns.is-mobile > &.is-offset-one-quarter +ltr-property("margin", 25%, false) + .grid.is-mobile > &.is-offset-one-fifth, .columns.is-mobile > &.is-offset-one-fifth +ltr-property("margin", 20%, false) + .grid.is-mobile > &.is-offset-two-fifths, .columns.is-mobile > &.is-offset-two-fifths +ltr-property("margin", 40%, false) + .grid.is-mobile > &.is-offset-three-fifths, .columns.is-mobile > &.is-offset-three-fifths +ltr-property("margin", 60%, false) + .grid.is-mobile > &.is-offset-four-fifths, .columns.is-mobile > &.is-offset-four-fifths +ltr-property("margin", 80%, false) @for $i from 0 through 12 + .grid.is-mobile > &.is-#{$i}, .columns.is-mobile > &.is-#{$i} flex: none width: percentage(math.div($i,12)) + .grid.is-mobile > &.is-offset-#{$i}, .columns.is-mobile > &.is-offset-#{$i} +ltr-property("margin", percentage(math.div($i,12)), false) +mobile @@ -439,6 +463,7 @@ &.is-offset-#{$i}-fullhd +ltr-property("margin", percentage(math.div($i,12)), false) +.grid, .columns +ltr-property("margin", (calc(var(--bal-column-gap) * -1)), false) +ltr-property("margin", (calc(var(--bal-column-gap) * -1))) diff --git a/packages/styles/bin/index.mjs b/packages/styles/bin/index.mjs index 136ec446ad..7088f80699 100755 --- a/packages/styles/bin/index.mjs +++ b/packages/styles/bin/index.mjs @@ -271,6 +271,8 @@ async function migrateGlobalStyleSheet({ globalStyleSheetPath, log }) { new RegExp(`@baloise/(ds-css|design-system-css)/(sass|css)/radius`, 'g'), new RegExp(`@baloise/(ds-css|design-system-css)/(sass|css)/opacity`, 'g'), new RegExp(`@baloise/(ds-css|design-system-css)/(sass|css)/shadow`, 'g'), + + new RegExp(`@baloise/(ds-css|design-system-css)/(sass|css)/theme-compact`, 'g'), ], to: [ '@baloise/ds-styles/sass/all', @@ -293,6 +295,7 @@ async function migrateGlobalStyleSheet({ globalStyleSheetPath, log }) { '@baloise/ds-styles/css/utilities/border', '@baloise/ds-styles/css/utilities/elevation', '@baloise/ds-styles/css/utilities/elevation', + '@baloise/ds-styles/css/themes/compact', ], allowEmptyPaths: true, })