<div class="container">
<div class="row">
<div class="col-12 col-lg-4">
<div class="desc desc-line mt-5">Filter</div>
<div class="row py-4">
<div class="col-12">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="customFilter1" id="customFilter1">
<label class="custom-control-label" for="customFilter1">Modell</label>
<div class="info-text">Artikelnr.: XXXXXXX</div>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="customFilter2" id="customFilter2">
<label class="custom-control-label" for="customFilter2">oder Modell</label>
<div class="info-text">Artikelnr.: XXXXXXX</div>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customFilter3" disabled>
<label class="custom-control-label" for="customFilter3">zweizeiliges<br>Modell</label>
<div class="info-text">Artikelnr.: XXXXXXX</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="desc desc-line mt-5">Checkbox</div>
<div class="row py-4">
<div class="col-12">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="customCheck" id="customCheck1" checked>
<label class="custom-control-label" for="customCheck1">Modell</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="customCheck" id="customCheck2">
<label class="custom-control-label" for="customCheck2">oder Modell</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck3" id="customCheck3">
<label class="custom-control-label" for="customCheck3">zweizeiliges<br>Modell</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck4" id="customCheck4">
<label class="custom-control-label" for="customCheck4">einzeiliges Modell</label>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="desc desc-line mt-5">Radio</div>
<div class="row py-4">
<div class="col-12">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="customRadio" id="customRadio1">
<label class="custom-control-label" for="customRadio1">Modell</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="customRadio" id="customRadio2" checked>
<label class="custom-control-label" for="customRadio2">weiteres<br>Modell</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customRadio3" disabled>
<label class="custom-control-label" for="customRadio3">Modell (deaktiviert)</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="customRadio" id="customRadio4">
<label class="custom-control-label" for="customRadio4">zweizeiliges<br>Modell</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="customRadio" id="customRadio5">
<label class="custom-control-label" for="customRadio5">einzeiliges Modell</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 col-lg-4">
<div class="desc desc-line mt-5">Filter</div>
<div class="row py-4">
<div class="col-12">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="customFilter1" id="customFilter1">
<label class="custom-control-label" for="customFilter1">Modell</label>
<div class="info-text">Artikelnr.: XXXXXXX</div>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="customFilter2" id="customFilter2">
<label class="custom-control-label" for="customFilter2">oder Modell</label>
<div class="info-text">Artikelnr.: XXXXXXX</div>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customFilter3" disabled>
<label class="custom-control-label" for="customFilter3">zweizeiliges<br>Modell</label>
<div class="info-text">Artikelnr.: XXXXXXX</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="desc desc-line mt-5">Checkbox</div>
<div class="row py-4">
<div class="col-12">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="customCheck" id="customCheck1" checked>
<label class="custom-control-label" for="customCheck1">Modell</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="customCheck" id="customCheck2">
<label class="custom-control-label" for="customCheck2">oder Modell</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck3" id="customCheck3">
<label class="custom-control-label" for="customCheck3">zweizeiliges<br>Modell</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck4" id="customCheck4">
<label class="custom-control-label" for="customCheck4">einzeiliges Modell</label>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="desc desc-line mt-5">Radio</div>
<div class="row py-4">
<div class="col-12">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="customRadio" id="customRadio1">
<label class="custom-control-label" for="customRadio1">Modell</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="customRadio" id="customRadio2" checked>
<label class="custom-control-label" for="customRadio2">weiteres<br>Modell</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customRadio3" disabled>
<label class="custom-control-label" for="customRadio3">Modell (deaktiviert)</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="customRadio" id="customRadio4" >
<label class="custom-control-label" for="customRadio4">zweizeiliges<br>Modell</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" name="customRadio" id="customRadio5">
<label class="custom-control-label" for="customRadio5">einzeiliges Modell</label>
</div>
</div>
</div>
</div>
</div>
</div>
/* Kein Inhalt definiert. */
.custom-control {
padding-left: 1.75rem;
margin-bottom: 1rem;
&-label {
cursor: pointer;
font-weight: $font-weight-light;
.dark & {
color: $white;
&:before {
background: $primary;
}
}
&:before {
width: 1rem;
height: 1rem;
top: 0.25rem;
left: -1.75rem;
box-shadow: none!important;
border: 0;
background: $gray-200;
.custom-radio & {
border-radius: 0;
}
}
&:after {
width: 1rem;
height: 1rem;
top: 0.25rem;
left: -1.75rem;
}
a {
color: $black;
text-decoration: underline;
}
}
&-input {
&:checked {
~ .custom-control-label {
font-weight: $font-weight-medium;
.dark & {
&:before {
background: $white;
}
}
&:before {
background: $black;
border: 0;
}
&:after {
background: none!important;
}
}
}
&[disabled], &:disabled {
~ .custom-control-label {
color: $gray-400;
cursor: not-allowed;
.dark & {
&:before {
background: $gray-900;
}
}
&:before {
background: $gray-100;
border: 0;
}
&:after {
}
}
}
}
.info-text {
width: 100%;
margin-top: 0.625rem;
font-size: 0.875rem;
font-weight: $font-weight-normal;
color: $secondary;
line-height: 1;
}
}
Keine Notizen vorhanden.