@vector-business-services/cristal-ds-web 0.8.0 → 0.9.0

package/dist/index.css

@@ -2079,6 +2079,187 @@
   background-color: var(--cr-color-fill-brand-base);
 }
 
+/* src/components/PageHeader/PageHeader.css */
+.cr-page-header {
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--cr-color-fill-neutral-container);
+}
+.cr-page-header__title-group {
+  display: grid;
+  grid-template-areas: "text tools expand";
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  column-gap: var(--cr-spacing-spacing-3);
+  align-items: center;
+  box-sizing: border-box;
+  min-height: 58px;
+  padding: var(--cr-padding-padding-4) var(--cr-padding-padding-8);
+}
+.cr-page-header__title-text {
+  display: flex;
+  grid-area: text;
+  align-items: center;
+  gap: var(--cr-spacing-spacing-4);
+  min-width: 0;
+}
+.cr-page-header__title-text > * {
+  flex-shrink: 0;
+}
+.cr-page-header__title {
+  flex-shrink: 1;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  color: var(--cr-color-text-neutral-base);
+  font-family: var(--cr-typography-heading-web-small-font-family);
+  font-size: var(--cr-typography-heading-web-small-font-size);
+  font-weight: var(--cr-typography-heading-web-small-font-weight);
+  line-height: var(--cr-typography-heading-web-small-line-height);
+  letter-spacing: var(--cr-typography-heading-web-small-letter-spacing);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cr-page-header__tools {
+  display: flex;
+  grid-area: tools;
+  align-items: center;
+  gap: var(--cr-spacing-spacing-3);
+}
+.cr-page-header__segment {
+  display: flex;
+}
+.cr-page-header__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--cr-spacing-spacing-4);
+}
+.cr-page-header__expand {
+  grid-area: expand;
+}
+.cr-page-header__tab-list {
+  display: flex;
+  margin: 0;
+  padding: 0 0 0 var(--cr-padding-padding-8);
+  overflow-x: auto;
+  border-bottom: var(--cr-stroke-x-small) solid var(--cr-color-stroke-neutral-base);
+  list-style: none;
+  scrollbar-width: none;
+}
+.cr-page-header__tab-item {
+  display: flex;
+  flex-shrink: 0;
+}
+.cr-page-header__inkbar {
+  display: none;
+}
+.cr-page-header__tab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--cr-spacing-spacing-3);
+  box-sizing: border-box;
+  height: 44px;
+  padding: 0 var(--cr-padding-padding-7);
+  border-bottom: 2px solid transparent;
+  border-radius: var(--cr-radius-x-small) var(--cr-radius-x-small) 0 0;
+  color: var(--cr-color-text-neutral-subtle);
+  font-family: var(--cr-typography-body-small-14-regular-font-family);
+  font-size: var(--cr-typography-body-small-14-regular-font-size);
+  font-weight: var(--cr-typography-body-small-14-regular-font-weight);
+  line-height: var(--cr-typography-body-small-14-regular-line-height);
+  letter-spacing: var(--cr-typography-body-small-14-regular-letter-spacing);
+  white-space: nowrap;
+  text-decoration: none;
+  cursor: pointer;
+  outline: none;
+}
+.cr-page-header__tab:hover {
+  color: var(--cr-color-text-neutral-base);
+}
+.cr-page-header__tab[aria-current=page] {
+  border-bottom-color: var(--cr-color-stroke-brand-base);
+  color: var(--cr-color-text-brand-base);
+  font-weight: var(--cr-typography-body-small-14-semibold-font-weight);
+}
+.cr-page-header__tab:focus-visible {
+  box-shadow: inset var(--cr-effects-focus-ring);
+}
+.cr-page-header__tab-item[aria-disabled=true] .cr-page-header__tab {
+  color: var(--cr-color-text-disabled-base);
+  cursor: not-allowed;
+}
+.cr-page-header__tab-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--cr-radius-full);
+  color: var(--cr-color-icon-neutral-base);
+  font-size: 16px;
+}
+.cr-page-header__tab[aria-current=page] .cr-page-header__tab-icon {
+  color: var(--cr-color-icon-brand-base);
+}
+.cr-page-header--primary .cr-page-header__tab-icon {
+  background-color: var(--cr-color-fill-neutral-subtlest);
+}
+.cr-page-header--primary .cr-page-header__tab:hover .cr-page-header__tab-icon {
+  background-color: var(--cr-color-fill-neutral-subtler);
+}
+.cr-page-header--primary .cr-page-header__tab[aria-current=page] {
+  background-color: var(--cr-color-fill-brand-subtlest);
+}
+.cr-page-header--primary .cr-page-header__tab[aria-current=page] .cr-page-header__tab-icon {
+  background-color: var(--cr-color-fill-neutral-container);
+}
+.cr-page-header--secondary .cr-page-header__tab {
+  padding: 0 var(--cr-padding-padding-8);
+}
+@container (max-width: 1359px) {
+  .cr-page-header__title-group {
+    padding-right: var(--cr-padding-padding-6);
+    padding-left: var(--cr-padding-padding-6);
+  }
+  .cr-page-header__tab-list {
+    padding-left: var(--cr-padding-padding-6);
+  }
+}
+@container (max-width: 767px) {
+  .cr-page-header {
+    gap: var(--cr-spacing-spacing-3);
+  }
+  .cr-page-header__title-group {
+    grid-template-areas: "text expand";
+    grid-template-columns: minmax(0, 1fr) auto;
+    column-gap: var(--cr-spacing-spacing-4);
+    row-gap: var(--cr-spacing-spacing-5);
+    min-height: 0;
+  }
+  .cr-page-header__title-group--tools {
+    grid-template-areas: "text expand" "tools tools";
+  }
+  .cr-page-header__tools {
+    gap: var(--cr-spacing-spacing-4);
+  }
+  .cr-page-header__segment {
+    flex: 1;
+    min-width: 0;
+  }
+  .cr-page-header__segment .cr-segment {
+    width: 100%;
+  }
+  .cr-page-header__segment .cr-segment__item {
+    flex: 1 1 0;
+  }
+  .cr-page-header__expand {
+    width: 36px;
+    height: 36px;
+  }
+}
+
 /* src/components/Panel/Panel.css */
 .cr-panel {
   display: flex;