From 3705ca639c64b2f74aecc6b340fcf3cd58e38e16 Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Tue, 17 Oct 2023 11:26:36 +0200 Subject: [PATCH] fix: style lint --- .../sbb-card-badge/sbb-card-badge.scss | 3 +-- .../sbb-expansion-panel-content.scss | 4 ++-- .../sbb-file-selector/sbb-file-selector.scss | 3 +-- src/components/sbb-footer/sbb-footer.scss | 7 +++---- .../sbb-journey-summary.scss | 3 +-- .../sbb-navigation/sbb-navigation.scss | 3 +-- src/components/sbb-optgroup/sbb-optgroup.scss | 3 +-- .../sbb-pearl-chain/sbb-pearl-chain.scss | 8 ++------ .../sbb-timetable-row-day-change.scss | 3 +-- .../sbb-timetable-row/sbb-timetable-row.scss | 3 +-- src/components/sbb-title/sbb-title.scss | 3 +-- src/components/sbb-toggle/sbb-toggle.scss | 4 ++-- src/components/sbb-train/sbb-train.scss | 3 +-- src/global/styles/mixins/card.scss | 3 +-- src/global/styles/mixins/lists.scss | 18 +++++++++--------- src/global/styles/mixins/typo.scss | 3 +-- 16 files changed, 29 insertions(+), 45 deletions(-) diff --git a/src/components/sbb-card-badge/sbb-card-badge.scss b/src/components/sbb-card-badge/sbb-card-badge.scss index 17147fe661..5ae1875fd9 100644 --- a/src/components/sbb-card-badge/sbb-card-badge.scss +++ b/src/components/sbb-card-badge/sbb-card-badge.scss @@ -43,8 +43,7 @@ display: flex; inset-block-start: 0; inset-inline-end: 0; - padding-inline-end: var(--sbb-spacing-fixed-3x); - padding-inline-start: var(--sbb-spacing-fixed-2x); + padding-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-3x); } .sbb-card-badge-content { diff --git a/src/components/sbb-expansion-panel-content/sbb-expansion-panel-content.scss b/src/components/sbb-expansion-panel-content/sbb-expansion-panel-content.scss index be6a910db3..f9ac5a2f15 100644 --- a/src/components/sbb-expansion-panel-content/sbb-expansion-panel-content.scss +++ b/src/components/sbb-expansion-panel-content/sbb-expansion-panel-content.scss @@ -24,8 +24,8 @@ .sbb-expansion-panel-content { padding-block-end: var(--sbb-spacing-responsive-s); - padding-inline-start: var(--sbb-expansion-panel-content-padding-inline-start); - padding-inline-end: var(--sbb-expansion-panel-content-padding-inline); + padding-inline: var(--sbb-expansion-panel-content-padding-inline-start) + var(--sbb-expansion-panel-content-padding-inline); } ::slotted(:is(p, sbb-title):first-child) { diff --git a/src/components/sbb-file-selector/sbb-file-selector.scss b/src/components/sbb-file-selector/sbb-file-selector.scss index 55fa87cee6..461b260acb 100644 --- a/src/components/sbb-file-selector/sbb-file-selector.scss +++ b/src/components/sbb-file-selector/sbb-file-selector.scss @@ -77,8 +77,7 @@ row-gap: var(--sbb-spacing-fixed-3x); margin-block: 0; padding-inline: 0; - padding-block-start: var(--sbb-spacing-fixed-6x); - padding-block-end: var(--sbb-spacing-fixed-1x); + padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-1x); } .sbb-file-selector__file { diff --git a/src/components/sbb-footer/sbb-footer.scss b/src/components/sbb-footer/sbb-footer.scss index bd6e73bcc7..397bc40778 100644 --- a/src/components/sbb-footer/sbb-footer.scss +++ b/src/components/sbb-footer/sbb-footer.scss @@ -71,8 +71,7 @@ @include sbb.mq($from: wide) { max-width: var(--sbb-footer-content-max-width); - margin-inline-start: auto; - margin-inline-end: auto; + margin-inline: auto; grid-template-columns: repeat(4, 1fr); } } @@ -98,8 +97,8 @@ } ::slotted(sbb-divider) { - margin-block-start: calc(var(--sbb-spacing-responsive-xl) - var(--sbb-footer-gap-vertical)); - margin-block-end: var(--sbb-spacing-responsive-s); + margin-block: calc(var(--sbb-spacing-responsive-xl) - var(--sbb-footer-gap-vertical)) + var(--sbb-spacing-responsive-s); @include sbb.mq($from: small) { grid-row: 3; diff --git a/src/components/sbb-journey-summary/sbb-journey-summary.scss b/src/components/sbb-journey-summary/sbb-journey-summary.scss index d790903844..6855cd8473 100644 --- a/src/components/sbb-journey-summary/sbb-journey-summary.scss +++ b/src/components/sbb-journey-summary/sbb-journey-summary.scss @@ -19,8 +19,7 @@ .sbb-journey-summary__vias { @include sbb.ellipsis; - margin-block-start: 0; - margin-block-end: 0; + margin-block: 0; padding-inline-start: 0; } diff --git a/src/components/sbb-navigation/sbb-navigation.scss b/src/components/sbb-navigation/sbb-navigation.scss index 861236fc90..b64002ac85 100644 --- a/src/components/sbb-navigation/sbb-navigation.scss +++ b/src/components/sbb-navigation/sbb-navigation.scss @@ -208,8 +208,7 @@ position: relative; height: var(--sbb-navigation-height); padding-inline: var(--sbb-navigation-padding-inline); - padding-block-start: var(--sbb-navigation-padding-block-start); - padding-block-end: var(--sbb-navigation-padding-block-end); + padding-block: var(--sbb-navigation-padding-block-start) var(--sbb-navigation-padding-block-end); overflow-y: auto; transform: var(--sbb-navigation-content-transform); } diff --git a/src/components/sbb-optgroup/sbb-optgroup.scss b/src/components/sbb-optgroup/sbb-optgroup.scss index 05d6973314..49251d65e6 100644 --- a/src/components/sbb-optgroup/sbb-optgroup.scss +++ b/src/components/sbb-optgroup/sbb-optgroup.scss @@ -46,8 +46,7 @@ color: var(--sbb-optgroup-label-color); -webkit-text-fill-color: var(--sbb-optgroup-label-color); padding-inline: var(--sbb-optgroup-label-padding-inline); - padding-block-start: var(--sbb-optgroup-label-padding-start); - padding-block-end: var(--sbb-spacing-fixed-2x); + padding-block: var(--sbb-optgroup-label-padding-start) var(--sbb-spacing-fixed-2x); :host([data-variant='select'][data-multiple]) & { @include sbb.text-xs--regular; diff --git a/src/components/sbb-pearl-chain/sbb-pearl-chain.scss b/src/components/sbb-pearl-chain/sbb-pearl-chain.scss index 28639d793c..7ea9e3c8d6 100644 --- a/src/components/sbb-pearl-chain/sbb-pearl-chain.scss +++ b/src/components/sbb-pearl-chain/sbb-pearl-chain.scss @@ -38,10 +38,7 @@ flex-wrap: nowrap; color: var(--sbb-pearl-chain-color); width: 100%; - padding-block-start: calc( - (var(--sbb-pearl-chain-bullet-size-start-end) - var(--sbb-pearl-chain-height)) / 2 - ); - padding-block-end: calc( + padding-block: calc( (var(--sbb-pearl-chain-bullet-size-start-end) - var(--sbb-pearl-chain-height)) / 2 ); padding-inline-end: var(--sbb-pearl-chain-bullet-size-start-end); @@ -175,8 +172,7 @@ .sbb-pearl-chain__leg::after { content: ''; position: absolute; - inset-block-start: 0; - inset-block-end: 0; + inset-block: 0; inset-inline-start: 0; background-color: currentcolor; border-radius: var(--sbb-pearl-chain-height); diff --git a/src/components/sbb-timetable-row-day-change/sbb-timetable-row-day-change.scss b/src/components/sbb-timetable-row-day-change/sbb-timetable-row-day-change.scss index 51684055e7..b02724fb40 100644 --- a/src/components/sbb-timetable-row-day-change/sbb-timetable-row-day-change.scss +++ b/src/components/sbb-timetable-row-day-change/sbb-timetable-row-day-change.scss @@ -1,8 +1,7 @@ @use '../../global/styles' as sbb; .day-change:not(day-change--visually-hidden) { - padding-block-start: var(--sbb-spacing-fixed-2x); - padding-block-end: var(--sbb-spacing-fixed-1x); + padding-block: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-1x); } .day-change__text { diff --git a/src/components/sbb-timetable-row/sbb-timetable-row.scss b/src/components/sbb-timetable-row/sbb-timetable-row.scss index d2da579621..6b78903e83 100644 --- a/src/components/sbb-timetable-row/sbb-timetable-row.scss +++ b/src/components/sbb-timetable-row/sbb-timetable-row.scss @@ -180,8 +180,7 @@ li { } .sbb-loading__badge { - margin-inline-start: auto; - margin-inline-end: calc(var(--sbb-spacing-fixed-3x) * -1); + margin-inline: auto calc(var(--sbb-spacing-fixed-3x) * -1); padding-inline-end: var(--sbb-spacing-fixed-6x); border-end-start-radius: var(--sbb-border-radius-4x); transform: skew(16deg, 0deg); diff --git a/src/components/sbb-title/sbb-title.scss b/src/components/sbb-title/sbb-title.scss index 1e6963c472..94902f4b14 100644 --- a/src/components/sbb-title/sbb-title.scss +++ b/src/components/sbb-title/sbb-title.scss @@ -12,8 +12,7 @@ --sbb-title-margin-block-start: 0; --sbb-title-margin-block-end: 0; - margin-block-start: var(--sbb-title-margin-block-start); - margin-block-end: var(--sbb-title-margin-block-end); + margin-block: var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end); } :host(:where(:not([visually-hidden]:not([visually-hidden='false'])))) { diff --git a/src/components/sbb-toggle/sbb-toggle.scss b/src/components/sbb-toggle/sbb-toggle.scss index 0708079847..1838a93f7b 100644 --- a/src/components/sbb-toggle/sbb-toggle.scss +++ b/src/components/sbb-toggle/sbb-toggle.scss @@ -89,8 +89,8 @@ // Selected option exceeds toggle dimensions by 2x border width inset-block: calc(-2 * var(--sbb-toggle-border-width)); - inset-inline-end: calc(var(--sbb-toggle-option-right) - #{sbb.px-to-rem-build(2)}); - inset-inline-start: calc(var(--sbb-toggle-option-left) - #{sbb.px-to-rem-build(2)}); + inset-inline: calc(var(--sbb-toggle-option-left) - #{sbb.px-to-rem-build(2)}) + calc(var(--sbb-toggle-option-right) - #{sbb.px-to-rem-build(2)}); transition: { duration: var(--sbb-toggle-animation-duration); timing-function: ease; diff --git a/src/components/sbb-train/sbb-train.scss b/src/components/sbb-train/sbb-train.scss index ded481052e..5159ee62a0 100644 --- a/src/components/sbb-train/sbb-train.scss +++ b/src/components/sbb-train/sbb-train.scss @@ -46,10 +46,9 @@ @include sbb.text-s--regular; padding-block-start: var(--sbb-train-direction-spacing); - margin-block-end: var(--sbb-train-direction-spacing); + margin-block: auto var(--sbb-train-direction-spacing); display: flex; position: relative; - margin-block-start: auto; width: 100%; } diff --git a/src/global/styles/mixins/card.scss b/src/global/styles/mixins/card.scss index 448ee87ff8..c3e425784d 100644 --- a/src/global/styles/mixins/card.scss +++ b/src/global/styles/mixins/card.scss @@ -132,8 +132,7 @@ display: block; position: relative; padding-inline: var(--sbb-card-padding-inline); - padding-block-start: var(--sbb-card-padding-block-start); - padding-block-end: var(--sbb-card-padding-block-end); + padding-block: var(--sbb-card-padding-block-start) var(--sbb-card-padding-block-end); border-radius: var(--sbb-card-border-radius); background-color: var(--sbb-card-background-color); box-shadow: none; diff --git a/src/global/styles/mixins/lists.scss b/src/global/styles/mixins/lists.scss index 57d14b952e..414bb1b278 100644 --- a/src/global/styles/mixins/lists.scss +++ b/src/global/styles/mixins/lists.scss @@ -118,15 +118,15 @@ counter-increment: steps; background-color: var(--sbb-color-milk-default); border-radius: var(--sbb-border-radius-4x); - padding-block-start: calc( - var(--sbb-step-list-padding-block) + var(--sbb-step-list-text-to-marker-block-offset) - ); - padding-block-end: var(--sbb-step-list-padding-block); - padding-inline-start: calc( - var(--sbb-step-list-padding-inline) + var(--sbb-step-list-marker-dimensions) + - var(--sbb-step-list-marker-to-text-gap) - ); - padding-inline-end: var(--sbb-step-list-padding-inline); + padding-block: calc( + var(--sbb-step-list-padding-block) + var(--sbb-step-list-text-to-marker-block-offset) + ) + var(--sbb-step-list-padding-block); + padding-inline: calc( + var(--sbb-step-list-padding-inline) + var(--sbb-step-list-marker-dimensions) + + var(--sbb-step-list-marker-to-text-gap) + ) + var(--sbb-step-list-padding-inline); min-height: calc( var(--sbb-step-list-marker-dimensions) + 2 * var(--sbb-step-list-padding-block) ); diff --git a/src/global/styles/mixins/typo.scss b/src/global/styles/mixins/typo.scss index 04414b4997..e20b42c61f 100644 --- a/src/global/styles/mixins/typo.scss +++ b/src/global/styles/mixins/typo.scss @@ -13,8 +13,7 @@ } margin: 0; - margin-block-start: var(--sbb-title-margin-block-start); - margin-block-end: var(--sbb-title-margin-block-end); + margin-block: var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end); font-family: var(--sbb-typo-type-face-sbb-bold); font-weight: normal; line-height: var(--sbb-title-line-height);