@bi-digital/css 0.2.12 → 0.2.14

package/dist/components/chip.css

@@ -0,0 +1,180 @@
+.bi-chip {
+  --bic-chip-background: var(--bi-primary-5);
+  --bic-chip-background-hover: var(--bi-primary-10);
+  --bic-chip-background-press: var(--bi-primary-15);
+  --bic-chip-text-color: var(--bi-neutral-90);
+  --bic-chip-padding: var(--bi-scale-1x) var(--bi-scale-2x);
+  --bic-chip-icon-size: var(--bi-scale-6x);
+  --bic-chip-font-size: .875rem;
+  --bic-chip-line-height: 1.5;
+  gap: var(--bi-scale-1x);
+  border-radius: var(--bi-scale-max);
+  width: -webkit-fit-content;
+  width: fit-content;
+  color: var(--bic-chip-text-color);
+  background-color: var(--bic-chip-background);
+  padding: var(--bic-chip-padding);
+  font-family: museo-sans, Arial, sans-serif;
+  font-size: var(--bic-chip-font-size);
+  line-height: var(--bic-chip-line-height);
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+.bi-chip:-webkit-any(button) {
+  cursor: pointer;
+  border: none;
+  text-decoration: none;
+}
+
+.bi-chip:-webkit-any(button):focus-visible {
+  outline-offset: 2px;
+  outline: 1.5px solid var(--bi-primary-50);
+  border-radius: var(--bi-scale-max);
+  box-shadow: 0 0 0 2px #fff;
+}
+
+.bi-chip:-webkit-any(button):hover {
+  --bg-color: var(--bic-chip-bg-hover);
+}
+
+.bi-chip:-webkit-any(button):active {
+  --bg-color: var(--bic-chip-bg-press);
+}
+
+.bi-chip:is(button) {
+  cursor: pointer;
+  border: none;
+  text-decoration: none;
+}
+
+.bi-chip:is(button):focus-visible {
+  outline-offset: 2px;
+  outline: 1.5px solid var(--bi-primary-50);
+  border-radius: var(--bi-scale-max);
+  box-shadow: 0 0 0 2px #fff;
+}
+
+.bi-chip:is(button):hover {
+  --bg-color: var(--bic-chip-bg-hover);
+}
+
+.bi-chip:is(button):active {
+  --bg-color: var(--bic-chip-bg-press);
+}
+
+.bi-chip:-webkit-any(a) {
+  cursor: pointer;
+  border: none;
+  text-decoration: none;
+}
+
+.bi-chip:-webkit-any(a):focus-visible {
+  outline-offset: 2px;
+  outline: 1.5px solid var(--bi-primary-50);
+  border-radius: var(--bi-scale-max);
+  box-shadow: 0 0 0 2px #fff;
+}
+
+.bi-chip:-webkit-any(a):hover {
+  --bg-color: var(--bic-chip-bg-hover);
+}
+
+.bi-chip:-webkit-any(a):active {
+  --bg-color: var(--bic-chip-bg-press);
+}
+
+.bi-chip:is(a) {
+  cursor: pointer;
+  border: none;
+  text-decoration: none;
+}
+
+.bi-chip:is(a):focus-visible {
+  outline-offset: 2px;
+  outline: 1.5px solid var(--bi-primary-50);
+  border-radius: var(--bi-scale-max);
+  box-shadow: 0 0 0 2px #fff;
+}
+
+.bi-chip:is(a):hover {
+  --bg-color: var(--bic-chip-bg-hover);
+}
+
+.bi-chip:is(a):active {
+  --bg-color: var(--bic-chip-bg-press);
+}
+
+.bi-chip[data-size="small"] {
+  --bic-chip-padding: var(--bi-scale-0-50x) var(--bi-scale-2x);
+  --bic-chip-font-size: .8125rem;
+  --bic-chip-icon-size: var(--bi-scale-5x);
+}
+
+.bi-chip[data-size="large"] {
+  --bic-chip-padding: var(--bi-scale-2x) var(--bi-scale-4x);
+  --bic-chip-font-size: 1rem;
+  --bic-chip-size: var(--bi-scale-14x);
+}
+
+.bi-chip[data-color="neutral"] {
+  --bic-chip-background: var(--bi-neutral-5);
+  --bic-chip-background-hover: var(--bi-neutral-20);
+  --bic-chip-background-press: var(--bi-neutral-30);
+  --bic-chip-text-color: var(--bi-neutral-90);
+}
+
+.bi-chip[data-color="primary-light"] {
+  --bic-chip-background: var(--bi-primary-5);
+  --bic-chip-background-hover: var(--bi-primary-20);
+  --bic-chip-background-press: var(--bi-primary-30);
+  --bic-chip-text-color: var(--bi-neutral-90);
+}
+
+.bi-chip[data-color="info"] {
+  --bic-chip-background: var(--bi-info-5);
+  --bic-chip-background-hover: var(--bi-info-20);
+  --bic-chip-background-press: var(--bi-info-30);
+  --bic-chip-text-color: var(--bi-info-90);
+}
+
+.bi-chip[data-color="white"] {
+  --bic-chip-background: var(--bi-basic-white);
+  --bic-chip-background-hover: var(--bi-neutral-20);
+  --bic-chip-background-press: var(--bi-neutral-30);
+  --bic-chip-text-color: var(--bi-neutral-90);
+}
+
+.bi-chip[data-color="primary"] {
+  --bic-chip-background: var(--bi-primary-50);
+  --bic-chip-background-hover: var(--bi-primary-60);
+  --bic-chip-background-press: var(--bi-primary-70);
+  --bic-chip-text-color: var(--bi-basic-white);
+}
+
+.bi-chip[data-color="alert"] {
+  --bic-chip-background: var(--bi-alert-5);
+  --bic-chip-background-hover: var(--bi-alert-20);
+  --bic-chip-background-press: var(--bi-alert-30);
+  --bic-chip-text-color: var(--bi-alert-90);
+}
+
+.bi-chip[data-color="warning"] {
+  --bic-chip-background: var(--bi-warning-5);
+  --bic-chip-background-hover: var(--bi-warning-20);
+  --bic-chip-background-press: var(--bi-warning-30);
+  --bic-chip-text-color: var(--bi-warning-90);
+}
+
+.bi-chip[data-color="success"] {
+  --bic-chip-background: var(--bi-success-5);
+  --bic-chip-background-hover: var(--bi-success-20);
+  --bic-chip-background-press: var(--bi-success-30);
+  --bic-chip-text-color: var(--bi-success-90);
+}
+
+.bi-chip .bi-chip--start-icon {
+  display: inherit;
+  font-size: var(--bic-chip-icon-size);
+}

package/dist/components/dialog.css

@@ -0,0 +1,119 @@
+.bi-dialog {
+  --bic-dialog-animation-duration: .2s;
+  --bic-dialog-backdrop-background: #00000080;
+  --bic-dialog-background: var(--bi-basic-white);
+  --bic-dialog-border-color: var(--bi-neutral-15);
+  --bic-dialog-icon-spacing: .625rem;
+  --bic-dialog-color: var(--bi-neutral-90);
+  --bic-dialog-max-height: 80vh;
+  --bic-dialog-max-width: 40rem;
+  --bic-dialog-padding: var(--bi-scale-4x);
+}
+
+.bi-dialog[data-dark="true"] {
+  --bic-dialog-background: var(--bi-primary-95);
+  --bic-dialog-border-color: var(--bi-neutral-70);
+  --bic-dialog-color: var(--bi-basic-white);
+}
+
+.bi-dialog {
+  animation: bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) forwards;
+  background: var(--bic-dialog-background);
+  border-radius: var(--bi-radius-large);
+  box-shadow: 0 var(--bi-scale-1x) var(--bi-scale-1x) 0 #00000040;
+  color: var(--bic-dialog-color);
+  max-height: var(--bic-dialog-max-height);
+  max-width: var(--bic-dialog-max-width);
+  border: none;
+  flex-direction: column;
+  width: 100%;
+  margin: auto;
+  padding: 0;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow: auto;
+}
+
+.bi-dialog::backdrop {
+  animation: bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) ease-in-out;
+  background: var(--bic-dialog-backdrop-background, #00000080);
+}
+
+.bi-dialog[open] {
+  animation: bi-dialog-slide-in-animation var(--bic-dialog-animation-duration) ease-in-out, bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) ease-in-out;
+  display: flex;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bi-dialog[open] {
+    animation: none;
+  }
+
+  .bi-dialog::backdrop {
+    animation: none;
+  }
+}
+
+.bi-dialog > form[method="dialog"]:first-child > button:only-child {
+  top: var(--bic-dialog-icon-spacing);
+  right: var(--bic-dialog-icon-spacing);
+  position: absolute;
+}
+
+.bi-dialog .bi-dialog--header {
+  padding: var(--bic-dialog-padding);
+  padding-right: var(--bi-scale-14x);
+  min-height: var(--bi-scale-16x);
+  align-items: center;
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 700;
+  line-height: 1.3;
+  display: flex;
+}
+
+.bi-dialog .bi-dialog--content {
+  padding: var(--bic-dialog-padding);
+  overflow-behavior: contain;
+  overflow: auto;
+}
+
+.bi-dialog .bi-dialog--footer {
+  padding: var(--bic-dialog-padding);
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--bi-scale-4x);
+  margin-top: auto;
+  display: flex;
+}
+
+.bi-dialog .bi-dialog--header:not(:first-child) {
+  border-top: var(--bi-stroke-thin) solid var(--bic-dialog-border-color);
+}
+
+.bi-dialog .bi-dialog--content:not(:first-child) {
+  border-top: var(--bi-stroke-thin) solid var(--bic-dialog-border-color);
+}
+
+.bi-dialog .bi-dialog--footer:not(:first-child) {
+  border-top: var(--bi-stroke-thin) solid var(--bic-dialog-border-color);
+}
+
+body:has(.bi-dialog:modal) {
+  overflow: hidden;
+}
+
+@keyframes bi-dialog-slide-in-animation {
+  from {
+    translate: 0 var(--bi-scale-12x);
+  }
+}
+
+@keyframes bi-dialog-fade-in-animation {
+  from {
+    opacity: 0;
+  }
+}

