V1.2.3版本修订内容2017-10-11

  • 新增基本属性
  • 修订徽章组件
  • 修订提示框组件
  • 修订进度条组件
  • 修订媒体组件
  • 修订侧边栏导航组件
  • 修订遮罩层组件

V1.2.3版本对多个组件进行了修订,我们建议直接覆盖源文件来升级

提示框、侧边栏导航、遮罩层组件脚本进行了修订,请覆盖js/diquick.js
jQuery升级至v3.2.1,请覆盖js/jquery.js
fancybox升级至v3.1.25,建议将原有的js/fancybox删除,重新添加新版本中的js/fancybox内容,新版本的fancybox插件引用文件名将产生变化

修订文件:diquick.css、diquick.comb.css、diquick.min.css

添加

.lh100 {line-height:1 !important;}
.blur {overflow:hidden;-webkit-filter:blur(25px);filter:blur(25px);}
查询/*--badge--*/
更新组件内容

/*--badge--*/
.badge {display:inline-block;margin-left:.5rem;padding:.25rem .375rem;border-radius:.375rem;background-color:#333;color:#fff;vertical-align:baseline;text-align:center;white-space:nowrap;font-size:.875rem;line-height:1;}
.badge.inherit {margin-left:.75rem;font-size:60%;}
a.badge:hover {box-shadow:0 0 20rem rgba(0,0,0,.5) inset;color:#fff;}
查询/*--tooltip--*/
更新组件内容

/*--tooltip--*/
.tooltip-parent {position:relative;cursor:pointer;}
.tooltip {position:absolute;z-index:1000;visibility:hidden;padding:.375rem .5rem;border-radius:.25rem;background-color:#333;color:#ccc;text-align:left;white-space:nowrap;word-wrap:break-word;word-break:normal;font-size:.925rem;line-height:1.5;opacity:0;cursor:default;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;filter:Alpha(Opacity =0);}

.tooltip.top {bottom:calc(100% + 1rem);left:calc(50% - 1.075rem);}
.tooltip.top:after {position:absolute;bottom:-.45rem;left:.575rem;border-top:.5rem solid #333;border-right:.5rem solid transparent;border-left:.5rem solid transparent;content:'';}
.tooltip.bottom {top:calc(100% + 1rem);left:calc(50% - 1.075rem);}
.tooltip.bottom:after {position:absolute;top:-.45rem;left:.575rem;border-right:.5rem solid transparent;border-bottom:.5rem solid #333;border-left:.5rem solid transparent;content:'';}
.tooltip.left {top:calc(50% - 1.075rem);right:calc(100% + 1rem);}
.tooltip.left:after {position:absolute;top:.575rem;right:-.45rem;border-top:.5rem solid transparent;border-bottom:.5rem solid transparent;border-left:.5rem solid #333;content:'';}
.tooltip.right {top:calc(50% - 1.075rem);left:calc(100% + 1rem);}
.tooltip.right:after {position:absolute;top:.575rem;left:-.45rem;border-top:.5rem solid transparent;border-right:.5rem solid #333;border-bottom:.5rem solid transparent;content:'';}
.tooltip[data-width] {white-space:normal;}

.tooltip-parent:hover .tooltip,
.tooltip.active {visibility:visible;opacity:0.95;filter:Alpha(Opacity =95);}
查询/*--progress--*/
更新组件内容

/*--progress--*/
.progress {overflow:hidden;margin-bottom:1.5rem;border-radius:.375rem;background-color:#f1f2f4;}
.progress>span {float:left;padding:0 .5rem;min-height:1rem;background-color:#ddd;color:#333;text-align:right;font-weight:bold;font-size:.925rem;line-height:2;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}

.progress.inverse {background-color:#666;}
.progress.inverse>span {background-color:#333;color:#fff;}
查询/*--media--*/
更新组件内容

/*--media--*/
.media {margin-bottom:1.5rem;}

.media>.img {margin-bottom:1rem;}
.media>.img img {width:100%;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}

.media.left>.img {float:left;margin-top:.375rem;margin-bottom:0;}
.media.right>.img {float:right;margin-top:.375rem;margin-bottom:0;}
.media.left>.content {float:left;padding-left:1.5rem;}
.media.right>.content {float:left;padding-right:1.5rem;}

@media screen and (max-width:1200px) {
.media.left.reset-m>.img,
.media.right.reset-m>.img {float:none;margin-top:0;margin-bottom:1rem;width:auto;}
.media.left.reset-m>.content {float:none;padding-left:0;width:auto;}
.media.right.reset-m>.content {float:none;padding-right:0;width:auto;}
}
@media screen and (max-width:750px) {
.media.left.reset-s>.img,
.media.right.reset-s>.img {float:none;margin-top:0;margin-bottom:1rem;width:auto;}
.media.left.reset-s>.content {float:none;padding-left:0;width:auto;}
.media.right.reset-s>.content {float:none;padding-right:0;width:auto;}
}

.media.radius>.img {overflow:hidden;border-radius:.5rem;}

.media.zoom>.img {overflow:hidden;}
.media.zoom>.img:hover img {-webkit-transform:scale(1.05);transform:scale(1.05);}

.media.overlay {position:relative;z-index:21;overflow:hidden;}
.media.overlay>.img {margin-bottom:0;}
.media.overlay>.content {position:absolute;bottom:0;left:0;z-index:2;padding:1.5rem;width:100%;height:100%;}
.media.overlay.radius {border-radius:.5rem;}
.media.overlay.darken:not(.fadein)>.img img,
.media.overlay.darken.fadein:hover>.img img {-webkit-filter:brightness(0.5);filter:brightness(0.5);}
.media.overlay.fadein>.content {visibility:hidden;opacity:0;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;filter:Alpha(Opacity =0);}
.media.overlay.fadein:hover>.content {visibility:visible;opacity:1;filter:Alpha(Opacity =100);}
.media.overlay.zoom:hover>.img img {-webkit-transform:scale(1.05);transform:scale(1.05);}
查询/**--toggle-nav--**/
更新组件内容

/**--sidebar-nav--**/
.sidebar-nav {position:fixed;top:0;left:-20rem;z-index:8001;visibility:hidden;overflow:auto;padding-top:2rem;width:20rem;height:100%;background-color:#333;box-shadow:5px 0 5px rgba(0, 0, 0, 0.15);color:#fff;opacity:0;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;filter:Alpha(Opacity =0);-webkit-overflow-scrolling:touch;}
.sidebar-nav.active {left:0;visibility:visible;opacity:1;filter:Alpha(Opacity =100);}
.sidebar-nav>i[data-close="sidebar-nav"] {position:absolute;top:.85rem;right:.85rem;margin-right:0;font-size:.75rem;opacity:0.5;cursor:pointer;filter:Alpha(Opacity =50);}
.sidebar-nav>i[data-close="sidebar-nav"]:hover {opacity:0.75;filter:Alpha(Opacity =75);}

.sidebar-nav .menu.accordion {margin-bottom:1.5rem;}
.sidebar-nav .menu.accordion>div {border-bottom:1px solid #444;}
.sidebar-nav .menu.accordion>div:last-of-type {border-bottom:1px solid #444;}
.sidebar-nav .menu.accordion>div>a {padding:.75rem 1rem;background-color:transparent;color:#ccc;text-align:left;font-size:1.125rem;line-height:1.25;}
.sidebar-nav .menu.accordion>div>a>i.arrow {background-position:-1px -28px;}

.sidebar-nav .menu.accordion>div>ul {padding:.5rem 0;background-color:#333;}
.sidebar-nav .menu.accordion>div>ul>li>a {padding:.25rem 1rem;color:#ccc;text-align:left;font-size:.925rem;line-height:1.5;}
.sidebar-nav .menu.accordion>div>ul>li:hover>a,
.sidebar-nav .menu.accordion>div>ul>li.active>a {background-color:#222;color:#fff;}

.sidebar-nav .menu.accordion>div:hover>a,
.sidebar-nav .menu.accordion>div.active>a {background-color:#333;color:#fff;}

.body-content {position:relative;top:0;left:0;overflow-x:hidden;width:100%;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
.body-content.active {left:20rem;}
查询/*--mask--*/
更新组件内容

/*--mask--*/
.mask {position:fixed;top:0;left:0;z-index:100000;display:none;width:100%;height:100%;background:rgba(0, 0, 0, 0.75) none repeat scroll 0 0 !important;}
.mask>.content {display:table-cell;padding:2.5rem 15%;vertical-align:middle;text-align:center;}
.mask>i[data-close="mask"] {position:absolute;top:1.5rem;right:1.5rem;margin-right:0;color:#fff;font-size:1.25rem;cursor:pointer;}
.mask>i[data-close="mask"]:hover {color:#999;}

.mask.top {height:auto;}
.mask.bottom {top:auto;bottom:0;height:auto;}
查询/*-----------------------clear------------------------*/
更新内容

/*-----------------------clear------------------------*/

ul.breadcrumb,.separator,.panel,.tab,ul.accordion,.msg,.loading,.progress,.media,ul.form,.menu {clear:both;}
.btn,.badge,.tooltip {text-decoration:none;text-indent:0;text-transform:none;text-shadow:none;word-spacing:normal;letter-spacing:normal;font-weight:normal;font-style:normal;text-rendering:auto;}
panel>.action,ul.accordion>li>.title:after,[class^="flaticon-"],[class*=" flaticon-"],.loading,.progress>span,.media>.img,ul.form>li {text-indent:0;}
ul.breadcrumb,.separator,.panel,.tab,ul.accordion,.btn,.dropmenu,ul.page,.loading,.media>.img,ul.form,ul.form>li {line-height:normal;}
.panel>.action,.loading,ul.form,ul.form>li {font-size:medium;}

ul.baselist li:last-of-type,ol.baselist li:last-of-type,dl.baselist dd:last-of-type,
blockquote p:last-child,blockquote .basebox:last-child,
blockquote ul.baselist:last-child,blockquote ol.baselist:last-child,blockquote dl.baselist:last-child,
blockquote address:last-child,blockquote blockquote:last-child,
.panel>.content p:last-child,.panel>.content .basebox:last-child,
.panel>.content ul.baselist:last-child,.panel>.content ol.baselist:last-child,.panel>.content dl.baselist:last-child,
.panel>.content address:last-child,.panel>.content blockquote:last-child,
.tab>ul.content p:last-child,.tab>ul.content .basebox:last-child,
.tab>ul.content>li ul.baselist:last-child,.tab>ul.content>li ol.baselist:last-child,.tab>ul.content>li dl.baselist:last-child,
.tab>.content address:last-child,.tab>.content blockquote:last-child,
ul.accordion>li:last-of-type,
ul.accordion>li>.content p:last-child,ul.accordion>li>.content .basebox:last-child,
ul.accordion>li>.content ul.baselist:last-child,ul.accordion>li>.content ol.baselist:last-child,ul.accordion>li>.content dl.baselist:last-child,
ul.accordion>li>.content address:last-child,ul.accordion>li>.content blockquote:last-child,
.msg p:last-child,.msg .basebox:last-child,
.msg ul.baselist:last-child,.msg ol.baselist:last-child,.msg dl.baselist:last-child,
.media>.content p:last-child,.media>.content .basebox:last-child,
.media>.content ul.baselist:last-child,.media>.content ol.baselist:last-child,.media>.content dl.baselist:last-child,
.media>.content address:last-child,.media>.content blockquote:last-child,
ul.baselist label,ol.baselist label,dl.baselist label,.table label,
.table-scroll .table {margin-bottom:0;}
.media>.content p,.media>.content .basebox,
.media>.content ul.baselist,.media>.content ol.baselist,.media>.content dl.baselist,
.media>.content address,.media>.content blockquote {margin-bottom:1rem;}

blockquote:after,
[class^="box"]:after,[class*="box"]:after,
[class^="offset"]:after,[class*="offset"]:after,
ul.box-advance:after,ul.box-advance>li:after,
.basebox:after,
.wrapper:after,
.header:after,
.main:after,
.footer:after,
.shell:after,
.sidebar:after,
.container:after,
ul.breadcrumb:after,
.panel>.content:after,
.tab>ul.nav:after,
.tab>ul.content>li:after,
ul.accordion>li>.content:after,
.media:after,
.media>.content:after,
ul.form:after,
ul.form>li:after,
.menu:after,
.mask>.content:after {clear:both;display:table;content:"";line-height:0;}

.clear {clear:both;*zoom:1;}
.clear:before,.clear:after {display:table;content:"";line-height:0;}
升级V1.2.3版本后侧边栏导航及遮罩层组件点了没有反应?

在V1.2.3版本中对组件的类名进行了修订,具体如下:

侧边栏导航组件
触发元素属性data-click="togglenavigation"修改为data-toggle="sidebar-nav"
关闭元素属性data-close="togglenavigation"修改为data-close="sidebar-nav"
组件类名<div id="togglenavigation" class="toggle-nav relative">修改为<div id="sidebar-nav" class="sidebar-nav relative">

遮罩层组件
触发元素属性data-click="mask"修改为data-open="mask"
绑定内容属性data-target="#"修改为data-src="#"