From 3b5453baf61392f40487343e497b482cd7830088 Mon Sep 17 00:00:00 2001 From: Alan Greene Date: Tue, 30 Apr 2024 21:22:15 +0100 Subject: [PATCH] Adopt CSS logical properties Prepare for Carbon 11 upgrade, adopt CSS logical properties for consistency and to take advantage of some of the new auto-layout features. - `width` becomes `inline-size` - `margin-top` becomes `margin-block-start` - `top` and `right` become `inset-block-start` and `inset-inline-end` respectively - viewport units `vw` (width) and `vh` (height) become `vi` (inline) and `vb` (block) respectively - etc. Logical properties aren't supported in media queries yet so there are still some uses of `min-width` remaining for now. Similarly, the logical property replacements for `overflow-x` and `overflow-y` are currently only supported in Firefox, so we keep the existing properties for now and can implement a workaround to honour writing direction etc. if needed. Also update some variables and other identifiers in code to use the `start` / `end` naming for consistency. Some functions which are part of component APIs keep their original naming for now. --- .storybook/welcome.scss | 22 +++--- .../src/components/Actions/Actions.scss | 4 +- .../DataTableSkeleton/DataTableSkeleton.scss | 12 +-- .../components/DeleteModal/DeleteModal.scss | 2 +- .../DetailsHeader/DetailsHeader.scss | 34 +++++---- .../src/components/Header/Header.scss | 8 +- .../components/KeyValueList/KeyValueList.scss | 18 ++--- .../components/LabelFilter/LabelFilter.scss | 19 +++-- .../src/components/Loading/Loading.scss | 8 +- .../components/src/components/Log/Log.jsx | 4 +- .../components/src/components/Log/Log.scss | 36 ++++----- .../src/components/Log/Log.test.jsx | 16 ++-- .../components/LogoutButton/LogoutButton.scss | 4 +- .../components/PipelineRuns/PipelineRuns.scss | 14 ++-- .../src/components/RunHeader/RunHeader.scss | 31 ++++---- .../src/components/StatusIcon/StatusIcon.scss | 6 +- .../StatusIcon/StatusIcon.stories.scss | 8 +- .../components/src/components/Step/Step.scss | 14 ++-- .../components/StepDetails/StepDetails.scss | 2 +- .../src/components/Table/Table.scss | 76 ++++++++++--------- .../components/src/components/Task/Task.scss | 43 ++++++----- .../TaskRunDetails/TaskRunDetails.scss | 6 +- .../src/components/TaskTree/TaskTree.scss | 6 +- .../src/components/Trigger/Trigger.scss | 12 +-- .../src/components/ViewYAML/ViewYAML.scss | 16 ++-- packages/components/src/scss/Run.scss | 8 +- .../src/components/ZoomablePipelineGraph.scss | 8 +- packages/graph/src/components/newGraph.scss | 10 +-- src/containers/About/About.scss | 51 +++++++------ .../EventListener/EventListener.scss | 2 +- .../ImportResources/ImportResources.scss | 25 +++--- src/containers/LoadingShell/LoadingShell.scss | 8 +- src/containers/NotFound/NotFound.scss | 16 ++-- src/containers/Settings/Settings.scss | 16 ++-- src/containers/SideNav/SideNav.scss | 17 +++-- src/scss/App.scss | 32 ++++---- src/scss/Create.scss | 14 ++-- src/scss/Definitions.scss | 12 +-- src/scss/Triggers.scss | 24 +++--- src/scss/_grid.scss | 9 +-- 40 files changed, 353 insertions(+), 320 deletions(-) diff --git a/.storybook/welcome.scss b/.storybook/welcome.scss index 75e31010a..78c8e6fb8 100644 --- a/.storybook/welcome.scss +++ b/.storybook/welcome.scss @@ -1,5 +1,5 @@ /* -Copyright 2023 The Tekton Authors +Copyright 2023-2024 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -13,16 +13,16 @@ limitations under the License. .welcome__container { position: absolute; - top: 0; - left: 0; - width: 100vw; - max-width: 120ch; + inset-block-start: 0; + inset-inline-start: 0; + inline-size: 100vi; + max-inline-size: 120ch; padding: 3rem; background-color: $ui-background; .welcome__heading { display: flex; - margin-bottom: 2rem; + margin-block-end: 2rem; } h2 { @@ -36,12 +36,12 @@ limitations under the License. } h3 { - margin-top: 2rem; + margin-block-start: 2rem; } img { - height: 250px; - margin-left: auto; + block-size: 250px; + margin-inline-start: auto; } a:not([target="_self"]) { @@ -65,11 +65,11 @@ limitations under the License. } p { - margin-top: 1rem; + margin-block-start: 1rem; } ul li { - margin-top: 0.5rem; + margin-block-start: 0.5rem; } .tkn-graph-story .sb-story { diff --git a/packages/components/src/components/Actions/Actions.scss b/packages/components/src/components/Actions/Actions.scss index 7401c50a0..af6815daa 100644 --- a/packages/components/src/components/Actions/Actions.scss +++ b/packages/components/src/components/Actions/Actions.scss @@ -1,5 +1,5 @@ /* -Copyright 2022 The Tekton Authors +Copyright 2022-2024 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -12,5 +12,5 @@ limitations under the License. */ .tkn--actions-dropdown--button { - width: auto; + inline-size: auto; } diff --git a/packages/components/src/components/DataTableSkeleton/DataTableSkeleton.scss b/packages/components/src/components/DataTableSkeleton/DataTableSkeleton.scss index 9cb4266f8..e9f63fbe5 100644 --- a/packages/components/src/components/DataTableSkeleton/DataTableSkeleton.scss +++ b/packages/components/src/components/DataTableSkeleton/DataTableSkeleton.scss @@ -1,5 +1,5 @@ /* -Copyright 2020-2023 The Tekton Authors +Copyright 2020-2024 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -17,23 +17,23 @@ limitations under the License. vertical-align: middle; &:nth-child(3n + 1) { - width: 10%; + inline-size: 10%; } &:nth-child(3n + 2) { - width: 30%; + inline-size: 30%; } &:nth-child(3n + 3) { - width: 15%; + inline-size: 15%; } } th span, td span { @include skeleton; - width: 75%; - height: 1rem; + inline-size: 75%; + block-size: 1rem; display: block; } diff --git a/packages/components/src/components/DeleteModal/DeleteModal.scss b/packages/components/src/components/DeleteModal/DeleteModal.scss index b4340c819..6ea78b420 100644 --- a/packages/components/src/components/DeleteModal/DeleteModal.scss +++ b/packages/components/src/components/DeleteModal/DeleteModal.scss @@ -13,6 +13,6 @@ limitations under the License. .tkn--delete-modal { .tkn--table { - margin-top: 1rem; + margin-block-start: 1rem; } } diff --git a/packages/components/src/components/DetailsHeader/DetailsHeader.scss b/packages/components/src/components/DetailsHeader/DetailsHeader.scss index b386ea8d5..d6137820a 100644 --- a/packages/components/src/components/DetailsHeader/DetailsHeader.scss +++ b/packages/components/src/components/DetailsHeader/DetailsHeader.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2023 The Tekton Authors +Copyright 2019-2024 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -13,10 +13,12 @@ limitations under the License. header.tkn--step-details-header { background-color: $ui-01; - padding: 1rem 1rem 0; + padding-block-start: 1rem; + padding-block-end: 0; + padding-inline: 1rem; h2.tkn--details-header--heading { - height: 1.7rem; + block-size: 1.7rem; font-size: 1.3rem; font-weight: 400; display: flex; @@ -35,38 +37,40 @@ header.tkn--step-details-header { } > .skeleton-placeholder { - height: 100%; - width: 12rem; + block-size: 100%; + inline-size: 12rem; } > .tkn--status-icon { vertical-align: top; - margin-right: 0.75rem; - width: 24px; - height: 24px; + margin-inline-end: 0.75rem; + inline-size: 24px; + block-size: 24px; &.tkn--spinner { position: relative; - top: -1px; - left: -1px; + inset-block-start: -1px; + inset-inline-start: -1px; } &.tkn--status-icon--warning.tkn--status-icon--type-normal { - width: 28px; - height: 28px; - margin-right: 0.5rem; + inline-size: 28px; + block-size: 28px; + margin-inline-end: 0.5rem; } } > .tkn--status-label { font-size: 0.9rem; - margin-left: 0.75rem; + margin-inline-start: 0.75rem; } } .tkn--run-details-time { display: inline-block; - margin: 0.5rem 0 0.5rem 2.25rem; + margin-block: 0.5rem; + margin-inline-start: 2.25rem; + margin-inline-end: 0; font-size: 0.75rem; } diff --git a/packages/components/src/components/Header/Header.scss b/packages/components/src/components/Header/Header.scss index 6ef7b0bf3..f69932109 100644 --- a/packages/components/src/components/Header/Header.scss +++ b/packages/components/src/components/Header/Header.scss @@ -13,15 +13,15 @@ limitations under the License. header.#{$prefix}--header.tkn--header { .#{$prefix}--list-box__wrapper { - margin-top: 0.5rem; - margin-right: 1rem; + margin-block-start: 0.5rem; + margin-inline-end: 1rem; &:last-child { - margin-right: 2rem; + margin-inline-end: 2rem; } } .tkn--logout-btn { - padding-right: 2px; + padding-inline-end: 2px; } } diff --git a/packages/components/src/components/KeyValueList/KeyValueList.scss b/packages/components/src/components/KeyValueList/KeyValueList.scss index 84b06b00b..79a3654ee 100644 --- a/packages/components/src/components/KeyValueList/KeyValueList.scss +++ b/packages/components/src/components/KeyValueList/KeyValueList.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2023 The Tekton Authors +Copyright 2019-2024 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -12,7 +12,7 @@ limitations under the License. */ .tkn--keyvalues { - margin-bottom: $spacing-06; + margin-block-end: $spacing-06; .tkn--keyvalue-invalid { color: $support-01; @@ -24,9 +24,9 @@ limitations under the License. .tkn--keyvalue-label { color: $text-02; font-size: 12px; - height: 29px; + block-size: 29px; flex: 1; - text-align: left; + text-align: start; margin: auto; } @@ -34,17 +34,17 @@ limitations under the License. position: relative; display: flex; align-items: center; - margin-bottom: 5px; + margin-block-end: 5px; .#{$prefix}--form-item.#{$prefix}--text-input-wrapper { - width: 48%; + inline-size: 48%; display: inline-flex; - margin-bottom: 0; - margin-right: $spacing-05; + margin-block-end: 0; + margin-inline-end: $spacing-05; } .#{$prefix}--text-input-wrapper:first-child { - margin-right: $spacing-07; + margin-inline-end: $spacing-07; } .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only { diff --git a/packages/components/src/components/LabelFilter/LabelFilter.scss b/packages/components/src/components/LabelFilter/LabelFilter.scss index 1f87f0aa5..df9a5613b 100644 --- a/packages/components/src/components/LabelFilter/LabelFilter.scss +++ b/packages/components/src/components/LabelFilter/LabelFilter.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2023 The Tekton Authors +Copyright 2019-2024 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -21,25 +21,28 @@ limitations under the License. flex-wrap: wrap; align-items: baseline; - // NOTE: add offset to min-height to prevent layout shift. - min-height: calc(#{$spacing-08} + #{$button-border-width} + 2px); - margin-bottom: calc(#{$spacing-05} - #{$button-border-width}); + // NOTE: add offset to min-block-size to prevent layout shift. + min-block-size: calc(#{$spacing-08} + #{$button-border-width} + 2px); + margin-block-end: calc(#{$spacing-05} - #{$button-border-width}); .#{$prefix}--tag { flex-shrink: 0; - margin: $spacing-05 $spacing-03 0 0; + margin-block-start: $spacing-05; + margin-inline-end: $spacing-03; + margin-block-end: 0; + margin-inline-start: 0; } .#{$prefix}--btn { - margin-top: calc(#{$spacing-04} - 1px ); + margin-block-start: calc(#{$spacing-04} - 1px ); } } } .tkn--visually-hidden:not(:focus):not(:active) { position: absolute; - height: 1px; - width: 1px; + block-size: 1px; + inline-size: 1px; padding: 0; margin: -1px; overflow: hidden; diff --git a/packages/components/src/components/Loading/Loading.scss b/packages/components/src/components/Loading/Loading.scss index c0fc617ec..f42104cf9 100644 --- a/packages/components/src/components/Loading/Loading.scss +++ b/packages/components/src/components/Loading/Loading.scss @@ -1,5 +1,5 @@ /* -Copyright 2023 The Tekton Authors +Copyright 2023-2024 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -12,12 +12,12 @@ limitations under the License. */ .#{$prefix}--loading-overlay.tkn--loading-overlay { - top: 3rem; + inset-block-start: 3rem; flex-direction: column; .#{$prefix}--loading { - margin-top: -3rem; - margin-bottom: $spacing-05; + margin-block-start: -3rem; + margin-block-end: $spacing-05; } .tkn--loading-text { diff --git a/packages/components/src/components/Log/Log.jsx b/packages/components/src/components/Log/Log.jsx index 27b5c8e4a..b63659bfe 100644 --- a/packages/components/src/components/Log/Log.jsx +++ b/packages/components/src/components/Log/Log.jsx @@ -217,7 +217,7 @@ export class LogContainer extends Component { className={`${carbonPrefix}--copy-btn`} hasIconOnly iconDescription={scrollButtonTopMessage} - id="log-scroll-to-top-btn" + id="log-scroll-to-start-btn" onClick={this.scrollToTopLog} renderIcon={() => ( @@ -233,7 +233,7 @@ export class LogContainer extends Component { className={`${carbonPrefix}--copy-btn`} iconDescription={scrollButtonBottomMessage} hasIconOnly - id="log-scroll-to-bottom-btn" + id="log-scroll-to-end-btn" onClick={this.scrollToBottomLog} renderIcon={() => ( diff --git a/packages/components/src/components/Log/Log.scss b/packages/components/src/components/Log/Log.scss index f5c6c4635..c3fdba55d 100644 --- a/packages/components/src/components/Log/Log.scss +++ b/packages/components/src/components/Log/Log.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2023 The Tekton Authors +Copyright 2019-2024 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -13,7 +13,9 @@ limitations under the License. pre.tkn--log { position: relative; - padding: 2rem 1.6rem 1.3rem 1.6rem; + padding-block-start: 2rem; + padding-block-end: 1.3rem; + padding-inline: 1.6rem; @include carbon--font-family('mono'); font-size: 0.75rem; @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { @@ -47,39 +49,39 @@ pre.tkn--log { .#{$prefix}--btn-set { position: absolute; - top: 0; - right: 0; + inset-block-start: 0; + inset-inline-end: 0; } .button-container { position: absolute; clip-path: inset(0); // ensure the children with position:fixed are not shown outside this element. - top: 3.125rem; //equals the maximum between padding-top of pre.tkn--log and between the page header height - bottom: 0; - right: 0; - width: 1.6rem; //equals the padding-right of pre.tkn--log + inset-block-start: 3.125rem; //equals the maximum between padding-block-start of pre.tkn--log and between the page header height + inset-block-end: 0; + inset-inline-end: 0; + inline-size: 1.6rem; //equals the padding-inline-end of pre.tkn--log } - #log-scroll-to-top-btn, #log-scroll-to-bottom-btn { + #log-scroll-to-start-btn, #log-scroll-to-end-btn { position: fixed; - right: var(--tkn-log-element-right); + inset-inline-end: var(--tkn-log-element-right); &::before { // the tooltip is not shown because it is outside of its parent .button-container (which has clip-path inset) But fin still appears. content: none; // To remove fin of truncated tooltip. To obtain higher specificity than Carbon css, id selector is needed. } } - #log-scroll-to-top-btn { - top: calc(var(--tkn-scroll-button-top) + 3.125rem); //3.125 rem is the maximum between padding-top of pre.tkn--log and between the page header height + #log-scroll-to-start-btn { + inset-block-start: calc(var(--tkn-scroll-button-top) + 3.125rem); //3.125 rem is the maximum between padding-block-start of pre.tkn--log and between the page header height } - #log-scroll-to-bottom-btn { - bottom: var(--tkn-scroll-button-bottom); + #log-scroll-to-end-btn { + inset-block-end: var(--tkn-scroll-button-bottom); } .#{$prefix}--copy-btn { - width: 2rem; - height: 2rem; + inline-size: 2rem; + block-size: 2rem; background-color: $ui-background; &:hover { @@ -112,6 +114,6 @@ pre.tkn--log { } .tkn--log-container:not(:empty) + .tkn--log-trailer { - margin-top: 1rem; + margin-block-start: 1rem; } } diff --git a/packages/components/src/components/Log/Log.test.jsx b/packages/components/src/components/Log/Log.test.jsx index af3426037..aefe896ca 100644 --- a/packages/components/src/components/Log/Log.test.jsx +++ b/packages/components/src/components/Log/Log.test.jsx @@ -202,10 +202,12 @@ describe('Log', () => { /> ); await waitFor(() => { - expect(container.querySelector('#log-scroll-to-top-btn')).not.toBeNull(); + expect( + container.querySelector('#log-scroll-to-start-btn') + ).not.toBeNull(); }); - expect(container.querySelector('#log-scroll-to-bottom-btn')).toBeNull(); - fireEvent.click(container.querySelector('#log-scroll-to-top-btn')); + expect(container.querySelector('#log-scroll-to-end-btn')).toBeNull(); + fireEvent.click(container.querySelector('#log-scroll-to-start-btn')); await waitFor(() => expect(spiedFn).toHaveBeenCalled()); }); @@ -232,10 +234,12 @@ describe('Log', () => { /> ); await waitFor(() => { - expect(container.querySelector('#log-scroll-to-top-btn')).not.toBeNull(); + expect( + container.querySelector('#log-scroll-to-start-btn') + ).not.toBeNull(); }); - expect(container.querySelector('#log-scroll-to-bottom-btn')).not.toBeNull(); - fireEvent.click(container.querySelector('#log-scroll-to-bottom-btn')); + expect(container.querySelector('#log-scroll-to-end-btn')).not.toBeNull(); + fireEvent.click(container.querySelector('#log-scroll-to-end-btn')); await waitFor(() => expect(spiedFn).toHaveBeenCalled()); }); diff --git a/packages/components/src/components/LogoutButton/LogoutButton.scss b/packages/components/src/components/LogoutButton/LogoutButton.scss index 457cc8766..5b2b9be86 100644 --- a/packages/components/src/components/LogoutButton/LogoutButton.scss +++ b/packages/components/src/components/LogoutButton/LogoutButton.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2023 The Tekton Authors +Copyright 2019-2024 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -13,7 +13,7 @@ limitations under the License. .#{$prefix}--btn.tkn--logout-btn.#{$prefix}--btn--ghost { position: absolute; - right: 32px; + inset-inline-end: 32px; border-width: 1px; text-decoration: none; } diff --git a/packages/components/src/components/PipelineRuns/PipelineRuns.scss b/packages/components/src/components/PipelineRuns/PipelineRuns.scss index ac68ccd21..2d38bec04 100644 --- a/packages/components/src/components/PipelineRuns/PipelineRuns.scss +++ b/packages/components/src/components/PipelineRuns/PipelineRuns.scss @@ -15,28 +15,28 @@ limitations under the License. display: flex; .tkn--status-icon { - margin-right: 0.5em; + margin-inline-end: 0.5em; vertical-align: sub; flex-shrink: 0; &.tkn--status-icon--warning { - width: 24px; - height: 24px; - margin-right: 0.25em; + inline-size: 24px; + block-size: 24px; + margin-inline-end: 0.25em; } } } .#{$prefix}--modal .#{$prefix}--tile-group { - margin-top: 2rem; + margin-block-start: 2rem; .#{$prefix}--tile { &:not(:last-child) { - margin-bottom: 0.5rem; + margin-block-end: 0.5rem; } .tkn--tile--description { - margin-top: 1rem; + margin-block-start: 1rem; @include type-style('helper-text-01'); } } diff --git a/packages/components/src/components/RunHeader/RunHeader.scss b/packages/components/src/components/RunHeader/RunHeader.scss index fa1f304bb..72d5b7dfe 100644 --- a/packages/components/src/components/RunHeader/RunHeader.scss +++ b/packages/components/src/components/RunHeader/RunHeader.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2023 The Tekton Authors +Copyright 2019-2024 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -17,39 +17,42 @@ header.tkn--pipeline-run-header { @include type-style('body-short-01'); line-height: 1; background: $ui-01; - margin-bottom: 2em; - padding: .4em 0 .4em 1.5em; + margin-block-end: 2em; + padding-block: 0.4em; + padding-inline-start: 1.5em; + padding-inline-end: 0; .tkn--header-skeleton { - margin-top: 0.9rem; - height: 2rem; - width: 15rem; + margin-block-start: 0.9rem; + block-size: 2rem; + inline-size: 15rem; } h1.tkn--run-header--heading { @include type-style('productive-heading-04'); display: flex; align-items: baseline; - height: 3rem; - margin-bottom: 0; + block-size: 3rem; + margin-block-end: 0; .tkn--run-name { - min-width: 5rem; + min-inline-size: 5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tkn--time { - margin: 0 1.15rem; + margin-block: 0; + margin-inline: 1.15rem; font-size: 0.875rem; font-weight: 300; white-space: nowrap; } .tkn--actions-dropdown { - margin-left: auto; - margin-right: 0.5rem; + margin-inline-start: auto; + margin-inline-end: 0.5rem; } } @@ -58,7 +61,7 @@ header.tkn--pipeline-run-header { align-items: baseline; .tkn--status-label { - margin-right: 1.15rem; + margin-inline-end: 1.15rem; font-size: 0.95rem; font-weight: 400; letter-spacing: 0.02em; @@ -67,7 +70,7 @@ header.tkn--pipeline-run-header { .tkn--status-message { line-height: 1rem; vertical-align: bottom; - max-width: 500px; + max-inline-size: 500px; display: inline-block; white-space: nowrap; overflow: hidden; diff --git a/packages/components/src/components/StatusIcon/StatusIcon.scss b/packages/components/src/components/StatusIcon/StatusIcon.scss index d34f68879..2a93ec426 100644 --- a/packages/components/src/components/StatusIcon/StatusIcon.scss +++ b/packages/components/src/components/StatusIcon/StatusIcon.scss @@ -1,5 +1,5 @@ /* -Copyright 2020-2023 The Tekton Authors +Copyright 2020-2024 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -13,8 +13,8 @@ limitations under the License. .tkn--status-icon { fill: $ui-04; - width: 20px; - height: 20px; + inline-size: 20px; + block-size: 20px; &.tkn--status-icon--cancelled { fill: $ui-04; diff --git a/packages/components/src/components/StatusIcon/StatusIcon.stories.scss b/packages/components/src/components/StatusIcon/StatusIcon.stories.scss index c6378102e..ea99e4068 100644 --- a/packages/components/src/components/StatusIcon/StatusIcon.stories.scss +++ b/packages/components/src/components/StatusIcon/StatusIcon.stories.scss @@ -13,19 +13,19 @@ limitations under the License. .status-icons-list { h3 { - margin-bottom: 1rem; + margin-block-end: 1rem; } ul { - margin-bottom: 2rem; + margin-block-end: 2rem; } li { - margin-bottom: 0.25rem; + margin-block-end: 0.25rem; } .tkn--status-icon { - margin-right: 0.5rem; + margin-inline-end: 0.5rem; vertical-align: middle; } } diff --git a/packages/components/src/components/Step/Step.scss b/packages/components/src/components/Step/Step.scss index 72b754606..ec464452a 100644 --- a/packages/components/src/components/Step/Step.scss +++ b/packages/components/src/components/Step/Step.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2023 The Tekton Authors +Copyright 2019-2024 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -23,11 +23,11 @@ limitations under the License. &:hover > .tkn--step-link, > .tkn--step-link:hover { - border-left-color: $hover-ui; + border-inline-start-color: $hover-ui; } &[data-selected] > .tkn--step-link { - border-left: 3px solid $interactive-04; + border-inline-start: 3px solid $interactive-04; } > .tkn--step-link { @@ -35,18 +35,20 @@ limitations under the License. display: flex; align-items: baseline; position: relative; - padding: 0 1rem 0 .75rem; + padding-block: 0; + padding-inline-start: 0.75rem; + padding-inline-end: 1rem; line-height: 2.2rem; font-size: 0.78rem; letter-spacing: 0.02rem; text-decoration: none; - border-left: 3px solid $ui-01; + border-inline-start: 3px solid $ui-01; } .tkn--status-icon { flex-shrink: 0; align-self: center; - margin-right: 0.75rem; + margin-inline-end: 0.75rem; } .tkn--step-name { diff --git a/packages/components/src/components/StepDetails/StepDetails.scss b/packages/components/src/components/StepDetails/StepDetails.scss index 8683f26e8..d0fc5f062 100644 --- a/packages/components/src/components/StepDetails/StepDetails.scss +++ b/packages/components/src/components/StepDetails/StepDetails.scss @@ -20,6 +20,6 @@ limitations under the License. overflow: hidden; .#{$prefix}--tab-content { - padding-left: 0; + padding-inline-start: 0; } } diff --git a/packages/components/src/components/Table/Table.scss b/packages/components/src/components/Table/Table.scss index 6db70eca7..35f27eb92 100644 --- a/packages/components/src/components/Table/Table.scss +++ b/packages/components/src/components/Table/Table.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2023 The Tekton Authors +Copyright 2019-2024 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -14,7 +14,7 @@ limitations under the License. .tkn--table { // add space between adjacent tables ~ .tkn--table { - margin-top: $spacing-05; + margin-block-start: $spacing-05; } .#{$prefix}--table-toolbar { @@ -22,22 +22,22 @@ limitations under the License. } .#{$prefix}--data-table.#{$prefix}--data-table--short td.#{$prefix}--table-expand { - height: 2rem; + block-size: 2rem; } .#{$prefix}--data-table-header { - padding-left: 0; - padding-bottom: $spacing-03; + padding-inline-start: 0; + padding-block-end: $spacing-03; } .#{$prefix}--data-table-container { - margin-top: 0; - width: 100%; + margin-block-start: 0; + inline-size: 100%; } .#{$prefix}--data-table td { &:not(.cell-actions):not(.#{$prefix}--table-column-checkbox) { - max-width: 10vw; + max-inline-size: 10vi; vertical-align: middle; span { @@ -49,34 +49,34 @@ limitations under the License. } &.#{$prefix}--table-column-checkbox { - padding-top: 0; - padding-bottom: 0; + padding-block-start: 0; + padding-block-end: 0; vertical-align: middle; .#{$prefix}--checkbox-label { - padding-left: $spacing-05; + padding-inline-start: $spacing-05; } } &.cell-actions { - width: 3rem; + inline-size: 3rem; } &.cell-run, &.cell-time { svg { - margin-right: 6px; + margin-inline-end: 6px; vertical-align: middle; } } &.cell-run svg { - width: 14px; - height: 14px; + inline-size: 14px; + block-size: 14px; } &.cell-time svg { - width: 12px; - height: 12px; + inline-size: 12px; + block-size: 12px; } &.cell-actions { @@ -91,7 +91,7 @@ limitations under the License. } .noRows { - width: 100%; + inline-size: 100%; text-align: center; font-style: italic; font-size: 1rem; @@ -100,8 +100,8 @@ limitations under the License. &.tkn--table--inline-actions { .#{$prefix}--data-table td { &.cell-actions { - text-align: right; - width: 8rem; + text-align: end; + inline-size: 8rem; } } } @@ -131,37 +131,39 @@ limitations under the License. background-color: $ui-01; display: flex; align-items: center; - border-right: 1px solid $ui-03; - margin-right: 0; - padding-right: $spacing-03; + border-inline-end: 1px solid $ui-03; + margin-inline-end: 0; + padding-inline-end: $spacing-03; white-space: nowrap; .#{$prefix}--label { - padding-left: $spacing-05; + padding-inline-start: $spacing-05; } .#{$prefix}--text-input { - padding: 0 $spacing-07 0 $spacing-03; + padding-block: 0; + padding-inline-start: $spacing-03; + padding-inline-end: $spacing-07; } .#{$prefix}--list-box__menu-icon { - right: $spacing-03; + inset-inline-end: $spacing-03; } .#{$prefix}--dropdown, .#{$prefix}--multi-select { - width: 10rem; + inline-size: 10rem; } .#{$prefix}--multi-select--inline, .#{$prefix}--list-box--inline { background-color: $ui-01; - height: 100%; - max-height: 3rem; + block-size: 100%; + max-block-size: 3rem; } .#{$prefix}--list-box__field { - height: 100%; + block-size: 100%; input.#{$prefix}--text-input { &:placeholder-shown { @@ -171,7 +173,7 @@ limitations under the License. } &.#{$prefix}--dropdown__wrapper--inline .#{$prefix}--label { - padding-left: 1rem; + padding-inline-start: 1rem; } @media (max-width: 672px) { @@ -184,8 +186,8 @@ limitations under the License. } &.tkn--table-with-details tbody td { - padding-top: 14px; - padding-bottom: 14px; + padding-block-start: 14px; + padding-block-end: 14px; &:not(.cell-actions):not(.#{$prefix}--table-column-checkbox) > div { display: flex; @@ -197,20 +199,20 @@ limitations under the License. } &.#{$prefix}--table-column-checkbox { - padding-top: 12px; + padding-block-start: 12px; vertical-align: baseline; } &.cell-actions { - padding-top: 2px; + padding-block-start: 2px; } &.cell-status .tkn--table--sub { - margin-left: 1.7rem; + margin-inline-start: 1.7rem; } .tkn--table--sub { - margin-top: 2px; + margin-block-start: 2px; } } diff --git a/packages/components/src/components/Task/Task.scss b/packages/components/src/components/Task/Task.scss index ddc849d38..708dfda6d 100644 --- a/packages/components/src/components/Task/Task.scss +++ b/packages/components/src/components/Task/Task.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2023 The Tekton Authors +Copyright 2019-2024 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -19,33 +19,38 @@ limitations under the License. display: flex; align-items: center; position: relative; - padding: 0 1rem 0 .75rem; + padding-block: 0; + padding-inline-start: 0.75rem; + padding-inline-end: 1rem; font-size: 0.76rem; letter-spacing: 0.06rem; font-weight: bold; line-height: 2.2rem; text-decoration: none; color: inherit; - margin: 1rem 1rem 0 0; + margin-block-start: 1rem; + margin-inline-end: 1rem; + margin-block-end: 0; + margin-inline-start: 0; white-space: nowrap; background-color: $ui-01; - border-left: 3px solid transparent; + border-inline-start: 3px solid transparent; > .tkn--status-icon { - margin-right: 0.75rem; + margin-inline-end: 0.75rem; &.tkn--status-icon--warning { - width: 24px; - height: 24px; - margin-top: 2px; - margin-right: 0.5rem; + inline-size: 24px; + block-size: 24px; + margin-block-start: 2px; + margin-inline-end: 0.5rem; } } &:focus, &:hover { background-color: $hover-ui; text-decoration: none; - border-left-color: $hover-ui; + border-inline-start-color: $hover-ui; } .tkn--task-link--name { @@ -61,29 +66,29 @@ limitations under the License. > .#{$prefix}--overflow-menu { flex-shrink: 0; - margin-right: 10px; + margin-inline-end: 10px; } } &[data-selected] > .tkn--task-link { - border-left: 3px solid $interactive-04; - margin-right: 0; + border-inline-start: 3px solid $interactive-04; + margin-inline-end: 0; } &[data-active] > .tkn--task-link { - margin-right: 0; + margin-inline-end: 0; .tkn--task--expand-icon { /* needed when we support expanding multiple tasks */ - margin-right: 1rem; + margin-inline-end: 1rem; } } .#{$prefix}--dropdown__wrapper.#{$prefix}--dropdown__wrapper--inline { position: relative; - left: -1.5rem; + inset-inline-start: -1.5rem; grid-gap: 0; - margin-left: 0.5rem; + margin-inline-start: 0.5rem; } &:not([data-succeeded]) > .tkn--task-link { @@ -94,7 +99,7 @@ limitations under the License. } &:first-child > .tkn--task-link { - margin-top: 0; + margin-block-start: 0; } .tkn--step-list { @@ -103,7 +108,7 @@ limitations under the License. } .tkn--task--retries-menu-options { - max-height: 350px; + max-block-size: 350px; overflow: auto; .#{$prefix}--overflow-menu-options__option { diff --git a/packages/components/src/components/TaskRunDetails/TaskRunDetails.scss b/packages/components/src/components/TaskRunDetails/TaskRunDetails.scss index cd0a61c79..762ae433e 100644 --- a/packages/components/src/components/TaskRunDetails/TaskRunDetails.scss +++ b/packages/components/src/components/TaskRunDetails/TaskRunDetails.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2023 The Tekton Authors +Copyright 2019-2024 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -19,7 +19,7 @@ limitations under the License. overflow: hidden; .#{$prefix}--content-switcher { - margin-bottom: 1rem; + margin-block-end: 1rem; } /* @@ -27,7 +27,7 @@ limitations under the License. */ .#{$prefix}--data-table td { &:not(.cell-actions):not(.#{$prefix}--table-column-checkbox) { - max-width: none; + max-inline-size: none; } } } diff --git a/packages/components/src/components/TaskTree/TaskTree.scss b/packages/components/src/components/TaskTree/TaskTree.scss index 943a33a71..126b47f04 100644 --- a/packages/components/src/components/TaskTree/TaskTree.scss +++ b/packages/components/src/components/TaskTree/TaskTree.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2023 The Tekton Authors +Copyright 2019-2024 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -12,6 +12,6 @@ limitations under the License. */ .tkn--task-tree { - width: 21%; - min-width: 15rem; + inline-size: 21%; + min-inline-size: 15rem; } diff --git a/packages/components/src/components/Trigger/Trigger.scss b/packages/components/src/components/Trigger/Trigger.scss index c8ead264f..36eae2d70 100644 --- a/packages/components/src/components/Trigger/Trigger.scss +++ b/packages/components/src/components/Trigger/Trigger.scss @@ -12,20 +12,20 @@ limitations under the License. */ .tkn--trigger-interceptors { - margin-top: $spacing-05; + margin-block-start: $spacing-05; .tkn--trigger-interceptors-accordion { - margin-top: $spacing-03; + margin-block-start: $spacing-03; } } .tkn--trigger-details { - margin-top: $spacing-05; + margin-block-start: $spacing-05; } .tkn--trigger-resourcelinks { display: grid; - margin-top: $spacing-03; + margin-block-start: $spacing-03; grid-template-columns: 100px 500px; grid-gap: 30px; line-height: 1.5rem; @@ -45,11 +45,11 @@ limitations under the License. } .tkn--trigger-interceptor-secret-details { - margin-left: $spacing-04; + margin-inline-start: $spacing-04; } .tkn--trigger-interceptor-service-details { - margin-left: $spacing-04; + margin-inline-start: $spacing-04; .tkn--trigger .tkn--details & { p span:first-child { diff --git a/packages/components/src/components/ViewYAML/ViewYAML.scss b/packages/components/src/components/ViewYAML/ViewYAML.scss index 8b4c8d948..aa94e85e6 100644 --- a/packages/components/src/components/ViewYAML/ViewYAML.scss +++ b/packages/components/src/components/ViewYAML/ViewYAML.scss @@ -1,5 +1,5 @@ /* -Copyright 2020-2023 The Tekton Authors +Copyright 2020-2024 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -18,10 +18,10 @@ limitations under the License. .tkn--view-yaml--title { display: inline-block; - margin-bottom: .5rem; + margin-block-end: .5rem; &:not(:first-child) { - margin-top: 1rem; + margin-block-start: 1rem; } } @@ -32,15 +32,15 @@ pre.tkn--syntax-highlighter { .tkn--code-line { counter-increment: tkn--code-line; display: inline-flex; - width: 100%; + inline-size: 100%; } .tkn--code-line::before { content: counter(tkn--code-line); display: inline-block; - text-align: right; - min-width: var(--tkn--line-number--min-width, 1rem); - padding-right: 1rem; + text-align: end; + min-inline-size: var(--tkn--line-number--min-width, 1rem); + padding-inline-end: 1rem; user-select: none; } @@ -50,7 +50,7 @@ pre.tkn--syntax-highlighter { } .#{$prefix}--snippet--multi { - max-width: none; + max-inline-size: none; // Styles based on a11y-dark by @ericwbailey &.hljs { diff --git a/packages/components/src/scss/Run.scss b/packages/components/src/scss/Run.scss index ee18b7787..0211ad829 100644 --- a/packages/components/src/scss/Run.scss +++ b/packages/components/src/scss/Run.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2023 The Tekton Authors +Copyright 2019-2024 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -14,7 +14,7 @@ limitations under the License. .tkn--tasks { display: flex; flex-wrap: nowrap; - min-height: calc(100vh - 16rem); + min-block-size: calc(100vb - 16rem); align-items: stretch; .tkn--task-tree { @@ -24,13 +24,13 @@ limitations under the License. .tkn--step-details { background-color: $ui-01; flex-grow: 1; - padding-left: 1rem; + padding-inline-start: 1rem; } .#{$prefix}--data-table { td { background-color: $ui-02; - border-top-color: $ui-02; + border-block-start-color: $ui-02; } tr:hover td { background-color: $hover-ui; diff --git a/packages/graph/src/components/ZoomablePipelineGraph.scss b/packages/graph/src/components/ZoomablePipelineGraph.scss index 4ff815702..9c50d56c6 100644 --- a/packages/graph/src/components/ZoomablePipelineGraph.scss +++ b/packages/graph/src/components/ZoomablePipelineGraph.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2023 The Tekton Authors +Copyright 2019-2024 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -15,13 +15,13 @@ limitations under the License. display: flex; flex-direction: column; align-items: center; - width: 300px; - height: 600px; + inline-size: 300px; + block-size: 600px; overflow: hidden; outline: 1px solid $ui-03; .toolbar { - width: 100%; + inline-size: 100%; align-self: bottom; text-align: center; background-color: $ui-03; diff --git a/packages/graph/src/components/newGraph.scss b/packages/graph/src/components/newGraph.scss index d73b7c377..2ea29403b 100644 --- a/packages/graph/src/components/newGraph.scss +++ b/packages/graph/src/components/newGraph.scss @@ -1,5 +1,5 @@ /* -Copyright 2022-2023 The Tekton Authors +Copyright 2022-2024 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -44,13 +44,13 @@ limitations under the License. } .#{$prefix}--cc--shape-node__icon .#{$prefix}--tooltip__label .#{$prefix}--tooltip__trigger { - margin-left: 0; + margin-inline-start: 0; } .status-icon { .#{$prefix}--cc--shape-node__icon & { - width: 24px; - height: 24px; + inline-size: 24px; + block-size: 24px; } &.status-icon-failed { @@ -76,5 +76,5 @@ limitations under the License. .tkn--pipeline-graph > svg { position: relative; - margin-top: 1rem; + margin-block-start: 1rem; } diff --git a/src/containers/About/About.scss b/src/containers/About/About.scss index 2919d6bf3..7aa0d2059 100644 --- a/src/containers/About/About.scss +++ b/src/containers/About/About.scss @@ -1,5 +1,5 @@ /* -Copyright 2020-2023 The Tekton Authors +Copyright 2020-2024 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -12,7 +12,9 @@ limitations under the License. */ .tkn--about { - margin: -1.5rem -2rem 0 -2rem; + margin-block-start: -1.5rem; + margin-block-end: 0; + margin-inline: -2rem; .tkn--css-grid { row-gap: calc(var(--tkn-grid-gutter) / 2); @@ -20,7 +22,7 @@ limitations under the License. .tkn--about-header { background-color: $ui-01; - height: 15rem; + block-size: 15rem; overflow: hidden; header { @@ -37,8 +39,8 @@ limitations under the License. h1 { @include type-style('productive-heading-04'); color: $text-01; - margin-top: 2rem; - margin-bottom: 1rem; + margin-block-start: 2rem; + margin-block-end: 1rem; } p { @@ -48,9 +50,9 @@ limitations under the License. } img { - height: 30rem; - margin-top: -2rem; - margin-right: -2rem; + block-size: 30rem; + margin-block-start: -2rem; + margin-inline-end: -2rem; grid-column: span 2 / -1; @media (min-width: $tkn--breakpoint-lg) { @@ -60,7 +62,7 @@ limitations under the License. } section { - margin-top: 2rem; + margin-block-start: 2rem; &::after { content: ''; @@ -78,7 +80,7 @@ limitations under the License. } &.tkn--about-docs { - margin-top: 3rem; + margin-block-start: 3rem; &::after { grid-row: 1 / 6; @@ -104,9 +106,9 @@ limitations under the License. flex-direction: column; justify-content: space-between; - min-height: 14rem; + min-block-size: 14rem; grid-column-end: span 2; - margin-left: -1rem; + margin-inline-start: -1rem; @media (min-width: $tkn--breakpoint-md) { grid-column-end: span 3; @@ -124,22 +126,22 @@ limitations under the License. h3 { @include type-style('productive-heading-01'); color: $text-01; - margin-bottom: 1rem; + margin-block-end: 1rem; } dt { @include type-style('label-01'); color: $text-02; - margin-bottom: 0.25rem; + margin-block-end: 0.25rem; } dd { @include type-style('body-short-01'); color: $text-01; - margin-bottom: $spacing-05; + margin-block-end: $spacing-05; &:last-child { - margin-bottom: $spacing-03; + margin-block-end: $spacing-03; } } @@ -148,13 +150,16 @@ limitations under the License. display: flex; justify-content: center; // pull background out to edges of tile but leave gap below - margin: -1rem -1rem 1rem -1rem; - padding: 3rem 0; + margin-block-start: -1rem; + margin-block-end: 1rem; + margin-inline: -1rem; + padding-block: 3rem; + padding-inline: 0; background-color: $inverse-02; svg { fill: $inverse-01; - width: clamp(48px, 20%, 64px); + inline-size: clamp(48px, 20%, 64px); } } @@ -164,14 +169,14 @@ limitations under the License. } h3 { - margin-bottom: 1rem; + margin-block-end: 1rem; } p { @include type-style('body-short-01'); color: $text-01; - margin-bottom: 1rem; - min-height: 2rem; + margin-block-end: 1rem; + min-block-size: 2rem; } .tkn--about-arrow { @@ -194,7 +199,7 @@ limitations under the License. justify-content: center; img { - width: 200px; + inline-size: 200px; margin: $spacing-07; } } diff --git a/src/containers/EventListener/EventListener.scss b/src/containers/EventListener/EventListener.scss index 0a59a45a5..d9e3f6c61 100644 --- a/src/containers/EventListener/EventListener.scss +++ b/src/containers/EventListener/EventListener.scss @@ -14,5 +14,5 @@ limitations under the License. @import '../../scss/Triggers.scss'; .tkn--eventlistener--triggers { - margin-top: $spacing-06; + margin-block-start: $spacing-06; } diff --git a/src/containers/ImportResources/ImportResources.scss b/src/containers/ImportResources/ImportResources.scss index 53f8b413e..34558fcac 100644 --- a/src/containers/ImportResources/ImportResources.scss +++ b/src/containers/ImportResources/ImportResources.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2023 The Tekton Authors +Copyright 2019-2024 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -22,41 +22,44 @@ limitations under the License. align-items: center; .#{$prefix}--tooltip__trigger { - margin-left: 0.5rem; + margin-inline-start: 0.5rem; } } .#{$prefix}--combo-box.#{$prefix}--list-box, .#{$prefix}--dropdown.#{$prefix}--list-box, .#{$prefix}--text-input__field-wrapper { - width: 50%; - min-width: 300px; + inline-size: 50%; + min-inline-size: 300px; } .#{$prefix}--combo-box.#{$prefix}--list-box { - max-width: 350px; + max-inline-size: 350px; } .#{$prefix}--toast-notification { - margin: 2rem 0 1rem 0; + margin-block-start: 2rem; + margin-block-end: 1rem; + margin-inline: 0; } .#{$prefix}--form-item, .#{$prefix}--list-box__wrapper { - margin-bottom: 1.5rem; + margin-block-end: 1.5rem; } .#{$prefix}--btn { - margin-top: 1rem; + margin-block-start: 1rem; } .#{$prefix}--accordion { - margin-bottom: 1rem; + margin-block-end: 1rem; .#{$prefix}--accordion__content, .#{$prefix}--accordion__item--active .#{$prefix}--accordion__content { - padding: .5rem 0; - margin-left: 0; + padding-block: 0.5rem; + padding-inline: 0; + margin-inline-start: 0; } } } diff --git a/src/containers/LoadingShell/LoadingShell.scss b/src/containers/LoadingShell/LoadingShell.scss index 4896987ec..6117fe078 100644 --- a/src/containers/LoadingShell/LoadingShell.scss +++ b/src/containers/LoadingShell/LoadingShell.scss @@ -18,17 +18,17 @@ limitations under the License. .#{$prefix}--content { background-color: $ui-background; transform: none; - padding-top: $spacing-06; + padding-block-start: $spacing-06; } } .tkn--config-loading-nav-skeleton { .#{$prefix}--skeleton__text { - margin-left: 1rem; + margin-inline-start: 1rem; } .#{$prefix}--skeleton__heading { - margin-top: 1.5rem; + margin-block-start: 1.5rem; } } @@ -49,7 +49,7 @@ limitations under the License. } .#{$prefix}--side-nav__item:last-child { - margin-bottom: 1rem; + margin-block-end: 1rem; } } } diff --git a/src/containers/NotFound/NotFound.scss b/src/containers/NotFound/NotFound.scss index 499c5eb04..94555a98c 100644 --- a/src/containers/NotFound/NotFound.scss +++ b/src/containers/NotFound/NotFound.scss @@ -1,5 +1,5 @@ /* -Copyright 2021 The Tekton Authors +Copyright 2021-2024 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -15,19 +15,19 @@ limitations under the License. display: flex; flex-direction: column; justify-content: center; - height: 100%; - margin-top: -3rem; + block-size: 100%; + margin-block-start: -3rem; img { - width: 100%; - max-width: 320px; + inline-size: 100%; + max-inline-size: 320px; } h1 { @include type-style('productive-heading-05'); color: $text-01; - margin-top: $spacing-07; - margin-bottom: $spacing-05; + margin-block-start: $spacing-07; + margin-block-end: $spacing-05; } p { @@ -36,7 +36,7 @@ limitations under the License. } ul li { - margin-top: $spacing-03; + margin-block-start: $spacing-03; &::before { content: '↳ '; diff --git a/src/containers/Settings/Settings.scss b/src/containers/Settings/Settings.scss index 6ea5c5f73..c0bc3d860 100644 --- a/src/containers/Settings/Settings.scss +++ b/src/containers/Settings/Settings.scss @@ -1,5 +1,5 @@ /* -Copyright 2021-2023 The Tekton Authors +Copyright 2021-2024 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -14,11 +14,11 @@ limitations under the License. .tkn--settings { .tkn--settings--content { .#{$prefix}--tile-group { - margin-bottom: 2rem; - max-width: 400px; + margin-block-end: 2rem; + max-inline-size: 400px; legend { - margin-bottom: 1rem; + margin-block-end: 1rem; } .#{$prefix}--tile { @@ -26,7 +26,7 @@ limitations under the License. align-items: center; .#{$prefix}--tile__checkmark { - top: calc(50% - 0.5rem); + inset-block-start: calc(50% - 0.5rem); } .#{$prefix}--tile-content { @@ -35,18 +35,18 @@ limitations under the License. svg { fill: $icon-01; - margin-right: 0.5rem; + margin-inline-end: 0.5rem; } } } .#{$prefix}--tile:not(:last-child) { - margin-bottom: 0.5rem; + margin-block-end: 0.5rem; } } .#{$prefix}--form-item + .#{$prefix}--form-item { - margin-top: 2rem; + margin-block-start: 2rem; } } } diff --git a/src/containers/SideNav/SideNav.scss b/src/containers/SideNav/SideNav.scss index 41102fe2b..0a81f6360 100644 --- a/src/containers/SideNav/SideNav.scss +++ b/src/containers/SideNav/SideNav.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2023 The Tekton Authors +Copyright 2019-2024 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -34,13 +34,13 @@ limitations under the License. } .#{$prefix}--side-nav__item:last-child { - margin-bottom: 1rem; + margin-block-end: 1rem; } } .#{$prefix}--side-nav__icon { &:not(.#{$prefix}--side-nav__submenu-chevron) { - margin-right: 1rem; + margin-inline-end: 1rem; } & > svg path { @@ -50,11 +50,12 @@ limitations under the License. &:not(.#{$prefix}--side-nav--expanded) { .#{$prefix}--side-nav__submenu { - padding: 0 .875rem; + padding-block: 0; + padding-inline: 0.875rem; } .#{$prefix}--side-nav__icon:not(.#{$prefix}--side-nav__submenu-chevron) > svg { - width: 1.25rem; - height: 1.25rem; + inline-size: 1.25rem; + block-size: 1.25rem; } } @@ -76,10 +77,10 @@ limitations under the License. } .#{$prefix}--side-nav__item.#{$prefix}--side-nav__item--icon { - margin-bottom: 1rem; + margin-block-end: 1rem; a.#{$prefix}--side-nav__link { - padding-left: 3rem; + padding-inline-start: 3rem; } } diff --git a/src/scss/App.scss b/src/scss/App.scss index 2ed57ef7a..1d9699d8e 100644 --- a/src/scss/App.scss +++ b/src/scss/App.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2023 The Tekton Authors +Copyright 2019-2024 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -55,17 +55,17 @@ limitations under the License. html, #root, .tkn--main-content { - height: 100%; + block-size: 100%; } body { // to prevent unwanted scroll when content doesn't fill full height - height: calc(100% - 3rem); + block-size: calc(100% - 3rem); } #main-content { // height of the main header, added for accessibility of skip to main content link - scroll-margin-top: 3rem; + scroll-margin-block-start: 3rem; } a { @@ -81,11 +81,11 @@ a { position: relative; background-color: $ui-background; transform: none; - padding-top: $spacing-06; + padding-block-start: $spacing-06; h1 { @include type-style('productive-heading-04'); - margin-bottom: $spacing-06; + margin-block-end: $spacing-06; } h2 { @@ -96,20 +96,20 @@ a { .#{$prefix}--modal-header, .#{$prefix}--modal-content { - width: 100%; + inline-size: 100%; } .#{$prefix}--modal-content, .#{$prefix}--modal-header { - padding-right: 1rem; + padding-inline-end: 1rem; } .#{$prefix}--modal-content { - margin-bottom: $spacing-07; + margin-block-end: $spacing-07; } .#{$prefix}--data-table-container { - margin-top: $spacing-07; + margin-block-start: $spacing-07; } .#{$prefix}--table-header-label { @@ -117,15 +117,15 @@ a { } .#{$prefix}--list--unordered { - margin-top: 1rem; + margin-block-start: 1rem; } #tkn--maximized-logs-container { position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100vh; + inset-block-start: 0; + inset-inline-start: 0; + inline-size: 100%; + block-size: 100vb; z-index: -1; &:not(:empty) { @@ -133,7 +133,7 @@ a { } .tkn--log { - min-height: 100%; + min-block-size: 100%; } } diff --git a/src/scss/Create.scss b/src/scss/Create.scss index b4cb44926..6a764e164 100644 --- a/src/scss/Create.scss +++ b/src/scss/Create.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2023 The Tekton Authors +Copyright 2019-2024 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -13,12 +13,12 @@ limitations under the License. .tkn--create { .#{$prefix}--fieldset:not(:last-of-type) { - margin-bottom: 0; + margin-block-end: 0; } .#{$prefix}--form__helper-text { color: $text-05; // Since by default the contrast/colour choice is barely readable. - max-width: 100%; + max-inline-size: 100%; } .#{$prefix}--label--disabled { @@ -26,17 +26,17 @@ limitations under the License. } .#{$prefix}--text-input__field-wrapper { - width: 100%; + inline-size: 100%; } .#{$prefix}--list-box__wrapper, .#{$prefix}--form-item { - margin-bottom: $spacing-06; - max-width: 40rem; + margin-block-end: $spacing-06; + max-inline-size: 40rem; } .#{$prefix}--btn.#{$prefix}--btn--secondary { - margin-left: $spacing-03; + margin-inline-start: $spacing-03; } } diff --git a/src/scss/Definitions.scss b/src/scss/Definitions.scss index defe518bb..6f1e5c780 100644 --- a/src/scss/Definitions.scss +++ b/src/scss/Definitions.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2023 The Tekton Authors +Copyright 2019-2024 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -12,9 +12,9 @@ limitations under the License. */ .tkn--header-skeleton { - margin-top: 0.9rem; - height: 2rem; - width: 15rem; + margin-block-start: 0.9rem; + block-size: 2rem; + inline-size: 15rem; } main { @@ -23,7 +23,7 @@ main { } .#{$prefix}--inline-notification { - max-width: 100%; + max-inline-size: 100%; .#{$prefix}--inline-notification__text-wrapper { align-items: center; @@ -32,5 +32,5 @@ main { } .tkn--resource-info-icon { - float: right; + float: inline-end; } diff --git a/src/scss/Triggers.scss b/src/scss/Triggers.scss index 93d39cc76..0d1f8f19f 100644 --- a/src/scss/Triggers.scss +++ b/src/scss/Triggers.scss @@ -1,5 +1,5 @@ /* -Copyright 2019-2023 The Tekton Authors +Copyright 2019-2024 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -16,17 +16,17 @@ limitations under the License. display: flex; .tkn--actions-dropdown { - margin-left: auto; - margin-right: 1rem; + margin-inline-start: auto; + margin-inline-end: 1rem; } } .tkn--details { li:not(:empty), p:not(:empty) { @include type-style('body-short-02'); - margin-top: $spacing-03; + margin-block-start: $spacing-03; span:first-child { font-weight: bold; - margin-right: $spacing-02; + margin-inline-end: $spacing-02; } .#{$prefix}--link span { @@ -38,7 +38,7 @@ limitations under the License. .#{$prefix}--data-table-container { .#{$prefix}--data-table { .cell-description { - max-width: 30vw; + max-inline-size: 30vi; } } } @@ -46,32 +46,32 @@ limitations under the License. } .#{$prefix}--snippet--multi { - margin-top: $spacing-03 + margin-block-start: $spacing-03 } .tkn--trigger-details { .#{$prefix}--list--unordered { position: relative; - top: 2px; + inset-block-start: 2px; } } } .tkn--resourcedetails-metadata { - margin-bottom: $spacing-05; + margin-block-end: $spacing-05; padding: $spacing-05; background-color: $ui-01; .#{$prefix}--tag { - margin-top: 0; + margin-block-start: 0; } & + h4 { - margin-bottom: 0.5rem; + margin-block-end: 0.5rem; } svg { vertical-align: sub; - margin-right: 0.5rem; + margin-inline-end: 0.5rem; } } diff --git a/src/scss/_grid.scss b/src/scss/_grid.scss index d4fee2fa5..d4e60e599 100644 --- a/src/scss/_grid.scss +++ b/src/scss/_grid.scss @@ -1,5 +1,5 @@ /* -Copyright 2021 The Tekton Authors +Copyright 2021-2024 The Tekton Authors Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at @@ -37,10 +37,9 @@ $tkn--breakpoint-max: 1584px; .tkn--css-grid { display: grid; - max-width: 99rem; - padding-right: calc(var(--tkn-grid-margin) + var(--tkn-grid-gutter) / 2); - padding-left: calc(var(--tkn-grid-margin) + var(--tkn-grid-gutter) / 2); - margin-right: auto; + max-inline-size: 99rem; + padding-inline: calc(var(--tkn-grid-margin) + var(--tkn-grid-gutter) / 2); + margin-inline-end: auto; column-gap: var(--tkn-grid-gutter); grid-template-columns: repeat( var(--tkn-grid-columns),