Tidied up CSS

bvaughn · Dec 24, 2022 · e18adc9 · e18adc9
1 parent a3f42b4
commit e18adc9
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 47 deletions.
diff --git a/packages/react-resizable-panels-website/root.css b/packages/react-resizable-panels-website/root.css
@@ -1,3 +1,19 @@
+:root {
+  --color-background-code: rgba(0, 0, 0, 0.35);
+  --color-background-default: #081120;
+  --color-button-background: #2a3343;
+  --color-button-background-hover: #454950;
+  --color-button-border: #18181a;
+  --color-code: #c67bff;
+  --color-default: #ffffff;
+  --color-horizontal-rule: #454950;
+  --color-link: #dcadff;
+  --color-panel-background: #192230;
+  --color-panel-background-alternate: #202124;
+  --color-solid-resize-bar: #454950;
+  --color-solid-resize-bar-handle: rgba(255, 255, 255, 0.2);
+}
+
 :root,
 html,
 body,
@@ -6,10 +22,9 @@ body,
   height: 100vh;
   padding: 0;
   margin: 0;
-  overflow: hidden;
 
-  background-color: #081120;
-  color: #ffffff;
+  background-color: var(--color-background-default);
+  color: var(--color-default);
 
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
@@ -25,8 +40,8 @@ p {
 }
 
 code {
-  color: #c67bff;
-  background-color: rgba(0, 0, 0, 0.35);
+  color: var(--color-code);
+  background-color: var(--color-background-code);
   padding: 0 0.25em;
   border-radius: 0.25em;
 }
@@ -37,5 +52,5 @@ h2 {
 }
 
 a {
-  color: #dcadff;
+  color: var(--color-link);
 }
diff --git a/packages/react-resizable-panels-website/src/components/ResizeHandle.module.css b/packages/react-resizable-panels-website/src/components/ResizeHandle.module.css
@@ -17,5 +17,5 @@
 
 .ResizeHandleActive,
 .ResizeHandle:hover .ResizeHandleInactive {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: var(--color-solid-resize-bar-handle);
 }
