Skip to content

Z
zui

易企天创 / zui
11 个月 前同步成功

通知 6
Star 0
Fork 1
Z
zui

体验新版 GitCode，发现更多精彩内容 >>

提交 95e72ebc 编写于 作者: C Catouse
浏览文件
操作

* change style for mobile devices.

上级 709f7fe7
展开全部 隐藏空白更改
内联 并排
Showing with 217 addition and 93 deletion
docs/css/doc.css
浏览文件 @ 95e72ebc
......@@ -1697,16 +1697,14 @@ body.query-enabled[data-query='icons'] #grid .card.open.section-preview-show .se
-o-transition: opacity .3s cubic-bezier(.175, .885, .32, 1);
transition: opacity .3s cubic-bezier(.175, .885, .32, 1);
}
#pageHeader > .wrapper {
#pageHeader > .container {
position: relative;
max-width: 1160px;
padding: 15px 20px 20px 80px;
margin: 0 auto;
padding: 15px 20px 20px 76px;
}
#pageHeader > .wrapper > .icon {
#pageHeader > .container > .icon {
position: absolute;
top: 25px;
left: 26px;
left: 20px;
z-index: 10;
width: 36px;
height: 36px;
......@@ -1717,16 +1715,16 @@ body.query-enabled[data-query='icons'] #grid .card.open.section-preview-show .se
background-color: #e5e5e5;
border-radius: 18px;
}
#pageHeader > .wrapper > h2 {
#pageHeader > .container > h2 {
padding: 10px 0;
margin: 0;
font-size: 20px;
line-height: 16px;
}
#pageHeader > .wrapper > h2 > a.name {
#pageHeader > .container > h2 > a.name {
color: #353535;
}
#pageHeader > .wrapper > h2 > a.name:hover {
#pageHeader > .container > h2 > a.name:hover {
color: #353535;
text-decoration: none;
cursor: normal;
......@@ -1747,12 +1745,12 @@ body.query-enabled[data-query='icons'] #grid .card.open.section-preview-show .se
top: 110px;
bottom: 0;
width: 100%;
padding: 20px 10px 20px 20px;
padding: 20px 0;
overflow-y: auto;
}
#pageAttrs {
padding: 0 0 10px 34px;
margin: 0 0 20px 16px;
margin: 0 0 20px 29px;
border-bottom: 4px double #f1f1f1;
}
#pageAttrs > .badge {
......@@ -1817,23 +1815,17 @@ body.query-enabled[data-query='icons'] #grid .card.open.section-preview-show .se
}
#pageContent {
position: relative;
padding-left: 50px;
padding-left: 56px;
}
#pageContent:before {
position: absolute;
top: -250px;
bottom: 0;
left: 24px;
left: 28px;
display: block;
content: ' ';
border-left: 1px dotted #e5e5e5;
}
#pageContent > section > article,
#pageContent > section > header,
#pageContent > article {
padding-right: 10px;
padding-left: 10px;
}
#pageContent > section {
position: relative;
}
......@@ -1841,7 +1833,7 @@ body.query-enabled[data-query='icons'] #grid .card.open.section-preview-show .se
position: absolute;
top: 28px;
bottom: -25px;
left: -26px;
left: -28px;
display: block;
content: ' ';
border-left: 1px dotted transparent;
......@@ -1863,7 +1855,7 @@ body.query-enabled[data-query='icons'] #grid .card.open.section-preview-show .se
#pageContent > section > header > h3:after {
position: absolute;
top: 25px;
left: -26px;
left: -28px;
content: ' ';
-webkit-transition: background-color .3s cubic-bezier(.175, .885, .32, 1);
-o-transition: background-color .3s cubic-bezier(.175, .885, .32, 1);
......@@ -1876,14 +1868,14 @@ body.query-enabled[data-query='icons'] #grid .card.open.section-preview-show .se
}
#pageContent > section > header > h3:after {
top: 28px;
left: -29px;
left: -31px;
width: 7px;
height: 1px;
}
#pageContent > section > header:before {
position: absolute;
top: 23px;
left: -31px;
left: -33px;
display: block;
width: 11px;
height: 11px;
......@@ -1897,9 +1889,9 @@ body.query-enabled[data-query='icons'] #grid .card.open.section-preview-show .se
#pageContent > section > header:after {
position: absolute;
top: 28px;
left: -20px;
left: -22px;
display: block;
width: 24px;
width: 20px;
content: ' ';
border-bottom: 1px dotted #e5e5e5;
}
......@@ -1937,7 +1929,7 @@ body.query-enabled[data-query='icons'] #grid .card.open.section-preview-show .se
#pageTogger {
position: absolute;
bottom: -36px;
left: 35px;
left: 29px;
z-index: 10;
width: 19px;
height: 19px;
......@@ -1981,14 +1973,14 @@ body.query-enabled[data-query='icons'] #grid .card.open.section-preview-show .se
opacity: 0;
}
body.compact-mode #heading {
-webkit-transition: height .5s cubic-bezier(.175, .885, .32, 1), opcity .5s cubic-bezier(.175, .885, .32, 1);
-o-transition: height .5s cubic-bezier(.175, .885, .32, 1), opcity .5s cubic-bezier(.175, .885, .32, 1);
transition: height .5s cubic-bezier(.175, .885, .32, 1), opcity .5s cubic-bezier(.175, .885, .32, 1);
-webkit-transition: height .3s cubic-bezier(.175, .885, .32, 1), opcity .3s cubic-bezier(.175, .885, .32, 1);
-o-transition: height .3s cubic-bezier(.175, .885, .32, 1), opcity .3s cubic-bezier(.175, .885, .32, 1);
transition: height .3s cubic-bezier(.175, .885, .32, 1), opcity .3s cubic-bezier(.175, .885, .32, 1);
}
body.compact-mode #search {
-webkit-transition: padding .5s cubic-bezier(.175, .885, .32, 1);
-o-transition: padding .5s cubic-bezier(.175, .885, .32, 1);
transition: padding .5s cubic-bezier(.175, .885, .32, 1);
-webkit-transition: padding .3s cubic-bezier(.175, .885, .32, 1);
-o-transition: padding .3s cubic-bezier(.175, .885, .32, 1);
transition: padding .3s cubic-bezier(.175, .885, .32, 1);
}
body.compact-mode #header {
position: fixed;
......@@ -1997,15 +1989,15 @@ body.compact-mode #header {
left: 0;
z-index: 1025;
height: 483px;
-webkit-transition: padding .5s cubic-bezier(.175, .885, .32, 1), height .5s cubic-bezier(.175, .885, .32, 1), background-color .5s cubic-bezier(.175, .885, .32, 1);
-o-transition: padding .5s cubic-bezier(.175, .885, .32, 1), height .5s cubic-bezier(.175, .885, .32, 1), background-color .5s cubic-bezier(.175, .885, .32, 1);
transition: padding .5s cubic-bezier(.175, .885, .32, 1), height .5s cubic-bezier(.175, .885, .32, 1), background-color .5s cubic-bezier(.175, .885, .32, 1);
-webkit-transition: padding .3s cubic-bezier(.175, .885, .32, 1), height .3s cubic-bezier(.175, .885, .32, 1), background-color .3s cubic-bezier(.175, .885, .32, 1);
-o-transition: padding .3s cubic-bezier(.175, .885, .32, 1), height .3s cubic-bezier(.175, .885, .32, 1), background-color .3s cubic-bezier(.175, .885, .32, 1);
transition: padding .3s cubic-bezier(.175, .885, .32, 1), height .3s cubic-bezier(.175, .885, .32, 1), background-color .3s cubic-bezier(.175, .885, .32, 1);
}
body.compact-mode #grid {
margin-top: 503px;
-webkit-transition: opacity .5s cubic-bezier(.175, .885, .32, 1), background-color .5s cubic-bezier(.175, .885, .32, 1), margin .5s cubic-bezier(.175, .885, .32, 1);
-o-transition: opacity .5s cubic-bezier(.175, .885, .32, 1), background-color .5s cubic-bezier(.175, .885, .32, 1), margin .5s cubic-bezier(.175, .885, .32, 1);
transition: opacity .5s cubic-bezier(.175, .885, .32, 1), background-color .5s cubic-bezier(.175, .885, .32, 1), margin .5s cubic-bezier(.175, .885, .32, 1);
-webkit-transition: opacity .3s cubic-bezier(.175, .885, .32, 1), background-color .3s cubic-bezier(.175, .885, .32, 1), margin .3s cubic-bezier(.175, .885, .32, 1);
-o-transition: opacity .3s cubic-bezier(.175, .885, .32, 1), background-color .3s cubic-bezier(.175, .885, .32, 1), margin .3s cubic-bezier(.175, .885, .32, 1);
transition: opacity .3s cubic-bezier(.175, .885, .32, 1), background-color .3s cubic-bezier(.175, .885, .32, 1), margin .3s cubic-bezier(.175, .885, .32, 1);
}
body.compact-mode.compact-mode-in #navbar {
padding-top: 10px;
......@@ -2150,23 +2142,9 @@ body.page-show.page-show-full #pageContainer > .container {
width: 100%;
max-width: none;
}
body.page-show.page-show-full #pageContent {
max-width: 1160px;
padding: 0 20px 0 70px;
margin: 0 auto;
}
body.page-show.page-show-full #pageContent:before {
left: 44px;
}
body.page-show.page-show-full #pageBody {
padding: 20px 0;
}
body.page-show.page-show-full #pageBody.with-scrollbar {
padding-left: 11px;
}
body.page-show.page-show-full #pageAttrs {
margin-left: 34px;
}
body.page-show.page-show-full .path-max-btn:before,
body.page-show.page-show-full .path-max-btn:after,
body.page-show.page-show-full .path-max-btn > .path-1:before,
......@@ -2526,5 +2504,86 @@ body.page-show[data-page-accent="purple"] #pageTogger:hover:before,
body.page-show[data-page-accent="purple"] #pageTogger:hover:after {
background-color: #8666b8;
}
@media (max-width: 767px) {
#pageTogger {
bottom: -72px;
left: 8px;
}
#pageAttrs {
padding-left: 0;
margin-left: 20px;
}
#pageContent {
padding-left: 20px;
}
#pageContent:before {
left: 0;
display: none;
}
#pageContent > section:before {
left: -15px;
}
#pageContent > section > header:before {
left: -20px;
}
#pageContent > section > header:after {
display: none;
}
#pageContent > section > header > h3:before {
left: -15px;
}
#pageContent > section > header > h3:after {
left: -18px;
}
body.page-show #search {
width: 40%;
padding-left: 0;
}
body.page-show #searchInput:-moz-placeholder {
color: transparent;
}
body.page-show #searchInput::-moz-placeholder {
color: transparent;
}
body.page-show #searchInput:-ms-input-placeholder {
color: transparent;
}
body.page-show #searchInput::-webkit-input-placeholder {
color: transparent;
}
body.page-show.input-query-focus #search {
width: auto;
max-width: none;
margin-right: 50px;
margin-left: 0;
}
body.page-show.input-query-focus #searchInput:-moz-placeholder {
color: #e5e5e5;
}
body.page-show.input-query-focus #searchInput::-moz-placeholder {
color: #e5e5e5;
}
body.page-show.input-query-focus #searchInput:-ms-input-placeholder {
color: #e5e5e5;
}
body.page-show.input-query-focus #searchInput::-webkit-input-placeholder {
color: #e5e5e5;
}
body.page-show.input-query-focus #searchInput:-moz-placeholder {
color: rgba(255, 255, 255, .5);
}
body.page-show.input-query-focus #searchInput::-moz-placeholder {
color: rgba(255, 255, 255, .5);
}
body.page-show.input-query-focus #searchInput:-ms-input-placeholder {
color: rgba(255, 255, 255, .5);
}
body.page-show.input-query-focus #searchInput::-webkit-input-placeholder {
color: rgba(255, 255, 255, .5);
}
body.page-show.input-query-focus #navbar .navbar-brand {
display: none;
}
}
/*# sourceMappingURL=doc.css.map */
docs/css/doc.css.map
浏览文件 @ 95e72ebc
此差异已折叠。
docs/css/doc.min.css
浏览文件 @ 95e72ebc
此差异已折叠。
docs/js/doc.js
浏览文件 @ 95e72ebc
......@@ -848,7 +848,7 @@
setTimeout(function(){
$body.data(animateName, false);
if(callback) callback();
}, 500);
}, 300);
}, 10);
} else if(callback) {
callback();
......@@ -860,7 +860,7 @@
$body.removeClass('compact-mode');
$body.data(animateName, false);
if(callback) callback();
}, 500);
}, 300);
} else if(callback) {
callback();
}
......
docs/js/doc.min.js
浏览文件 @ 95e72ebc
此差异已折叠。
index.html
浏览文件 @ 95e72ebc
......@@ -56,13 +56,13 @@
<div class="container">
<div id="page">
<div id="pageHeader">
<div class="wrapper">
<div class="wrapper container">
<i class="icon icon-star"></i>
<h2><a class="name" href="###">图标</a></h2>
<small class="text-muted desc">使用和查找图标</small>
<button type="button" class="btn btn-link" id="pageTogger"></button>
</div>
<button data-toggle="tooltip" title="最大化" type="button" class="btn btn-link path-max-btn path-btn"><i class="path-1"></i></button>
<button data-toggle="tooltip" title="最大化" type="button" class="btn btn-link path-max-btn path-btn hidden-xs"><i class="path-1"></i></button>
<button data-toggle="tooltip" title="关闭（ESC）" type="button" class="btn btn-link path-close-btn path-btn"><i class="path-1"></i></button>
</div>
<div id="pageBody" class="scrollbar-hover">
......@@ -79,8 +79,10 @@
</div>
</div>
<div class="loader" id="pageLoader"><i class="icon icon-spin icon-spinner-indicator"></i> <span class="loading-text">正在拼命加载中...</span><span class="error-text">加载失败，请检查网络重试。<br>另一个导致无法加载文档的原因可能是该文档尚未完成。<br>欢迎你在 <a href="https://github.com/easysoft/zui">Github</a> 上 <a href="https://github.com/easysoft/zui/fork">Fork</a> 项目来完善文档。</span></div>
<div id="pageContent"></div>
<nav></nav>
<div class="container">
<div id="pageContent"></div>
<nav></nav>
</div>
</div>
</div>
</div>
......
src/js/doc.js
浏览文件 @ 95e72ebc
......@@ -841,7 +841,7 @@
setTimeout(function(){
$body.data(animateName, false);
if(callback) callback();
}, 500);
}, 300);
}, 10);
} else if(callback) {
callback();
......@@ -853,7 +853,7 @@
$body.removeClass('compact-mode');
$body.data(animateName, false);
if(callback) callback();
}, 500);
}, 300);
} else if(callback) {
callback();
}
......
src/less/doc.less
浏览文件 @ 95e72ebc
......@@ -1302,11 +1302,9 @@ body.query-enabled {
.opacity(0);
.transition-fast(opacity);
> .wrapper {
max-width: 1160px;
margin: 0 auto;
> .container {
position: relative;
padding: 15px 20px 20px 80px;
padding: 15px 20px 20px 76px;
> .icon {
position: absolute;
......@@ -1315,7 +1313,7 @@ body.query-enabled {
line-height: 36px;
border-radius: 18px;
text-align: center;
left: 26px;
left: 20px;
top: 25px;
z-index: 10;
font-style: normal;
......@@ -1355,7 +1353,7 @@ body.query-enabled {
}
}
#pageBody {
padding: 20px 10px 20px 20px;
padding: 20px 0;
position: absolute;
top: 110px;
bottom: 0;
......@@ -1365,7 +1363,7 @@ body.query-enabled {
#pageAttrs {
padding: 0 0 10px 34px;
// background-color: @color-gray-pale;
margin: 0 0 20px 16px;
margin: 0 0 20px 29px;
border-bottom: 4px double @color-gray-pale;
> .badge {
......@@ -1434,7 +1432,7 @@ body.query-enabled {
}
}
#pageContent {
padding-left: 50px;
padding-left: 56px;
position: relative;
&:before {
......@@ -1442,15 +1440,15 @@ body.query-enabled {
content: ' ';
display: block;
border-left: 1px dotted @color-gray-lighter;
left: 24px;
left: 28px;
top: -250px;
bottom: 0;
}
> section > article, > section > header, > article {
padding-left: 10px;
padding-right: 10px;
}
// > section > article, > section > header, > article {
// padding-left: 10px;
// padding-right: 10px;
// }
> section {
position: relative;
......@@ -1460,7 +1458,7 @@ body.query-enabled {
content: ' ';
display: block;
border-left: 1px dotted transparent;
left: -26px;
left: -28px;
top: 28px;
bottom: -25px;
}
......@@ -1482,7 +1480,7 @@ body.query-enabled {
&:before, &:after {
position: absolute;
content: ' ';
left: -26px;
left: -28px;
top: 25px;
.transition-fast(background-color);
}
......@@ -1497,7 +1495,7 @@ body.query-enabled {
width: 7px;
height: 1px;
top: 28px;
left: -29px;
left: -31px;
}
}
......@@ -1505,7 +1503,7 @@ body.query-enabled {
position: absolute;
content: ' ';
display: block;
left: -31px;
left: -33px;
top: 23px;
width: 11px;
height: 11px;
......@@ -1518,9 +1516,9 @@ body.query-enabled {
position: absolute;
content: ' ';
display: block;
width: 24px;
width: 20px;
border-bottom: 1px dotted @color-gray-lighter;
left: -20px;
left: -22px;
top: 28px;
}
}
......@@ -1570,7 +1568,7 @@ body.query-enabled {
#pageTogger {
position: absolute;
bottom: -36px;
left: 35px;
left: 29px;
width: 19px;
height: 19px;
padding: 0;
......@@ -1616,11 +1614,11 @@ body.query-enabled {
body.compact-mode {
#heading {
.transition-normal(height; opcity;);
.transition-fast(height; opcity;);
}
#search {
.transition-normal(padding);
.transition-fast(padding);
}
#header {
......@@ -1630,11 +1628,11 @@ body.compact-mode {
left: 0;
right: 0;
height: 483px;
.transition-normal(padding; height; background-color);
.transition-fast(padding; height; background-color);
}
#grid {
.transition-normal(opacity; background-color; margin);
.transition-fast(opacity; background-color; margin);
margin-top: 503px;
}
......@@ -1809,17 +1807,17 @@ body.page-show {
}
#pageContent {
padding: 0 20px 0 70px;
max-width: 1160px;
margin: 0 auto;
// padding: 0 20px 0 70px;
// max-width: 1160px;
// margin: 0 auto;
&:before {
left: 44px;
// left: 44px;
}
}
#pageBody {
padding: 20px 0;
// padding: 20px 0;
&.with-scrollbar {
padding-left: 11px;
......@@ -1827,7 +1825,7 @@ body.page-show {
}
#pageAttrs {
margin-left: 34px;
// margin-left: 30px;
}
.path-max-btn {
......@@ -1915,3 +1913,68 @@ body.page-show {
.page-accent(@color-purple; @color-purple-pale);
}
}
@media (max-width: 767px) {
#pageTogger {
bottom: -72px;
left: 8px;
}
#pageAttrs {
margin-left: 20px;
padding-left: 0;
}
#pageContent {
padding-left: 20px;
&:before {
left: 0;
display: none;
}
}
#pageContent > section:before {
left: -15px;
}
#pageContent > section > header {
&:before {
left: -20px;
}
&:after {
display: none;
}
> h3 {
&:before {left: -15px}
&:after {left: -18px}
}
}
body.page-show {
#search {
width: 40%;
padding-left: 0;
}
#searchInput{
.placeholder(transparent);
}
}
body.page-show.input-query-focus {
#search {
width: auto;
margin-left: 0;
margin-right: 50px;
max-width: none;
}
#searchInput{
.placeholder(#e5e5e5);
.placeholder(rgba(255, 255, 255, .5));
}
#navbar .navbar-brand {display: none}
}
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或