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