ropav 0.1.7 → 0.1.9

package/dist/multi-select.css

@@ -0,0 +1,316 @@
+@layer ropav.components {
+.rp-multi-select[data-v-b38d027f] {
+    --_rp-multi-select-height: var(--rp-size-control-md);
+    --_rp-multi-select-padding-x: calc(var(--rp-size-control-md) / 3);
+    --_rp-multi-select-font-size: var(--rp-font-size-md);
+    --_rp-multi-select-option-min-height: calc(var(--rp-size-control-md) - var(--rp-spacing-4));
+    --_rp-multi-select-option-padding-y: var(--rp-spacing-1);
+    --_rp-multi-select-radius: var(--rp-radius-sm);
+    --_rp-multi-select-invalid-border: var(--rp-color-red-filled);
+    --_rp-multi-select-invalid-ring: color-mix(
+        in srgb,
+        var(--rp-color-red-filled) 32%,
+        transparent
+    );
+    --_rp-multi-select-option-highlighted-bg: var(--rp-color-default-hover);
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-width: 180px;
+    min-height: var(--_rp-multi-select-height);
+    padding: var(--rp-spacing-1) var(--_rp-multi-select-padding-x);
+    gap: var(--rp-spacing-2);
+    font-family: var(--rp-font-family);
+    font-size: var(--_rp-multi-select-font-size);
+    font-weight: var(--rp-font-weight-normal);
+    line-height: 1;
+    background-color: var(--rp-color-control-bg);
+    border: var(--rp-border-width-thin) solid var(--rp-color-control-border);
+    border-radius: var(--_rp-multi-select-radius);
+    cursor: text;
+    transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
+}
+.rp-multi-select[data-v-b38d027f]:hover:not(.rp-multi-select--disabled):not(.rp-multi-select--invalid) {
+    border-color: var(--rp-color-control-border-hover);
+}
+.rp-multi-select[data-v-b38d027f]:focus-within:not(.rp-multi-select--disabled):not(.rp-multi-select--invalid), .rp-multi-select--open[data-v-b38d027f]:not(.rp-multi-select--disabled):not(.rp-multi-select--invalid) {
+    border-color: var(--rp-color-control-border-focus);
+    box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
+}
+.rp-multi-select__native[data-v-b38d027f] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+}
+.rp-multi-select--size-xs[data-v-b38d027f] {
+    --_rp-multi-select-height: var(--rp-size-control-xs);
+    --_rp-multi-select-padding-x: calc(var(--rp-size-control-xs) / 3);
+    --_rp-multi-select-font-size: var(--rp-font-size-xs);
+    --_rp-multi-select-option-min-height: calc(var(--rp-size-control-xs) - var(--rp-spacing-2));
+    --_rp-multi-select-option-padding-y: calc(var(--rp-spacing-1) / 2);
+}
+.rp-multi-select--size-sm[data-v-b38d027f] {
+    --_rp-multi-select-height: var(--rp-size-control-sm);
+    --_rp-multi-select-padding-x: calc(var(--rp-size-control-sm) / 3);
+    --_rp-multi-select-font-size: var(--rp-font-size-sm);
+    --_rp-multi-select-option-min-height: calc(var(--rp-size-control-sm) - var(--rp-spacing-3));
+    --_rp-multi-select-option-padding-y: var(--rp-spacing-1);
+}
+.rp-multi-select--size-md[data-v-b38d027f] {
+    --_rp-multi-select-height: var(--rp-size-control-md);
+    --_rp-multi-select-padding-x: calc(var(--rp-size-control-md) / 3);
+    --_rp-multi-select-font-size: var(--rp-font-size-md);
+    --_rp-multi-select-option-min-height: calc(var(--rp-size-control-md) - var(--rp-spacing-4));
+    --_rp-multi-select-option-padding-y: var(--rp-spacing-1);
+}
+.rp-multi-select--size-lg[data-v-b38d027f] {
+    --_rp-multi-select-height: var(--rp-size-control-lg);
+    --_rp-multi-select-padding-x: calc(var(--rp-size-control-lg) / 3);
+    --_rp-multi-select-font-size: var(--rp-font-size-lg);
+    --_rp-multi-select-option-min-height: calc(var(--rp-size-control-lg) - var(--rp-spacing-5));
+    --_rp-multi-select-option-padding-y: calc(var(--rp-spacing-3) / 2);
+}
+.rp-multi-select--size-xl[data-v-b38d027f] {
+    --_rp-multi-select-height: var(--rp-size-control-xl);
+    --_rp-multi-select-padding-x: calc(var(--rp-size-control-xl) / 3);
+    --_rp-multi-select-font-size: var(--rp-font-size-xl);
+    --_rp-multi-select-option-min-height: calc(var(--rp-size-control-xl) - var(--rp-spacing-6));
+    --_rp-multi-select-option-padding-y: var(--rp-spacing-2);
+}
+.rp-multi-select--radius-xs[data-v-b38d027f] {
+    --_rp-multi-select-radius: var(--rp-radius-xs);
+}
+.rp-multi-select--radius-sm[data-v-b38d027f] {
+    --_rp-multi-select-radius: var(--rp-radius-sm);
+}
+.rp-multi-select--radius-md[data-v-b38d027f] {
+    --_rp-multi-select-radius: var(--rp-radius-md);
+}
+.rp-multi-select--radius-lg[data-v-b38d027f] {
+    --_rp-multi-select-radius: var(--rp-radius-lg);
+}
+.rp-multi-select--radius-xl[data-v-b38d027f] {
+    --_rp-multi-select-radius: var(--rp-radius-xl);
+}
+html.dark .rp-multi-select[data-v-b38d027f], [data-rp-color-scheme=dark] .rp-multi-select[data-v-b38d027f] {
+    --_rp-multi-select-invalid-border: var(--rp-color-red-light-color);
+    --_rp-multi-select-invalid-ring: color-mix(
+        in srgb,
+        var(--rp-color-red-light-color) 32%,
+        transparent
+    );
+}
+.rp-multi-select--disabled[data-v-b38d027f] {
+    opacity: var(--rp-opacity-disabled);
+    cursor: not-allowed;
+}
+.rp-multi-select--invalid[data-v-b38d027f] {
+    border-color: var(--_rp-multi-select-invalid-border);
+}
+.rp-multi-select--invalid[data-v-b38d027f]:focus-within, .rp-multi-select--open.rp-multi-select--invalid[data-v-b38d027f] {
+    border-color: var(--_rp-multi-select-invalid-border);
+    box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-multi-select-invalid-ring);
+}
+.rp-multi-select__pills[data-v-b38d027f] {
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    align-items: center;
+    min-width: 0;
+    gap: var(--rp-spacing-1);
+}
+.rp-multi-select__pill[data-v-b38d027f] {
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    max-width: 100%;
+    min-height: calc(var(--_rp-multi-select-height) - var(--rp-spacing-3));
+    padding-inline: var(--rp-spacing-2) var(--rp-spacing-1);
+    gap: var(--rp-spacing-1);
+    color: var(--rp-color-control-fg);
+    background-color: var(--rp-color-default-hover);
+    border-radius: var(--_rp-multi-select-radius);
+}
+.rp-multi-select__pill-label[data-v-b38d027f] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.rp-multi-select__pill-remove[data-v-b38d027f] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    font: inherit;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: inherit;
+    opacity: 0.6;
+    flex-shrink: 0;
+    transition: opacity var(--rp-transition-fast);
+}
+.rp-multi-select__pill-remove[data-v-b38d027f]:hover {
+    opacity: 1;
+}
+.rp-multi-select__pill-remove svg[data-v-b38d027f] {
+    width: 100%;
+    height: 100%;
+}
+.rp-multi-select__pill-remove[data-v-b38d027f] {
+    width: 1em;
+    height: 1em;
+}
+.rp-multi-select__pill-remove[data-v-b38d027f]:disabled {
+    cursor: not-allowed;
+}
+.rp-multi-select__input[data-v-b38d027f] {
+    box-sizing: border-box;
+    flex: 1 0 4rem;
+    width: 4rem;
+    min-width: 4rem;
+    min-height: calc(var(--_rp-multi-select-height) - var(--rp-spacing-2));
+    padding: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+    font: inherit;
+    color: var(--rp-color-control-fg);
+    line-height: 1;
+}
+.rp-multi-select__input[data-v-b38d027f]::placeholder {
+    color: var(--rp-color-control-placeholder);
+}
+.rp-multi-select__input[data-v-b38d027f]:disabled {
+    cursor: not-allowed;
+}
+.rp-multi-select__indicator[data-v-b38d027f] {
+    display: inline-flex;
+    align-items: center;
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+}
+.rp-multi-select__indicator svg[data-v-b38d027f] {
+    width: 100%;
+    height: 100%;
+}
+.rp-multi-select__indicator[data-v-b38d027f] {
+    position: relative;
+    flex-shrink: 0;
+    color: var(--rp-color-control-icon);
+    transform: translateX(var(--rp-spacing-1));
+}
+.rp-multi-select__toggle[data-v-b38d027f], .rp-multi-select__clear[data-v-b38d027f] {
+    padding: 0;
+    font: inherit;
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+}
+.rp-multi-select__toggle svg[data-v-b38d027f], .rp-multi-select__clear svg[data-v-b38d027f] {
+    width: 100%;
+    height: 100%;
+}
+.rp-multi-select__toggle[data-v-b38d027f], .rp-multi-select__clear[data-v-b38d027f] {
+    color: var(--rp-color-control-icon);
+    transition: color var(--rp-transition-fast), opacity var(--rp-transition-fast);
+}
+.rp-multi-select__toggle[data-v-b38d027f]:hover, .rp-multi-select__clear[data-v-b38d027f]:hover {
+    color: var(--rp-color-control-fg);
+}
+.rp-multi-select__toggle[data-v-b38d027f]:disabled {
+    cursor: not-allowed;
+}
+.rp-multi-select__clear[data-v-b38d027f] {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    background-color: var(--rp-color-control-bg);
+    opacity: 0;
+    pointer-events: none;
+}
+.rp-multi-select:hover .rp-multi-select__clear[data-v-b38d027f] {
+    opacity: 1;
+    pointer-events: auto;
+}
+.rp-multi-select:hover .rp-multi-select__clear + .rp-multi-select__toggle[data-v-b38d027f] {
+    opacity: 0;
+}
+.rp-multi-select__dropdown[data-v-b38d027f] {
+    position: absolute;
+    width: calc(100% + var(--rp-border-width-thin) * 2);
+    z-index: 100;
+    background-color: var(--rp-color-default);
+    border: var(--rp-border-width-thin) solid var(--rp-color-default-border);
+    border-radius: var(--_rp-multi-select-radius);
+    box-shadow: var(--rp-shadow-md);
+    padding: var(--rp-spacing-1) 0;
+    max-height: 240px;
+    padding: var(--rp-spacing-1);
+}
+.rp-multi-select__dropdown[data-v-b38d027f] .rp-scroll-area__viewport {
+    scroll-padding-block: var(--rp-spacing-1);
+}
+.rp-multi-select__option[data-v-b38d027f] {
+    display: flex;
+    align-items: center;
+    min-height: var(--_rp-multi-select-option-min-height);
+    padding: var(--_rp-multi-select-option-padding-y) var(--_rp-multi-select-padding-x);
+    gap: var(--rp-spacing-2);
+    border-radius: var(--_rp-multi-select-radius);
+    font-size: var(--_rp-multi-select-font-size);
+    cursor: pointer;
+    color: var(--rp-color-control-fg);
+    transition: color var(--rp-transition-fast);
+}
+.rp-multi-select__option svg[data-v-b38d027f] {
+    width: 1em;
+    height: 1em;
+    margin-inline-start: auto;
+    flex-shrink: 0;
+}
+.rp-multi-select__option--highlighted[data-v-b38d027f] {
+    background-color: var(--_rp-multi-select-option-highlighted-bg);
+}
+.rp-multi-select__option--selected[data-v-b38d027f] {
+    color: var(--rp-primary-color-light-color);
+}
+.rp-multi-select__option--disabled[data-v-b38d027f] {
+    color: var(--rp-color-disabled-color);
+    cursor: not-allowed;
+}
+.rp-multi-select__empty[data-v-b38d027f] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--rp-spacing-4);
+    color: var(--rp-color-dimmed);
+    font-size: var(--_rp-multi-select-font-size);
+}
+.rp-multi-select-dropdown-enter-active[data-v-b38d027f],
+  .rp-multi-select-dropdown-leave-active[data-v-b38d027f] {
+    transition: opacity var(--rp-transition-fast), transform var(--rp-transition-fast);
+}
+.rp-multi-select-dropdown-enter-from[data-v-b38d027f],
+  .rp-multi-select-dropdown-leave-to[data-v-b38d027f] {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--rp-spacing-1)));
+}
+.rp-multi-select__dropdown[data-side=top].rp-multi-select-dropdown-enter-from[data-v-b38d027f],
+  .rp-multi-select__dropdown[data-side=top].rp-multi-select-dropdown-leave-to[data-v-b38d027f] {
+    transform: translateY(var(--rp-spacing-1));
+}
+}