@streamscloud/kit 0.2.1 → 0.2.2

package/dist/ui/selects/_singleselect.scss

@@ -0,0 +1,175 @@
+@use 'styles/colors';
+@use 'styles/functions';
+@use 'styles/mixins';
+
+@mixin singleselect {
+  --_singleselect--root--font-size: var(--sc-kit--singleselect--root--font-size, 1rem);
+  --_singleselect--height: var(--sc-kit--singleselect--height, #{functions.em(32)});
+  --_singleselect--width: var(--sc-kit--singleselect--width, 100%);
+  --_singleselect--background: var(--sc-kit--singleselect--background, light-dark(#{colors.$color-white}, #{colors.$color-gray-900}));
+  --_singleselect--background--disabled: var(
+    --sc-kit--singleselect--background--disabled,
+    light-dark(#{colors.$color-neutral-50}, #{colors.$color-neutral-800})
+  );
+  --_singleselect--border-color: var(--sc-kit--singleselect--border-color, light-dark(#{colors.$color-neutral-300}, #{colors.$color-neutral-600}));
+  --_singleselect--border-radius: var(--sc-kit--singleselect--border-radius, #{functions.em(4)});
+  --_singleselect--text--font-size: var(--sc-kit--singleselect--text--font-size, #{functions.em(14)});
+  --_singleselect--text--color: var(--sc-kit--singleselect--text--color, light-dark(#{colors.$color-gray-800}, #{colors.$color-white}));
+  --_singleselect--placeholder--color: var(--sc-kit--singleselect--placeholder--color, var(--_singleselect--border-color));
+  --_singleselect--icon--color: var(--sc-kit--singleselect--icon--color, var(--_singleselect--border-color));
+  --_singleselect--padding-inline: var(--sc-kit--singleselect--padding-inline, #{functions.em(8)});
+  --_singleselect--padding-block: var(--sc-kit--singleselect--padding-block, #{functions.em(4)});
+
+  --_singleselect--options--max-height: var(--sc-kit--singleselect--options--max-height, #{functions.em(320)});
+  --_singleselect--item--hover--background: var(
+    --sc-kit--singleselect--item--hover--background,
+    light-dark(#{colors.$color-gray-100}, #{colors.$color-gray-800})
+  );
+  --_singleselect--item--active--background: var(
+    --sc-kit--singleselect--item--active--background,
+    light-dark(#{colors.$color-neutral-50}, #{colors.$color-neutral-700})
+  );
+
+  --_singleselect--group-header--color: var(--sc-kit--singleselect--group-header--color, var(--_singleselect--placeholder--color));
+  --_singleselect--group-header--font-weight: var(--sc-kit--singleselect--group-header--font-weight, 500);
+  --_singleselect--group-item--padding-left: var(--sc-kit--singleselect--group-item--padding-left, #{functions.em(16)});
+
+  // svelte-select CSS variable mappings
+  --background: var(--_singleselect--background);
+  --border: 1px solid var(--_singleselect--border-color);
+  --border-focused: var(--border);
+  --border-hover: var(--border);
+  --border-radius: var(--_singleselect--border-radius);
+  --border-radius-focused: var(--border-radius);
+  --box-sizing: border-box;
+  --chevron-background: transparent;
+  --chevron-border: transparent;
+  --chevron-color: transparent;
+  --chevron-height: auto;
+  --chevron-pointer-events: none;
+  --chevron-width: auto;
+  --disabled-background: var(--_singleselect--background--disabled);
+  --disabled-border-color: var(--_singleselect--border-color);
+  --disabled-color: var(--_singleselect--text--color);
+  --disabled-placeholder-color: var(--placeholder-color);
+  --disabled-placeholder-opacity: var(--placeholder-opacity);
+  --font-size: var(--_singleselect--text--font-size);
+  --height: var(--_singleselect--height);
+  --icons-color: var(--_singleselect--icon--color);
+  --indicators-bottom: auto;
+  --indicators-position: static;
+  --indicators-right: auto;
+  --indicators-top: auto;
+  --input--color: var(--_singleselect--text--color);
+  --input-left: 0;
+  --input-letter-spacing: 1;
+  --input-margin: 0;
+  --input-padding: 0 var(--_singleselect--padding-inline) 0 0;
+  --item-active-background: var(--_singleselect--item--active--background);
+  --item-color: var(--_singleselect--text--color);
+  --item-first-border-radius: 0;
+  --item-height: auto;
+  --item-hover-bg: var(--_singleselect--item--hover--background);
+  --item-hover-color: var(--_singleselect--text--color);
+  --item-is-active-bg: var(--_singleselect--item--active--background);
+  --item-is-active-color: var(--_singleselect--text--color);
+  --item-is-not-selectable-color: var(--_singleselect--group-header--color);
+  --item-line-height: 1;
+  --item-padding: var(--_singleselect--padding-block) var(--_singleselect--padding-inline);
+  --item-transition: auto;
+  --list-background: var(--background);
+  --list-border: var(--border);
+  --list-border-radius: var(--border-radius);
+  --list-max-height: var(--_singleselect--options--max-height);
+  --list-position: absolute;
+  --list-shadow: none;
+  --list-z-index: 2;
+  --loading--margin: 0;
+  --loading-color: var(--icons-color);
+  --loading-height: max-content;
+  --loading-width: max-content;
+  --margin: 0;
+  --max-height: var(--height);
+  --padding: 0 var(--_singleselect--padding-inline) 0 0;
+  --placeholder-color: var(--_singleselect--placeholder--color);
+  --placeholder-opacity: 0.8;
+  --selected-item-color: auto;
+  --selected-item-overflow: auto;
+  --selected-item-padding: auto;
+  --spinner-color: var(--icons-color);
+  --spinner-height: var(--_singleselect--text--font-size);
+  --spinner-width: var(--_singleselect--text--font-size);
+  --value-container-overflow: hidden;
+  --value-container-padding: 0;
+  --width: var(--_singleselect--width);
+  --group-title-color: var(--_singleselect--group-header--color);
+  --group-title-font-weight: var(--_singleselect--group-header--font-weight);
+  --group-title-font-size: var(--_singleselect--text--font-size);
+  --group-title-padding: var(--_singleselect--padding-block) var(--_singleselect--padding-inline);
+  --group-item-padding-left: var(--_singleselect--group-item--padding-left);
+
+  font-size: var(--_singleselect--root--font-size);
+  width: var(--_singleselect--width);
+  position: relative;
+
+  &__icon {
+    --sc-kit--icon--color: var(--_singleselect--icon--color);
+    --sc-kit--icon--size: 1.25em;
+    display: flex;
+    align-items: center;
+
+    &--prepend {
+      padding: 0 var(--_singleselect--padding-inline);
+
+      :global &:not(:has(*)) {
+        padding-right: 0 !important;
+      }
+    }
+  }
+
+  &__option {
+    font-size: var(--_singleselect--text--font-size);
+
+    &--faded {
+      color: var(--_singleselect--placeholder--color);
+      opacity: 0.5;
+    }
+  }
+
+  &__selection {
+    @include mixins.width(100%);
+    @include mixins.height(100%);
+    display: flex;
+    align-items: center;
+    min-width: 0;
+  }
+
+  &__selection-text {
+    @include mixins.ellipsis;
+  }
+
+  &__no-options {
+    color: var(--_singleselect--placeholder--color);
+    padding: var(--_singleselect--padding-block) var(--_singleselect--padding-inline);
+  }
+
+  &--disabled {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  &--loading {
+    pointer-events: none;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: light-dark(hsl(0, 0%, 97%), hsl(0, 0%, 3%));
+      opacity: 0.5;
+    }
+  }
+}