<label class="checkbox checkbox--secondary">
<span class="label">Secondary First name</span>
<input type="checkbox" name="secondary">
<span class="checkmark-container">
<span class="checkmark"></span>
</span>
</label>
No notes defined.
{
"copy": "Secondary First name",
"modifier": "secondary",
"id": "secondary",
"name": "secondary"
}
.checkbox {
display: flex;
align-items: baseline;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
// background-color: $crest-blue;
line-height: 26px;
padding: 9px 0 9px 0;
&:not(:first-child) {
margin-top: 16px;
}
.label {
left: 50px;
color: white;
font-family: $registration-font;
font-weight: 400;
font-size: 16px;
line-height: 26px;
margin-left: 41px;
a {
color: white;
&:hover {
font-weight: 700;
}
}
}
/* Create a custom checkbox */
.checkmark-container {
border: 1px solid white;
border-radius: 2px;
height: 25px;
width: 25px;
position: absolute;
top: auto;
left: 0;
display: flex;
align-items: center;
justify-content: center;
.checkmark {
border-radius: 2px;
height: 19px;
width: 19px;
}
}
/* Hide the browser's default checkbox */
input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark::after {
content: '';
display: none;
position: absolute;
left: 8px;
top: 4px;
width: 7px;
height: 13px;
border: solid $crest-blue;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
&--primary {
border: 1px solid white;
border-radius: 2px;
padding: 9px 16px 9px 0;
input {
margin: 9px inherit 9px 9px;
}
.checkmark-container {
margin-left: 9px;
}
&:has(input:checked) {
background-color: white;
.label {
color: $crest-blue;
}
.checkmark-container {
border-color: $crest-blue;
}
}
&:hover,
&:has(input:checked):hover {
background-color: $rj-blue;
}
&:has(input:checked):hover {
.label {
color: white;
}
.checkmark {
background-color: white;
}
}
input:checked ~ .checkmark-container {
background-color: white;
.checkmark {
background-color: $crest-blue;
}
}
@media screen and (max-width: $mq-medium) {
&:has(input:checked):hover {
background-color: white;
.label {
color: $crest-blue;
}
.checkmark-container {
border-color: $crest-blue;
}
}
}
}
input:focus-visible ~ .checkmark-container {
outline: -webkit-focus-ring-color auto 1px;
}
/* Show the checkmark when checked */
input:checked ~ .checkmark-container .checkmark::after {
display: block;
}
/* Style the checkmark/indicator */
&--secondary {
&:hover input ~ .checkmark-container {
background-color: $rj-blue;
}
/* When the checkbox is checked, add a blue background */
input:checked ~ .checkmark-container {
background-color: $crest-blue;
.checkmark {
background-color: white;
}
}
}
}
<label class="checkbox checkbox--{{modifier}}">
<span class="label">{{copy}}</span>
<input type="checkbox" {{#if fan}}data-fan="{{fan}}" {{/if}} {{#if value}} value="{{value}}" {{/if}} {{#if name}}name="{{name}}" {{/if}} {{#if username}}data-name="{{username}}" {{/if}} {{#if
individualId}}data-individual-id="{{individualId}}" {{/if}}>
<span class="checkmark-container">
<span class="checkmark"></span>
</span>
</label>