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