xref: /template/sprintdoc/css/area_nav-metabox.less (revision 9622faa4391bb275d574901e5fc137cc1fad13ed) 
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                }
127
128                .prefix {
129                    position: relative;
130                    color: inherit;
131                    font-size: @font-size-small;
132                }
133
134                &:hover,
135                &:focus,
136                &:active {
137                    text-decoration: none;
138
139                    @media @screen_min-md {
140                        background-color: @ini_background_content;
141                        border-color: @ini_existing;
142                        color: @ini_existing;
143                    }
144
145                    @media @screen_max-md {
146                        background-color: @ini_existing;
147                        border-color: @ini_background_content;
148                        color: @ini_background_content;
149                    }
150                }
151            }
152
153            &.active {
154                z-index: 1;
155
156                > a {
157                    cursor: default;
158                    background-color: @ini_background_content;
159                    border-color: @ini_existing;
160                    border-bottom-color: @ini_background_content;
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_content;
168                    }
169                }
170            }
171        }
172    }
173
174
175/* + + + + +  toggle content  + + + + + */
176    .meta-content {
177        margin-top: -1px;
178
179        @media @screen_max-md {
180            clear: both;
181            margin-top: 2px;
182        }
183
184        .tab-pane {
185            position: absolute;
186            top: 0;
187            right: 0;
188            display: none;
189            width: 100%;
190            background-color: @ini_background_content;
191            border: 1px solid @ini_existing;
192
193            @media @screen_min-xs {
194                min-width: 20em;
195            }
196
197            @media @screen_min-md {
198                border-radius: 0 0 @fix_border-radius @fix_border-radius; // @ini_default_border_radius vs. @fix_border-radius
199            }
200
201            &.active {
202                display: block;
203                overflow: hidden;
204            }
205
206            a {
207                color: @ini_existing;
208            }
209
210            > div {
211                font-size: @font-size-small;
212                padding: .8rem .5rem .5rem;
213
214                * {
215                    font-size: inherit;
216                }
217
218                p {
219                    padding-left: 1em;
220                }
221
222                ul {
223                    list-style: none;
224                    padding-left: 0;
225
226                    li {
227                        margin-left: 0;
228                        padding-left: 1em;
229                    }
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    + .msg-area + a {
296        clear: right;
297        margin-top: 20px;
298    }
299}
300