Fixed stoplight css scoping (#19)

Author: shanejonas

package.json

@@ -17,7 +17,7 @@
     "dist/"
   ],
   "scripts": {
-    "build": "tsc --project tsconfig.build.json && cp src/ContentDescriptor/ContentDescriptor.css dist/ContentDescriptor/",
+    "build": "tsc --project tsconfig.build.json && cp src/ContentDescriptor/ContentDescriptor.css dist/ContentDescriptor/ && cp src/index.css dist/",
     "build:clean": "rimraf dist && yarn build",
     "build:docs": "typedoc",
     "link:setup": "rm -rf ./node_modules/react ./node_modules/react-dom",

src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -73,6 +73,7 @@ T = any,
 
         {canAdd && (
           <div className="col col--12" style={{
+            padding: '0',
             justifyContent: 'end',
             display: 'flex'
           }}>

src/ContentDescriptor/ContentDescriptor.css

@@ -1,16 +1,4 @@
-.glyphicon-plus {
-  --b: 4px; /* the thickness */
-  width: 40px; /* the size */
-  aspect-ratio: 1;
-  border: 10px solid #000; /* the outer space */
-  background:
-    conic-gradient(from 90deg at var(--b) var(--b),#000 90deg,#fff 0)
-    calc(100% + var(--b)/2) calc(100% + var(--b)/2)/
-    calc(50%  + var(--b))   calc(50%  + var(--b));
-  display: inline-block;
-}
-
-select, input {
+#method select, #method input, #interactive-box select, #interactive-box input {
   border-radius: var(--ifm-global-radius);
   border: 2px solid var(--ifm-toc-border-color);
   font: var(--ifm-font-size-base) var(--ifm-font-family-base);
@@ -32,3 +20,9 @@ select, input {
 .method section {
   margin-bottom: var(--ifm-heading-margin-bottom);
 }
+
+#interactive-box fieldset {
+  border: none;
+  margin: 0;
+  padding: 0;
+}

src/ContentDescriptor/ContentDescriptor.tsx

@@ -30,7 +30,9 @@ class ContentDescriptor extends Component<IProps> {
           />
         )}
         {contentDescriptor.schema && (
-          <JsonSchemaViewer schema={contentDescriptor.schema} />
+          <div className="stoplight">
+            <JsonSchemaViewer schema={contentDescriptor.schema} />
+          </div>
         )}
       </div>
     );

src/FieldErrorTemplate/FieldErrorTemplate.tsx

@@ -16,7 +16,7 @@ export default function FieldErrorTemplate<
   const id = errorId<T>(idSchema);
 
   return (
-    <div className="col col--12">
+    <div>
       {errors
         .filter((elem) => !!elem)
         .map((error, index: number) => {

src/FieldTemplate/FieldTemplate.tsx

@@ -34,7 +34,7 @@ export default function FieldTemplate<
     <WrapIfAdditionalTemplate {...props}>
       {displayLabel && <Label label={label} required={required} id={id} />}
       {displayLabel && description ? description : null}
-      <div className='col col--12'>{children}</div>
+      {children}
       {errors}
       {help}
     </WrapIfAdditionalTemplate>