@vector-business-services/cristal-ds-web 0.2.0 → 0.4.0

package/dist/index.css

@@ -337,6 +337,40 @@
   border-color: var(--cr-color-stroke-disabled-base);
 }
 
+/* src/components/Card/Card.css */
+.cr-card {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  border-radius: var(--cr-radius-medium);
+  background-color: var(--cr-color-fill-neutral-container);
+}
+.cr-card__body,
+.cr-card__content {
+  display: flex;
+  flex: 1 0 auto;
+  flex-direction: column;
+  min-height: 0;
+}
+.cr-card--xsmall {
+  padding: var(--cr-padding-padding-4);
+}
+.cr-card--small {
+  padding: var(--cr-padding-padding-5);
+}
+.cr-card--medium {
+  padding: var(--cr-padding-padding-6);
+}
+.cr-card--large {
+  padding: var(--cr-padding-padding-7);
+}
+.cr-card--xlarge {
+  padding: var(--cr-padding-padding-8);
+}
+.cr-card--outline {
+  box-shadow: inset 0 0 0 var(--cr-stroke-x-small) var(--cr-color-stroke-neutral-base);
+}
+
 /* src/components/Chip/Chip.css */
 .cr-chip {
   display: inline-flex;
@@ -625,6 +659,431 @@
   background-color: var(--cr-color-fill-brand-subtlest);
 }
 
