xref: /template/sprintdoc/css/area_nav-metabox.less (revision b25b2fb7b6b40cecbd37fb0a9f28242e17dd5a7b) 
1#meta-box {
2    .tab-container {
3        display: table;
4    }
5    .box-content {
6        position: relative;
7        height: 0;
8        overflow-y: visible;
9    }
10
11    ul.meta-tabs {
12        border-bottom: 1px solid @color-border;
13        background-color: @background_page-header;
14        margin: 0;
15        padding: 0;
16        list-style: none;
17        &::before, &::after {
18            display: table;
19            content: " ";
20            box-sizing: border-box;
21            clear: both;
22        }
23        > li:first-child{
24            > a{
25                margin-left: 0;
26            }
27        }
28        > li {
29            margin: 0 -1px -1px;
30            position: relative;
31            display: inline-block;
32            > a {
33                font-size: .78rem;
34                margin-left: 4px;
35                line-height: 1.42857143;
36                position: relative;
37                display: block;
38                padding: .56em 2em;
39                border: 1px solid @color-border;
40                background-color: @color-site-bg;
41                border-radius: 4px 4px 0 0;
42                color: @color-nav;
43                cursor: pointer;
44                transition: @transition color, @transition background-color, @transition border-color;
45
46                * {
47                    cursor: pointer;
48                }
49
50                .prefix {
51                    font-size: .78rem;
52                    color: @color-nav;
53                    position: relative;
54                    transition: @transition color;
55                }
56                .num {
57                    position: absolute;
58                    right: -.8rem;
59                    top: -.4rem;
60                    background-color: @color-border;
61                    border-radius: 2px;
62                    color: @color-nav;
63                    font-size: .56rem;
64                    font-weight: 400;
65                    text-align: center;
66                    line-height: 1;
67                    padding: .2em .2rem .1em;
68                    transition: @transition color, @transition background-color;
69
70                }
71                &:hover,
72                &:focus,
73                &:active {
74                    background-color: @background_page-header;
75                    border-color: @color-border;
76                    border-bottom-color: transparent;
77                    color: @button_background;
78
79                    .prefix {
80                        color: @button_background;
81                    }
82
83                    .num {
84                        background-color: @button_background;
85                        color: @button_color;
86                    }
87                }
88            }
89            &.active > a {
90                cursor: default;
91                tab-index: -1;
92                color: #555;
93                background-color: @background_page-header;
94                border-color: transparent;
95            }
96        }
97    }
98    .meta-content {
99        .tab-pane {
100            border: 1px solid @color-border;
101            border-top-color: transparent;
102            background-color: @background_page-header;
103            display: none;
104            position: absolute;
105            width: 100%;
106            &.active {
107                display: block;
108            }
109            > div {
110                padding: .8rem .5rem .5rem;
111                p{
112                    padding-left: 1em;
113                }
114                ul{
115                    list-style: none;
116                    padding-left:0;
117                    li{
118                        margin-left: 0; padding-left: 1em;
119                    }
120                }
121            }
122
123            #dw__toc {
124                width: auto;
125                float: none;
126                margin: 0;
127                padding: .6rem .5rem .5rem .8rem;
128                background: transparent;
129                border: 0 none;
130                h3 {
131                    display: none;
132                }
133                > div {
134                    padding: 0;
135                }
136                > div ul.toc {
137                    font-size: .78rem;
138                    padding-left: .5em;
139                    a {
140                        font-size: .78rem;
141                        display: inline-block;
142                        padding-left: 10px;
143                        position: relative;
144                    }
145                    li {
146                    }
147                    div.li {
148                        position: relative;
149                        ::before {
150                            position: absolute;
151                            top: .3em;
152                            content: "";
153                            display: inline-block;
154                            width: 4px;
155                            height: 4px;
156                            background-color: #ccc;
157                            overflow: hidden;
158                            left: 0;
159                        }
160                        padding: .15em 0;
161                    }
162                }
163                > div > ul.toc {
164                    padding: 0;
165                }
166            }
167        }
168    }
169    + .msg-area + a{
170        clear: right;
171        margin-top: 20px;
172    }
173}
174
175