Merge pull request #28 from ofcyln/ui-improvements

#20 Lightweight Material UI integration, HTML elements customized and replaced with Material UI elements, Lightweight custom option element modification implemented, Animated scene background generation implemented.
ofcyln · Jul 31, 2020 · 0fabc7c · 0fabc7c
2 parents 74c9d6b + ed1b77d
commit 0fabc7c
Show file tree

Hide file tree

Showing 6 changed files with 421 additions and 68 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -52,6 +52,7 @@
   "dependencies": {
     "@babel/polyfill": "^7.8.3",
     "core-js": "^3.6.4",
-    "html2canvas": "^1.0.0-rc.5"
+    "html2canvas": "^1.0.0-rc.5",
+    "material-design-lite": "^1.3.0"
   }
 }
diff --git a/src/assets/css/color-change.scss b/src/assets/css/color-change.scss
@@ -0,0 +1,205 @@
+@-webkit-keyframes changeColor {
+  from {
+    background-color: rgba(255, 193, 7, 0.1);
+  }
+  10% {
+    background-color: rgba(96, 255, 7, 0.1);
+  }
+  20% {
+    background-color: rgba(7, 255, 147, 0.1);
+  }
+  30% {
+    background-color: rgba(7, 226, 255, 0.1);
+  }
+  40% {
+    background-color: rgba(7, 77, 255, 0.1);
+  }
+  50% {
+    background-color: rgba(109, 7, 255, 0.1);
+  }
+  60% {
+    background-color: rgba(255, 7, 229, 0.1);
+  }
+  70% {
+    background-color: rgba(255, 7, 7, 0.1);
+  }
+  80% {
+    background-color: rgba(255, 94, 7, 0.1);
+  }
+  90% {
+    background-color: rgba(152, 142, 47, 0.1);
+  }
+  100% {
+    background-color: rgba(45, 41, 127, 0.1);
+  }
+  to {
+    background-color: rgba(255, 193, 7, 0.1);
+  }
+}
+@-moz-keyframes changeColor {
+  from {
+    background-color: rgba(255, 193, 7, 0.1);
+  }
+  10% {
+    background-color: rgba(96, 255, 7, 0.1);
+  }
+  20% {
+    background-color: rgba(7, 255, 147, 0.1);
+  }
+  30% {
+    background-color: rgba(7, 226, 255, 0.1);
+  }
+  40% {
+    background-color: rgba(7, 77, 255, 0.1);
+  }
+  50% {
+    background-color: rgba(109, 7, 255, 0.1);
+  }
+  60% {
+    background-color: rgba(255, 7, 229, 0.1);
+  }
+  70% {
+    background-color: rgba(255, 7, 7, 0.1);
+  }
+  80% {
+    background-color: rgba(255, 94, 7, 0.1);
+  }
+  90% {
+    background-color: rgba(152, 142, 47, 0.1);
+  }
+  100% {
+    background-color: rgba(45, 41, 127, 0.1);
+  }
+  to {
+    background-color: rgba(255, 193, 7, 0.1);
+  }
+}
+@-ms-keyframes changeColor {
+  from {
+    background-color: rgba(255, 193, 7, 0.1);
+  }
+  10% {
+    background-color: rgba(96, 255, 7, 0.1);
+  }
+  20% {
+    background-color: rgba(7, 255, 147, 0.1);
+  }
+  30% {
+    background-color: rgba(7, 226, 255, 0.1);
+  }
+  40% {
+    background-color: rgba(7, 77, 255, 0.1);
+  }
+  50% {
+    background-color: rgba(109, 7, 255, 0.1);
+  }
+  60% {
+    background-color: rgba(255, 7, 229, 0.1);
+  }
+  70% {
+    background-color: rgba(255, 7, 7, 0.1);
+  }
+  80% {
+    background-color: rgba(255, 94, 7, 0.1);
+  }
+  90% {
+    background-color: rgba(152, 142, 47, 0.1);
+  }
+  100% {
+    background-color: rgba(45, 41, 127, 0.1);
+  }
+  to {
+    background-color: rgba(255, 193, 7, 0.1);
+  }
+}
+@-o-keyframes changeColor {
+  from {
+    background-color: rgba(255, 193, 7, 0.1);
+  }
+  10% {
+    background-color: rgba(96, 255, 7, 0.1);
+  }
+  20% {
+    background-color: rgba(7, 255, 147, 0.1);
+  }
+  30% {
+    background-color: rgba(7, 226, 255, 0.1);
+  }
+  40% {
+    background-color: rgba(7, 77, 255, 0.1);
+  }
+  50% {
+    background-color: rgba(109, 7, 255, 0.1);
+  }
+  60% {
+    background-color: rgba(255, 7, 229, 0.1);
+  }
+  70% {
+    background-color: rgba(255, 7, 7, 0.1);
+  }
+  80% {
+    background-color: rgba(255, 94, 7, 0.1);
+  }
+  90% {
+    background-color: rgba(152, 142, 47, 0.1);
+  }
+  100% {
+    background-color: rgba(45, 41, 127, 0.1);
+  }
+  to {
+    background-color: rgba(255, 193, 7, 0.1);
+  }
+}
+@keyframes changeColor {
+  from {
+    background-color: rgba(255, 193, 7, 0.1);
+  }
+  10% {
+    background-color: rgba(96, 255, 7, 0.1);
+  }
+  20% {
+    background-color: rgba(7, 255, 147, 0.1);
+  }
+  30% {
+    background-color: rgba(7, 226, 255, 0.1);
+  }
+  40% {
+    background-color: rgba(7, 77, 255, 0.1);
+  }
+  50% {
+    background-color: rgba(109, 7, 255, 0.1);
+  }
+  60% {
+    background-color: rgba(255, 7, 229, 0.1);
+  }
+  70% {
+    background-color: rgba(255, 7, 7, 0.1);
+  }
+  80% {
+    background-color: rgba(255, 94, 7, 0.1);
+  }
+  90% {
+    background-color: rgba(152, 142, 47, 0.1);
+  }
+  100% {
+    background-color: rgba(45, 41, 127, 0.1);
+  }
+  to {
+    background-color: rgba(255, 193, 7, 0.1);
+  }
+}
+
+.scene-container {
+  -webkit-animation: changeColor 30s ease infinite;
+  -khtml-animation: changeColor 30s ease infinite;
+  -moz-animation: changeColor 30s ease infinite;
+  -ms-animation: changeColor 30s ease infinite;
+  -o-animation: changeColor 30s ease infinite;
+  animation: changeColor 30s ease infinite;
+  -webkit-transition: 0.3s;
+  -khtml-transition: 0.3s;
+  -moz-transition: 0.3s;
+  -ms-transition: 0.3s;
+  -o-transition: 0.3s;
+  transition: 0.3s;
+}
diff --git a/src/assets/css/styles.scss b/src/assets/css/styles.scss
@@ -26,10 +26,15 @@ $white: #fff;
 	}
 }
 
