From 5a64272c2b58854fe37c32de0757d70a1d095329 Mon Sep 17 00:00:00 2001
From: Kleber Silva <kleber@jogoglobal.com>
Date: Wed, 7 Sep 2022 09:11:05 -0300
Subject: [PATCH] Changed: Single scss file with all variables

---
 src/_colors.scss                              | 19 --------------
 src/_editor-vars.scss                         |  3 ---
 src/editor-view/actions/actions-toolbar.scss  |  2 --
 .../actions/button/action-button.scss         |  2 --
 src/editor-view/actions/help/help-screen.scss |  2 --
 .../options/reference-image.options.scss      |  2 --
 .../size-templates/size-templates-panel.scss  |  1 -
 src/editor-view/editor-view.scss              |  2 +-
 src/editor-view/inspector/inspector.scss      |  2 --
 .../search-field/search-field.scss            |  2 --
 .../tree-node/object-tree-node.scss           |  2 --
 src/editor-view/panel/panel.scss              |  2 --
 .../resize-handle/panel-resize-handle.scss    | 10 +++-----
 src/editor-view/popup/popup-container.scss    |  2 --
 src/editor-view/popup/popup.scss              |  2 --
 .../properties/editors/property-editor.scss   |  2 --
 src/editor-view/widget/widget.scss            |  2 --
 src/index.scss                                | 25 +++++++++++++++++--
 .../game-container/game-container.scss        |  2 --
 .../game-parent/game-resize-handle.scss       |  1 -
 .../selection-area/gizmos/scale-gizmo.scss    |  6 ++---
 .../gizmos/selection-gizmo.scss               |  2 --
 22 files changed, 30 insertions(+), 65 deletions(-)
 delete mode 100644 src/_colors.scss
 delete mode 100644 src/_editor-vars.scss

