mand-mobile/lib/number-keyboard/style/board.css

A Vue.js 2.0 Mobile UI Toolkit

.md-number-keyboard-container{position:relative;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;display:-webkit-box;display:-webkit-flex;display:flex;width:100%;height:428px}.md-number-keyboard-container:after{content:"";position:absolute;z-index:2;-webkit-transform-origin:100% 50%;transform-origin:100% 50%;-webkit-transform:scaleY(.5) translateY(-100%);transform:scaleY(.5) translateY(-100%);top:0;left:0;right:auto;bottom:auto;width:100%;border-top:2px solid #e2e4ea;-webkit-transform-origin:50% 0;transform-origin:50% 0}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.md-number-keyboard-container:after{-webkit-transform:scaleY(.33) translateY(-100%);transform:scaleY(.33) translateY(-100%)}}.md-number-keyboard-container .keyboard-number,.md-number-keyboard-container .keyboard-operate{display:-webkit-box;display:-webkit-flex;display:flex}.md-number-keyboard-container .keyboard-number{-webkit-box-flex:3;-webkit-flex:3;flex:3;background:#f9fafb}.md-number-keyboard-container .keyboard-number .keyboard-number-list{float:left;width:100%}.md-number-keyboard-container .keyboard-number .keyboard-number-list .keyboard-number-item{position:relative;float:left;width:33.3%;height:107px;padding-top:5px;text-align:center;line-height:107px;font-size:52px;font-weight:500;font-family:DINPro-Medium,DIN Alternate,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,微软雅黑,Arial,sans-serif;color:#01080f;-webkit-transition:background .3s;transition:background .3s;background:#fff;box-sizing:border-box}.md-number-keyboard-container .keyboard-number .keyboard-number-list .keyboard-number-item:before{content:"";position:absolute;z-index:2;-webkit-transform:scaleX(.5) translateX(100%);transform:scaleX(.5) translateX(100%);top:0;right:0;left:auto;bottom:auto;border-right:2px solid #e2e4ea;height:100%;-webkit-transform-origin:100% 50%;transform-origin:100% 50%}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.md-number-keyboard-container .keyboard-number .keyboard-number-list .keyboard-number-item:before{-webkit-transform:scaleX(.33) translateX(100%);transform:scaleX(.33) translateX(100%)}}.md-number-keyboard-container .keyboard-number .keyboard-number-list .keyboard-number-item:after{content:"";position:absolute;z-index:2;-webkit-transform-origin:100% 50%;transform-origin:100% 50%;-webkit-transform:scaleY(.5) translateY(-100%);transform:scaleY(.5) translateY(-100%);top:0;left:0;right:auto;bottom:auto;width:100%;border-top:2px solid #e2e4ea;-webkit-transform-origin:50% 0;transform-origin:50% 0}@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.md-number-keyboard-container .keyboard-number .keyboard-number-list .keyboard-number-item:after{-webkit-transform:scaleY(.33) translateY(-100%);transform:scaleY(.33) translateY(-100%)}}.md-number-keyboard-container .keyboard-number .keyboard-number-list .keyboard-number-item.no-bg{background:transparent}.md-number-keyboard-container .keyboard-number .keyboard-number-list .keyboard-number-item:nth-of-type(-n+3):after{display:none}.md-number-keyboard-container .keyboard-number .keyboard-number-list .keyboard-number-item:nth-of-type(3n){width:33.4%}.md-number-keyboard-container .keyboard-number .keyboard-number-list .keyboard-number-item.delete{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABECAMAAABJe8AqAAAAdVBMVEUAAABBSF5GTWBBSF5CSmJBSF1BSF1hYXVCSV1CSF5SXGtBSV1BSF5DSV9ESl5FTWRBSV5BSF5BSV1BSF5BSV1CSl5BSV5CSV5CSV5DSl9DS2JOTmNBSF1CSV9CSl5ETGBJSWRCSV5CSV1ES19CSF1CSl5BSF2IZB1/AAAAJnRSTlMA1yffH5T1BfudCuvLWUQW8OTUtamjj4FzNy0QwIxNQBxoZkvCZK9RzSgAAAGQSURBVFjDzNW5jsJQDIXhQ8LNwpKwDfswA4Xf/xEpXLhwbo4AWcJVlEj/V6Q4yN9ePr8J8reUWOBcxQKXUmKBrcQCB4kFbqK3xNtXjAHFSvt7xACzjfavdRCw0/66Rwxw1H5zQgzw1yjwQAzwP9d+ixigXmh/MQsCWu3Pp4gBHtpvOsQAp0qBI2KAfq39HWKA+qr9zYs/uB4F/EauikzoJ2HoppNuDPAbecv1RdJQv5Sq44Bt5CHfV8H1xQQH+I3cZvq9fk9DfZFfAthGlhfYDaUSf+kB28jqDDCB9B3gN5ILvG+A30gukL4D3EZSgfQd4DeSC/bIAb+RXGB9A2wj77CjQmt9AmQ2kgrWJ0B+I7mQwIH8RnIh4SuAZ3VmbgMACMNAL0IF7L8iokposaLYEyDx5OyD3CKBQ6avqcBDKx8VMezW57DrH9fAJIHTj0wa+gKxhQxeCtERGN/hVyW+5wJiWqGAHSXQtMZmgpqqhIegpjonE9RVqZVLQWDWac0gqLlavgQ11/u1HxRBUH6BA3XHDDIvn0o0AAAAAElFTkSuQmCC") 50% no-repeat;background-size:46px}.md-number-keyboard-container .keyboard-number .keyboard-number-list .keyboard-number-item.slidedown{background:#fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGwAAABeAgMAAAC7uhn4AAAACVBMVEUAAAASHDYRGjQxUFCHAAAAAnRSTlMAgJsrThgAAAB/SURBVEjH7dUxDoAgEETRsbGgtvI0XkdP4xEoaOSUJgQzJMMmlpvAtL94YRuQ7flqEf2F2WazWsjtotvm6WbOWvgO5rx5utlsP5uzP84ehtlaX3xDt9R2oLOrpAe97aUlEySnIDkFySlITkFyCpJTkJyCyT4pOQXJ6U7Y29DuBThrzOxbC3kTAAAAAElFTkSuQmCC") 50% no-repeat;background-size:54px}.md-number-keyboard-container .keyboard-number .keyboard-number-list .keyboard-number-item.large-item{width:66.6%}.md-number-keyboard-container .keyboard-number .keyboard-number-list .keyboard-number-item.active,.md-number-keyboard-container .keyboard-number .keyboard-number-list .keyboard-number-item:active{background-color:#f9fafb}.md-number-keyboard-container .keyboard-number .keyboard-number-list .keyboard-number-item:after,.md-number-keyboard-container .keyboard-number .keyboard-number-list .keyboard-number-item:before{pointer-events:none}.md-number-keyboard-container .keyboard-operate{-webkit-box-flex:1;-webkit-flex:1;flex:1}.md-number-keyboard-container .keyboard-operate .keyboard-operate-list{position:relative;float:left;width:100%;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column}.md-number-keyboard-container .keyboard-operate .keyboard-operate-list .keyboard-operate-item{position:relative;float:left;width:100%;background:#fff;-webkit-transition:background .3s;transition:background .3s}.md-number-keyboard-container .keyboard-operate .keyboard-operate-list .keyboard-operate-item.delete{height:107px;background:#fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABECAMAAABJe8AqAAAAdVBMVEUAAABBSF5GTWBBSF5CSmJBSF1BSF1hYXVCSV1CSF5SXGtBSV1BSF5DSV9ESl5FTWRBSV5BSF5BSV1BSF5BSV1CSl5BSV5CSV5CSV5DSl9DS2JOTmNBSF1CSV9CSl5ETGBJSWRCSV5CSV1ES19CSF1CSl5BSF2IZB1/AAAAJnRSTlMA1yffH5T1BfudCuvLWUQW8OTUtamjj4FzNy0QwIxNQBxoZkvCZK9RzSgAAAGQSURBVFjDzNW5jsJQDIXhQ8LNwpKwDfswA4Xf/xEpXLhwbo4AWcJVlEj/V6Q4yN9ePr8J8reUWOBcxQKXUmKBrcQCB4kFbqK3xNtXjAHFSvt7xACzjfavdRCw0/66Rwxw1H5zQgzw1yjwQAzwP9d+ixigXmh/MQsCWu3Pp4gBHtpvOsQAp0qBI2KAfq39HWKA+qr9zYs/uB4F/EauikzoJ2HoppNuDPAbecv1RdJQv5Sq44Bt5CHfV8H1xQQH+I3cZvq9fk9DfZFfAthGlhfYDaUSf+kB28jqDDCB9B3gN5ILvG+A30gukL4D3EZSgfQd4DeSC/bIAb+RXGB9A2wj77CjQmt9AmQ2kgrWJ0B+I7mQwIH8RnIh4SuAZ3VmbgMACMNAL0IF7L8iokposaLYEyDx5OyD3CKBQ6avqcBDKx8VMezW57DrH9fAJIHTj0wa+gKxhQxeCtERGN/hVyW+5wJiWqGAHSXQtMZmgpqqhIegpjonE9RVqZVLQWDWac0gqLlavgQ11/u1HxRBUH6BA3XHDDIvn0o0AAAAAElFTkSuQmCC") 50% no-repeat;background-size:42px;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-flex:1;-webkit-flex:1;flex:1}.md-number-keyboard-container .keyboard-operate .keyboard-operate-list .keyboard-operate-item.delete:active{background-color:#f9fafb}.md-number-keyboard-container .keyboard-operate .keyboard-operate-list .keyboard-operate-item.confirm{padding-top:5px;color:#fff;font-size:36px;background:#198cff;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-flex:1;-webkit-flex:1;flex:1;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.md-number-keyboard-container .keyboard-operate .keyboard-operate-list .keyboard-operate-item.confirm:active{background-color:#167de5}.md-number-keyboard-container.disabled .keyboard-operate-item.confirm{background-color:#d9e0e7!important}