@genexus/genexus-ide-ui 0.0.11 → 0.0.13

package/dist/{node_modules/@genexus/gemini/dist/collection/components/suggest/gxg-suggest.css → collection/components/container/container.css}

@@ -314,171 +314,169 @@ GXG-BUTTON and GXG-BUTTON-GROUP COMMON STYLES
 /*****************************************************
 FORM ELEMENTS
 *****************************************************/
-/*ch-suggest*/
-ch-suggest {
-  font-family: var(--font-family-primary);
-  font-size: var(--font-size-sm);
-  color: var(--color-on-background);
-  /* Track */
-  /* Handle */
-  /* Handle on hover */
-  /* Track */
-  /* Handle */
-  /* Handle on hover */
-  /*window*/
+/*******************************
+HOST / GENERAL
+********************************/
+:host {
+  --gxg-container-elements-spacing: var(--spacing-comp-03);
+  display: block;
 }
-ch-suggest::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+
+/*full-height*/
+:host([full-height]) {
+  height: 100%;
 }
-ch-suggest::-webkit-scrollbar-track {
-  background-color: var(--gray-02);
-  border-radius: 10px;
+:host([full-height]) .container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
 }
-ch-suggest::-webkit-scrollbar-thumb {
-  background: var(--gray-05);
-  border-radius: 10px;
+:host([full-height]) .content {
+  flex-grow: 1;
 }
-ch-suggest::-webkit-scrollbar-thumb:hover {
-  background: var(--gray-04);
-  cursor: pointer;
+
+/*reset fieldset*/
+fieldset {
+  padding: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  border: none;
 }
-ch-suggest .gxg-scroll {
-  display: block;
-  overflow-y: auto;
-  padding-right: 2px;
+
+.heading,
+.content,
+.footer {
+  padding: var(--gxg-container--padding);
 }
-ch-suggest ::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+
+/*PADDING*/
+.container--padding-s {
+  --gxg-container--padding: var(--spacing-comp-02);
 }
-ch-suggest ::-webkit-scrollbar-track {
-  background-color: var(--gray-02);
-  border-radius: 10px;
+
+.container--padding-m {
+  --gxg-container--padding: var(--spacing-comp-03);
 }
-ch-suggest ::-webkit-scrollbar-thumb {
-  background: var(--gray-05);
-  border-radius: 10px;
+
+.container--padding-l {
+  --gxg-container--padding: var(--spacing-comp-04);
 }
-ch-suggest ::-webkit-scrollbar-thumb:hover {
-  background: var(--gray-04);
-  cursor: pointer;
+
+/*BORDERS*/
+.container--display-border {
+  border: 1px solid var(--gx-ide-container-border-color);
 }
-ch-suggest::part(label) {
-  font-weight: 700;
-  margin-bottom: 4px;
+
+.container--display-border-top {
+  border-top: 1px solid var(--gx-ide-container-border-color);
 }
-ch-suggest::part(input) {
-  height: var(--spacing-comp-05);
-  border: var(--border-width-sm) solid var(--gxg-border-color--regular);
-  padding: var(--spacing-comp-01) var(--spacing-comp-02);
+
+.container--display-border-end {
+  border-inline-end: 1px solid var(--gx-ide-container-border-color);
+}
+
+.container--display-border-bottom {
+  border-bottom: 1px solid var(--gx-ide-container-border-color);
+}
+
+.container--display-border-start {
+  border-inline-start: 1px solid var(--gx-ide-container-border-color);
+}
+
+/*******************************
+HEADING
+********************************/
+.heading {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gxg-container--padding);
+  width: 100%;
   box-sizing: border-box;
+  border-bottom: 1px solid var(--gx-ide-container-border-color);
 }
-ch-suggest::part(input):focus {
-  outline-style: solid;
-  outline-color: var(--color-primary-enabled);
-  outline-width: var(--border-width-md);
-  outline-offset: -2px;
-}
-ch-suggest::part(ch-window-window) {
-  /*mixin shadow*/
-  background-color: var(--color-background);
-  margin-top: var(--spacing-comp-01);
-  padding: var(--spacing-comp-02);
-  box-shadow: var(--box-shadow-02);
-  /* Track */
-  /* Handle */
-  /* Handle on hover */
+.heading--no-border {
+  border-bottom: 0;
+}
+.heading--no-padding {
+  padding: 0;
+}
+
+/*******************************
+CONTENT
+********************************/
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gxg-container-elements-spacing);
+  overflow-x: auto;
   /* Track */
   /* Handle */
   /* Handle on hover */
 }
-ch-suggest::part(ch-window-window)::-webkit-scrollbar {
+.content::-webkit-scrollbar {
   width: 6px;
   height: 6px;
 }
-ch-suggest::part(ch-window-window)::-webkit-scrollbar-track {
+.content::-webkit-scrollbar-track {
   background-color: var(--gray-02);
   border-radius: 10px;
 }
-ch-suggest::part(ch-window-window)::-webkit-scrollbar-thumb {
+.content::-webkit-scrollbar-thumb {
   background: var(--gray-05);
   border-radius: 10px;
 }
-ch-suggest::part(ch-window-window)::-webkit-scrollbar-thumb:hover {
+.content::-webkit-scrollbar-thumb:hover {
   background: var(--gray-04);
   cursor: pointer;
 }
-ch-suggest::part(ch-window-window) .gxg-scroll {
+.content .gxg-scroll {
   display: block;
   overflow-y: auto;
   padding-right: 2px;
 }
-ch-suggest::part(ch-window-window) ::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+.content--no-padding {
+  padding: 0;
 }
-ch-suggest::part(ch-window-window) ::-webkit-scrollbar-track {
-  background-color: var(--gray-02);
-  border-radius: 10px;
+.content--no-gap {
+  gap: 0;
 }
-ch-suggest::part(ch-window-window) ::-webkit-scrollbar-thumb {
-  background: var(--gray-05);
-  border-radius: 10px;
+.content--align-items-start {
+  align-items: start;
 }
-ch-suggest::part(ch-window-window) ::-webkit-scrollbar-thumb:hover {
-  background: var(--gray-04);
-  cursor: pointer;
+.content--align-items-center {
+  align-items: center;
 }
-
-/*ch-suggest-list*/
-ch-suggest-list {
-  margin: var(--spacing-comp-01) 0;
-  font-family: inherit;
-  border: var(--border-width-sm) solid var(--gxg-border-color--regular);
+.content--align-items-end {
+  align-items: end;
 }
-ch-suggest-list:first-child {
-  margin-top: 0;
+.content--justify-content-start {
+  justify-content: start;
 }
-ch-suggest-list:last-child {
-  margin-bottom: 0;
+.content--justify-content-center {
+  justify-content: center;
 }
-ch-suggest-list::part(title) {
-  text-transform: uppercase;
-  font-weight: var(--font-weight-semibold);
-  margin: var(--spacing-comp-01) 0 0 0;
-  padding: var(--spacing-comp-01) var(--spacing-comp-02);
+.content--justify-content-end {
+  justify-content: end;
 }
 
-/*ch-suggest-list-item*/
-ch-suggest-list-item {
-  padding: var(--spacing-comp-01) var(--spacing-comp-02);
-  cursor: pointer;
+/*******************************
+FOOTER
+********************************/
+.footer {
   display: flex;
+  gap: var(--gxg-container-elements-spacing);
+  flex-wrap: wrap;
+  justify-content: space-between;
   align-items: center;
+  border-top: 1px solid var(--gx-ide-container-border-color);
 }
-ch-suggest-list-item gxg-icon::part(ch-icon) {
-  --icon-size: 16px;
-  --icon-color: var(--color-on-background);
-  margin-right: 2px;
-}
-ch-suggest-list-item:hover {
-  background-color: var(--gxg-form-item-bgcolor-hover);
-  color: var(--color-on-primary);
-}
-ch-suggest-list-item:hover gxg-icon::part(ch-icon) {
-  --icon-color: var(--color-on-primary);
+.footer__start, .footer__end {
+  display: flex;
+  gap: var(--gxg-container-elements-spacing);
 }
-ch-suggest-list-item:focus, ch-suggest-list-item[selected]:focus {
-  outline-style: solid;
-  outline-color: var(--color-primary-enabled);
-  outline-width: var(--border-width-md);
-  outline-offset: -2px;
+.footer--no-border {
+  border-top: 0;
 }
-
-/*********************************************
-LARGE VERSION (html tag has 'gxg-large' class)
-**********************************************/
-html.gxg-large ch-suggest {
-  font-size: var(--font-size-lg);
+.footer--no-padding {
+  padding: 0;
 }