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