xref: /template/sprintdoc/css/area_nav-metabox.less (revision 24b8fdfaf2572ec70e180c09c7c055f28e544368) 
1#spr__meta-box {
2    position: relative;
3    z-index: 10;
4    float: right;
5    display: inline-block;
6    max-width: 40%;
7    min-height: @page-header_height;
8    border: 1px solid transparent;
9    margin-top: (@page_padding-top * -1); // reverse padding-top of .page container
10    margin-right: -1px;
11    padding-top: 1rem;
12
13    @media @screen_max-md {
14        position: relative;
15        top: -1.1rem;
16        right: auto;
17        float: none;
18        display: block;
19        max-width: 100%;
20    }
21
22    .tab-container {
23        display: table;
24
25        @media @screen_max-md {
26            display: block;
27            width: 100%;
28        }
29    }
30
31    .box-content {
32        position: relative;
33        height: 0;
34        overflow-y: visible;
35    }
36
37    ul.meta-tabs {
38        list-style: none;
39        line-height: 160%;
40        text-align: right; // right-aligned
41        white-space: nowrap;
42        background-color: @background_page-header;
43        margin: 0;
44        padding: 0;
45
46        @media @screen_max-md {
47            background-color: #fff;
48            margin-top: 3px;
49        }
50
51        &::before,
52        &::after {
53            content: '';
54            clear: both;
55            display: table;
56            box-sizing: border-box;
57        }
58
59        > li:first-child {
60            > a {
61                margin-left: 0;
62            }
63        }
64
65        > li {
66            margin: 0 0 -1px;
67            position: relative;
68            display: inline-block;
69
70            @media @screen_max-md {
71                margin-left: .2rem;
72            }
73
74            > a {
75                cursor: pointer;
76                position: relative;
77                display: block;
78                background-color: @color-site-bg;
79                border: 1px solid @color-border-light;
80                border-bottom-color: @color-site-bg;
81                border-radius: @fix_border-radius @fix_border-radius 0 0;
82                color: @color-nav;
83                font-size: @font-size-small;
84                line-height: 1.42857143;
85                padding: .3em 1rem .1em;
86                margin-left: 4px;
87                transition: @transition color, @transition background-color, @transition border-color;
88
89                @media @screen_max-md {
90                    top: -1px;
91                    padding: .2em .3rem .1em;
92                    margin-left: 0;
93                }
94
95                @media @screen_max-xs {
96                    min-height: 30px;
97                }
98
99                * {
100                    cursor: pointer;
101                    color: inherit;
102                }
103
104                .prefix {
105                    position: relative;
106                    transition: @transition color;
107                    font-size: @font-size-small;
108                }
109
110                &:hover,
111                &:focus,
112                &:active {
113                    background-color: @color-content-bg;
114                    border-color: @color-link;
115                    color: @color-link;
116                    text-decoration: none;
117
118                    .prefix {
119                        color: inherit;
120                    }
121                }
122            }
123
124            &.active {
125                z-index: 1;
126
127                > a {
128                    cursor: default;
129                    background-color: @color-content-bg;
130                    border-color: @color-link;
131                    border-bottom-color: @color-content-bg;
132                    color: @color-link;
133                }
134            }
135        }
136    }
137
138    .meta-content {
139        @media @screen_min-xlg {
140            margin-top: -1px;
141        }
142
143        @media @screen_max-lg {
144            margin-top: -.1rem;
145        }
146
147        @media @screen_max-md {
148            clear: both;
149            margin-top: -2px;
150        }
151
152        @media @screen_max-xs {
153            margin-top: -1px;
154        }
155
156        .tab-pane {
157            position: absolute;
158            top: 0;
159            right: 0;
160            display: none;
161            width: 100%;
162            background-color: @color-content-bg;
163            border: 1px solid @color-link;
164            border-radius: 0 0 @fix_border-radius @fix_border-radius;
165
166            @media @screen_min-xs {
167                min-width: 20em;
168            }
169
170            &::before {
171                content: '';
172                position: absolute;
173                top: -1px;
174                left: 0;
175                z-index: 0;
176                width: 100%;
177                height: 1px;
178                background-color: @color-link;
179            }
180
181            &.active {
182                display: block;
183                overflow: hidden;
184            }
185
186            > div {
187                font-size: @font-size-small;
188                padding: .8rem .5rem .5rem;
189
190                * {
191                    font-size: inherit;
192                }
193
194                p {
195                    padding-left: 1em;
196                }
197
198                ul {
199                    list-style: none;
200                    padding-left: 0;
201
202                    li {
203                        margin-left: 0;
204                        padding-left: 1em;
205                    }
206                }
207            }
208
209            &#spr__tab-tags {
210                > div {
211                    ul {
212                        li {
213                            padding-left: 0;
214                        }
215                    }
216                }
217            }
218
219            #dw__toc {
220                width: auto;
221                float: none;
222                margin: 0;
223                padding: .6rem .5rem .5rem .8rem;
224                background: transparent;
225                border: 0 none;
226
227                h3 {
228                    display: none;
229                }
230
231                > div {
232                    padding: 0;
233                }
234
235                > div ul.toc {
236                    font-size: @font-size-small;
237                    padding-left: .5em;
238
239                    a {
240                        font-size: @font-size-small;
241                        display: inline-block;
242                        padding-left: 10px;
243                        position: relative;
244                    }
245
246                    div.li {
247                        position: relative;
248                        padding: .15em 0;
249
250                        &::before {
251                            position: absolute;
252                            top: .6em;
253                            content: "";
254                            display: inline-block;
255                            width: 4px;
256                            height: 4px;
257                            background-color: #ccc;
258                            overflow: hidden;
259                            left: 0;
260                        }
261                    }
262                }
263
264                > div > ul.toc {
265                    padding: 0;
266                }
267            }
268        }
269    }
270
271    + .msg-area + a {
272        clear: right;
273        margin-top: 20px;
274    }
275}
276