V1.2版本修订内容2016-11-15

  • 修订多个组件滑动与激活项
  • 支持在线自定义组件
V1.2版本将支持官方的在线自定义组件风格功能
从V1.1.3版本自行升级至V1.2步骤如下

修订文件:diquick.css、diquick.comb.css、diquick.min.css,我们建议直接覆盖源文件来升级

查询
.btn.disabled {box-shadow:0 0 0 inset;opacity:0.5;cursor:default;filter:Alpha(Opacity =50);}
替换为
.btn.disabled {opacity:0.5;cursor:default;pointer-events:none;filter:Alpha(Opacity =50);}
查询
a [class^="flaticon-"],a [class*=" flaticon-"] {-webkit-transition:all 0s;transition:all 0s;}
替换为
a [class^="flaticon-"],a [class*=" flaticon-"],.btn [class^="flaticon-"],.btn [class*=" flaticon-"] {-webkit-transition:all 0s;transition:all 0s;}
查询/**--dropmenu--**/覆盖整个组件样式

/**--dropmenu--**/
.dropmenu {position:relative;display:inline-block;margin:.5rem;vertical-align:middle;}
.dropmenu>span {float:left;color:#666;font-weight:bold;font-size:1rem;line-height:1.5;cursor:default;-webkit-transition:all 0.2s;transition:all 0.2s;}
.dropmenu>span small {margin-left:.375rem;font-size:100%;}
.dropmenu>span:after {display:inline-block;margin-left:.375rem;width:0;height:0;border-top:.375rem solid #666;border-right:.25rem solid transparent;border-left:.25rem solid transparent;content:'';vertical-align:middle;}

.dropmenu ul {position:absolute;top:120%;left:0;z-index:100;visibility:hidden;padding:.5rem 0;border-radius:.25rem;background-color:#fff;box-shadow:1px 1px .25rem rgba(0,0,0,.5);opacity:0.0;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;filter:Alpha(Opacity =0);}
.dropmenu ul li a {display:block;padding:.375rem 1rem;color:#666;text-align:left;white-space:nowrap;font-size:.925rem;}
.dropmenu ul li a:hover,
.dropmenu ul li.active a {background-color:#f1f2f4;color:#333;}
.dropmenu ul li.disabled a {opacity:0.5;cursor:default;pointer-events:none;filter:Alpha(Opacity =50);}

.dropmenu.inverse ul {background-color:#333;}
.dropmenu.inverse ul li a {color:#ccc;}
.dropmenu.inverse ul li a:hover,
.dropmenu.inverse ul li.active a {background-color:#222;color:#fff;}

.dropmenu:hover ul {visibility:visible;opacity:0.95;filter:Alpha(Opacity =95);}
.dropmenu.right ul {right:0;left:auto;}
查询/*--page--*/覆盖整个组件样式

/*--page--*/
ul.page {display:inline-block;margin-bottom:1.125rem;}
ul.page li {float:left;margin-right:.375rem;margin-bottom:.375rem;}
ul.page li:last-of-type {margin-right:0;}
ul.page li a {display:block;padding:.75rem;border-radius:.25rem;background-color:#f1f2f4;color:#666;white-space:nowrap;font-size:1rem;}
ul.page li a:hover,
ul.page li.active a {background-color:#333;color:#fff;}
ul.page li.disabled a {opacity:0.5;cursor:default;pointer-events:none;filter:Alpha(Opacity =50);}
查询
.loading {margin:1.5rem auto;width:10rem;text-align:center;}
.loading>div {display:inline-block;margin:0 .375rem;width:2rem;height:2rem;border-radius:100%;background-color:#333;animation:bouncedelay 1.0s infinite ease-in-out;-webkit-animation:bouncedelay 1.0s infinite ease-in-out;animation-fill-mode:both;-webkit-animation-fill-mode:both;}
替换为
.loading {margin:1.5rem auto;text-align:center;}
.loading>div {display:inline-block;margin:0 .25rem;width:2rem;height:2rem;border-radius:100%;background-color:#333;animation:bouncedelay 1.0s infinite ease-in-out;-webkit-animation:bouncedelay 1.0s infinite ease-in-out;animation-fill-mode:both;-webkit-animation-fill-mode:both;}
查询
.progress>span {float:left;padding:0 .5rem;background-color:#ddd;color:#333;text-align:right;font-weight:bold;font-size:1rem;line-height:2rem;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
替换为
.progress>span {float:left;padding:0 .5rem;background-color:#ddd;color:#333;text-align:right;font-weight:bold;font-size:1rem;line-height:2;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
查询/*--form--*/覆盖整个组件样式

/*--form--*/
form {color:#666;}
input[type=radio],
input[type=checkbox] {margin-right:.5rem;vertical-align:middle;cursor:pointer;}
input[type=file] {padding:.43rem 0;font-size:1rem;}
input[type=search],input[type=date],input[type=month],input[type=week],input[type=time],input[type=datetime],input[type=datetime-local] {-webkit-appearance:none;}
input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=number],
input[type=tel],
input[type=search],
input[type=date],input[type=month],input[type=week],input[type=time],input[type=datetime],input[type=datetime-local],
textarea,
select {padding:.5rem .75rem;min-height:2.429rem;border:1px solid #bbb;border-radius:.375rem;color:inherit;font-size:1rem;line-height:1.3;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}
textarea {max-height:30rem;min-height:7.5rem;}
select {padding:.5rem;}
select:not([multiple]) {height:2.429rem;}
select.line {margin:0;width:100%;}

input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=search]:focus,
input[type=date]:focus,input[type=month]:focus,input[type=week]:focus,input[type=time]:focus,input[type=datetime]:focus,input[type=datetime-local]:focus,
textarea:focus,
select:focus {border-color:#333;box-shadow:0 .1rem .25rem rgba(0, 0, 0, 0.15) inset, 0 0 .25rem #333;}

input[type=text].active,
input[type=password].active,
input[type=email].active,
input[type=url].active,
input[type=number].active,
input[type=tel].active,
input[type=search].active,
input[type=date].active,input[type=month].active,input[type=week].active,input[type=time].active,input[type=datetime].active,input[type=datetime-local].active,
textarea.active,
select.active {border-color:#ff0000;box-shadow:0 .1rem .25rem rgba(0, 0, 0, 0.15) inset, 0 0 .25rem #ff0000;}

input[type=text]:disabled,
input[type=password]:disabled,
input[type=email]:disabled,
input[type=url]:disabled,
input[type=number]:disabled,
input[type=tel]:disabled,
input[type=search]:disabled,
input[type=date]:disabled,input[type=month]:disabled,input[type=week]:disabled,input[type=time]:disabled,input[type=datetime]:disabled,input[type=datetime-local]:disabled,
textarea:disabled,
select:disabled {background-color:#f1f2f4;opacity:0.75;filter:Alpha(Opacity =75);}

input.noborder {border:0;border-radius:0;box-shadow:0 0 0 !important;}

label {display:inline-block;margin:0 1rem 1rem 0;font-size:1rem;line-height:1.5;cursor:pointer;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}
label>input {width:auto !important;height:auto !important;}
label>p {margin:.375rem 0 0 1.35rem;color:#999;text-align:left;word-wrap:break-word;font-size:.925rem;line-height:1.5;}
label.line {display:block;margin:0 0 .75rem 0;}
label.line:last-of-type {margin-bottom:1rem;}
label.disabled {opacity:0.75;cursor:default;pointer-events:none;filter:Alpha(Opacity =75);}

ul.form {margin-bottom:.5rem;}
ul.form>li {display:inline-block;margin-right:1rem;margin-bottom:1rem;}
ul.form>li>span {display:inline-block;padding:.5rem 1rem .5rem 0;vertical-align:top;font-weight:bold;font-size:1rem;line-height:1.5;}
ul.form>li>div {display:inline-block;text-align:left;}
ul.form>li>div>p {margin:.375rem 0 0 0;color:#999;text-align:left;word-wrap:break-word;font-size:.925rem;line-height:1.5;}
ul.form>li[class^="box"],ul.form>li[class*="box"] {display:block;margin-right:0;}
ul.form>li[class^="box"]>span:not([class^="box"]),ul.form>li[class*="box"]>span:not([class*="box"]) {padding:0 0 .5rem;}
ul.form>li>div[class^="box"],ul.form>li>div[class*="box"] {float:right;}

ul.form>li>div>label:not(.line) {margin:.5rem 1rem .5rem 0;}
ul.form>li>div>label:not(.line):last-of-type {margin-right:0;}
ul.form>li>div>label.line:first-of-type {margin-top:.5rem;}
ul.form>li>div>label.line:last-of-type {margin-bottom:.5rem;}
ul.form>li>div>input,
ul.form>li>div>textarea {width:100%;max-width:100%;}
ul.form>li>div>select:not(:first-of-type) {margin-left:1rem;}
ul.form>li>div>select.line {margin-right:0;}

ul.form>li>div.text {padding-top:.5rem;text-align:left;word-wrap:break-word;font-size:1rem;line-height:1.5;}
ul.form>li>div.icon {position:relative;}
ul.form>li>div.icon>i {position:absolute;top:.7rem;left:.85rem;margin-right:0;font-size:1rem;}
ul.form>li>div.icon>input {padding-left:2.5rem;width:100%;}

ul.form.ratio60>li,ul.form.ratio70>li,ul.form.ratio80>li,ul.form.ratio90>li {display:block;margin-right:0;padding-right:0;padding-left:0;width:100%;}
ul.form.ratio60>li>div,ul.form.ratio70>li>div,ul.form.ratio80>li>div,ul.form.ratio90>li>div {float:right;}
ul.form.ratio60>li>span {width:40%;}
ul.form.ratio60>li>div {width:60%;}
ul.form.ratio70>li>span {width:30%;}
ul.form.ratio70>li>div {width:70%;}
ul.form.ratio80>li>span {width:20%;}
ul.form.ratio80>li>div {width:80%;}
ul.form.ratio90>li>span {width:10%;}
ul.form.ratio90>li>div {width:90%;}

ul.form.ratio100>li {display:block;margin-right:0;padding-right:0;padding-left:0;width:100%;text-align:left;}
ul.form.ratio100>li>span {float:none;padding:0 0 .5rem;width:auto;}
ul.form.ratio100>li>div {float:none;width:100%;}

@media screen and (max-width:1200px) {
ul.form.ratio-m100>li {display:block;margin-right:0;padding-right:0;padding-left:0;width:100%;text-align:left;}
ul.form.ratio-m100>li>span {float:none;padding:0 0 .5rem;width:auto;}
ul.form.ratio-m100>li>div {float:none;width:100%;}
}

@media screen and (max-width:750px) {
ul.form.ratio-s100>li {display:block;margin-right:0;padding-right:0;padding-left:0;width:100%;text-align:left;}
ul.form.ratio-s100>li>span {float:none;padding:0 0 .5rem;width:auto;}
ul.form.ratio-s100>li>div {float:none;width:100%;}
}
查询
.menu.drop>div>ul>li:hover>a {background-color:#222;color:#fff;}
.menu.drop>div>ul>li.active>a {color:#fff;font-weight:bold;}
替换为
.menu.drop>div>ul>li:hover>a,
.menu.drop>div>ul>li.active>a {background-color:#222;color:#fff;}
查询
.menu.accordion>div>ul>li:hover>a {background-color:#222;color:#fff;}
.menu.accordion>div>ul>li.active>a {color:#fff;font-weight:bold;}
替换为
.menu.accordion>div>ul>li:hover>a,
.menu.accordion>div>ul>li.active>a {background-color:#222;color:#fff;}
查询
.menu.fadeinright>div>ul>li:hover>a {background-color:#222;color:#fff;}
.menu.fadeinright>div>ul>li.active>a {color:#fff;font-weight:bold;}
替换为
.menu.fadeinright>div>ul>li:hover>a,
.menu.fadeinright>div>ul>li.active>a {background-color:#222;color:#fff;}
查询
.toggle-nav .menu.accordion>div>ul>li:hover>a {background-color:#222;color:#fff;}
.toggle-nav .menu.accordion>div>ul>li.active>a {color:#fff;font-weight:bold;}
替换为
.toggle-nav .menu.accordion>div>ul>li:hover>a,
.toggle-nav .menu.accordion>div>ul>li.active>a {background-color:#222;color:#fff;}
查询
.toggle-nav>i[data-close=togglenavigation] {position:absolute;top:.85rem;right:.85rem;margin-right:0;color:#999;font-size:.75rem;cursor:pointer;}
.toggle-nav>i[data-close=togglenavigation]:hover {color:#ccc;}
替换为
.toggle-nav>i[data-close=togglenavigation] {position:absolute;top:.85rem;right:.85rem;margin-right:0;font-size:.75rem;opacity:0.5;cursor:pointer;filter:Alpha(Opacity =50);}
.toggle-nav>i[data-close=togglenavigation]:hover {opacity:0.75;filter:Alpha(Opacity =75);}

修订文件:diquick.js,我们建议直接覆盖源文件来升级

查询
.attr("class") == "active"
替换为
.hasClass("active")