From 214875343c042f08ed5bf84c5c294c31a04242d3 Mon Sep 17 00:00:00 2001 From: Adrian Schmidt Date: Sun, 29 Oct 2023 11:12:08 +0100 Subject: [PATCH] style: automatic lint fixes --- src/components/breadcrumbs/breadcrumbs.scss | 4 ++- .../partial-styles/_has-reduced-presence.scss | 3 +- src/components/chip-set/chip-set.e2e.ts | 20 ++++++------- src/components/chip-set/chip-set.scss | 4 ++- .../collapsible-section.scss | 4 ++- .../partial-styles/expand-icon.scss | 22 +++++++++++---- .../color-picker/color-picker-palette.scss | 10 +++++-- .../flatpickr-adapter/flatpickr-adapter.scss | 4 ++- src/components/info-tile/info-tile.scss | 7 +++-- src/components/list/list.scss | 5 ++-- .../progress-flow-item.scss | 4 ++- .../partial-styles/_tabulator-footer.scss | 4 ++- .../tabulator-custom-styles.scss | 7 +++-- src/components/table/table.tsx | 5 ++-- src/design-guidelines/size/examples/size.scss | 3 +- .../internal/shared_input-select-picker.scss | 4 ++- src/style/mixins.scss | 28 +++++++++++++------ 17 files changed, 90 insertions(+), 48 deletions(-) diff --git a/src/components/breadcrumbs/breadcrumbs.scss b/src/components/breadcrumbs/breadcrumbs.scss index f05d59bf85..c9a07c0290 100644 --- a/src/components/breadcrumbs/breadcrumbs.scss +++ b/src/components/breadcrumbs/breadcrumbs.scss @@ -77,7 +77,9 @@ a.step { cursor: pointer; transition: color 0.2s ease; &:before { - transition: opacity 0.2s ease, transform 0.3s ease-out; + transition: + opacity 0.2s ease, + transform 0.3s ease-out; content: ''; position: absolute; inset: auto 0 0 0; diff --git a/src/components/button/partial-styles/_has-reduced-presence.scss b/src/components/button/partial-styles/_has-reduced-presence.scss index 9dc09261a2..4a98eeaad3 100644 --- a/src/components/button/partial-styles/_has-reduced-presence.scss +++ b/src/components/button/partial-styles/_has-reduced-presence.scss @@ -16,7 +16,8 @@ $speed-of-reducing-presence: 0.3s; &[disabled]:not(.loading):not(.just-loaded) { animation: reduced-presence $speed-of-reducing-presence ease forwards; - transition: padding $speed-of-reducing-presence ease, + transition: + padding $speed-of-reducing-presence ease, min-width $speed-of-reducing-presence ease; transition-delay: $speed-of-reducing-presence; diff --git a/src/components/chip-set/chip-set.e2e.ts b/src/components/chip-set/chip-set.e2e.ts index 3da9777447..f008411aa6 100644 --- a/src/components/chip-set/chip-set.e2e.ts +++ b/src/components/chip-set/chip-set.e2e.ts @@ -330,12 +330,10 @@ describe('limel-chip-set', () => { chipSet.setAttribute('disabled', true); await page.waitForChanges(); - firstChipRemoveButton = await chips[0].find( - 'div[role="button"]' - ); - secondChipRemoveButton = await chips[1].find( - 'div[role="button"]' - ); + firstChipRemoveButton = + await chips[0].find('div[role="button"]'); + secondChipRemoveButton = + await chips[1].find('div[role="button"]'); }); it('renders the chips without delete-buttons', async () => { @@ -353,12 +351,10 @@ describe('limel-chip-set', () => { chipSet.setAttribute('readonly', true); await page.waitForChanges(); - firstChipRemoveButton = await chips[0].find( - 'div[role="button"]' - ); - secondChipRemoveButton = await chips[1].find( - 'div[role="button"]' - ); + firstChipRemoveButton = + await chips[0].find('div[role="button"]'); + secondChipRemoveButton = + await chips[1].find('div[role="button"]'); }); it('renders the chips without delete-buttons', async () => { diff --git a/src/components/chip-set/chip-set.scss b/src/components/chip-set/chip-set.scss index 624e51ba79..e5bac35e38 100644 --- a/src/components/chip-set/chip-set.scss +++ b/src/components/chip-set/chip-set.scss @@ -179,7 +179,9 @@ limel-icon.mdc-chip__icon.mdc-chip__icon--leading { .mdc-chip__icon { &.mdc-chip__icon--trailing { - transition: background-color 0.2s ease, color 0.2s ease; + transition: + background-color 0.2s ease, + color 0.2s ease; color: var(--mdc-theme-on-surface); margin-left: 0; diff --git a/src/components/collapsible-section/collapsible-section.scss b/src/components/collapsible-section/collapsible-section.scss index 813edea181..3515608d1c 100644 --- a/src/components/collapsible-section/collapsible-section.scss +++ b/src/components/collapsible-section/collapsible-section.scss @@ -29,7 +29,9 @@ inset: 0; width: 100%; // for Firefox @include mixins.visualize-keyboard-focus; - transition: background-color 0.4s ease, border-radius 0.1s ease; + transition: + background-color 0.4s ease, + border-radius 0.1s ease; cursor: pointer; z-index: -1; diff --git a/src/components/collapsible-section/partial-styles/expand-icon.scss b/src/components/collapsible-section/partial-styles/expand-icon.scss index cbbfcc1e7b..ad8ceff9a3 100644 --- a/src/components/collapsible-section/partial-styles/expand-icon.scss +++ b/src/components/collapsible-section/partial-styles/expand-icon.scss @@ -22,7 +22,9 @@ &:first-of-type, &:last-of-type { - transition: opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s; + transition: + opacity 0.2s ease 0.1s, + transform 0.4s ease 0.3s; } &:first-of-type { @@ -35,13 +37,17 @@ &:nth-of-type(2), &:nth-of-type(3) { - transition: opacity 0.2s ease, transform 0.18s ease; + transition: + opacity 0.2s ease, + transform 0.18s ease; } section.open & { &:first-of-type, &:last-of-type { - transition: opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s; + transition: + opacity 0.2s ease 0.1s, + transform 0.4s ease 0.3s; } &:first-of-type { transform: rotate3d(0, 0, 1, 0deg); @@ -53,7 +59,9 @@ &:nth-of-type(2), &:nth-of-type(3) { - transition: opacity 1s ease, transform 0.4s ease; + transition: + opacity 1s ease, + transform 0.4s ease; } &:nth-of-type(2) { @@ -80,7 +88,8 @@ &:nth-of-type(2), &:nth-of-type(3) { - transition: opacity 0.5s ease 0.4s, + transition: + opacity 0.5s ease 0.4s, transform 0.7s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s; } @@ -101,7 +110,8 @@ section.open { .line { &:first-of-type, &:last-of-type { - transition: opacity 0.2s ease 0.4s, + transition: + opacity 0.2s ease 0.4s, transform 0.4s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s; } diff --git a/src/components/color-picker/color-picker-palette.scss b/src/components/color-picker/color-picker-palette.scss index a5d6f4d381..4c33803c9c 100644 --- a/src/components/color-picker/color-picker-palette.scss +++ b/src/components/color-picker/color-picker-palette.scss @@ -39,8 +39,11 @@ // We could use the `@include mixins.is-flat-clickable();` mixin // But its `background-color` arguments would interfere with the // styles here. So we just copy/pasted the useful parts of the mixin here - transition: color 0.2s ease, background-color 0.2s ease, - box-shadow 0.2s ease, transform 0.1s ease-out; + transition: + color 0.2s ease, + background-color 0.2s ease, + box-shadow 0.2s ease, + transform 0.1s ease-out; &:hover { box-shadow: var(--button-shadow-hovered); @@ -54,7 +57,8 @@ cursor: pointer; &:focus-visible { - box-shadow: var(--shadow-depth-8-focused), + box-shadow: + var(--shadow-depth-8-focused), 0 0 0 0.25rem rgb(var(--contrast-100)) inset; } } diff --git a/src/components/date-picker/flatpickr-adapter/flatpickr-adapter.scss b/src/components/date-picker/flatpickr-adapter/flatpickr-adapter.scss index 152256c53d..7dcc463e81 100644 --- a/src/components/date-picker/flatpickr-adapter/flatpickr-adapter.scss +++ b/src/components/date-picker/flatpickr-adapter/flatpickr-adapter.scss @@ -106,7 +106,9 @@ svg { } &:before { - transition: opacity 0.2s ease, top 0.2s ease; + transition: + opacity 0.2s ease, + top 0.2s ease; pointer-events: none; content: var(--today-label); diff --git a/src/components/info-tile/info-tile.scss b/src/components/info-tile/info-tile.scss index 7ef52a59b1..febc56dfd3 100644 --- a/src/components/info-tile/info-tile.scss +++ b/src/components/info-tile/info-tile.scss @@ -193,8 +193,8 @@ limel-linear-progress { .value-and-suffix, .label { - text-shadow: 0 0 0.5rem - var(--info-tile-background-color, rgb(var(--contrast-100))), + text-shadow: + 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))), 0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100))); } @@ -223,7 +223,8 @@ limel-linear-progress { } .value { - transition: opacity 0.2s ease, + transition: + opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95); transform-origin: left; transform: translate3d(0, 0, 0) scale(1); diff --git a/src/components/list/list.scss b/src/components/list/list.scss index 0227f22e78..04fc0cb3da 100644 --- a/src/components/list/list.scss +++ b/src/components/list/list.scss @@ -139,8 +139,9 @@ $list-mdc-list-item: 0; --list-right-padding: #{functions.pxToRem(12)}; right: 0; width: calc( - 100% - var(--icon-width) - var(--icon-right-padding) - - var(--list-right-padding) + 100% - var(--icon-width) - var(--icon-right-padding) - var( + --list-right-padding + ) ); &.x-small { diff --git a/src/components/progress-flow/progress-flow-item/progress-flow-item.scss b/src/components/progress-flow/progress-flow-item/progress-flow-item.scss index f2632f0807..b151022da3 100644 --- a/src/components/progress-flow/progress-flow-item/progress-flow-item.scss +++ b/src/components/progress-flow/progress-flow-item/progress-flow-item.scss @@ -62,7 +62,9 @@ $limel-progress-flow-divider: 1; } .step { - transition: background-color 0.2s ease, box-shadow 0.2s ease; + transition: + background-color 0.2s ease, + box-shadow 0.2s ease; display: flex; justify-content: center; diff --git a/src/components/table/partial-styles/_tabulator-footer.scss b/src/components/table/partial-styles/_tabulator-footer.scss index 2f1ab0deb6..370884cbf9 100644 --- a/src/components/table/partial-styles/_tabulator-footer.scss +++ b/src/components/table/partial-styles/_tabulator-footer.scss @@ -1,6 +1,8 @@ .tabulator { .tabulator-footer { - transition: transform 0.5s ease-out, opacity 0.35s ease; //For some reason the footer is not animated when it gets hidden/removed + transition: + transform 0.5s ease-out, + opacity 0.35s ease; //For some reason the footer is not animated when it gets hidden/removed padding-top: 0; padding-bottom: 0; color: var(--table-text-color); diff --git a/src/components/table/partial-styles/tabulator-custom-styles.scss b/src/components/table/partial-styles/tabulator-custom-styles.scss index 2cb6b5e2c3..2a3d4ae5c0 100644 --- a/src/components/table/partial-styles/tabulator-custom-styles.scss +++ b/src/components/table/partial-styles/tabulator-custom-styles.scss @@ -12,8 +12,11 @@ // But the "arguments" of the mixin would make the CSS for // even and odd row colors and background color very complicated. // So instead, I've copy/pasted the useful parts of the mixin here - transition: color 0.2s ease, background-color 0.2s ease, - box-shadow 0.2s ease, transform 0.1s ease-out; + transition: + color 0.2s ease, + background-color 0.2s ease, + box-shadow 0.2s ease, + transform 0.1s ease-out; } .tabulator-row:not(.tabulator-calcs) { diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx index 7f16ec71a4..bc9ae63605 100644 --- a/src/components/table/table.tsx +++ b/src/components/table/table.tsx @@ -497,9 +497,8 @@ export class Table { return undefined; } - const value = this.aggregates.find( - (a) => a.field === col.field - )?.value; + const value = this.aggregates.find((a) => a.field === col.field) + ?.value; if (col.formatter) { return col.formatter(value); diff --git a/src/design-guidelines/size/examples/size.scss b/src/design-guidelines/size/examples/size.scss index c764ce4948..f13e5a72c6 100644 --- a/src/design-guidelines/size/examples/size.scss +++ b/src/design-guidelines/size/examples/size.scss @@ -26,7 +26,8 @@ font-size: functions.pxToRem(16); background-color: rgb(var(--contrast-200)); - box-shadow: 0 #{functions.pxToRem(1.5)} #{functions.pxToRem(3.6)} 0 + box-shadow: + 0 #{functions.pxToRem(1.5)} #{functions.pxToRem(3.6)} 0 rgba(0, 0, 0, 0.232), 0 #{functions.pxToRem(0.3)} #{functions.pxToRem(0.9)} 0 rgba(0, 0, 0, 0.208); diff --git a/src/style/internal/shared_input-select-picker.scss b/src/style/internal/shared_input-select-picker.scss index 370733c9ec..cf076ad4bd 100644 --- a/src/style/internal/shared_input-select-picker.scss +++ b/src/style/internal/shared_input-select-picker.scss @@ -247,7 +247,9 @@ $cropped-label-hack--font-size: 0.875rem; //14px @mixin trailing-icon { .mdc-text-field--with-trailing-icon { .mdc-text-field__icon--trailing { - transition: background-color 0.2s ease, box-shadow 0.3s ease; + transition: + background-color 0.2s ease, + box-shadow 0.3s ease; border-radius: 50%; padding: functions.pxToRem(8); diff --git a/src/style/mixins.scss b/src/style/mixins.scss index 56c651d418..a8b2f6ff6d 100644 --- a/src/style/mixins.scss +++ b/src/style/mixins.scss @@ -56,8 +56,11 @@ $background-color: var(--lime-elevated-surface-background-color), $background-color--hovered: var(--lime-elevated-surface-background-color) ) { - transition: color 0.2s ease, background-color 0.2s ease, - box-shadow 0.2s ease, transform 0.1s ease-out; + transition: + color 0.2s ease, + background-color 0.2s ease, + box-shadow 0.2s ease, + transform 0.1s ease-out; cursor: pointer; color: $color; @@ -84,8 +87,11 @@ $background-color--hovered: var(--lime-elevated-surface-background-color), $background-color--inset: var(--mdc-theme-surface) ) { - transition: color 0.2s ease, background-color 0.2s ease, - box-shadow 0.2s ease, transform 0.1s ease-out; + transition: + color 0.2s ease, + background-color 0.2s ease, + box-shadow 0.2s ease, + transform 0.1s ease-out; cursor: pointer; color: $color; @@ -111,8 +117,11 @@ $color--hovered: var(--mdc-theme-on-surface), $background-color--hovered: var(--lime-elevated-surface-background-color) ) { - transition: color 0.2s ease, background-color 0.2s ease, - box-shadow 0.2s ease, transform 0.1s ease-out; + transition: + color 0.2s ease, + background-color 0.2s ease, + box-shadow 0.2s ease, + transform 0.1s ease-out; cursor: pointer; color: $color; @@ -138,8 +147,11 @@ $background-color--hovered: var(--lime-elevated-surface-background-color), $background-color--inset: var(--mdc-theme-surface) ) { - transition: color 0.2s ease, background-color 0.2s ease, - box-shadow 0.2s ease, transform 0.1s ease-out; + transition: + color 0.2s ease, + background-color 0.2s ease, + box-shadow 0.2s ease, + transform 0.1s ease-out; cursor: pointer; color: $color;