| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | .enable_plugin_nestable_list() when(@enable-plugin-nestable-list = true) { |
| A | 2 | |
| 3 | .dd { | |
| 4 | position: relative; | |
| 5 | display: block; | |
| 6 | margin: 0; padding: 0; | |
| 7 | max-width: 600px; | |
| 8 | list-style: none; | |
| 9 | line-height: 20px; | |
| 10 | } | |
| 11 | .dd-list { | |
| 12 | display: block; | |
| 13 | position: relative; | |
| 14 | margin: 0; padding: 0; list-style: none; | |
| 15 | ||
| 16 | .dd-list { | |
| 17 | padding-left: 30px; | |
| 18 | } | |
| 19 | .dd-collapsed & { | |
| 20 | display: none; | |
| 21 | } | |
| 22 | } | |
| 23 | ||
| 24 | .dd-item, | |
| 25 | .dd-empty, | |
| 26 | .dd-placeholder { | |
| 27 | display: block; | |
| 28 | position: relative; | |
| 29 | margin: 0; | |
| 30 | padding: 0; | |
| 31 | min-height: 20px; | |
| 32 | line-height: 20px; | |
| 33 | } | |
| 34 | ||
| 35 | .dd-handle , .dd2-content { | |
| 36 | display: block; | |
| 37 | min-height: 38px; | |
| 38 | margin: 5px 0; | |
| 39 | padding: 8px 12px; | |
| 40 | ||
| 41 | background: #F8FAFF; | |
| 42 | border: 1px solid #DAE2EA; | |
| 43 | color: #7C9EB2; | |
| 44 | text-decoration: none; | |
| 45 | font-weight: bold; | |
| 46 | ||
| 47 | .box-sizing(border-box); | |
| 48 | ||
| 49 | ||
| 50 | &:hover { | |
| 51 | color: #438EB9; | |
| 52 | background: #F4F6F7; | |
| 53 | border-color:#DCE2E8; | |
| 54 | } | |
| 55 | ||
| 56 | &[class*="btn-"] { | |
| 57 | color:#FFF; | |
| 58 | border:none; | |
| 59 | padding: 9px 12px; | |
| 60 | ||
| 61 | &:hover { | |
| 62 | opacity:0.85; | |
| 63 | color:#FFF; | |
| 64 | } | |
| 65 | } | |
| 66 | } | |
| 67 | .dd2-handle + .dd2-content, | |
| 68 | .dd2-handle + .dd2-content[class*="btn-"] | |
| 69 | { | |
| 70 | padding-left:44px; | |
| 71 | } | |
| 72 | .dd-handle[class*="btn-"]:hover , .dd2-content[class*="btn-"] | |
| 73 | .dd2-handle[class*="btn-"]:hover + .dd2-content[class*="btn-"] { | |
| 74 | //opacity:0.85; | |
| 75 | color:#FFF; | |
| 76 | } | |
| 77 | ||
| 78 | .dd-item > button:hover { | |
| 79 | ~ .dd-handle , ~ .dd2-content { | |
| 80 | color: #438EB9; | |
| 81 | background: #F4F6F7; | |
| 82 | border-color:#DCE2E8; | |
| 83 | } | |
| 84 | ~ .dd-handle[class*="btn-"] , ~ .dd2-content[class*="btn-"] { | |
| 85 | opacity:0.85; | |
| 86 | color:#FFF; | |
| 87 | } | |
| 88 | } | |
| 89 | .dd2-handle:hover { | |
| 90 | ~ .dd2-content { | |
| 91 | color: #438EB9; | |
| 92 | background: #F4F6F7; | |
| 93 | border-color:#DCE2E8; | |
| 94 | } | |
| 95 | ~ .dd2-content[class*="btn-"] { | |
| 96 | opacity:0.85; | |
| 97 | color:#FFF; | |
| 98 | } | |
| 99 | } | |
| 100 | ||
| 101 | ||
| 102 | ||
| 103 | ||
| 104 | ||
| 105 | .dd2-item.dd-item > button { | |
| 106 | margin-left:34px; | |
| 107 | } | |
| 108 | .dd-item > button { | |
| 109 | display: block; | |
| 110 | position: relative; z-index:1; | |
| 111 | cursor: pointer; | |
| 112 | ||
| 113 | float: left; | |
| 114 | width: 25px; | |
| 115 | height: 20px; | |
| 116 | margin: 5px 1px 5px 5px; | |
| 117 | padding: 0; | |
| 118 | ||
| 119 | text-indent: 100%; | |
| 120 | white-space: nowrap; | |
| 121 | overflow: hidden; | |
| 122 | ||
| 123 | border: 0; | |
| 124 | background: transparent; | |
| 125 | font-size: @base-font-size - 1; | |
| 126 | ||
| 127 | line-height: 1; | |
| 128 | text-align: center; | |
| 129 | font-weight: bold; | |
| 130 | ||
| 131 | top:4px; | |
| 132 | left:1px; | |
| 133 | ||
| 134 | color:#707070; | |
| 135 | } | |
| 136 | .dd-item > button:before { | |
| 137 | font-family: FontAwesome; | |
| 138 | content: '\f067'; | |
| 139 | ||
| 140 | display: block; | |
| 141 | position: absolute; | |
| 142 | width: 100%; | |
| 143 | ||
| 144 | text-align: center; | |
| 145 | text-indent: 0; | |
| 146 | ||
| 147 | font-weight: normal; | |
| 148 | font-size: @base-font-size + 1; | |
| 149 | } | |
| 150 | .dd-item > button[data-action="collapse"]:before { | |
| 151 | content: '\f068'; | |
| 152 | } | |
| 153 | .dd-item > button:hover { | |
| 154 | color:#707070; | |
| 155 | } | |
| 156 | .dd-item.dd-colored > button , .dd-item.dd-colored > button:hover { | |
| 157 | color:#EEE; | |
| 158 | } | |
| 159 | ||
| 160 | ||
| 161 | .dd-placeholder, | |
| 162 | .dd-empty { | |
| 163 | margin: 5px 0; | |
| 164 | padding: 0; | |
| 165 | min-height: 30px; | |
| 166 | background: #F0F9FF; | |
| 167 | border: 2px dashed #BED2DB; | |
| 168 | .box-sizing(border-box); | |
| 169 | } | |
| 170 | .dd-empty { | |
| 171 | border-color:#AAA; | |
| 172 | border-style:solid; | |
| 173 | background-color: #e5e5e5; | |
| 174 | } | |
| 175 | ||
| 176 | .dd-dragel { | |
| 177 | position: absolute; | |
| 178 | pointer-events: none; | |
| 179 | z-index: 999; | |
| 180 | opacity:0.8; | |
| 181 | ||
| 182 | > li > .dd-handle { | |
| 183 | color:#4B92BE; | |
| 184 | background:#F1F5FA; | |
| 185 | ||
| 186 | border-color:#D6E1EA; | |
| 187 | //opacity:0.85; | |
| 188 | border-left:2px solid #777; | |
| 189 | ||
| 190 | position:relative; | |
| 191 | ||
| 192 | &[class*="btn-"] { | |
| 193 | color:#FFF; | |
| 194 | } | |
| 195 | } | |
| 196 | } | |
| 197 | .dd-dragel > .dd-item > .dd-handle { | |
| 198 | margin-top: 0; | |
| 199 | } | |
| 200 | ||
| 201 | ||
| 202 | .dd-list > li[class*="item-"] { | |
| 203 | border-width:0;padding:0; | |
| 204 | ||
| 205 | > .dd-handle { | |
| 206 | border-left:2px solid; | |
| 207 | border-left-color:inherit; | |
| 208 | } | |
| 209 | } | |
| 210 | ||
| 211 | .dd-list > li > .dd-handle .sticker { | |
| 212 | position:absolute; | |
| 213 | right:0; | |
| 214 | top:0; | |
| 215 | } | |
| 216 | ||
| 217 | ||
| 218 | ||
| 219 | ||
| 220 | .dd2-handle , .dd-dragel > li > .dd2-handle { | |
| 221 | position:absolute; | |
| 222 | left:0; top:0; | |
| 223 | width:36px; | |
| 224 | margin:0; | |
| 225 | border-width:1px 1px 0 0; | |
| 226 | text-align:center; | |
| 227 | padding:0 !important; | |
| 228 | line-height:38px; | |
| 229 | height:38px; | |
| 230 | ||
| 231 | background: #EBEDF2; | |
| 232 | border: 1px solid #DEE4EA; | |
| 233 | ||
| 234 | cursor: pointer; | |
| 235 | overflow: hidden; | |
| 236 | position: absolute; | |
| 237 | z-index:1; | |
| 238 | } | |
| 239 | .dd2-handle:hover , .dd-dragel > li > .dd2-handle{ | |
| 240 | background:#E3E8ED; | |
| 241 | } | |
| 242 | ||
| 243 | ||
| 244 | ||
| 245 | ||
| 246 | .dd2-content[class*="btn-"] { | |
| 247 | text-shadow:none !important; | |
| 248 | } | |
| 249 | .dd2-handle[class*="btn-"] { | |
| 250 | text-shadow:none !important; | |
| 251 | background:rgba(0,0,0,0.1) !important; | |
| 252 | border-right:1px solid #EEE; | |
| 253 | } | |
| 254 | .dd2-handle[class*="btn-"]:hover { | |
| 255 | background:rgba(0,0,0,0.08) !important; | |
| 256 | } | |
| 257 | .dd-dragel .dd2-handle[class*="btn-"] { | |
| 258 | border-color:transparent; | |
| 259 | border-right-color:#EEE; | |
| 260 | } | |
| 261 | .dd2-handle.btn-yellow { | |
| 262 | text-shadow:none !important; | |
| 263 | background:rgba(0,0,0,0.05) !important; | |
| 264 | border-right:1px solid #FFF; | |
| 265 | } | |
| 266 | .dd2-handle.btn-yellow:hover { | |
| 267 | background:rgba(0,0,0,0.08) !important; | |
| 268 | } | |
| 269 | .dd-dragel .dd2-handle.btn-yellow { | |
| 270 | border-color:transparent; | |
| 271 | border-right-color:#FFF; | |
| 272 | } | |
| 273 | ||
| 274 | ||
| 275 | .dd-item > .dd2-handle .drag-icon { | |
| 276 | display:none; | |
| 277 | } | |
| 278 | .dd-dragel > .dd-item > .dd2-handle .drag-icon { | |
| 279 | display:inline; | |
| 280 | } | |
| 281 | .dd-dragel > .dd-item > .dd2-handle .normal-icon { | |
| 282 | display:none; | |
| 283 | } | |
| 284 | ||
| 285 | ||
| 286 | ||
| 287 | ||
| 288 | } | |
| 289 | ||
| 290 | .enable_plugin_nestable_list(); | |
