@genexus/genexus-ide-ui 1.0.1 → 1.0.2

package/dist/collection/components/start-page/start-page.css

@@ -318,6 +318,106 @@ FORM ELEMENTS
 /* hiChar styles
 Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
 */
+.button-primary-destructive {
+  --control__border-color: var(--button-primary__border-color--destructive);
+  background-color: var(--button-primary__bg-color--destructive);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:hover {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-hover
+  );
+  background-color: var(--button-primary__bg-color--destructive-hover);
+  color: var(--button-primary__color--destructive);
+}
+.button-primary-destructive:active {
+  --control__border-color: var(
+    --button-primary__bg-color--destructive-active
+  );
+  background-color: var(--button-primary__bg-color--destructive-active);
+  color: var(--button-primary__color--destructive);
+}
+
+.button-secondary-destructive {
+  --control__border-color: var(--button-secondary__border-color--destructive);
+  background-color: var(--button-secondary__bg-color--destructive);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:hover {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-hover
+  );
+  background-color: var(--button-secondary__bg-color--destructive-hover);
+  color: var(--button-secondary__color--destructive);
+}
+.button-secondary-destructive:active {
+  --control__border-color: var(
+    --button-secondary__bg-color--destructive-active
+  );
+  background-color: var(--button-secondary__bg-color--destructive-active);
+  color: var(--button-secondary__color--destructive);
+}
+
+/* - - - - - - - - - - - - - - - - -
+New classes for Chameleon + Mercury
+- - - - - - - - - - - - - - - - - */
+:host {
+  display: grid;
+  block-size: 100%;
+}
+
+.card-regular {
+  background-color: var(--mer-surface__elevation--01);
+  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
+  border-radius: var(--mer-border__radius--md);
+  padding: var(--mer-spacing--md) var(--mer-spacing--md);
+  display: grid;
+}
+
+.card-small {
+  background-color: var(--mer-surface__elevation--02);
+  border-radius: var(--mer-border__radius--sm);
+  padding: var(--mer-spacing--sm) var(--mer-spacing--sm);
+}
+.card-small--actionable:hover {
+  background-color: var(--mer-color__neutral-gray--600);
+}
+.card-small--actionable:active {
+  background-color: var(--mer-color__neutral-gray--650);
+}
+.card-small:focus-visible {
+  outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color);
+  outline-offset: var(--focus__outline-offset);
+}
+
+.empty-state {
+  block-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: var(--mer-spacing--sm);
+  text-align: center;
+}
+.empty-state__title, .empty-state__button, .empty-state__link {
+  max-inline-size: 300px;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-1 {
+  opacity: 1;
+}
+
+.display-contents {
+  display: contents;
+}
+
+/* - - - - - - - - - - - - - - - - - - - 
+Old classes (Gemini) to be removed soon
+- - - - - - - - - - - - - - - - - - - */
 /* Helper Classes */
 .gxi-hidden {
   display: none !important;
@@ -509,58 +609,115 @@ p {
   font-size: var(--mer-font__size--xxs);
 }
 
+/* - - - - - - - - - - - - - - - - - -
+New : For Mercury
+- - - - - - - - - - - - - - - - - - */
+.buttons-container {
+  display: flex;
+  gap: var(--mer-spacing--xs);
+}
+
 /*Gx Ide*/
 /*@container queries*/
 /* hiChar styles
 Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
 */
-:host {
-  display: block;
-  box-shadow: none;
-  height: 100%;
-  overflow: auto;
-  opacity: 0;
-  transition: var(--gx-ide-show-component-delay) opacity;
+.hiChar {
+  color: var(--mer-color__primary-blue--200);
+  filter: brightness(1.3);
 }
 
-:host(.rendered) {
-  opacity: 1;
+:host {
+  overflow: auto;
+  container-type: inline-size;
+  container-name: host;
 }
 
-gxg-tabs {
-  background-color: transparent;
-  box-shadow: none;
-  height: 100% !important;
+.layout-main,
+.layout__panel {
+  block-size: 100%;
   overflow: auto;
 }
 
-.kbs-empty-state {
-  height: 100%;
+@container host (max-width: 768px) {
+  .layout.layout-main {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
+  }
+}
+.panel-recent-kbs {
+  position: relative;
 }
 
-.layout {
-  height: 100%;
+.recent-kbs,
+.recent-news {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  gap: var(--mer-spacing--md);
   overflow: auto;
 }
-.layout gxg-card {
-  height: 100%;
+.recent-kbs__header,
+.recent-news__header {
+  display: grid;
+  gap: var(--mer-spacing--md);
+}
+
+.kbs-container {
+  display: grid;
+  gap: var(--mer-spacing--xs);
   overflow: auto;
+  grid-auto-rows: max-content;
+  container-type: inline-size;
+  container-name: kb-container;
+  animation: fadeIn var(--mer-timing--super-fast) forwards linear;
 }
 
-.kbs-container,
-.news-container {
+.card-kb {
   display: flex;
-  flex-direction: column;
-  gap: var(--gx-ide-articles-gap);
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--mer-spacing--lg);
+  container-type: inline-size;
+  container-name: card-kb;
+}
+.card-kb__left-col {
+  display: flex;
+  align-items: center;
+  gap: var(--mer-spacing--sm);
 }
 
-.news-container p:first-child {
-  margin-top: 0;
+@container kb-container (max-width: 360px) {
+  .card-kb {
+    align-items: center;
+    flex-direction: column;
+    gap: var(--mer-spacing--xs);
+    justify-content: start;
+  }
 }
-.news-container p:last-child {
-  margin-bottom: 0;
+gx-ide-recent-news {
+  overflow: auto;
+}
+
+.panel-recent-news {
+  position: relative;
+}
+
+@keyframes exactMatchBright {
+  100% {
+    filter: brightness(1.25);
+  }
+}
+.exact-match-bright {
+  animation: exactMatchBright var(--mer-timing--super-fast) ease-in-out 4 alternate;
+}
+
+gx-ide-loader::part(loader-wrapper) {
+  border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);
+  border-radius: var(--mer-border__radius--md);
 }
 
-gxg-card.section {
-  border-bottom: 2px solid var(--gray-00);
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
 }