@sankhyalabs/sankhyablocks 1.4.0-beta.6 → 1.4.0-beta.8

package/dist/collection/components/snk-form/subcomponents/snk-form-config/snk-form-config.css

@@ -0,0 +1,185 @@
+:host {
+  /* Título */
+  /*@doc Define o estilo da mensagem exibida no título.*/
+  --snk-form-config__title--font-pattern: var(--font-pattern, "'Sora', 'Algerian'");
+  /*@doc Define o peso do título.*/
+  --snk-form-config__title--weight--large: var(--text-weight--large, 600);
+  
+  /*private*/
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  /*public*/
+  z-index: var(--more-visible, 2);
+  background-color: var(--background--xlight); 
+}
+
+.form-config__title {
+  display: flex;
+  margin: 0;
+  line-height: 1.3;
+
+  /*public*/
+  font-family: var(--snk-form-config__title--font-pattern);
+  font-weight: var(--snk-form-config__title--weight--large);
+}
+
+.form-config__header-container {
+  display: flex;
+}
+
+.form-config__field-container {
+  width: 32%;
+  padding: 6px;
+}
+
+.form-config__hide-content {
+  display: none;
+} 
+
+ez-icon .left-icon {
+  --ez-icon--color: var(--text--disable);
+}
+
+.ez-box__label-counter {
+  font-weight: var(--text-weight--extra-small);
+  margin-top: -7px;  
+}
+
+.form-config__btn-options {
+  --ez-button--min-width: 300px;
+  --ez-button--background-color: #FFFFFF;
+}
+
+[data-draggable-parent] {
+  position: relative;
+}
+
+.form-config__field-config--selected {
+  position: static;
+}
+
+.form-config__field-config--dragged .draggable-mirror {
+  z-index: var(--more-visible, 2);
+}
+
+.form-config__config-options {
+  position: relative;
+  margin-top: -3px;
+  min-width: 100%;
+  z-index: 1;
+}
+
+.form-config__tab-container,
+.form-config__fields-available {
+  position: relative;
+  height: 100%;
+  max-height: calc(100vh - 92px);
+}
+
+.form-config__tab-container .ez-box__container,
+.form-config__fields-available .ez-box__container {
+  align-content: flex-start;
+  height: 100%;
+}
+
+.form-config__fields-available [data-draggable-parent] {
+  align-content: flex-start;
+  overflow-y: auto;
+  height: 100%;
+  max-height: calc(100% - 122px);
+}
+
+.form-config__tab-content {
+  align-content: flex-start;
+  overflow-y: auto;
+  height: auto;
+  max-height: calc(100% - 128px);
+}
+
+[data-draggable-element] {
+  cursor: grab;
+}
+
+.form-config__actions-button {
+  --ez-actions-button__btn-action--min-width: 250px;
+}
+
+.form-config__add-group {
+  position: relative;
+  min-height: 120px;
+  margin-bottom: 10px;
+}
+
+.form-config__add-group-container {
+  position: absolute;
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  box-sizing: border-box;
+  border-radius: var(--border--radius-medium, 12px);
+  background-color: var(--background--medium, #d2dce9);
+  padding: var(--space--small, 6px);
+}
+
+.form-config__add-group-content {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  border: 2px dashed var(--color-strokes, #DCE0E8);
+  border-radius: var(--border--radius-small, 6px);
+}
+
+.form-config__add-group-label {
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: var(--space--large, 24px);
+}
+
+.form-config__btn-add-group {
+  position: relative;
+  padding: var(--space--large, 24px) var(--space--medium, 12px) 0;
+}
+
+.form-config__btn-add-group-container {
+  padding: var(--space--medium, 12px);
+  border-radius: var(--border--radius-medium, 12px);
+  border: 2px solid var(--color-strokes, #DCE0E8);
+  background-color: var(--background--body, #fafcff);
+}
+
+.form-config__left-icon--eye-off{
+  padding-top: var(--space--medium, 8px);
+}
+
+ez-collapsible-box.draggable-mirror {
+  display: table;
+  background-color: #FFFFFF;
+}
+
+ez-collapsible-box{
+  margin-bottom: 10px;
+}
+
+@media screen and (min-width: 480px) {
+  .form-config__field-config--selected .ez-flex.form-config__config-options {
+    min-width: calc(300% + 12px);
+  }
+
+  .form-config__field-config--selected:nth-child(3n+2) .ez-flex.form-config__config-options {
+    transform: translate(calc(100% / 3 * -1));
+  }
+  
+  .form-config__field-config--selected:nth-child(3n+3) .ez-flex.form-config__config-options {
+    transform: translate(calc(100% / 3 * -2));
+  }
+}