mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 06:03:38 +08:00
Code Issues Actions 29 Packages Projects Releases Wiki Activity

Add code box anchor and active box style

Browse Source
This commit is contained in:
afc163 2015-07-23 11:26:57 +08:00
parent fe0ead041a
commit fc416228b5
2 changed files with 23 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
site/templates/code.html
View File

@ -1,10 +1,12 @@
<div class="code-box">
<div class="code-box" id="code-box-{{post.meta.id}}">
<div class="code-box-demo">
<div id="{{post.meta.id}}"></div>
<div class="code-box-demo-container" id="{{post.meta.id}}"></div>
{{ post.html }}
</div>
<div class="code-box-meta markdown">
<div class="code-box-title">{{ post.title }}</div>
<div class="code-box-title">
<a href="#code-box-{{post.meta.id}}">{{ post.title }}</a>
</div>
{{ post.meta.description }}
<span class="collapse anticon anticon-circle-o-right"></span>
</div>

22
static/style.css
View File

@ -1674,20 +1674,34 @@ footer ul li > a {
border-color: #ccc;
}
.code-box:hover .code-box-meta {
.code-box:target {
border-color: #bbb;
}
.code-box:hover .code-box-meta,
.code-box:target .code-box-meta {
background: #fbfbfb;
}
.code-box:hover .code-box-title {
.code-box:hover .code-box-title,
.code-box:target .code-box-title {
background: #fbfbfb;
box-shadow: 0 -1.2px 0 #e9e9e9;
}
.code-box .code-box-title a,
.code-box .code-box-title a:hover {
color: #666;
}
.code-box .code-box-demo {
padding: 42px 20px 50px;
border-bottom: 1px solid #E9E9E9;
}
.code-box .code-box-demo > .code-box-demo-container {
padding: 42px 20px 50px;
}
.code-box-meta {
position: relative;
padding: 12px 15px;
@ -1719,7 +1733,7 @@ footer ul li > a {
line-height: 22px;
position: relative;
margin-right: 8px;
top: -1px;
top: -2px;
color: #ccc;
}