globuswebcomponents 1.3.1 → 1.3.2

package/dist/collection/collection-manifest.json

@@ -74,6 +74,7 @@
     "components/gb-token-field-compact/gb-token-field-compact.js",
     "components/gb-token-field-compressed/gb-token-field-compressed.js",
     "components/gb-tooltip/gb-tooltip.js",
+    "components/gb-top-bar/gb-top-bar.js",
     "components/gb-top-bar-item/gb-top-bar-item.js",
     "components/gb-vertical-tabs/gb-vertical-tabs.js",
     "components/gb-wysiwyg-editor-icon/gb-wysiwyg-editor-icon.js",

package/dist/collection/components/gb-detail-cell/gb-detail-cell.css

@@ -2682,17 +2682,13 @@
 
 .detail_cell_div.standard {
   height: 5rem;
+  padding: var(--spacing-none) var(--spacing-6);
 }
 
 .detail_cell_div.compact {
   padding: 0;
 }
 
-.detail_cell_div.standard.information,
-.detail_cell_div.standard.status {
-  padding: var(--spacing-none) var(--spacing-6);
-}
-
 .info_text_div,
 .status_text_div,
 .document_text_div {

package/dist/collection/components/gb-dropdown-items-with-shortcut/gb-dropdown-items-with-shortcut.css

@@ -2660,121 +2660,123 @@
 }
 
 .shortcut-container {
-    display: flex;
-    width: 100%;
-    padding: var(--spacing-half) var(--spacing-1);
-    align-items: center;
-    gap: var(--spacing-none);
-    border-radius: var(--rounded-none);   
-    cursor: pointer;
+  display: flex;
+  width: 100%;
+  padding: var(--spacing-half) var(--spacing-1);
+  align-items: center;
+  gap: var(--spacing-none);
+  border-radius: var(--rounded-none);
+  cursor: pointer;
 }
 
 .shortcut {
-    display: flex;
-    padding: var(--spacing-2);
-    justify-content: center;
-    align-items: center;
-    gap: var(--spacing-2);
-    flex: 1 0 0;
-    border-radius: var(--rounded-xs);
+  display: flex;
+  padding: var(--spacing-2);
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-2);
+  flex: 1 0 0;
+  border-radius: var(--rounded-xs);
 }
 
