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 tab-index: -1; 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 .tab-pane { 114 position: absolute; 115 top: 0; 116 display: none; 117 width: 100%; 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