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