Changed: Single scss file with all variables

kleber-swf · Sep 7, 2022 · 5a64272 · 5a64272
1 parent d2f3093
commit 5a64272
Show file tree

Hide file tree

Showing 22 changed files with 30 additions and 65 deletions.
diff --git a/src/_colors.scss b/src/_colors.scss
diff --git a/src/_editor-vars.scss b/src/_editor-vars.scss
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
diff --git 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
@@ -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
@@ -1,16 +1,14 @@
-@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;
 	display: block;
 	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
@@ -1,5 +1,3 @@
-@import 'editor-vars';
-
 phred-selection-gizmo {
 	position: absolute;
 	display: block;