react-month-picker-dropdown
Version:
This is a slim library for month picker as dropdown menu for React Project
1 lines • 1.82 kB
CSS
.month-picker-dropdown{position:relative;width:100%;outline:none;max-width:470px}.month-picker-dropdown .select-months{width:100%;text-align:center;font-size:16px;padding:5px 10px;cursor:text;box-sizing:border-box;border:.5px solid rgba(0,0,0,.2)}.month-picker-dropdown .select-picker{border-bottom:.5px solid rgba(0,0,0,.2);border-left:.5px solid rgba(0,0,0,.2);border-right:.5px solid rgba(0,0,0,.2)}.month-picker-dropdown .select-picker .select-picker-options{overflow:auto;-webkit-overflow-scrolling:touch;max-width:none;max-height:256px}.month-picker-dropdown .select-picker .select-picker-options .options{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:48px;height:48px;padding:0 16px;text-align:left;text-decoration:none;position:relative;cursor:pointer;outline:none;display:flex;flex-direction:row;max-width:100%;box-sizing:border-box;align-items:center;-webkit-tap-highlight-color:transparent;border-bottom:.5px solid rgba(0,0,0,.04)}.month-picker-dropdown .select-picker .select-picker-options .options .option-checkbox{margin-right:10px}.month-picker-dropdown .select-picker .select-picker-options .selected-month-background-color{background:#1976d2;color:#fff}.month-picker-dropdown .select-picker .select-picker-options .hovered-month-background-color{background-color:#6a9ccf}.month-picker-dropdown .select-picker .okay-and-cancel{display:flex}.month-picker-dropdown .select-picker .okay-and-cancel .okay-and-cancel-container-button{flex:1;background:#1976d2;color:#fff;border:0;padding:10px 20px;cursor:pointer}.month-picker-dropdown .select-picker .okay-and-cancel .okay-and-cancel-container{flex:1}.month-picker-dropdown .visibility-hidden{visibility:hidden}.month-picker-dropdown .visibility-shown{visibility:visible}.month-picker-dropdown .hide-me{display:none}