@redocly/graphql-docs/lib-esm/src/definition/components/styled.js

Redocly GraphQL docs

import{css as e}from"styled-components";import{Button as a,Tag as t,Breadcrumbs as s,Typography as c,breakpoints as p}from"@redocly/theme";import{ShelfIcon as l}from"../../../shared/index.js";import{AnchorLink as d,Box as i}from"../../common/index.js";import{styled as r}from"../../styled-components.js";const n=r.div`
  margin-top: calc(var(--spacing-unit) / 2);
  margin-bottom: var(--spacing-base);
  color: var(--text-color-primary);
  word-break: break-all;
`,u=r(n)`
  margin-bottom: 0;
  color: var(--text-color-secondary);
`,y=r(n)`
  margin-top: var(--spacing-base);
`,w=r.span`
  font-size: ${({size:o})=>`var(--font-size-${o})`};
  line-height: ${({size:o})=>`var(--line-height-${o})`};
  white-space: normal;
  color: var(--text-color-description);
  font-weight: var(--font-weight-bold);
  word-break: normal;
  overflow-wrap: anywhere;
  display: inline-block;
`,g=e`
  &:after {
    content: '*';
    vertical-align: text-bottom;
    color: var(--schema-property-required-label-text-color);
  }
`,z=r.span`
  border: 1px solid var(--schema-inline-border-color);
  border-radius: var(--border-radius);
  padding: 0 4px;
  background-color: var(--schema-inline-background-color);

  color: var(--schema-inline-code-text-color);

  ${({required:o})=>o?g:null}
`,v=r.div`
  padding: var(--spacing-base) 0;

  ${({firstOfType:o})=>o&&e`
      padding-top: var(--spacing-sm);
    `};

  ${({showBorder:o})=>o?e`
          border-bottom: 1px solid var(--border-color-primary);
        `:e`
          padding-bottom: 0;
        `}

  &:first-of-type {
    padding-top: var(--spacing-sm);
  }
`,k=r(i)`
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing-xxs) / 4) var(--spacing-xxs);
  overflow: hidden;
  color: var(--schemas-property-name-text-color);
  font-size: var(--schemas-property-name-font-size);
  font-family: var(--schemas-property-name-font-family);

  ${l} {
    margin-right: 4px;
    height: var(--schema-chevron-size);
    width: var(--schema-chevron-size);
    fill: var(--schema-chevron-color);
  }
`,S=r.div`
  border-bottom: 1px solid var(--border-color-primary);
  padding: var(--spacing-sm) 0;
`,$=r.span`
  color: var(--schemas-property-name-text-color);
  font-size: var(--schemas-property-name-font-size);
  font-family: var(--schemas-property-name-font-family);
  font-weight: var(--font-weight-bold);

  ${({isDeprecated:o})=>e`
    text-decoration: ${o&&"line-through"};
  `};
`,q=r.span`
  color: var(--text-color-secondary);

  ${d} {
    color: var(--text-color-secondary);
  }
`,B=r.div`
  display: flex;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-md);
  color: var(--text-color-secondary);
`,R=r.div`
  display: flex;
  flex-direction: column;
  ${({contrast:o})=>e`
    border-radius: var(--panel-border-radius);
    background-color: ${o?"var(--schema-nested-background-color)":""};
  `};

  ${v} {
    background-color: transparent;
  }

  h4 {
    margin-top: 0;
  }
`,T=r(s)`
  padding: var(--panel-gap-vertical) var(--panel-gap-horizontal);
  padding-bottom: 0;
`,I=r.div.attrs({className:"panel-overview"})`
  border: 1px solid var(--border-color-secondary);
  border-radius: var(--border-radius);
  background-color: var(--panel-bg-color);

  @media screen and (min-width: ${p.large}) {
    ${({$spacing:o="base"})=>`margin-top: var(--spacing-${o})`};
  }
`,W=r.div`
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  padding: calc(var(--spacing-sm) + 2px) var(--spacing-md) calc(var(--spacing-xs) + 2px);
  border-bottom: 1px solid var(--border-color-secondary);
`,F=r.div`
  display: flex;
  flex-direction: column;
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
  gap: var(--spacing-xs);
  max-height: 400px;
  overflow-x: auto;
`,A=r(i)`
  border-bottom: ${({expanded:o})=>o?"none!important":"inherit"};
`,C=r(a)`
  background-color: var(--layer-color);
  color: var(--link-color-primary);
  border-color: var(--border-color-secondary);
  align-self: flex-start;
  padding: var(--spacing-xxs) var(--spacing-xs);
  margin-top: var(--spacing-xs);

  &:hover {
    background-color: var(--button-bg-color-secondary);
    color: var(--link-color-primary);
    border-color: var(--border-color-secondary);
  }
`,P=r.span`
  color: var(--text-color-primary);
`,H=r.div`
  background-color: var(--layer-color);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color-secondary);
  width: 100%;
  margin: var(--spacing-lg) 0 calc(var(--spacing-lg) - var(--spacing-sm));
`,N=r.div`
  color: var(--link-color-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xxs);
`,D=r.span`
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-medium);
  color: var(--text-color-primary);
  margin-left: var(--spacing-xxs);
`,V=r(a)`
  margin-left: auto;
  font-size: var(--font-size-sm);
`,j=r(t)`
  background-color: var(--bg-color);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  margin: 0;
`,E=r.p`
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  margin: 0;
`,L=r(t)`
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  margin: 0;
`,M=r.div`
  font-size: var(--font-size-sm);
  width: 100%;
  display: flex;
  align-items: center;
  margin: var(--spacing-xs) 0;
  text-transform: none;
  hr {
    height: 1px;
    border: none;
    background: var(--border-color-primary);
    width: 100%;
    margin-left: var(--spacing-xs);
  }
`,X=r.p`
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  margin: 0 0 var(--spacing-sm) 0;
`,G=r.div`
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
  flex-wrap: wrap;
`,J=r.div`
  background: var(--layer-color);
  padding: var(--spacing-base);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color-secondary);
  width: 100%;
`,K=r.div`
  background: var(--bg-color);
  box-shadow: var(--bg-raised-shadow);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  width: 720px;
  max-width: 100%;
  height: auto;
  max-height: 600px;
  overflow-y: auto;
  left: 50%;
  top: 100px;
  transform: translateX(-50%);
`,O=r.div`
  background: var(--bg-color-modal-overlay);
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: var(--z-index-popover);
  left: 0;
  top: 0;
  pointer-events: auto;
`,Q=r(a)`
  position: absolute;
  right: var(--spacing-md);
  top: var(--spacing-md);
`,U=r(c)`
  display: flex;
  align-items: center;
  font-size: var(--h4-font-size);
  font-weight: var(--h4-font-weight);
  margin-bottom: var(--spacing-md);
  svg {
    margin-right: var(--spacing-xs);
  }
`;export{n as Annotation,w as ArgsCollapsed,T as Breadcrumbs,Q as Close,R as ExpandableFieldBody,A as FieldInfo,$ as FieldName,k as FieldNameBox,v as FieldWrapper,z as InlineCode,J as ItemWrapper,u as PanelAnnotation,F as PanelBody,W as PanelHeading,I as PanelWrapper,q as ReferenceField,H as RequiresScopesButtonItemWrapper,D as RequiresScopesButtonTitle,M as RequiresScopesDividerWrapper,X as RequiresScopesHeader,C as RequiresScopesItemButton,P as RequiresScopesItemButtonText,K as RequiresScopesModalWrapper,L as RequiresScopesScopeTag,N as RequiresScopesSecurityHeader,j as RequiresScopesSeparatorTag,E as RequiresScopesSeparatorText,U as RequiresScopesTitle,y as ScalarAnnotation,S as SchemaItemWrapper,G as ScopeWrapper,O as StyledBackground,B as Value,V as ViewDetailsButton,g as requiredCss};