1306 } |
1310 } |
1307 &:before { |
1311 &:before { |
1308 border-left: 1px solid #999; |
1312 border-left: 1px solid #999; |
1309 bottom: 50px; |
1313 bottom: 50px; |
1310 height: 100%; |
1314 height: 100%; |
1311 top: -11px; |
1315 top: -5px; |
1312 width: 1px; |
1316 width: 1px; |
1313 -webkit-transition: "border-color 0.1s ease 0.1s"; |
1317 -webkit-transition: "border-color 0.1s ease 0.1s"; |
1314 transition: "border-color 0.1s ease 0.1s"; |
1318 transition: "border-color 0.1s ease 0.1s"; |
1315 } |
1319 } |
1316 &:last-child::before { |
1320 &:last-child::before { |
1317 height: 30px; |
1321 height: 30px; |
1318 } |
1322 } |
1319 &:after { |
1323 &:after { |
1320 border-top: 1px solid #999; |
1324 border-top: 1px solid #999; |
1321 height: 20px; |
1325 height: 20px; |
1322 top: 18px; |
1326 top: 14px; |
1323 width: 25px; |
1327 width: 25px; |
1324 } |
1328 } |
1325 span { |
1329 &:hover { |
|
1330 background: rgba(0, 0, 0, .15); |
|
1331 } |
|
1332 >span { |
1326 border: 1px dotted #999; |
1333 border: 1px dotted #999; |
1327 border-radius: 5px; |
1334 border-radius: 5px; |
1328 display: inline-block; |
1335 display: inline-block; |
1329 padding: 3px 8px; |
1336 padding: 4px 8px; |
1330 text-decoration: none; |
1337 text-decoration: none; |
1331 -webkit-transition: color .2s ease .1s, background-color .2s ease .1s, border-color .3s ease .2s; |
1338 -webkit-transition: color .2s ease .1s, background-color .2s ease .1s, border-color .3s ease .2s; |
1332 transition: color .2s ease .1s, background-color .2s ease .1s, border-color .3s ease .2s; |
1339 transition: color .2s ease .1s, background-color .2s ease .1s, border-color .3s ease .2s; |
|
1340 |
|
1341 >i { |
|
1342 padding-right: 4px; |
|
1343 } |
1333 } |
1344 } |
1334 &.parent_li >span { |
1345 &.parent_li >span { |
|
1346 padding: 7px; |
|
1347 } |
|
1348 >span { |
1335 cursor: pointer; |
1349 cursor: pointer; |
1336 padding: 7px; |
1350 |
1337 |
|
1338 &:hover { |
|
1339 background-color: #DF8505; |
|
1340 border: 1px solid #C67605; |
|
1341 color: #fff; |
|
1342 |
|
1343 + ul li { |
|
1344 &::before { |
|
1345 border-left-color: #F89406; |
|
1346 } |
|
1347 &::after { |
|
1348 border-top-color: #F89406; |
|
1349 } |
|
1350 span { |
|
1351 background: #FDDFB3!important; |
|
1352 border: 1px solid #FAA937; |
|
1353 color: #000; |
|
1354 } |
|
1355 } |
|
1356 } |
|
1357 &:hover, |
1351 &:hover, |
1358 &:hover + ul li span { |
1352 &:hover + ul li >span { |
1359 background: #eee; |
1353 background: #eee; |
1360 border: 1px solid #94a0b4; |
1354 border: 1px solid #94a0b4; |
1361 color: #000; |
1355 color: #000; |
1362 } |
1356 } |
1363 } |
1357 } |
1364 } |
1358 } |
1365 ul { |
1359 ul { |
1366 ul { |
1360 ul { |
1367 padding-left: 34px; |
1361 padding-left: 34px; |
1368 padding-top: 10px; |
1362 padding-top: 5px; |
1369 |
|
1370 li:hover { |
|
1371 background: rgba(0, 0, 0, .015); |
|
1372 } |
|
1373 } |
1363 } |
1374 } |
1364 } |
1375 >ul { |
1365 >ul { |
1376 padding-left: 0; |
1366 padding-left: 0; |
1377 |
1367 |
1378 >li { |
1368 >li { |
1379 :after, |
1369 &:after, |
1380 :before { |
1370 &:before { |
1381 border: 0; |
1371 border: 0; |
1382 } |
1372 } |
1383 } |
1373 } |
1384 } |
1374 } |
1385 } |
1375 } |