package/dist/components/drawer.css

@@ -0,0 +1,103 @@
+.bi-dialog.bi-drawer {
+  --bic-dialog-max-height: unset;
+  --bic-drawer-closed-translate-x: 0;
+  --bic-drawer-closed-translate-y: 0;
+  --bic-drawer-min-width: 23.5rem;
+  --bic-drawer-max-width: 40rem;
+  --bic-drawer-min-height: 20rem;
+  --bic-drawer-border-radius: var(--bi-radius-medium);
+  transition: display var(--bic-dialog-animation-duration) allow-discrete, overlay var(--bic-dialog-animation-duration) allow-discrete;
+  transform: translate(var(--bic-drawer-closed-translate-x), var(--bic-drawer-closed-translate-y));
+  animation: bi-drawer-slide-out-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
+}
+
+.bi-dialog.bi-drawer[open] {
+  animation: bi-drawer-slide-in-animation var(--bic-dialog-animation-duration) ease-in-out forwards;
+  transform: translate(0);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bi-dialog.bi-drawer {
+    transition: none;
+  }
+
+  .bi-dialog.bi-drawer[open] {
+    animation: none;
+  }
+}
+
+.bi-dialog.bi-drawer[data-anchor="left"] {
+  --bic-drawer-closed-translate-x: -100%;
+  right: unset;
+  border-radius: 0 var(--bic-drawer-border-radius) var(--bic-drawer-border-radius) 0;
+}
+
+.bi-dialog.bi-drawer[data-anchor="right"] {
+  --bic-drawer-closed-translate-x: 100%;
+  left: unset;
+  border-radius: var(--bic-drawer-border-radius) 0 0 var(--bic-drawer-border-radius);
+}
+
+.bi-dialog.bi-drawer[data-anchor="top"] {
+  --bic-drawer-closed-translate-y: -100%;
+  bottom: unset;
+  border-radius: 0 0 var(--bic-drawer-border-radius) var(--bic-drawer-border-radius);
+}
+
+.bi-dialog.bi-drawer[data-anchor="bottom"] {
+  --bic-drawer-closed-translate-y: 100%;
+  top: unset;
+  border-radius: var(--bic-drawer-border-radius) var(--bic-drawer-border-radius) 0 0;
+}
+
+.bi-dialog.bi-drawer[data-anchor="left"] {
+  min-width: var(--bic-drawer-min-width);
+  max-width: var(--bic-drawer-max-width);
+  width: -webkit-fit-content;
+  width: fit-content;
+  height: 100dvh;
+}
+
+.bi-dialog.bi-drawer[data-anchor="right"] {
+  min-width: var(--bic-drawer-min-width);
+  max-width: var(--bic-drawer-max-width);
+  width: -webkit-fit-content;
+  width: fit-content;
+  height: 100dvh;
+}
+
+.bi-dialog.bi-drawer[data-anchor="top"] {
+  min-height: var(--bic-drawer-min-height);
+  max-height: calc(100dvh - var(--bi-layout-navbar-height));
+  width: 100%;
+  max-width: 100dvw;
+}
+
+.bi-dialog.bi-drawer[data-anchor="bottom"] {
+  min-height: var(--bic-drawer-min-height);
+  max-height: calc(100dvh - var(--bi-layout-navbar-height));
+  width: 100%;
+  max-width: 100dvw;
+}
+
+@keyframes bi-drawer-slide-in-animation {
+  from {
+    transform: translate(var(--bic-drawer-closed-translate-x), var(--bic-drawer-closed-translate-y));
+  }
+
+  to {
+    transform: translate(0);
+  }
+}
+
+@keyframes bi-drawer-slide-out-animation {
+  from {
+    opacity: 1;
+    transform: translate(0);
+  }
+
+  to {
+    transform: translate(var(--bic-drawer-closed-translate-x), var(--bic-drawer-closed-translate-y));
+    opacity: 0;
+  }
+}

