starting properties panel

example/game.js

@@ -1,6 +1,6 @@
 const game = new Phaser.Game({
 	width: 1920,
-	height: 1600,
+	height: 1200,
 	renderer: Phaser.AUTO,
 	parent: 'game',
 	scaleMode: Phaser.ScaleManager.SHOW_ALL,

src/ui/_colors.scss

@@ -2,4 +2,6 @@ $primary-color: #2980B9;
 $on-primary-color: #F2F2F2;
 
 $background-color: #232323;
-$on-background-color: #F2F2F2;
+$on-background-color: #F2F2F2;
+
+$shadow-color: rgba(#111, 0.6)

src/ui/properties/panel/properties-panel.scss

@@ -1,5 +1,20 @@
+@import "colors";
+
 phed-properties-panel {
+	display: flex;
+	flex-direction: column;
+	justify-content: stretch;
+
 	.title {
 		font-weight: bold;
+		font-size: 14px;
+		color: rgba($on-background-color, 0.5);
+		background-color: rgba(black, 0.2);
+		padding: 6px 8px;
 	}
-}
+
+	.content {
+		padding: 12px;
+		box-shadow: 0 2px 2px $shadow-color;
+	}
+}

src/ui/properties/panel/properties-panel.ts

@@ -6,9 +6,15 @@ export class PropertiesPanel extends Widget {
 
 	public connectedCallback() {
 		super.connectedCallback();
+
 		const title = document.createElement('div');
+		title.classList.add('title');
 		this.appendChild(title);
-		title.append('TITLE')
+		title.append('PROPERTIES');
+
+		const content = document.createElement('div');
+		content.classList.add('content');
+		this.appendChild(content);
 	}
 }
 

src/ui/properties/toolbar/properties-toolbar.scss

@@ -1,6 +1,8 @@
+@import 'colors';
+
 phred-properties-toolbar {
 	width: 250px;
-	box-shadow: -4px 0px 4px rgba(20, 20, 20, 0.5);
+	box-shadow: -4px 0px 4px $shadow-color;
 	z-index: 2;
 }
 

src/ui/stage.scss

@@ -12,7 +12,7 @@ phred-stage {
 		flex-direction: column;
 
 		.phred-game-container {
-			background-color: #1b1b1b;
+			background-color: #1B1B1B;
 			flex: 1;
 			overflow: overlay;
 		}

src/ui/widget/widget.scss

@@ -1,4 +1,4 @@
-@import '../colors';
+@import 'colors';
 
 .phred-widget {
 	background-color: $background-color;