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