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