@genexus/genexus-ide-ui 0.0.40 → 0.0.42

package/dist/collection/components/ww-images/ww-images.css

@@ -0,0 +1,229 @@
+/*Gemini*/
+/*Gx Ide*/
+/* Helper Classes */
+.gxi-hidden {
+  display: none !important;
+}
+
+.gxi-full-height {
+  height: 100%;
+}
+
+.align-start {
+  display: flex;
+  align-items: start;
+}
+
+.align-center {
+  display: flex;
+  align-items: center;
+}
+
+.align-end {
+  display: flex;
+  align-items: end;
+}
+
+/* Grids */
+.grid {
+  display: grid;
+  grid-row-gap: var(--gx-ide-grid-row-gap);
+  grid-column-gap: var(--gx-ide-grid-column-gap);
+  grid-template-rows: auto;
+}
+
+ch-grid-cell {
+  display: flex;
+}
+
+/*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
+:host(.gx-ide-component) {
+  box-shadow: var(--box-shadow-01) !important;
+  height: 100% !important;
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+/*stylize the top bar*/
+:host(:focus-within) gx-ide-top-bar::part(wrapper) {
+  background-color: var(--color-secondary-enabled);
+}
+
+/* Main wrapper (should be the first element inside the host. Everything should be inside .gx-ide-main-wrapper) */
+.gx-ide-main-wrapper {
+  color: var(--gx-ide-component-text-color);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-lg);
+  line-height: 1.6em;
+  height: 100%;
+  background-color: var(--gx-ide-component-background-color);
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+/*This is the main element. This is the one that take the remaining vertical space*/
+.gx-ide-main {
+  flex-grow: 1;
+  overflow-y: auto;
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+.gx-ide-main::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.gx-ide-main::-webkit-scrollbar-track {
+  background-color: var(--gray-02);
+  border-radius: 10px;
+}
+.gx-ide-main::-webkit-scrollbar-thumb {
+  background: var(--gray-05);
+  border-radius: 10px;
+}
+.gx-ide-main::-webkit-scrollbar-thumb:hover {
+  background: var(--gray-04);
+  cursor: pointer;
+}
+.gx-ide-main .gxg-scroll {
+  display: block;
+  overflow-y: auto;
+  padding-inline-end: 2px;
+}
+
+.gx-ide-overflow {
+  overflow-y: auto;
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+}
+.gx-ide-overflow::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.gx-ide-overflow::-webkit-scrollbar-track {
+  background-color: var(--gray-02);
+  border-radius: 10px;
+}
+.gx-ide-overflow::-webkit-scrollbar-thumb {
+  background: var(--gray-05);
+  border-radius: 10px;
+}
+.gx-ide-overflow::-webkit-scrollbar-thumb:hover {
+  background: var(--gray-04);
+  cursor: pointer;
+}
+.gx-ide-overflow .gxg-scroll {
+  display: block;
+  overflow-y: auto;
+  padding-inline-end: 2px;
+}
+
+/*Gemini*/
+/*Gx Ide*/
+:host {
+  display: block;
+  border: 1px solid var(--gxg-border-color--regular);
+  background-color: var(--color-background);
+}
+
+:host(.gxi-object-selector--shadow) {
+  border: none;
+  box-shadow: var(--box-shadow-01);
+}
+
+/* Filters */
+.filter-grid {
+  grid-template-columns: repeat(4, 1fr);
+}
+.filter-grid > :nth-child(3),
+.filter-grid > :nth-child(6) {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+}
+.filter-grid > :nth-child(4) {
+  grid-area: 2/1/3/4;
+}
+.filter-grid > :nth-child(5) {
+  grid-area: 3/1/4/2;
+}
+.filter-grid > :nth-child(6) {
+  grid-area: 3/4/4/5;
+}
+.filter-grid > :nth-child(7) {
+  grid-area: 4/1/5/4;
+}
+.filter-grid > :nth-child(8) {
+  grid-area: 5/1/6/2;
+}
+.filter-grid > :nth-child(9) {
+  grid-area: 5/2/6/3;
+}
+.filter-grid > :nth-child(10) {
+  grid-area: 5/3/6/4;
+}
+.filter-grid > :nth-child(11) {
+  grid-area: 5/4/6/5;
+}
+
+.flex {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.with-gap {
+  gap: var(--gx-ide-grid-row-gap);
+}
+
+.hide {
+  display: none !important;
+}
+
+/* Objects Table */
+.images-grid {
+  grid-template-columns: repeat(3, 1fr);
+  grid-column-gap: 0;
+}
+.images-grid > :nth-child(1) {
+  grid-area: 1/1/1/3;
+}
+
+.images-data-flex {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--gx-ide-grid-row-gap);
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+.images-data-flex .image-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  width: 120px;
+}
+.images-data-flex .image-item .img {
+  width: 50px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--gxg-border-color--regular);
+  padding: var(--gx-ide-grid-row-gap);
+}
+.images-data-flex .image-item .img img {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.objects-count {
+  grid-template-columns: repeat(2, 1fr);
+}
+.objects-count *:nth-child(2) {
+  justify-content: flex-end;
+  align-items: flex-start;
+}