From 8a46e2dde08c8af54f3fda1fafaf27aed76724c6 Mon Sep 17 00:00:00 2001 From: norddinh Date: Thu, 5 Dec 2024 16:28:21 +0100 Subject: [PATCH] update autolayout rules + pagination style --- .../framework/src/components/_autolayout.scss | 50 +++++++++++++++---- .../framework/src/components/_pagination.scss | 3 +- .../styles/framework/src/elements/_radio.scss | 3 +- .../styles/framework/src/elements/_tag.scss | 18 +------ .../framework/src/utilities/_mixins.scss | 4 +- packages/styles/scripts/autolayout.ts | 14 ++++-- 6 files changed, 54 insertions(+), 38 deletions(-) diff --git a/packages/styles/framework/src/components/_autolayout.scss b/packages/styles/framework/src/components/_autolayout.scss index ca1f18b7..340314dc 100644 --- a/packages/styles/framework/src/components/_autolayout.scss +++ b/packages/styles/framework/src/components/_autolayout.scss @@ -1,5 +1,8 @@ body:not(.is-tight) { - .accordions:not(:last-child) { + .accordion:not(:last-child) { + margin-bottom: 24px; + } + .buttons:not(:last-child) { margin-bottom: 24px; } .card:not(:last-child) { @@ -68,7 +71,10 @@ body:not(.is-tight) { .progress-radial:not(:last-child) { margin-bottom: 8px; } - .radio:not(:last-child) { + .radios:not(:last-child) { + margin-bottom: 12px; + } + :not(.radios) >.radios:not(:last-child) { margin-bottom: 12px; } .checkbox:not(:last-child) { @@ -77,10 +83,16 @@ body:not(.is-tight) { .switch:not(:last-child) { margin-bottom: 12px; } - .radio-tile:not(:last-child) { + .radio-tiles:not(:last-child) { + margin-bottom: 24px; + } + :not(.radio-tiles) > .radio-tile:not(:last-child) { + margin-bottom: 24px; + } + .checkbox-tiles:not(:last-child) { margin-bottom: 24px; } - .checkbox-tile:not(:last-child) { + :not(.checkbox-tiles) > .checkbox-tile:not(:last-child) { margin-bottom: 24px; } .field:not(:last-child) { @@ -104,7 +116,10 @@ body:not(.is-tight) { .sticker:not(:last-child) { margin-bottom: 8px; } - .tag:not(:last-child) { + .tags:not(:last-child) { + margin-bottom: 16px; + } + :not(.tags) > .tag:not(:last-child) { margin-bottom: 8px; } .title.is-level-1:not(:last-child) { @@ -153,7 +168,10 @@ body:not(.is-tight) { @include mobile() { body:not(.is-tight) { - .accordions:not(:last-child) { + .accordion:not(:last-child) { + margin-bottom: 16px; + } + .buttons:not(:last-child) { margin-bottom: 16px; } .card:not(:last-child) { @@ -222,7 +240,10 @@ body:not(.is-tight) { .progress-radial:not(:last-child) { margin-bottom: 8px; } - .radio:not(:last-child) { + .radios:not(:last-child) { + margin-bottom: 12px; + } + :not(.radios) >.radios:not(:last-child) { margin-bottom: 12px; } .checkbox:not(:last-child) { @@ -231,10 +252,16 @@ body:not(.is-tight) { .switch:not(:last-child) { margin-bottom: 12px; } - .radio-tile:not(:last-child) { + .radio-tiles:not(:last-child) { + margin-bottom: 16px; + } + :not(.radio-tiles) > .radio-tile:not(:last-child) { + margin-bottom: 16px; + } + .checkbox-tiles:not(:last-child) { margin-bottom: 16px; } - .checkbox-tile:not(:last-child) { + :not(.checkbox-tiles) > .checkbox-tile:not(:last-child) { margin-bottom: 16px; } .field:not(:last-child) { @@ -258,7 +285,10 @@ body:not(.is-tight) { .sticker:not(:last-child) { margin-bottom: 8px; } - .tag:not(:last-child) { + .tags:not(:last-child) { + margin-bottom: 16px; + } + :not(.tags) > .tag:not(:last-child) { margin-bottom: 8px; } .title.is-level-1:not(:last-child) { diff --git a/packages/styles/framework/src/components/_pagination.scss b/packages/styles/framework/src/components/_pagination.scss index bee0c2ef..74d219d0 100644 --- a/packages/styles/framework/src/components/_pagination.scss +++ b/packages/styles/framework/src/components/_pagination.scss @@ -3,7 +3,7 @@ margin: -2.5px; align-items: center; display: flex; - justify-content: space-between; + justify-content: center; text-align: center; .pagination-previous, @@ -38,7 +38,6 @@ .pagination-list { flex: 0 0 auto; flex-wrap: wrap; - flex-grow: 1; align-items: center; display: flex; justify-content: center; diff --git a/packages/styles/framework/src/elements/_radio.scss b/packages/styles/framework/src/elements/_radio.scss index 009e7a9d..b9c53953 100644 --- a/packages/styles/framework/src/elements/_radio.scss +++ b/packages/styles/framework/src/elements/_radio.scss @@ -2,7 +2,8 @@ .radios { width: 100%; - gap: 16px; + column-gap: $spacing-5; + row-gap: $spacing-3; display: flex; flex-wrap: wrap; flex-direction: column; diff --git a/packages/styles/framework/src/elements/_tag.scss b/packages/styles/framework/src/elements/_tag.scss index 50302e65..e8d4c19b 100644 --- a/packages/styles/framework/src/elements/_tag.scss +++ b/packages/styles/framework/src/elements/_tag.scss @@ -6,23 +6,8 @@ $tag-delete-margin: 1px !default; justify-content: flex-start; align-items: center; flex-wrap: wrap; - margin-bottom: 16px; - - // multi-tags : ajout d'une marge bottom, supprimable par facette - &:not(.is-gapless) { - &:not(:last-child) { - margin-right: 8px; - } - - .tag { - margin-bottom: 10px; - } - } - + gap: $spacing-3; // multi-tags : ajout d'une marge à droite de chaque tag - .tag:not(:last-child) { - margin-right: 8px; - } // centrage des tags &.is-centered { @@ -34,7 +19,6 @@ $tag-delete-margin: 1px !default; cursor: pointer; .tag { - margin-right: 0; &:not(:first-child) { border-bottom-left-radius: 0; diff --git a/packages/styles/framework/src/utilities/_mixins.scss b/packages/styles/framework/src/utilities/_mixins.scss index e8d39970..1955b0e0 100644 --- a/packages/styles/framework/src/utilities/_mixins.scss +++ b/packages/styles/framework/src/utilities/_mixins.scss @@ -451,7 +451,6 @@ .#{$type} { display: flex; align-items: center; - margin: 6px 8px; width: fit-content; input:disabled, @@ -462,8 +461,7 @@ } label.#{$type}-label { - padding: 4px; - padding-left: 34px; + padding-left: 30px; &:before, &:after { diff --git a/packages/styles/scripts/autolayout.ts b/packages/styles/scripts/autolayout.ts index 4f4f1a82..ef28ddd0 100644 --- a/packages/styles/scripts/autolayout.ts +++ b/packages/styles/scripts/autolayout.ts @@ -14,7 +14,7 @@ const { THREE, FOUR, FIVE, TWO, ONE, SEVEN, ZERO, SIX } = SpacerSize * @mobile spacing: SpacerSize * */ export const DEFAULT_SPACING_MATRIX: DefaultSpacingMatrix = [ - [INSERT_SPACE_BETWEEN, '.accordions', 'default', FIVE, FOUR], + [INSERT_SPACE_BETWEEN, '.accordion', 'default', FIVE, FOUR], [INSERT_SPACE_BETWEEN, '.buttons', 'default', FIVE, FOUR], [INSERT_SPACE_BETWEEN, '.card', 'default', FIVE, FOUR], [INSERT_SPACE_BETWEEN, '.columns', 'default', FIVE, FOUR], @@ -38,11 +38,14 @@ export const DEFAULT_SPACING_MATRIX: DefaultSpacingMatrix = [ [INSERT_SPACE_BETWEEN, 'p.text', 'default', THREE, TWO], [INSERT_SPACE_BETWEEN, '.progress', 'default', TWO, TWO], [INSERT_SPACE_BETWEEN, '.progress-radial', 'default', TWO, TWO], - [INSERT_SPACE_BETWEEN, '.radio', 'default', THREE, THREE], + [INSERT_SPACE_BETWEEN, '.radios', 'default', THREE, THREE], + [INSERT_SPACE_BETWEEN, ':not(.radios) >.radios', 'default', THREE, THREE], [INSERT_SPACE_BETWEEN, '.checkbox', 'default', THREE, THREE], [INSERT_SPACE_BETWEEN, '.switch', 'default', THREE, THREE], - [INSERT_SPACE_BETWEEN, '.radio-tile', 'default', FIVE, FOUR], - [INSERT_SPACE_BETWEEN, '.checkbox-tile', 'default', FIVE, FOUR], + [INSERT_SPACE_BETWEEN, '.radio-tiles', 'default', FOUR, THREE], + [INSERT_SPACE_BETWEEN, ':not(.radio-tiles) > .radio-tile', 'default', FIVE, FOUR], + [INSERT_SPACE_BETWEEN, '.checkbox-tiles', 'default', FIVE, FOUR], + [INSERT_SPACE_BETWEEN, ':not(.checkbox-tiles) > .checkbox-tile', 'default', FIVE, FOUR], [INSERT_SPACE_BETWEEN, '.field', 'default', FIVE, FOUR], [INSERT_SPACE_BETWEEN, '.control', 'default', ONE, ONE], [INSERT_SPACE_BETWEEN, '.help', 'default', ONE, ONE], @@ -50,7 +53,8 @@ export const DEFAULT_SPACING_MATRIX: DefaultSpacingMatrix = [ [INSERT_SPACE_BETWEEN, '.select', 'default', FOUR, FOUR], [INSERT_SPACE_BETWEEN, '.link', 'default', THREE, TWO], [INSERT_SPACE_BETWEEN, '.sticker', 'default', TWO, TWO], - [INSERT_SPACE_BETWEEN, '.tag', 'default', TWO, TWO], + [INSERT_SPACE_BETWEEN, '.tags', 'default', FOUR, FOUR], + [INSERT_SPACE_BETWEEN, ':not(.tags) > .tag', 'default', TWO, TWO], [INSERT_SPACE_BETWEEN, '.title.is-level-1', 'default', SEVEN, SIX], [INSERT_SPACE_BETWEEN, '.title.is-level-2', 'default', SIX, FIVE], [INSERT_SPACE_BETWEEN, '.title.is-level-3', 'default', FOUR, THREE],