@sankhyalabs/sankhyablocks 10.1.0-dev.52 → 10.1.0-dev.54

package/dist/collection/components/snk-dynaform/subcomponents/snk-dynaform-guides-view/snk-dynaform-guides-view.css

@@ -0,0 +1,98 @@
+:host {
+    /*@doc Define o espaçamento maior utilizado no componente.*/
+    --snk-guides-viewer--space-large: var(--space--large, 24px);
+    /*@doc Define o espaçamento médio utilizado no componente.*/
+    --snk-guides-viewer--space-small: var(--space--2xs, 8px);
+    /*@doc Define a altura mínima do cabeçalho do componente.*/
+    --snk-guides-viewer__header--min-height: 68px;
+    /*@doc Define a posição de z-index do cabeçalho do componente.*/
+    --snk-guides-viewer__header--z-index: var(--more-visible, 2);
+    /*@doc Define a cor de fundo do cabeçalho do componente.*/
+    --snk-guides-viewer__header--background-color: var(--background--body, #fafcff);
+
+    /*private*/
+    display: block;
+    height: 100%;
+    min-width: 0;
+    overflow-x: hidden;
+}
+
+snk-dynaform-form-view {
+    width: 100%;
+}
+
+.snk-guides-viewer {
+    /*private*/
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+
+    /*public*/
+    padding: 0px;
+}
+
+.snk-guides-viewer__detail-container {
+    display: flex;
+    row-gap: 24px;
+    flex-direction: column;
+    flex: 1;
+    max-height: none;
+    min-height: 0;
+    overflow: hidden;
+    margin-bottom: var(--space--12, 12px);
+}
+
+.snk-guides-viewer__container > snk-dynaform-form-view {
+    max-height: 300px;
+    min-height: 0;
+    overflow-y: auto;
+}
+
+.snk-guides-viewer__detail-container > snk-dynaform-form-view,
+.snk-guides-viewer__detail-container > snk-dynaform-detail-view {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+}
+
+.snk-guides-viewer__header {
+    /*private*/
+    position: sticky;
+    align-items: center;
+    top: 0;
+
+    /*public*/
+    z-index: var(--snk-guides-viewer__header--z-index);
+    background-color: var(--snk-guides-viewer__header--background-color);
+    padding: var(--snk-guides-viewer--space-small);
+}
+
+.snk-guides-viewer__header-breadcrumb {
+    width: 25%;
+    display: flex;
+}
+
+.snk-guides-viewer__header-taskbar {
+    width: 75%;
+}
+
+.snk-guides-viewer__container {
+    /*private*/
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.snk-guides-viewer__tabselector {
+    /*private*/
+    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+    padding: 0 var(--space--12, 12px);
+    flex-shrink: 0;
+}