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