+/* src/components/Menu/Menu.css */
+.cr-menu {
+  box-sizing: border-box;
+  width: 320px;
+  padding: var(--cr-padding-padding-5);
+  border: var(--cr-stroke-x-small) solid var(--cr-color-stroke-neutral-base);
+  border-radius: var(--cr-radius-medium);
+  background-color: var(--cr-color-fill-neutral-container);
+  box-shadow: var(--cr-elevation-gray-bottom-3);
+  color: var(--cr-color-text-neutral-base);
+  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);
+}
+.cr-menu--popup {
+  position: absolute;
+}
+.cr-menu--popup[style*="transform-origin: center top"] {
+  margin-top: var(--cr-spacing-spacing-3);
+}
+.cr-menu--popup[style*="transform-origin: center bottom"] {
+  margin-top: calc(var(--cr-spacing-spacing-3) * -1);
+}
+.cr-menu__list {
+  --cr-menu-item-height: 37px;
+  max-height: calc(var(--cr-menu-item-height) * 5);
+  margin: -3px;
+  padding: 3px;
+  overflow-y: auto;
+  list-style: none;
+  outline: none;
+}
+.cr-menu--compact .cr-menu__list {
+  --cr-menu-item-height: 29px;
+}
+.cr-menu__list::-webkit-scrollbar {
+  width: 8px;
+}
+.cr-menu__list::-webkit-scrollbar-track {
+  border-radius: var(--cr-radius-full);
+  background-color: var(--cr-color-fill-neutral-subtlest);
+}
+.cr-menu__list::-webkit-scrollbar-thumb {
+  border-radius: var(--cr-radius-full);
+  background-color: var(--cr-color-fill-neutral-subtle);
+}
+@supports not selector(::-webkit-scrollbar) {
+  .cr-menu__list {
+    scrollbar-width: thin;
+    scrollbar-color: var(--cr-color-fill-neutral-subtle) var(--cr-color-fill-neutral-subtlest);
+  }
+}
+.cr-menu__action {
+  display: flex;
+  align-items: center;
+  gap: var(--cr-spacing-spacing-4);
+  box-sizing: border-box;
+  height: var(--cr-menu-item-height);
+  padding: var(--cr-padding-padding-4) var(--cr-padding-padding-5);
+  border-radius: var(--cr-radius-x-small);
+  background-color: var(--cr-color-fill-neutral-container);
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}
+.cr-menu--compact .cr-menu__action {
+  padding: var(--cr-padding-padding-3) var(--cr-padding-padding-5);
+}
+.cr-menu__label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cr-menu__icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  color: var(--cr-color-icon-neutral-base);
+  font-size: 20px;
+}
+.cr-menu__item:hover .cr-menu__action {
+  background-color: var(--cr-color-fill-neutral-container-hover);
+}
+.cr-menu__list:focus-visible .cr-menu__item[data-p-focused=true] .cr-menu__action {
+  background-color: var(--cr-color-fill-neutral-container);
+  box-shadow: inset 0 0 0 var(--cr-stroke-x-small) var(--cr-color-stroke-brand-base), var(--cr-effects-focus-ring);
+}
+.cr-menu__item--selected .cr-menu__action,
+.cr-menu__item--selected:hover .cr-menu__action {
+  background-color: var(--cr-color-fill-selected-subtlest);
+  color: var(--cr-color-text-brand-base);
+}
+.cr-menu__item--selected .cr-menu__icon {
+  color: var(--cr-color-icon-brand-base);
+}
+.cr-menu__item[data-p-disabled=true] .cr-menu__action {
+  color: var(--cr-color-text-disabled-base);
+  cursor: not-allowed;
+}
+.cr-menu__item[data-p-disabled=true]:hover .cr-menu__action {
+  background-color: var(--cr-color-fill-neutral-container);
+}
+.cr-menu__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--cr-menu-item-height);
+  color: var(--cr-color-icon-neutral-subtle);
+  font-size: 24px;
+}
+.cr-menu__spinner {
+  animation: cr-menu-spin 1s linear infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .cr-menu__spinner {
+    animation-duration: 3s;
+  }
+}
+@keyframes cr-menu-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* src/components/Tooltip/Tooltip.css */
+.cr-tooltip {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+  pointer-events: none;
+}
+.cr-tooltip--top,
+.cr-tooltip--bottom {
+  padding: var(--cr-padding-padding-3) 0;
+}
+.cr-tooltip--left,
+.cr-tooltip--right {
+  padding: 0 var(--cr-padding-padding-3);
+}
+.cr-tooltip__arrow {
+  display: none;
+}
+.cr-tooltip__text {
+  box-sizing: border-box;
+  padding: var(--cr-padding-padding-4) var(--cr-padding-padding-5);
+  border-radius: var(--cr-radius-small);
+  background-color: var(--cr-color-fill-neutral-boldest);
+  color: var(--cr-color-text-inverse-base);
+  font-family: var(--cr-typography-label-medium-12-semibold-font-family);
+  font-size: var(--cr-typography-label-medium-12-semibold-font-size);
+  font-weight: var(--cr-typography-label-medium-12-semibold-font-weight);
+  line-height: var(--cr-typography-label-medium-12-semibold-line-height);
+  letter-spacing: var(--cr-typography-label-medium-12-semibold-letter-spacing);
+}
+.cr-tooltip--plain .cr-tooltip__text {
+  white-space: nowrap;
+}
+.cr-tooltip--rich .cr-tooltip__text {
+  max-width: 300px;
+  white-space: pre-line;
+  overflow-wrap: break-word;
+}
+
+/* src/components/Menubar/Menubar.css */
+.cr-menubar {
+  container-type: inline-size;
+}
+.cr-menubar__bar {
+  display: grid;
+  grid-template-columns: 1fr clamp(300px, calc(100cqw * 400 / 1360), 500px) 1fr;
+  column-gap: var(--cr-spacing-spacing-6);
+  align-items: center;
+  box-sizing: border-box;
+  height: 64px;
+  padding: 0 var(--cr-padding-padding-8);
+  border-bottom: var(--cr-stroke-x-small) solid var(--cr-color-stroke-neutral-base);
+  background-color: var(--cr-color-fill-neutral-container);
+  color: var(--cr-color-text-neutral-base);
+  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);
+}
+.cr-menubar--no-search .cr-menubar__bar {
+  grid-template-columns: 1fr auto;
+}
+.cr-menubar__start {
+  display: contents;
+}
+.cr-menubar__init {
+  display: flex;
+  gap: var(--cr-spacing-spacing-6);
+  align-items: center;
+  justify-self: start;
+}
+.cr-menubar__logo {
+  position: relative;
+  display: block;
+  flex-shrink: 0;
+  width: 120px;
+  height: 40px;
+  overflow: hidden;
+}
+.cr-menubar__logo-texto {
+  position: absolute;
+  top: 14.09px;
+  left: 1px;
+  width: 67.293px;
+  height: 11.618px;
+}
+.cr-menubar__logo-simbolo {
+  position: absolute;
+  top: 10px;
+  left: 76.41px;
+  width: 42.706px;
+  height: 20px;
+}
+.cr-menubar__menu-button,
+.cr-menubar__tool {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--cr-radius-full);
+  background-color: transparent;
+  color: var(--cr-color-icon-neutral-subtle);
+  cursor: pointer;
+  transition: background-color 120ms ease, color 120ms ease;
+}
+.cr-menubar__menu-icon,
+.cr-menubar__tool-icon,
+.cr-menubar__search-icon {
+  display: inline-flex;
+  font-size: 20px;
+}
+.cr-menubar__menu-button:focus-visible,
+.cr-menubar__tool:focus-visible,
+.cr-menubar__search-button:focus-visible,
+.cr-menubar__profile--button:focus-visible {
+  outline: none;
+  box-shadow: var(--cr-effects-focus-ring);
+}
+.cr-menubar__menu-button:hover {
+  background-color: var(--cr-color-fill-neutral-subtlest);
+  color: var(--cr-color-icon-neutral-base);
+}
+.cr-menubar__menu-button--active,
+.cr-menubar__menu-button--active:hover {
+  background-color: var(--cr-color-fill-brand-subtlest);
+  color: var(--cr-color-icon-brand-base);
+}
+.cr-menubar__tools {
+  display: flex;
+  gap: var(--cr-spacing-spacing-2);
+  align-items: center;
+}
+.cr-menubar__tool {
+  background-color: var(--cr-color-fill-neutral-container);
+}
+.cr-menubar__tool:hover,
+.cr-menubar__tool--active {
+  background-color: var(--cr-color-fill-neutral-subtlest);
+  color: var(--cr-color-icon-neutral-base);
+}
+.cr-menubar__badge {
+  position: absolute;
+  top: -4px;
+  left: 20px;
+}
+.cr-menubar__search {
+  display: flex;
+  gap: var(--cr-spacing-spacing-6);
+  align-items: center;
+  justify-self: center;
+  box-sizing: border-box;
+  width: 100%;
+  height: 40px;
+  padding: 0 var(--cr-padding-padding-2) 0 var(--cr-padding-padding-7);
+  border-radius: var(--cr-radius-full);
+  background-color: var(--cr-color-fill-neutral-subtler);
+  transition: background-color 120ms ease;
+}
+.cr-menubar__search:hover {
+  background-color: var(--cr-color-fill-neutral-subtle);
+}
+.cr-menubar__search:focus-within {
+  box-shadow: var(--cr-effects-focus-ring);
+}
+.cr-menubar__search-input {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--cr-color-text-neutral-base);
+  font: inherit;
+  letter-spacing: inherit;
+  outline: none;
+}
+.cr-menubar__search-input::placeholder {
+  color: var(--cr-color-text-neutral-subtle);
+  opacity: 1;
+}
+.cr-menubar__search-button {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--cr-radius-full);
+  background-color: transparent;
+  color: var(--cr-color-icon-neutral-subtle);
+  cursor: pointer;
+}
+.cr-menubar__search-button:hover {
+  background-color: var(--cr-color-fill-neutral-container);
+  color: var(--cr-color-icon-brand-base);
+}
+.cr-menubar__end {
+  display: flex;
+  gap: var(--cr-spacing-spacing-3);
+  align-items: center;
+  justify-self: end;
+}
+.cr-menubar__profile {
+  display: flex;
+  gap: var(--cr-padding-padding-6);
+  align-items: center;
+  justify-content: flex-end;
+  box-sizing: border-box;
+  min-width: 124px;
+  max-width: 220px;
+  padding: var(--cr-padding-padding-3);
+  border: 0;
+  border-radius: var(--cr-radius-small);
+  background-color: transparent;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-align: right;
+}
+.cr-menubar__profile--button {
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+.cr-menubar__profile--button:hover {
+  background-color: var(--cr-color-fill-neutral-subtlest);
+}
+.cr-menubar__profile-text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: flex-end;
+  min-width: 0;
+  white-space: nowrap;
+}
+.cr-menubar__profile-name,
+.cr-menubar__profile-role {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.cr-menubar__profile-name {
+  color: var(--cr-color-text-neutral-base);
+  font-family: var(--cr-typography-body-small-14-semibold-font-family);
+  font-size: var(--cr-typography-body-small-14-semibold-font-size);
+  font-weight: var(--cr-typography-body-small-14-semibold-font-weight);
+  line-height: var(--cr-typography-body-small-14-semibold-line-height);
+}
+.cr-menubar__profile-role {
+  color: var(--cr-color-text-neutral-subtlest);
+}
+.cr-menubar__avatar {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 40px;
+  height: 40px;
+  overflow: hidden;
+  border: var(--cr-stroke-x-small) solid var(--cr-color-stroke-neutral-base);
+  border-radius: var(--cr-radius-full);
+}
+.cr-menubar__avatar-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.cr-menubar__avatar--initial {
+  background-color: var(--cr-color-fill-brand-subtle);
+  color: var(--cr-color-text-brand-base);
+  font-family: var(--cr-typography-body-large-18-semibold-font-family);
+  font-size: var(--cr-typography-body-large-18-semibold-font-size);
+  font-weight: var(--cr-typography-body-large-18-semibold-font-weight);
+  line-height: var(--cr-typography-body-large-18-semibold-line-height);
+}
+@container (max-width: 1359px) {
+  .cr-menubar .cr-menubar__bar {
+    grid-template-columns: 1fr auto;
+    padding: 0 var(--cr-padding-padding-6);
+  }
+  .cr-menubar__search,
+  .cr-menubar__tool:not(.cr-menubar__tool--tablet) {
+    display: none;
+  }
+}
+@container (max-width: 767px) {
+  .cr-menubar__end {
+    display: none;
+  }
+}
+
 /* src/components/MultiSelect/MultiSelect.css */
 .cr-multiselect .cr-multiselect__control {
   cursor: pointer;