polen/build/lib/graphql-document/components/graphql-document-styles.d.ts

A framework for delightful GraphQL developer portals

/**
 * Minimal styles for GraphQL Document interactive code blocks
 */
export declare const graphqlDocumentStyles = "\n/* Container styles */\n.graphql-document {\n  position: relative;\n}\n\n.graphql-interaction-layer {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  pointer-events: none;\n}\n\n.graphql-interaction-layer > * {\n  pointer-events: auto;\n}\n\n/* Identifier overlay styles */\n.graphql-identifier-overlay {\n  transition: background-color 0.2s ease;\n}\n\n/* Clickable identifiers get visual feedback */\n.graphql-identifier-overlay.graphql-clickable {\n  /* Subtle underline effect using box-shadow to not affect layout */\n  box-shadow: 0 1px 0 0 rgba(var(--accent-9), 0.3);\n  transition: box-shadow 0.2s ease, background-color 0.2s ease;\n}\n\n.graphql-identifier-overlay.graphql-clickable:hover {\n  background-color: rgba(var(--accent-3), 0.5);\n  box-shadow: 0 1px 0 0 rgba(var(--accent-9), 0.6);\n}\n\n/* Active/open state */\n.graphql-identifier-overlay.graphql-tooltip-open {\n  background-color: rgba(var(--accent-3), 0.5);\n  box-shadow: 0 1px 0 0 var(--accent-9);\n}\n\n/* Error state */\n.graphql-identifier-overlay.graphql-error {\n  box-shadow: 0 1.5px 0 0 var(--red-9);\n}\n\n.graphql-identifier-overlay.graphql-error:hover {\n  background-color: rgba(var(--red-3), 0.5);\n}\n\n/* Deprecated state */\n.graphql-identifier-overlay.graphql-deprecated {\n  text-decoration: line-through;\n  opacity: 0.7;\n}\n\n/* Debug mode */\n.graphql-identifier-overlay.graphql-debug {\n  background-color: rgba(59, 130, 246, 0.1) !important;\n  border: 1px solid rgba(59, 130, 246, 0.3) !important;\n}\n\n/* Kind-specific colors */\n.graphql-identifier-overlay.graphql-type.graphql-clickable {\n  box-shadow: 0 1px 0 0 rgba(var(--blue-9), 0.3);\n}\n\n.graphql-identifier-overlay.graphql-field.graphql-clickable {\n  box-shadow: 0 1px 0 0 rgba(var(--green-9), 0.3);\n}\n\n.graphql-identifier-overlay.graphql-argument.graphql-clickable {\n  box-shadow: 0 1px 0 0 rgba(var(--orange-9), 0.3);\n}\n\n.graphql-identifier-overlay.graphql-variable {\n  box-shadow: 0 1px 0 0 rgba(var(--purple-9), 0.3);\n}\n\n.graphql-identifier-overlay.graphql-directive.graphql-clickable {\n  box-shadow: 0 1px 0 0 rgba(var(--amber-9), 0.3);\n}\n\n/* Popover animation */\n.graphql-identifier-popover {\n  animation: graphql-popover-show 150ms ease-out;\n}\n\n@keyframes graphql-popover-show {\n  from {\n    opacity: 0;\n    transform: translateY(2px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Validation errors */\n.graphql-validation-errors {\n  margin-top: 1rem;\n  padding: 0.5rem;\n  background-color: var(--red-2);\n  border: 1px solid var(--red-6);\n  border-radius: 4px;\n}\n\n.graphql-error {\n  color: var(--red-11);\n  font-size: 0.875rem;\n  margin: 0.25rem 0;\n}\n\n/* Loading state */\n.graphql-document.graphql-loading {\n  opacity: 0.6;\n  pointer-events: none;\n}\n\n.graphql-document.graphql-loading::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 20px;\n  height: 20px;\n  margin: -10px 0 0 -10px;\n  border: 2px solid var(--gray-6);\n  border-top-color: var(--accent-9);\n  border-radius: 50%;\n  animation: graphql-spinner 0.8s linear infinite;\n}\n\n@keyframes graphql-spinner {\n  to {\n    transform: rotate(360deg);\n  }\n}";
//# sourceMappingURL=graphql-document-styles.d.ts.map