@shapeshiftoss/swap-widget 0.0.2 → 0.2.0

package/src/components/TokenSelectModal.css

@@ -1,438 +0,0 @@
-.ssw-modal-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(4px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  padding: 16px;
-  animation: ssw-fade-in 0.15s ease;
-}
-
-@keyframes ssw-fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.ssw-modal {
-  background: var(--ssw-bg-secondary);
-  border-radius: var(--ssw-radius-lg);
-  width: 100%;
-  max-width: 680px;
-  max-height: 80vh;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
-  animation: ssw-slide-up 0.2s ease;
-}
-
-@keyframes ssw-slide-up {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.ssw-modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px 24px;
-  border-bottom: 1px solid var(--ssw-border);
-}
-
-.ssw-modal-title {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--ssw-text-primary);
-  margin: 0;
-}
-
-.ssw-modal-close {
-  background: none;
-  border: none;
-  padding: 8px;
-  cursor: pointer;
-  color: var(--ssw-text-secondary);
-  border-radius: var(--ssw-radius-xs);
-  transition: all 0.15s ease;
-}
-
-.ssw-modal-close:hover {
-  background: var(--ssw-bg-hover);
-  color: var(--ssw-text-primary);
-}
-
-.ssw-modal-content {
-  display: flex;
-  flex: 1;
-  min-height: 0;
-}
-
-.ssw-chain-sidebar {
-  width: 200px;
-  border-right: 1px solid var(--ssw-border);
-  display: flex;
-  flex-direction: column;
-  background: var(--ssw-bg-tertiary);
-}
-
-.ssw-search-wrapper {
-  position: relative;
-  padding: 16px;
-}
-
-.ssw-search-icon {
-  position: absolute;
-  left: 28px;
-  top: 50%;
-  transform: translateY(-50%);
-  color: var(--ssw-text-muted);
-  pointer-events: none;
-}
-
-.ssw-chain-search,
-.ssw-token-search {
-  width: 100%;
-  padding: 10px 12px 10px 36px;
-  border: 1px solid var(--ssw-border);
-  border-radius: var(--ssw-radius-sm);
-  background: var(--ssw-bg-input);
-  color: var(--ssw-text-primary);
-  font-size: 14px;
-  outline: none;
-  transition: border-color 0.15s ease;
-}
-
-.ssw-chain-search:focus,
-.ssw-token-search:focus {
-  border-color: var(--ssw-accent);
-}
-
-.ssw-chain-search::placeholder,
-.ssw-token-search::placeholder {
-  color: var(--ssw-text-muted);
-}
-
-.ssw-chain-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0 8px 16px;
-  scrollbar-width: thin;
-  scrollbar-color: var(--ssw-border) transparent;
-  min-height: 300px;
-}
-
-.ssw-chain-list::-webkit-scrollbar {
-  width: 6px;
-}
-
-.ssw-chain-list::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.ssw-chain-list::-webkit-scrollbar-thumb {
-  background: var(--ssw-border);
-  border-radius: 3px;
-}
-
-.ssw-chain-list::-webkit-scrollbar-thumb:hover {
-  background: var(--ssw-border-hover);
-}
-
-.ssw-chain-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  width: 100%;
-  padding: 10px 12px;
-  border: none;
-  background: none;
-  border-radius: var(--ssw-radius-sm);
-  cursor: pointer;
-  transition: background 0.15s ease;
-  text-align: left;
-}
-
-.ssw-chain-item:hover {
-  background: var(--ssw-bg-hover);
-}
-
-.ssw-chain-item.ssw-selected {
-  background: var(--ssw-accent-light);
-}
-
-.ssw-chain-icon,
-.ssw-chain-icon-placeholder,
-.ssw-chain-icon-multi {
-  width: 28px;
-  height: 28px;
-  border-radius: var(--ssw-radius-xs);
-  flex-shrink: 0;
-}
-
-.ssw-chain-icon {
-  object-fit: contain;
-}
-
-.ssw-chain-icon-placeholder {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  font-weight: 600;
-  color: white;
-}
-
-.ssw-chain-icon-multi {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--ssw-bg-hover);
-  font-size: 14px;
-}
-
-.ssw-chain-name {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--ssw-text-primary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.ssw-token-panel {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.ssw-token-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0 16px 16px;
-  scrollbar-width: thin;
-  scrollbar-color: var(--ssw-border) transparent;
-}
-
-.ssw-token-list::-webkit-scrollbar {
-  width: 6px;
-}
-
-.ssw-token-list::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.ssw-token-list::-webkit-scrollbar-thumb {
-  background: var(--ssw-border);
-  border-radius: 3px;
-}
-
-.ssw-token-list::-webkit-scrollbar-thumb:hover {
-  background: var(--ssw-border-hover);
-}
-
-.ssw-token-item {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  width: 100%;
-  padding: 12px;
-  border: none;
-  background: none;
-  border-radius: var(--ssw-radius-sm);
-  cursor: pointer;
-  transition: background 0.15s ease;
-  text-align: left;
-  animation: ssw-token-fade-in 0.2s ease backwards;
-}
-
-@keyframes ssw-token-fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.ssw-token-item:hover {
-  background: var(--ssw-bg-hover);
-}
-
-.ssw-token-icon-wrapper {
-  position: relative;
-  width: 40px;
-  height: 40px;
-  flex-shrink: 0;
-}
-
-.ssw-token-icon,
-.ssw-token-icon-placeholder {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-}
-
-.ssw-token-icon {
-  object-fit: contain;
-}
-
-.ssw-token-icon-placeholder {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  font-weight: 600;
-  color: white;
-}
-
-.ssw-token-chain-badge {
-  position: absolute;
-  bottom: -2px;
-  right: -2px;
-  width: 16px;
-  height: 16px;
-  border-radius: var(--ssw-radius-2xs);
-  border: 2px solid var(--ssw-bg-secondary);
-  background: var(--ssw-bg-secondary);
-}
-
-.ssw-token-info {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-
-.ssw-token-symbol {
-  font-size: 15px;
-  font-weight: 600;
-  color: var(--ssw-text-primary);
-}
-
-.ssw-token-name {
-  font-size: 13px;
-  color: var(--ssw-text-secondary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.ssw-token-right {
-  margin-left: auto;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 2px;
-  flex-shrink: 0;
-}
-
-.ssw-token-fiat-value {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--ssw-text-primary);
-}
-
-.ssw-token-balance {
-  font-size: 13px;
-  font-weight: 400;
-  color: var(--ssw-text-secondary);
-}
-
-.ssw-token-balance-skeleton {
-  width: 60px;
-  height: 14px;
-  border-radius: var(--ssw-radius-2xs);
-  background: linear-gradient(
-    90deg,
-    var(--ssw-bg-hover) 25%,
-    var(--ssw-border) 50%,
-    var(--ssw-bg-hover) 75%
-  );
-  background-size: 200% 100%;
-  animation: ssw-skeleton-shimmer 1.5s infinite;
-  flex-shrink: 0;
-}
-
-@keyframes ssw-skeleton-shimmer {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-.ssw-loading,
-.ssw-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  padding: 48px 24px;
-  color: var(--ssw-text-secondary);
-  font-size: 14px;
-}
-
-.ssw-spinner {
-  width: 24px;
-  height: 24px;
-  border: 2px solid var(--ssw-border);
-  border-top-color: var(--ssw-accent);
-  border-radius: 50%;
-  animation: ssw-spin 0.8s linear infinite;
-}
-
-@keyframes ssw-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (max-width: 600px) {
-  .ssw-modal {
-    max-height: 90vh;
-  }
-
-  .ssw-modal-content {
-    flex-direction: column;
-  }
-
-  .ssw-chain-sidebar {
-    width: 100%;
-    border-right: none;
-    border-bottom: 1px solid var(--ssw-border);
-    max-height: 200px;
-  }
-
-  .ssw-chain-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    padding: 0 16px 16px;
-  }
-
-  .ssw-chain-item {
-    padding: 8px 12px;
-  }
-
-  .ssw-chain-name {
-    font-size: 13px;
-  }
-}