+.w-100 {
+	width: 100%;
+}
+
 .logo-scene-container {
 	height: 60%;
 	width: 60%;
 	overflow: hidden;
+	box-shadow: 0 0 15px -1px rgba(0,0,0,0.5);
 
 	.logo-area img {
 		@include absolute;
@@ -55,7 +60,6 @@ $white: #fff;
 
 .button {
 	display: inline-block;
-	padding: 5px 10px;
 	background-color: #7f85a7;
 	color: $white;
 	cursor: pointer;
@@ -69,6 +73,7 @@ $white: #fff;
 
 .properties-container {
 	width: 300px;
+	box-shadow: -10px 1px 10px -5px rgba(0,0,0,0.2);
 }
 
 .github-ribbon {
@@ -129,3 +134,108 @@ $white: #fff;
 .overflow-y-auto {
 	overflow-y: auto;
 }
+
+.font-size {
+	&-xs {
+		font-size: 10px;
+	}
+
+	&-sm {
+		font-size: 12px;
+	}
+
+	&-md {
+		font-size: 13px;
+	}
+
+	&-semi-lg {
+		font-size: 14px;
+	}
+
+	&-lg {
+		font-size: 15px;
+	}
+
+	&-xl {
+		font-size: 17px;
+	}
+
+	&-xxl {
+		font-size: 19px;
+	}
+}
+
+.font-weight {
+	&-normal {
+		font-weight: 400;
+	}
+
+	&-semi-bold {
+		font-weight: 600;
+	}
+
+	&-bold {
+		font-weight: 700;
+	}
+}
+
+.resize-none {
+	resize: none;
+}
+
+input[type=color] {
+	height: 35px;
+	cursor: pointer;
+}
+
+.mdl-textfield__label:after {
+	bottom: 13px !important;
+}
+
+// custom select
+select {
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	outline: 0;
+	box-shadow: none;
+	border: 0 !important;
+	background: #7f85a7;
+	background-image: none;
+	flex: 1;
+	padding: 0 .5em;
+	color: #fff;
+	cursor: pointer;
+
+	&::-ms-expand {
+		display: none;
+	}
+}
+
+.custom-select-container {
+	position: relative;
+	display: flex;
+	height: 35px;
+	line-height: 35px;
+	background: #7f85a7;
+	overflow: hidden;
+	border-radius: .25em;
+
+	&::after {
+		content: '\25BC';
+		position: absolute;
+		top: 0;
+		right: 0;
+		padding: 0 15px;
+		background: #676e95;
+		color: #c7c7c7;
+		cursor: pointer;
+		pointer-events: none;
+		-webkit-transition: .25s all ease;
+		-o-transition: .25s all ease;
+		transition: .25s all ease;
+	}
+
+	&:hover::after {
+		color: #fff;
+	}
+}