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