{"version":3,"file":"CollapsePanel.css","sources":["webpack:///./CollapsePanel/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$--collapse-panel-arrow-raduis-width: 6px;\n$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),\n  opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;\n\n.collapse-panel {\n  position: relative;\n  height: 100%;\n  z-index: 999;\n}\n\n.collapse-panel__trigger {\n  position: absolute;\n  top: 4px;\n  left: 100%;\n  z-index: 999;\n  width: 24px;\n  height: 44px;\n  line-height: 44px;\n  text-align: center;\n  cursor: pointer;\n  background: #185f91;\n  border-top-right-radius: $--collapse-panel-arrow-raduis-width;\n  border-bottom-right-radius: $--collapse-panel-arrow-raduis-width;\n  box-sizing: border-box;\n  &.right {\n    right: 100%;\n    left: 0;\n    transform: translateX(-100%) rotate(180deg);\n  }\n}\n\n.collapse-panel__arrow {\n  transition: transform 0.3s ease-in-out;\n  &.is-collapse {\n    transform: rotate(180deg);\n  }\n}\n\n.collapse-panel__wrap {\n  display: flex;\n  height: 100%;\n  will-change: width;\n  flex-direction: column;\n  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);\n}\n\n.collapse-panel__header {\n  padding: 10px 20px;\n  border-bottom: 1px solid #10456a;\n}\n\n.collapse-panel__content {\n  flex: 1;\n  overflow: auto;\n  box-shadow: 3px 0 7px 0 rgba(12, 46, 71, 0.15);\n}\n\n// 左移动画\n.collapse-panel__transition-enter-active,\n.collapse-panel__transition-level-active {\n  transition: $--md-fade-transition;\n}\n\n.collapse-panel__transition-enter-to,\n.collapse-panel__transition-leave {\n  opacity: 1;\n  transform: scaleX(1);\n  transform-origin: top left;\n}\n\n.collapse-panel__transition-enter,\n.collapse-panel__transition-leave-to {\n  opacity: 0;\n  transform: scaleX(0);\n}\n// 右移动画\n.collapse-panel__transition_right-enter-active,\n.collapse-panel__transition_right-level-active {\n  transition: $--md-fade-transition;\n}\n\n.collapse-panel__transition_right-enter-to,\n.collapse-panel__transition_right-leave {\n  opacity: 1;\n  transform: scaleX(1);\n  transform-origin: top right;\n}\n\n.collapse-panel__transition_right-enter,\n.collapse-panel__transition_right-leave-to {\n  opacity: 0;\n  transform: scaleX(0);\n}\n"],"mappings":"AAqGA;","sourceRoot":""}