<div class="container">
<div class="desc desc-line mt-5">Dropdown</div>
<div class="row py-4">
<div class="col-12 col-lg-6">
<div class="dropdown show">
<label for="dropdownLabel">Label</label>
<a class="input-dropdown dropdown-toggle" href="#" role="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenu">
<a class="dropdown-item active" href="#">Lorem Ipsum</a>
<a class="dropdown-item" href="#">Lorem Ipsum</a>
<a class="dropdown-item" href="#">Lorem Ipsum</a>
</div>
</div>
</div>
</div>
<div class="desc desc-line mt-5 hidden">Dropdown sizes</div>
<div class="row py-4 hidden">
<div class="col-12 col-lg-6">
<select class="custom-select custom-select-lg">
<option selected>Large custom select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="custom-select mt-3">
<option selected>Default custom select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="custom-select custom-select-sm mt-3">
<option selected>Small custom select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div class="desc desc-line mt-5 hidden">Select multiple</div>
<div class="row py-4 hidden">
<div class="col-12 col-lg-6">
<select class="custom-select" size="5" multiple>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select>
</div>
</div>
<div class="container">
<div class="desc desc-line mt-5">Dropdown</div>
<div class="row py-4">
<div class="col-12 col-lg-6">
<div class="dropdown show">
<label for="dropdownLabel">Label</label>
<a class="input-dropdown dropdown-toggle" href="#" role="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenu">
<a class="dropdown-item active" href="#">Lorem Ipsum</a>
<a class="dropdown-item" href="#">Lorem Ipsum</a>
<a class="dropdown-item" href="#">Lorem Ipsum</a>
</div>
</div>
</div>
</div>
<div class="desc desc-line mt-5 hidden">Dropdown sizes</div>
<div class="row py-4 hidden">
<div class="col-12 col-lg-6">
<select class="custom-select custom-select-lg">
<option selected>Large custom select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="custom-select mt-3">
<option selected>Default custom select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="custom-select custom-select-sm mt-3">
<option selected>Small custom select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div class="desc desc-line mt-5 hidden">Select multiple</div>
<div class="row py-4 hidden">
<div class="col-12 col-lg-6">
<select class="custom-select" size="5" multiple>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select>
</div>
</div>
/* Kein Inhalt definiert. */
.dropdown {
label {
margin-bottom: 0.625rem;
font-size: 0.875rem;
font-weight: $font-weight-normal;
color: $black;
line-height: 1;
.dark & {
color: $gray-100;
}
}
&-toggle {
width: 100%;
height: calc(2em + 1.25rem);
padding: 0.625rem 1.25rem;
line-height: 2;
font-size: 1rem;
font-weight: $font-weight-light;
background-color: $gray-200;
border-color: $gray-200;
color: $black;
display: inline-block;
.dark & {
background-color: $gray-900;
border-color: $gray-900;
color: $white;
}
&:hover, &:focus {
outline: none;
text-decoration: none;
color: $accent;
}
&:after {
display: inline-block;
float: right;
margin-top: .75rem;
margin-left: 0;
vertical-align: 0;
content: "";
border-top: .675em solid;
border-right: .375rem solid transparent;
border-bottom: 0;
border-left: .375rem solid transparent;
}
}
&-menu {
width: 100%;
padding: 0;
margin: 0;
font-size: 1rem;
color: $white;
text-align: left;
list-style: none;
background-color: $black;
background-clip: padding-box;
border: 0;
.dark & {
background-color: $white;
}
}
&-item {
padding: 0.625rem 1.25rem;
font-weight: $font-weight-light;
line-height: 2;
color: $white;
border: 0;
.dark & {
color: $gray-900;
&:hover {
background: $secondary;
color: $white;
}
&:active, &.active {
color: $black;
background: $gray-200;
}
}
&:hover {
background: $secondary;
color: $white;
}
&:active, &.active {
color: $white;
background: $primary;
}
}
}
.custom-select {
option {
&[selected] {
background-color: $black;
}
}
}
Keine Notizen vorhanden.