diff --git a/packages/react-resizable-panels-website/src/routes/Demo/HorizontalGroup.tsx b/packages/react-resizable-panels-website/src/routes/Demo/HorizontalGroup.tsx
@@ -17,7 +17,7 @@ export default function HorizontalGroup({
       <Panel className={styles.PanelRow} defaultSize={0.2} id="left">
         <div
           className={styles.HorizontalFiller}
-          style={{ backgroundColor: "var(--color-horizontal)" }}
+          style={{ backgroundColor: "var(--color-panel-background)" }}
         >
           <p className={styles.ParagraphOfText}>
             This is a "<em>horizontal</em>" <code>PanelGroup</code>
@@ -48,7 +48,7 @@ export default function HorizontalGroup({
         <ResizeHandle id="left-handle" />
         <div
           className={styles.HorizontalFiller}
-          style={{ backgroundColor: "var(--color-horizontal)" }}
+          style={{ backgroundColor: "var(--color-panel-background)" }}
         >
           <h2>Auto Save</h2>
           <p className={styles.ParagraphOfText}>
@@ -98,7 +98,7 @@ export default function HorizontalGroup({
         <ResizeHandle id="right-handle" />
         <div
           className={styles.HorizontalFiller}
-          style={{ backgroundColor: "var(--color-horizontal)" }}
+          style={{ backgroundColor: "var(--color-panel-background)" }}
         >
           <p className={styles.ParagraphOfText}>
             Read more on{" "}

diff --git a/packages/react-resizable-panels-website/src/routes/Demo/VerticalGroup.tsx b/packages/react-resizable-panels-website/src/routes/Demo/VerticalGroup.tsx
@@ -13,7 +13,7 @@ export function VerticalGroup() {
   return (
     <div
       className={styles.VerticalFiller}
-      style={{ backgroundColor: "var(--color-vertical)" }}
+      style={{ backgroundColor: "var(--color-panel-background-alternate)" }}
     >
       <PanelGroup autoSaveId={GROUP_ID} direction="vertical">
         {showTopPanel && (

diff --git a/packages/react-resizable-panels-website/src/routes/Demo/styles.module.css b/packages/react-resizable-panels-website/src/routes/Demo/styles.module.css
@@ -1,10 +1,9 @@
 .FullHeightAndWidth {
-  width: calc(100vw - 1rem);
-  height: calc(100vh - 1rem);
-  margin: 0.5rem;
-
-  --color-horizontal: #192230;
-  --color-vertical: #202124;
+  position: absolute;
+  top: 0.5rem;
+  bottom: 0.5rem;
+  left: 0.5rem;
+  right: 0.5rem;
 }
 
 .PanelRow {
@@ -38,10 +37,10 @@
   border-radius: 1ch;
 }
 .HorizontalDot {
-  background-color: var(--color-horizontal);
+  background-color: var(--color-panel-background);
 }
 .VerticalDot {
-  background-color: var(--color-vertical);
+  background-color: var(--color-panel-background-alternate);
 }
 
 .Grower {
@@ -74,17 +73,17 @@
 .Button,
 .ButtonBottom,
 .ButtonTop {
-  color: #ffffff;
-  background: #2a3343;
-  border: 1px solid #18181a;
+  color: var(--color-default);
+  background-color: var(--color-button-background);
+  border: 1px solid var(--color-button-border);
   border-radius: 0.25rem;
   padding: 0.25rem 0.5rem;
   cursor: pointer;
 }
 .Button:hover,
 .ButtonBottom:hover,
 .ButtonTop:hover {
-  background: #454950;
+  background-color: var(--color-button-background-hover);
 }
 
 .ButtonBottom {
@@ -108,34 +107,14 @@
   display: block;
   height: 1px;
   width: 100%;
-  background-color: #4a4c50;
-}
-
-.HorizontalResizeHandle {
-  width: 0.5rem;
-  position: relative;
-}
-.ResizeHandle,
-.ActiveResizeHandle {
-  position: absolute;
-  top: 0.125rem;
-  bottom: 0.125rem;
-  left: 0.125rem;
-  right: 0.125rem;
-  border-radius: 0.125rem;
-  background-color: transparent;
-  transition: background-color 0.2s linear;
-}
-.ActiveResizeHandle,
-.HorizontalResizeHandle:hover .ResizeHandle {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: var(--color-solid-resize-bar);
 }
 
 .HorizontalDivider {
   display: block;
   width: 100%;
   height: 1px;
   border: none;
-  background-color: #454950;
+  background-color: var(--color-horizontal-rule);
   margin: 0.5rem 0;
 }
diff --git a/packages/react-resizable-panels-website/src/routes/Mobile/index.tsx b/packages/react-resizable-panels-website/src/routes/Mobile/index.tsx
@@ -10,14 +10,21 @@ export default function MobileRoute() {
     <div className={styles.Route}>
       <div className={styles.Container}>
         <PanelGroup autoSaveId="mobile-group" direction="horizontal">
-          <Panel className={styles.Panel} defaultSize={0.2} id="left" order={1}>
+          <Panel
+            className={styles.Panel}
+            defaultSize={0.2}
+            id="left"
+            minSize={0.2}
+            order={1}
+          >
             <div className={styles.PanelContent}>left</div>
             <ResizeHandle className={styles.ResizeHandle} id="left" />
           </Panel>
           <Panel
             className={styles.Panel}
             defaultSize={0.4}
             id="middle"
+            minSize={0.2}
             order={2}
           >
             <div className={styles.PanelContent}>middle</div>
@@ -26,6 +33,7 @@ export default function MobileRoute() {
             className={styles.Panel}
             defaultSize={0.2}
             id="right"
+            minSize={0.2}
             order={3}
           >
             <ResizeHandle className={styles.ResizeHandle} id="right" />

diff --git a/packages/react-resizable-panels-website/src/routes/Mobile/styles.module.css b/packages/react-resizable-panels-website/src/routes/Mobile/styles.module.css
@@ -17,7 +17,7 @@
 .PanelContent {
   height: 100%;
   width: 100%;
-  background-color: #192230;
+  background-color: var(--color-panel-background);
   display: flex;
   flex-direction: column;
   align-items: center;