xref: /template/sprintdoc/css/area_nav-metabox.less (revision 71df078ff0b7c21349defd514c9c78b4cf6e4a36) 
1#spr__meta-box {
2    position: relative;
3    z-index: 10;
4    float: right;
5    display: inline-block;
6    max-width: 40%;
7    min-height: @page-header_height;
8    border: 1px solid transparent;
9    margin-top: (@page_padding-top * -1); // reverse padding-top of .page container
10    margin-right: -1px;
11    padding-top: 1rem;
12
13    @media @screen_max-md {
14        position: relative;
15        top: -1.1rem;
16        right: auto;
17        float: none;
18        display: block;
19        max-width: 100%;
20    }
21
22    .tab-container {
23        display: table;
24
25        @media @screen_max-md {
26            display: block;
27            width: 100%;
28        }
29    }
30
31    .box-content {
32        position: relative;
33        height: 0;
34        overflow-y: visible;
35    }
36
37    ul.meta-tabs {
38        list-style: none;
39        line-height: 160%;
40        text-align: right; // right-aligned
41        white-space: nowrap;
42        margin: 0;
43        padding: 0;
44
45        @media @screen_max-md {
46            margin-top: 3px;
47        }
48
49        &::before,
50        &::after {
51            content: '';
52            clear: both;
53            display: table;
54            box-sizing: border-box;
55        }
56
57        > li:first-child {
58            > a {
59                margin-left: 0;
60            }
61        }
62
63        > li {
64            position: relative;
65            display: inline-block;
66            vertical-align: bottom;
67            margin: 0;
68
69            @media @screen_max-md {
70                margin-left: .2rem;
71            }
72
73            > a {
74                cursor: pointer;
75                position: relative;
76                display: block;
77                background-color: @color-site-bg;
78                border: 1px solid @color-border-light;
79                //border-bottom-color: @color-site-bg;
80                border-radius: @fix_border-radius @fix_border-radius 0 0;
81                color: @color-nav;
82                font-size: @font-size-small;
83                line-height: 1.42857143;
84                padding: .3em 1rem .1em;
85                margin-left: 4px;
86                transition: @transition color, @transition background-color, @transition border-color;
87
88                @media @screen_max-xxlg {
89                    padding-top: .35em;
90                }
91
92                @media @screen_max-xlg {
93                    padding-top: .3em;
94                }
95
96                @media @screen_max-md {
97                    top: -1px;
98                    padding: .2em .3rem .1em;
99                    margin-left: 0;
100                }
101
102                @media @screen_max-xs {
103                    min-height: 30px;
104                }
105
106                * {
107                    cursor: pointer;
108                    color: inherit;
109                }
110
111                .prefix {
112                    position: relative;
113                    transition: @transition color;
114                    font-size: @font-size-small;
115                }
116
117                &:hover,
118                &:focus,
119                &:active {
120                    background-color: @color-content-bg;
121                    border-color: @color-link;
122                    color: @color-link;
123                    text-decoration: none;
124
125                    .prefix {
126                        color: inherit;
127                    }
128                }
129            }
130
131            &.active {
132                z-index: 1;
133
134                > a {
135                    cursor: default;
136                    background-color: @color-content-bg;
137                    border-color: @color-link;
138                    border-bottom-color: @color-content-bg;
139                    color: @color-link;
140                }
141            }
142        }
143    }
144
145    .meta-content {
146        @media @screen_min-xlg {
147            margin-top: -1px;
148        }
149
150        @media @screen_max-xlg {
151            margin-top: -1px;
152        }
153
154        @media @screen_max-md {
155            clear: both;
156            margin-top: -2px;
157        }
158
159        .tab-pane {
160            position: absolute;
161            top: 0;
162            right: 0;
163            display: none;
164            width: 100%;
165            background-color: @color-content-bg;
166            border: 1px solid @color-link;
167            border-radius: 0 0 @fix_border-radius @fix_border-radius;
168
169            @media @screen_min-xs {
170                min-width: 20em;
171            }
172
173            &.active {
174                display: block;
175                overflow: hidden;
176            }
177
178            > div {
179                font-size: @font-size-small;
180                padding: .8rem .5rem .5rem;
181
182                * {
183                    font-size: inherit;
184                }
185
186                p {
187                    padding-left: 1em;
188                }
189
190                ul {
191                    list-style: none;
192                    padding-left: 0;
193
194                    li {
195                        margin-left: 0;
196                        padding-left: 1em;
197                    }
198                }
199            }
200
201            &#spr__tab-tags {
202                > div {
203                    ul {
204                        li {
205                            padding-left: 0;
206                        }
207                    }
208                }
209            }
210
211            #dw__toc {
212                width: auto;
213                float: none;
214                margin: 0;
215                padding: .6rem .5rem .5rem .8rem;
216                background: transparent;
217                border: 0 none;
218
219                h3 {
220                    display: none;
221                }
222
223                > div {
224                    padding: 0;
225                }
226
227                > div ul.toc {
228                    font-size: @font-size-small;
229                    padding-left: .5em;
230
231                    a {
232                        font-size: @font-size-small;
233                        display: inline-block;
234                        padding-left: 10px;
235                        position: relative;
236                    }
237
238                    div.li {
239                        position: relative;
240                        padding: .15em 0;
241
242                        &::before {
243                            position: absolute;
244                            top: .6em;
245                            content: "";
246                            display: inline-block;
247                            width: 4px;
248                            height: 4px;
249                            background-color: #ccc;
250                            overflow: hidden;
251                            left: 0;
252                        }
253                    }
254                }
255
256                > div > ul.toc {
257                    padding: 0;
258                }
259            }
260        }
261    }
262
263    + .msg-area + a {
264        clear: right;
265        margin-top: 20px;
266    }
267}
268