From 040f3d1c9931930aa62dd2b2b02033ead8613a1a Mon Sep 17 00:00:00 2001 From: Anton Kovalchuck Date: Sat, 7 Jun 2025 16:30:21 +0300 Subject: [PATCH 1/3] Added hover style for table widget --- .../asset/ui/src/scss/_table-widget.scss | 91 +++++++++++++++++++ .../modules/table-widget/views/widget.html | 1 + 2 files changed, 92 insertions(+) diff --git a/website/modules/asset/ui/src/scss/_table-widget.scss b/website/modules/asset/ui/src/scss/_table-widget.scss index a8171ae0..418ae4bd 100644 --- a/website/modules/asset/ui/src/scss/_table-widget.scss +++ b/website/modules/asset/ui/src/scss/_table-widget.scss @@ -35,10 +35,46 @@ width: 100%; border: 1px solid $gray-200; padding: 24px; + position: relative; + overflow: hidden; + cursor: pointer; + @include transition(all, 0.5s); + transform: scale3d(1, 1, 1); &:not(:last-child) { border-bottom: none; } + + .background-circle { + display: none; + @include decorative-background-circle($gray-500, 25%, 130%, 100%, -100% -60% auto auto, -10); + } + + &:hover, + &:focus { + transform: scale3d(1.03, 1.03, 1); + z-index: 10; + outline: none; + border-color: black; + + .sf-table-title, + .sf-table-cell-title { + color: $gray-100; + } + + .sf-table-cell-description, + .sf-table-link a { + color: $gray-200; + } + + .background-circle { + display: block; + width: 150em; + height: 50em; + transform: translate3d(-5%, -10%, 0); + } + } + @include breakpoint-medium { padding: 40px; margin: 0 -1px 0 0; @@ -48,6 +84,57 @@ border: 1px solid $gray-200; } + .background-circle { + @include decorative-background-circle($gray-500, 25%, 130%, 100%, -100% -60% auto auto, -10); + } + + &:hover { + transform: scale3d(1.03, 1.03, 1); + z-index: 10; + border-color: black; + + .sf-table-title, + .sf-table-cell-title { + color: $gray-100; + } + + .sf-table-cell-description, + .sf-table-link a { + color: $gray-200; + } + + .background-circle { + width: 150em; + height: 50em; + transform: translate3d(-5%, -10%, 0); + } + } + + // Remove focus effect on desktop (only hover) + &:focus { + transform: scale3d(1, 1, 1); + z-index: auto; + + .sf-table-title, + .sf-table-cell-title { + color: $gray-500; + } + + .sf-table-cell-description { + color: $gray-300; + } + + .sf-table-link a { + color: $gray-300; + } + + .background-circle { + width: 130%; + height: 100%; + transform: none; + } + } + // prettier-ignore &:nth-child(3n+6) { border-top: none; @@ -68,6 +155,7 @@ font-weight: 700; font-size: 14px; color: $gray-500; + @include transition(color); @include breakpoint-medium { font-size: 22px; @@ -79,6 +167,7 @@ font-size: 18px; color: $gray-500; margin: 0; + @include transition(color); @include breakpoint-medium { font-size: 22px; @@ -90,6 +179,7 @@ font-weight: 500; font-size: 14px; color: $gray-300; + @include transition(color); p { margin: 24px 0 0; @@ -110,6 +200,7 @@ text-decoration: underline; font-weight: 300; font-size: 11px; + @include transition(color); &:hover { text-decoration: none; diff --git a/website/modules/table-widget/views/widget.html b/website/modules/table-widget/views/widget.html index 54f6289c..e34151c6 100644 --- a/website/modules/table-widget/views/widget.html +++ b/website/modules/table-widget/views/widget.html @@ -39,6 +39,7 @@

{{ row.title }}

{% endif %} +
{% endfor %} From dce598b6f730613f7c566f0c78bdab88264955bd Mon Sep 17 00:00:00 2001 From: Anton Kovalchuck Date: Sat, 7 Jun 2025 16:40:51 +0300 Subject: [PATCH 2/3] Improved accessibility --- .../asset/ui/src/scss/_table-widget.scss | 27 +++++++++---------- .../modules/table-widget/views/widget.html | 2 +- 2 files changed, 13 insertions(+), 16 deletions(-) diff --git a/website/modules/asset/ui/src/scss/_table-widget.scss b/website/modules/asset/ui/src/scss/_table-widget.scss index 418ae4bd..acde0cd0 100644 --- a/website/modules/asset/ui/src/scss/_table-widget.scss +++ b/website/modules/asset/ui/src/scss/_table-widget.scss @@ -51,10 +51,9 @@ } &:hover, - &:focus { + &:focus-visible { transform: scale3d(1.03, 1.03, 1); z-index: 10; - outline: none; border-color: black; .sf-table-title, @@ -110,28 +109,26 @@ } } - // Remove focus effect on desktop (only hover) - &:focus { - transform: scale3d(1, 1, 1); - z-index: auto; + &:focus-visible { + transform: scale3d(1.02, 1.02, 1); + z-index: 10; + border-color: black; .sf-table-title, .sf-table-cell-title { - color: $gray-500; - } - - .sf-table-cell-description { - color: $gray-300; + color: $gray-100; } + .sf-table-cell-description, .sf-table-link a { - color: $gray-300; + color: $gray-200; } .background-circle { - width: 130%; - height: 100%; - transform: none; + display: block; + width: 150em; + height: 50em; + transform: translate3d(-5%, -10%, 0); } } diff --git a/website/modules/table-widget/views/widget.html b/website/modules/table-widget/views/widget.html index e34151c6..32268c1e 100644 --- a/website/modules/table-widget/views/widget.html +++ b/website/modules/table-widget/views/widget.html @@ -39,7 +39,7 @@

{{ row.title }}

{% endif %} -
+ {% endfor %} From a844929c2a5b8204e8ad2c2385dec5af1f67e315 Mon Sep 17 00:00:00 2001 From: Anton Kovalchuck Date: Sat, 7 Jun 2025 19:15:29 +0300 Subject: [PATCH 3/3] Adjusted animation --- website/modules/asset/ui/src/scss/_table-widget.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/website/modules/asset/ui/src/scss/_table-widget.scss b/website/modules/asset/ui/src/scss/_table-widget.scss index acde0cd0..a5612782 100644 --- a/website/modules/asset/ui/src/scss/_table-widget.scss +++ b/website/modules/asset/ui/src/scss/_table-widget.scss @@ -38,6 +38,7 @@ position: relative; overflow: hidden; cursor: pointer; + background-color:$white; @include transition(all, 0.5s); transform: scale3d(1, 1, 1); @@ -69,7 +70,7 @@ .background-circle { display: block; width: 150em; - height: 50em; + height: 70em; transform: translate3d(-5%, -10%, 0); } } @@ -104,7 +105,7 @@ .background-circle { width: 150em; - height: 50em; + height: 70em; transform: translate3d(-5%, -10%, 0); } } @@ -127,7 +128,7 @@ .background-circle { display: block; width: 150em; - height: 50em; + height: 70em; transform: translate3d(-5%, -10%, 0); } }