-.shortcut.destructive:hover{
-    background-color: var(--color-background-danger-subtlest, #FEF1F2);
+.shortcut.destructive:hover {
+  background-color: var(--color-background-danger-subtlest, #fef1f2);
 }
 
-.shortcut.destructive:active{
-    background-color: var(--color-background-danger-subtler, #FDE3E5);
+.shortcut.destructive:active {
+  background-color: var(--color-background-danger-subtler, #fde3e5);
 }
 
 .label_div {
-    flex-grow: 1;
+  flex-grow: 1;
 }
 
 .label {
-    color: var(--color-text, #4B5565);
+  color: var(--color-text, #4b5565);
 }
 
 .label.destructive {
-    color: var(--color-text-danger, #B51726);
+  color: var(--color-text-danger, #b51726);
 }
 
 .shortcut-icon {
-    display: flex;
-    justify-content: flex-end;
-    color: var(--color-text, #4B5565);
-    font-family: var(--Font-Family-Body, Sora);
-    font-size: var(--Font-Size-T-xs, 12px);
-    font-style: normal;
-    font-weight: var(--Font-Weight-Regular, 400);
-    line-height: var(--Font-Line-height-T-xs, 18px); /* 150% */
-    letter-spacing: var(--Font-Letter-spacing-T-xs, 0px);
+  display: flex;
+  justify-content: flex-end;
+  color: var(--color-text, #4b5565);
+  font-family: var(--Font-Family-Body, Sora);
+  font-size: var(--Font-Size-T-xs, 12px);
+  font-style: normal;
+  font-weight: var(--Font-Weight-Regular, 400);
+  line-height: var(--Font-Line-height-T-xs, 18px); /* 150% */
+  letter-spacing: var(--Font-Letter-spacing-T-xs, 0px);
 }
 
 .icon_div {
-    padding-left: 7px;
-    width: 20px;
-    height: 20px;
+  padding-left: 7px;
+}
+
+.icon {
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 .icon path[stroke] {
-    stroke: var(--color-icon, #4B5565);
+  stroke: var(--color-icon, #4b5565);
 }
 
 .icon path[fill] {
-    fill: var(--color-icon, #4B5565);
+  fill: var(--color-icon, #4b5565);
 }
 
 .icon.disabled path[stroke],
 .icon.disabled.destructive path[stroke] {
-    stroke: var(--color-icon-disabled, #CDD5DF);
+  stroke: var(--color-icon-disabled, #cdd5df);
 }
 
 .icon.disabled path[fill],
 .icon.disabled.destructive path[fill] {
-    fill: var(--color-icon-disabled, #CDD5DF);
+  fill: var(--color-icon-disabled, #cdd5df);
 }
 
 .icon.destructive path[stroke] {
-    stroke: var(--color-icon-danger, #B51726);
+  stroke: var(--color-icon-danger, #b51726);
 }
 
 .icon.destructive path[fill] {
-    fill: var(--color-icon-danger, #B51726);
+  fill: var(--color-icon-danger, #b51726);
 }
 
 gb-checkbox {
-    padding-top: 4px;
-    padding-left: 7px;
+  padding-top: 4px;
+  padding-left: 7px;
 }
 
 .shortcut:hover {
-    background-color: var(--color-background-gray-subtler, #EEF2F6);
+  background-color: var(--color-background-gray-subtler, #eef2f6);
 }
 .shortcut:active {
-    background: var(--color-background-gray-subtle, #E3E8EF);
+  background: var(--color-background-gray-subtle, #e3e8ef);
 }
 
 .shortcut.disabled {
-    background-color: var(---color-background-card, #ffffff);
-    color: var(--color-text-disabled, #CDD5DF);
-    pointer-events: none;
+  background-color: var(---color-background-card, #ffffff);
+  color: var(--color-text-disabled, #cdd5df);
+  pointer-events: none;
 }
 
 .shortcut.disabled .label,
 .shortcut.disabled .shortcut-icon,
 .shortcut.disabled gb-checkbox {
-    color: var(--color-text-disabled, #CDD5DF); /* Ensures all text/icons use the disabled color */
+  color: var(--color-text-disabled, #cdd5df); /* Ensures all text/icons use the disabled color */
 }
 
 .shortcut.disabled .icon img {
-    opacity: 0.5;
-    stroke: var(--color-icon-disabled, #CDD5DF); /* Reduce opacity for the icon in disabled state */
+  opacity: 0.5;
+  stroke: var(--color-icon-disabled, #cdd5df); /* Reduce opacity for the icon in disabled state */
 }
 
 /* Optional: You can also change the checkbox appearance */
 .shortcut.disabled gb-checkbox {
-    pointer-events: none;
-    opacity: 0.5; /* Dim the checkbox when disabled */
+  pointer-events: none;
+  opacity: 0.5; /* Dim the checkbox when disabled */
 }
-

package/dist/collection/components/gb-header/gb-header.css

@@ -43,7 +43,7 @@
     }
 }
 
-@media (max-width: 340px) {
+@media (max-width: 450px) {
     .logo{
         display: none;
     }

package/dist/collection/components/gb-top-bar/gb-top-bar.css

@@ -0,0 +1,45 @@
+.top_bar_div {
+  display: flex;
+  width: 100%;
+  height: 5rem;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.top_bar_div.colored_background {
+  border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);
+  background: linear-gradient(63deg, #075db2 16.72%, #053e77 68.99%, #042f59 83.39%);
+}
+
+.top_bar_div.plain_background {
+  border-bottom: 1px solid var(--color-border-subtler, #E3E8EF);
+  background: var(--color-surface);
+}
+
+.top_bar_content {
+  display: flex;
+  padding: 0rem 2rem;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex: 1 0 0;
+}
+
+.pattern {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  mix-blend-mode: multiply;
+}