| | |
| | | * by Houfeng |
| | | * Houfeng@DCloud.io |
| | | **/ |
| | | .mui-pciker-list li,.mui-picker,.mui-picker-inner{box-sizing:border-box;overflow:hidden}.mui-picker{background-color:#ddd;position:relative;height:200px;border:1px solid rgba(0,0,0,.1);-webkit-user-select:none;user-select:none}.mui-dtpicker,.mui-poppicker{left:0;background-color:#eee;box-shadow:0 -5px 7px 0 rgba(0,0,0,.1);-webkit-transition:.3s;width:100%}.mui-picker-inner{position:relative;width:100%;height:100%;-webkit-mask-box-image:-webkit-linear-gradient(bottom,transparent,transparent 5%,#fff 20%,#fff 80%,transparent 95%,transparent);-webkit-mask-box-image:linear-gradient(top,transparent,transparent 5%,#fff 20%,#fff 80%,transparent 95%,transparent)}.mui-pciker-list,.mui-pciker-rule{box-sizing:border-box;padding:0;margin:-18px 0 0;width:100%;height:36px;line-height:36px;position:absolute;left:0;top:50%}.mui-pciker-rule-bg{z-index:0}.mui-pciker-rule-ft{z-index:2;border-top:solid 1px rgba(0,0,0,.1);border-bottom:solid 1px rgba(0,0,0,.1)}.mui-pciker-list{z-index:1;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:perspective(750pt) rotateY(0) rotateX(0);transform:perspective(750pt) rotateY(0) rotateX(0)}.mui-pciker-list li{width:100%;height:100%;position:absolute;text-align:center;vertical-align:middle;-webkit-backface-visibility:hidden;backface-visibility:hidden;font-size:1pc;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#888;padding:0 8px;white-space:nowrap;-webkit-text-overflow:ellipsis;text-overflow:ellipsis;cursor:default;visibility:hidden}.mui-pciker-list li.highlight,.mui-pciker-list li.visible{visibility:visible}.mui-pciker-list li.highlight{color:#222}.mui-poppicker{position:fixed;z-index:999;border-top:solid 1px #ccc;bottom:0;-webkit-transform:translateY(300px)}.mui-poppicker.mui-active{-webkit-transform:translateY(0)}.mui-android-5-1 .mui-poppicker{bottom:-300px;-webkit-transition-property:bottom;-webkit-transform:none}.mui-android-5-1 .mui-poppicker.mui-active{bottom:0;-webkit-transition-property:bottom;-webkit-transform:none}.mui-poppicker-header{padding:6px;font-size:14px;color:#888}.mui-poppicker-header .mui-btn{font-size:9pt;padding:5px 10px}.mui-poppicker-btn-cancel{float:left}.mui-poppicker-btn-ok{float:right}.mui-poppicker-clear{clear:both;height:0;line-height:0;font-size:0;overflow:hidden}.mui-poppicker-body{position:relative;width:100%;height:200px;border-top:solid 1px #ddd}.mui-poppicker-body .mui-picker{width:100%;height:100%;margin:0;border:none;float:left}.mui-dtpicker{position:fixed;z-index:999999;border-top:solid 1px #ccc;bottom:0;-webkit-transform:translateY(300px)}.mui-dtpicker.mui-active{-webkit-transform:translateY(0)}.mui-dtpicker-active-for-page{overflow:hidden!important}.mui-android-5-1 .mui-dtpicker{bottom:-300px;-webkit-transition-property:bottom;-webkit-transform:none}.mui-android-5-1 .mui-dtpicker.mui-active{bottom:0;-webkit-transition-property:bottom;-webkit-transform:none}.mui-dtpicker-header{padding:6px;font-size:14px;color:#888}.mui-dtpicker-header button{font-size:9pt;padding:5px 10px}.mui-dtpicker-header button:last-child{float:right}.mui-dtpicker-body{position:relative;width:100%;height:200px}.mui-ios .mui-dtpicker-body{-webkit-perspective:75pc;perspective:75pc;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.mui-dtpicker-title h5{display:inline-block;width:20%;margin:0;padding:8px;text-align:center;border-top:solid 1px #ddd;background-color:#f0f0f0;border-bottom:solid 1px #ccc}[data-type=hour] [data-id=title-i],[data-type=hour] [data-id=picker-i],[data-type=month] [data-id=title-i],[data-type=month] [data-id=picker-d],[data-type=month] [data-id=title-d],[data-type=month] [data-id=picker-h],[data-type=month] [data-id=title-h],[data-type=month] [data-id=picker-i],[data-type=time] [data-id=picker-y],[data-type=time] [data-id=picker-m],[data-type=time] [data-id=picker-d],[data-type=time] [data-id=title-y],[data-type=time] [data-id=title-m],[data-type=time] [data-id=title-d],[data-type=date] [data-id=title-i],[data-type=date] [data-id=picker-h],[data-type=date] [data-id=title-h],[data-type=date] [data-id=picker-i]{display:none}.mui-dtpicker .mui-picker{width:20%;height:100%;margin:0;float:left;border:none}[data-type=hour] [data-id=picker-h],[data-type=hour] [data-id=title-h],[data-type=datetime] [data-id=picker-h],[data-type=datetime] [data-id=title-h]{border-left:dotted 1px #ccc}[data-type=datetime] .mui-picker,[data-type=time] .mui-dtpicker-title h5{width:20%}[data-type=date] .mui-dtpicker-title h5,[data-type=date] .mui-picker{width:33.3%}[data-type=hour] .mui-dtpicker-title h5,[data-type=hour] .mui-picker{width:25%}[data-type=month] .mui-dtpicker-title h5,[data-type=month] .mui-picker,[data-type=time] .mui-dtpicker-title h5,[data-type=time] .mui-picker{width:50%} |
| | | .mui-pciker-list li, |
| | | .mui-picker, |
| | | .mui-picker-inner { |
| | | box-sizing: border-box; |
| | | overflow: hidden |
| | | } |
| | | |
| | | .mui-picker { |
| | | background-color: #ddd; |
| | | position: relative; |
| | | height: 200px; |
| | | border: 1px solid rgba(0, 0, 0, .1); |
| | | -webkit-user-select: none; |
| | | user-select: none |
| | | } |
| | | .mui-picker__group { |
| | | border: none; |
| | | } |
| | | .mui-dtpicker, |
| | | .mui-poppicker { |
| | | left: 0; |
| | | background-color: #eee; |
| | | box-shadow: 0 -5px 7px 0 rgba(0, 0, 0, .1); |
| | | -webkit-transition: .3s; |
| | | width: 100% |
| | | } |
| | | |
| | | .mui-picker-inner { |
| | | position: relative; |
| | | width: 100%; |
| | | height: 100%; |
| | | -webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent); |
| | | -webkit-mask-box-image: linear-gradient(top, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent) |
| | | } |
| | | |
| | | .mui-pciker-list, |
| | | .mui-pciker-rule { |
| | | box-sizing: border-box; |
| | | padding: 0; |
| | | margin: -18px 0 0; |
| | | width: 100%; |
| | | height: 36px; |
| | | line-height: 36px; |
| | | position: absolute; |
| | | left: 0; |
| | | top: 50% |
| | | } |
| | | |
| | | .mui-pciker-rule-bg { |
| | | z-index: 0 |
| | | } |
| | | .mui-pciker-rule-ft2 { |
| | | z-index: 0 |
| | | } |
| | | .mui-pciker-rule-ft { |
| | | z-index: 2; |
| | | border-top: solid 1px rgba(0, 0, 0, .1); |
| | | border-bottom: solid 1px rgba(0, 0, 0, .1); |
| | | display:none |
| | | } |
| | | |
| | | .mui-pciker-list { |
| | | z-index: 1; |
| | | -webkit-transform-style: preserve-3d; |
| | | transform-style: preserve-3d; |
| | | -webkit-transform: perspective(750pt) rotateY(0) rotateX(0); |
| | | transform: perspective(750pt) rotateY(0) rotateX(0) |
| | | } |
| | | |
| | | .mui-pciker-list li { |
| | | width: 100%; |
| | | height: 100%; |
| | | position: absolute; |
| | | text-align: center; |
| | | vertical-align: middle; |
| | | -webkit-backface-visibility: hidden; |
| | | backface-visibility: hidden; |
| | | font-size: 1pc; |
| | | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
| | | color: #888; |
| | | padding: 0 8px; |
| | | white-space: nowrap; |
| | | -webkit-text-overflow: ellipsis; |
| | | text-overflow: ellipsis; |
| | | cursor: default; |
| | | visibility: hidden |
| | | } |
| | | |
| | | .mui-pciker-list li.highlight, |
| | | .mui-pciker-list li.visible { |
| | | visibility: visible |
| | | } |
| | | |
| | | .mui-pciker-list li.highlight { |
| | | color: #222 |
| | | } |
| | | |
| | | .mui-poppicker { |
| | | position: fixed; |
| | | z-index: 999; |
| | | border-top: solid 1px #ccc; |
| | | bottom: 0; |
| | | -webkit-transform: translateY(300px) |
| | | } |
| | | |
| | | .mui-poppicker.mui-active { |
| | | -webkit-transform: translateY(0) |
| | | } |
| | | |
| | | .mui-android-5-1 .mui-poppicker { |
| | | bottom: -300px; |
| | | -webkit-transition-property: bottom; |
| | | -webkit-transform: none |
| | | } |
| | | |
| | | .mui-android-5-1 .mui-poppicker.mui-active { |
| | | bottom: 0; |
| | | -webkit-transition-property: bottom; |
| | | -webkit-transform: none |
| | | } |
| | | |
| | | .mui-poppicker-header { |
| | | padding: 6px; |
| | | font-size: 14px; |
| | | color: #888 |
| | | } |
| | | |
| | | .mui-poppicker-header .mui-btn { |
| | | font-size: 9pt; |
| | | padding: 5px 10px |
| | | } |
| | | |
| | | .mui-poppicker-btn-cancel { |
| | | float: left |
| | | } |
| | | |
| | | .mui-poppicker-btn-ok { |
| | | float: right |
| | | } |
| | | |
| | | .mui-poppicker-clear { |
| | | clear: both; |
| | | height: 0; |
| | | line-height: 0; |
| | | font-size: 0; |
| | | overflow: hidden |
| | | } |
| | | |
| | | .mui-poppicker-body { |
| | | position: relative; |
| | | width: 100%; |
| | | height: 200px; |
| | | border-top: solid 1px #ddd |
| | | } |
| | | |
| | | .mui-poppicker-body .mui-picker { |
| | | width: 100%; |
| | | height: 100%; |
| | | margin: 0; |
| | | border: none; |
| | | float: left |
| | | } |
| | | |
| | | .mui-dtpicker { |
| | | position: fixed; |
| | | z-index: 999999; |
| | | border-top: solid 1px #ccc; |
| | | bottom: 0; |
| | | -webkit-transform: translateY(300px) |
| | | } |
| | | |
| | | .mui-dtpicker.mui-active { |
| | | -webkit-transform: translateY(0) |
| | | } |
| | | |
| | | .mui-dtpicker-active-for-page { |
| | | overflow: hidden !important |
| | | } |
| | | |
| | | .mui-android-5-1 .mui-dtpicker { |
| | | bottom: -300px; |
| | | -webkit-transition-property: bottom; |
| | | -webkit-transform: none |
| | | } |
| | | |
| | | .mui-android-5-1 .mui-dtpicker.mui-active { |
| | | bottom: 0; |
| | | -webkit-transition-property: bottom; |
| | | -webkit-transform: none |
| | | } |
| | | |
| | | .mui-dtpicker-header { |
| | | padding: 6px; |
| | | font-size: 14px; |
| | | color: #888 |
| | | } |
| | | |
| | | .mui-dtpicker-header button { |
| | | font-size: 9pt; |
| | | padding: 5px 10px |
| | | } |
| | | |
| | | .mui-dtpicker-header button:last-child { |
| | | float: right |
| | | } |
| | | |
| | | .mui-dtpicker-body { |
| | | position: relative; |
| | | width: 100%; |
| | | height: 200px |
| | | } |
| | | |
| | | .mui-ios .mui-dtpicker-body { |
| | | -webkit-perspective: 75pc; |
| | | perspective: 75pc; |
| | | -webkit-transform-style: preserve-3d; |
| | | transform-style: preserve-3d |
| | | } |
| | | |
| | | .mui-dtpicker-title h5 { |
| | | display: inline-block; |
| | | width: 20%; |
| | | margin: 0; |
| | | padding: 8px; |
| | | text-align: center; |
| | | border-top: solid 1px #ddd; |
| | | background-color: #f0f0f0; |
| | | border-bottom: solid 1px #ccc |
| | | } |
| | | |
| | | [data-type=hour] [data-id=title-i], |
| | | [data-type=hour] [data-id=picker-i], |
| | | [data-type=month] [data-id=title-i], |
| | | [data-type=month] [data-id=picker-d], |
| | | [data-type=month] [data-id=title-d], |
| | | [data-type=month] [data-id=picker-h], |
| | | [data-type=month] [data-id=title-h], |
| | | [data-type=month] [data-id=picker-i], |
| | | [data-type=time] [data-id=picker-y], |
| | | [data-type=time] [data-id=picker-m], |
| | | [data-type=time] [data-id=picker-d], |
| | | [data-type=time] [data-id=title-y], |
| | | [data-type=time] [data-id=title-m], |
| | | [data-type=time] [data-id=title-d], |
| | | [data-type=date] [data-id=title-i], |
| | | [data-type=date] [data-id=picker-h], |
| | | [data-type=date] [data-id=title-h], |
| | | [data-type=date] [data-id=picker-i] { |
| | | display: none |
| | | } |
| | | |
| | | .mui-dtpicker .mui-picker { |
| | | width: 20%; |
| | | height: 100%; |
| | | margin: 0; |
| | | float: left; |
| | | border: none |
| | | } |
| | | |
| | | [data-type=hour] [data-id=picker-h], |
| | | [data-type=hour] [data-id=title-h], |
| | | [data-type=datetime] [data-id=picker-h], |
| | | [data-type=datetime] [data-id=title-h] { |
| | | border-left: dotted 1px #ccc |
| | | } |
| | | |
| | | [data-type=datetime] .mui-picker, |
| | | [data-type=time] .mui-dtpicker-title h5 { |
| | | width: 20% |
| | | } |
| | | |
| | | [data-type=date] .mui-dtpicker-title h5, |
| | | [data-type=date] .mui-picker { |
| | | width: 33.3% |
| | | } |
| | | |
| | | [data-type=hour] .mui-dtpicker-title h5, |
| | | [data-type=hour] .mui-picker { |
| | | width: 25% |
| | | } |
| | | |
| | | [data-type=month] .mui-dtpicker-title h5, |
| | | [data-type=month] .mui-picker, |
| | | [data-type=time] .mui-dtpicker-title h5, |
| | | [data-type=time] .mui-picker { |
| | | width: 50% |
| | | } |