UNPKG

@nateradebaugh/react-datetime

Version:

A lightweight but complete datetime picker React.js component

189 lines (187 loc) 3.61 kB
/*! * https://github.com/NateRadebaugh/react-datetime */ .rdtPicker { display: inline-block; min-width: 250px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0.25rem; color: #212529; font-size: 1rem; } .rdtPicker:not(.rdtStatic) { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); margin-top: 0.125rem; margin-bottom: 0.125rem; } .rdtPicker .rdtTimeToggle { padding-top: 0.25rem; padding-bottom: 0.25rem; text-align: center; } .rdtPicker table { width: 100%; margin: 0; border-collapse: collapse; } .rdtPicker td, .rdtPicker th { text-align: center; height: 30px; } .rdtPicker td { cursor: pointer; } .rdtPicker .rdtCounter .rdtBtn, .rdtPicker .rdtYear, .rdtPicker .rdtMonth, .rdtPicker .rdtDay, .rdtPicker .rdtHour, .rdtPicker .rdtMinute, .rdtPicker .rdtSecond, .rdtPicker .rdtTimeToggle { color: #212529; } .rdtPicker .rdtCounter .rdtBtn:hover, .rdtPicker .rdtYear:hover, .rdtPicker .rdtMonth:hover, .rdtPicker .rdtDay:hover, .rdtPicker .rdtHour:hover, .rdtPicker .rdtMinute:hover, .rdtPicker .rdtSecond:hover, .rdtPicker .rdtTimeToggle:hover { background: #f8f9fa; color: #16181b; cursor: pointer; } .rdtPicker .rdtOld, .rdtPicker .rdtNew { color: rgba(33, 37, 41, 0.3); } .rdtPicker .rdtToday { position: relative; } .rdtPicker .rdtToday:before { content: ""; display: inline-block; border-left: 7px solid transparent; border-bottom: 7px solid #0d6efd; position: absolute; bottom: 4px; right: 4px; } .rdtPicker th { border-bottom: 1px solid #e9ecef; } .rdtPicker .dow { width: 14.2857%; border-bottom: none; cursor: default; } .rdtPicker .rdtPrev, .rdtPicker .rdtSwitch, .rdtPicker .rdtNext { padding-top: 0.25rem; padding-bottom: 0.25rem; color: #212529; } .rdtPicker .rdtNext, .rdtPicker .rdtPrev { width: 36px; font-size: 1.25rem; vertical-align: top; } .rdtPicker .rdtCounter .rdtBtn { display: block; user-select: none; } .rdtPicker th.rdtDisabled, .rdtPicker th.rdtDisabled:hover { background: none; color: #6c757d; cursor: not-allowed; } .rdtPicker thead tr:first-child th { cursor: pointer; } .rdtPicker thead tr:first-child th:hover { background: #f8f9fa; } .rdtPicker .rdtTimeToggle { border-top: 1px solid #e9ecef; } .rdtPicker button { border: none; background: none; cursor: pointer; } .rdtPicker button:hover { background-color: #f8f9fa; } .rdtPicker thead button { width: 100%; height: 100%; } .rdtPicker .rdtDays { min-width: 250px; } .rdtPicker .rdtMonth, .rdtPicker .rdtYear { height: 50px; width: 25%; cursor: pointer; } .rdtPicker .rdtMonth:hover, .rdtPicker .rdtYear:hover { color: #16181b; background: #f8f9fa; } .rdtPicker .rdtActive { background-color: #0d6efd; color: #fff; border-radius: 0.25rem; } .rdtPicker .rdtActive:hover { background-color: #0257d5; color: #fff; } .rdtPicker .rdtActive .rdtToday:before { border-bottom-color: #fff; } .rdtPicker .rdtDisabled, .rdtPicker .rdtDisabled:hover { background: none; color: #6c757d; cursor: not-allowed; } .rdtPicker .rdtDays { display: inline-block; } .rdtPicker .rdtCounters { display: inline-block; } .rdtPicker .rdtCounters > div { float: left; } .rdtPicker .rdtCounter { width: 40px; } .rdtPicker .rdtCounter .rdtBtn { line-height: 40px; cursor: pointer; } .rdtPicker .rdtCounter .rdtBtn:hover { background: #f8f9fa; } .rdtPicker .rdtCounter .rdtCount { line-height: 20px; font-size: 1.25rem; } .rdtPicker .rdtCounterSeparator { line-height: 100px; } .rdtPicker .rdtTime td { cursor: default; } /*# sourceMappingURL=styles.css.map */