From 96fbbff7ca45139e36bcf264780dbc9db17b2698 Mon Sep 17 00:00:00 2001 From: katarzynatobis Date: Tue, 13 Jun 2023 14:49:12 +0200 Subject: [PATCH 1/2] pressEffect mixin --- src/sass/_basics.scss | 7 +++++++ src/sass/_mixins.scss | 22 ++++++++++++++++++++++ 2 files changed, 29 insertions(+) diff --git a/src/sass/_basics.scss b/src/sass/_basics.scss index 772fdcfa9d..086d9b0ff2 100644 --- a/src/sass/_basics.scss +++ b/src/sass/_basics.scss @@ -36,6 +36,13 @@ $includeHtml: false !default; --focusInnerWidth: 2px; --focusOuterWidth: 2px; + --pressTransitionDuration: #{$durationModerate2}; + --pressTransitionEasing: #{$easingRegular}; + --pressScale: 0.96; + @media (prefers-reduced-motion) { + --pressScale: 1; + } + -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; diff --git a/src/sass/_mixins.scss b/src/sass/_mixins.scss index 4aa25d9d48..8acebf55c1 100644 --- a/src/sass/_mixins.scss +++ b/src/sass/_mixins.scss @@ -151,3 +151,25 @@ @mixin sgButtonHoverMix($color1, $color2, $percent) { background-color: mix($color1, $color2, $percent); } + +@mixin applyPressEffect($nestingSelector: null) { + @if ($nestingSelector) { + & #{$nestingSelector} { + transition-property: transform; + transition-duration: var(--pressTransitionDuration); + transition-timing-function: var(--pressTransitionEasing); + } + + &:active:not([disabled]) #{$nestingSelector} { + transform: scale(var(--pressScale)); + } + } @else { + transition-property: transform; + transition-duration: var(--pressTransitionDuration); + transition-timing-function: var(--pressTransitionEasing); + + &:active:not([disabled]) { + transform: scale(var(--pressScale)); + } + } +} From bc993326670718b9a2d407f6f38d7560ece17e1f Mon Sep 17 00:00:00 2001 From: katarzynatobis Date: Tue, 13 Jun 2023 14:52:29 +0200 Subject: [PATCH 2/2] apply pressEffect mixin --- src/components/buttons/_buttons.scss | 15 ++------------- src/components/buttons/_buttons_lite.scss | 5 ++--- src/components/chip/_chip.scss | 5 +++-- src/components/select-menu/_select-menu.scss | 8 +++----- 4 files changed, 10 insertions(+), 23 deletions(-) diff --git a/src/components/buttons/_buttons.scss b/src/components/buttons/_buttons.scss index 57ad1f941b..498a93e90d 100644 --- a/src/components/buttons/_buttons.scss +++ b/src/components/buttons/_buttons.scss @@ -19,6 +19,7 @@ $largeButtonSize: componentSize(l); .sg-button { @include applyFocus(); + @include applyPressEffect(); position: relative; display: inline-flex; @@ -36,26 +37,17 @@ $largeButtonSize: componentSize(l); color: $white; text-transform: uppercase; padding: 0 20px; - will-change: background-color, border-color; - transition-property: background-color, border-color; - transition-duration: 0.2s; - transition-timing-function: ease-in-out; box-sizing: border-box; touch-action: manipulation; -webkit-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); user-select: none; - transition: transform $durationModerate2 $easingRegular; cursor: default; &[href] { cursor: pointer; } - &:active:not([disabled]) { - transform: scale(0.96); - } - &:disabled { @media (forced-colors: active) { color: GrayText; @@ -401,6 +393,7 @@ $largeButtonSize: componentSize(l); &--icon-only { padding: 0; width: $mediumButtonSize; + --pressScale: 0.92; &.sg-button--s { width: $smallButtonSize; @@ -429,10 +422,6 @@ $largeButtonSize: componentSize(l); clip: rect(0, 0, 0, 0); border: none; } - - &:active:not([disabled]) { - transform: scale(0.92); - } } @media (forced-colors: active) { diff --git a/src/components/buttons/_buttons_lite.scss b/src/components/buttons/_buttons_lite.scss index 8140584a9f..8d72f54fa0 100644 --- a/src/components/buttons/_buttons_lite.scss +++ b/src/components/buttons/_buttons_lite.scss @@ -1,4 +1,6 @@ .sg-button-lite { + @include applyPressEffect(); + // color variables --button-lite-solid-background-color: transparent; --button-lite-hover-background-color: var(--gray-50); @@ -20,7 +22,6 @@ justify-content: center; align-items: center; color: var(--button-lite-label-color); - transition: transform $durationModerate2 $easingRegular; touch-action: manipulation; -webkit-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); @@ -80,8 +81,6 @@ } &:active { - transform: scale(0.96); - &::before { background: var(--button-lite-active-background-color); opacity: 0.2; diff --git a/src/components/chip/_chip.scss b/src/components/chip/_chip.scss index b275d1b98c..b907179769 100644 --- a/src/components/chip/_chip.scss +++ b/src/components/chip/_chip.scss @@ -10,6 +10,8 @@ user-select: none; &__input { + @include applyPressEffect('+ .sg-chip__pill'); + width: 100%; height: 100%; z-index: 1; @@ -77,7 +79,6 @@ &:active + .sg-chip__pill { background-color: rgba($gray-40, 0.2); - transform: scale(0.96); } } } @@ -94,7 +95,7 @@ border-radius: var(--border-radius-xs); transition: box-shadow $durationQuick1 $easingExit, border-color $durationModerate1 $easingLinear, - transform $durationModerate2 $easingRegular, + transform var(--pressTransitionDuration) var(--pressTransitionEasing), background-color $durationModerate1 $easingLinear; @media (forced-colors: active) { diff --git a/src/components/select-menu/_select-menu.scss b/src/components/select-menu/_select-menu.scss index 1f3ba7b9c8..1e520dc85a 100644 --- a/src/components/select-menu/_select-menu.scss +++ b/src/components/select-menu/_select-menu.scss @@ -292,6 +292,8 @@ } &__option { + @include applyPressEffect(); + padding: 8px 12px; width: 100%; display: flex; @@ -301,11 +303,7 @@ border-radius: var(--border-radius-xs); cursor: default; transition: background-color $durationModerate1 $easingLinear, - transform $durationModerate2 $easingRegular; - - &:active:not([disabled]) { - transform: scale(0.96); - } + transform var(--pressTransitionDuration) var(--pressTransitionEasing); &:hover { background-color: var(--gray-10);