@sankhyalabs/sankhyablocks 9.0.1-rc.1 → 9.1.0-dev.1

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

@@ -1,242 +1,29 @@
 :host {
-  /*@doc Define o z-index do componente.*/
-  --snk-form-config--z-index: var(--more-visible, 2);
-  /*@doc Define a cor de fundo do componente.*/
-  --snk-form-config--background-color: var(--background--xlight, #fff);
-  /*@doc Define a cor dos icones do componente.*/
-  --snk-form-config__icon--color: var(--text--disable, #AFB6C0);
-  /*@doc Define o peso do texto do label de contagem de campos disponíveis.*/
-  --snk-form-config__label-counter--font-weight: var(--text-weight--extra-small, 200);
-  /*@doc Define o raio da borda externa do bloco para adicionar novo grupo.*/
-  --snk-form-config__add-group-container--border-radius: var(--border--radius-medium, 12px);
-  /*@doc Define a cor de fundo do bloco para adicionar novo grupo.*/
-  --snk-form-config__add-group-container--background-color: var(--background--medium, #d2dce9);
-  /*@doc Define o espaçamento interno do bloco para adicionar novo grupo.*/
-  --snk-form-config__add-group-container--padding: var(--space--small, 6px);
-  /*@doc Define a borda interna do bloco para adicionar novo grupo.*/
-  --snk-form-config__add-group-content--border: 2px dashed var(--color-strokes, #DCE0E8);
-  /*@doc Define o raio da borda interna do bloco para adicionar novo grupo.*/
-  --snk-form-config__add-group-content--border-radius: var(--border--radius-small, 6px);
-  /*@doc Define o espaçamento interno do label do bloco para adicionar novo grupo.*/
-  --snk-form-config__add-group-label--padding: var(--space--large, 24px);
-  /*@doc Define o espaçamento interno da área interna do bloco para adicionar novo grupo.*/
-  --snk-form-config__btn-add-group--padding: var(--space--large, 24px) var(--space--medium, 12px) 0;
-  /*@doc Define o espaçamento interno do botão para adicionar novo grupo.*/
-  --snk-form-config__btn-add-group-container--padding: var(--space--medium, 12px);
-  /*@doc Define o raio da borda do botão para adicionar novo grupo.*/
-  --snk-form-config__btn-add-group-container--border-radius: var(--border--radius-medium, 12px);
-  /*@doc Define a borda do botão para adicionar novo grupo.*/
-  --snk-form-config__btn-add-group-container--border: 2px solid var(--color-strokes, #DCE0E8);
-  /*@doc Define a cor de fundo do botão para adicionar novo grupo.*/
-  --snk-form-config__btn-add-group-container--background-color: var(--background--body, #fafcff);
-
-  /*private*/
   display: flex;
   flex-direction: column;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-
-  /*public*/
-  z-index: var(--snk-form-config--z-index);
-  background-color: var(--snk-form-config--background-color);
-}
-
-div:focus-visible,
-div:focus {
+  height: 100vh;
+  width: 100vw;
+  font-family: var(--font-pattern, "Roboto");
+  background: white;
+  color: #2b3a54;
+  --snk-form-config-container-height: calc(100vh - 95px);
   outline: none;
 }
 
-.form-config__header-container {
-  /*private*/
-  display: flex;
-}
-
-.form-config__field-container {
-  /*private*/
-  width: 32%;
-  padding: 6px;
-}
-
-.form-config__hide-content {
-  /*private*/
-  display: none;
-}
-
-ez-icon .left-icon {
-  /*public*/
-  --ez-icon--color: var(--snk-form-config__icon--color);
-}
-
-.ez-box__label-counter {
-  /*private*/
-  margin-top: -7px;
-
-  /*public*/
-  font-weight: var(--snk-form-config__label-counter--font-weight);
-}
-
-.form-config__btn-options {
-  /*private*/
-  --ez-button--min-width: 300px;
-
-  /*public*/
-  --ez-button--background-color: var(--snk-form-config--background-color);
-}
-
-[data-draggable-parent] {
-  /*private*/
-  position: relative;
-}
-
-.form-config__field-config--selected {
-  /*private*/
-  position: static;
-}
-
-.form-config__field-config--dragged .draggable-mirror {
-  /*public*/
-  z-index: var(--snk-form-config--z-index);
-}
-
-.form-config__config-options {
-  /*private*/
-  position: relative;
-  margin-top: -3px;
-  min-width: 100%;
-  z-index: 1;
-}
-
-.form-config__tab-container,
-.form-config__fields-available {
-  /*private*/
-  position: relative;
-  height: 100%;
-  max-height: calc(100vh - 92px);
-}
-
-.form-config__tab-container .ez-box__container,
-.form-config__fields-available .ez-box__container {
-  /*private*/
-  align-content: flex-start;
-  height: 100%;
-}
-
-.form-config__fields-available [data-draggable-parent] {
-  /*private*/
-  align-content: flex-start;
-  overflow-y: auto;
-  height: 100%;
-  max-height: calc(100% - 122px);
-}
-
-.form-config__tab-content {
-  /*private*/
-  align-content: flex-start;
-  overflow-y: auto;
-  height: auto;
-  max-height: calc(100% - 128px);
-}
-
-[data-draggable-element] {
-  /*private*/
-  cursor: grab;
-}
-
-.form-config__actions-button {
-  /*private*/
-  --ez-actions-button__btn-action--min-width: 235px;
+.sidebarNavigator__container {
+  height: var(--snk-form-config-container-height);
+  gap: 20px;
+  align-items: flex-start;
 }
 
-.form-config__add-group {
-  /*private*/
-  position: relative;
-  min-height: 120px;
-  margin-bottom: 10px;
-}
 
-.form-config__add-group-container {
-  /*private*/
-  position: absolute;
+.guide-header {
   display: flex;
-  flex-wrap: wrap;
   width: 100%;
-  box-sizing: border-box;
-
-  /*public*/
-  border-radius: var(--snk-form-config__add-group-container--border-radius);
-  background-color: var(--snk-form-config__add-group-container--background-color);
-  padding: var(--snk-form-config__add-group-container--padding);
-}
-
-.form-config__add-group-content {
-  /*private*/
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-  box-sizing: border-box;
-
-  /*public*/
-  border: var(--snk-form-config__add-group-content--border);
-  border-radius: var(--snk-form-config__add-group-content--border-radius);
+  padding-bottom: 12px;
+  border-bottom: 1px solid #dce0e8; /*Usar token*/
+  height: 30px;
+  font-weight: 500;
+  font-size: 16px;
 }
 
-.form-config__add-group-label {
-  /*private*/
-  display: flex;
-  justify-content: center;
-  box-sizing: border-box;
-
-  /*public*/
-  padding: var(--snk-form-config__add-group-label--padding);
-}
-
-.form-config__btn-add-group {
-  /*private*/
-  position: relative;
-
-  /*public*/
-  padding: var(--snk-form-config__btn-add-group--padding);
-}
-
-.form-config__btn-add-group-container {
-  /*public*/
-  padding: var(--snk-form-config__btn-add-group-container--padding);
-  border-radius: var(--snk-form-config__btn-add-group-container--border-radius);
-  border: var(--snk-form-config__btn-add-group-container--border);
-  background-color: var(--snk-form-config__btn-add-group-container--background-color);
-}
-
-ez-collapsible-box.draggable-mirror {
-  /*private*/
-  display: table;
-
-  /*public*/
-  background-color: var(--snk-form-config--background-color);
-}
-
-ez-collapsible-box{
-  /*private*/
-  margin-bottom: 10px;
-}
-
-@media screen and (min-width: 480px) {
-  .form-config__field-config--selected .ez-flex.form-config__config-options {
-    /*private*/
-    min-width: calc(300% + 12px);
-  }
-
-  .form-config__field-config--selected:nth-child(3n+2) .ez-flex.form-config__config-options {
-    /*private*/
-    left: calc(100% / 1 * -1);
-  }
-
-  .form-config__field-config--selected:nth-child(3n+3) .ez-flex.form-config__config-options {
-    /*private*/
-    left: calc(100% / 1 * -2);
-  }
-}