From 7c90a9ca62bf889397cd39091b75a286bad5c08e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= Date: Tue, 5 Sep 2017 20:52:10 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=9F=BA=E7=A1=80=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E7=9A=84=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/basic-elem.css | 2 +- css/basic-elem.scss | 45 +++++++++++++++++++++++++++++++++++++++------ 2 files changed, 40 insertions(+), 7 deletions(-) diff --git a/css/basic-elem.css b/css/basic-elem.css index 08ca01e..691503c 100644 --- a/css/basic-elem.css +++ b/css/basic-elem.css @@ -1 +1 @@ -.do-ui-button{display:inline-block;padding:0 5px;border:1px solid #ddd;text-align:center;font-size:12px;background:none;cursor:pointer;transition:all .1s ease-in-out}.do-ui-button.medium{min-width:100px;height:35px;padding:0 8px;line-height:35px;font-size:15px}.do-ui-button.large{min-width:150px;height:50px;padding:0 13px;line-height:50px;font-size:18px}.do-ui-button.radius-3{border-radius:3px}.do-ui-button.radius-5{border-radius:5px}.do-ui-button.green{border:0;background:#1abc9c;color:#fff}.do-ui-button.green:hover{background:#48c9b0}.do-ui-button.green:active{background:#16a085}.do-ui-button.blue{border:0;background:#3498db;color:#fff}.do-ui-button.blue:hover{background:#5dade2}.do-ui-button.blue:active{background:#2c81ba}.do-ui-button.red{border:0;background:#e74c3c;color:#fff}.do-ui-button.red:hover{background:#ec7063}.do-ui-button.red:active{background:#c54133}.do-ui-button.orange{border:0;background:#f39c12;color:#fff}.do-ui-button.orange:hover{background:#f1c40f}.do-ui-button.orange:active{background:#e67e22}.do-ui-button.plain{border:0;background:#e7e8eb;color:#34495e}.do-ui-button.plain:hover{background:#ecf0f1}.do-ui-button.plain:active{background:#bdc3c7}.do-ui-button.grey{border:0;background:#34495e;color:#fff}.do-ui-button.grey:hover{background:#5d6d7e}.do-ui-button.grey:active{background:#2c3e50}.do-ui-button.disabled{border-color:#e7e8eb;color:#bdc3c7;cursor:not-allowed}.do-ui-button.medium.with-style,.do-ui-button.large.with-style{position:relative;padding-right:43px}.do-ui-button.medium.with-style::after,.do-ui-button.large.with-style::after{position:absolute;right:0;top:0;width:35px;text-align:center;background:rgba(0,0,0,0.2);font-family:"ui font" !important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.do-ui-button.large.with-style{padding-right:58px}.do-ui-button.large.with-style::after{width:50px}.do-ui-button.icon-del::after{content:"\e6f0"}.do-ui-button.icon-add::after{content:"\e64c"}.do-ui-button.icon-send::after{content:"\e64b"}.do-ui-button.icon-bad::after{content:"\e8ee"}.do-ui-button.icon-good::after{content:"\e62d"}.do-ui-button.icon-download::after{content:"\e611"}.do-ui-button.icon-upload::after{content:"\e6f7"}.do-ui-button.icon-mac::after{content:"\e60a"}.do-ui-button.icon-ios::after{content:"\e609"}.do-ui-button.icon-windows::after{content:"\e601"}.do-ui-button.icon-linux::after{content:"\e602"}.do-ui-button.icon-android::after{content:"\e600"}.do-ui-input{display:inline-block;min-height:30px;padding:0 5px;border:1px solid #bdc3c7;background:#fff;color:#34495e;outline:none;transition:all .1s ease-in-out}.do-ui-input::-webkit-input-placeholder{color:#bdc3c7}.do-ui-input.radius-3{border-radius:3px}.do-ui-input.radius-5{border-radius:5px}.do-ui-input:focus{border-color:#1abc9c}.do-ui-input.alert{border-color:#e74c3c;color:#e74c3c}.do-ui-input.disabled{border-color:transparent;background:#e7e8eb;color:#bdc3c7}.do-ui-input.area{padding:5px}.do-ui-select{display:inline-block;min-height:30px;padding:0 25px 0 5px;border:1px solid #bdc3c7;background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAQCAMAAADOBMQXAAAAFVBMVEUAAAD///8wMDAwMDAyMjIzMzMyMjLeZPLMAAAAB3RSTlMAABAwkLDARx1RgwAAAD9JREFUeAGlz0UChFAAgFB+3v/GMwZ2K8u3g7DXI40s6zWnuaXaK7IYVVlElUV14lQik8opw6SyiCqLXB9/0D/ZNQE+FhzMpgAAAABJRU5ErkJggg==) no-repeat right 6px;color:#34495e;outline:none;-webkit-appearance:none;-moz-appearance:none;transition:all .1s ease-in-out}.do-ui-select::-ms-expand{display:none}.do-ui-select.radius-3{border-radius:3px}.do-ui-select.radius-5{border-radius:5px}.do-ui-select:focus{border-color:#1abc9c}.do-ui-select.alert{border-color:#e74c3c;color:#e74c3c}.do-ui-select.disabled{border-color:transparent;background:#e7e8eb;color:#bdc3c7}.do-ui-radio,.do-ui-checkbox{display:inline-block;position:relative;width:auto;height:auto;min-height:30px;padding-left:35px;line-height:30px;border-radius:3px;text-align:center}.do-ui-radio{padding-left:50px}.do-ui-radio>input{position:absolute;left:10px;top:10px;width:35px;height:10px;border-radius:10px;border:0;background:#bdc3c7;-webkit-appearance:none;-moz-appearance:none}.do-ui-radio>input:checked{background:#48c9b0}.do-ui-radio>input:disabled{background:#fff}.do-ui-radio>input::after{position:absolute;display:block;left:-2px;top:-5px;width:20px;height:20px;border-radius:50%;content:"";background:#ecf0f1;box-shadow:0 1px 2px rgba(0,0,0,0.2)}.do-ui-radio>input:checked::after{left:auto;right:-2px;background:#16a085}.do-ui-checkbox>input{position:absolute;left:2px;top:2px;width:26px;height:26px;line-height:22px;border:2px solid #bdc3c7;color:#5d6d7e;border-radius:3px;text-align:center;font-size:18px;font-family:"ui font" !important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:none;-moz-appearance:none}.do-ui-checkbox>input:checked::after{content:"\e60f"}.do-ui-checkbox>input:disabled{border-color:#bdc3c7;color:#bdc3c7}.do-ui-checkbox.green>input{color:#1abc9c !important;border-color:#1abc9c}.do-ui-checkbox.blue>input{color:#3498db !important;border-color:#3498db}.do-ui-checkbox.red>input{color:#e74c3c !important;border-color:#e74c3c}.do-ui-checkbox.orange>input{color:#f39c12 !important;border-color:#f39c12}.do-ui-checkbox.grey>input{color:#34495e !important;border-color:#34495e}.do-ui-checkbox.disabled{color:#bdc3c7}.do-ui-checkbox.with-style{padding-left:5px;padding-right:35px;line-height:26px;border:2px solid #e7e8eb;background:#e7e8eb;color:#34495e}.do-ui-checkbox.with-style>input{left:auto;right:0;top:0;line-height:26px;border:0;background:#fff;color:#5d6d7e}.do-ui-checkbox.with-style>input:disabled{color:#bdc3c7 !important}.do-ui-checkbox.with-style.green{border-color:#1abc9c;background:#1abc9c;color:#fff}.do-ui-checkbox.with-style.blue{border-color:#3498db;background:#3498db;color:#fff}.do-ui-checkbox.with-style.red{border-color:#e74c3c;background:#e74c3c;color:#fff}.do-ui-checkbox.with-style.orange{border-color:#f39c12;background:#f39c12;color:#fff}.do-ui-checkbox.with-style.grey{border-color:#34495e;background:#34495e;color:#fff}.do-ui-checkbox.with-style.disabled{border-color:#e7e8eb;background:#e7e8eb;color:#bdc3c7} +.do-ui-button{display:inline-block;padding:0 5px;border:1px solid #ddd;text-align:center;font-size:12px;background:none;cursor:pointer;transition:all .1s ease-in-out}.do-ui-button.medium{min-width:100px;height:35px;padding:0 8px;line-height:35px;font-size:15px}.do-ui-button.large{min-width:150px;height:50px;padding:0 13px;line-height:50px;font-size:18px}.do-ui-button.radius-3{border-radius:3px}.do-ui-button.radius-5{border-radius:5px}.do-ui-button.green{border:0;background:#1abc9c;color:#fff}.do-ui-button.green:hover{background:#48c9b0}.do-ui-button.green:active{background:#16a085}.do-ui-button.blue{border:0;background:#3498db;color:#fff}.do-ui-button.blue:hover{background:#5dade2}.do-ui-button.blue:active{background:#2c81ba}.do-ui-button.red{border:0;background:#e74c3c;color:#fff}.do-ui-button.red:hover{background:#ec7063}.do-ui-button.red:active{background:#c54133}.do-ui-button.orange{border:0;background:#f39c12;color:#fff}.do-ui-button.orange:hover{background:#f1c40f}.do-ui-button.orange:active{background:#e67e22}.do-ui-button.plain{border:0;background:#e7e8eb;color:#34495e}.do-ui-button.plain:hover{background:#ecf0f1}.do-ui-button.plain:active{background:#bdc3c7}.do-ui-button.grey{border:0;background:#34495e;color:#fff}.do-ui-button.grey:hover{background:#5d6d7e}.do-ui-button.grey:active{background:#2c3e50}.do-ui-button.disabled{border-color:#e7e8eb;color:#bdc3c7;cursor:not-allowed}.do-ui-button.medium.with-style,.do-ui-button.large.with-style{position:relative;padding-right:43px}.do-ui-button.medium.with-style::after,.do-ui-button.large.with-style::after{position:absolute;right:0;top:0;width:35px;text-align:center;background:rgba(0,0,0,0.2);font-family:"ui font" !important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.do-ui-button.large.with-style{padding-right:58px}.do-ui-button.large.with-style::after{width:50px}.do-ui-button.icon-del::after{content:"\e6f0"}.do-ui-button.icon-add::after{content:"\e64c"}.do-ui-button.icon-send::after{content:"\e64b"}.do-ui-button.icon-bad::after{content:"\e8ee"}.do-ui-button.icon-good::after{content:"\e62d"}.do-ui-button.icon-download::after{content:"\e611"}.do-ui-button.icon-upload::after{content:"\e6f7"}.do-ui-button.icon-mac::after{content:"\e60a"}.do-ui-button.icon-ios::after{content:"\e609"}.do-ui-button.icon-windows::after{content:"\e601"}.do-ui-button.icon-linux::after{content:"\e602"}.do-ui-button.icon-android::after{content:"\e600"}.do-ui-input{display:inline-block;min-height:30px;padding:0 5px;border:1px solid #bdc3c7;background:#fff;color:#34495e;outline:none;transition:all .1s ease-in-out}.do-ui-input::-webkit-input-placeholder{color:#bdc3c7}.do-ui-input.radius-3{border-radius:3px}.do-ui-input.radius-5{border-radius:5px}.do-ui-input:focus{border-color:#1abc9c}.do-ui-input.alert{border-color:#e74c3c;color:#e74c3c}.do-ui-input.disabled{border-color:transparent;background:#e7e8eb;color:#bdc3c7}.do-ui-input.area{padding:5px}.do-ui-select{display:inline-block;min-height:30px;padding:0 25px 0 5px;border:1px solid #bdc3c7;background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAQCAMAAADOBMQXAAAAFVBMVEUAAAD///8wMDAwMDAyMjIzMzMyMjLeZPLMAAAAB3RSTlMAABAwkLDARx1RgwAAAD9JREFUeAGlz0UChFAAgFB+3v/GMwZ2K8u3g7DXI40s6zWnuaXaK7IYVVlElUV14lQik8opw6SyiCqLXB9/0D/ZNQE+FhzMpgAAAABJRU5ErkJggg==) no-repeat right 6px;color:#34495e;outline:none;-webkit-appearance:none;-moz-appearance:none;transition:all .1s ease-in-out}.do-ui-select::-ms-expand{display:none}.do-ui-select.radius-3{border-radius:3px}.do-ui-select.radius-5{border-radius:5px}.do-ui-select:focus{border-color:#1abc9c}.do-ui-select.alert{border-color:#e74c3c;color:#e74c3c}.do-ui-select.disabled{border-color:transparent;background:#e7e8eb;color:#bdc3c7}.do-ui-radio,.do-ui-checkbox{display:inline-block;position:relative;width:auto;height:auto;min-height:30px;padding-left:35px;line-height:30px;border-radius:3px;text-align:center;color:#34495e}.do-ui-radio{padding-left:50px}.do-ui-radio>input{position:absolute;left:10px;top:10px;width:35px;height:10px;border-radius:10px;border:0;background:#bdc3c7;-webkit-appearance:none;-moz-appearance:none}.do-ui-radio>input:checked{background:#bdc3c7}.do-ui-radio>input:disabled{background:#ecf0f1}.do-ui-radio>input:disabled:checked{background:#bdc3c7}.do-ui-radio>input::after{position:absolute;display:block;left:-2px;top:-5px;width:20px;height:20px;border-radius:50%;content:"";background:#ecf0f1;box-shadow:0 1px 2px rgba(0,0,0,0.2)}.do-ui-radio>input:checked::after{left:auto;right:-2px;background:#5d6d7e}.do-ui-radio>input:checked:disabled::after{background:#bdc3c7}.do-ui-radio.green>input:checked{background:#48c9b0}.do-ui-radio.green>input:checked::after{background:#16a085}.do-ui-radio.blue>input:checked{background:#5dade2}.do-ui-radio.blue>input:checked::after{background:#2c81ba}.do-ui-radio.red>input:checked{background:#ec7063}.do-ui-radio.red>input:checked::after{background:#c54133}.do-ui-radio.orange>input:checked{background:#f1c40f}.do-ui-radio.orange>input:checked::after{background:#e67e22}.do-ui-radio.grey>input:checked{background:#5d6d7e}.do-ui-radio.grey>input:checked::after{background:#2c3e50}.do-ui-radio.disabled{color:#bdc3c7}.do-ui-checkbox>input{position:absolute;left:2px;top:2px;width:26px;height:26px;line-height:22px;border:2px solid #bdc3c7;border-radius:3px;text-align:center;font-size:18px;font-family:"ui font" !important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-appearance:none;-moz-appearance:none}.do-ui-checkbox>input:checked::after{content:"\e60f"}.do-ui-checkbox>input:disabled{border-color:#bdc3c7;color:#bdc3c7}.do-ui-checkbox.green>input{color:#1abc9c !important;border-color:#1abc9c}.do-ui-checkbox.blue>input{color:#3498db !important;border-color:#3498db}.do-ui-checkbox.red>input{color:#e74c3c !important;border-color:#e74c3c}.do-ui-checkbox.orange>input{color:#f39c12 !important;border-color:#f39c12}.do-ui-checkbox.grey>input{color:#34495e !important;border-color:#34495e}.do-ui-checkbox.disabled{color:#bdc3c7}.do-ui-checkbox.with-style{padding-left:5px;padding-right:35px;line-height:26px;border:2px solid #e7e8eb;background:#e7e8eb}.do-ui-checkbox.with-style>input{left:auto;right:0;top:0;line-height:26px;border:0;background:#fff;color:#5d6d7e}.do-ui-checkbox.with-style>input:disabled{color:#bdc3c7 !important}.do-ui-checkbox.with-style.green{border-color:#1abc9c;background:#1abc9c;color:#fff}.do-ui-checkbox.with-style.blue{border-color:#3498db;background:#3498db;color:#fff}.do-ui-checkbox.with-style.red{border-color:#e74c3c;background:#e74c3c;color:#fff}.do-ui-checkbox.with-style.orange{border-color:#f39c12;background:#f39c12;color:#fff}.do-ui-checkbox.with-style.grey{border-color:#34495e;background:#34495e;color:#fff}.do-ui-checkbox.with-style.disabled{border-color:#e7e8eb;background:#e7e8eb;color:#bdc3c7}.do-ui-quote{position:relative;min-height:60px;margin:10px 0;padding:15px 5px 5px 50px;border:1px solid #ddd;border-radius:10px;background:#f7f7f7}.do-ui-quote::before{position:absolute;left:8px;top:0;font:30px/1.5 "ui font";color:#bdc3c7;content:"\e61b"}.do-ui-warn,.do-ui-notice{position:relative;min-height:50px;margin:10px 0;padding:8px 8px 8px 50px;border:1px solid #f39c12;border-radius:10px;background:#fffbed;color:#e67e22}.do-ui-warn::before,.do-ui-notice::before{position:absolute;left:8px;top:0;font:30px/1.5 "ui font";color:#e74c3c;content:"\e6f6"}.do-ui-notice{border-color:#48c9b0;color:#16a085;background:#edfbf8}.do-ui-notice::before{color:#16a085;content:"\e657"} diff --git a/css/basic-elem.scss b/css/basic-elem.scss index c864f80..97b2487 100644 --- a/css/basic-elem.scss +++ b/css/basic-elem.scss @@ -108,21 +108,39 @@ $cgr: #34495e #5d6d7e #2c3e50; /* 单选和复选框 */ .do-ui-radio, -.do-ui-checkbox {display:inline-block;position:relative;width:auto;height:auto;min-height:30px;padding-left:35px;line-height:30px;border-radius:3px;text-align:center; +.do-ui-checkbox {display:inline-block;position:relative;width:auto;height:auto;min-height:30px;padding-left:35px;line-height:30px;border-radius:3px;text-align:center;color:nth($cgr, 1); } .do-ui-radio {padding-left:50px; >input {position:absolute;left:10px;top:10px;width:35px;height:10px;border-radius:10px;border:0;background:nth($cp, 3);-webkit-appearance:none;-moz-appearance:none; - &:checked {background:nth($cg, 2);} - &:disabled {background:#fff;} + &:checked {background:nth($cp, 3);} + &:disabled {background:nth($cp, 2);} + &:disabled:checked {background:nth($cp, 3);} &::after {position:absolute;display:block;left:-2px;top:-5px;width:20px;height:20px;border-radius:50%;content:"";background:nth($cp, 2);box-shadow:0 1px 2px rgba(0,0,0,.2);} - &:checked::after {left:auto;right:-2px;background:nth($cg, 3);} + &:checked::after {left:auto;right:-2px;background:nth($cgr, 2);} + &:checked:disabled::after {background:nth($cp, 3);} } + &.green >input:checked {background:nth($cg, 2); + &::after {background:nth($cg, 3);} + } + &.blue >input:checked {background:nth($cb, 2); + &::after {background:nth($cb, 3);} + } + &.red >input:checked {background:nth($cr, 2); + &::after {background:nth($cr, 3);} + } + &.orange >input:checked {background:nth($co, 2); + &::after {background:nth($co, 3);} + } + &.grey >input:checked {background:nth($cgr, 2); + &::after {background:nth($cgr, 3);} + } + &.disabled {color:nth($cp, 3);} } .do-ui-checkbox { - >input {position:absolute;left:2px;top:2px;width:26px;height:26px;line-height:22px;border:2px solid nth($cp, 3);color:nth($cgr, 2);border-radius:3px;text-align:center;font-size:18px;font-family:"ui font" !important;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;-webkit-appearance:none;-moz-appearance:none; + >input {position:absolute;left:2px;top:2px;width:26px;height:26px;line-height:22px;border:2px solid nth($cp, 3);border-radius:3px;text-align:center;font-size:18px;font-family:"ui font" !important;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;-webkit-appearance:none;-moz-appearance:none; &:checked::after {content:"\e60f";} &:disabled {border-color:nth($cp, 3);color:nth($cp, 3);} @@ -136,7 +154,7 @@ $cgr: #34495e #5d6d7e #2c3e50; &.disabled {color:nth($cp, 3);} } .do-ui-checkbox { - &.with-style {padding-left:5px;padding-right:35px;line-height:26px;border:2px solid nth($cp, 1);background:nth($cp, 1);color:nth($cgr, 1); + &.with-style {padding-left:5px;padding-right:35px;line-height:26px;border:2px solid nth($cp, 1);background:nth($cp, 1); >input {left:auto;right:0;top:0;line-height:26px;border:0;background:#fff;color:nth($cgr, 2); &:disabled {color:nth($cp, 3)!important;} @@ -152,3 +170,18 @@ $cgr: #34495e #5d6d7e #2c3e50; } } +/* 引用文本 */ +.do-ui-quote {position:relative;min-height:60px;margin:10px 0;padding:15px 5px 5px 50px;border:1px solid #ddd;border-radius:10px;background:#f7f7f7; + + &::before {position:absolute;left:8px;top:0;font:30px/1.5 "ui font";color:nth($cp, 3);content:"\e61b";} +} + +/* 提醒文本 */ +.do-ui-warn,.do-ui-notice {position:relative;min-height:50px;margin:10px 0;padding:8px 8px 8px 50px;border:1px solid nth($co, 1);border-radius:10px;background:#fffbed;color:nth($co, 3); + + &::before {position:absolute;left:8px;top:0;font:30px/1.5 "ui font";color:nth($cr, 1);content:"\e6f6";} +} +.do-ui-notice {border-color:nth($cg, 2);color:nth($cg, 3);background:#edfbf8; + + &::before {color:nth($cg, 3);content:"\e657";} +} \ No newline at end of file