@basis-ng/styles 0.0.1-alpha.13 → 0.0.1-alpha.131

package/src/components/alert.component.css

@@ -1,71 +0,0 @@
-b-alert {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  position: relative;
-  font-family: 'Geist', sans-serif;
-  max-width: var(--max-width, none);
-  width: 100%;
-  box-sizing: border-box;
-
-  .icon {
-    flex-shrink: 0;
-    align-self: flex-start;
-  }
-
-  .content {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-
-    .title {
-      font-weight: bold;
-    }
-
-    .body {
-      font-size: 0.875rem;
-      display: flex;
-      flex-direction: column;
-      gap: 0.2rem;
-    }
-  }
-
-  &.success {
-    background-color: var(--success);
-    color: var(--success-foreground);
-    border: 1px solid var(--success-border-color);
-  }
-
-  &.error {
-    background-color: var(--error);
-    color: var(--error-foreground);
-    border: 1px solid var(--error-border-color);
-  }
-
-  &.warning {
-    background-color: var(--warning);
-    color: var(--warning-foreground);
-    border: 1px solid var(--warning-border-color);
-  }
-
-  &.info {
-    background-color: var(--secondary);
-    color: var(--secondary-foreground);
-    border: 1px solid var(--secondary-border-color);
-  }
-
-  .close-btn {
-    align-self: flex-start;
-    flex-shrink: 0;
-    background: none;
-    border: none;
-    cursor: pointer;
-    color: inherit;
-    display: flex;
-    align-items: start;
-    padding: 0;
-  }
-}

package/src/components/attached-box.component.css

@@ -1,84 +0,0 @@
-b-attached-box {
-  position: relative;
-  cursor: pointer;
-
-  .b-attached-box-content {
-    position: absolute;
-    display: flex;
-    z-index: 1000;
-    opacity: 0;
-    transform: scale(var(--scale-from, 0.99))
-      var(--translate-from, translateX(-10px));
-    transition:
-      opacity var(--duration, 0.15s) var(--enter-delay, 0s),
-      transform var(--duration, 0.15s) var(--enter-delay, 0s);
-    pointer-events: none;
-
-    &.visible {
-      opacity: 1;
-      transform: scale(var(--scale-to, 1)) var(--translate-to, translateX(0));
-      pointer-events: all;
-    }
-
-    /* Positioning classes */
-    &.top-left {
-      bottom: calc(100% + var(--gap, 0.5rem));
-      left: 0;
-    }
-
-    &.top-center {
-      bottom: calc(100% + var(--gap, 0.5rem));
-      left: 50%;
-    }
-
-    &.top-right {
-      bottom: calc(100% + var(--gap, 0.5rem));
-      right: 0;
-    }
-
-    &.bottom-left {
-      top: calc(100% + var(--gap, 0.5rem));
-      left: 0;
-    }
-
-    &.bottom-center {
-      top: calc(100% + var(--gap, 0.5rem));
-      left: 50%;
-    }
-
-    &.bottom-right {
-      top: calc(100% + var(--gap, 0.5rem));
-      right: 0;
-    }
-
-    &.left-top {
-      right: calc(100% + var(--gap, 0.5rem));
-      top: 0;
-    }
-
-    &.left-center {
-      right: calc(100% + var(--gap, 0.5rem));
-      top: 50%;
-    }
-
-    &.left-bottom {
-      right: calc(100% + var(--gap, 0.5rem));
-      bottom: 0;
-    }
-
-    &.right-top {
-      left: calc(100% + var(--gap, 0.5rem));
-      top: 0;
-    }
-
-    &.right-center {
-      left: calc(100% + var(--gap, 0.5rem));
-      top: 50%;
-    }
-
-    &.right-bottom {
-      left: calc(100% + var(--gap, 0.5rem));
-      bottom: 0;
-    }
-  }
-}

package/src/components/badge.component.css

