@dropi/ui 0.1.22 → 0.1.23

package/dist/collection/components/dropi-select/dropi-select.css

@@ -1,366 +0,0 @@
-:host {
-  display: block;
-  width: 100%;
-  text-align: left;
-}
-
-*, *::before, *::after { box-sizing: border-box; }
-
-/* ── Wrapper ────────────────────────────────────────────────── */
-.custom-select {
-  position: relative;
-  width: 100%;
-}
-
-.custom-select label {
-  display: block;
-  font-size: var(--font-size-xs, 10px);
-  font-weight: var(--font-weight-regular, 400);
-  color: var(--Gray-Gray-600, #475066);
-}
-
-.disabled-label {
-  color: var(--Gray-Gray-400, #858ea6) !important;
-}
-
-.asterisk {
-  color: var(--Error-Error-500, #f46a6b);
-}
-
-/* ── Trigger row ────────────────────────────────────────────── */
-.dropdown-container {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.left-label {
-  color: var(--Gray-Gray-600, #475066);
-  font-size: var(--font-size-m, 14px);
-  white-space: nowrap;
-}
-
-/* ── Trigger button ─────────────────────────────────────────── */
-.select-button {
-  box-sizing: border-box;
-  width: 100%;
-  height: 40px;
-  padding: 0 0.75rem;
-  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
-  border-radius: var(--Border-2, 8px);
-  background: var(--Neutral-White, #ffffff);
-  color: var(--Gray-Gray-500, #69738c);
-  font-size: var(--font-size-s, 12px);
-  font-family: inherit;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  text-align: left;
-  cursor: pointer;
-  transition: border-color 0.2s ease;
-  gap: 8px;
-}
-
-.select-button:focus {
-  outline: none;
-  border-color: var(--Info-Info-500, #50a5f1);
-}
-
-.select-button:disabled {
-  border-color: var(--Gray-Gray-200, #c3c9d9);
-  color: var(--Gray-Gray-400, #858ea6);
-  background-color: var(--Gray-Gray-50, #f7f8fa);
-  cursor: not-allowed;
-}
-
-.select-completed {
-  border-color: var(--Gray-Gray-400, #858ea6);
-  color: var(--Gray-Gray-600, #475066);
-}
-
-.select-button-error {
-  border-color: var(--Error-Error-500, #f46a6b) !important;
-}
-
-.no-border {
-  border: none !important;
-  color: var(--Gray-Gray-600, #475066);
-  padding: var(--Size-4, 16px);
-  background-color: transparent !important;
-  gap: var(--Size-2, 8px);
-}
-
-.no-border:disabled {
-  background-color: transparent !important;
-}
-
-/* ── Button content ─────────────────────────────────────────── */
-.button-content {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  overflow: hidden;
-  flex: 1;
-  min-width: 0;
-}
-
-.elipsis {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* ── Dropdown overlay (fixed position) ──────────────────────── */
-.select-dropdown-overlay {
-  position: fixed;
-  max-height: 250px;
-  overflow-y: auto;
-  list-style: none;
-  padding: var(--Size-4, 16px) var(--Size-4, 16px) var(--Size-3, 12px);
-  margin: 0;
-  border-radius: var(--Border-2, 8px);
-  background: var(--Neutral-White, #ffffff);
-  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12);
-  z-index: 9999;
-  animation: dropdown-open 120ms ease-out;
-}
-
-@keyframes dropdown-open {
-  from { opacity: 0; transform: scaleY(0.95); transform-origin: top; }
-  to   { opacity: 1; transform: scaleY(1);    transform-origin: top; }
-}
-
-/* ── Options ────────────────────────────────────────────────── */
-.option {
-  box-sizing: border-box;
-  width: 100%;
-  min-height: 40px;
-  border-radius: var(--Border-2, 8px);
-  padding: var(--Size-3, 12px) var(--Size-4, 16px);
-  border: none;
-  background: transparent;
-  text-align: left;
-  color: var(--Gray-Gray-600, #475066);
-  font-size: var(--font-size-s, 12px);
-  font-family: inherit;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: var(--Size-2, 8px);
-  transition: background 0.15s ease;
-}
-
-.option:hover:not(:disabled) {
-  background: var(--Gray-Gray-50, #f7f8fa);
-}
-
-.option:disabled,
-.disabled-option {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.option.selected-option:not(.option-radio) {
-  background: var(--Primary-Primary-50, #fef8f2);
-  color: var(--Primary-Primary-500, #f49a3d);
-}
-
-/* ── Grouped options ─────────────────────────────────────────── */
-.option-group-title {
-  padding: var(--Size-3, 12px) var(--Size-4, 16px);
-  font-size: var(--font-size-s, 12px);
-  font-weight: var(--font-weight-medium, 500);
-  color: var(--Gray-Gray-500, #69738c);
-  list-style: none;
-}
-
-.option-group {
-  padding-left: var(--Size-6, 32px);
-}
-
-/* ── Sticky search ───────────────────────────────────────────── */
-.sticky-search {
-  position: sticky;
-  top: calc(-1 * var(--Size-4, 16px));
-  background: var(--Neutral-White, #ffffff);
-  z-index: 10;
-  margin: calc(-1 * var(--Size-4, 16px)) calc(-1 * var(--Size-4, 16px)) 0;
-  padding: var(--Size-2, 8px) var(--Size-4, 16px);
-  border-bottom: 1px solid var(--Gray-Gray-100, #e6eaf2);
-  list-style: none;
-}
-
-.search-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
-  border-radius: var(--Border-2, 8px);
-  padding: 6px 10px;
-  background: var(--Neutral-White, #ffffff);
-}
-
-.search-input {
-  flex: 1;
-  border: none;
-  outline: none;
-  font-size: var(--font-size-s, 12px);
-  font-family: inherit;
-  color: var(--Gray-Gray-700, #32394d);
-  background: transparent;
-}
-
-.search-input::placeholder {
-  color: var(--Gray-Gray-400, #858ea6);
-}
-
-.search-clear {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  display: flex;
-  align-items: center;
-}
-
-/* ── Multi-select checkbox ───────────────────────────────────── */
-.multi-checkbox {
-  width: 18px;
-  height: 18px;
-  min-width: 18px;
-  border-radius: var(--Border-1, 4px);
-  border: 2px solid var(--Gray-Gray-200, #c3c9d9);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  transition: background 0.15s, border-color 0.15s;
-}
-
-.multi-checkbox.checked {
-  background: var(--Primary-Primary-500, #f49a3d);
-  border-color: var(--Primary-Primary-500, #f49a3d);
-}
-
-/* ── Radio options ───────────────────────────────────────────── */
-.option-radio {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.option-radio.selected-option {
-  border-radius: var(--Border-2, 8px);
-  background: var(--Primary-Primary-50, #fef8f2);
-  color: var(--Primary-Primary-500, #f49a3d);
-}
-
-.option-radio.selected-option .option-second-label {
-  color: var(--Primary-Primary-500, #f49a3d);
-}
-
-.radio {
-  width: 20px;
-  height: 20px;
-  min-width: 20px;
-  border-radius: 50%;
-  border: 2px solid var(--Gray-Gray-200, #c3c9d9);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.radio.selected {
-  border-color: var(--Primary-Primary-500, #f49a3d);
-}
-
-.circle {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background: var(--Primary-Primary-500, #f49a3d);
-}
-
-.labels-container {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  min-width: 0;
-}
-
-.option-image {
-  width: 24px;
-  height: 24px;
-  border-radius: 60px;
-  object-fit: cover;
-  flex-shrink: 0;
-}
-
-.small-image {
-  width: 20px;
-  height: 20px;
-}
-
-.option-image-fallback {
-  width: 24px;
-  height: 24px;
-  border-radius: 60px;
-  background: var(--Primary-Primary-500, #f49a3d);
-  color: white;
-  font-size: 13px;
-  font-weight: var(--font-weight-bold);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.small-image.option-image-fallback {
-  width: 20px;
-  height: 20px;
-}
-
-.option-second-label {
-  color: var(--Gray-Gray-700, #32394d);
-  font-weight: var(--font-weight-bold);
-  white-space: nowrap;
-}
-
-/* ── Country flag placeholder ────────────────────────────────── */
-.flag-placeholder {
-  font-size: 11px;
-  font-weight: var(--font-weight-semibold);
-  color: var(--Gray-Gray-500, #69738c);
-  flex-shrink: 0;
-}
-
-/* ── Helper / error text ────────────────────────────────────── */
-.select-helper,
-.select-helper-error {
-  display: flex;
-  gap: var(--Size-1, 4px);
-  align-items: center;
-  margin-top: var(--Size-1, 4px);
-}
-
-.select-helper span {
-  color: var(--Gray-Gray-600, #475066);
-  font-size: var(--font-size-xs, 10px);
-}
-
-.select-helper-error span {
-  color: var(--Error-Error-500, #f46a6b);
-  font-size: var(--font-size-xs, 10px);
-}
-
-/* ── No results ─────────────────────────────────────────────── */
-.no-results {
-  padding: var(--Size-3, 12px) var(--Size-4, 16px);
-  color: var(--Gray-Gray-400, #858ea6);
-  font-size: var(--font-size-s, 12px);
-  list-style: none;
-  text-align: center;
-}