xref: /template/sprintdoc/css/area_nav-metabox.less (revision 18e52693eb411617e2df76dceb0632c38a3cadb7) 
1/**
2 * This file provides the design styles for the metatabbox
3 */
4
5#spr__meta-box {
6    .display-flex();
7    .flex-direction();
8    .justify-content(flex-end);
9
10    position: relative;
11    float: right;
12    max-width: 40%;
13    margin-top: -(@page_padding-top); // reverse padding-top of .page container
14    margin-right: -1px;
15
16    // >= 1024
17    @media @screen_min-md {
18        height: @page-header_height;
19        border: 1px solid transparent;
20    }
21
22    // < 1024
23    @media @screen_max-md {
24        position: relative;
25        top: .2rem;
26        right: auto;
27        float: none;
28        max-width: 100%;
29        min-height: @page-header_height;
30        height: auto;
31        border: 0 none;
32    }
33
34    &.sticky {
35        position: fixed;
36        top: 0;
37        width: calc(100% - 13em);
38
39        ul.meta-tabs > li > a {
40            border-top-color: @ini_background_site;
41            border-bottom-color: @noopentasks-border;
42            border-radius: 0 0 @ini_default_border_radius @ini_default_border_radius;
43
44        }
45
46        .meta-content .tab-pane.active {
47            max-height: 80vh;
48            overflow: auto;
49        }
50    }
51
52    + .msg-area + a {
53        clear: right;
54        margin-top: 20px;
55    }
56
57    .tab-container {
58        display: table;
59
60        @media @screen_max-md {
61            display: block;
62            width: 100%;
63        }
64    }
65
66    .box-content {
67        position: relative;
68        height: 0;
69        overflow-y: visible;
70    }
71
72
73    /* + + + + +  tab controls  + + + + + */
74    ul.meta-tabs {
75        list-style: none;
76        line-height: 160%;
77        margin: 0;
78        padding: 0;
79
80        @media @screen_min-md {
81            white-space: nowrap;
82            text-align: right;
83        }
84
85        &::before,
86        &::after {
87            content: '';
88            clear: both;
89            display: table;
90            box-sizing: border-box;
91        }
92
93        > li:first-child {
94            > a {
95                margin-left: 0;
96            }
97        }
98
99        > li {
100            position: relative;
101            display: inline-block;
102            vertical-align: bottom;
103            margin: 0;
104
105            @media @screen_min-md {
106                margin-left: .3rem;
107            }
108
109            @media @screen_max-md {
110                margin-right: .4rem;
111                margin-bottom: .2rem;
112            }
113
114            > a {
115                cursor: pointer;
116                position: relative;
117                display: block;
118                font-size: @font-size-small;
119                transition: @transition background-color, @transition border-color, @transition color;
120
121                @media @screen_min-md {
122                    background-color: @ini_background_site;
123                    border: 1px solid @noopentasks-border;
124                    border-bottom-color: @ini_background_site;
125                    border-radius: @ini_default_border_radius @ini_default_border_radius 0 0; // @ini_default_border_radius vs. @fix_border-radius
126                    color: @ini_nav_menu_color;
127                    margin-left: 4px;
128                    padding: .3em 1rem .1em;
129                }
130
131                @media @screen_max-md {
132                    background-color: @ini_background;
133                    top: 0;
134                    border: 1px solid @ini_existing;
135                    color: @ini_existing;
136                    margin-top: .2rem;
137                    margin-left: 0;
138                    padding: .2em .3rem;
139                }
140
141                * {
142                    cursor: pointer;
143                    color: inherit;
144                    font-size: inherit;
145                }
146
147                .prefix {
148                    position: relative;
149                    color: inherit;
150                    font-size: @font-size-small;
151                }
152
153                &:hover,
154                &:focus,
155                &:active {
156                    text-decoration: none;
157
158                    @media @screen_min-md {
159                        background-color: @ini_background;
160                        border-color: @ini_existing;
161                        color: @ini_existing;
162                    }
163
164                    @media @screen_max-md {
165                        background-color: @ini_existing;
166                        border-color: @ini_background;
167                        color: @ini_background;
168                    }
169                }
170            }
171
172            &.active {
173                > a {
174                    cursor: default;
175                    background-color: @ini_background;
176                    border-color: @ini_existing;
177                    border-bottom-color: @ini_background;
178                    color: @ini_existing;
179
180                    @media @screen_max-md {
181                        background-color: @ini_existing;
182                        border-bottom-color: @ini_existing;
183                        border-radius: 0;
184                        color: @ini_background;
185                    }
186                }
187            }
188        }
189    }
190
191    /* + + + + +  toggle content  + + + + + */
192    .meta-content {
193        margin-top: -1px;
194
195        @media @screen_max-md {
196            clear: both;
197            margin-top: 2px;
198        }
199
200        .tab-pane {
201            position: absolute;
202            top: 0;
203            right: 0;
204            display: none;
205            width: 100%;
206            background-color: @ini_background;
207            border: 1px solid @ini_existing;
208
209            @media @screen_min-xs {
210                min-width: 20em;
211            }
212
213            @media @screen_min-md {
214                border-radius: 0 0 @fix_border-radius @fix_border-radius; // @ini_default_border_radius vs. @fix_border-radius
215            }
216
217            &.active {
218                display: block;
219            }
220
221            a {
222                color: @ini_existing;
223            }
224
225            > div {
226                font-size: @font-size-small;
227                padding: .8rem .5rem .5rem;
228
229                * {
230                    font-size: inherit;
231                }
232
233                p {
234                    padding-left: 1em;
235                }
236
237                ul {
238                    list-style: none;
239                    padding-left: 0;
240                }
241
242                li {
243                    list-style-image: none; // overwrite universally styles
244                    margin-left: 0;
245                    padding-left: 1em;
246                }
247            }
248
249            &#spr__tab-tags {
250                > div {
251                    ul {
252                        li {
253                            padding-left: 0;
254                        }
255                    }
256                }
257            }
258
259            #dw__toc {
260                width: auto;
261                float: none;
262                margin: 0;
263                padding: .6rem .5rem .5rem .8rem;
264                background: transparent;
265                border: 0 none;
266
267                h3 {
268                    display: none;
269                }
270
271                > div {
272                    padding: 0;
273                }
274
275                > div ul.toc {
276                    font-size: @font-size-small;
277                    padding-left: .5em;
278
279                    a {
280                        font-size: @font-size-small;
281                        display: inline-block;
282                        padding-left: 10px;
283                        position: relative;
284                    }
285
286                    div.li {
287                        position: relative;
288                        padding: .15em 0;
289
290                        &::before {
291                            content: '';
292                            position: absolute;
293                            top: .6em;
294                            left: 0;
295                            display: inline-block;
296                            width: 4px;
297                            height: 4px;
298                            overflow: hidden;
299                            background-color: @ini_existing;
300                        }
301                    }
302                }
303
304                > div > ul.toc {
305                    padding: 0;
306                }
307            }
308        }
309    }
310
311    /* + + + + +  tab issues  + + + + + */
312    #spr__tab-issues {
313        ul.mmissuelist {
314            padding-left: 0;
315            margin-top: 1rem;
316
317            li {
318                &.noissue {
319                    font-size: @font-size-small;
320                    list-style-type: none;
321                    margin-left: 0;
322
323                    .li {
324                        font-size: @font-size-small;
325                        margin-left: .5rem;
326                    }
327                }
328
329                a {
330                    display: inline-block;
331                }
332            }
333
334            img {
335                vertical-align: bottom;
336                margin-right: .3rem;
337            }
338
339            .mm__status {
340                padding-left: .3rem;
341                padding-right: .3rem;
342            }
343
344            form {
345                vertical-align: text-top;
346            }
347        }
348    }
349
350    /* + + + + +  tab issues  + + + + + */
351    /* see plugins/magic-matcher.less   */
352    #spr__tab-issues {
353        ul.mmissuelist {
354            padding-left: 0;
355            margin-top: .5rem;
356            margin-bottom: .6rem;
357
358            li {
359                list-style-type: none;
360                margin-top: .3rem;
361                margin-left: .5rem;
362
363                &.noissue {
364                    list-style-type: none;
365                    margin-left: 0;
366                }
367            }
368
369            a {
370                display: inline-block;
371                font-size: @font-size-small;
372
373                * {
374                    font-size: inherit;
375                }
376            }
377
378            img {
379                vertical-align: bottom;
380                margin-right: .3rem;
381            }
382
383            .mm__status {
384                display: inline-block;
385                text-decoration: none;
386                padding-left: .3rem;
387                padding-right: .3rem;
388            }
389
390            form {
391                vertical-align: text-top;
392
393                button {
394                    background: @ini_button_background;
395                    border-color: @ini_button_background;
396                    color: @ini_button_color;
397                    font-size: @font-size-small;
398                    padding: .2em .3em;
399
400                    &[name="removeIssue"] {
401                        min-width: 20px;
402                        font-size: .94rem;
403                        font-weight: bold;
404                        line-height: 95%;
405                        text-align: center;
406                        padding: 0 .1rem .1rem;
407                        margin-left: .5rem;
408                    }
409
410                    &:hover,
411                    &:focus,
412                    &:active {
413                        background: @ini_button_color;
414                        color: @ini_button_background;
415                    }
416                }
417            }
418        }
419    }
420}
421