UNPKG

mobile-react-calendar

Version:

[mobile-react-calendar](https://github.com/Li-DaDa/mobile-react-calendar)基于react的移动端日期选择组件,仿携程日历,可选区间日期,也可选一天

146 lines (139 loc) 2.86 kB
.calendar_wrap * { -o-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .calendar_fl { float: left; } .calendar_fr { float: right; } .calendar_clearfix:after, .calendar_clearfix:before { content: ''; height: 0; display: block; clear: both; } .calendar_flex { display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: flex; } .calendar_flex_1 { -webkit-flex: 1; -ms-flex: 1; -moz-box-flex: 1; flex: 1 1; } .calendar_flex_direction_cloumn { -webkit-flex-direction: column; -ms-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; } .calendar_flex_wrap { -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap:wrap; } .calendar_disabled { color: #999; } .calendar_wrap .calendar_cover { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 998; background: rgba(0,0,0,0.5); } .calendar_wrap .calendar_content_wrap { width: 100%; height: 80%; position: fixed; top: 20%; left: 0; z-index: 999; } .calendar_wrap .calendar_content { width: 100%; height: 100%; background: #fff; border-top-left-radius: 1em; border-top-right-radius: 1em; } .calendar_wrap .calendar_close { margin: 1em; color: #999; display: inline-block; } .calendar_wrap .calendar_ok { padding: 1em 2em; } .calendar_wrap .calendar_ok button { width: 100%; height: 2.3rem; border: none; background: #74a1f9; color: #fff; -webkit-border-radius: .3em; -moz-border-radius: .3em; border-radius: .3em; } .calendar_wrap .calendar_week_title { padding: .3em 0 .8em; font-size: .8em; } .calendar_wrap .calendar_week_title_el { width: 14.28%; display: inline-block; } .calendar_wrap .calendar_row { text-align: center; } .calendar_wrap .calendar_text_red { color: #f00; } .calendar_wrap .calendar_date_wrap { overflow: auto; position: relative; } .calendar_wrap .calendar_item_title_wrap { height: 2.1em; line-height: 2.1em; font-size: 1.35em; } .calendar_wrap .calendar_item_title { width: 100%; font-weight: 700; color: #444; background: #f7fafb; padding: 0 1em; } .calendar_wrap .calendar_date_item { min-width: 14.28%; max-width: 14.28%; height: 13vw; padding-top: 4vw; display: inline-block; } .calendar_wrap .calendar_date_item.selected { background: #74a1f9; color: #fff; border-radius: .3em; } .calendar_wrap .calendar_date_item.calendar_today { color: #f00; } .calendar_wrap .calendar_date_item.calendar_today div { font-size: .7em; }