yun-ui
Version:
Mobile UI Components Library for Vue.js by yunzhijia.
1 lines • 3.56 kB
CSS
.yun-action-sheet img{max-width:100%}.yun-action-sheet-container{position:fixed;bottom:0;left:0;right:0;z-index:21}.yun-action-sheet-panel{background-color:#fff;padding:0 20px}.yun-action-sheet-panel .yun-action-sheet-item{width:25%;margin:0 0 12px}.yun-action-sheet-panel .yun-action-sheet-image{margin:0 auto}.yun-action-sheet-panel .yun-action-sheet-item-name{margin:6px auto 0}.yun-action-sheet-title{font-size:16px;line-height:44px;border-bottom:1px solid #e6e8ee}.yun-action-sheet-content{padding:20px 0 12px;font-size:0;margin-right:-20px;width:100%}.yun-action-sheet-item{display:inline-block;margin:0 20px 12px 0;text-align:center}.yun-action-sheet-image{width:48px;max-height:48px}.yun-action-sheet-item-name{margin-top:6px;font-size:12px;width:48px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.yun-action-sheet-list{background-color:#fff}.yun-action-sheet-list-item{position:relative;line-height:44px;text-align:center}.yun-action-sheet-list-item:active,.yun-action-sheet-list-item:hover{background-color:#f6f8fa}.yun-action-sheet-list-item:after{content:"";display:block;position:absolute;left:0;right:0;bottom:0;border-bottom:1px solid #dce1e8;transform:scaleY(.5);-webkit-transform:scaleY(.5)}.yun-action-sheet-button{outline:none;border:none;text-shadow:none;background:transparent;overflow:hidden;padding:0;color:#030303;margin-top:8px;width:100%;height:44px;font-size:16px;background-color:#fff}.yun-action-sheet-button:active{background-color:#f3f6f7}.yun-action-sheet-icon{width:22px;height:22px}.yun-action-sheet-icon,.yun-action-sheet-list-title{vertical-align:middle}.yun-action-sheet-list-title{font-size:16px;display:inline-block;min-width:88px}.yun-action-sheet-checkbox{background-color:#fff}.yun-action-sheet-checkbox-list{margin-left:12px}.yun-action-sheet-header{background-color:#eaeff3;line-height:36px;padding:0 12px}.yun-action-sheet-header .icon-close{cursor:pointer;color:#768893}.yun-action-sheet-header .icon-close:active,.yun-action-sheet-header .icon-close:hover{opacity:.5}.yun-action-sheet-checkbox-commit{cursor:pointer;float:right;color:#3cbaff;text-decoration:none}.yun-action-sheet-checkbox-commit:active,.yun-action-sheet-checkbox-commit:hover{opacity:.5}.yun-action-sheet-checkbox-item{position:relative;display:-ms-flexbox;display:flex;vertical-align:middle;overflow:hidden;-ms-flex-align:center;align-items:center;line-height:44px}.yun-action-sheet-checkbox-item:after{content:"";display:block;position:absolute;left:0;right:0;bottom:0;border-bottom:1px solid #dce1e8;transform:scaleY(.5);-webkit-transform:scaleY(.5)}.yun-action-sheet-checkbox-label{-ms-flex:1;flex:1;-webkit-box-flex:1;font-size:16px;vertical-align:middle}.yun-action-sheet-checkbox-label .iconfont{font-size:16px}.yun-checkbox{width:22px;height:22px;margin-right:12px;position:relative}.yun-checkbox-input{position:absolute;width:100%;height:100%;left:0;top:0;opacity:0;z-index:1}.yun-checkbox-inner{width:100%;height:100%;position:relative}.yun-checkbox-inner:before{content:"";display:block;width:100%;height:100%;border:1px solid #3cbaff;border-radius:100%}.yun-checkbox-inner:after{position:absolute;display:none;top:50%;left:50%;margin-left:-3px;margin-top:-6px;width:6px;height:12px;border-style:solid;border-width:0 2px 2px 0;border-color:#fff;content:" ";transform:rotate(45deg)}.yun-checkbox-input:checked+.yun-checkbox-inner:before{background:#3cbaff}.yun-checkbox-input:checked+.yun-checkbox-inner:after{display:block}.checkbox-height{padding:12px;height:auto}.checkbox-secondaryText{color:#768893;font-size:14px}