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