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