ngx-strata 0.5.2 → 0.6.1

package/assets/styles/components/file-upload.scss

@@ -1,168 +0,0 @@
-st-file-upload {
-  --st-file-upload-bg: var(--st-color-bg-default);
-  --st-file-upload-border: var(--st-color-border-default);
-  --st-file-upload-text: var(--st-color-text-primary);
-  --st-file-upload-hint: var(--st-color-text-secondary);
-  --st-file-upload-hover-bg: var(--st-color-bg-raised);
-  --st-file-upload-hover-border: var(--st-color-accent-default);
-  --st-file-upload-active-border: var(--st-color-accent-default);
-  --st-file-upload-active-bg: var(--st-color-accent-subtle, var(--st-color-bg-raised));
-  --st-file-upload-icon-color: var(--st-color-text-secondary);
-  --st-file-upload-radius: var(--st-border-radius-xl);
-
-  display: block;
-  position: relative;
-  box-sizing: border-box;
-  background-color: var(--st-file-upload-bg);
-  border: 2px dashed var(--st-file-upload-border);
-  border-radius: var(--st-file-upload-radius);
-  padding: var(--st-space-6) var(--st-space-4);
-  text-align: center;
-  cursor: pointer;
-  transition:
-    border-color var(--st-transition-fast),
-    background-color var(--st-transition-fast),
-    transform var(--st-transition-fast);
-  user-select: none;
-  outline: none;
-
-  &:hover:not(.st-disabled) {
-    background-color: var(--st-file-upload-hover-bg);
-    border-color: var(--st-file-upload-hover-border);
-
-    .st-file-upload-icon {
-      color: var(--st-color-accent-default);
-      transform: translateY(-2px);
-    }
-  }
-
-  &:focus-visible:not(.st-disabled) {
-    outline: 2px solid var(--st-color-accent-default);
-    outline-offset: 2px;
-  }
-
-  &.st-drag-over {
-    background-color: var(--st-file-upload-active-bg);
-    border-color: var(--st-file-upload-active-border);
-    border-style: solid;
-    transform: scale(1.01);
-
-    .st-file-upload-icon {
-      color: var(--st-color-accent-default);
-      transform: translateY(-4px) scale(1.1);
-    }
-  }
-
-  &.st-disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  .st-file-upload-input {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-
-  .st-file-upload-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: var(--st-space-3);
-  }
-
-  .st-file-upload-icon-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-    background-color: var(--st-color-bg-raised);
-    transition: transform 0.2s ease;
-  }
-
-  .st-file-upload-icon {
-    width: 24px;
-    height: 24px;
-    color: var(--st-file-upload-icon-color);
-    transition: color 0.2s ease, transform 0.2s ease;
-  }
-
-  .st-file-upload-text {
-    display: flex;
-    flex-direction: column;
-    gap: var(--st-space-1);
-  }
-
-  .st-file-upload-label {
-    font-size: 0.95rem;
-    font-weight: 500;
-    color: var(--st-file-upload-text);
-  }
-
-  &.st-state-error,
-  &.st-error {
-    --st-file-upload-border: var(--st-color-feedback-error-default);
-    --st-file-upload-hover-border: var(--st-color-feedback-error-hover, var(--st-color-feedback-error-default));
-
-    &:hover:not(.st-disabled) .st-file-upload-icon {
-      color: var(--st-color-feedback-error-default);
-    }
-
-    &:focus-visible:not(.st-disabled) {
-      outline-color: var(--st-color-feedback-error-default);
-    }
-  }
-
-  &.st-state-success {
-    --st-file-upload-border: var(--st-color-feedback-success-default);
-    --st-file-upload-hover-border: var(--st-color-feedback-success-hover, var(--st-color-feedback-success-default));
-
-    &:hover:not(.st-disabled) .st-file-upload-icon {
-      color: var(--st-color-feedback-success-default);
-    }
-
-    &:focus-visible:not(.st-disabled) {
-      outline-color: var(--st-color-feedback-success-default);
-    }
-  }
-
-  &.st-state-warning {
-    --st-file-upload-border: var(--st-color-feedback-warning-default);
-    --st-file-upload-hover-border: var(--st-color-feedback-warning-hover, var(--st-color-feedback-warning-default));
-
-    &:hover:not(.st-disabled) .st-file-upload-icon {
-      color: var(--st-color-feedback-warning-default);
-    }
-
-    &:focus-visible:not(.st-disabled) {
-      outline-color: var(--st-color-feedback-warning-default);
-    }
-  }
-
-  .st-file-upload-hint {
-    font-size: 0.8rem;
-    color: var(--st-file-upload-hint);
-
-    &.st-message-error {
-      color: var(--st-color-feedback-error-text);
-    }
-
-    &.st-message-success {
-      color: var(--st-color-feedback-success-text);
-    }
-
-    &.st-message-warning {
-      color: var(--st-color-feedback-warning-text);
-    }
-  }
-}

package/assets/styles/components/segmented-control.scss

