@yoobic/yobi 8.2.0-2 → 8.2.0-22

package/dist/collection/components/form/form-dynamic/form-dynamic.css

@@ -617,9 +617,15 @@ span.fr-img-caption.fr-view {
 :host(.inline-row) .inputs-container .field-placeholder:not(.custom-width) {
   width: 12.5rem;
 }
+:host(.inline-row) .inputs-container .field-placeholder.readonly {
+  width: fit-content;
+}
 :host(.inline-row) .inputs-container .field-placeholder.custom-width {
   width: auto;
 }
+:host(.inline-row) .inputs-container .field-placeholder.custom-width.readonly {
+  margin-left: -0.5rem;
+}
 :host(.inline-row) .inputs-container .field-placeholder.invisible {
   display: none;
 }
@@ -657,6 +663,13 @@ span.fr-img-caption.fr-view {
   width: 12.5rem;
 }
 
+:host(.fill-width:not(.web)) .inputs-container {
+  justify-content: space-between;
+}
+:host(.fill-width:not(.web)) .inputs-container .field-placeholder:not(.custom-width) {
+  width: calc(100% - var(--spacing-96, 6rem));
+}
+
 :host {
   --history-default-width: 11.25rem;
   --inputs-margin: 0 var(--spacing-16, 1rem);
@@ -685,13 +698,14 @@ span.fr-img-caption.fr-view {
   width: 100%;
 }
 :host .no-scroll {
+  height: 100%;
   overflow: hidden;
 }
-:host .field-invalids-banner {
-  background: var(--stable-ultralight, #fafafa);
+:host .no-scroll .field-placeholder.readonly {
+  height: 100%;
 }
-:host .field-invalids-banner yoo-icon[name=cross] {
-  cursor: pointer;
+:host .no-scroll .field-placeholder.readonly yoo-form-input-container {
+  height: 100%;
 }
 :host .field-invalids {
   display: flex;
@@ -764,6 +778,9 @@ span.fr-img-caption.fr-view {
 :host yoo-progress-bar:not(.recap) {
   --progress-value-font-size: var(--font-size-14, 0.875rem);
 }
+:host .form-radio-label {
+  white-space: normal;
+}
 :host .answer-explanation-separator {
   height: 0.0625rem;
   margin: var(--spacing-16, 1rem) 0;
@@ -929,6 +946,7 @@ span.fr-img-caption.fr-view {
 }
 :host yoo-ion-slides yoo-ion-scroll.with-footer {
   bottom: var(--footer-height);
+  min-height: 100%;
 }
 :host yoo-form-recap-step.last {
   margin-bottom: var(--spacing-16, 1rem);
@@ -1132,7 +1150,7 @@ span.fr-img-caption.fr-view {
   font-weight: bold;
   font-size: var(--font-size-16, 1rem);
 }
-:host yoo-collapsible {
+:host yoo-collapsible:not(:first-of-type) {
   margin-top: 1.5rem;
 }
 :host .section-header {
@@ -1472,6 +1490,9 @@ span.fr-img-caption.fr-view {
 :host .history .square .square-content yoo-form-signature-pad {
   --height-image: 1.875rem;
 }
+:host yoo-banner {
+  --close-icon-color: var(--light, #ffffff);
+}
 :host .footer-spacer {
   width: 100%;
   min-height: 1rem;
@@ -1675,6 +1696,17 @@ span.fr-img-caption.fr-view {
   width: 100%;
   max-height: calc(100% - 2rem) !important;
 }
+:host(.lesson-form.web:not(.lesson-live-preview)) form yoo-form-choice-button,
+:host(.lesson-form.web:not(.lesson-live-preview)) form yoo-form-choice-chat,
+:host(.lesson-form.web:not(.lesson-live-preview)) form yoo-form-choice-card,
+:host(.lesson-form.web:not(.lesson-live-preview)) form yoo-form-choice-image,
+:host(.lesson-form.web:not(.lesson-live-preview)) form yoo-form-choice-radio {
+  max-width: 40rem;
+  margin: auto;
+}
+:host(.lesson-form.web:not(.lesson-live-preview)) form yoo-form-videoplayer {
+  height: 33.3333333333vw;
+}
 
 :host(.lesson-form) .progress-container {
   z-index: 2;
@@ -1974,9 +2006,6 @@ span.fr-img-caption.fr-view {
 :host(.web:not(.lesson-detail):not(.lesson-form):not(.lesson-question-result):not(.lesson-live-preview):not(.form-creator-preview):not(.inline):not(.grid-cell):not(.quickview):not(.profile)) .inputs-container .field-placeholder {
   flex: 1 1 100%;
 }
-:host(.web:not(.lesson-detail):not(.lesson-form):not(.lesson-question-result):not(.lesson-live-preview):not(.form-creator-preview):not(.inline):not(.grid-cell):not(.quickview):not(.profile)) .inputs-container yoo-collapsible:not(.subform) {
-  margin-top: var(--spacing-16, 1rem) !important;
-}
 :host(.web:not(.lesson-detail):not(.lesson-form):not(.lesson-question-result):not(.lesson-live-preview):not(.form-creator-preview):not(.inline):not(.grid-cell):not(.quickview):not(.profile)) .web-container {
   width: 100%;
   height: 100%;
@@ -2138,6 +2167,11 @@ span.fr-img-caption.fr-view {
   box-shadow: unset;
 }
 
+:host(.mission-form),
+:host(.workflow-form),
+:host(.kanban-form) {
+  --mission-form-padding: 0 var(--spacing-08, 0.5rem);
+}
 :host(.mission-form) .information *,
 :host(.workflow-form) .information *,
 :host(.kanban-form) .information * {
@@ -2161,7 +2195,7 @@ span.fr-img-caption.fr-view {
 :host(.workflow-form) .inputs-container,
 :host(.kanban-form) .inputs-container {
   box-sizing: border-box;
-  padding: 0 var(--spacing-08, 0.5rem);
+  padding: var(--mission-form-padding);
 }
 
 :host(.form-creator-preview) .field-placeholder yoo-form-input-container {
@@ -2371,10 +2405,6 @@ span.fr-img-caption.fr-view {
   display: none;
 }
 
-:host(:not(.mission-form):not(.lesson-form):not(.inline)) .field-placeholder.last {
-  margin-bottom: var(--spacing-16, 1rem);
-}
-
 :host(.mobile:not(.mission-form):not(.lesson-form):not(.inline)) .field-placeholder:not(.invisible) {
   padding-top: 0.5rem;
 }
@@ -2469,7 +2499,7 @@ span.fr-img-caption.fr-view {
     page-break-inside: auto;
   }
 }
-:host(.readonly) .inputs-container {
+:host(.readonly:not(.inline-row)) .inputs-container {
   padding-top: var(--spacing-08, 0.5rem);
   padding-bottom: var(--spacing-08, 0.5rem);
 }
@@ -2487,4 +2517,87 @@ span.fr-img-caption.fr-view {
 }
 :host(.login-sso) .field-placeholder:not(.invisible):first-of-type {
   padding-top: 0 !important;
+}
+
+:host(.dark-info) .information {
+  color: inherit;
+}
+
+:host(.live-preview-form.mobile:not(.inline):not(.inline-row)) .inputs-container-parent {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  height: 100%;
+  padding-bottom: var(--spacing-64, 4rem);
+  overflow-y: scroll;
+}
+:host(.live-preview-form.mobile:not(.inline):not(.inline-row)) .inputs-container {
+  box-sizing: border-box;
+}
+:host(.live-preview-form.mobile:not(.inline):not(.inline-row)) .toolbar {
+  position: absolute;
+  bottom: 0;
+  box-sizing: border-box;
+  width: 100%;
+  padding-right: var(--spacing-16, 1rem);
+  padding-left: 0;
+}
+
+:host(.web.community-editor) yoo-tabs,
+:host(.community-editor) yoo-tabs {
+  --height-tabs: var(--spacing-48, 3rem);
+  --active-tab-border-color: var(--stable-light, #f1f1f1);
+  --tab-border-color: var(--stable-light, #f1f1f1);
+  --tab-border-width: var(--border-width-01, 0.0625rem);
+  --vertical-tab-gap: 0;
+}
+:host(.web.community-editor) yoo-form-input-container.segment,
+:host(.web.community-editor) yoo-form-input-container.autocomplete,
+:host(.community-editor) yoo-form-input-container.segment,
+:host(.community-editor) yoo-form-input-container.autocomplete {
+  min-width: 15rem;
+  max-width: 50%;
+}
+:host(.web.community-editor) yoo-form-input-container.toggle,
+:host(.community-editor) yoo-form-input-container.toggle {
+  --content-padding-top: 0!important;
+  margin-bottom: 0 !important;
+}
+
+:host(.live-preview-form.web:not(.inline):not(.inline-row):not(.force-mobile)) .main-container {
+  display: flex;
+  flex: initial;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+:host(.live-preview-form.web:not(.inline):not(.inline-row):not(.force-mobile)) .main-container .inputs-container-parent {
+  flex: initial;
+  box-sizing: border-box;
+  margin: var(--spacing-24, 1.5rem);
+  margin-bottom: 0;
+  padding: 0;
+  background: var(--stable-ultralight, #fafafa);
+  border-radius: var(--spacing-08, 0.5rem);
+}
+:host(.live-preview-form.web:not(.inline):not(.inline-row):not(.force-mobile)) .main-container .inputs-container-parent.grid-flex {
+  border-radius: 0px;
+}
+:host(.live-preview-form.web:not(.inline):not(.inline-row):not(.force-mobile)) .main-container .inputs-container {
+  flex: initial;
+  box-sizing: border-box;
+  padding: var(--spacing-16, 1rem);
+  background: var(--stable-ultralight, #fafafa);
+  border-radius: 0px;
+}
+:host(.live-preview-form.web:not(.inline):not(.inline-row):not(.force-mobile)) .main-container .toolbar {
+  margin: var(--spacing-16, 1rem);
+  padding: 0;
+  padding-top: 0;
+  background: var(--stable-ultralight, #fafafa);
+}
+:host(.live-preview-form.web:not(.inline):not(.inline-row):not(.force-mobile)) yoo-tabs {
+  flex-shrink: 0;
+  padding: 0;
 }