From 97295e959b1ae302351c6f2dd2c21d34305303b2 Mon Sep 17 00:00:00 2001 From: Adorian Doran Date: Fri, 24 Jan 2025 22:45:58 +0200 Subject: [PATCH] style(next): fall back to the user agent's default check boxes and radio buttons if the ":has" selector is not supported --- src/public/stylesheets/theme-next/forms.css | 216 ++++++++++---------- 1 file changed, 111 insertions(+), 105 deletions(-) diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css index 27d1b49ed..510ddc807 100644 --- a/src/public/stylesheets/theme-next/forms.css +++ b/src/public/stylesheets/theme-next/forms.css @@ -183,135 +183,141 @@ optgroup { line-height: 40px; } -/* Check box & radio button commons */ +/* Check boxes and radio buttons */ -/* The parent label */ -label.tn-radio, -label.tn-checkbox { - --box-size: 1em; - --box-label-gap: .5em; +@supports selector(label:has(*)) { - position: relative; - padding-left: calc(var(--box-size) + var(--box-label-gap)) !important; - user-select: none; + /* Check box & radio button commons */ -} + /* The parent label */ + label.tn-radio, + label.tn-checkbox { + --box-size: 1em; + --box-label-gap: .5em; -/* The original input */ -label.tn-radio > input[type="radio"], -label.tn-checkbox > input[type="checkbox"] { - position: absolute; - top: 0; - left: 0; - width: var(--box-size); - height: 100%; - opacity: 0 !important; -} + position: relative; + padding-left: calc(var(--box-size) + var(--box-label-gap)) !important; + user-select: none; -label.tn-radio::before, -label.tn-radio::after, -label.tn-checkbox::before, -label.tn-checkbox::after { - content: ""; - position: absolute; - top: 50%; - left: 0; - translate: 0 -50%; - width: var(--box-size); - height: var(--box-size); -} + } -label.tn-radio:has(>input[type="radio"]:focus-visible)::before, -label.tn-checkbox:has(>input[type="checkbox"]:focus-visible)::before { - outline: 2px solid var(--input-focus-outline-color); -} + /* The original input */ + label.tn-radio > input[type="radio"], + label.tn-checkbox > input[type="checkbox"] { + position: absolute; + top: 0; + left: 0; + width: var(--box-size); + height: 100%; + opacity: 0 !important; + } -/* Check boxes */ + label.tn-radio::before, + label.tn-radio::after, + label.tn-checkbox::before, + label.tn-checkbox::after { + content: ""; + position: absolute; + top: 50%; + left: 0; + translate: 0 -50%; + width: var(--box-size); + height: var(--box-size); + } -/* The check box background */ -label.tn-checkbox::before { - border-radius: 3px; - background: var(--radio-checkbox-background); -} + label.tn-radio:has(>input[type="radio"]:focus-visible)::before, + label.tn-checkbox:has(>input[type="checkbox"]:focus-visible)::before { + outline: 2px solid var(--input-focus-outline-color); + } -label.tn-checkbox:has(>input[type="checkbox"]:not(:disabled)):hover:before { - background: var(--radio-checkbox-hover-background); -} + /* Check boxes */ -@keyframes checkbox-checked { - from { - transform: scale(2); - } to { + /* The check box background */ + label.tn-checkbox::before { + border-radius: 3px; + background: var(--radio-checkbox-background); + } + + label.tn-checkbox:has(>input[type="checkbox"]:not(:disabled)):hover:before { + background: var(--radio-checkbox-hover-background); + } + + @keyframes checkbox-checked { + from { + transform: scale(2); + } to { + transform: scale(1); + } + } + + /* The tick mark */ + label.tn-checkbox::after { + mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ctitle%3echeck-bold%3c/title%3e%3cpath d='M9%2c20.42L2.79%2c14.21L5.62%2c11.38L9%2c14.77L18.88%2c4.88L21.71%2c7.71L9%2c20.42Z' /%3e%3c/svg%3e"); + mask-position: center center; + mask-size: .95em; + background-color: var(--radio-checkbox-indicator-color); + transform: scale(0); + opacity: 0; + transition: transform 300ms ease-out, + opacity 300ms linear; + } + + label.tn-checkbox:has(>input[type="checkbox"]:checked)::after { + opacity: 1; transform: scale(1); + transition: opacity 100ms ease-in-out; + animation: checkbox-checked 150ms ease-out; } -} -/* The tick mark */ -label.tn-checkbox::after { - mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ctitle%3echeck-bold%3c/title%3e%3cpath d='M9%2c20.42L2.79%2c14.21L5.62%2c11.38L9%2c14.77L18.88%2c4.88L21.71%2c7.71L9%2c20.42Z' /%3e%3c/svg%3e"); - mask-position: center center; - mask-size: .95em; - background-color: var(--radio-checkbox-indicator-color); - transform: scale(0); - opacity: 0; - transition: transform 300ms ease-out, - opacity 300ms linear; -} + /* Radio buttons */ -label.tn-checkbox:has(>input[type="checkbox"]:checked)::after { - opacity: 1; - transform: scale(1); - transition: opacity 100ms ease-in-out; - animation: checkbox-checked 150ms ease-out; -} + label.tn-radio::before, + label.tn-radio::after { + border-radius: 50%; + } -/* Radio buttons */ + /* The outer circle */ + label.tn-radio::before { + background: var(--radio-checkbox-background); + } -label.tn-radio::before, -label.tn-radio::after { - border-radius: 50%; -} + label.tn-radio:has(>input[type="radio"]:not(:disabled)):hover::before { + background: var(--radio-checkbox-hover-background); + } -/* The outer circle */ -label.tn-radio::before { - background: var(--radio-checkbox-background); -} + @keyframes radio-checked { + from { + transform: scale(1.5); + } to { + transform: scale(.5); + } + } -label.tn-radio:has(>input[type="radio"]:not(:disabled)):hover::before { - background: var(--radio-checkbox-hover-background); -} + /* The inner circle */ + label.tn-radio::after { + background: var(--radio-checkbox-indicator-color); + transform: scale(0); + opacity: 0; + transition: opacity 300ms linear, + transform 300ms ease-in; + } -@keyframes radio-checked { - from { - transform: scale(1.5); - } to { + label.tn-radio:has(>input[type="radio"]:checked)::after { transform: scale(.5); + opacity: 1; + transition: opacity 150ms linear; + animation: radio-checked 200ms ease-out; } -} -/* The inner circle */ -label.tn-radio::after { - background: var(--radio-checkbox-indicator-color); - transform: scale(0); - opacity: 0; - transition: opacity 300ms linear, - transform 300ms ease-in; -} + /* Disabled check boxes and radio buttons */ -label.tn-radio:has(>input[type="radio"]:checked)::after { - transform: scale(.5); - opacity: 1; - transition: opacity 150ms linear; - animation: radio-checked 200ms ease-out; -} + label.tn-radio:has(> input[type="radio"]:disabled)::before, + label.tn-radio:has(> input[type="radio"]:disabled)::after, + label.tn-checkbox:has(> input[type="checkbox"]:disabled)::before, + label.tn-checkbox:has(> input[type="checkbox"]:disabled)::after { + opacity: .5; + } -/* Disabled check boxes and radio buttons */ - -label.tn-radio:has(> input[type="radio"]:disabled)::before, -label.tn-radio:has(> input[type="radio"]:disabled)::after, -label.tn-checkbox:has(> input[type="checkbox"]:disabled)::before, -label.tn-checkbox:has(> input[type="checkbox"]:disabled)::after { - opacity: .5; } /* Links */