@@ -1,193 +0,0 @@
-st-segmented-control {
-  --st-segmented-control-height: var(--st-interactive-element-height-md);
-  --st-segmented-control-item-height: calc(var(--st-segmented-control-height) - 8px);
-  --st-segmented-control-font-size: 14px;
-  --st-segmented-control-padding-x: var(--st-size-xxs);
-  --st-segmented-control-border-radius: var(--st-border-radius-md);
-  --st-segmented-control-border-color: transparent;
-  --st-segmented-control-error-border: var(--st-color-feedback-error-default);
-  --st-segmented-control-success-border: var(--st-color-feedback-success-default);
-  --st-segmented-control-warning-border: var(--st-color-feedback-warning-default);
-
-  display: inline-flex;
-  flex-direction: column;
-  width: fit-content;
-  max-width: 100%;
-  box-sizing: border-box;
-
-  &.st-size-sm {
-    --st-segmented-control-height: var(--st-interactive-element-height-sm);
-    --st-segmented-control-item-height: calc(var(--st-segmented-control-height) - 4px);
-    --st-segmented-control-font-size: 12px;
-    --st-segmented-control-padding-x: var(--st-size-xxxs);
-
-    .st-segmented-control-track {
-      padding: 2px;
-      gap: 2px;
-    }
-  }
-
-  &.st-size-md {
-    --st-segmented-control-height: var(--st-interactive-element-height-md);
-    --st-segmented-control-item-height: calc(var(--st-segmented-control-height) - 8px);
-    --st-segmented-control-font-size: 14px;
-    --st-segmented-control-padding-x: var(--st-size-xxs);
-
-    .st-segmented-control-track {
-      padding: 4px;
-      gap: 4px;
-    }
-  }
-
-  &.st-size-lg {
-    --st-segmented-control-height: var(--st-interactive-element-height-lg);
-    --st-segmented-control-item-height: calc(var(--st-segmented-control-height) - 8px);
-    --st-segmented-control-font-size: 16px;
-    --st-segmented-control-padding-x: var(--st-size-xs);
-
-    .st-segmented-control-track {
-      padding: 4px;
-      gap: 4px;
-    }
-  }
-
-  &.st-state-error {
-    --st-segmented-control-border-color: var(--st-segmented-control-error-border);
-  }
-
-  &.st-state-success {
-    --st-segmented-control-border-color: var(--st-segmented-control-success-border);
-  }
-
-  &.st-state-warning {
-    --st-segmented-control-border-color: var(--st-segmented-control-warning-border);
-  }
-
-  .st-segmented-control-track {
-    display: inline-flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    overflow-x: auto;
-    width: fit-content;
-    max-width: 100%;
-    min-width: 0;
-    position: relative;
-    border-radius: var(--st-segmented-control-border-radius);
-    border: 1px solid var(--st-segmented-control-border-color);
-    box-sizing: border-box;
-    background-color: var(--st-color-bg-raised);
-    height: var(--st-segmented-control-height);
-    padding: 4px;
-    gap: 4px;
-    transition: border-color var(--st-transition-fast);
-
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  &.st-segmented-control-full-width {
-    width: 100%;
-
-    .st-segmented-control-track {
-      display: flex;
-      width: 100%;
-
-      st-segmented-control-item {
-        flex: 1;
-      }
-    }
-  }
-
-  button,
-  st-segmented-control-item {
-    border: none;
-    color: var(--st-color-text-primary);
-    flex-shrink: 0;
-    text-wrap: nowrap;
-
-    background-color: transparent;
-
-    &[disabled] {
-      pointer-events: none;
-      color: var(--st-color-text-tertiary);
-
-      cursor: unset;
-    }
-
-    &:hover:not([disabled]) {
-      cursor: pointer;
-      background-color: var(--st-color-control-bg-hover);
-      color: var(--st-color-text-primary);
-    }
-  }
-
-  .selection-item,
-  st-segmented-control-item {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--st-space-2, 8px);
-    height: var(--st-segmented-control-item-height);
-    padding: 0 var(--st-segmented-control-padding-x);
-    border-radius: calc(var(--st-segmented-control-border-radius) - 2px);
-    font-size: var(--st-segmented-control-font-size);
-    font-weight: 500;
-    user-select: none;
-    transition: background-color var(--st-transition-fast), color var(--st-transition-fast);
-  }
-
-  st-segmented-control-item {
-    position: relative;
-    z-index: 1;
-
-    &[aria-selected="true"] {
-      color: var(--st-color-control-primary-text);
-
-      &:hover {
-        background-color: transparent;
-      }
-    }
-
-    st-badge {
-      flex-shrink: 0;
-    }
-  }
-
-  #selection-indicator {
-    cursor: default;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 0;
-    pointer-events: none;
-    border-radius: calc(var(--st-segmented-control-border-radius) - 2px);
-    background-color: var(--st-color-control-primary-bg);
-    color: var(--st-color-control-primary-text);
-    text-wrap: nowrap;
-    box-shadow: var(--st-shadow-1);
-    transition:
-      left var(--st-transition-fast),
-      width var(--st-transition-fast);
-  }
-
-  .st-segmented-control-message {
-    margin-top: var(--st-space-1);
-    font-size: var(--st-font-size-sm, 12px);
-    color: var(--st-color-text-secondary);
-
-    &.st-message-error {
-      color: var(--st-color-feedback-error-text);
-    }
-
-    &.st-message-success {
-      color: var(--st-color-feedback-success-text);
-    }
-
-    &.st-message-warning {
-      color: var(--st-color-feedback-warning-text);
-    }
-  }
-}