diff --git a/src/_colors.scss b/src/_colors.scss
deleted file mode 100644
index 42358dc..0000000
--- a/src/_colors.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-$primary-color: #2980b9;
-$on-primary: #F2F2F2;
-
-$background-color: #232323;
-$on-background: #D0D0D0;
-
-$border-color: #1B1B1B;
-$shadow-color: rgba(#111, 0.6);
-$light-shadow-color: rgba(#111, 0.2);
-
-$focused-text-color: $on-background;
-$unfocused-text-color: darken($on-background, 20%);
-$disabled-text-color: rgba($on-background, 0.5);
-
-$button-text-color: darken($on-background, 40%);
-
-$input-background: lighten($background-color, 3);
-$input-foreground: $on-background;
-$focused-input-border: rgba($on-background, 0.3);
diff --git a/src/_editor-vars.scss b/src/_editor-vars.scss
deleted file mode 100644
index c60f453..0000000
--- a/src/_editor-vars.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-$selection-color: #62c3d9;
-
-$gizmo-shadow: 0 0 2px 2px $shadow-color;
diff --git a/src/editor-view/actions/actions-toolbar.scss b/src/editor-view/actions/actions-toolbar.scss
index bd97a98..28ca433 100644
--- a/src/editor-view/actions/actions-toolbar.scss
+++ b/src/editor-view/actions/actions-toolbar.scss
@@ -1,5 +1,3 @@
-@import 'colors';
-
 phred-actions-toolbar {
 	height: 42px;
 	min-height: 42px;
diff --git a/src/editor-view/actions/button/action-button.scss b/src/editor-view/actions/button/action-button.scss
index 38b9a47..757f886 100644
--- a/src/editor-view/actions/button/action-button.scss
+++ b/src/editor-view/actions/button/action-button.scss
@@ -1,5 +1,3 @@
-@import 'colors';
-
 .actions-toolbar .button {
 	box-shadow: none;
 	position: relative;
diff --git a/src/editor-view/actions/help/help-screen.scss b/src/editor-view/actions/help/help-screen.scss
index 14b31cc..7244444 100644
--- a/src/editor-view/actions/help/help-screen.scss
+++ b/src/editor-view/actions/help/help-screen.scss
@@ -1,5 +1,3 @@
-@import 'colors';
-
 phred-help-screen.popup-container {
 	phred-popup {
 		width: 500px;
diff --git a/src/editor-view/actions/reference-image/options/reference-image.options.scss b/src/editor-view/actions/reference-image/options/reference-image.options.scss
index 7e7b4fe..824826b 100644
--- a/src/editor-view/actions/reference-image/options/reference-image.options.scss
+++ b/src/editor-view/actions/reference-image/options/reference-image.options.scss
@@ -1,5 +1,3 @@
-@import 'colors';
-
 $height: 160px;
 
 phred-reference-image-panel.popup-container {
diff --git a/src/editor-view/actions/size-templates/size-templates-panel.scss b/src/editor-view/actions/size-templates/size-templates-panel.scss
index e9ea4f4..ba56f43 100644
--- a/src/editor-view/actions/size-templates/size-templates-panel.scss
+++ b/src/editor-view/actions/size-templates/size-templates-panel.scss
@@ -1,4 +1,3 @@
-@import 'colors';
 @import '../button/action-button.scss';
 
 phred-size-templates-panel.fa {
diff --git a/src/editor-view/editor-view.scss b/src/editor-view/editor-view.scss
index 91ae6da..ff4b653 100644
--- a/src/editor-view/editor-view.scss
+++ b/src/editor-view/editor-view.scss
@@ -1,4 +1,4 @@
-@import 'colors';
+@import 'index';
 
 @mixin basic-input-properties {
 	font-size: 14px;
diff --git a/src/editor-view/inspector/inspector.scss b/src/editor-view/inspector/inspector.scss
index 7f37362..87a746f 100644
--- a/src/editor-view/inspector/inspector.scss
+++ b/src/editor-view/inspector/inspector.scss
@@ -1,5 +1,3 @@
-@import 'colors';
-
 @mixin inspector-title {
 	font-size: 12px;
 	font-weight: bold;
diff --git a/src/editor-view/object-tree/search-field/search-field.scss b/src/editor-view/object-tree/search-field/search-field.scss
index 951d020..91361e2 100644
--- a/src/editor-view/object-tree/search-field/search-field.scss
+++ b/src/editor-view/object-tree/search-field/search-field.scss
@@ -1,5 +1,3 @@
-@import 'colors';
-
 phred-search-field {
 	position: relative;
 	opacity: 0.8;
diff --git a/src/editor-view/object-tree/tree-node/object-tree-node.scss b/src/editor-view/object-tree/tree-node/object-tree-node.scss
index 5191374..2869294 100644
--- a/src/editor-view/object-tree/tree-node/object-tree-node.scss
+++ b/src/editor-view/object-tree/tree-node/object-tree-node.scss
@@ -1,5 +1,3 @@
-@import 'colors';
-
 phred-object-tree-node {
 	display: inline-block;
 	cursor: pointer;
diff --git a/src/editor-view/panel/panel.scss b/src/editor-view/panel/panel.scss
index a3a98e9..494fa2f 100644
--- a/src/editor-view/panel/panel.scss
+++ b/src/editor-view/panel/panel.scss
@@ -1,5 +1,3 @@
-@import 'colors';
-
 $handle-width: 5px;
 
 phred-panel {
diff --git a/src/editor-view/panel/resize-handle/panel-resize-handle.scss b/src/editor-view/panel/resize-handle/panel-resize-handle.scss
index 578b743..0e511ef 100644
--- a/src/editor-view/panel/resize-handle/panel-resize-handle.scss
+++ b/src/editor-view/panel/resize-handle/panel-resize-handle.scss
@@ -1,5 +1,3 @@
-@import 'colors';
-
 $handle-width: 6px;
 $active-handle-margin: 20px;
 
@@ -11,10 +9,10 @@ phred-panel-resize-handle {
 
 	&:active {
 		&.left {
-			right: -($active-handle-margin + $handle-width/2);
+			right: calc(($active-handle-margin + $handle-width/2) * -1);
 		}
 		&.right {
-			left: -($active-handle-margin + $handle-width/2);
+			left: calc(($active-handle-margin + $handle-width/2) * -1);
 		}
 		& > .thumb {
 			margin: 0 $active-handle-margin;
@@ -29,11 +27,11 @@ phred-panel-resize-handle {
 	}
 
 	&.left {
-		right: -$handle-width/2;
+		right: calc($handle-width * -0.5);
 	}
 
 	&.right {
-		left: -$handle-width/2;
+		left: calc($handle-width * -0.5);
 	}
 
 	& > .thumb {
diff --git a/src/editor-view/popup/popup-container.scss b/src/editor-view/popup/popup-container.scss
index d0b4966..8998a4d 100644
--- a/src/editor-view/popup/popup-container.scss
+++ b/src/editor-view/popup/popup-container.scss
@@ -1,5 +1,3 @@
-@import 'colors';
-
 .popup-container {
 	position: absolute;
 	top: 0;
diff --git a/src/editor-view/popup/popup.scss b/src/editor-view/popup/popup.scss
index 6e3202c..9aca546 100644
--- a/src/editor-view/popup/popup.scss
+++ b/src/editor-view/popup/popup.scss
@@ -1,5 +1,3 @@
-@import 'colors';
-
 phred-popup {
 	max-width: 90%;
 	max-height: 90%;
diff --git a/src/editor-view/properties/editors/property-editor.scss b/src/editor-view/properties/editors/property-editor.scss
index c0b788e..1a1a76c 100644
--- a/src/editor-view/properties/editors/property-editor.scss
+++ b/src/editor-view/properties/editors/property-editor.scss
@@ -1,5 +1,3 @@
-@import 'colors';
-
 .property-editor {
 	display: flex;
 	flex-direction: row;
diff --git a/src/editor-view/widget/widget.scss b/src/editor-view/widget/widget.scss
index bf46e71..50b8efe 100644
--- a/src/editor-view/widget/widget.scss
+++ b/src/editor-view/widget/widget.scss
@@ -1,5 +1,3 @@
-@import 'colors';
-
 .phred-widget {
 	background-color: $background-color;
 	box-sizing: border-box;
diff --git a/src/index.scss b/src/index.scss
index a515845..5189f5d 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,2 +1,23 @@
-@import 'colors';
-@import 'editor-vars';
+$primary-color: #2980b9;
+$on-primary: #F2F2F2;
+
+$background-color: #232323;
+$on-background: #D0D0D0;
+
+$border-color: #1B1B1B;
+$shadow-color: rgba(#111, 0.6);
+$light-shadow-color: rgba(#111, 0.2);
+
+$selection-color: #62c3d9;
+
+$focused-text-color: $on-background;
+$unfocused-text-color: darken($on-background, 20%);
+$disabled-text-color: rgba($on-background, 0.5);
+
+$button-text-color: darken($on-background, 40%);
+
+$input-background: lighten($background-color, 3);
+$input-foreground: $on-background;
+$focused-input-border: rgba($on-background, 0.3);
+
+$gizmo-shadow: 0 0 2px 2px $shadow-color;
\ No newline at end of file
diff --git a/src/scene-view/game-container/game-container.scss b/src/scene-view/game-container/game-container.scss
index 3474904..891c8b7 100644
--- a/src/scene-view/game-container/game-container.scss
+++ b/src/scene-view/game-container/game-container.scss
@@ -1,5 +1,3 @@
-@import 'colors';
-
 phred-game-container {
 	background-color: #1b1b1b;
 	flex: 1;
diff --git a/src/scene-view/game-parent/game-resize-handle.scss b/src/scene-view/game-parent/game-resize-handle.scss
index 84f1dc1..811428e 100644
--- a/src/scene-view/game-parent/game-resize-handle.scss
+++ b/src/scene-view/game-parent/game-resize-handle.scss
@@ -1,4 +1,3 @@
-@import 'colors';
 $size: 20px;
 
 phred-game-resize-handle {
diff --git a/src/scene-view/selection-area/gizmos/scale-gizmo.scss b/src/scene-view/selection-area/gizmos/scale-gizmo.scss
index 341a537..feb1d7c 100644
--- a/src/scene-view/selection-area/gizmos/scale-gizmo.scss
+++ b/src/scene-view/selection-area/gizmos/scale-gizmo.scss
@@ -1,8 +1,6 @@
-@import 'editor-vars';
-
 $handle-size: 15px;
 $size: 25px;
-$padding: ($size - $handle-size)/2;
+$padding: calc(($size - $handle-size) * 0.5);
 
 phred-scale-gizmo {
 	position: absolute;
@@ -10,7 +8,7 @@ phred-scale-gizmo {
 	box-sizing: border-box;
 	width: $size;
 	height: $size;
-	margin: -($size + 2)/2;
+	margin: calc(($size + 2px) * -0.5);
 	border-radius: $size;
 	pointer-events: all;
 	display: flex;
diff --git a/src/scene-view/selection-area/gizmos/selection-gizmo.scss b/src/scene-view/selection-area/gizmos/selection-gizmo.scss
index 3d4dd76..2c1d180 100644
--- a/src/scene-view/selection-area/gizmos/selection-gizmo.scss
+++ b/src/scene-view/selection-area/gizmos/selection-gizmo.scss
@@ -1,5 +1,3 @@
-@import 'editor-vars';
-
 phred-selection-gizmo {
 	position: absolute;
 	display: block;