nscomponentsreact
Version:
React Wrapper Components for NSComponents
255 lines (245 loc) • 7.4 kB
CSS
.nsMultiSelectDropdownContainer
{
position: relative;
}
.nsMultiSelectDropdownContainer .nsLabelContainer
{
width:100%;
min-height: 26px;
padding: 0;
overflow: hidden;
cursor: pointer;
text-align: left;
white-space: nowrap;
text-decoration: none;
border: 1px solid #aaa;
color: #444;
background-color: #fff;
}
.nsMultiSelectDropdownContainer .nsLabel
{
position: absolute;
top: 0;
left: 0;
right: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
padding-left: 8px;
height: 100%;
padding-top: 2px;
}
.nsMultiSelectDropdownContainer .nsLabel.nsLabelPlaceHolder
{
color: #999;
}
.nsMultiSelectDropdownContainer .nsLabel.nsLabelNoArrow
{
width:100%;
padding-left: 0px;
}
.nsMultiSelectDropdownContainer .nsLabelContainer .nsLabelArrow
{
content: "";
width: 0;
height: 0;
position: absolute;
right: 6px;
top: 50%;
margin-top: -3px;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: grey transparent;
}
.nsMultiSelectDropdownContainer .nsLabelContainer.nsLabelContainerActive .nsLabelArrow
{
border-width: 0 6px 6px 6px;
}
.nsMultiSelectDropdownContainer .nsLabel .nsHorizontalListContainer
{
z-index: 1;
display: inline-block;
width: 100%;
cursor: text;
line-height: 18px;
color: #303030;
}
.nsMultiSelectDropdownContainer .nsLabel .nsHorizontalListItemTag
{
position: relative;
display: inline-block;
padding: 4px 24px 4px 8px;
background: #5e6264;
color: #fff;
border-radius: 4px;
margin: 5px 10px 5px 0;
}
.nsMultiSelectDropdownContainer .nsLabel .nsHorizontalListItemTag .nsHorizontalListItemText
{
min-height: 16px;
}
.nsMultiSelectDropdownContainer .nsLabel .nsHorizontalListItemTag .nsHorizontalListItemClose
{
position: absolute;
top: 6px;
right: 4px;
width: 14px;
height: 18px;
cursor: pointer;
cursor: hand;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px'%0AviewBox='0 0 172 172'%0Astyle=' fill:%23000000;'%3E%3Cg fill='none' %3E%3Cpath d='M0,172v-172h172v172z' fill='none'%3E%3C/path%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M143.78125,129.93029l-13.8768,13.85096c-2.53246,2.55829 -6.66707,2.55829 -9.22536,0l-34.67909,-34.65324l-34.65324,34.65324c-2.55829,2.55829 -6.71875,2.55829 -9.25121,0l-13.8768,-13.85096c-2.55829,-2.55829 -2.55829,-6.69291 0,-9.2512l34.65324,-34.67909l-34.65324,-34.65324c-2.53245,-2.58413 -2.53245,-6.74459 0,-9.25121l13.8768,-13.8768c2.53246,-2.55829 6.69291,-2.55829 9.25121,0l34.65324,34.67909l34.67909,-34.67909c2.55829,-2.55829 6.71875,-2.55829 9.22536,0l13.8768,13.85096c2.55829,2.55829 2.55829,6.71875 0.02584,9.27704l-34.67908,34.65324l34.65324,34.67909c2.55829,2.55829 2.55829,6.6929 0,9.2512z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
}
.nsMultiSelectDropdownContainer .nsLabel .nsVerticalListContainer
{
list-style-type: none;
padding: 0;
margin: 0;
color: #303030;
margin-left: -8px
}
.nsMultiSelectDropdownContainer .nsLabel .nsVerticalListContainer .nsVerticalListItemTag
{
margin-top: -1px; /* Prevent double borders */
background: #5e6264;
color: #fff;
border: 1px solid #ddd;
padding: 4px 24px 4px 8px;
text-decoration: none;
display: block;
position: relative;
}
.nsMultiSelectDropdownContainer .nsLabel .nsVerticalListItemTag .nsVerticalListItemText
{
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.nsMultiSelectDropdownContainer .nsLabel .nsVerticalListItemTag .nsVerticalListItemClose
{
position: absolute;
top: 6px;
right: 4px;
width: 14px;
height: 18px;
cursor: pointer;
cursor: hand;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px'%0AviewBox='0 0 172 172'%0Astyle=' fill:%23000000;'%3E%3Cg fill='none' %3E%3Cpath d='M0,172v-172h172v172z' fill='none'%3E%3C/path%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M143.78125,129.93029l-13.8768,13.85096c-2.53246,2.55829 -6.66707,2.55829 -9.22536,0l-34.67909,-34.65324l-34.65324,34.65324c-2.55829,2.55829 -6.71875,2.55829 -9.25121,0l-13.8768,-13.85096c-2.55829,-2.55829 -2.55829,-6.69291 0,-9.2512l34.65324,-34.67909l-34.65324,-34.65324c-2.53245,-2.58413 -2.53245,-6.74459 0,-9.25121l13.8768,-13.8768c2.53246,-2.55829 6.69291,-2.55829 9.25121,0l34.65324,34.67909l34.67909,-34.67909c2.55829,-2.55829 6.71875,-2.55829 9.22536,0l13.8768,13.85096c2.55829,2.55829 2.55829,6.71875 0.02584,9.27704l-34.67908,34.65324l34.65324,34.67909c2.55829,2.55829 2.55829,6.6929 0,9.2512z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
}
.nsMultiSelectDropdownContainer .nsDropdownContainer
{
position: absolute;
left: 0px;
width:100%;
overflow: hidden;
margin-top: -1px;
padding: 0;
box-sizing: border-box;
display: none;
z-index: 1000;
background: #fff;
color: #000;
border: 1px solid #aaa;
}
.nsMultiSelectDropdownContainer .nsDropdownContainer.nsDropdownContainerBottom
{
top: 100%;
box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
}
.nsMultiSelectDropdownContainer .nsDropdownContainer.nsDropdownContainerTop
{
bottom: 100%;
box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
}
.nsMultiSelectDropdownContainer .nsDropdownSearchContainer
{
display: inline-block;
margin: 0 auto;
min-height: 26px;
padding: 4px;
position: relative;
white-space: nowrap;
width: 100%;
z-index: 10000;
box-sizing: border-box;
border: 1px solid #a9a9a9d4;
}
.nsMultiSelectDropdownContainer .nsDropdownSearch
{
width: 92%;
height: auto ;
min-height: 24px;
margin: 0;
outline: 0;
font-family: sans-serif;
font-size: 16px;
border: 1px solid #aaa;
border-radius: 0;
box-shadow: none;
border: none;
}
.nsMultiSelectDropdownContainer .nsDropdownSearchIcon
{
width:16px;
height:16px;
display:inline-block;
position: absolute;
right: 6px;
top: 25%;
}
.nsMultiSelectDropdownContainer .nsListContainer
{
overflow: auto;
margin: 0px;
padding: 5px 8px;
}
.nsMultiSelectDropdownContainer .nsListItem
{
list-style: none;
display: list-item;
background-image: none;
position: static;
}
.nsMultiSelectDropdownContainer .nsListItemLabelContainer
{
font-weight: normal;
display: block;
white-space: nowrap;
margin-bottom: 5px;
}
.nsMultiSelectDropdownContainer .nsListItemLabelContainer.nsListItemDisabled
{
opacity: .35;
filter: Alpha(Opacity=35);
}
.nsMultiSelectDropdownContainer .nsListCheckbox
{
vertical-align: middle;
margin: 5px;
}
.nsMultiSelectDropdownContainer .nsListLabel
{
}
.nsMultiSelectDropdownContainer .nsListShow
{
display: block;
}
.nsMultiSelectDropdownContainer .nsMultiSelectScroller
{
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 1px;
}
.nsMultiSelectDropdownContainer .nsListContainerVirtual
{
position: relative;
}
.nsMultiSelectDropdownContainer .nsListItemVirtual
{
position: absolute;
}