x4js 1.4.4 → 1.4.7

package/src/x4.less

@@ -1,37 +1,77 @@
-// out: false
-
+// out: ../x4.css
 
 :root {
-	--background: #161717;
-	
-	--button-color: rgb(54,54,54);
-	--button-border: rgb(0,0,0);
-	--button-icon-color: rgb( 255, 255, 255);
-
-	--scrollbar-width: 6px;
-	--scrollbar-bk: white;
-	--scrollbar-thumb: grey;
-}
-
-* {
-	user-select: none;
-	box-sizing: border-box;
-}
-
-html {
-	font-family: @def-font;
-	font-size: @def-font-size;
-}
+	--x4-font: "sans serif";
+	--x4-font-size: "13px";
 
-body {
+	--x4-base-color: #266888;
+	
+	--x4-selection-color: #2458B3;
+	--x4-hover-color: fadeout( #2458B3, 10% );
+	--x4-mask-color: fadeout( #2458B3, 40% );
+	--x4-focus-color: #2458B3;
+	--x4-error-color: #b92a09;
+	--x4-success-color: #0A6640;
+	--x4-form-color: white;
+	--x4-tip-background: rgba(0,0,0,0.5);
+
+	--x4-button-color: rgb(54,54,54);
+	--x4-button-border-color: rgb(0,0,0);
+
+	--x4-scrollbar-width: 6px;
+	--x4-scrollbar-background: white;
+	--x4-scrollbar-thumb: grey;
+
+	--x4-sizer-size: 4px;
+
+	--x4-panel-border-color: rgba(0,0,0,0.1);
+
+	// todo: svg
+	--x4-icon-font-family: var( "fonteawesome" );
+	--x4-icon-circle-exclamation: "\f06a";
+	--x4-icon-chevron-right: "\f054";
+	--x4-icon-window-restore: "\f2d2";
+	--x4-icon-arrow-down-long: "\f175";
+	--x4-icon-arrow-up-long: "\f176";;
+}
+
+@BLACK10:	rgba(0,0,0,0.1);
+@BLACK20:	rgba(0,0,0,0.2);
+@BLACK30:	rgba(0,0,0,0.3);
+@BLACK40:	rgba(0,0,0,0.4);
+@BLACK50:	rgba(0,0,0,0.5);
+@BLACK60:	rgba(0,0,0,0.6);
+@BLACK70:	rgba(0,0,0,0.7);
+@BLACK80:	rgba(0,0,0,0.8);
+@BLACK90:	rgba(0,0,0,0.9);
+@BLACK:	#000;
+
+@WHITE5: rgba(255,255,255,0.05);
+@WHITE10: rgba(255,255,255,0.1);
+@WHITE20: rgba(255,255,255,0.2);
+@WHITE25: rgba(255,255,255,0.25);
+@WHITE30: rgba(255,255,255,0.3);
+@WHITE40: rgba(255,255,255,0.4);
+@WHITE50: rgba(255,255,255,0.5);
+@WHITE60: rgba(255,255,255,0.6);
+@WHITE70: rgba(255,255,255,0.7);
+@WHITE80: rgba(255,255,255,0.8);
+@WHITE90: rgba(255,255,255,0.9);
+@WHITE:	#fff;
+
+.x4-root-element {
 	padding: 0;
 	margin: 0;
-	position: fixed;
-    left: 0;
+	left: 0;
     top: 0;
     right: 0;
 	bottom: 0;    
-	-webkit-font-smoothing: antialiased;
+	
+	-webkit-font-smoothing: subpixel-antialiased;
+    text-rendering: geometricprecision;
+
+	font-family: var( --x4-font );
+	font-size: var( --x4-font-size );
 }
 
 input,
@@ -46,11 +86,11 @@ textarea {
 	border: 1px solid transparent;
 	
 	&:focus {
-		border: 1px solid @selection-color;
+		border: 1px solid var( --x4-selection-color );
 	}
 
 	&::selection {
-		background-color: @selection-color;
+		background-color: var( --x4-selection-color );
 		color: #fff;
 	}
 }
@@ -72,6 +112,8 @@ textarea {
 }
 
 .x-comp {
+	user-select: none;
+	box-sizing: border-box;
 	position: relative;
 }
 
@@ -133,14 +175,12 @@ textarea {
 	}
 }
 
-@sizer-size: 4px;
-
 .x-sizer-overlay {
 	position: absolute;
 
 	&.top {
 		width: 100%;
-		height: @sizer-size;
+		height: var( --x4-sizer-size );
 		cursor: n-resize;
 		left: 0;
 		top: 0;
@@ -148,7 +188,7 @@ textarea {
 
 	&.bottom {
 		width: 100%;
-		height: @sizer-size;
+		height: var( --x4-sizer-size );
 		cursor: n-resize;
 		left: 0;
 		bottom: 0;
@@ -157,7 +197,7 @@ textarea {
 	&.right {
 		top: 0;
 		right: 0;
-		width: @sizer-size;
+		width: var( --x4-sizer-size );
 		height: 100%;
 		cursor: e-resize;
 	}
@@ -165,19 +205,19 @@ textarea {
 	&.left {
 		top: 0;
 		left: 0;
-		width: @sizer-size;
+		width: var( --x4-sizer-size );
 		height: 100%;
 		cursor: e-resize;
 	}
 }
 
 .x-sizer-bottom {
-    padding-bottom: @sizer-size;
+    padding-bottom: var( --x4-sizer-size );
 }
 
 .x-icon {
 	&:before {
-		font-family: @fa-style-family;
+		font-family: var( --x4-icon-font-family );
 	}
 	
 	display: inline-flex;
@@ -200,16 +240,15 @@ textarea {
 
 	height: 2.5em;
 	padding: 8px;
-	border: 1px solid var( --button-border );
+	border: 1px solid var( --x4-button-border-color );
 	overflow: hidden;
 	
-	background-color: var( --button-color );
+	background-color: var( --x4-button-color );
 	color: @WHITE60;
 
 	.x-icon {
 		margin: 0 4px;
-		//width: 1em;
-		color: var( --button-icon-color );
+		color: inherit;
 	}
 
 	&:not(.x-disable) {
@@ -289,15 +328,15 @@ textarea {
 }
 
 ::-webkit-scrollbar {
-	width: var( --scrollbar-width );
-	height: var( --scrollbar-width );
-	background-color: var( --scrollbar-bk );
+	width: var( --x4-scrollbar-width );
+	height: var( --x4-scrollbar-width );
+	background-color: var( --x4-scrollbar-background );
 	box-sizing: border-box;
 }
 
 ::-webkit-scrollbar-thumb {
-	background-color: var( --scrollbar-thumb );
-	//border-radius: calc( var( --scrollbar-width ) / 2 - 1px );
+	background-color: var( --x4-scrollbar-thumb );
+	//border-radius: calc( var( --x4-scrollbar-width ) / 2 - 1px );
 }
 
 .x-circular-chart {
@@ -378,7 +417,7 @@ textarea {
 		}
 
 		&::selection {
-			background-color: @selection-color;
+			background-color: var( --x4-selection-color );
 			color: #fff;
 		}
 	}
@@ -387,13 +426,13 @@ textarea {
 		outline: none;
 
 		&> .x-label {
-			color: @focus-color;
+			color: var( --x4-focus-color );
 		}
 	}
 
 	.x-button.gadget {
 
-		font-size: @def-font-size;
+		font-size: var( --x4-font-size );
 		background-color: @BLACK10;
 		border: none;
 
@@ -411,19 +450,19 @@ textarea {
 	&:focus {
 		.x-button.gadget,
 		input {
-			border-color: @focus-color;
+			border-color: var( --x4-focus-color );
 		}
 
 		input {
-			border-bottom: 1px solid @focus-color;
+			border-bottom: 1px solid var( --x4-focus-color );
 		}
 	
 		.x-button.gadget {
-			color: @focus-color;
+			color: var( --x4-focus-color );
 		}			
 	
 		.x-label {
-			color: @focus-color;
+			color: var( --x4-focus-color );
 		}
 	}
 
@@ -440,8 +479,8 @@ textarea {
 		z-index: 1;
 		
 		&:before {
-			font-family: @fa-style-family;
-			content: @fa-var-circle-exclamation;
+			font-family: var( --x4-icon-font-family );
+			content: var( --x4-icon-circle-exclamation );
 			padding-right: 3px;
 			position: absolute;
 			left: 1px;
@@ -457,7 +496,7 @@ textarea {
 	&.x-error {
 		input {
 			border-bottom: none;
-			border-left: 4px solid @error-color;
+			border-left: 4px solid var( --x4-error-color );
 		}
 	}
 }
@@ -488,20 +527,20 @@ textarea {
 		.x-button.gadget,
 		input,
 		.x-fake-input {
-			border-color: @focus-color;
+			border-color: var( --x4-focus-color );
 		}
 
 		input,
 		.x-fake-input {
-			border-bottom: 1px solid @focus-color;
+			border-bottom: 1px solid var( --x4-focus-color );
 		}
 	
 		.x-button.gadget {
-			color: @focus-color;
+			color: var( --x4-focus-color );
 		}			
 	
 		.x-label {
-			color: @focus-color;
+			color: var( --x4-focus-color );
 		}
 	}
 	
@@ -577,7 +616,7 @@ textarea {
 
 	&:focus-within {
 		text-decoration: underline;
-		color: @selection-color;
+		color: var( --x4-selection-color );
 	}
 }
 
@@ -623,7 +662,7 @@ textarea {
 	}
 
 	input:checked + .x-label:before {
-		background-color: @selection-color;
+		background-color: var( --x4-selection-color );
 	}
 
 	input:checked + .x-label:after {
@@ -691,8 +730,8 @@ textarea {
 
 .x-popup-menu-item {
 	&:after {
-		content: @fa-var-chevron-right;
-		font-family: @fa-style-family;
+		content: var( --x4-icon-chevron-right );
+		font-family: var( --x4-icon-font-family );
 		font-size: 80%;
 	}
 }
@@ -705,7 +744,7 @@ textarea {
 
 .x-link {
 	padding: 4px;
-    color: @selection-color;
+    color: var( --x4-selection-color );
 	cursor: pointer;
 	outline: none;
 	
@@ -713,7 +752,7 @@ textarea {
 	align-items: center;
 	
 	&:focus {
-		color: @selection-color;
+		color: var( --x4-selection-color );
 		text-decoration: underline;
 	}
 
@@ -747,7 +786,7 @@ textarea {
 	}
 
 	.h-container {
-		margin-right: var( --scrollbar-width );
+		margin-right: var( --x4-scrollbar-width );
 	}
 }
 
@@ -765,12 +804,12 @@ textarea {
 		white-space: nowrap;
 		
 		&:hover {
-			background-color: fadeout( @selection-color, 10% );
+			background-color: var( --x4-hover-color );
 			color: white;
 		}
 		
 		&.x-selected {
-			background-color: @selection-color;
+			background-color: var( --x4-selection-color );
 			color: white;
 		}
 	
@@ -804,7 +843,7 @@ textarea {
 		width: 200vw;
 		height: 200vh;
 	
-		background-color: fadeout( @selection-color, 40% );
+		background-color: var( --x4-mask-color );
 		z-index: 999;
 	}
 }
@@ -837,6 +876,8 @@ textarea {
 				color: black;
 			}
 		}
+
+		border-bottom: 1px solid var( --x4-panel-border-color );
 	}
 	
 	&>.body {
@@ -875,7 +916,7 @@ textarea {
 
 	&.maximized > .title {
 		.max-btn:before {
-			content: @fa-var-window-restore;
+			content: var( --x4-icon-window-restore );
 		}
 	}
 
@@ -986,7 +1027,7 @@ textarea {
 }
 
 .x-form {
-	background-color: @form-color;
+	background-color: var( --x4-form-color );
 	padding: 8px;
 	min-width: 250px;
 	min-height: 50px;
@@ -1016,17 +1057,11 @@ textarea {
 	}
 }
 
-.x-panel {
-	&>.title {
-		border-bottom: 1px solid @BLACK10;
-	}
-}
-
 .x-button {
 	background-color: @WHITE25;
 	border-color: transparent;
-	font-family: @def-font;
-	font-size: @def-font-size;
+	font-family: var( --x4-font );
+	font-size: var( --x4-font-size );
 
 	.x-icon {
 		width: 1.5em;
@@ -1078,7 +1113,7 @@ textarea {
 
 	&>.title {
 		background: none;
-		background-color: @error-color;
+		background-color: var( --x4-error-color );
 		height: 2.5em;
 
 		.x-label {
@@ -1101,7 +1136,7 @@ textarea {
 		
 		.icon {
 			font-size: 48px;
-			color: @error-color;
+			color: var( --x4-error-color );
 			margin-right: 8px;
 		}
 
@@ -1118,7 +1153,7 @@ textarea {
 			padding-top: 8px;
 
 			.x-button {
-				background-color: @error-color;
+				background-color: var( --x4-error-color );
 				color: white;
 			}
 
@@ -1166,14 +1201,14 @@ textarea {
 			height: unset;
 
 			&.sort:before {
-				content: @fa-var-arrow-down-long;
-				font-family: @fa-style-family;
+				content: var( --x4-icon-arrow-down-long );
+				font-family: var( --x4-icon-font-family );
 				padding-right: 4px;
 			}
 
 			&.sort.desc:before {
-				content: @fa-var-arrow-up-long;
-				font-family: @fa-style-family;
+				content: var( --x4-icon-arrow-up-long );
+				font-family: var( --x4-icon-font-family );
 				padding-right: 4px;
 			}
 		}
@@ -1223,7 +1258,7 @@ textarea {
 		}
 
 		&.x-selected {
-			background-color: @selection-color;
+			background-color: var( --x4-selection-color );
 
 			.x-cell {
 				color: white;
@@ -1257,7 +1292,7 @@ textarea {
 
 	&:focus {
 		.x-cell.x-selected {
-			background-color: @selection-color;
+			background-color: var( --x4-selection-color );
 			color: white;
 		}
 	}
@@ -1278,17 +1313,18 @@ textarea {
 
 	.x-button {
 		background-color: transparent;
-		color: var( --base-color );
+		color: var( --x4-base-color );
 		border: none;
-		border-bottom: 1px solid fadeout(@base-color,90%);
+		//border-bottom: 1px solid fadeout(var( --x4-base-color ),90%);
+		
 		min-height: 2em;
 
-		.x-icon {
-			color: fadeout( @base-color, 50% );
-		}
+		//.x-icon {
+		//	color: fadeout( var( --x4-base-color ), 50% );
+		//}
 
 		&:hover {
-			background-color: fadeout(@base-color,30%);
+			background-color: var( --x4-hover-color );
 			color: white;
 
 			.x-icon {
@@ -1297,7 +1333,7 @@ textarea {
 		}		
 
 		&.x-active {
-			background-color: @base-color;
+			background-color: var( --x4-base-color );
 			color: white;
 
 			.x-icon {
@@ -1306,7 +1342,7 @@ textarea {
 		}
 
 		&.x-active:hover {
-			background-color: fadeout(@base-color,20%);
+			//background-color: fadeout(var( --x4-base-color ),20%);
 			color: white;
 
 			.x-icon {
@@ -1354,11 +1390,11 @@ textarea {
 		position: absolute;
 		left: 6px;
 		top: 7px;
-		color: fadeout(darken(@base-color,5%),10%);
+		color: var( --x4-tip-background );	
 	}
 
 	.x-label {
-		background-color: @selection-color;
+		background-color: var( --x4-selection-color );
 		white-space: break-spaces;
 		display: inline-block;
 		padding: 6px;
@@ -1367,7 +1403,7 @@ textarea {
 }
 
 .x-search-bar {
-	background-color: @base-color;
+	background-color: var( --x4-base-color );
 	height: 2em;
 }
 
@@ -1466,7 +1502,7 @@ textarea {
 		//border-bottom: 1px solid @BLACK10;
 
 		&:hover {
-			background-color: fadeout(@selection-color,90%);
+			background-color: var( --x4-hover-color );
 			border-radius: 4px;
 		}
 
@@ -1481,7 +1517,7 @@ textarea {
 
 		.today {
 			font-weight: bold;
-			background-color: @error-color;
+			background-color: var( --x4-error-color );
 				
 			span {
 				//border: 2px solid #013e69;
@@ -1506,7 +1542,7 @@ textarea {
 		}
 
 		.day:hover {
-			background-color: fadeout(@selection-color,50%);
+			background-color: var( --x4-hover-color );
 			color: white;
 		}
 	}
@@ -1790,7 +1826,7 @@ textarea {
 
 		//&::before {
 		//	content: attr( icon );
-		//	font-family: @fa-style-family;
+		//	font-family: var( --x4-icon-font-family );
 		//	display: inline-block;
 		//	width: 1em;
 		//	color: @BLACK40;
@@ -1835,7 +1871,7 @@ textarea {
 }
 
 .x-tooltip.error {
-	background-color: @error-color;
+	background-color: var( --x4-error-color );
 	padding: 0 6px;
     margin-left: 3px;
 	position: absolute;
@@ -1872,7 +1908,7 @@ textarea {
 	
 	textarea {
 		font-family: monospace;
-		font-size: @def-font-size;
+		font-size: var( --x4-font-size );
 		padding: 2px;
 
 		resize: none;
@@ -1881,7 +1917,7 @@ textarea {
 		width: 100%;
 
 		&:focus {
-			border: 1px solid @selection-color
+			border: 1px solid var( --x4-selection-color )
 		}
 
 		color: transparent;
@@ -1895,7 +1931,7 @@ textarea {
 
 	.x-syntax-hiliter {
 		font-family: monospace;
-		font-size: @def-font-size;
+		font-size: var( --x4-font-size );
 		padding: 2px;
 		border: 1px solid transparent;
 		overflow: hidden;

package/tsconfig.json

@@ -6,7 +6,7 @@
     	"strictNullChecks": false,
     	"outDir": "./lib",
 		"declaration": true,
-		"module": "esnext",
+		"module": "commonjs",
 		"strict": false,
   	},
 	"include": [