Input
<div class="form">
<div class="formelement__wrapper">
<input id="input" class="formelement formelement--input" type="text" placeholder="Placeholder">
<label for="input" class="formelement__label">Label</label>
</div>
</div>
<script type="module" src="/dist/js/kampmann.umd.min.js"></script>
{{ page.inlinestyles }}
.formelement {
display: block;
width: 100%;
box-shadow: none !important;
color: $primary;
border-color: $body-color;
border-width: 1px;
border-style: solid;
border-radius: $border-radius;
outline: none;
padding: $input-btn-padding-y/1.5 $input-btn-padding-x;
appearance: none;
background: transparent;
&__wrapper {
position: relative;
color: $body-color;
&:after,
.formelement__icon {
position: absolute;
right: $input-btn-padding-x;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
filter: grayscale(1);
}
&--active {
color: $primary;
&:after {
filter: none;
}
}
&--select {
cursor: pointer;
&:after {
content: url("data:image/svg+xml,%0A%3Csvg width='15px' height='8px' viewBox='0 0 15 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Arrow/Down/Blue' fill='%230E2249' fill-rule='nonzero'%3E%3Cg id='Icon/Arrow-Down'%3E%3Cpath d='M14.1998092,0.237903236 C14.382876,0.0548535132 14.679672,0.054867357 14.8627218,0.237934157 C15.0228903,0.398117607 15.0429007,0.64537504 14.9227603,0.827315545 L14.8626908,0.900846764 L8.16294226,7.59997018 C7.98720591,7.775957 7.7487059,7.87484644 7.5,7.87484644 C7.29274509,7.87484644 7.09257759,7.80617322 6.93005839,7.68158351 L6.83730916,7.60022176 L0.137309157,0.900846764 C-0.045757643,0.717797041 -0.0457714868,0.421000957 0.137278236,0.237934157 C0.297446744,0.077750707 0.544702309,0.0577171766 0.726654021,0.177840674 L0.800190843,0.237903236 L7.5,6.937 L14.1998092,0.237903236 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
}
&--search {
// &:after {
// content: url("data:image/svg+xml,%0A%3Csvg width='17px' height='17px' viewBox='0 0 17 17' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.822470022'%3E%3Cg id='Form/Input/Text/Search/Hover' transform='translate(-422.000000, -15.000000)' fill='%238A8882' fill-rule='nonzero'%3E%3Cg id='Icon/Search' transform='translate(422.000000, 15.000000)'%3E%3Cpath d='M16.8508772,15.9594542 L12.5760234,11.6846004 C12.4998051,11.6083821 12.4003899,11.568616 12.294347,11.568616 L11.9530214,11.568616 C13.0896686,10.3391813 13.785575,8.69883041 13.785575,6.89278752 C13.785575,3.08518519 10.7003899,0 6.89278752,0 C3.08518519,0 0,3.08518519 0,6.89278752 C0,10.7003899 3.08518519,13.785575 6.89278752,13.785575 C8.69883041,13.785575 10.3391813,13.0896686 11.568616,11.9563353 L11.568616,12.294347 C11.568616,12.4003899 11.6116959,12.4998051 11.6846004,12.5760234 L15.9594542,16.8508772 C16.1152047,17.0066277 16.3670565,17.0066277 16.522807,16.8508772 L16.8508772,16.522807 C17.0066277,16.3670565 17.0066277,16.1152047 16.8508772,15.9594542 Z M6.89278752,12.7251462 C3.66842105,12.7251462 1.06042885,10.117154 1.06042885,6.89278752 C1.06042885,3.66842105 3.66842105,1.06042885 6.89278752,1.06042885 C10.117154,1.06042885 12.7251462,3.66842105 12.7251462,6.89278752 C12.7251462,10.117154 10.117154,12.7251462 6.89278752,12.7251462 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
// }
// &:focus{
// &:after{
// content: url("data:image/svg+xml,%0A%3Csvg width='17px' height='17px' viewBox='0 0 17 17' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.822470022'%3E%3Cg id='Form/Input/Text/Search/Hover' transform='translate(-422.000000, -15.000000)' fill='%230E2249' fill-rule='nonzero'%3E%3Cg id='Icon/Search' transform='translate(422.000000, 15.000000)'%3E%3Cpath d='M16.8508772,15.9594542 L12.5760234,11.6846004 C12.4998051,11.6083821 12.4003899,11.568616 12.294347,11.568616 L11.9530214,11.568616 C13.0896686,10.3391813 13.785575,8.69883041 13.785575,6.89278752 C13.785575,3.08518519 10.7003899,0 6.89278752,0 C3.08518519,0 0,3.08518519 0,6.89278752 C0,10.7003899 3.08518519,13.785575 6.89278752,13.785575 C8.69883041,13.785575 10.3391813,13.0896686 11.568616,11.9563353 L11.568616,12.294347 C11.568616,12.4003899 11.6116959,12.4998051 11.6846004,12.5760234 L15.9594542,16.8508772 C16.1152047,17.0066277 16.3670565,17.0066277 16.522807,16.8508772 L16.8508772,16.522807 C17.0066277,16.3670565 17.0066277,16.1152047 16.8508772,15.9594542 Z M6.89278752,12.7251462 C3.66842105,12.7251462 1.06042885,10.117154 1.06042885,6.89278752 C1.06042885,3.66842105 3.66842105,1.06042885 6.89278752,1.06042885 C10.117154,1.06042885 12.7251462,3.66842105 12.7251462,6.89278752 C12.7251462,10.117154 10.117154,12.7251462 6.89278752,12.7251462 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
// }
// }
}
&--horizontal {
display: flex;
margin-left: $grid-gutter-width * -1;
margin-right: $grid-gutter-width * -1;
> * {
width: auto;
flex: 0 0 auto;
padding-left: $grid-gutter-width !important;
padding-right: $grid-gutter-width !important;
}
}
}
&__options {
display: none;
position: absolute;
left: 0;
margin-top: $input-btn-padding-y/1.5;
border: $border-width solid $body-color;
width: 100%;
border-radius: $border-radius;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top-width: 0;
background: $white;
z-index: 999;
max-height: calc(var(--items, 4.5) * 51px);
overflow: auto;
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
&__option {
&:not(.formelement__option--selected) {
padding: $input-btn-padding-y $input-btn-padding-x;
transition: 0.3s;
cursor: pointer;
&:hover {
background-color: rgba($blue, 0.1);
}
}
.formelement--checkbox &,
.formelement--radio & {
position: absolute;
opacity: 0;
pointer-events: none;
}
&--selected {
.formelement__option__check {
display: none;
}
}
&--active,
&:checked + .formelement__label,
+ .formelement__label:hover,
&:hover {
.formelement__option__check {
background-color: $primary;
> * {
stroke-dashoffset: 0;
}
}
}
&:not(.formelement__option--active):hover,
&:not(:checked):hover + .formelement__label {
.formelement__option__check {
background: rgba($primary, 0.25);
}
}
&__check {
width: 20px;
height: 20px;
flex-shrink: 0;
border: 1px solid $primary;
border-radius: $border-radius-xs;
transition: 0.3s;
> * {
stroke-dasharray: 32px;
stroke-dashoffset: 32px;
transition: 0.5s 0.2s;
}
}
}
&--select {
&.formelement {
&--active {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-color: $body-color !important;
border-width: $border-width !important;
border-bottom-color: transparent !important;
.formelement {
&__options {
display: block;
}
}
}
}
}
&--checkbox,
&--radio {
border: none;
padding: $input-btn-padding-y/3 0;
.formelement {
&__label {
display: flex;
cursor: pointer;
}
&__option {
&__check {
margin-right: $grid-gutter-width/2;
}
}
}
}
&--select-multi {
.formelement {
&__selected {
text-overflow: ellipsis;
overflow: hidden;
}
&__options {
> * {
display: flex;
.formelement__option__text {
width: 100%;
}
}
}
&__option {
&--selected {
white-space: nowrap;
display: inline;
&:not(:last-child):after {
content: ', ';
margin-left: -0.2em;
}
}
}
}
}
&--input {
&:focus {
color: $primary;
border-color: $primary;
+ .formelement__label {
display: block;
}
}
}
&--select,
&--search {
padding-right: calc(#{$input-btn-padding-x} * 2);
}
&--radio {
.formelement__option:checked {
+ .formelement__label {
&:after {
background-color: $primary;
opacity: 1;
}
}
}
}
&:placeholder-shown:not(:active):not(:focus),
&--placeholder {
background-color: rgba($gray-beige-light, 1);
border-color: transparent;
&:hover {
border-color: $body-color;
}
+ .formelement__label {
display: none;
}
}
&::placeholder,
&__option--placeholder {
text-transform: uppercase;
color: $body-color;
letter-spacing: 1.75px;
}
&__label {
&:not(.formelement__label--radio, .formelement__label--checkbox) {
position: absolute;
text-transform: uppercase;
letter-spacing: 1.38px;
font-size: $font-size-xs;
top: 0;
transform: translateY(-50%);
background: var(--background-color, $white);
left: calc(#{$input-btn-padding-x} - 0.5rem);
padding: 0 0.5rem;
line-height: 1;
}
&--radio {
display: flex;
position: relative;
cursor: pointer;
&:before {
content: '';
display: block;
width: $grid-gutter-width/1.25;
height: $grid-gutter-width/1.25;
border-color: rgba($body-color, 0.82);
border-width: 1px;
border-style: solid;
flex-shrink: 0;
margin-right: $grid-gutter-width/2;
}
&:after {
content: '';
width: 8px;
height: 8px;
background-color: rgba($primary, 0.25);
flex-shrink: 0;
position: absolute;
top: 4px;
left: 4px;
opacity: 0;
transition: 0.3s;
display: block;
}
&:hover:after {
opacity: 1;
}
}
&--radio {
&:before,
&:after {
border-radius: 100%;
}
}
}
}
@include media-breakpoint-up(md) {
.formelement {
padding: $input-btn-padding-y $input-btn-padding-x;
&__options {
margin-top: $input-btn-padding-y;
}
&--checkbox,
&--radio {
padding: $input-btn-padding-y/2 0;
}
}
}
<div class="form">
<div class="formelement__wrapper formelement__wrapper--search">
<input id="search" class="formelement formelement--input formelement--search" type="text" placeholder="Search">
<label for="search" class="formelement__label">Search</label>
<svg class="formelement__icon formelement__icon--search" width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Form/Input/Text/Search/Hover" transform="translate(-422.000000, -15.000000)" fill="currentColor" fill-rule="nonzero">
<g id="Icon/Search" transform="translate(422.000000, 15.000000)">
<path d="M16.8508772,15.9594542 L12.5760234,11.6846004 C12.4998051,11.6083821 12.4003899,11.568616 12.294347,11.568616 L11.9530214,11.568616 C13.0896686,10.3391813 13.785575,8.69883041 13.785575,6.89278752 C13.785575,3.08518519 10.7003899,0 6.89278752,0 C3.08518519,0 0,3.08518519 0,6.89278752 C0,10.7003899 3.08518519,13.785575 6.89278752,13.785575 C8.69883041,13.785575 10.3391813,13.0896686 11.568616,11.9563353 L11.568616,12.294347 C11.568616,12.4003899 11.6116959,12.4998051 11.6846004,12.5760234 L15.9594542,16.8508772 C16.1152047,17.0066277 16.3670565,17.0066277 16.522807,16.8508772 L16.8508772,16.522807 C17.0066277,16.3670565 17.0066277,16.1152047 16.8508772,15.9594542 Z M6.89278752,12.7251462 C3.66842105,12.7251462 1.06042885,10.117154 1.06042885,6.89278752 C1.06042885,3.66842105 3.66842105,1.06042885 6.89278752,1.06042885 C10.117154,1.06042885 12.7251462,3.66842105 12.7251462,6.89278752 C12.7251462,10.117154 10.117154,12.7251462 6.89278752,12.7251462 Z" id="Shape"></path>
</g>
</g>
</g>
</svg>
</div>
</div>
<script type="module" src="/dist/js/kampmann.umd.min.js"></script>
{{ page.inlinestyles }}
.formelement {
display: block;
width: 100%;
box-shadow: none !important;
color: $primary;
border-color: $body-color;
border-width: 1px;
border-style: solid;
border-radius: $border-radius;
outline: none;
padding: $input-btn-padding-y/1.5 $input-btn-padding-x;
appearance: none;
background: transparent;
&__wrapper {
position: relative;
color: $body-color;
&:after,
.formelement__icon {
position: absolute;
right: $input-btn-padding-x;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
filter: grayscale(1);
}
&--active {
color: $primary;
&:after {
filter: none;
}
}
&--select {
cursor: pointer;
&:after {
content: url("data:image/svg+xml,%0A%3Csvg width='15px' height='8px' viewBox='0 0 15 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Arrow/Down/Blue' fill='%230E2249' fill-rule='nonzero'%3E%3Cg id='Icon/Arrow-Down'%3E%3Cpath d='M14.1998092,0.237903236 C14.382876,0.0548535132 14.679672,0.054867357 14.8627218,0.237934157 C15.0228903,0.398117607 15.0429007,0.64537504 14.9227603,0.827315545 L14.8626908,0.900846764 L8.16294226,7.59997018 C7.98720591,7.775957 7.7487059,7.87484644 7.5,7.87484644 C7.29274509,7.87484644 7.09257759,7.80617322 6.93005839,7.68158351 L6.83730916,7.60022176 L0.137309157,0.900846764 C-0.045757643,0.717797041 -0.0457714868,0.421000957 0.137278236,0.237934157 C0.297446744,0.077750707 0.544702309,0.0577171766 0.726654021,0.177840674 L0.800190843,0.237903236 L7.5,6.937 L14.1998092,0.237903236 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
}
&--search {
// &:after {
// content: url("data:image/svg+xml,%0A%3Csvg width='17px' height='17px' viewBox='0 0 17 17' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.822470022'%3E%3Cg id='Form/Input/Text/Search/Hover' transform='translate(-422.000000, -15.000000)' fill='%238A8882' fill-rule='nonzero'%3E%3Cg id='Icon/Search' transform='translate(422.000000, 15.000000)'%3E%3Cpath d='M16.8508772,15.9594542 L12.5760234,11.6846004 C12.4998051,11.6083821 12.4003899,11.568616 12.294347,11.568616 L11.9530214,11.568616 C13.0896686,10.3391813 13.785575,8.69883041 13.785575,6.89278752 C13.785575,3.08518519 10.7003899,0 6.89278752,0 C3.08518519,0 0,3.08518519 0,6.89278752 C0,10.7003899 3.08518519,13.785575 6.89278752,13.785575 C8.69883041,13.785575 10.3391813,13.0896686 11.568616,11.9563353 L11.568616,12.294347 C11.568616,12.4003899 11.6116959,12.4998051 11.6846004,12.5760234 L15.9594542,16.8508772 C16.1152047,17.0066277 16.3670565,17.0066277 16.522807,16.8508772 L16.8508772,16.522807 C17.0066277,16.3670565 17.0066277,16.1152047 16.8508772,15.9594542 Z M6.89278752,12.7251462 C3.66842105,12.7251462 1.06042885,10.117154 1.06042885,6.89278752 C1.06042885,3.66842105 3.66842105,1.06042885 6.89278752,1.06042885 C10.117154,1.06042885 12.7251462,3.66842105 12.7251462,6.89278752 C12.7251462,10.117154 10.117154,12.7251462 6.89278752,12.7251462 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
// }
// &:focus{
// &:after{
// content: url("data:image/svg+xml,%0A%3Csvg width='17px' height='17px' viewBox='0 0 17 17' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.822470022'%3E%3Cg id='Form/Input/Text/Search/Hover' transform='translate(-422.000000, -15.000000)' fill='%230E2249' fill-rule='nonzero'%3E%3Cg id='Icon/Search' transform='translate(422.000000, 15.000000)'%3E%3Cpath d='M16.8508772,15.9594542 L12.5760234,11.6846004 C12.4998051,11.6083821 12.4003899,11.568616 12.294347,11.568616 L11.9530214,11.568616 C13.0896686,10.3391813 13.785575,8.69883041 13.785575,6.89278752 C13.785575,3.08518519 10.7003899,0 6.89278752,0 C3.08518519,0 0,3.08518519 0,6.89278752 C0,10.7003899 3.08518519,13.785575 6.89278752,13.785575 C8.69883041,13.785575 10.3391813,13.0896686 11.568616,11.9563353 L11.568616,12.294347 C11.568616,12.4003899 11.6116959,12.4998051 11.6846004,12.5760234 L15.9594542,16.8508772 C16.1152047,17.0066277 16.3670565,17.0066277 16.522807,16.8508772 L16.8508772,16.522807 C17.0066277,16.3670565 17.0066277,16.1152047 16.8508772,15.9594542 Z M6.89278752,12.7251462 C3.66842105,12.7251462 1.06042885,10.117154 1.06042885,6.89278752 C1.06042885,3.66842105 3.66842105,1.06042885 6.89278752,1.06042885 C10.117154,1.06042885 12.7251462,3.66842105 12.7251462,6.89278752 C12.7251462,10.117154 10.117154,12.7251462 6.89278752,12.7251462 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
// }
// }
}
&--horizontal {
display: flex;
margin-left: $grid-gutter-width * -1;
margin-right: $grid-gutter-width * -1;
> * {
width: auto;
flex: 0 0 auto;
padding-left: $grid-gutter-width !important;
padding-right: $grid-gutter-width !important;
}
}
}
&__options {
display: none;
position: absolute;
left: 0;
margin-top: $input-btn-padding-y/1.5;
border: $border-width solid $body-color;
width: 100%;
border-radius: $border-radius;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top-width: 0;
background: $white;
z-index: 999;
max-height: calc(var(--items, 4.5) * 51px);
overflow: auto;
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
&__option {
&:not(.formelement__option--selected) {
padding: $input-btn-padding-y $input-btn-padding-x;
transition: 0.3s;
cursor: pointer;
&:hover {
background-color: rgba($blue, 0.1);
}
}
.formelement--checkbox &,
.formelement--radio & {
position: absolute;
opacity: 0;
pointer-events: none;
}
&--selected {
.formelement__option__check {
display: none;
}
}
&--active,
&:checked + .formelement__label,
+ .formelement__label:hover,
&:hover {
.formelement__option__check {
background-color: $primary;
> * {
stroke-dashoffset: 0;
}
}
}
&:not(.formelement__option--active):hover,
&:not(:checked):hover + .formelement__label {
.formelement__option__check {
background: rgba($primary, 0.25);
}
}
&__check {
width: 20px;
height: 20px;
flex-shrink: 0;
border: 1px solid $primary;
border-radius: $border-radius-xs;
transition: 0.3s;
> * {
stroke-dasharray: 32px;
stroke-dashoffset: 32px;
transition: 0.5s 0.2s;
}
}
}
&--select {
&.formelement {
&--active {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-color: $body-color !important;
border-width: $border-width !important;
border-bottom-color: transparent !important;
.formelement {
&__options {
display: block;
}
}
}
}
}
&--checkbox,
&--radio {
border: none;
padding: $input-btn-padding-y/3 0;
.formelement {
&__label {
display: flex;
cursor: pointer;
}
&__option {
&__check {
margin-right: $grid-gutter-width/2;
}
}
}
}
&--select-multi {
.formelement {
&__selected {
text-overflow: ellipsis;
overflow: hidden;
}
&__options {
> * {
display: flex;
.formelement__option__text {
width: 100%;
}
}
}
&__option {
&--selected {
white-space: nowrap;
display: inline;
&:not(:last-child):after {
content: ', ';
margin-left: -0.2em;
}
}
}
}
}
&--input {
&:focus {
color: $primary;
border-color: $primary;
+ .formelement__label {
display: block;
}
}
}
&--select,
&--search {
padding-right: calc(#{$input-btn-padding-x} * 2);
}
&--radio {
.formelement__option:checked {
+ .formelement__label {
&:after {
background-color: $primary;
opacity: 1;
}
}
}
}
&:placeholder-shown:not(:active):not(:focus),
&--placeholder {
background-color: rgba($gray-beige-light, 1);
border-color: transparent;
&:hover {
border-color: $body-color;
}
+ .formelement__label {
display: none;
}
}
&::placeholder,
&__option--placeholder {
text-transform: uppercase;
color: $body-color;
letter-spacing: 1.75px;
}
&__label {
&:not(.formelement__label--radio, .formelement__label--checkbox) {
position: absolute;
text-transform: uppercase;
letter-spacing: 1.38px;
font-size: $font-size-xs;
top: 0;
transform: translateY(-50%);
background: var(--background-color, $white);
left: calc(#{$input-btn-padding-x} - 0.5rem);
padding: 0 0.5rem;
line-height: 1;
}
&--radio {
display: flex;
position: relative;
cursor: pointer;
&:before {
content: '';
display: block;
width: $grid-gutter-width/1.25;
height: $grid-gutter-width/1.25;
border-color: rgba($body-color, 0.82);
border-width: 1px;
border-style: solid;
flex-shrink: 0;
margin-right: $grid-gutter-width/2;
}
&:after {
content: '';
width: 8px;
height: 8px;
background-color: rgba($primary, 0.25);
flex-shrink: 0;
position: absolute;
top: 4px;
left: 4px;
opacity: 0;
transition: 0.3s;
display: block;
}
&:hover:after {
opacity: 1;
}
}
&--radio {
&:before,
&:after {
border-radius: 100%;
}
}
}
}
@include media-breakpoint-up(md) {
.formelement {
padding: $input-btn-padding-y $input-btn-padding-x;
&__options {
margin-top: $input-btn-padding-y;
}
&--checkbox,
&--radio {
padding: $input-btn-padding-y/2 0;
}
}
}
Select
<div class="form">
<div class="formelement__wrapper formelement__wrapper--select">
<input class="formelement__value" type="hidden" />
<div
id="select"
class="formelement formelement--select formelement--placeholder"
type="text"
data-placeholder="Placeholder"
>
<div class="formelement__selected">
<div class="formelement__option formelement__option--selected formelement__option--placeholder">
Placeholder
</div>
</div>
<div class="formelement__options">
<div class="formelement__option" data-value="os">Osnabrück</div>
<div class="formelement__option" data-value="ms">Münster</div>
</div>
</div>
<label for="select" class="formelement__label">City</label>
</div>
</div>
<script type="module" src="/dist/js/kampmann.umd.min.js"></script>
{{ page.inlinestyles }}
.formelement {
display: block;
width: 100%;
box-shadow: none !important;
color: $primary;
border-color: $body-color;
border-width: 1px;
border-style: solid;
border-radius: $border-radius;
outline: none;
padding: $input-btn-padding-y/1.5 $input-btn-padding-x;
appearance: none;
background: transparent;
&__wrapper {
position: relative;
color: $body-color;
&:after,
.formelement__icon {
position: absolute;
right: $input-btn-padding-x;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
filter: grayscale(1);
}
&--active {
color: $primary;
&:after {
filter: none;
}
}
&--select {
cursor: pointer;
&:after {
content: url("data:image/svg+xml,%0A%3Csvg width='15px' height='8px' viewBox='0 0 15 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Arrow/Down/Blue' fill='%230E2249' fill-rule='nonzero'%3E%3Cg id='Icon/Arrow-Down'%3E%3Cpath d='M14.1998092,0.237903236 C14.382876,0.0548535132 14.679672,0.054867357 14.8627218,0.237934157 C15.0228903,0.398117607 15.0429007,0.64537504 14.9227603,0.827315545 L14.8626908,0.900846764 L8.16294226,7.59997018 C7.98720591,7.775957 7.7487059,7.87484644 7.5,7.87484644 C7.29274509,7.87484644 7.09257759,7.80617322 6.93005839,7.68158351 L6.83730916,7.60022176 L0.137309157,0.900846764 C-0.045757643,0.717797041 -0.0457714868,0.421000957 0.137278236,0.237934157 C0.297446744,0.077750707 0.544702309,0.0577171766 0.726654021,0.177840674 L0.800190843,0.237903236 L7.5,6.937 L14.1998092,0.237903236 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
}
&--search {
// &:after {
// content: url("data:image/svg+xml,%0A%3Csvg width='17px' height='17px' viewBox='0 0 17 17' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.822470022'%3E%3Cg id='Form/Input/Text/Search/Hover' transform='translate(-422.000000, -15.000000)' fill='%238A8882' fill-rule='nonzero'%3E%3Cg id='Icon/Search' transform='translate(422.000000, 15.000000)'%3E%3Cpath d='M16.8508772,15.9594542 L12.5760234,11.6846004 C12.4998051,11.6083821 12.4003899,11.568616 12.294347,11.568616 L11.9530214,11.568616 C13.0896686,10.3391813 13.785575,8.69883041 13.785575,6.89278752 C13.785575,3.08518519 10.7003899,0 6.89278752,0 C3.08518519,0 0,3.08518519 0,6.89278752 C0,10.7003899 3.08518519,13.785575 6.89278752,13.785575 C8.69883041,13.785575 10.3391813,13.0896686 11.568616,11.9563353 L11.568616,12.294347 C11.568616,12.4003899 11.6116959,12.4998051 11.6846004,12.5760234 L15.9594542,16.8508772 C16.1152047,17.0066277 16.3670565,17.0066277 16.522807,16.8508772 L16.8508772,16.522807 C17.0066277,16.3670565 17.0066277,16.1152047 16.8508772,15.9594542 Z M6.89278752,12.7251462 C3.66842105,12.7251462 1.06042885,10.117154 1.06042885,6.89278752 C1.06042885,3.66842105 3.66842105,1.06042885 6.89278752,1.06042885 C10.117154,1.06042885 12.7251462,3.66842105 12.7251462,6.89278752 C12.7251462,10.117154 10.117154,12.7251462 6.89278752,12.7251462 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
// }
// &:focus{
// &:after{
// content: url("data:image/svg+xml,%0A%3Csvg width='17px' height='17px' viewBox='0 0 17 17' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.822470022'%3E%3Cg id='Form/Input/Text/Search/Hover' transform='translate(-422.000000, -15.000000)' fill='%230E2249' fill-rule='nonzero'%3E%3Cg id='Icon/Search' transform='translate(422.000000, 15.000000)'%3E%3Cpath d='M16.8508772,15.9594542 L12.5760234,11.6846004 C12.4998051,11.6083821 12.4003899,11.568616 12.294347,11.568616 L11.9530214,11.568616 C13.0896686,10.3391813 13.785575,8.69883041 13.785575,6.89278752 C13.785575,3.08518519 10.7003899,0 6.89278752,0 C3.08518519,0 0,3.08518519 0,6.89278752 C0,10.7003899 3.08518519,13.785575 6.89278752,13.785575 C8.69883041,13.785575 10.3391813,13.0896686 11.568616,11.9563353 L11.568616,12.294347 C11.568616,12.4003899 11.6116959,12.4998051 11.6846004,12.5760234 L15.9594542,16.8508772 C16.1152047,17.0066277 16.3670565,17.0066277 16.522807,16.8508772 L16.8508772,16.522807 C17.0066277,16.3670565 17.0066277,16.1152047 16.8508772,15.9594542 Z M6.89278752,12.7251462 C3.66842105,12.7251462 1.06042885,10.117154 1.06042885,6.89278752 C1.06042885,3.66842105 3.66842105,1.06042885 6.89278752,1.06042885 C10.117154,1.06042885 12.7251462,3.66842105 12.7251462,6.89278752 C12.7251462,10.117154 10.117154,12.7251462 6.89278752,12.7251462 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
// }
// }
}
&--horizontal {
display: flex;
margin-left: $grid-gutter-width * -1;
margin-right: $grid-gutter-width * -1;
> * {
width: auto;
flex: 0 0 auto;
padding-left: $grid-gutter-width !important;
padding-right: $grid-gutter-width !important;
}
}
}
&__options {
display: none;
position: absolute;
left: 0;
margin-top: $input-btn-padding-y/1.5;
border: $border-width solid $body-color;
width: 100%;
border-radius: $border-radius;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top-width: 0;
background: $white;
z-index: 999;
max-height: calc(var(--items, 4.5) * 51px);
overflow: auto;
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
&__option {
&:not(.formelement__option--selected) {
padding: $input-btn-padding-y $input-btn-padding-x;
transition: 0.3s;
cursor: pointer;
&:hover {
background-color: rgba($blue, 0.1);
}
}
.formelement--checkbox &,
.formelement--radio & {
position: absolute;
opacity: 0;
pointer-events: none;
}
&--selected {
.formelement__option__check {
display: none;
}
}
&--active,
&:checked + .formelement__label,
+ .formelement__label:hover,
&:hover {
.formelement__option__check {
background-color: $primary;
> * {
stroke-dashoffset: 0;
}
}
}
&:not(.formelement__option--active):hover,
&:not(:checked):hover + .formelement__label {
.formelement__option__check {
background: rgba($primary, 0.25);
}
}
&__check {
width: 20px;
height: 20px;
flex-shrink: 0;
border: 1px solid $primary;
border-radius: $border-radius-xs;
transition: 0.3s;
> * {
stroke-dasharray: 32px;
stroke-dashoffset: 32px;
transition: 0.5s 0.2s;
}
}
}
&--select {
&.formelement {
&--active {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-color: $body-color !important;
border-width: $border-width !important;
border-bottom-color: transparent !important;
.formelement {
&__options {
display: block;
}
}
}
}
}
&--checkbox,
&--radio {
border: none;
padding: $input-btn-padding-y/3 0;
.formelement {
&__label {
display: flex;
cursor: pointer;
}
&__option {
&__check {
margin-right: $grid-gutter-width/2;
}
}
}
}
&--select-multi {
.formelement {
&__selected {
text-overflow: ellipsis;
overflow: hidden;
}
&__options {
> * {
display: flex;
.formelement__option__text {
width: 100%;
}
}
}
&__option {
&--selected {
white-space: nowrap;
display: inline;
&:not(:last-child):after {
content: ', ';
margin-left: -0.2em;
}
}
}
}
}
&--input {
&:focus {
color: $primary;
border-color: $primary;
+ .formelement__label {
display: block;
}
}
}
&--select,
&--search {
padding-right: calc(#{$input-btn-padding-x} * 2);
}
&--radio {
.formelement__option:checked {
+ .formelement__label {
&:after {
background-color: $primary;
opacity: 1;
}
}
}
}
&:placeholder-shown:not(:active):not(:focus),
&--placeholder {
background-color: rgba($gray-beige-light, 1);
border-color: transparent;
&:hover {
border-color: $body-color;
}
+ .formelement__label {
display: none;
}
}
&::placeholder,
&__option--placeholder {
text-transform: uppercase;
color: $body-color;
letter-spacing: 1.75px;
}
&__label {
&:not(.formelement__label--radio, .formelement__label--checkbox) {
position: absolute;
text-transform: uppercase;
letter-spacing: 1.38px;
font-size: $font-size-xs;
top: 0;
transform: translateY(-50%);
background: var(--background-color, $white);
left: calc(#{$input-btn-padding-x} - 0.5rem);
padding: 0 0.5rem;
line-height: 1;
}
&--radio {
display: flex;
position: relative;
cursor: pointer;
&:before {
content: '';
display: block;
width: $grid-gutter-width/1.25;
height: $grid-gutter-width/1.25;
border-color: rgba($body-color, 0.82);
border-width: 1px;
border-style: solid;
flex-shrink: 0;
margin-right: $grid-gutter-width/2;
}
&:after {
content: '';
width: 8px;
height: 8px;
background-color: rgba($primary, 0.25);
flex-shrink: 0;
position: absolute;
top: 4px;
left: 4px;
opacity: 0;
transition: 0.3s;
display: block;
}
&:hover:after {
opacity: 1;
}
}
&--radio {
&:before,
&:after {
border-radius: 100%;
}
}
}
}
@include media-breakpoint-up(md) {
.formelement {
padding: $input-btn-padding-y $input-btn-padding-x;
&__options {
margin-top: $input-btn-padding-y;
}
&--checkbox,
&--radio {
padding: $input-btn-padding-y/2 0;
}
}
}
<div class="form">
<div class="formelement__wrapper formelement__wrapper--select">
<input class="formelement__value" type="hidden" />
<div
id="select"
class="formelement formelement--select formelement--select-multi formelement--placeholder"
type="text"
data-placeholder="Placeholder"
>
<div class="formelement__selected">
<div class="formelement__option formelement__option--selected formelement__option--placeholder">
Placeholder
</div>
</div>
<div class="formelement__options">
<div class="formelement__option" data-value="os">
<span class="formelement__option__text">Osnabrück</span>
<svg
version="1.1"
class="formelement__option__check"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 34 34"
xml:space="preserve"
>
<polyline
style="fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"
points="6,17.7 12.9,24.5
28,9.5 "
/>
</svg>
</div>
<div class="formelement__option" data-value="ms">
<span class="formelement__option__text">Münster</span>
<svg
version="1.1"
class="formelement__option__check"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 34 34"
xml:space="preserve"
>
<polyline
style="fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"
points="6,17.7 12.9,24.5
28,9.5 "
/>
</svg>
</div>
<div class="formelement__option" data-value="bf">
<span class="formelement__option__text">Bielefeld</span>
<svg
version="1.1"
class="formelement__option__check"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 34 34"
xml:space="preserve"
>
<polyline
style="fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"
points="6,17.7 12.9,24.5
28,9.5 "
/>
</svg>
</div>
<div class="formelement__option" data-value="dt">
<span class="formelement__option__text">Dortmund</span>
<svg
version="1.1"
class="formelement__option__check"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 34 34"
xml:space="preserve"
>
<polyline
style="fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"
points="6,17.7 12.9,24.5
28,9.5 "
/>
</svg>
</div>
<div class="formelement__option" data-value="b">
<span class="formelement__option__text">Berlin</span>
<svg
version="1.1"
class="formelement__option__check"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 34 34"
xml:space="preserve"
>
<polyline
style="fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"
points="6,17.7 12.9,24.5
28,9.5 "
/>
</svg>
</div>
<div class="formelement__option" data-value="m">
<span class="formelement__option__text">München</span>
<svg
version="1.1"
class="formelement__option__check"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 34 34"
xml:space="preserve"
>
<polyline
style="fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"
points="6,17.7 12.9,24.5
28,9.5 "
/>
</svg>
</div>
<div class="formelement__option" data-value="f">
<span class="formelement__option__text">Frankfurt</span>
<svg
version="1.1"
class="formelement__option__check"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 34 34"
xml:space="preserve"
>
<polyline
style="fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"
points="6,17.7 12.9,24.5
28,9.5 "
/>
</svg>
</div>
</div>
</div>
<label for="select" class="formelement__label">City</label>
</div>
</div>
<script type="module" src="/dist/js/kampmann.umd.min.js"></script>
{{ page.inlinestyles }}
.formelement {
display: block;
width: 100%;
box-shadow: none !important;
color: $primary;
border-color: $body-color;
border-width: 1px;
border-style: solid;
border-radius: $border-radius;
outline: none;
padding: $input-btn-padding-y/1.5 $input-btn-padding-x;
appearance: none;
background: transparent;
&__wrapper {
position: relative;
color: $body-color;
&:after,
.formelement__icon {
position: absolute;
right: $input-btn-padding-x;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
filter: grayscale(1);
}
&--active {
color: $primary;
&:after {
filter: none;
}
}
&--select {
cursor: pointer;
&:after {
content: url("data:image/svg+xml,%0A%3Csvg width='15px' height='8px' viewBox='0 0 15 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Arrow/Down/Blue' fill='%230E2249' fill-rule='nonzero'%3E%3Cg id='Icon/Arrow-Down'%3E%3Cpath d='M14.1998092,0.237903236 C14.382876,0.0548535132 14.679672,0.054867357 14.8627218,0.237934157 C15.0228903,0.398117607 15.0429007,0.64537504 14.9227603,0.827315545 L14.8626908,0.900846764 L8.16294226,7.59997018 C7.98720591,7.775957 7.7487059,7.87484644 7.5,7.87484644 C7.29274509,7.87484644 7.09257759,7.80617322 6.93005839,7.68158351 L6.83730916,7.60022176 L0.137309157,0.900846764 C-0.045757643,0.717797041 -0.0457714868,0.421000957 0.137278236,0.237934157 C0.297446744,0.077750707 0.544702309,0.0577171766 0.726654021,0.177840674 L0.800190843,0.237903236 L7.5,6.937 L14.1998092,0.237903236 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
}
&--search {
// &:after {
// content: url("data:image/svg+xml,%0A%3Csvg width='17px' height='17px' viewBox='0 0 17 17' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.822470022'%3E%3Cg id='Form/Input/Text/Search/Hover' transform='translate(-422.000000, -15.000000)' fill='%238A8882' fill-rule='nonzero'%3E%3Cg id='Icon/Search' transform='translate(422.000000, 15.000000)'%3E%3Cpath d='M16.8508772,15.9594542 L12.5760234,11.6846004 C12.4998051,11.6083821 12.4003899,11.568616 12.294347,11.568616 L11.9530214,11.568616 C13.0896686,10.3391813 13.785575,8.69883041 13.785575,6.89278752 C13.785575,3.08518519 10.7003899,0 6.89278752,0 C3.08518519,0 0,3.08518519 0,6.89278752 C0,10.7003899 3.08518519,13.785575 6.89278752,13.785575 C8.69883041,13.785575 10.3391813,13.0896686 11.568616,11.9563353 L11.568616,12.294347 C11.568616,12.4003899 11.6116959,12.4998051 11.6846004,12.5760234 L15.9594542,16.8508772 C16.1152047,17.0066277 16.3670565,17.0066277 16.522807,16.8508772 L16.8508772,16.522807 C17.0066277,16.3670565 17.0066277,16.1152047 16.8508772,15.9594542 Z M6.89278752,12.7251462 C3.66842105,12.7251462 1.06042885,10.117154 1.06042885,6.89278752 C1.06042885,3.66842105 3.66842105,1.06042885 6.89278752,1.06042885 C10.117154,1.06042885 12.7251462,3.66842105 12.7251462,6.89278752 C12.7251462,10.117154 10.117154,12.7251462 6.89278752,12.7251462 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
// }
// &:focus{
// &:after{
// content: url("data:image/svg+xml,%0A%3Csvg width='17px' height='17px' viewBox='0 0 17 17' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.822470022'%3E%3Cg id='Form/Input/Text/Search/Hover' transform='translate(-422.000000, -15.000000)' fill='%230E2249' fill-rule='nonzero'%3E%3Cg id='Icon/Search' transform='translate(422.000000, 15.000000)'%3E%3Cpath d='M16.8508772,15.9594542 L12.5760234,11.6846004 C12.4998051,11.6083821 12.4003899,11.568616 12.294347,11.568616 L11.9530214,11.568616 C13.0896686,10.3391813 13.785575,8.69883041 13.785575,6.89278752 C13.785575,3.08518519 10.7003899,0 6.89278752,0 C3.08518519,0 0,3.08518519 0,6.89278752 C0,10.7003899 3.08518519,13.785575 6.89278752,13.785575 C8.69883041,13.785575 10.3391813,13.0896686 11.568616,11.9563353 L11.568616,12.294347 C11.568616,12.4003899 11.6116959,12.4998051 11.6846004,12.5760234 L15.9594542,16.8508772 C16.1152047,17.0066277 16.3670565,17.0066277 16.522807,16.8508772 L16.8508772,16.522807 C17.0066277,16.3670565 17.0066277,16.1152047 16.8508772,15.9594542 Z M6.89278752,12.7251462 C3.66842105,12.7251462 1.06042885,10.117154 1.06042885,6.89278752 C1.06042885,3.66842105 3.66842105,1.06042885 6.89278752,1.06042885 C10.117154,1.06042885 12.7251462,3.66842105 12.7251462,6.89278752 C12.7251462,10.117154 10.117154,12.7251462 6.89278752,12.7251462 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
// }
// }
}
&--horizontal {
display: flex;
margin-left: $grid-gutter-width * -1;
margin-right: $grid-gutter-width * -1;
> * {
width: auto;
flex: 0 0 auto;
padding-left: $grid-gutter-width !important;
padding-right: $grid-gutter-width !important;
}
}
}
&__options {
display: none;
position: absolute;
left: 0;
margin-top: $input-btn-padding-y/1.5;
border: $border-width solid $body-color;
width: 100%;
border-radius: $border-radius;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top-width: 0;
background: $white;
z-index: 999;
max-height: calc(var(--items, 4.5) * 51px);
overflow: auto;
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
&__option {
&:not(.formelement__option--selected) {
padding: $input-btn-padding-y $input-btn-padding-x;
transition: 0.3s;
cursor: pointer;
&:hover {
background-color: rgba($blue, 0.1);
}
}
.formelement--checkbox &,
.formelement--radio & {
position: absolute;
opacity: 0;
pointer-events: none;
}
&--selected {
.formelement__option__check {
display: none;
}
}
&--active,
&:checked + .formelement__label,
+ .formelement__label:hover,
&:hover {
.formelement__option__check {
background-color: $primary;
> * {
stroke-dashoffset: 0;
}
}
}
&:not(.formelement__option--active):hover,
&:not(:checked):hover + .formelement__label {
.formelement__option__check {
background: rgba($primary, 0.25);
}
}
&__check {
width: 20px;
height: 20px;
flex-shrink: 0;
border: 1px solid $primary;
border-radius: $border-radius-xs;
transition: 0.3s;
> * {
stroke-dasharray: 32px;
stroke-dashoffset: 32px;
transition: 0.5s 0.2s;
}
}
}
&--select {
&.formelement {
&--active {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-color: $body-color !important;
border-width: $border-width !important;
border-bottom-color: transparent !important;
.formelement {
&__options {
display: block;
}
}
}
}
}
&--checkbox,
&--radio {
border: none;
padding: $input-btn-padding-y/3 0;
.formelement {
&__label {
display: flex;
cursor: pointer;
}
&__option {
&__check {
margin-right: $grid-gutter-width/2;
}
}
}
}
&--select-multi {
.formelement {
&__selected {
text-overflow: ellipsis;
overflow: hidden;
}
&__options {
> * {
display: flex;
.formelement__option__text {
width: 100%;
}
}
}
&__option {
&--selected {
white-space: nowrap;
display: inline;
&:not(:last-child):after {
content: ', ';
margin-left: -0.2em;
}
}
}
}
}
&--input {
&:focus {
color: $primary;
border-color: $primary;
+ .formelement__label {
display: block;
}
}
}
&--select,
&--search {
padding-right: calc(#{$input-btn-padding-x} * 2);
}
&--radio {
.formelement__option:checked {
+ .formelement__label {
&:after {
background-color: $primary;
opacity: 1;
}
}
}
}
&:placeholder-shown:not(:active):not(:focus),
&--placeholder {
background-color: rgba($gray-beige-light, 1);
border-color: transparent;
&:hover {
border-color: $body-color;
}
+ .formelement__label {
display: none;
}
}
&::placeholder,
&__option--placeholder {
text-transform: uppercase;
color: $body-color;
letter-spacing: 1.75px;
}
&__label {
&:not(.formelement__label--radio, .formelement__label--checkbox) {
position: absolute;
text-transform: uppercase;
letter-spacing: 1.38px;
font-size: $font-size-xs;
top: 0;
transform: translateY(-50%);
background: var(--background-color, $white);
left: calc(#{$input-btn-padding-x} - 0.5rem);
padding: 0 0.5rem;
line-height: 1;
}
&--radio {
display: flex;
position: relative;
cursor: pointer;
&:before {
content: '';
display: block;
width: $grid-gutter-width/1.25;
height: $grid-gutter-width/1.25;
border-color: rgba($body-color, 0.82);
border-width: 1px;
border-style: solid;
flex-shrink: 0;
margin-right: $grid-gutter-width/2;
}
&:after {
content: '';
width: 8px;
height: 8px;
background-color: rgba($primary, 0.25);
flex-shrink: 0;
position: absolute;
top: 4px;
left: 4px;
opacity: 0;
transition: 0.3s;
display: block;
}
&:hover:after {
opacity: 1;
}
}
&--radio {
&:before,
&:after {
border-radius: 100%;
}
}
}
}
@include media-breakpoint-up(md) {
.formelement {
padding: $input-btn-padding-y $input-btn-padding-x;
&__options {
margin-top: $input-btn-padding-y;
}
&--checkbox,
&--radio {
padding: $input-btn-padding-y/2 0;
}
}
}
Choice
<div class="form">
<div class="formelement__wrapper">
<div class="formelement formelement--checkbox">
<input id="checkbox" class="formelement__option" type="checkbox" />
<label for="checkbox" class="formelement__label formelement__label--checkbox">
<svg
version="1.1"
class="formelement__option__check"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 34 34"
xml:space="preserve"
>
<polyline
style="fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"
points="6,17.7 12.9,24.5
28,9.5 "
/></svg
>Label 1</label
>
</div>
<div class="formelement formelement--checkbox">
<input id="checkbox2" class="formelement__option" type="checkbox" />
<label for="checkbox2" class="formelement__label formelement__label--checkbox">
<svg
version="1.1"
class="formelement__option__check"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 34 34"
xml:space="preserve"
>
<polyline
style="fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"
points="6,17.7 12.9,24.5
28,9.5 "
/></svg
>Label 2</label
>
</div>
</div>
</div>
<script src="{{ page.script }}"></script>
{{ page.inlinestyles }}
.formelement {
display: block;
width: 100%;
box-shadow: none !important;
color: $primary;
border-color: $body-color;
border-width: 1px;
border-style: solid;
border-radius: $border-radius;
outline: none;
padding: $input-btn-padding-y/1.5 $input-btn-padding-x;
appearance: none;
background: transparent;
&__wrapper {
position: relative;
color: $body-color;
&:after,
.formelement__icon {
position: absolute;
right: $input-btn-padding-x;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
filter: grayscale(1);
}
&--active {
color: $primary;
&:after {
filter: none;
}
}
&--select {
cursor: pointer;
&:after {
content: url("data:image/svg+xml,%0A%3Csvg width='15px' height='8px' viewBox='0 0 15 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Arrow/Down/Blue' fill='%230E2249' fill-rule='nonzero'%3E%3Cg id='Icon/Arrow-Down'%3E%3Cpath d='M14.1998092,0.237903236 C14.382876,0.0548535132 14.679672,0.054867357 14.8627218,0.237934157 C15.0228903,0.398117607 15.0429007,0.64537504 14.9227603,0.827315545 L14.8626908,0.900846764 L8.16294226,7.59997018 C7.98720591,7.775957 7.7487059,7.87484644 7.5,7.87484644 C7.29274509,7.87484644 7.09257759,7.80617322 6.93005839,7.68158351 L6.83730916,7.60022176 L0.137309157,0.900846764 C-0.045757643,0.717797041 -0.0457714868,0.421000957 0.137278236,0.237934157 C0.297446744,0.077750707 0.544702309,0.0577171766 0.726654021,0.177840674 L0.800190843,0.237903236 L7.5,6.937 L14.1998092,0.237903236 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
}
&--search {
// &:after {
// content: url("data:image/svg+xml,%0A%3Csvg width='17px' height='17px' viewBox='0 0 17 17' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.822470022'%3E%3Cg id='Form/Input/Text/Search/Hover' transform='translate(-422.000000, -15.000000)' fill='%238A8882' fill-rule='nonzero'%3E%3Cg id='Icon/Search' transform='translate(422.000000, 15.000000)'%3E%3Cpath d='M16.8508772,15.9594542 L12.5760234,11.6846004 C12.4998051,11.6083821 12.4003899,11.568616 12.294347,11.568616 L11.9530214,11.568616 C13.0896686,10.3391813 13.785575,8.69883041 13.785575,6.89278752 C13.785575,3.08518519 10.7003899,0 6.89278752,0 C3.08518519,0 0,3.08518519 0,6.89278752 C0,10.7003899 3.08518519,13.785575 6.89278752,13.785575 C8.69883041,13.785575 10.3391813,13.0896686 11.568616,11.9563353 L11.568616,12.294347 C11.568616,12.4003899 11.6116959,12.4998051 11.6846004,12.5760234 L15.9594542,16.8508772 C16.1152047,17.0066277 16.3670565,17.0066277 16.522807,16.8508772 L16.8508772,16.522807 C17.0066277,16.3670565 17.0066277,16.1152047 16.8508772,15.9594542 Z M6.89278752,12.7251462 C3.66842105,12.7251462 1.06042885,10.117154 1.06042885,6.89278752 C1.06042885,3.66842105 3.66842105,1.06042885 6.89278752,1.06042885 C10.117154,1.06042885 12.7251462,3.66842105 12.7251462,6.89278752 C12.7251462,10.117154 10.117154,12.7251462 6.89278752,12.7251462 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
// }
// &:focus{
// &:after{
// content: url("data:image/svg+xml,%0A%3Csvg width='17px' height='17px' viewBox='0 0 17 17' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.822470022'%3E%3Cg id='Form/Input/Text/Search/Hover' transform='translate(-422.000000, -15.000000)' fill='%230E2249' fill-rule='nonzero'%3E%3Cg id='Icon/Search' transform='translate(422.000000, 15.000000)'%3E%3Cpath d='M16.8508772,15.9594542 L12.5760234,11.6846004 C12.4998051,11.6083821 12.4003899,11.568616 12.294347,11.568616 L11.9530214,11.568616 C13.0896686,10.3391813 13.785575,8.69883041 13.785575,6.89278752 C13.785575,3.08518519 10.7003899,0 6.89278752,0 C3.08518519,0 0,3.08518519 0,6.89278752 C0,10.7003899 3.08518519,13.785575 6.89278752,13.785575 C8.69883041,13.785575 10.3391813,13.0896686 11.568616,11.9563353 L11.568616,12.294347 C11.568616,12.4003899 11.6116959,12.4998051 11.6846004,12.5760234 L15.9594542,16.8508772 C16.1152047,17.0066277 16.3670565,17.0066277 16.522807,16.8508772 L16.8508772,16.522807 C17.0066277,16.3670565 17.0066277,16.1152047 16.8508772,15.9594542 Z M6.89278752,12.7251462 C3.66842105,12.7251462 1.06042885,10.117154 1.06042885,6.89278752 C1.06042885,3.66842105 3.66842105,1.06042885 6.89278752,1.06042885 C10.117154,1.06042885 12.7251462,3.66842105 12.7251462,6.89278752 C12.7251462,10.117154 10.117154,12.7251462 6.89278752,12.7251462 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
// }
// }
}
&--horizontal {
display: flex;
margin-left: $grid-gutter-width * -1;
margin-right: $grid-gutter-width * -1;
> * {
width: auto;
flex: 0 0 auto;
padding-left: $grid-gutter-width !important;
padding-right: $grid-gutter-width !important;
}
}
}
&__options {
display: none;
position: absolute;
left: 0;
margin-top: $input-btn-padding-y/1.5;
border: $border-width solid $body-color;
width: 100%;
border-radius: $border-radius;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top-width: 0;
background: $white;
z-index: 999;
max-height: calc(var(--items, 4.5) * 51px);
overflow: auto;
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
&__option {
&:not(.formelement__option--selected) {
padding: $input-btn-padding-y $input-btn-padding-x;
transition: 0.3s;
cursor: pointer;
&:hover {
background-color: rgba($blue, 0.1);
}
}
.formelement--checkbox &,
.formelement--radio & {
position: absolute;
opacity: 0;
pointer-events: none;
}
&--selected {
.formelement__option__check {
display: none;
}
}
&--active,
&:checked + .formelement__label,
+ .formelement__label:hover,
&:hover {
.formelement__option__check {
background-color: $primary;
> * {
stroke-dashoffset: 0;
}
}
}
&:not(.formelement__option--active):hover,
&:not(:checked):hover + .formelement__label {
.formelement__option__check {
background: rgba($primary, 0.25);
}
}
&__check {
width: 20px;
height: 20px;
flex-shrink: 0;
border: 1px solid $primary;
border-radius: $border-radius-xs;
transition: 0.3s;
> * {
stroke-dasharray: 32px;
stroke-dashoffset: 32px;
transition: 0.5s 0.2s;
}
}
}
&--select {
&.formelement {
&--active {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-color: $body-color !important;
border-width: $border-width !important;
border-bottom-color: transparent !important;
.formelement {
&__options {
display: block;
}
}
}
}
}
&--checkbox,
&--radio {
border: none;
padding: $input-btn-padding-y/3 0;
.formelement {
&__label {
display: flex;
cursor: pointer;
}
&__option {
&__check {
margin-right: $grid-gutter-width/2;
}
}
}
}
&--select-multi {
.formelement {
&__selected {
text-overflow: ellipsis;
overflow: hidden;
}
&__options {
> * {
display: flex;
.formelement__option__text {
width: 100%;
}
}
}
&__option {
&--selected {
white-space: nowrap;
display: inline;
&:not(:last-child):after {
content: ', ';
margin-left: -0.2em;
}
}
}
}
}
&--input {
&:focus {
color: $primary;
border-color: $primary;
+ .formelement__label {
display: block;
}
}
}
&--select,
&--search {
padding-right: calc(#{$input-btn-padding-x} * 2);
}
&--radio {
.formelement__option:checked {
+ .formelement__label {
&:after {
background-color: $primary;
opacity: 1;
}
}
}
}
&:placeholder-shown:not(:active):not(:focus),
&--placeholder {
background-color: rgba($gray-beige-light, 1);
border-color: transparent;
&:hover {
border-color: $body-color;
}
+ .formelement__label {
display: none;
}
}
&::placeholder,
&__option--placeholder {
text-transform: uppercase;
color: $body-color;
letter-spacing: 1.75px;
}
&__label {
&:not(.formelement__label--radio, .formelement__label--checkbox) {
position: absolute;
text-transform: uppercase;
letter-spacing: 1.38px;
font-size: $font-size-xs;
top: 0;
transform: translateY(-50%);
background: var(--background-color, $white);
left: calc(#{$input-btn-padding-x} - 0.5rem);
padding: 0 0.5rem;
line-height: 1;
}
&--radio {
display: flex;
position: relative;
cursor: pointer;
&:before {
content: '';
display: block;
width: $grid-gutter-width/1.25;
height: $grid-gutter-width/1.25;
border-color: rgba($body-color, 0.82);
border-width: 1px;
border-style: solid;
flex-shrink: 0;
margin-right: $grid-gutter-width/2;
}
&:after {
content: '';
width: 8px;
height: 8px;
background-color: rgba($primary, 0.25);
flex-shrink: 0;
position: absolute;
top: 4px;
left: 4px;
opacity: 0;
transition: 0.3s;
display: block;
}
&:hover:after {
opacity: 1;
}
}
&--radio {
&:before,
&:after {
border-radius: 100%;
}
}
}
}
@include media-breakpoint-up(md) {
.formelement {
padding: $input-btn-padding-y $input-btn-padding-x;
&__options {
margin-top: $input-btn-padding-y;
}
&--checkbox,
&--radio {
padding: $input-btn-padding-y/2 0;
}
}
}
<div class="form">
<div class="formelement__wrapper formelement__wrapper--horizontal">
<div class="formelement formelement--checkbox">
<input id="checkbox" class="formelement__option" type="checkbox" />
<label for="checkbox" class="formelement__label formelement__label--checkbox">
<svg
version="1.1"
class="formelement__option__check"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 34 34"
xml:space="preserve"
>
<polyline
style="fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"
points="6,17.7 12.9,24.5
28,9.5 "
/></svg
>Label 1</label
>
</div>
<div class="formelement formelement--checkbox">
<input id="checkbox2" class="formelement__option" type="checkbox" />
<label for="checkbox2" class="formelement__label formelement__label--checkbox">
<svg
version="1.1"
class="formelement__option__check"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 34 34"
xml:space="preserve"
>
<polyline
style="fill: none; stroke: #ffffff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"
points="6,17.7 12.9,24.5
28,9.5 "
/></svg
>Label 2</label
>
</div>
</div>
</div>
<script src="{{ page.script }}"></script>
{{ page.inlinestyles }}
.formelement {
display: block;
width: 100%;
box-shadow: none !important;
color: $primary;
border-color: $body-color;
border-width: 1px;
border-style: solid;
border-radius: $border-radius;
outline: none;
padding: $input-btn-padding-y/1.5 $input-btn-padding-x;
appearance: none;
background: transparent;
&__wrapper {
position: relative;
color: $body-color;
&:after,
.formelement__icon {
position: absolute;
right: $input-btn-padding-x;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
filter: grayscale(1);
}
&--active {
color: $primary;
&:after {
filter: none;
}
}
&--select {
cursor: pointer;
&:after {
content: url("data:image/svg+xml,%0A%3Csvg width='15px' height='8px' viewBox='0 0 15 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Arrow/Down/Blue' fill='%230E2249' fill-rule='nonzero'%3E%3Cg id='Icon/Arrow-Down'%3E%3Cpath d='M14.1998092,0.237903236 C14.382876,0.0548535132 14.679672,0.054867357 14.8627218,0.237934157 C15.0228903,0.398117607 15.0429007,0.64537504 14.9227603,0.827315545 L14.8626908,0.900846764 L8.16294226,7.59997018 C7.98720591,7.775957 7.7487059,7.87484644 7.5,7.87484644 C7.29274509,7.87484644 7.09257759,7.80617322 6.93005839,7.68158351 L6.83730916,7.60022176 L0.137309157,0.900846764 C-0.045757643,0.717797041 -0.0457714868,0.421000957 0.137278236,0.237934157 C0.297446744,0.077750707 0.544702309,0.0577171766 0.726654021,0.177840674 L0.800190843,0.237903236 L7.5,6.937 L14.1998092,0.237903236 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
}
&--search {
// &:after {
// content: url("data:image/svg+xml,%0A%3Csvg width='17px' height='17px' viewBox='0 0 17 17' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.822470022'%3E%3Cg id='Form/Input/Text/Search/Hover' transform='translate(-422.000000, -15.000000)' fill='%238A8882' fill-rule='nonzero'%3E%3Cg id='Icon/Search' transform='translate(422.000000, 15.000000)'%3E%3Cpath d='M16.8508772,15.9594542 L12.5760234,11.6846004 C12.4998051,11.6083821 12.4003899,11.568616 12.294347,11.568616 L11.9530214,11.568616 C13.0896686,10.3391813 13.785575,8.69883041 13.785575,6.89278752 C13.785575,3.08518519 10.7003899,0 6.89278752,0 C3.08518519,0 0,3.08518519 0,6.89278752 C0,10.7003899 3.08518519,13.785575 6.89278752,13.785575 C8.69883041,13.785575 10.3391813,13.0896686 11.568616,11.9563353 L11.568616,12.294347 C11.568616,12.4003899 11.6116959,12.4998051 11.6846004,12.5760234 L15.9594542,16.8508772 C16.1152047,17.0066277 16.3670565,17.0066277 16.522807,16.8508772 L16.8508772,16.522807 C17.0066277,16.3670565 17.0066277,16.1152047 16.8508772,15.9594542 Z M6.89278752,12.7251462 C3.66842105,12.7251462 1.06042885,10.117154 1.06042885,6.89278752 C1.06042885,3.66842105 3.66842105,1.06042885 6.89278752,1.06042885 C10.117154,1.06042885 12.7251462,3.66842105 12.7251462,6.89278752 C12.7251462,10.117154 10.117154,12.7251462 6.89278752,12.7251462 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
// }
// &:focus{
// &:after{
// content: url("data:image/svg+xml,%0A%3Csvg width='17px' height='17px' viewBox='0 0 17 17' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.822470022'%3E%3Cg id='Form/Input/Text/Search/Hover' transform='translate(-422.000000, -15.000000)' fill='%230E2249' fill-rule='nonzero'%3E%3Cg id='Icon/Search' transform='translate(422.000000, 15.000000)'%3E%3Cpath d='M16.8508772,15.9594542 L12.5760234,11.6846004 C12.4998051,11.6083821 12.4003899,11.568616 12.294347,11.568616 L11.9530214,11.568616 C13.0896686,10.3391813 13.785575,8.69883041 13.785575,6.89278752 C13.785575,3.08518519 10.7003899,0 6.89278752,0 C3.08518519,0 0,3.08518519 0,6.89278752 C0,10.7003899 3.08518519,13.785575 6.89278752,13.785575 C8.69883041,13.785575 10.3391813,13.0896686 11.568616,11.9563353 L11.568616,12.294347 C11.568616,12.4003899 11.6116959,12.4998051 11.6846004,12.5760234 L15.9594542,16.8508772 C16.1152047,17.0066277 16.3670565,17.0066277 16.522807,16.8508772 L16.8508772,16.522807 C17.0066277,16.3670565 17.0066277,16.1152047 16.8508772,15.9594542 Z M6.89278752,12.7251462 C3.66842105,12.7251462 1.06042885,10.117154 1.06042885,6.89278752 C1.06042885,3.66842105 3.66842105,1.06042885 6.89278752,1.06042885 C10.117154,1.06042885 12.7251462,3.66842105 12.7251462,6.89278752 C12.7251462,10.117154 10.117154,12.7251462 6.89278752,12.7251462 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
// }
// }
}
&--horizontal {
display: flex;
margin-left: $grid-gutter-width * -1;
margin-right: $grid-gutter-width * -1;
> * {
width: auto;
flex: 0 0 auto;
padding-left: $grid-gutter-width !important;
padding-right: $grid-gutter-width !important;
}
}
}
&__options {
display: none;
position: absolute;
left: 0;
margin-top: $input-btn-padding-y/1.5;
border: $border-width solid $body-color;
width: 100%;
border-radius: $border-radius;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top-width: 0;
background: $white;
z-index: 999;
max-height: calc(var(--items, 4.5) * 51px);
overflow: auto;
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
&__option {
&:not(.formelement__option--selected) {
padding: $input-btn-padding-y $input-btn-padding-x;
transition: 0.3s;
cursor: pointer;
&:hover {
background-color: rgba($blue, 0.1);
}
}
.formelement--checkbox &,
.formelement--radio & {
position: absolute;
opacity: 0;
pointer-events: none;
}
&--selected {
.formelement__option__check {
display: none;
}
}
&--active,
&:checked + .formelement__label,
+ .formelement__label:hover,
&:hover {
.formelement__option__check {
background-color: $primary;
> * {
stroke-dashoffset: 0;
}
}
}
&:not(.formelement__option--active):hover,
&:not(:checked):hover + .formelement__label {
.formelement__option__check {
background: rgba($primary, 0.25);
}
}
&__check {
width: 20px;
height: 20px;
flex-shrink: 0;
border: 1px solid $primary;
border-radius: $border-radius-xs;
transition: 0.3s;
> * {
stroke-dasharray: 32px;
stroke-dashoffset: 32px;
transition: 0.5s 0.2s;
}
}
}
&--select {
&.formelement {
&--active {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-color: $body-color !important;
border-width: $border-width !important;
border-bottom-color: transparent !important;
.formelement {
&__options {
display: block;
}
}
}
}
}
&--checkbox,
&--radio {
border: none;
padding: $input-btn-padding-y/3 0;
.formelement {
&__label {
display: flex;
cursor: pointer;
}
&__option {
&__check {
margin-right: $grid-gutter-width/2;
}
}
}
}
&--select-multi {
.formelement {
&__selected {
text-overflow: ellipsis;
overflow: hidden;
}
&__options {
> * {
display: flex;
.formelement__option__text {
width: 100%;
}
}
}
&__option {
&--selected {
white-space: nowrap;
display: inline;
&:not(:last-child):after {
content: ', ';
margin-left: -0.2em;
}
}
}
}
}
&--input {
&:focus {
color: $primary;
border-color: $primary;
+ .formelement__label {
display: block;
}
}
}
&--select,
&--search {
padding-right: calc(#{$input-btn-padding-x} * 2);
}
&--radio {
.formelement__option:checked {
+ .formelement__label {
&:after {
background-color: $primary;
opacity: 1;
}
}
}
}
&:placeholder-shown:not(:active):not(:focus),
&--placeholder {
background-color: rgba($gray-beige-light, 1);
border-color: transparent;
&:hover {
border-color: $body-color;
}
+ .formelement__label {
display: none;
}
}
&::placeholder,
&__option--placeholder {
text-transform: uppercase;
color: $body-color;
letter-spacing: 1.75px;
}
&__label {
&:not(.formelement__label--radio, .formelement__label--checkbox) {
position: absolute;
text-transform: uppercase;
letter-spacing: 1.38px;
font-size: $font-size-xs;
top: 0;
transform: translateY(-50%);
background: var(--background-color, $white);
left: calc(#{$input-btn-padding-x} - 0.5rem);
padding: 0 0.5rem;
line-height: 1;
}
&--radio {
display: flex;
position: relative;
cursor: pointer;
&:before {
content: '';
display: block;
width: $grid-gutter-width/1.25;
height: $grid-gutter-width/1.25;
border-color: rgba($body-color, 0.82);
border-width: 1px;
border-style: solid;
flex-shrink: 0;
margin-right: $grid-gutter-width/2;
}
&:after {
content: '';
width: 8px;
height: 8px;
background-color: rgba($primary, 0.25);
flex-shrink: 0;
position: absolute;
top: 4px;
left: 4px;
opacity: 0;
transition: 0.3s;
display: block;
}
&:hover:after {
opacity: 1;
}
}
&--radio {
&:before,
&:after {
border-radius: 100%;
}
}
}
}
@include media-breakpoint-up(md) {
.formelement {
padding: $input-btn-padding-y $input-btn-padding-x;
&__options {
margin-top: $input-btn-padding-y;
}
&--checkbox,
&--radio {
padding: $input-btn-padding-y/2 0;
}
}
}
<div class="form">
<div class="formelement__wrapper">
<div class="formelement formelement--radio">
<input id="radio_0" name="radio" class="formelement__option" type="radio" />
<label for="radio_0" class="formelement__label formelement__label--radio">Label 1</label>
</div>
<div class="formelement formelement--radio">
<input id="radio_1" name="radio" class="formelement__option" type="radio" />
<label for="radio_1" class="formelement__label formelement__label--radio">Label 2</label>
</div>
<div class="formelement formelement--radio">
<input id="radio_2" name="radio" class="formelement__option" type="radio" />
<label for="radio_2" class="formelement__label formelement__label--radio">Label 3</label>
</div>
</div>
</div>
<script src="{{ page.script }}"></script>
{{ page.inlinestyles }}
.formelement {
display: block;
width: 100%;
box-shadow: none !important;
color: $primary;
border-color: $body-color;
border-width: 1px;
border-style: solid;
border-radius: $border-radius;
outline: none;
padding: $input-btn-padding-y/1.5 $input-btn-padding-x;
appearance: none;
background: transparent;
&__wrapper {
position: relative;
color: $body-color;
&:after,
.formelement__icon {
position: absolute;
right: $input-btn-padding-x;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
filter: grayscale(1);
}
&--active {
color: $primary;
&:after {
filter: none;
}
}
&--select {
cursor: pointer;
&:after {
content: url("data:image/svg+xml,%0A%3Csvg width='15px' height='8px' viewBox='0 0 15 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Arrow/Down/Blue' fill='%230E2249' fill-rule='nonzero'%3E%3Cg id='Icon/Arrow-Down'%3E%3Cpath d='M14.1998092,0.237903236 C14.382876,0.0548535132 14.679672,0.054867357 14.8627218,0.237934157 C15.0228903,0.398117607 15.0429007,0.64537504 14.9227603,0.827315545 L14.8626908,0.900846764 L8.16294226,7.59997018 C7.98720591,7.775957 7.7487059,7.87484644 7.5,7.87484644 C7.29274509,7.87484644 7.09257759,7.80617322 6.93005839,7.68158351 L6.83730916,7.60022176 L0.137309157,0.900846764 C-0.045757643,0.717797041 -0.0457714868,0.421000957 0.137278236,0.237934157 C0.297446744,0.077750707 0.544702309,0.0577171766 0.726654021,0.177840674 L0.800190843,0.237903236 L7.5,6.937 L14.1998092,0.237903236 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
}
&--search {
// &:after {
// content: url("data:image/svg+xml,%0A%3Csvg width='17px' height='17px' viewBox='0 0 17 17' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.822470022'%3E%3Cg id='Form/Input/Text/Search/Hover' transform='translate(-422.000000, -15.000000)' fill='%238A8882' fill-rule='nonzero'%3E%3Cg id='Icon/Search' transform='translate(422.000000, 15.000000)'%3E%3Cpath d='M16.8508772,15.9594542 L12.5760234,11.6846004 C12.4998051,11.6083821 12.4003899,11.568616 12.294347,11.568616 L11.9530214,11.568616 C13.0896686,10.3391813 13.785575,8.69883041 13.785575,6.89278752 C13.785575,3.08518519 10.7003899,0 6.89278752,0 C3.08518519,0 0,3.08518519 0,6.89278752 C0,10.7003899 3.08518519,13.785575 6.89278752,13.785575 C8.69883041,13.785575 10.3391813,13.0896686 11.568616,11.9563353 L11.568616,12.294347 C11.568616,12.4003899 11.6116959,12.4998051 11.6846004,12.5760234 L15.9594542,16.8508772 C16.1152047,17.0066277 16.3670565,17.0066277 16.522807,16.8508772 L16.8508772,16.522807 C17.0066277,16.3670565 17.0066277,16.1152047 16.8508772,15.9594542 Z M6.89278752,12.7251462 C3.66842105,12.7251462 1.06042885,10.117154 1.06042885,6.89278752 C1.06042885,3.66842105 3.66842105,1.06042885 6.89278752,1.06042885 C10.117154,1.06042885 12.7251462,3.66842105 12.7251462,6.89278752 C12.7251462,10.117154 10.117154,12.7251462 6.89278752,12.7251462 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
// }
// &:focus{
// &:after{
// content: url("data:image/svg+xml,%0A%3Csvg width='17px' height='17px' viewBox='0 0 17 17' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.822470022'%3E%3Cg id='Form/Input/Text/Search/Hover' transform='translate(-422.000000, -15.000000)' fill='%230E2249' fill-rule='nonzero'%3E%3Cg id='Icon/Search' transform='translate(422.000000, 15.000000)'%3E%3Cpath d='M16.8508772,15.9594542 L12.5760234,11.6846004 C12.4998051,11.6083821 12.4003899,11.568616 12.294347,11.568616 L11.9530214,11.568616 C13.0896686,10.3391813 13.785575,8.69883041 13.785575,6.89278752 C13.785575,3.08518519 10.7003899,0 6.89278752,0 C3.08518519,0 0,3.08518519 0,6.89278752 C0,10.7003899 3.08518519,13.785575 6.89278752,13.785575 C8.69883041,13.785575 10.3391813,13.0896686 11.568616,11.9563353 L11.568616,12.294347 C11.568616,12.4003899 11.6116959,12.4998051 11.6846004,12.5760234 L15.9594542,16.8508772 C16.1152047,17.0066277 16.3670565,17.0066277 16.522807,16.8508772 L16.8508772,16.522807 C17.0066277,16.3670565 17.0066277,16.1152047 16.8508772,15.9594542 Z M6.89278752,12.7251462 C3.66842105,12.7251462 1.06042885,10.117154 1.06042885,6.89278752 C1.06042885,3.66842105 3.66842105,1.06042885 6.89278752,1.06042885 C10.117154,1.06042885 12.7251462,3.66842105 12.7251462,6.89278752 C12.7251462,10.117154 10.117154,12.7251462 6.89278752,12.7251462 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
// }
// }
}
&--horizontal {
display: flex;
margin-left: $grid-gutter-width * -1;
margin-right: $grid-gutter-width * -1;
> * {
width: auto;
flex: 0 0 auto;
padding-left: $grid-gutter-width !important;
padding-right: $grid-gutter-width !important;
}
}
}
&__options {
display: none;
position: absolute;
left: 0;
margin-top: $input-btn-padding-y/1.5;
border: $border-width solid $body-color;
width: 100%;
border-radius: $border-radius;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top-width: 0;
background: $white;
z-index: 999;
max-height: calc(var(--items, 4.5) * 51px);
overflow: auto;
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
&__option {
&:not(.formelement__option--selected) {
padding: $input-btn-padding-y $input-btn-padding-x;
transition: 0.3s;
cursor: pointer;
&:hover {
background-color: rgba($blue, 0.1);
}
}
.formelement--checkbox &,
.formelement--radio & {
position: absolute;
opacity: 0;
pointer-events: none;
}
&--selected {
.formelement__option__check {
display: none;
}
}
&--active,
&:checked + .formelement__label,
+ .formelement__label:hover,
&:hover {
.formelement__option__check {
background-color: $primary;
> * {
stroke-dashoffset: 0;
}
}
}
&:not(.formelement__option--active):hover,
&:not(:checked):hover + .formelement__label {
.formelement__option__check {
background: rgba($primary, 0.25);
}
}
&__check {
width: 20px;
height: 20px;
flex-shrink: 0;
border: 1px solid $primary;
border-radius: $border-radius-xs;
transition: 0.3s;
> * {
stroke-dasharray: 32px;
stroke-dashoffset: 32px;
transition: 0.5s 0.2s;
}
}
}
&--select {
&.formelement {
&--active {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-color: $body-color !important;
border-width: $border-width !important;
border-bottom-color: transparent !important;
.formelement {
&__options {
display: block;
}
}
}
}
}
&--checkbox,
&--radio {
border: none;
padding: $input-btn-padding-y/3 0;
.formelement {
&__label {
display: flex;
cursor: pointer;
}
&__option {
&__check {
margin-right: $grid-gutter-width/2;
}
}
}
}
&--select-multi {
.formelement {
&__selected {
text-overflow: ellipsis;
overflow: hidden;
}
&__options {
> * {
display: flex;
.formelement__option__text {
width: 100%;
}
}
}
&__option {
&--selected {
white-space: nowrap;
display: inline;
&:not(:last-child):after {
content: ', ';
margin-left: -0.2em;
}
}
}
}
}
&--input {
&:focus {
color: $primary;
border-color: $primary;
+ .formelement__label {
display: block;
}
}
}
&--select,
&--search {
padding-right: calc(#{$input-btn-padding-x} * 2);
}
&--radio {
.formelement__option:checked {
+ .formelement__label {
&:after {
background-color: $primary;
opacity: 1;
}
}
}
}
&:placeholder-shown:not(:active):not(:focus),
&--placeholder {
background-color: rgba($gray-beige-light, 1);
border-color: transparent;
&:hover {
border-color: $body-color;
}
+ .formelement__label {
display: none;
}
}
&::placeholder,
&__option--placeholder {
text-transform: uppercase;
color: $body-color;
letter-spacing: 1.75px;
}
&__label {
&:not(.formelement__label--radio, .formelement__label--checkbox) {
position: absolute;
text-transform: uppercase;
letter-spacing: 1.38px;
font-size: $font-size-xs;
top: 0;
transform: translateY(-50%);
background: var(--background-color, $white);
left: calc(#{$input-btn-padding-x} - 0.5rem);
padding: 0 0.5rem;
line-height: 1;
}
&--radio {
display: flex;
position: relative;
cursor: pointer;
&:before {
content: '';
display: block;
width: $grid-gutter-width/1.25;
height: $grid-gutter-width/1.25;
border-color: rgba($body-color, 0.82);
border-width: 1px;
border-style: solid;
flex-shrink: 0;
margin-right: $grid-gutter-width/2;
}
&:after {
content: '';
width: 8px;
height: 8px;
background-color: rgba($primary, 0.25);
flex-shrink: 0;
position: absolute;
top: 4px;
left: 4px;
opacity: 0;
transition: 0.3s;
display: block;
}
&:hover:after {
opacity: 1;
}
}
&--radio {
&:before,
&:after {
border-radius: 100%;
}
}
}
}
@include media-breakpoint-up(md) {
.formelement {
padding: $input-btn-padding-y $input-btn-padding-x;
&__options {
margin-top: $input-btn-padding-y;
}
&--checkbox,
&--radio {
padding: $input-btn-padding-y/2 0;
}
}
}
<div class="form">
<div class="formelement__wrapper formelement__wrapper--horizontal">
<div class="formelement formelement--radio">
<input id="radio_0" name="radio" class="formelement__option" type="radio" />
<label for="radio_0" class="formelement__label formelement__label--radio">Label 1</label>
</div>
<div class="formelement formelement--radio">
<input id="radio_1" name="radio" class="formelement__option" type="radio" />
<label for="radio_1" class="formelement__label formelement__label--radio">Label 2</label>
</div>
<div class="formelement formelement--radio">
<input id="radio_2" name="radio" class="formelement__option" type="radio" />
<label for="radio_2" class="formelement__label formelement__label--radio">Label 3</label>
</div>
</div>
</div>
<script src="{{ page.script }}"></script>
{{ page.inlinestyles }}
.formelement {
display: block;
width: 100%;
box-shadow: none !important;
color: $primary;
border-color: $body-color;
border-width: 1px;
border-style: solid;
border-radius: $border-radius;
outline: none;
padding: $input-btn-padding-y/1.5 $input-btn-padding-x;
appearance: none;
background: transparent;
&__wrapper {
position: relative;
color: $body-color;
&:after,
.formelement__icon {
position: absolute;
right: $input-btn-padding-x;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
filter: grayscale(1);
}
&--active {
color: $primary;
&:after {
filter: none;
}
}
&--select {
cursor: pointer;
&:after {
content: url("data:image/svg+xml,%0A%3Csvg width='15px' height='8px' viewBox='0 0 15 8' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Arrow/Down/Blue' fill='%230E2249' fill-rule='nonzero'%3E%3Cg id='Icon/Arrow-Down'%3E%3Cpath d='M14.1998092,0.237903236 C14.382876,0.0548535132 14.679672,0.054867357 14.8627218,0.237934157 C15.0228903,0.398117607 15.0429007,0.64537504 14.9227603,0.827315545 L14.8626908,0.900846764 L8.16294226,7.59997018 C7.98720591,7.775957 7.7487059,7.87484644 7.5,7.87484644 C7.29274509,7.87484644 7.09257759,7.80617322 6.93005839,7.68158351 L6.83730916,7.60022176 L0.137309157,0.900846764 C-0.045757643,0.717797041 -0.0457714868,0.421000957 0.137278236,0.237934157 C0.297446744,0.077750707 0.544702309,0.0577171766 0.726654021,0.177840674 L0.800190843,0.237903236 L7.5,6.937 L14.1998092,0.237903236 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
}
&--search {
// &:after {
// content: url("data:image/svg+xml,%0A%3Csvg width='17px' height='17px' viewBox='0 0 17 17' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.822470022'%3E%3Cg id='Form/Input/Text/Search/Hover' transform='translate(-422.000000, -15.000000)' fill='%238A8882' fill-rule='nonzero'%3E%3Cg id='Icon/Search' transform='translate(422.000000, 15.000000)'%3E%3Cpath d='M16.8508772,15.9594542 L12.5760234,11.6846004 C12.4998051,11.6083821 12.4003899,11.568616 12.294347,11.568616 L11.9530214,11.568616 C13.0896686,10.3391813 13.785575,8.69883041 13.785575,6.89278752 C13.785575,3.08518519 10.7003899,0 6.89278752,0 C3.08518519,0 0,3.08518519 0,6.89278752 C0,10.7003899 3.08518519,13.785575 6.89278752,13.785575 C8.69883041,13.785575 10.3391813,13.0896686 11.568616,11.9563353 L11.568616,12.294347 C11.568616,12.4003899 11.6116959,12.4998051 11.6846004,12.5760234 L15.9594542,16.8508772 C16.1152047,17.0066277 16.3670565,17.0066277 16.522807,16.8508772 L16.8508772,16.522807 C17.0066277,16.3670565 17.0066277,16.1152047 16.8508772,15.9594542 Z M6.89278752,12.7251462 C3.66842105,12.7251462 1.06042885,10.117154 1.06042885,6.89278752 C1.06042885,3.66842105 3.66842105,1.06042885 6.89278752,1.06042885 C10.117154,1.06042885 12.7251462,3.66842105 12.7251462,6.89278752 C12.7251462,10.117154 10.117154,12.7251462 6.89278752,12.7251462 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
// }
// &:focus{
// &:after{
// content: url("data:image/svg+xml,%0A%3Csvg width='17px' height='17px' viewBox='0 0 17 17' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.822470022'%3E%3Cg id='Form/Input/Text/Search/Hover' transform='translate(-422.000000, -15.000000)' fill='%230E2249' fill-rule='nonzero'%3E%3Cg id='Icon/Search' transform='translate(422.000000, 15.000000)'%3E%3Cpath d='M16.8508772,15.9594542 L12.5760234,11.6846004 C12.4998051,11.6083821 12.4003899,11.568616 12.294347,11.568616 L11.9530214,11.568616 C13.0896686,10.3391813 13.785575,8.69883041 13.785575,6.89278752 C13.785575,3.08518519 10.7003899,0 6.89278752,0 C3.08518519,0 0,3.08518519 0,6.89278752 C0,10.7003899 3.08518519,13.785575 6.89278752,13.785575 C8.69883041,13.785575 10.3391813,13.0896686 11.568616,11.9563353 L11.568616,12.294347 C11.568616,12.4003899 11.6116959,12.4998051 11.6846004,12.5760234 L15.9594542,16.8508772 C16.1152047,17.0066277 16.3670565,17.0066277 16.522807,16.8508772 L16.8508772,16.522807 C17.0066277,16.3670565 17.0066277,16.1152047 16.8508772,15.9594542 Z M6.89278752,12.7251462 C3.66842105,12.7251462 1.06042885,10.117154 1.06042885,6.89278752 C1.06042885,3.66842105 3.66842105,1.06042885 6.89278752,1.06042885 C10.117154,1.06042885 12.7251462,3.66842105 12.7251462,6.89278752 C12.7251462,10.117154 10.117154,12.7251462 6.89278752,12.7251462 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
// }
// }
}
&--horizontal {
display: flex;
margin-left: $grid-gutter-width * -1;
margin-right: $grid-gutter-width * -1;
> * {
width: auto;
flex: 0 0 auto;
padding-left: $grid-gutter-width !important;
padding-right: $grid-gutter-width !important;
}
}
}
&__options {
display: none;
position: absolute;
left: 0;
margin-top: $input-btn-padding-y/1.5;
border: $border-width solid $body-color;
width: 100%;
border-radius: $border-radius;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top-width: 0;
background: $white;
z-index: 999;
max-height: calc(var(--items, 4.5) * 51px);
overflow: auto;
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
&__option {
&:not(.formelement__option--selected) {
padding: $input-btn-padding-y $input-btn-padding-x;
transition: 0.3s;
cursor: pointer;
&:hover {
background-color: rgba($blue, 0.1);
}
}
.formelement--checkbox &,
.formelement--radio & {
position: absolute;
opacity: 0;
pointer-events: none;
}
&--selected {
.formelement__option__check {
display: none;
}
}
&--active,
&:checked + .formelement__label,
+ .formelement__label:hover,
&:hover {
.formelement__option__check {
background-color: $primary;
> * {
stroke-dashoffset: 0;
}
}
}
&:not(.formelement__option--active):hover,
&:not(:checked):hover + .formelement__label {
.formelement__option__check {
background: rgba($primary, 0.25);
}
}
&__check {
width: 20px;
height: 20px;
flex-shrink: 0;
border: 1px solid $primary;
border-radius: $border-radius-xs;
transition: 0.3s;
> * {
stroke-dasharray: 32px;
stroke-dashoffset: 32px;
transition: 0.5s 0.2s;
}
}
}
&--select {
&.formelement {
&--active {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-color: $body-color !important;
border-width: $border-width !important;
border-bottom-color: transparent !important;
.formelement {
&__options {
display: block;
}
}
}
}
}
&--checkbox,
&--radio {
border: none;
padding: $input-btn-padding-y/3 0;
.formelement {
&__label {
display: flex;
cursor: pointer;
}
&__option {
&__check {
margin-right: $grid-gutter-width/2;
}
}
}
}
&--select-multi {
.formelement {
&__selected {
text-overflow: ellipsis;
overflow: hidden;
}
&__options {
> * {
display: flex;
.formelement__option__text {
width: 100%;
}
}
}
&__option {
&--selected {
white-space: nowrap;
display: inline;
&:not(:last-child):after {
content: ', ';
margin-left: -0.2em;
}
}
}
}
}
&--input {
&:focus {
color: $primary;
border-color: $primary;
+ .formelement__label {
display: block;
}
}
}
&--select,
&--search {
padding-right: calc(#{$input-btn-padding-x} * 2);
}
&--radio {
.formelement__option:checked {
+ .formelement__label {
&:after {
background-color: $primary;
opacity: 1;
}
}
}
}
&:placeholder-shown:not(:active):not(:focus),
&--placeholder {
background-color: rgba($gray-beige-light, 1);
border-color: transparent;
&:hover {
border-color: $body-color;
}
+ .formelement__label {
display: none;
}
}
&::placeholder,
&__option--placeholder {
text-transform: uppercase;
color: $body-color;
letter-spacing: 1.75px;
}
&__label {
&:not(.formelement__label--radio, .formelement__label--checkbox) {
position: absolute;
text-transform: uppercase;
letter-spacing: 1.38px;
font-size: $font-size-xs;
top: 0;
transform: translateY(-50%);
background: var(--background-color, $white);
left: calc(#{$input-btn-padding-x} - 0.5rem);
padding: 0 0.5rem;
line-height: 1;
}
&--radio {
display: flex;
position: relative;
cursor: pointer;
&:before {
content: '';
display: block;
width: $grid-gutter-width/1.25;
height: $grid-gutter-width/1.25;
border-color: rgba($body-color, 0.82);
border-width: 1px;
border-style: solid;
flex-shrink: 0;
margin-right: $grid-gutter-width/2;
}
&:after {
content: '';
width: 8px;
height: 8px;
background-color: rgba($primary, 0.25);
flex-shrink: 0;
position: absolute;
top: 4px;
left: 4px;
opacity: 0;
transition: 0.3s;
display: block;
}
&:hover:after {
opacity: 1;
}
}
&--radio {
&:before,
&:after {
border-radius: 100%;
}
}
}
}
@include media-breakpoint-up(md) {
.formelement {
padding: $input-btn-padding-y $input-btn-padding-x;
&__options {
margin-top: $input-btn-padding-y;
}
&--checkbox,
&--radio {
padding: $input-btn-padding-y/2 0;
}
}
}