react-multi-select-tabs/dist/styles.css.map

A modern, accessible multi-select component with search functionality and visible selected tabs

{"version":3,"sources":["styles.css"],"names":[],"mappings":"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","file":"styles.css","sourcesContent":["/* Base styles with Tailwind classes as primary and CSS fallbacks */\r\n\r\n.rms-container {\r\n  @apply relative w-full;\r\n  position: relative;\r\n  width: 100%;\r\n}\r\n\r\n.rms-container.rms-disabled {\r\n  @apply opacity-50 cursor-not-allowed;\r\n  opacity: 0.5;\r\n  cursor: not-allowed;\r\n}\r\n\r\n.rms-input-area {\r\n  @apply flex items-center justify-between p-2 border border-gray-300 rounded-lg bg-white cursor-pointer min-h-[42px] focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-blue-500;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 0.5rem;\r\n  border: 1px solid #d1d5db;\r\n  border-radius: 0.5rem;\r\n  background-color: white;\r\n  cursor: pointer;\r\n  min-height: 42px;\r\n  transition: border-color 0.2s, box-shadow 0.2s;\r\n}\r\n\r\n.rms-input-area:focus-within {\r\n  outline: none;\r\n  border-color: #3b82f6;\r\n  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);\r\n}\r\n\r\n.rms-disabled .rms-input-area {\r\n  @apply cursor-not-allowed bg-gray-50;\r\n  cursor: not-allowed;\r\n  background-color: #f9fafb;\r\n}\r\n\r\n.rms-tags-container {\r\n  @apply flex flex-wrap items-center gap-1 flex-1 min-w-0;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  gap: 0.25rem;\r\n  flex: 1;\r\n  min-width: 0;\r\n}\r\n\r\n.rms-tag {\r\n  @apply inline-flex items-center px-2 py-1 bg-blue-100 text-blue-800 rounded-md text-sm font-medium;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  padding: 0.25rem 0.5rem;\r\n  background-color: #dbeafe;\r\n  color: #1e40af;\r\n  border-radius: 0.375rem;\r\n  font-size: 0.875rem;\r\n  font-weight: 500;\r\n  line-height: 1.25rem;\r\n}\r\n\r\n.rms-tag-remove {\r\n  @apply ml-1 text-blue-600 hover:text-blue-800 focus:outline-none focus:ring-1 focus:ring-blue-500 rounded;\r\n  margin-left: 0.25rem;\r\n  color: #2563eb;\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  font-size: 1.125rem;\r\n  line-height: 1;\r\n  padding: 0;\r\n  border-radius: 0.25rem;\r\n}\r\n\r\n.rms-tag-remove:hover {\r\n  color: #1e40af;\r\n}\r\n\r\n.rms-tag-remove:focus {\r\n  outline: none;\r\n  box-shadow: 0 0 0 1px #3b82f6;\r\n}\r\n\r\n.rms-search-input {\r\n  @apply flex-1 min-w-0 border-none outline-none bg-transparent text-gray-900 placeholder-gray-500 text-sm;\r\n  flex: 1;\r\n  min-width: 0;\r\n  border: none;\r\n  outline: none;\r\n  background: transparent;\r\n  color: #111827;\r\n  font-size: 0.875rem;\r\n  line-height: 1.25rem;\r\n}\r\n\r\n.rms-search-input::placeholder {\r\n  color: #6b7280;\r\n}\r\n\r\n.rms-controls {\r\n  @apply flex items-center gap-2 ml-2;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  margin-left: 0.5rem;\r\n}\r\n\r\n.rms-clear-button {\r\n  @apply text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-500 rounded w-4 h-4 flex items-center justify-center;\r\n  color: #9ca3af;\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  font-size: 1.125rem;\r\n  line-height: 1;\r\n  width: 1rem;\r\n  height: 1rem;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-radius: 0.25rem;\r\n}\r\n\r\n.rms-clear-button:hover {\r\n  color: #4b5563;\r\n}\r\n\r\n.rms-clear-button:focus {\r\n  outline: none;\r\n  box-shadow: 0 0 0 1px #3b82f6;\r\n}\r\n\r\n.rms-chevron {\r\n  @apply text-gray-400 transition-transform duration-200 w-4 h-4 flex items-center justify-center;\r\n  color: #9ca3af;\r\n  transition: transform 0.2s;\r\n  width: 1rem;\r\n  height: 1rem;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.rms-chevron-up {\r\n  transform: rotate(180deg);\r\n}\r\n\r\n.rms-chevron-down {\r\n  transform: rotate(0deg);\r\n}\r\n\r\n.rms-dropdown {\r\n  @apply absolute top-full left-0 right-0 mt-1 bg-white border border-gray-300 rounded-lg shadow-lg z-50 max-h-60 overflow-hidden;\r\n  position: absolute;\r\n  top: 100%;\r\n  left: 0;\r\n  right: 0;\r\n  margin-top: 0.25rem;\r\n  background-color: white;\r\n  border: 1px solid #d1d5db;\r\n  border-radius: 0.5rem;\r\n  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\r\n  z-index: 50;\r\n  max-height: 15rem;\r\n  overflow: hidden;\r\n}\r\n\r\n.rms-dropdown-open {\r\n  display: block;\r\n}\r\n\r\n.rms-loading {\r\n  @apply flex items-center justify-center p-4 text-gray-500;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 1rem;\r\n  color: #6b7280;\r\n  gap: 0.5rem;\r\n}\r\n\r\n.rms-loading-spinner {\r\n  @apply w-4 h-4 border-2 border-gray-300 border-t-blue-600 rounded-full animate-spin;\r\n  width: 1rem;\r\n  height: 1rem;\r\n  border: 2px solid #d1d5db;\r\n  border-top-color: #2563eb;\r\n  border-radius: 50%;\r\n  animation: spin 1s linear infinite;\r\n}\r\n\r\n@keyframes spin {\r\n  to {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n\r\n.rms-no-options {\r\n  @apply p-4 text-gray-500 text-center text-sm;\r\n  padding: 1rem;\r\n  color: #6b7280;\r\n  text-align: center;\r\n  font-size: 0.875rem;\r\n}\r\n\r\n.rms-options-container {\r\n  @apply flex flex-col max-h-48 overflow-y-auto gap-1 px-2 py-1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  max-height: 12rem;\r\n  overflow-y: auto;\r\n  gap: 0.25rem;\r\n  padding: 0.25rem 0.5rem;\r\n}\r\n\r\n/* Dropdown item layout with checkbox */\r\n/* .rms-option-label {\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 8px 10px;\r\n  cursor: pointer;\r\n  font-size: 14px;\r\n  border-radius: 6px;\r\n  background: white;\r\n  transition: background-color 0.2s ease;\r\n} */\r\n\r\n\r\n.rms-option-label {\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 0.5rem 0.75rem;\r\n  cursor: pointer;\r\n  border-radius: 0.375rem;\r\n  background: white;\r\n  transition: background-color 0.2s ease;\r\n  width: 100%;\r\n}\r\n\r\n.rms-option-label:hover {\r\n  background-color: #f1f5f9;\r\n}\r\n\r\n/* Checkbox style */\r\n.rms-option-label input[type=\"checkbox\"] {\r\n  appearance: none;\r\n  width: 16px;\r\n  height: 16px;\r\n  border: 2px solid #cbd5e1;\r\n  border-radius: 4px;\r\n  margin-right: 12px;\r\n  background-color: white;\r\n  position: relative;\r\n  cursor: pointer;\r\n  transition: all 0.2s ease;\r\n}\r\n\r\n.rms-option-label input[type=\"checkbox\"]:checked {\r\n  background-color: #3b82f6;\r\n  border-color: #3b82f6;\r\n}\r\n\r\n.rms-option-label input[type=\"checkbox\"]:checked::after {\r\n  content: '';\r\n  position: absolute;\r\n  top: 2px;\r\n  left: 5px;\r\n  width: 4px;\r\n  height: 8px;\r\n  border: solid white;\r\n  border-width: 0 2px 2px 0;\r\n  transform: rotate(45deg);\r\n}\r\n\r\n/* Label text */\r\n.rms-option-label-text {\r\n  flex-grow: 1;\r\n  color: #1f2937;\r\n}\r\n\r\n/* Highlighted and disabled */\r\n.rms-option-highlighted {\r\n  background-color: #e6f0ff;\r\n}\r\n\r\n.rms-option-disabled {\r\n  color: #aaa;\r\n  cursor: not-allowed;\r\n  opacity: 0.6;\r\n}\r\n\r\n/* Selection Info */\r\n.rms-selection-info {\r\n  @apply px-3 py-2 text-xs text-gray-500 bg-gray-50 border-t border-gray-200;\r\n  padding: 0.5rem 0.75rem;\r\n  font-size: 0.75rem;\r\n  color: #6b7280;\r\n  background-color: #f9fafb;\r\n  border-top: 1px solid #e5e7eb;\r\n}\r\n\r\n/* Responsive adjustments */\r\n@media (max-width: 640px) {\r\n  .rms-dropdown {\r\n    max-height: 12rem;\r\n  }\r\n  .rms-options-container {\r\n    max-height: 10rem;\r\n  }\r\n}\r\n\r\n/* High contrast mode support */\r\n@media (prefers-contrast: high) {\r\n  .rms-input-area {\r\n    border-width: 2px;\r\n  }\r\n  .rms-tag {\r\n    border: 1px solid currentColor;\r\n  }\r\n  .rms-option-highlighted {\r\n    background-color: #000;\r\n    color: #fff;\r\n  }\r\n}\r\n\r\n/* Reduced motion support */\r\n@media (prefers-reduced-motion: reduce) {\r\n  .rms-chevron {\r\n    transition: none;\r\n  }\r\n  .rms-loading-spinner {\r\n    animation: none;\r\n  }\r\n}\r\n"]}