diff --git a/src/anchor-navigation/styles.scss b/src/anchor-navigation/styles.scss index bbed9b1458..b77d61f4a7 100644 --- a/src/anchor-navigation/styles.scss +++ b/src/anchor-navigation/styles.scss @@ -39,10 +39,6 @@ $guide-line-offset: -2px; // Negative to expand 2px beyond the element } .anchor-item { - @include styles.with-motion { - transition: awsui.$motion-duration-slow; - transition-property: all; - } @include styles.font-body-m; color: awsui.$color-text-body-secondary; @@ -50,6 +46,11 @@ $guide-line-offset: -2px; // Negative to expand 2px beyond the element margin-block: awsui.$space-scaled-xxs; margin-inline: 0; + @include styles.with-motion { + transition: awsui.$motion-duration-slow; + transition-property: all; + } + &--active { position: relative; diff --git a/src/column-layout/styles.scss b/src/column-layout/styles.scss index f076700420..e20e0de495 100644 --- a/src/column-layout/styles.scss +++ b/src/column-layout/styles.scss @@ -112,9 +112,9 @@ div.column-layout { } &.grid-variant-text-grid { - @include make-vertical-borders('inline-start'); margin-block: calc(-1 * #{$grid-gutter-width} / 2); margin-inline: calc(-1 * #{$grid-gutter-width}); + @include make-vertical-borders('inline-start'); } /* stylelint-disable-next-line selector-max-universal */ &:not(.grid-no-gutters) > * { diff --git a/src/internal/styles/links.scss b/src/internal/styles/links.scss index e0b685e67d..645f37904f 100644 --- a/src/internal/styles/links.scss +++ b/src/internal/styles/links.scss @@ -50,20 +50,20 @@ } @mixin link-default($font-size: 'inherit') { - @include link-variant-style(map.get(constants.$link-variants, 'secondary')); @include link-font-size-style(map.get(constants.$link-font-sizes, $font-size)); + @include link-variant-style(map.get(constants.$link-variants, 'secondary')); } -/* Style used for links in slots/components that are text heavy, to help links stand out among +/* Style used for links in slots/components that are text heavy, to help links stand out among surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */ @mixin link-inline($font-size: 'inherit') { - @include link-variant-style(map.get(constants.$link-variants, 'primary')); @include link-font-size-style(map.get(constants.$link-font-sizes, $font-size)); + @include link-variant-style(map.get(constants.$link-variants, 'primary')); } // Need style as a mixin for tag editor only, because it needs special keyup/keydown behavior and thus cannot use the Link component @mixin link-recovery($font-size: 'inherit') { @include typography.font-smoothing; - @include link-variant-style(map.get(constants.$link-variants, 'recovery')); @include link-font-size-style(map.get(constants.$link-font-sizes, $font-size)); + @include link-variant-style(map.get(constants.$link-variants, 'recovery')); } diff --git a/src/table/body-cell/styles.scss b/src/table/body-cell/styles.scss index 68f788e9ab..8875d2c7e4 100644 --- a/src/table/body-cell/styles.scss +++ b/src/table/body-cell/styles.scss @@ -118,17 +118,17 @@ $cell-negative-space-vertical: 2px; .body-cell { box-sizing: border-box; - @include cell-padding-inline-start($cell-horizontal-padding); - @include cell-padding-block-start($cell-vertical-padding); - @include cell-padding-block-end($cell-vertical-padding-w-border); - @include cell-padding-inline-end($cell-horizontal-padding); border-block-start: awsui.$border-divider-list-width solid transparent; word-wrap: break-word; border-block-end: awsui.$border-divider-list-width solid awsui.$color-border-divider-secondary; font-weight: inherit; - text-align: start; + @include cell-padding-inline-start($cell-horizontal-padding); + @include cell-padding-block-start($cell-vertical-padding); + @include cell-padding-block-end($cell-vertical-padding-w-border); + @include cell-padding-inline-end($cell-horizontal-padding); + &-content { box-sizing: border-box; } diff --git a/src/table/expandable-rows/styles.scss b/src/table/expandable-rows/styles.scss index a058f9f51e..d723555fa5 100644 --- a/src/table/expandable-rows/styles.scss +++ b/src/table/expandable-rows/styles.scss @@ -38,13 +38,12 @@ padding-inline: 0; background: none; outline: 0; + color: awsui.$color-text-interactive-default; @include focus-visible.when-visible { @include styles.focus-highlight(awsui.$space-button-inline-icon-focus-outline-gutter); } - color: awsui.$color-text-interactive-default; - &:hover { color: awsui.$color-text-interactive-hover; } diff --git a/src/table/header-cell/styles.scss b/src/table/header-cell/styles.scss index e5da8e3327..077fd0d94e 100644 --- a/src/table/header-cell/styles.scss +++ b/src/table/header-cell/styles.scss @@ -82,6 +82,11 @@ position: sticky; background: awsui.$color-background-table-header; z-index: 798; // Lower than the AppLayout's notification slot z-index(799) + @include styles.with-motion { + transition-property: padding; + transition-duration: awsui.$motion-duration-transition-show-quick; + transition-timing-function: awsui.$motion-easing-sticky; + } &-pad-left:not(.has-selection) { padding-inline-start: awsui.$space-table-horizontal; } @@ -106,12 +111,6 @@ clip-path: inset(0 -24px 0 0); } } - - @include styles.with-motion { - transition-property: padding; - transition-duration: awsui.$motion-duration-transition-show-quick; - transition-timing-function: awsui.$motion-easing-sticky; - } } } @@ -132,8 +131,8 @@ .header-cell-content { position: relative; padding-block: awsui.$space-scaled-xxs; - @include cell-offset(awsui.$space-s); padding-inline-end: awsui.$space-s; + @include cell-offset(awsui.$space-s); .header-cell-sortable > & { padding-inline-end: calc(#{awsui.$space-xl} + #{awsui.$space-xxs}); diff --git a/src/table/resizer/styles.scss b/src/table/resizer/styles.scss index 4c7374d645..2d8fe05a52 100644 --- a/src/table/resizer/styles.scss +++ b/src/table/resizer/styles.scss @@ -68,8 +68,8 @@ th:not(:last-child) > .divider { } &.has-focus { @include focus-visible.when-visible-unfocused { - @include styles.focus-highlight(calc(#{awsui.$space-table-header-focus-outline-gutter} - 2px)); position: absolute; + @include styles.focus-highlight(calc(#{awsui.$space-table-header-focus-outline-gutter} - 2px)); } } } diff --git a/src/table/styles.scss b/src/table/styles.scss index ac3b6bbbb5..62bbb1643d 100644 --- a/src/table/styles.scss +++ b/src/table/styles.scss @@ -22,14 +22,14 @@ padding-inline: 0; &-filtering { + max-inline-size: 100%; + margin-inline-end: awsui.$space-l; @supports (flex-basis: fit-content) { flex: 1 1 fit-content; } @supports not (flex-basis: fit-content) { flex: 1 1 auto; } - max-inline-size: 100%; - margin-inline-end: awsui.$space-l; } &-align-right { @@ -97,7 +97,7 @@ padding-inline: 0; &.has-footer { /* - Add a bottom border to the body cell of an empty table as a separator between the + Add a bottom border to the body cell of an empty table as a separator between the table and the footer */ border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default; @@ -127,7 +127,7 @@ } /* -The min/max/width token values in Visual Refresh should align +The min/max/width token values in Visual Refresh should align the table header and body cells selection control with the table filter search icon. */ diff --git a/src/tabs/tab-header-bar.scss b/src/tabs/tab-header-bar.scss index 2c96710db9..ba74b04900 100644 --- a/src/tabs/tab-header-bar.scss +++ b/src/tabs/tab-header-bar.scss @@ -178,6 +178,7 @@ $label-horizontal-spacing: awsui.$space-xs; padding-inline-start: calc(#{awsui.$space-xxs} - 1px); padding-inline-end: awsui.$space-xxs; + @include styles.font-smoothing; &.refresh { padding-block-start: calc(awsui.$space-static-xs - 1px); @@ -194,12 +195,10 @@ $label-horizontal-spacing: awsui.$space-xs; outline: none; } - @include styles.font-smoothing; - @include focus-visible.when-visible { z-index: 1; - @include styles.focus-highlight(awsui.$space-tabs-focus-outline-gutter); border-inline-end-color: transparent; + @include styles.focus-highlight(awsui.$space-tabs-focus-outline-gutter); } } diff --git a/src/tiles/styles.scss b/src/tiles/styles.scss index 233dfd3ca9..b76777524f 100644 --- a/src/tiles/styles.scss +++ b/src/tiles/styles.scss @@ -39,6 +39,12 @@ $gutter: awsui.$space-grid-gutter; padding-block: awsui.$space-xs; padding-inline: awsui.$space-scaled-m; + @include styles.with-motion { + transition: + border-color awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick, + background-color awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick; + } + &.refresh { padding-block: awsui.$space-xs; padding-inline: awsui.$space-s; @@ -66,12 +72,6 @@ $gutter: awsui.$space-grid-gutter; &.readonly { @include styles.form-readonly-element; } - - @include styles.with-motion { - transition: - border-color awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick, - background-color awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick; - } } .columns { diff --git a/src/toggle/styles.scss b/src/toggle/styles.scss index 81e713c994..69777e640d 100644 --- a/src/toggle/styles.scss +++ b/src/toggle/styles.scss @@ -60,6 +60,15 @@ $shadow-color: rgba(0, 0, 0, 0.25); inset-block-start: $handle-offset; inset-inline-start: $handle-offset; + @include styles.with-motion { + // Exception: The toggle state transition does not follow the motion guidelines + // for the "State transition (quick)" group and is therefore not using + // standard variables from that group. + transition: + transform awsui.$motion-duration-fast awsui.$motion-easing-ease-out-quart, + background-color awsui.$motion-duration-fast awsui.$motion-easing-ease-out-quart; + } + &-checked { transform: translateX(0.8 * styles.$base-size); @@ -79,13 +88,4 @@ $shadow-color: rgba(0, 0, 0, 0.25); background: awsui.$color-foreground-control-read-only; } } - - @include styles.with-motion { - // Exception: The toggle state transition does not follow the motion guidelines - // for the "State transition (quick)" group and is therefore not using - // standard variables from that group. - transition: - transform awsui.$motion-duration-fast awsui.$motion-easing-ease-out-quart, - background-color awsui.$motion-duration-fast awsui.$motion-easing-ease-out-quart; - } } diff --git a/src/tutorial-panel/components/tutorial-list/motion.scss b/src/tutorial-panel/components/tutorial-list/motion.scss index 56079b68e7..cb59f5f2f7 100644 --- a/src/tutorial-panel/components/tutorial-list/motion.scss +++ b/src/tutorial-panel/components/tutorial-list/motion.scss @@ -9,8 +9,8 @@ .content { &-enter { @include styles.with-motion { - @include styles.animation-fade-in; animation: awsui-motion-fade-in tokens.$motion-duration-show-paced tokens.$motion-easing-show-paced; + @include styles.animation-fade-in; } } }