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