@stencila/style-stencila/dist/molecules/parameter.css

Custom designed theme for Stencila components

:host,stencila-parameter{
  /** @prop --background: Background color of the Parameter component */--background:var(--color-stock,#fff);

  /** @prop --background-buttons: Background color of the parameter validator section */--background-buttons:var(--color-neutral-50,#edf2f7);

  /** @prop --border: Border color around the component as well as internal section dividers */--border:var(--color-neutral-100,#e2e8f0);background-color:var(--background);border-color:var(--border);border-radius:.25rem;border-style:solid;border-width:1px;color:#4a4a4a;color:var(--color-key,#4a4a4a);display:inline-flex;font-size:.875rem;line-height:1.25rem;line-height:1;padding:0;vertical-align:text-bottom;white-space:nowrap}:host .actions,stencila-parameter .actions{background-color:var(--background-buttons);cursor:default;display:inline-block;overflow:hidden;transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(0,0,.2,1);width:0}:host([mode=edit].hover) .actions,:host([mode=edit]:focus) .actions,:host([mode=edit]:focus-within) .actions,:host([mode=edit]:hover) .actions,stencila-parameter[mode=edit].hover .actions,stencila-parameter[mode=edit]:focus .actions,stencila-parameter[mode=edit]:focus-within .actions,stencila-parameter[mode=edit]:hover .actions{display:inline-flex;max-width:100%;width:100%}:host .actions form,stencila-parameter .actions form{display:flex;flex-direction:column;padding:.5rem}:host .actions form label,stencila-parameter .actions form label{color:var(--color-neutral-600);display:block;font-family:sans-serif;font-family:var(--font-family-body,sans-serif);font-size:.75rem;line-height:1rem}:host .actions form label:not(:first-of-type),stencila-parameter .actions form label:not(:first-of-type){margin-top:.5rem}:host .actions form label input,:host .actions form label select,stencila-parameter .actions form label input,stencila-parameter .actions form label select{border-color:var(--border);border-radius:.25rem;border-style:solid;border-width:1px;display:block;font-family:monospace;font-family:var(--font-family-mono,monospace);font-size:.875rem;line-height:1.25rem;margin-top:.25rem;width:100%}:host .name,stencila-parameter .name{background-color:var(--background-buttons);cursor:text;font-family:monospace;font-family:var(--font-family-mono,monospace);padding:.25rem}:host .name::slotted(label),stencila-parameter .name::slotted(label){cursor:text}:host .value,stencila-parameter .value{background-color:var(--background);font-family:monospace;font-family:var(--font-family-mono,monospace);margin:0;padding:0 .25rem}:host .value::slotted(input),:host .value::slotted(select),stencila-parameter .value::slotted(input),stencila-parameter .value::slotted(select){border-width:0;display:inline-block;font-family:monospace;font-family:var(--font-family-mono,monospace)}:host ::slotted(input),:host input,stencila-parameter ::slotted(input),stencila-parameter input{min-width:4rem}:host ::slotted(input:invalid),:host input:invalid,stencila-parameter ::slotted(input:invalid),stencila-parameter input:invalid{border-radius:.25rem;box-shadow:0 0 0 2px var(--color-danger-500)}
/*# sourceMappingURL=parameter.css.map */