Merge branch 'css-rename'

posit-dev · Sep 21, 2022 · 63cfd49 · 63cfd49
2 parents df29982 + f892b29
commit 63cfd49
Show file tree

Hide file tree

Showing 15 changed files with 118 additions and 129 deletions.
diff --git a/quarto/quarto-style.css b/quarto/quarto-style.css
@@ -114,8 +114,8 @@ hr {
 
 /* Code Boxes */
 
-div.sourceCode,
-div.pyshiny-container {
+div.output-content,
+div.shinylive-wrapper {
   background-color: rgba(250, 250, 250, 0.65);
   border: 1px solid rgba(233, 236, 239, 0.65);
   border-radius: 0.5rem;
@@ -125,70 +125,68 @@ div.pyshiny-container {
   margin-bottom: 32px;
 }
 
-div.sourceCode {
+div.output-content {
   padding: 12px 14px;
 }
 
-pre.sourceCode {
+pre.output-content {
   font-size: 13px;
   line-height: 1.8;
 }
 
-/* PyShiny Container */
-
-div.pyshiny-container {
+div.shinylive-wrapper {
   margin: 1em 0;
   border-radius: 8px;
 }
 
-.App--container {
+.shinylive-container {
   background-color: #eeeff2;
   min-height: auto;
 }
 
-.App--container > div {
+.shinylive-container > div {
   border-radius: var(--panel-roundness);
   background-color: var(--colors-bg);
   box-shadow: none;
 }
 
-.App--container.editor-cell {
+.shinylive-container.editor-cell {
   padding: 0;
 }
 
-.App--container.editor-cell .Editor {
+.shinylive-container.editor-cell .shinylive-editor {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-.App--container.editor-cell .OutputCell {
+.shinylive-container.editor-cell .shinylive-output-cell {
   border-top: 2px solid #eeeff2;
   border-top-right-radius: 0;
   border-top-left-radius: 0;
 }
 
-.App--container.editor-cell .OutputCell .rendered_html {
+.shinylive-container.editor-cell .shinylive-output-cell .rendered-html {
   padding: 2px 12px 3px 12px;
 }
 
-.App--container.editor-cell .OutputCell pre.sourceCode {
+.shinylive-container.editor-cell .shinylive-output-cell pre.output-content {
   border-top-right-radius: 0;
   border-top-left-radius: 0;
   background-color: #eeeff2;
   padding: 2px 12px 3px 12px;
   color: #666;
 }
 
-.App--container.editor-cell .Editor--container {
+.shinylive-container.editor-cell .editor-container {
   padding: 12px 12px 4px 12px;
 }
 
-.App--container.viewer > div,
-.App--container.viewer iframe {
+.shinylive-container.viewer > div,
+.shinylive-container.viewer iframe {
   border-radius: var(--panel-roundness);
 }
 
-.Editor--container .cm-editor .cm-scroller {
+.editor-container .cm-editor .cm-scroller {
   font-size: 13px;
   line-height: 1.8;
 }
diff --git a/src/Components/App.css b/src/Components/App.css
@@ -26,7 +26,7 @@
     6.2px 8.3px 11.7px -2.5px hsl(var(--shadow-color) / 0.36);
 }
 
-.App--container {
+.shinylive-container {
   --pad: 2px;
   height: 100%;
   width: 100%;
@@ -38,26 +38,26 @@
 }
 
 /* Settings for standalone app viewer (with no other components) */
-.App--container.viewer {
+.shinylive-container.viewer {
   --pad: 0;
 }
 
-.App--container > div {
+.shinylive-container > div {
   border-radius: var(--panel-roundness);
   background-color: var(--colors-bg);
   /* outline: 1px solid var(--colors-grey); */
 }
 
-.ExampleSelector {
+.shinylive-example-selector {
   grid-area: exampleselector;
 }
-.Editor {
+.shinylive-editor {
   grid-area: editor;
 }
-.Terminal {
+.shinylive-terminal {
   grid-area: terminal;
 }
-.Viewer {
+.shinylive-viewer {
   grid-area: viewer;
 }
 

diff --git a/src/Components/App.tsx b/src/Components/App.tsx
@@ -264,7 +264,7 @@ export function App({
       <>
         <HeaderBar headerBarCallbacks={headerBarCallbacks}></HeaderBar>
         <ResizableGrid
-          className="App--container"
+          className="shinylive-container"
           areas={[
             ["exampleselector", "editor", "viewer"],
             ["exampleselector", "terminal", "viewer"],
@@ -306,7 +306,7 @@ export function App({
       <>
         <HeaderBar headerBarCallbacks={headerBarCallbacks}></HeaderBar>
         <ResizableGrid
-          className="App--container"
+          className="shinylive-container"
           areas={[
             ["editor", "viewer"],
             ["terminal", "viewer"],
@@ -341,7 +341,7 @@ export function App({
   } else if (appMode === "editor-terminal") {
     return (
       <ResizableGrid
-        className="App--container"
+        className="shinylive-container"
         areas={[["editor", "terminal"]]}
         rowSizes={["1fr"]}
         colSizes={["1fr", "1fr"]}
@@ -366,7 +366,7 @@ export function App({
     );
   } else if (appMode === "editor-cell") {
     return (
-      <div className="App--container editor-cell">
+      <div className="shinylive-container editor-cell">
         <React.Suspense fallback={<div>Loading...</div>}>
           <Editor
             currentFilesFromApp={currentFiles}
@@ -405,7 +405,7 @@ export function App({
           };
 
     return (
-      <ResizableGrid className="App--container editor-viewer" {...gridDef}>
+      <ResizableGrid className="shinylive-container editor-viewer" {...gridDef}>
         <React.Suspense fallback={<div>Loading...</div>}>
           <Editor
             currentFilesFromApp={currentFiles}
@@ -430,7 +430,7 @@ export function App({
           <HeaderBar headerBarCallbacks={headerBarCallbacks}></HeaderBar>
         ) : null}
         <div
-          className="App--container viewer"
+          className="shinylive-container viewer"
           style={{
             height: appOptions.viewerHeight
               ? `${appOptions.viewerHeight}px`