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