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