react-mdl-selectfield
Version:
React MDL SelectField Component
61 lines (60 loc) • 2.14 kB
CSS
.mdl-selectfield {
position: relative;
width: 300px; }
.mdl-selectfield.mdl-selectfield--menu-below .mdl-menu__container {
margin-top: -20px; }
.mdl-selectfield.mdl-selectfield--empty .mdl-menu__container {
display: none; }
.mdl-selectfield.mdl-selectfield--error .mdl-selectfield__arrow {
color: #d50000; }
.mdl-selectfield .mdl-textfield {
width: 100%; }
.mdl-selectfield .mdl-textfield.is-invalid .mdl-textfield__label {
color: #d50000;
font-size: 16px; }
.mdl-selectfield .mdl-selectfield__arrow {
cursor: pointer;
position: absolute;
font-size: 20px;
line-height: 27px;
top: 20px;
right: 0px;
color: #ccc; }
.mdl-selectfield.mdl-selectfield--floating-label .mdl-menu__container {
margin-top: -46px; }
.mdl-selectfield .mdl-menu__container {
width: 100% ;
margin-top: -52px; }
.mdl-selectfield .mdl-menu__container .mdl-menu {
width: 100% ;
max-height: 250px;
overflow-x: hidden;
overflow-y: auto; }
.mdl-selectfield .mdl-menu__container .mdl-menu .mdl-menu__item {
height: 32px;
line-height: 32px; }
.mdl-selectfield .mdl-menu__container .mdl-menu .mdl-menu__item.mdl-menu__item--selected {
color: #ff4081; }
.mdl-selectfield .mdl-menu__container .mdl-menu .mdl-menu__item.mdl-menu__item--disabled {
color: rgba(0, 0, 0, 0.26); }
.mdl-selectfield .mdl-menu__container .mdl-menu .mdl-menu__item.mdl-menu__item--disabled:hover {
background: #fff; }
.mdl-multiselectfield {
position: relative;
width: 300px; }
.mdl-multiselectfield .mdl-taglist {
margin-top: 5px; }
.mdl-multiselectfield .mdl-taglist .mdl-button {
position: relative;
min-width: auto;
padding: 0 6px;
margin: 0 6px 7px 0;
height: 24px;
line-height: 24px;
text-align: left;
font-size: 14px;
text-transform: none;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.24); }
.mdl-multiselectfield .mdl-taglist .mdl-button .material-icons {
margin-left: 4px;
font-size: 12px; }