formeo 5.6.0 → 5.7.0

package/dist/formeo.css

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 5.5.0
+Version: 5.6.0
 Author: Draggable https://draggable.io
 */
 
@@ -1853,7 +1853,7 @@ button[class*=-clone]:hover .svg-icon {
   border-bottom-width: 0;
 }
 .formeo.formeo-editor .stage-edit {
-  padding: 16px;
+  padding-block: 16px;
   background-color: var(--formeo-bg);
   margin-top: 0;
   margin-bottom: 16px;
@@ -1861,6 +1861,11 @@ button[class*=-clone]:hover .svg-icon {
 }
 .formeo.formeo-editor .stage-edit .panel-nav {
   border-bottom: 0 none !important;
+  margin-inline: 16px;
+}
+.formeo.formeo-editor .stage-edit .f-panel {
+  box-sizing: border-box;
+  padding-inline: 16px;
 }
 .formeo.formeo-editor .stage-edit .conditions-prop-inputs {
   border-top: 1px solid var(--formeo-border);
@@ -1910,6 +1915,137 @@ button[class*=-clone]:hover .svg-icon {
 .formeo.formeo-editor .formeo-settings {
   display: none;
 }
+.formeo.formeo-editor {
+  /*
+    Mixins
+  */
+}
+.formeo.formeo-editor .formeo-pages-editor {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  inline-size: 73%;
+  min-inline-size: 0;
+}
+@media (max-width: 481px) {
+  .formeo.formeo-editor .formeo-pages-editor {
+    inline-size: calc(100% - 50px);
+  }
+}
+.formeo.formeo-editor .formeo-pages-editor > .formeo-stage {
+  inline-size: auto;
+}
+.formeo.formeo-editor .formeo-pages-editor > .formeo-stage[hidden] {
+  display: none !important;
+}
+.formeo.formeo-editor .formeo-pages-editor[data-page-count="1"] .item-page {
+  display: none;
+}
+.formeo.formeo-editor .formeo-pages-bar {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  margin-block-end: 8px;
+  border-block-end: 1px solid var(--formeo-border);
+  max-width: calc(100% - 32px);
+}
+.formeo.formeo-editor .formeo-page-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  min-inline-size: 0;
+}
+.formeo.formeo-editor .formeo-page-tab-wrap {
+  display: flex;
+  align-items: center;
+  max-inline-size: 16em;
+}
+.formeo.formeo-editor .formeo-page-tab-wrap > :not(.formeo-page-tab, .formeo-page-remove, .formeo-page-title-input) {
+  display: none !important;
+}
+.formeo.formeo-editor .formeo-page-tab-wrap:has(> :not(.formeo-page-tab, .formeo-page-remove, .formeo-page-title-input)) .formeo-page-tab, .formeo.formeo-editor .formeo-page-tab-wrap.formeo-page-tab-flash .formeo-page-tab {
+  background-color: var(--formeo-stage-highlight);
+  color: var(--formeo-stage-highlight-text);
+}
+.formeo.formeo-editor .formeo-page-tab {
+  overflow: hidden;
+  margin-block-end: -1px;
+  padding-block: 8px;
+  padding-inline: 16px;
+  border: 0 none;
+  border-block-end: 2px solid transparent;
+  background: transparent;
+  color: var(--formeo-text-secondary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.formeo.formeo-editor .formeo-page-tab:hover {
+  color: var(--formeo-text-strong);
+}
+.formeo.formeo-editor .formeo-page-tab[aria-selected=true] {
+  border-block-end-color: var(--formeo-stage-outline);
+  color: var(--formeo-text-strong);
+}
+.formeo.formeo-editor .formeo-page-tab:focus-visible {
+  outline: 2px solid var(--formeo-focus);
+  outline-offset: -2px;
+}
+.formeo.formeo-editor .formeo-page-remove {
+  display: inline-flex;
+  visibility: hidden;
+  padding: 0;
+  border: 0 none;
+  background: transparent;
+  color: var(--formeo-text-muted);
+  cursor: pointer;
+}
+.formeo.formeo-editor .formeo-page-remove:hover {
+  background-color: transparent !important;
+  color: var(--formeo-danger);
+}
+.formeo.formeo-editor .formeo-page-remove:hover .svg-icon {
+  fill: var(--formeo-danger);
+}
+.formeo.formeo-editor .formeo-page-remove .svg-icon {
+  inline-size: 1em;
+  block-size: 1em;
+}
+.formeo.formeo-editor .formeo-page-tab-wrap:hover .formeo-page-remove,
+.formeo.formeo-editor .formeo-page-tab-wrap:focus-within .formeo-page-remove,
+.formeo.formeo-editor .formeo-page-tab[aria-selected=true] + .formeo-page-remove {
+  visibility: visible;
+}
+.formeo.formeo-editor .formeo-page-add {
+  flex: none;
+  align-self: center;
+  padding-block: 8px;
+  padding-inline: 8px;
+  border: 0 none;
+  background: transparent;
+  color: var(--formeo-text-secondary);
+  cursor: pointer;
+}
+.formeo.formeo-editor .formeo-page-add:hover {
+  color: var(--formeo-text-strong);
+}
+.formeo.formeo-editor .formeo-page-title-input {
+  inline-size: 12em;
+  margin-block-end: -1px;
+  padding-block: 8px;
+  padding-inline: 8px;
+  border: 1px solid var(--formeo-border-strong);
+  border-radius: 0;
+  background: var(--formeo-bg);
+  color: var(--formeo-text-strong);
+}
+.formeo.formeo-editor .formeo-pages-status {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
 .formeo.formeo-editor [dir=rtl] .f-btn-group {
   display: inline-flex;
   vertical-align: middle;