V1.1.2版本修订内容2016-10-31

  • 修订块级按钮的偏移错误
  • 修订翻页组件响应式兼容性问题
  • 修订表单组件排列、类型及兼容问题
  • 增加表单组件纯文本模式
从V1.1版本自行升级至V1.1.2步骤如下

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

查询.btn覆盖整个按钮组件样式

/*--button--*/
.btn {display:inline-block;padding:.75rem 2rem;border-radius:.375rem;background-color:#666;color:#fff;vertical-align:middle;text-align:center;white-space:nowrap;font-size:1.125rem;cursor:pointer;}
.btn:hover {box-shadow:0 0 20rem rgba(0,0,0,.5) inset;color:#fff;}
.btn:not(.line):not(:first-of-type) {margin-left:.5rem;}
.btn.xs {padding:.5rem 1rem;font-size:.925rem;}
.btn.xl {padding:1rem 3rem;font-size:1.25rem;}
.btn.icon i {margin-right:0;}
.btn.disabled {box-shadow:0 0 0 inset;opacity:0.5;cursor:default;filter:Alpha(Opacity =50);}
.btn.square {border-radius:0;}
.btn.line {display:block;width:100%;}

.btn-group {display:inline-block;}
.btn-group .btn {float:left;margin:0 0 0 1px !important;}
.btn-group .btn:not(:first-of-type):not(:last-of-type) {border-radius:0;}
.btn-group .btn:first-of-type {margin-left:0 !important;border-radius:.375rem 0 0 .375rem;}
.btn-group .btn:last-of-type {border-radius:0 .375rem .375rem 0;}

.btn-group.vertical .btn {float:none;display:block;margin:1px 0 0 0 !important;}
.btn-group.vertical .btn:not(:first-of-type):not(:last-of-type) {border-radius:0;}
.btn-group.vertical .btn:first-of-type {margin-bottom:0 !important;border-radius:.375rem .375rem 0 0;}
.btn-group.vertical .btn:last-of-type {border-radius:0 0 .375rem .375rem;}

.btn-group.square .btn {border-radius:0 !important;}
查询
ul.page {display:inline-block;margin-bottom:1.5rem;}
ul.page li {float:left;margin-right:.375rem;}
替换为
ul.page {display:inline-block;margin-bottom:1.125rem;}
ul.page li {float:left;margin-right:.375rem;margin-bottom:.375rem;}
查询--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;filter:Alpha(Opacity =75);}
label.disabled>input {cursor:default;}
label:not(.disabled):hover {color:#333;}

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:.375rem 1rem .5rem 0;}
ul.form>li>div>label:not(.line):last-of-type {margin-right:0;}
ul.form>li>div>label.line {margin-top:.375rem;}
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%;}
}
查询
.toggle-nav-btn {cursor:pointer;}
将其删除
查询
ul.breadcrumb,.separator,.panel,.tab,ul.accordion,.btn,.dorpmenu,ul.page,.loading,.media>span,ul.form {line-height:normal;}
替换为
ul.breadcrumb,.separator,.panel,.tab,ul.accordion,.btn,.dorpmenu,ul.page,.loading,.media>span,ul.form,ul.form>li {line-height:normal;}
查询
.loading,ul.form {font-size:medium;}
替换为
.panel>.action,.loading,ul.form,ul.form>li {font-size:medium;}