{"version":3,"file":"MutableList.css","sources":["webpack:///./MutableList/index.vue"],"sourcesContent":["@import 'web-lib-styles/src/variables/index.scss';\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.mutable-list {\n  display: flex;\n  list-style-type: none;\n  flex-direction: column;\n  &.is-tag {\n    display: inline-flex;\n    flex-direction: row;\n    .mutable-list-item + .mutable-list-item {\n      margin: 0;\n      margin-left: 10px;\n    }\n  }\n\n  &.is-sort {\n    .mutable-list-item {\n      cursor: move;\n    }\n  }\n\n  &-enter,\n  &-leave-to {\n    opacity: 0;\n    transform: translate3d(0, 30, 0);\n  }\n  &-enter.is-tag,\n  &-leave-to.is-tag {\n    opacity: 0;\n    transform: translate3d(30, 0, 0);\n  }\n\n  &-enter-active,\n  &-leave-active {\n    transition: all 0.5s ease-in-out;\n  }\n\n  &-move {\n    transition: transform 0.5s;\n  }\n}\n\n// 拖拽的幽灵节点\n.ghost {\n  opacity: 0.5;\n}\n\n.mutable-list-item,\n.buttons {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.mutable-list-item + .mutable-list-item {\n  margin-top: 16px;\n}\n\n.buttons {\n  min-width: 80px; // 避免按钮移除抖动\n  margin-left: 20px;\n}\n\n.button-plus,\n.button-minus {\n  display: inline-block;\n  width: 16px;\n  height: 16px;\n  padding: 4px;\n  vertical-align: middle;\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: cover;\n  background-origin: content-box;\n  box-sizing: content-box;\n}\n\n.button-plus {\n  background-image: url('./images/icon-plus.png');\n}\n\n.button-minus {\n  background-image: url('./images/icon-minus.png');\n}\n\n.tag {\n  cursor: pointer;\n}\n"],"mappings":"AA0XA;","sourceRoot":""}