From 4bf03268d3f7eed7537949fe1f1a26bf0f3dc9f1 Mon Sep 17 00:00:00 2001 From: Thomas Britton Date: Fri, 28 Feb 2025 18:41:55 +0000 Subject: [PATCH 1/3] feat: toggle refinement styling (cherry picked from commit 11709a64e30b22d0246fb0db1424d8767b7d8775) --- examples/react/css/src/algolia.css | 1 + examples/react/css/src/toggle-refinement.css | 47 ++++++++++++++++++++ 2 files changed, 48 insertions(+) create mode 100644 examples/react/css/src/toggle-refinement.css diff --git a/examples/react/css/src/algolia.css b/examples/react/css/src/algolia.css index 94ea001756..51c6985048 100644 --- a/examples/react/css/src/algolia.css +++ b/examples/react/css/src/algolia.css @@ -8,4 +8,5 @@ @import url('breadcrumbs.css'); @import url('hierarchical-menu.css'); @import url('refinement-list.css'); +@import url('toggle-refinement.css'); @import url('panel.css'); diff --git a/examples/react/css/src/toggle-refinement.css b/examples/react/css/src/toggle-refinement.css new file mode 100644 index 0000000000..6a43d64d1a --- /dev/null +++ b/examples/react/css/src/toggle-refinement.css @@ -0,0 +1,47 @@ +.ais-ToggleRefinement-label { + font-size: 0.875rem; + line-height: 1.75rem; + display: block; + cursor: pointer; + flex-direction: row-reverse; + justify-content: space-between; + align-items: center; + display: flex; +} + +.ais-ToggleRefinement-checkbox { + appearance: none; + height: 18px; + pointer-events: none; + width: 32px; + position: relative; + border: 1px solid rgba(var(--ais-muted-color-rgb), 0.3); + background-color: rgb(var(--ais-background-color-rgb)); + border-radius: 9999px; +} + +.ais-ToggleRefinement-checkbox:checked { + background-image: none !important; +} + +.ais-ToggleRefinement-checkbox::after { + appearance: none; + content: ''; + height: 16px; + width: 16px; + position: absolute; + top: 0; + left: 0; + background: rgb(var(--ais-muted-color-rgb)); + border-radius: 9999px; + transition: 0.1s ease-in-out; +} + +.ais-ToggleRefinement-checkbox:checked::after { + transform: translateX(14px); + background-color: rgb(var(--ais-background-color-rgb)); + + @media (prefers-color-scheme: dark) { + background-color: #fff; + } +} From 14fba4747f12c97f0d949382e9e667a4ebaf7ed9 Mon Sep 17 00:00:00 2001 From: Thomas Britton Date: Mon, 3 Mar 2025 12:45:04 +0000 Subject: [PATCH 2/3] fix: pr feedback --- examples/react/css/src/toggle-refinement.css | 25 +++++++++----------- 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/examples/react/css/src/toggle-refinement.css b/examples/react/css/src/toggle-refinement.css index 6a43d64d1a..818122e62c 100644 --- a/examples/react/css/src/toggle-refinement.css +++ b/examples/react/css/src/toggle-refinement.css @@ -9,39 +9,36 @@ display: flex; } -.ais-ToggleRefinement-checkbox { +input[class^='ais-'][class*='ToggleRefinement-checkbox'] { appearance: none; height: 18px; pointer-events: none; width: 32px; position: relative; - border: 1px solid rgba(var(--ais-muted-color-rgb), 0.3); + border: 1px solid rgba(var(--ais-border-color-rgb), 0.3); background-color: rgb(var(--ais-background-color-rgb)); - border-radius: 9999px; -} + border-radius: calc(infinity * 1px); -.ais-ToggleRefinement-checkbox:checked { - background-image: none !important; + &:checked { + background-image: none; + } } .ais-ToggleRefinement-checkbox::after { appearance: none; content: ''; - height: 16px; - width: 16px; + width: var(--ais-spacing); + height: var(--ais-spacing); position: absolute; top: 0; left: 0; background: rgb(var(--ais-muted-color-rgb)); - border-radius: 9999px; - transition: 0.1s ease-in-out; + border-radius: calc(infinity * 1px); + transition: var(--ais-transition-duration) + var(--ais-transition-timing-function); } .ais-ToggleRefinement-checkbox:checked::after { transform: translateX(14px); background-color: rgb(var(--ais-background-color-rgb)); - - @media (prefers-color-scheme: dark) { - background-color: #fff; - } } From 71149748d05d9ab107a07e54fd6109904c3de4ba Mon Sep 17 00:00:00 2001 From: Thomas Britton Date: Tue, 25 Mar 2025 10:27:56 +0000 Subject: [PATCH 3/3] fix: styles updates based on feedback --- examples/react/css/src/toggle-refinement.css | 23 +++++++++----------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/examples/react/css/src/toggle-refinement.css b/examples/react/css/src/toggle-refinement.css index 818122e62c..2c79730e62 100644 --- a/examples/react/css/src/toggle-refinement.css +++ b/examples/react/css/src/toggle-refinement.css @@ -1,7 +1,4 @@ .ais-ToggleRefinement-label { - font-size: 0.875rem; - line-height: 1.75rem; - display: block; cursor: pointer; flex-direction: row-reverse; justify-content: space-between; @@ -9,19 +6,24 @@ display: flex; } -input[class^='ais-'][class*='ToggleRefinement-checkbox'] { +.ais-ToggleRefinement-checkbox { appearance: none; height: 18px; - pointer-events: none; width: 32px; position: relative; + pointer-events: none; border: 1px solid rgba(var(--ais-border-color-rgb), 0.3); background-color: rgb(var(--ais-background-color-rgb)); border-radius: calc(infinity * 1px); +} - &:checked { - background-image: none; - } +.ais-ToggleRefinement-checkbox:checked { + background-image: none !important; +} + +.ais-ToggleRefinement-checkbox:checked::after { + transform: translateX(14px); + background-color: rgb(var(--ais-background-color-rgb)); } .ais-ToggleRefinement-checkbox::after { @@ -37,8 +39,3 @@ input[class^='ais-'][class*='ToggleRefinement-checkbox'] { transition: var(--ais-transition-duration) var(--ais-transition-timing-function); } - -.ais-ToggleRefinement-checkbox:checked::after { - transform: translateX(14px); - background-color: rgb(var(--ais-background-color-rgb)); -}