xref: /template/sprintdoc/css/area_nav-metabox.less (revision 4162126bdc4fef1600c76bf5714b3fa139127a5b) 
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-link;
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                    color: inherit;
114                    font-size: @font-size-small;
115                    transition: @transition color;
116                }
117
118                &:hover,
119                &:focus,
120                &:active {
121                    background-color: @color-content-bg;
122                    border-color: @color-link;
123                    text-decoration: none;
124                }
125            }
126
127            &.active {
128                z-index: 1;
129
130                > a {
131                    cursor: default;
132                    background-color: @color-content-bg;
133                    border-color: @color-link;
134                    border-bottom-color: @color-content-bg;
135                    color: @color-link;
136                }
137            }
138        }
139    }
140
141    .meta-content {
142        @media @screen_min-xlg {
143            margin-top: -1px;
144        }
145
146        @media @screen_max-xlg {
147            margin-top: -1px;
148        }
149
150        @media @screen_max-md {
151            clear: both;
152            margin-top: -2px;
153        }
154
155        .tab-pane {
156            position: absolute;
157            top: 0;
158            right: 0;
159            display: none;
160            width: 100%;
161            background-color: @color-content-bg;
162            border: 1px solid @color-link;
163            border-radius: 0 0 @fix_border-radius @fix_border-radius;
164
165            @media @screen_min-xs {
166                min-width: 20em;
167            }
168
169            &.active {
170                display: block;
171                overflow: hidden;
172            }
173
174            > div {
175                font-size: @font-size-small;
176                padding: .8rem .5rem .5rem;
177
178                * {
179                    font-size: inherit;
180                }
181
182                p {
183                    padding-left: 1em;
184                }
185
186                ul {
187                    list-style: none;
188                    padding-left: 0;
189
190                    li {
191                        margin-left: 0;
192                        padding-left: 1em;
193                    }
194                }
195            }
196
197            &#spr__tab-tags {
198                > div {
199                    ul {
200                        li {
201                            padding-left: 0;
202                        }
203                    }
204                }
205            }
206
207            #dw__toc {
208                width: auto;
209                float: none;
210                margin: 0;
211                padding: .6rem .5rem .5rem .8rem;
212                background: transparent;
213                border: 0 none;
214
215                h3 {
216                    display: none;
217                }
218
219                > div {
220                    padding: 0;
221                }
222
223                > div ul.toc {
224                    font-size: @font-size-small;
225                    padding-left: .5em;
226
227                    a {
228                        font-size: @font-size-small;
229                        display: inline-block;
230                        padding-left: 10px;
231                        position: relative;
232                    }
233
234                    div.li {
235                        position: relative;
236                        padding: .15em 0;
237
238                        &::before {
239                            position: absolute;
240                            top: .6em;
241                            content: "";
242                            display: inline-block;
243                            width: 4px;
244                            height: 4px;
245                            background-color: #ccc;
246                            overflow: hidden;
247                            left: 0;
248                        }
249                    }
250                }
251
252                > div > ul.toc {
253                    padding: 0;
254                }
255            }
256        }
257    }
258
259    + .msg-area + a {
260        clear: right;
261        margin-top: 20px;
262    }
263}
264