four-boot
Version:
javascript library to convert html select into beautiful Bootstrap 4 dropdown
75 lines (74 loc) • 2.12 kB
CSS
/*!
* four-boot v2.0.0 (https://github.com/IbraheemAlnabriss/four-boot)
*
* Copyright 2018 four-boot
* Licensed under MIT (https://github.com/IbraheemAlnabriss/four-boot/blob/master/LICENSE)
*/
.four-boot .dropdown{
display:inline-block;
/*min-width:210px;*/ /*fix issue(#5)*/
min-height:32px
}
.four-boot .dropdown .dropdown:not([class*=col-]):not([class*=form-control]):not(.input-group-btn){
width:220px
}
.four-boot .dropdown button.dropdown-toggle{
text-align:left;
position:relative;
padding-right:20px;
width:100%;
border-color:#ccc
}
.four-boot .dropdown button.dropdown-toggle:after{
position:absolute;
right:5px;
top:calc(50% - 2px)
}
.four-boot .dropdown .dropdown-menu{
padding:0;
min-width:100%
}
.four-boot .dropdown .dropdown-menu .four-boot-header{
background:#f5f5f5
}
.four-boot .dropdown .dropdown-menu .dropdown-item{
cursor:pointer
}
.four-boot .dropdown .dropdown-menu .dropdown-item.selected[data-four-boot-item]:after{
content:"\2713";
color:#000;
font-size:16px;
font-weight:700;
float:right;
margin-right:-15px
}
.four-boot .dropdown .dropdown-menu .dropdown-item.four-boot-search{
padding-left:5px;
padding-right:5px
}
.four-boot .dropdown .dropdown-menu .dropdown-item.four-boot-search:active{
color:inherit;
background-color:inherit
}
.four-boot .dropdown .dropdown-menu .dropdown-item.fb-error,.four-boot .dropdown .dropdown-menu .dropdown-item.four-boot-search small{
color:#c00;
margin:5px 0;
display:block
}
.four-boot .dropdown .dropdown-menu .options-list{
overflow:auto
}
.four-boot .dropdown .dropdown-menu .options-list .dropdown-item i.four-boot-option-icon{
width:10px;
text-align:center;
margin-right:15px
}
.four-boot .dropdown .dropdown-menu .four-boot-actions button[data-four-boot-action]{
outline:0;
box-shadow:none;
border-radius:2px;
width:calc(50% - 10px);
margin:2px 5px;
border:1px solid #ccc;
line-height:1.5
}