@@ -1,58 +0,0 @@
-span[b-badge] {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 0.875rem;
-  font-weight: 500;
-  border-radius: 9999px;
-  box-sizing: border-box;
-  transition:
-    background-color 0.2s,
-    opacity 0.2s;
-
-  &.primary {
-    background-color: var(--primary, #0a0a0a);
-    color: var(--primary-foreground, #ffffff);
-    border: var(--border-px, 0px) solid var(--primary-border-color, #0a0a0a);
-  }
-
-  &.secondary {
-    background-color: color-mix(
-      in srgb,
-      var(--secondary-foreground, #0a0a0a) 5%,
-      var(--secondary, transparent)
-    );
-    color: var(--secondary-foreground, #0a0a0a);
-  }
-
-  &.ghost {
-    background-color: transparent;
-    color: var(--secondary-foreground, #0a0a0a);
-
-    @media (width > 768px) {
-      &:hover {
-        background-color: color-mix(
-          in srgb,
-          var(--secondary-foreground, #0a0a0a) 5%,
-          var(--secondary, transparent)
-        );
-      }
-    }
-  }
-
-  &.outlined {
-    background-color: var(--background, #ffffff);
-    border: 1px solid var(--border-color, #ececec);
-    color: var(--secondary-foreground, #0a0a0a);
-  }
-
-  &.size-small {
-    font-size: 0.75rem;
-    padding: 0.2rem 0.6rem;
-  }
-
-  &.size-default {
-    font-size: 0.875rem;
-    padding: 0.25rem 0.8rem;
-  }
-}

package/src/components/bottom-sheet.component.css

@@ -1,49 +0,0 @@
-b-bottom-sheet {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: var(--background, #ffffff);
-  border-radius: 16px 16px 0 0;
-  border: 1px solid var(--border-color, transparent);
-  border-bottom: none;
-  display: flex;
-  flex-direction: column;
-  z-index: 1001;
-  will-change: transform;
-  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
-  touch-action: none;
-  user-select: none;
-  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
-  padding-top: 40px;
-  box-sizing: border-box;
-  overflow: hidden;
-  transform: translateY(100%);
-
-  &.dragging {
-    transition: none;
-  }
-
-  .drag-section {
-    width: 100%;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: grab;
-    touch-action: none;
-    position: absolute;
-    top: 0;
-
-    .drag-indicator {
-      width: 20%;
-      height: 4px;
-      background-color: var(--input-border-color, #e0e0e0);
-      border-radius: 2px;
-    }
-  }
-}
-
-html:has(b-bottom-sheet.open) {
-  overflow: hidden;
-}

package/src/components/button-group.component.css

@@ -1,20 +0,0 @@
-b-button-group {
-  display: flex;
-
-  &:not(.spaced) {
-    button:not(:last-child) {
-      border-right: none !important;
-      border-top-right-radius: 0 !important;
-      border-bottom-right-radius: 0 !important;
-    }
-
-    button:not(:first-child) {
-      border-top-left-radius: 0 !important;
-      border-bottom-left-radius: 0 !important;
-    }
-  }
-
-  &.spaced {
-    gap: 0.5rem;
-  }
-}

package/src/components/button.component.css

@@ -1,165 +0,0 @@
-button[b-button] {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: var(--primary, #0a0a0a);
-  border-radius: var(--radius, 0.5rem);
-  box-sizing: border-box;
-  gap: 0.5rem;
-  position: relative;
-  overflow: hidden;
-  transition:
-    background-color 0.2s,
-    opacity 0.2s;
-  border: none;
-  text-decoration: none;
-  font-family: 'Geist', sans-serif;
-  --border-px: 0px;
-
-  &:focus-visible {
-    outline: 2px solid var(--primary, #0a0a0a);
-    outline-offset: 2px;
-  }
-
-  &.primary,
-  &.outlined {
-    --border-px: 1px;
-  }
-
-  &.primary {
-    background-color: var(--primary, #0a0a0a);
-    color: var(--primary-foreground, #ffffff);
-    border: var(--border-px) solid var(--primary-border-color, #0a0a0a);
-
-    @media (width > 768px) {
-      &:hover {
-        background-color: color-mix(
-          in srgb,
-          var(--primary-foreground, #ffffff) 5%,
-          var(--primary, #0a0a0a)
-        );
-      }
-    }
-
-    &.toggled {
-      background-color: color-mix(
-        in srgb,
-        var(--primary-foreground, #ffffff) 5%,
-        var(--primary, #0a0a0a)
-      );
-    }
-  }
-
-  &.secondary {
-    background-color: var(--secondary);
-
-    @media (width > 768px) {
-      &:hover {
-        background-color: color-mix(
-          in srgb,
-          var(--secondary-foreground, #0a0a0a) 8%,
-          var(--secondary, transparent)
-        );
-      }
-    }
-
-    &.toggled {
-      background-color: color-mix(
-        in srgb,
-        var(--secondary-foreground, #0a0a0a) 8%,
-        var(--secondary, transparent)
-      );
-    }
-  }
-
-  &.ghost {
-    background-color: transparent;
-
-    @media (width > 768px) {
-      &:hover {
-        background-color: color-mix(
-          in srgb,
-          var(--secondary-foreground, #0a0a0a) 5%,
-          var(--secondary, transparent)
-        );
-      }
-    }
-
-    &.toggled {
-      background-color: color-mix(
-        in srgb,
-        var(--secondary-foreground, #0a0a0a) 5%,
-        var(--secondary, transparent)
-      );
-    }
-  }
-
-  &.outlined {
-    background-color: var(--background, #ffffff);
-    border: var(--border-px) solid var(--border-color, #ececec);
-
-    @media (width > 768px) {
-      &:hover {
-        background-color: color-mix(
-          in srgb,
-          var(--secondary-foreground, #0a0a0a) 5%,
-          var(--secondary, transparent)
-        );
-      }
-    }
-
-    &.toggled {
-      background-color: color-mix(
-        in srgb,
-        var(--secondary-foreground, #0a0a0a) 5%,
-        var(--secondary, transparent)
-      );
-    }
-  }
-
-  &.secondary,
-  &.ghost,
-  &.outlined {
-    color: var(--secondary-foreground, #0a0a0a);
-  }
-
-  &:not(:disabled) {
-    @media (width > 768px) {
-      &:hover {
-        cursor: pointer;
-      }
-    }
-
-    @media (width >= 768px) {
-      &.active {
-        &:active {
-          transform: scale(0.98);
-        }
-      }
-    }
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  &.size-1 {
-    padding-inline: 0.571rem;
-    height: 1.714rem;
-    font-size: 0.857rem;
-  }
-
-  &.size-2 {
-    padding-inline: 0.857rem;
-    height: 2.286rem;
-    font-size: 1rem;
-  }
-
-  &.size-3 {
-    padding-inline: 1.143rem;
-    height: 2.857rem;
-    font-size: 1.143rem;
-  }
-}

package/src/components/checkbox.component.css

@@ -1,41 +0,0 @@
-input[b-checkbox] {
-  appearance: none;
-  -webkit-appearance: none;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.3rem;
-  height: 1.3rem;
-  border: 1px solid var(--border, #d9d9d9);
-  border-radius: 0.25rem;
-  background-color: var(--background, #ffffff);
-  cursor: pointer;
-  transition:
-    background-color 0.2s,
-    border-color 0.2s;
-
-  &:checked {
-    background-color: var(--primary, #0a0a0a);
-    border-color: var(--primary, #0a0a0a);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--primary, #0a0a0a);
-    outline-offset: 2px;
-  }
-
-  &::after {
-    content: '';
-    display: block;
-    width: 90%;
-    height: 90%;
-    background-color: var(--background, #ffffff);
-    clip-path: polygon(14% 48%, 19% 43%, 39% 63%, 82% 15%, 87% 20%, 39% 74%);
-    opacity: 0;
-    transition: opacity 0.2s;
-  }
-
-  &:checked::after {
-    opacity: 1;
-  }
-}

package/src/components/color-picker.component.css

@@ -1,34 +0,0 @@
-input[b-color-picker] {
-  width: 100%;
-  position: relative;
-  width: 100%;
-  height: 2.8rem;
-  background: none;
-  padding: 0;
-  border: 0;
-  cursor: pointer;
-
-  &::-webkit-color-swatch-wrapper {
-    width: 100%;
-    height: 2.8rem;
-    padding: 0;
-  }
-
-  &::-webkit-color-swatch {
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius);
-  }
-
-  &.show-color {
-    &::before {
-      content: var(--value);
-      display: flex;
-      color: var(--text-color);
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      font-family: 'Geist', sans-serif;
-    }
-  }
-}

package/src/components/combobox-options.component.css

@@ -1,41 +0,0 @@
-ul[b-combobox-options] {
-  list-style: none;
-  padding: 0.2rem;
-  box-sizing: border-box;
-  margin: 0;
-  position: relative;
-  background: var(--background, #ffffff);
-  box-shadow: 0 0 0.25rem 0.125rem rgba(1, 1, 1, 0.01);
-  border-radius: clamp(0rem, var(--radius, 0.5rem), 0.5rem);
-  border: 1px solid
-    color-mix(
-      in srgb,
-      var(--foreground, #798194) 10%,
-      var(--background, #ffffff)
-    );
-  display: flex;
-  flex-direction: column;
-  gap: 0.2rem;
-  width: 100%;
-  overflow-y: auto;
-}
-
-.cdk-overlay-pane:has(ul[b-combobox-options]) {
-  opacity: 1;
-  transition: transform 150ms ease;
-  animation: fadeIn 150ms ease;
-
-  &.cdk-overlay-pane-closing {
-    transform: translateY(0) !important;
-    opacity: 0;
-    transition:
-      opacity 150ms ease,
-      transform 150ms ease;
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-}

package/src/components/combobox.component.css

@@ -1,10 +0,0 @@
-b-combobox {
-  width: 100%;
-
-  button {
-    display: flex;
-    justify-content: space-between !important;
-    align-items: center;
-    width: 100%;
-  }
-}

package/src/components/command-options.component.css

@@ -1,33 +0,0 @@
-ul[b-command-options] {
-  list-style: none;
-  box-sizing: border-box;
-  margin: 0;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  width: 100%;
-  overflow-y: auto;
-  padding: 0;
-  scrollbar-width: thin;
-}
-
-.cdk-overlay-pane:has(ul[b-select-options]) {
-  opacity: 1;
-  transition: transform 150ms ease;
-  animation: fadeIn 150ms ease;
-
-  &.cdk-overlay-pane-closing {
-    transform: translateY(0) !important;
-    opacity: 0;
-    transition:
-      opacity 150ms ease,
-      transform 150ms ease;
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-}

package/src/components/command.component.css

@@ -1,45 +0,0 @@
-b-command {
-  padding: 0.25rem;
-  box-sizing: border-box;
-  margin: 0;
-  position: relative;
-  background: var(--background, #ffffff);
-  box-shadow: 0 0 0.25rem 0.125rem rgba(1, 1, 1, 0.01);
-  border-radius: clamp(0rem, var(--radius, 0.5rem), 0.5rem);
-  border: 1px solid
-    color-mix(
-      in srgb,
-      var(--foreground, #798194) 10%,
-      var(--background, #ffffff)
-    );
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  width: 100%;
-
-  input {
-    &:focus-visible {
-      outline: none !important;
-    }
-  }
-}
-
-.cdk-overlay-pane:has(b-command) {
-  opacity: 1;
-  transition: transform 150ms ease;
-  animation: fadeIn 150ms ease;
-
-  &.cdk-overlay-pane-closing {
-    transform: translateY(0) !important;
-    opacity: 0;
-    transition:
-      opacity 150ms ease,
-      transform 150ms ease;
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-}

package/src/components/icon.component.css

@@ -1,5 +0,0 @@
-i[b-icon] {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}