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