@dropi/ui 0.1.23 → 0.1.24

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

@@ -0,0 +1,366 @@
+: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;
+}