Merge branch 'resize-playground' of github.com:oddbird/sass-site into…

… resize-playground
oddbird · Sep 27, 2024 · 8757e2f · 8757e2f
2 parents b2349b5 + 69f7ea3
commit 8757e2f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/source/assets/sass/components/_playground.scss b/source/assets/sass/components/_playground.scss
@@ -117,11 +117,16 @@ $playground-base-colors: (
 
 // Playground Editor area
 .sl-c-playground {
-  --mod-splitview-gripper-width: 0;
+  --mod-splitview-gripper-width: var(--sl-gutter--quarter);
   --mod-splitview-gripper-height: var(--sl-gutter);
-  --mod-splitview-gripper-border-width-horizontal: var(--sl-gutter--half);
-  --mod-splitview-gripper-border-width-vertical: var(--sl-gutter--half);
-  --mod-splitview-handle-width: var(--sl-gutter);
+  --mod-splitview-gripper-border-width-horizontal: var(--sl-gutter--quarter);
+  --mod-splitview-gripper-border-width-vertical: var(--sl-gutter--quarter);
+  --mod-splitview-gripper-border-radius: var(--sl-border-radius--small);
+  --mod-splitview-handle-width: var(--sl-gutter--quarter);
+  --mod-splitview-handle-background-color: var(--sl-color--code-divider);
+  --mod-splitview-handle-background-color-down: var(--sl-color--code-divider-active);
+  --mod-splitview-handle-background-color-focus: var(--sl-color--code-divider-active);
+  --mod-splitview-handle-background-color-hover: var(--sl-color--code-divider-active);
   --sl-block-margin--callout: 0;
   --sl-block-padding--callout: var(--sl-gutter--quarter);
   --sl-color--button--tab: var(--sl-color--action-dark);

diff --git a/source/assets/sass/config/color/_content.scss b/source/assets/sass/config/color/_content.scss
@@ -42,6 +42,8 @@ $sl-color--code-base: #066;
 $sl-color--code-cool: #458;
 $sl-color--code-dark: black;
 $sl-color--code-highlight-light: rgba($sl-color--warning-light, 0.2);
+$sl-color--code-divider: color.adjust($sl-color--code-background-darker, $lightness: -10%);
+$sl-color--code-divider-active: color.adjust($sl-color--code-background-darker, $lightness: -15%);
 
 // Playground Status
 $sl-color--code-error: #cf0254;