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

Redocly GraphQL docs

import{css as e}from"styled-components";import{Button as t,LinkIcon as a,Tag as i,Breadcrumbs as c,Typography as p,breakpoints as l}from"@redocly/theme";import{ShelfIcon as d}from"../../../shared/index.js";import{AnchorLink as v,Box as n}from"../../common/index.js";import{ShareLink as g}from"../../navigation/components/ShareLink.js";import{styled as r}from"../../styled-components.js";const s=r.div`
  margin-top: calc(var(--spacing-unit) / 2);
  margin-bottom: var(--spacing-base);
  color: var(--text-color-primary);
  word-break: break-all;
`,z=r(s)`
  margin-bottom: 0;
  color: var(--text-color-secondary);
`,k=r(s)`
  margin-top: var(--spacing-base);
`,S=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;
`,m=e`
  &:after {
    content: '*';
    vertical-align: text-bottom;
    color: var(--schema-property-required-label-text-color);
  }
`,$=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?m:null}
`,x=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);
  }
`,q=r(n)`
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing-xxs) / 4) var(--spacing-xxs);
  color: var(--schemas-property-name-box-text-color);
  font-size: var(--schemas-property-name-font-size);
  font-family: var(--schemas-property-name-font-family);

  ${d} {
    margin-right: 4px;
    height: var(--schema-chevron-size);
    width: var(--schema-chevron-size);
    fill: var(--schema-chevron-color);
  }
`,B=r.div`
  border-bottom: 1px solid var(--border-color-primary);
  padding: var(--spacing-sm) 0;
`,R=r.span`
  position: relative;
  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);

  &:hover ${a} {
    visibility: visible;
    opacity: 1;
  }

  ${({isDeprecated:o})=>e`
    text-decoration: ${o&&"line-through"};
  `};
`,I=r(g)`
  display: flex;
  top: 50%;
  transform: translate(-100%, -50%);

  ${a} {
    visibility: hidden;
    cursor: pointer;
  }

  &:hover ${a}, &:focus ${a} {
    visibility: visible;
    opacity: 1;
  }
`,T=r.span`
  color: var(--text-color-secondary);

  ${v} {
    color: var(--text-color-secondary);
  }
`,W=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);
`,F=r.div`
  display: flex;
  flex-direction: column;
  ${({contrast:o})=>e`
    border-radius: var(--panel-border-radius);
    background-color: ${o?"var(--schema-nested-background-color)":""};
  `};

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

  h4 {
    margin-top: 0;
  }
`,A=r(c)`
  padding: var(--panel-gap-vertical) var(--panel-gap-horizontal);
  padding-bottom: 0;
`,C=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: ${l.large}) {
    ${({$spacing:o="base"})=>`margin-top: var(--spacing-${o})`};
  }
`,L=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);
`,P=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;
`,H=r(n)`
  border-bottom: ${({expanded:o})=>o?"none!important":"inherit"};
`,N=r(t)`
  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);
  }
`,D=r.span`
  color: var(--text-color-primary);
`,V=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));
`,j=r.div`
  color: var(--link-color-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xxs);
`,E=r.span`
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-medium);
  color: var(--text-color-primary);
  margin-left: var(--spacing-xxs);
`,M=r(t)`
  margin-left: auto;
  font-size: var(--font-size-sm);
`,X=r(i)`
  background-color: var(--bg-color);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  margin: 0;
`,G=r.p`
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  margin: 0;
`,J=r(i)`
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  margin: 0;
`,K=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);
  }
`,O=r.p`
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  margin: 0 0 var(--spacing-sm) 0;
`,Q=r.div`
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
  flex-wrap: wrap;
`,U=r.div`
  background: var(--layer-color);
  padding: var(--spacing-base);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color-secondary);
  width: 100%;
`,Y=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%);
`,Z=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;
`,_=r(t)`
  position: absolute;
  right: var(--spacing-md);
  top: var(--spacing-md);
`,rr=r(p)`
  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{s as Annotation,S as ArgsCollapsed,A as Breadcrumbs,_ as Close,F as ExpandableFieldBody,H as FieldInfo,I as FieldLink,R as FieldName,q as FieldNameBox,x as FieldWrapper,$ as InlineCode,U as ItemWrapper,z as PanelAnnotation,P as PanelBody,L as PanelHeading,C as PanelWrapper,T as ReferenceField,V as RequiresScopesButtonItemWrapper,E as RequiresScopesButtonTitle,K as RequiresScopesDividerWrapper,O as RequiresScopesHeader,N as RequiresScopesItemButton,D as RequiresScopesItemButtonText,Y as RequiresScopesModalWrapper,J as RequiresScopesScopeTag,j as RequiresScopesSecurityHeader,X as RequiresScopesSeparatorTag,G as RequiresScopesSeparatorText,rr as RequiresScopesTitle,k as ScalarAnnotation,B as SchemaItemWrapper,Q as ScopeWrapper,Z as StyledBackground,W as Value,M as ViewDetailsButton,m as requiredCss};