metabox part 2

This commit is contained in:
Jana Deutschländer 2017-01-09 16:31:32 +01:00
commit d62df8bdbf
3 changed files with 116 additions and 39 deletions

View file

@ -22,10 +22,9 @@
}
#meta-box{
display: inline-block;
height: 2.05rem;
min-height: 1.95rem;
max-width: 40%;
float: right;
border: 1px solid transparent;
}
#plugin__highlightparent{

View file

@ -1,12 +1,18 @@
#meta-box{
ul.nav-tabs {
border-bottom: 1px solid @background_page-header;
background-color: @background_page-header;
#meta-box {
.tab-container {
display: table;
}
.box-content {
position: relative;
bottom: -2px;
margin: 0; padding: 0;
height: 0;
overflow-y: visible;
}
ul.meta-tabs {
border-bottom: 1px solid @color-border;
background-color: @background_page-header;
margin: 0;
padding: 0;
list-style: none;
&::before, &::after {
display: table;
@ -14,43 +20,109 @@
box-sizing: border-box;
clear: both;
}
>li {
margin: -1px;
> li:first-child{
> a{
margin-left: 0;
}
}
> li {
margin: 0 -1px -1px;
position: relative;
display: inline-block;
>a {
> a {
font-size: .78rem;
margin-right: 2px;
margin-left: 4px;
line-height: 1.42857143;
position: relative;
display: block;
padding: .5em 2em;
border: 1px solid transparent;
padding: .56em 2em;
border: 1px solid @color-border;
background-color: @color-site-bg;
border-radius: 4px 4px 0 0;
color: @color-nav;
.prefix{
font-size: .78rem;
color: @color-nav;
color: @color-nav;
cursor: pointer;
* {
cursor: pointer;
}
.num{
.prefix {
font-size: .78rem;
color: @color-nav;
}
.num {
font-size: .56rem;
}
&:hover, &:focus, &:active{
color: #555;
cursor: default;
background-color: #fff;
border-color: 1px solid @button_background;
&:hover, &:focus, &:active {
color: @color-link;
background-color: @background_page-header;
border-color: @color-border;
border-bottom-color: transparent;
}
}
&.active >a{
&.active > a {
color: #555;
cursor: default;
background-color: #fff;
background-color: @background_page-header;
border-color: transparent;
}
}
}
.meta-content {
.tab-pane {
border: 1px solid @color-border;
border-top-color: transparent;
background-color: @background_page-header;
display: none;
position: absolute;
width: 100%;
&.active {
display: block;
}
> div {
padding: .8rem .5rem .5rem;
}
#dw__toc {
width: auto;
float: none;
margin: 0;
padding: .6rem .5rem .5rem .8rem;
background: transparent;
border: 0 none;
h3 {
display: none;
}
> div {
padding: 0;
}
> div ul.toc {
font-size: .78rem;
padding-left: .5em;
a {
font-size: .78rem;
}
li {
}
div.li {
position: relative;
::before {
position: relative;
top: -.2em;
content: "";
display: inline-block;
width: 4px;
height: 4px;
margin-right: .3rem;
background-color: @color-border;
overflow: hidden;
}
padding: .15em 0;
}
}
> div > ul.toc {
padding: 0;
}
}
}
}
}

View file

@ -1,17 +1,23 @@
<ul class="nav-tabs">
<li><a data-toggle="tab" href="#tab1" aria-expanded="false"><span class="prefix">Sitemap</span><span class="num"></span></a></li>
<li><a data-toggle="tab" href="#tab2" aria-expanded="false"><span class="prefix">Jira</span><span class="num"></span></a></li>
<li class="active"><a data-toggle="tab" href="#tab3" aria-expanded="true"><span class="prefix">Tags</span><span class="num"></span></a></li>
</ul>
<div class="tab-container">
<ul class="meta-tabs">
<!--<li class="active"><a data-toggle="tab" href="#tab1" aria-expanded="true"><span class="prefix">Sitemap</span><span class="num"></span></a></li>-->
<li><a data-toggle="tab" href="#tab1" aria-expanded="false"><span class="prefix">Sitemap</span><span class="num"></span></a></li>
<li><a data-toggle="tab" href="#tab2" aria-expanded="false"><span class="prefix">Tags</span><span class="num"></span></a></li>
<li><a data-toggle="tab" href="#tab3" aria-expanded="false"><span class="prefix">Jira</span><span class="num"></span></a></li>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">
</ul>
</div>
<div id="tab2" class="tab-pane fade">
<div class="meta-content">
<div class="box-content">
<div id="tab1" class="tab-pane"> <!-- .active -->
<?php tpl_toc(); ?>
</div>
<div id="tab2" class="tab-pane">
</div>
<div id="tab3" class="tab-pane fade">
</div>
<div id="tab3" class="tab-pane">
</div>
</div>
</div>
</div>