From 7c4decb5da243691b0ad8c0303005a0115e8bbc2 Mon Sep 17 00:00:00 2001 From: Cristina Chumillas Date: Mon, 18 Dec 2023 11:40:57 +0100 Subject: [PATCH] Issue #3305147 by Aditya4478, rupeshghar, Gauravvvv, AkshayAdhav, shmy: Refactor Claro's icon-link stylesheet --- .../claro/css/components/icon-link.pcss.css | 36 ++++++++++--------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/core/themes/claro/css/components/icon-link.pcss.css b/core/themes/claro/css/components/icon-link.pcss.css index 46c69c62cc3..411adb6313c 100644 --- a/core/themes/claro/css/components/icon-link.pcss.css +++ b/core/themes/claro/css/components/icon-link.pcss.css @@ -21,23 +21,25 @@ border: 1px solid var(--icon-link-border-color); border-radius: 50%; background-color: var(--icon-link-bg-color); + + &:hover { + border-color: var(--icon-link--hover-border-color); + background-color: var(--icon-link--hover-bg-color); + } + + &:focus { + box-shadow: 0 0 0 1.5px var(--color-white), 0 0 0 3.5px var(--color-focus); + } + + &:active, + .open > & { + border-color: var(--icon-link--active-border-color); + background-color: var(--icon-link--active-bg-color); + } } -.icon-link:hover { - border-color: var(--icon-link--hover-border-color); - background-color: var(--icon-link--hover-bg-color); -} - -.icon-link:focus { - box-shadow: 0 0 0 1.5px var(--color-white), 0 0 0 3.5px var(--color-focus); -} - -.icon-link:active, -.open > .icon-link { - border-color: var(--icon-link--active-border-color); - background-color: var(--icon-link--active-bg-color); -} - -.icon-link--small:focus { - box-shadow: 0 0 0 1px var(--color-white), 0 0 0 3px var(--color-focus); +.icon-link--small { + &:focus { + box-shadow: 0 0 0 1px var(--color-white), 0 0 0 3px var(--color-focus); + } }