package/dist/components/dropdown.css

@@ -0,0 +1,69 @@
+.bi-dropdown {
+  --bic-dropdown-padding: var(--bi-scale-1x);
+  --bic-dropdown-item-padding: var(--bi-scale-2x) var(--bi-scale-3x);
+  --bic-dropdown-item-size: var(--bi-scale-11x);
+  --bic-dropdown-background: var(--bi-basic-white);
+  --bic-dropdown-border-width: var(--bi-stroke-thin);
+  --bic-dropdown-border-style: solid;
+  --bic-dropdown-border-color: var(--bi-stroke-color-1);
+  --bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
+}
+
+.bi-dropdown[data-dark="true"] {
+  --bic-dropdown-background: var(--bi-neutral-100);
+  --bic-dropdown-border-color: var(--bi-neutral-90);
+  --bic-dropdown-color: var(--bi-neutral-5);
+  --bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08, 0px 2px 2px -1px #26333f0a;
+}
+
+.bi-dropdown {
+  background: var(--bic-dropdown-background);
+  border-radius: var(--bi-radius-medium);
+  border-width: var(--bic-dropdown-border-width);
+  border-style: var(--bic-dropdown-border-style);
+  border-color: var(--bic-dropdown-border-color);
+  box-shadow: var(--bic-dropdown-box-shadow);
+  box-sizing: border-box;
+  min-width: var(--bi-scale-64x);
+  padding: var(--bic-dropdown-padding);
+  list-style: none;
+}
+
+.bi-dropdown ul {
+  gap: var(--bi-scale-1x);
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+}
+
+.bi-dropdown :-webkit-any(a, button, [role="button"]) {
+  padding: var(--bic-dropdown-item-padding);
+  min-height: var(--bic-dropdown-item-size);
+  justify-content: start;
+  width: 100%;
+}
+
+.bi-dropdown :-webkit-any(a, button, [role="button"]) .bi-button--end-icon {
+  margin-left: auto;
+}
+
+.bi-dropdown :is(a, button, [role="button"]) {
+  padding: var(--bic-dropdown-item-padding);
+  min-height: var(--bic-dropdown-item-size);
+  justify-content: start;
+  width: 100%;
+}
+
+.bi-dropdown :is(a, button, [role="button"]) .bi-button--end-icon {
+  margin-left: auto;
+}
+
+.bi-button[popovertarget]:has( + :popover-open) {
+  box-shadow: 0px 0px 0px 1.5px var(--bi-primary-50) inset;
+}
+
+.bi-button[popovertarget]:has( + .\:popover-open) {
+  box-shadow: 0px 0px 0px 1.5px var(--bi-primary-50) inset;
+}