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