xframelib 1.1.1 → 1.1.2

package/dist/index.css

@@ -1,408 +1 @@
-.splitpanes {
-  display: flex;
-  width: 100%;
-  height: 100%;
-}
-
-.splitpanes--vertical {
-  flex-direction: row;
-}
-
-.splitpanes--horizontal {
-  flex-direction: column;
-}
-
-.splitpanes--dragging * {
-  user-select: none;
-}
-
-.splitpanes__pane {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.splitpanes--vertical .splitpanes__pane {
-  transition: width 0.2s ease-out;
-}
-
-.splitpanes--horizontal .splitpanes__pane {
-  transition: height 0.2s ease-out;
-}
-
-.splitpanes--dragging .splitpanes__pane {
-  transition: none;
-}
-
-.splitpanes__splitter {
-  touch-action: none;
-}
-
-.splitpanes--vertical > .splitpanes__splitter {
-  min-width: 1px;
-  cursor: col-resize;
-}
-
-.splitpanes--horizontal > .splitpanes__splitter {
-  min-height: 1px;
-  cursor: row-resize;
-}
-
-.splitpanes.default-theme .splitpanes__pane {
-  background-color: #f2f2f2;
-}
-
-.splitpanes.default-theme .splitpanes__splitter {
-  background-color: #fff;
-  box-sizing: border-box;
-  position: relative;
-  flex-shrink: 0;
-}
-
-.splitpanes.default-theme .splitpanes__splitter:before, .splitpanes.default-theme .splitpanes__splitter:after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  background-color: rgba(0, 0, 0, 0.15);
-  transition: background-color 0.3s;
-}
-
-.splitpanes.default-theme .splitpanes__splitter:hover:before, .splitpanes.default-theme .splitpanes__splitter:hover:after {
-  background-color: rgba(0, 0, 0, 0.25);
-}
-
-.splitpanes.default-theme .splitpanes__splitter:first-child {
-  cursor: auto;
-}
-
-.default-theme.splitpanes .splitpanes .splitpanes__splitter {
-  z-index: 1;
-}
-
-.default-theme.splitpanes--vertical > .splitpanes__splitter,
-.default-theme .splitpanes--vertical > .splitpanes__splitter {
-  width: 7px;
-  border-left: 1px solid #eee;
-  margin-left: -1px;
-}
-
-.default-theme.splitpanes--vertical > .splitpanes__splitter:before, .default-theme.splitpanes--vertical > .splitpanes__splitter:after,
-.default-theme .splitpanes--vertical > .splitpanes__splitter:before,
-.default-theme .splitpanes--vertical > .splitpanes__splitter:after {
-  transform: translateY(-50%);
-  width: 1px;
-  height: 30px;
-}
-
-.default-theme.splitpanes--vertical > .splitpanes__splitter:before,
-.default-theme .splitpanes--vertical > .splitpanes__splitter:before {
-  margin-left: -2px;
-}
-
-.default-theme.splitpanes--vertical > .splitpanes__splitter:after,
-.default-theme .splitpanes--vertical > .splitpanes__splitter:after {
-  margin-left: 1px;
-}
-
-.default-theme.splitpanes--horizontal > .splitpanes__splitter,
-.default-theme .splitpanes--horizontal > .splitpanes__splitter {
-  height: 7px;
-  border-top: 1px solid #eee;
-  margin-top: -1px;
-}
-
-.default-theme.splitpanes--horizontal > .splitpanes__splitter:before, .default-theme.splitpanes--horizontal > .splitpanes__splitter:after,
-.default-theme .splitpanes--horizontal > .splitpanes__splitter:before,
-.default-theme .splitpanes--horizontal > .splitpanes__splitter:after {
-  transform: translateX(-50%);
-  width: 30px;
-  height: 1px;
-}
-
-.default-theme.splitpanes--horizontal > .splitpanes__splitter:before,
-.default-theme .splitpanes--horizontal > .splitpanes__splitter:before {
-  margin-top: -2px;
-}
-
-.default-theme.splitpanes--horizontal > .splitpanes__splitter:after,
-.default-theme .splitpanes--horizontal > .splitpanes__splitter:after {
-  margin-top: 1px;
-}
-
-.iconify {
-  color: #000;
-}
-
-.paneltitle {
-  display: inline-block;
-  vertical-align: middle;
-  font-size: 16px;
-  font-weight: 600;
-  text-wrap: nowrap;
-  overflow: hidden;
-  margin-left: 5px;
-}
-
-.dragPanelBar {
-  float: right;
-  padding-right: 10px;
-  width: var(--right-bar-width);
-  min-width: 40px;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.dragPanelBar svg:hover {
-  border: 1px solid #333;
-}
-
-.dragWindowPanel {
-  position: absolute;
-  background-color: #ddd;
-  z-index: 10;
-  border-radius: 6px;
-  display: grid;
-  grid-template-rows: min-content auto;
-  user-select: none;
-}
-
-.dragWindowPanel .dragPanelTitle {
-  pointer-events: all;
-  width: 100%;
-  background-color: #eee;
-  border-radius: 5px 5px 0 0;
-  padding-left: 5px;
-  vertical-align: middle;
-  pointer-events: all;
-}
-
-.dragWindowPanel .dragPanelTitle img {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.dragWindowPanel .dragPanelContent {
-  margin-top: 1px;
-  background-color: #eee;
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  padding: 5px 8px;
-}
-
-.drag-pointer-group {
-  pointer-events: none;
-  position: absolute;
-  left: 0;
-  top: 0;
-  z-index: 11;
-  margin: -0.5rem;
-  display: grid;
-  height: calc(100% + 1rem);
-  width: calc(100% + 1rem);
-  grid-template-columns: 1rem auto 1rem;
-  grid-template-rows: 1rem auto 1rem;
-}
-
-.drag-pointer-group > * {
-  pointer-events: all !important;
-}
-
-.maxPanel {
-  top: 0px !important;
-  left: 0px !important;
-  width: 100% !important;
-  height: 100% !important;
-  border-radius: 0px !important;
-}
-
-.dragWindowPanel_dark {
-  background-color: #043351;
-}
-
-.dragWindowPanel_dark .iconify {
-  color: #eee;
-}
-
-.dragWindowPanel_dark .dragPanelTitle {
-  background-color: #043351;
-  color: #eee;
-  pointer-events: all;
-  width: 100%;
-  border-radius: 5px 5px 0 0;
-  padding-left: 5px;
-  vertical-align: middle;
-  pointer-events: all;
-}
-
-.dragWindowPanel_dark .dragPanelTitle img {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.dragWindowPanel_dark .dragPanelContent {
-  background-color: #2f353d;
-  margin-top: 1px;
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  padding: 5px 8px;
-}
-
-.cursor-nw-resize {
-  cursor: nw-resize;
-}
-
-.cursor-n-resize {
-  cursor: n-resize;
-}
-
-.cursor-ne-resize {
-  cursor: ne-resize;
-}
-
-.cursor-w-resize {
-  cursor: w-resize;
-}
-
-.cursor-e-resize {
-  cursor: e-resize;
-}
-
-.cursor-se-resize {
-  cursor: se-resize;
-}
-
-.cursor-sw-resize {
-  cursor: sw-resize;
-}
-
-.cursor-s-resize {
-  cursor: s-resize;
-}
-
-.adivider {
-  width: 100%;
-  margin: 10px 0;
-  display: flex;
-  align-items: center;
-  justify-items: center;
-}
-
-.adivider .line {
-  border: v-bind(lineColor) 1px solid;
-}
-
-.adivider .contentText {
-  background-color: inherit;
-  font-size: 18px;
-}
-
-.layoutContainer {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  --layout-top-height: 70px;
-  --layout-left-width: 200px;
-  --layout-right-width: 200px;
-  --layout-bottom-height: 60px;
-  --layout-top-zindex: 100;
-  --layout-bottom-zindex: 100;
-  --layout-centermain-zindex: 80;
-  --layout-centerback-zindex: 90;
-  --layout-centerfront-zindex: 110;
-  --layout-left-zindex: 100;
-  --layout-right-zindex: 100;
-}
-
-.topContainer {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  height: var(--layout-top-height);
-  z-index: var(--layout-top-zindex);
-  overflow: hidden;
-  pointer-events: none;
-}
-
-.topContainer > * {
-  pointer-events: all !important;
-}
-
-.bottomContainer {
-  position: absolute;
-  bottom: 0px;
-  left: 0px;
-  width: 100%;
-  height: var(--layout-bottom-height);
-  z-index: var(--layout-bottom-zindex);
-  overflow: hidden;
-  pointer-events: none;
-}
-
-.bottomContainer > * {
-  pointer-events: all !important;
-}
-
-.leftContainer {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  bottom: 0;
-  z-index: var(--layout-left-zindex);
-  width: var(--layout-left-width);
-  overflow: hidden;
-  pointer-events: none;
-}
-
-.leftContainer > * {
-  pointer-events: all !important;
-}
-
-.rightContainer {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  bottom: 0;
-  width: var(--layout-right-width);
-  z-index: var(--layout-right-zindex);
-  overflow: hidden;
-  pointer-events: none;
-}
-
-.rightContainer > * {
-  pointer-events: all !important;
-}
-
-.centerdiv {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  background-color: transparent;
-  overflow: hidden;
-  pointer-events: none;
-}
-
-.centerdiv > * {
-  pointer-events: all !important;
-}
-
-.mainContainer {
-  z-index: var(--layout-centermain-zindex);
-}
-
-.backContainer {
-  z-index: var(--layout-centerback-zindex);
-}
-
-.centerFrontContainer {
-  z-index: var(--layout-centerfront-zindex);
-}
+.popover-content-transition-bottom-enter-from,.popover-content-transition-bottom-leave-to{height:500px !important;opacity:0}.popover-content-transition-bottom-enter-active{transition:height .05s ease-in,opacity .05s ease-in}.popover-content-transition-bottom-leave-active{transition:height .05s ease-out,opacity .05s ease-out}.popover-content-transition-left-enter-from{left:-800px}.popover-content-transition-left-leave-to{left:0}.popover-content-transition-left-enter-active{transition:left 1s}.popover-content-transition-left-leave-active{transition:left 1s}.layoutContainer{position:relative;width:100%;height:100%;padding:0;margin:0;--layout-top-height: 70px;--layout-left-width: 200px;--layout-right-width: 200px;--layout-bottom-height: 60px;--layout-top-zindex: 100;--layout-bottom-zindex: 100;--layout-centermain-zindex: 80;--layout-centerback-zindex: 90;--layout-centerfront-zindex: 110;--layout-left-zindex: 100;--layout-right-zindex: 100}.topContainer{position:absolute;top:0px;left:0px;width:100%;height:var(--layout-top-height);z-index:var(--layout-top-zindex);overflow:hidden;pointer-events:none}.topContainer>*{pointer-events:all !important}.bottomContainer{position:absolute;bottom:0px;left:0px;width:100%;height:var(--layout-bottom-height);z-index:var(--layout-bottom-zindex);overflow:hidden;pointer-events:none}.bottomContainer>*{pointer-events:all !important}.leftContainer{position:absolute;top:0px;left:0px;bottom:0;z-index:var(--layout-left-zindex);width:var(--layout-left-width);overflow:hidden;pointer-events:none}.leftContainer>*{pointer-events:all !important}.rightContainer{position:absolute;top:0px;right:0px;bottom:0;width:var(--layout-right-width);z-index:var(--layout-right-zindex);overflow:hidden;pointer-events:none}.rightContainer>*{pointer-events:all !important}.centerdiv{position:absolute;top:0;left:0;bottom:0;width:100%;background-color:rgba(0,0,0,0);overflow:hidden;pointer-events:none}.centerdiv>*{pointer-events:all !important}.mainContainer{z-index:var(--layout-centermain-zindex)}.backContainer{z-index:var(--layout-centerback-zindex)}.centerFrontContainer{z-index:var(--layout-centerfront-zindex)}.adivider{width:100%;margin:10px 0;display:flex;align-items:center;justify-items:center}.adivider .line{border:v-bind(lineColor) 1px solid}.adivider .contentText{background-color:inherit;font-size:18px}.xScreen-container{width:100%;height:100vh}.xScreen-container .xScreen{position:fixed;top:50%;left:50%;z-index:99;display:flex;flex-direction:column;overflow:hidden;transition:all .3s;transform-origin:left top}.scrollSnapContainer{position:relative;height:v-bind(heightStyle);overflow-x:hidden;overflow-y:auto;scroll-behavior:smooth;scroll-snap-type:y mandatory;scroll-snap-stop:always;-webkit-scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch}.scrollSection{position:relative;width:100%;min-height:v-bind(heightStyle);scroll-snap-align:start}.splitpanes{display:flex;width:100%;height:100%}.splitpanes--vertical{flex-direction:row}.splitpanes--horizontal{flex-direction:column}.splitpanes--dragging *{user-select:none}.splitpanes__pane{width:100%;height:100%;overflow:hidden}.splitpanes--vertical .splitpanes__pane{transition:width .2s ease-out}.splitpanes--horizontal .splitpanes__pane{transition:height .2s ease-out}.splitpanes--dragging .splitpanes__pane{transition:none}.splitpanes__splitter{touch-action:none}.splitpanes--vertical>.splitpanes__splitter{min-width:1px;cursor:col-resize}.splitpanes--horizontal>.splitpanes__splitter{min-height:1px;cursor:row-resize}.splitpanes.default-theme .splitpanes__pane{background-color:#f2f2f2}.splitpanes.default-theme .splitpanes__splitter{background-color:#fff;box-sizing:border-box;position:relative;flex-shrink:0}.splitpanes.default-theme .splitpanes__splitter:before,.splitpanes.default-theme .splitpanes__splitter:after{content:"";position:absolute;top:50%;left:50%;background-color:rgba(0,0,0,.15);transition:background-color .3s}.splitpanes.default-theme .splitpanes__splitter:hover:before,.splitpanes.default-theme .splitpanes__splitter:hover:after{background-color:rgba(0,0,0,.25)}.splitpanes.default-theme .splitpanes__splitter:first-child{cursor:auto}.default-theme.splitpanes .splitpanes .splitpanes__splitter{z-index:1}.default-theme.splitpanes--vertical>.splitpanes__splitter,.default-theme .splitpanes--vertical>.splitpanes__splitter{width:7px;border-left:1px solid #eee;margin-left:-1px}.default-theme.splitpanes--vertical>.splitpanes__splitter:before,.default-theme.splitpanes--vertical>.splitpanes__splitter:after,.default-theme .splitpanes--vertical>.splitpanes__splitter:before,.default-theme .splitpanes--vertical>.splitpanes__splitter:after{transform:translateY(-50%);width:1px;height:30px}.default-theme.splitpanes--vertical>.splitpanes__splitter:before,.default-theme .splitpanes--vertical>.splitpanes__splitter:before{margin-left:-2px}.default-theme.splitpanes--vertical>.splitpanes__splitter:after,.default-theme .splitpanes--vertical>.splitpanes__splitter:after{margin-left:1px}.default-theme.splitpanes--horizontal>.splitpanes__splitter,.default-theme .splitpanes--horizontal>.splitpanes__splitter{height:7px;border-top:1px solid #eee;margin-top:-1px}.default-theme.splitpanes--horizontal>.splitpanes__splitter:before,.default-theme.splitpanes--horizontal>.splitpanes__splitter:after,.default-theme .splitpanes--horizontal>.splitpanes__splitter:before,.default-theme .splitpanes--horizontal>.splitpanes__splitter:after{transform:translateX(-50%);width:30px;height:1px}.default-theme.splitpanes--horizontal>.splitpanes__splitter:before,.default-theme .splitpanes--horizontal>.splitpanes__splitter:before{margin-top:-2px}.default-theme.splitpanes--horizontal>.splitpanes__splitter:after,.default-theme .splitpanes--horizontal>.splitpanes__splitter:after{margin-top:1px}.iconify{color:#000}.paneltitle{display:inline-block;vertical-align:middle;font-size:16px;font-weight:600;text-wrap:nowrap;overflow:hidden;margin-left:5px}.dragPanelBar{float:right;padding-right:10px;width:var(--right-bar-width);min-width:40px;height:100%;display:flex;align-items:center;justify-content:space-between}.dragPanelBar svg:hover{border:1px solid #333}.dragWindowPanel{position:absolute;background-color:#ddd;z-index:10;border-radius:6px;display:grid;grid-template-rows:min-content auto;user-select:none}.dragWindowPanel .dragPanelTitle{background-color:#eee;border-radius:5px 5px 0 0;padding-left:5px;vertical-align:middle;pointer-events:all}.dragWindowPanel .dragPanelTitle img{display:inline-block;vertical-align:middle}.dragWindowPanel .dragPanelContent{margin-top:1px;background-color:#eee;height:100%;overflow-x:hidden;overflow-y:auto;padding:5px 8px}.drag-pointer-group{pointer-events:none;position:absolute;left:0;top:0;z-index:11;margin:-0.5rem;display:grid;height:calc(100% + 1rem);width:calc(100% + 1rem);grid-template-columns:1rem auto 1rem;grid-template-rows:1rem auto 1rem}.drag-pointer-group>*{pointer-events:all !important}.maxPanel{top:0px !important;left:0px !important;width:100% !important;height:100% !important;border-radius:0px !important}.dragWindowPanel_dark{background-color:#043351}.dragWindowPanel_dark .iconify{color:#eee}.dragWindowPanel_dark .dragPanelTitle{background-color:#043351;color:#eee;border-radius:5px 5px 0 0;padding-left:5px;vertical-align:middle;pointer-events:all}.dragWindowPanel_dark .dragPanelTitle img{display:inline-block;vertical-align:middle}.dragWindowPanel_dark .dragPanelContent{background-color:#2f353d;margin-top:1px;height:100%;overflow-x:hidden;overflow-y:auto;padding:5px 8px}.cursor-nw-resize{cursor:nw-resize}.cursor-n-resize{cursor:n-resize}.cursor-ne-resize{cursor:ne-resize}.cursor-w-resize{cursor:w-resize}.cursor-e-resize{cursor:e-resize}.cursor-se-resize{cursor:se-resize}.cursor-sw-resize{cursor:sw-resize}.cursor-s-resize{cursor:s-resize}