First commit

application/elements/button.js

@@ -0,0 +1,211 @@
+
+//import document 	from '/unify/document.js';
+
+export default class button{
+
+	height					= "fit-content";
+
+	layers					= 1;
+
+	fontWeight				= "normal";
+	
+	borderRadius			= "4px";
+
+	fontSize				= "12px";
+
+	cursor					= "pointer";
+
+	color					= "white";
+
+	width					= "fit-content";
+
+	
+	#ifdef ANDROID
+
+		borderRadius			= 40;
+
+		fontSize				= 15
+
+		margin					= 20;
+
+		width					= "-webkit-fill-available";
+
+		fontSize				= 22;
+
+		fontWeight				= "bold"
+
+		textAlign				= "center";
+
+		padding					= 20;
+
+
+
+		#ifdef LIGHT
+
+			background 				= "#f2f2f2";
+
+			color					= "#019e7c";
+
+			hoverBackgroundColor	= "#d9d9d9";
+
+			opaqueBackgroundColor	= "#f2f2f2";
+
+		#endif
+
+		#ifdef DARK
+
+			background 				= "#323232";
+
+			color					= "white";
+
+			//border					= "1px solid #3d3a3a";
+
+			hoverBackgroundColor	= "#3e3e3e";
+
+			opaqueBackgroundColor	= "#323232";
+
+		#endif
+
+	#endif
+
+
+	#ifdef WINDOWS
+
+		border					= "1px solid #7f7b7b";
+
+		margin					= 12;
+
+		padding					= "8px 40px";
+
+		#ifdef LIGHT
+
+			background 				= "#0067C0";
+
+			color					= "white";
+
+			hoverBackgroundColor	= "rgb(86 141 189)";
+
+			opaqueBackgroundColor	= "#0067C0";
+
+		#endif
+
+		#ifdef DARK
+
+			background 				= "#323232";
+
+			color					= "white";
+
+			border					= "1px solid #3d3a3a";
+
+			hoverBackgroundColor	= "#3e3e3e";
+
+			opaqueBackgroundColor	= "#323232";
+
+		#endif
+
+	#endif
+
+
+	#ifdef MACOS
+
+		border					= "1px solid #7f7b7b";
+
+		margin					= 2;
+
+		margin					= "4px 2px"
+
+		padding					= "4px 20px";
+
+		#ifdef LIGHT
+
+			color					= "black";
+
+			background				= "white";
+
+			border					= "1px solid #e3e1e1";
+
+			fontSize				= 14;
+
+			opaqueBackgroundColor	= "white";
+
+			hoverBackgroundColor	= "rgb(230 231 230 / 65%)";
+
+		#endif
+
+		#ifdef DARK
+
+			color					= "white";
+
+			background				= "#282828";
+
+			hoverBackgroundColor	= "#3e3e3e";
+
+			opaqueBackgroundColor	= "#282828";
+
+		#endif
+
+	#endif
+
+	
+
+	display					= "block";
+
+	async mousedown() {
+/*
+
+		var backgroundAnimation = this.createAnimation("backgroundAnimation");
+
+		var key = backgroundAnimation.createKeyFrame( 0 );
+
+
+		key.setProperty( "background", this.background );
+
+
+
+		var key = backgroundAnimation.createKeyFrame( 100 );
+
+		
+		#ifdef WINDOWS
+
+			#ifdef DARK
+
+				key.setProperty( "background", "#484747" );
+
+			#endif
+
+		#endif
+		
+
+		var animationPromiseC =  await backgroundAnimation.play("500ms");
+
+		this.background = "076fc9";
+*/
+
+	}
+
+
+	mouseover() {
+
+		this.background = this.hoverBackgroundColor;
+
+	}
+
+	mouseleave() {
+
+		this.background = this.opaqueBackgroundColor;
+
+		#ifdef WINDOWS
+
+			#ifdef DARK
+
+				this.background = this.opaqueBackgroundColor;
+
+			#endif
+
+		#endif
+
+	}
+
+
+}
+