dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

boutons radio stylés

Browse source
This commit is contained in:
Raphael Goetter 2017-08-01 10:02:19 +02:00
parent ddc20002ca
commit c796838fde
5 changed files with 40 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

2
sass/components/checkbox.scss
View file

@ -2,7 +2,7 @@
/* ==Checkbox */
/* ----------------------------- */
/* use .checkbox class on input type=checkbox */
/* recommanded HTML : <input type="checkbox" class="checkbox" id="test1"><label for="test1">click here</label> */
/* recommanded HTML : <input type="checkbox" class="checkbox" id="c1"><label for="c1">click here</label> */
.checkbox {
@extend .visually-hidden;

34
sass/components/radio.scss Normal file
View file

@ -0,0 +1,34 @@
/* ----------------------------- */
/* ==Rdio */
/* ----------------------------- */
/* use .radio class on input type=radio */
/* recommanded HTML : <input type="radio" class="radio" name="radio" id="r1"><label for="r1">Click here</label> */
.radio {
@extend .visually-hidden;
& ~ label {
cursor: pointer;
&:before {
content: "";
display: inline-block;
vertical-align: baseline;
transform: translateY(.2rem);
margin-right: .5rem;
width: 1.1em; height: 1.1em;
border: 0;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 0 2px $color-forms inset;
transition: .25s background;
}
}
&:checked ~ label:before {
background-image: radial-gradient(circle at center, #fff 30%, transparent 38%);
background-color: $color-forms;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
}
}