diff --git a/components/gc-chckbxrdio/_base.scss b/components/gc-chckbxrdio/_base.scss index cdabbe5573..8a809790d7 100644 --- a/components/gc-chckbxrdio/_base.scss +++ b/components/gc-chckbxrdio/_base.scss @@ -38,14 +38,9 @@ fieldset.gc-chckbxrdio { input[type="radio"], input[type="checkbox"] { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; + margin-left: 10px; + opacity: 0; + z-index: 2; &[disabled] + label { cursor: not-allowed; @@ -77,6 +72,14 @@ fieldset.gc-chckbxrdio { } } + &:hover { + cursor: pointer; + + + label::before { + @include chckbxrdio-hover; + } + } + &:focus + label::before { @include chckbxrdio-focus; } @@ -150,3 +153,33 @@ fieldset.gc-chckbxrdio { } } } +@media (prefers-contrast: more) { + .gc-chckbxrdio { + input[type=checkbox] { + &:focus+label { + &::before { + border: 5px double #000; + } + } + } + input[type=radio] { + &:focus+label { + &::before { + border: 5px double #000; + } + } + } + input[type="radio"] { + &:checked { + + { + label { + &::before { + outline: 10px solid #444; + outline-offset: -20px; + } + } + } + } + } + } +} diff --git a/components/gc-chckbxrdio/gc-chckbxrdio-doc-en.html b/components/gc-chckbxrdio/gc-chckbxrdio-doc-en.html index 2ab87eb2fb..cf661af8d2 100644 --- a/components/gc-chckbxrdio/gc-chckbxrdio-doc-en.html +++ b/components/gc-chckbxrdio/gc-chckbxrdio-doc-en.html @@ -64,7 +64,7 @@
There is no evaluation and report available for this component.
-CSS Class | @@ -75,7 +75,7 @@||||
---|---|---|---|---|
Version 1.0 | Version 1.0 | -Version 1.0 | +Version 1.0.1 | n.a. |
.checkbox.gc-chckbxrdio
)Il n'y a pas d'évaluation et de rapport disponible pour ce composant.
-Classe CSS | @@ -75,7 +75,7 @@||||
---|---|---|---|---|
Version 1.0 | Version 1.0 | -Version 1.0 | +Version 1.0.1 | s.o. |
.checkbox.gc-chckbxrdio
)