[WebCards] Update from my local repos

1 files changed, 166 insertions, 37 deletions

diff --git a/webcards/styles/input.css b/webcards/styles/input.css
index 16a5385..0553fc2 100644
--- a/webcards/styles/input.css
+++ b/webcards/styles/input.css
@@ -2,7 +2,7 @@
 
 /*    All input    */
 
-input
+input, select
 {
     -webkit-appearance: none;
 	-moz-appearance: none;
@@ -11,7 +11,8 @@ input
 	margin: 5px;
 	
 	display: block;
-	z-index: 1;
+	
+	box-sizing: border-box;
 }
 
 /*    Button input    */
@@ -19,14 +20,13 @@ input
 input[type=button], input[type=submit], button
 {
     padding: 10px;
-    box-sizing: border-box;
 
     border: none;
     border-radius: 5px;
 
-    color: white;
-    background-color: #0084ff;
-    
+    background-color: var(--input-bg-button);
+	color: var(--input-color-button);
+	
     font-size: medium;
 
     transition-duration: 0.2s;
@@ -36,33 +36,34 @@ input[type=button], input[type=submit], button
 
 input[type=button]:hover, input[type=submit]:hover, button:hover
 {
-	background-color: #3ea2ff;
+	background-color: var(--input-bg-button-hover);
 }
 
 input[type=button]:active, input[type=submit]:active, button:active
 {
-	background-color: #0056a7;
+	background-color: var(--input-bg-button-active);
 }
 
 /*    Text, date, number, and time input    */
 
 input[type=text], input[type=date], input[type=time], input[type="number"]
 {
-	border: 2px solid #555;
+	border: 2px solid var(--input-border-text);
 	border-radius: 3px;
 	padding: 5px;
-	background-color: white;
+	background-color: var(--input-bg-text);
+	color: var(--input-color-text);
 	font-size: 1em;
 }
 
 input[type=text]:hover, input[type=date]:hover, input[type=time]:hover, input[type="number"]:hover
 {
-	border-color: black;
+	border-color: var(--input-border-text-hover);
 }
 
 input[type=text]:focus, input[type=date]:focus, input[type=time]:focus, input[type="number"]:focus
 {
-	border-color: #0084ff;
+	border-color: var(--input-border-text-active);
 }
 
 /*    Radial input    */
@@ -72,12 +73,12 @@ input[type=radio]
 	width: 20px;
 	height: 20px;
 	
-	border: 3px solid black;
+	border: 3px solid var(--input-border-bool);
 	border-radius: 50%;
 	
 	transition-duration: 0.2s;
 	
-	background-color: white;
+	background-color: var(--input-bg-bool);
 	
 	cursor: pointer;
 
@@ -91,18 +92,20 @@ input[type=radio]:checked, input[type=radio]:hover{
 
 input[type=radio]:checked
 {
-	background-color: black;
-	border-color: #0084ff;
+	background-color: var(--input-bg-bool-true);
+	border-color: var(--input-border-bool-true);
 }
 
 input[type=radio]:hover
 {
-	border-color: #3ea2ff;
+	background-color: var(--input-bg-bool-hover);
+	border-color: var(--input-border-bool-hover);
 }
 
 input[type=radio]:active
 {
-	border-color: black;
+	background-color: var(--input-bg-bool-active);
+	border-color: var(--input-border-bool-active);
 }
 
 /*    Checkbox input    */
@@ -119,13 +122,13 @@ input[type=checkbox]
 	width: 20px;
 	height: 20px;
 	
-	border: 3px solid black;
+	border: 3px solid var(--input-border-bool);
 	
 	border-radius: 2px;
 	
 	transition-duration: 0.2s;
 	
-	background-color: white;
+	background-color: var(--input-bg-bool);
 	
 	cursor: pointer;
 }
@@ -133,22 +136,25 @@ input[type=checkbox]
 input[type=checkbox]:checked
 {
 	border-width: 10px;
-	border-color: #0084ff;
+	background-color: var(--input-border-bool-true);
+	border-color: var(--input-border-bool-true);
 }
 
 input[type=checkbox]:hover
 {
-	border-color: #3ea2ff;
+	background-color: var(--input-bg-bool-hover);
+	border-color: var(--input-border-bool-hover);
 }
 
 input[type=checkbox]:active
 {
-	border-color: black;
+	background-color: var(--input-bg-bool-active);
+	border-color: var(--input-border-bool-active);
 }
 
 input[type=checkbox]::after
 {
-	height: 16px;
+	height: 15px;
 	width: 10px;
 	
 	box-sizing: border-box;
@@ -157,7 +163,7 @@ input[type=checkbox]::after
 	
 	display: block;
 	
-	border-color: black;
+	border-color: var(--input-bg-bool-true);
 	border-style: solid;
 	border-width: 0px 0px 0px 0px;
 	
@@ -201,13 +207,68 @@ input[type=file]
 	display: none;
 }
 
+/*    Custom select    */
+
+div.input-select
+{
+	font-size: 1em;
+
+	display: block;
+	position: absolute;
+	
+}
+
+div.input-select > div
+{
+	display: none;
+	pointer-events: none;
+}
+
+div.input-select > div[selected=true]
+{
+	display: block;
+}
+
+div.input-container:focus > div.input-select
+{
+	pointer-events: all;
+
+	transform: translate(0, 2em);
+
+	border: 2px solid var(--input-border-select-active);
+	background-color: var(--input-bg-select-active);
+}
+
+div.input-container:focus > div.input-select > div
+{
+	pointer-events: all;
+	display: block;
+	padding: 5px;
+	width: 6em;
+}
+
+div.input-container:focus > div.input-select > div:hover
+{
+	background-color: var(--input-bg-select-hover);
+	color: var(--input-color-select-hover);
+}
+
+div.input-container:focus > div.input-select > div[selected=true]:after
+{
+	font-family: "IcoFont";
+	content: '\eed8';
+	font-size: medium;
+}
+
 /*    Input container    */
 
-div.input-container {
+*.input-container {
 	margin: 5px;
 	padding: 5px;
 
 	border-radius: 3px;
+
+	display: inline-block;
 }
 
 /*    Color container    */
@@ -216,8 +277,8 @@ div.input-container[type=color]
 {
 	text-align: center;
 	
-	background-color: #0084ff;
-	color: white;
+	background-color: var(--input-bg-button);
+	color: var(--input-color-button);
 
 	transition-duration: 0.2s;
 	
@@ -237,20 +298,20 @@ div.input-container[type=color]::after
 
 div.input-container[type=color]:hover
 {
-	background-color: #3ea2ff;
+	background-color: var(--input-bg-button-hover);
 }
 
 div.input-container[type=color]:active
 {
-	background-color: #0056a7;
+	background-color: var(--input-bg-button-active);
 }
 
 /*    File input container    */
 
 div.input-container[type=file]
 {
-	background-color: #0084ff;
-	color: white;
+	background-color: var(--input-bg-button);
+	color: var(--input-color-button);
 	
 	transition-duration: 0.2s;
 
@@ -264,12 +325,12 @@ div.input-container[type=file]
 
 div.input-container[type=file]:hover
 {
-	background-color: #3ea2ff;
+	background-color: var(--input-bg-button-hover);
 }
 
 div.input-container[type=file]:active
 {
-	background-color: #0056a7;
+	background-color: var(--input-bg-button-active);
 }
 
 div.input-container[type=file]::after
@@ -283,14 +344,82 @@ div.input-container[type=file]::after
 
 /*    Radio input container    */
 
-div.input-container[type=radio]::before {
+div.input-container[type=radio]::before
+{
 	display: block;
-	content: 'Radio';
+	content: 'Select one';
+	transition-duration: 0.2s;
 }
 
 div.input-container[type=radio]
 {
-	background-color: rgba(255, 255, 255, 0.3);
+	background-color: var(--input-bg-multi);
+}
+
+div.input-container[type=radio]:hover
+{
+	background-color: var(--input-bg-multi);
+}
+
+/*	  Select input container    */
+
+div.input-container[type=select]
+{
+	border: 2px solid var(--input-border-select);
+	background-color: var(--input-bg-select);
+	min-height: 1em;
+	width: 7em;
+
+	color: var(--input-color-select);
+
+	cursor: pointer;
+
+	overflow: hidden;
+
+	display: inline-block;
+
+	text-align: left;
+}
+
+div.input-container[type=select]:hover
+{
+	border-color: var(--input-border-select-hover);
+	background-color: var(--input-bg-select-hover);
+
+	color: var(--input-color-select-hover);
+}
+
+div.input-container[type=select]:focus
+{
+	border-color: var(--input-border-select-active);
+	background-color: var(--input-bg-select-active);
+
+	color: var(--input-color-select-active);
+
+	overflow: visible;
+}
+
+div.input-container[type=select]:after
+{
+	font-family: "IcoFont";
+	font-size: medium;
+	content: '\eab2';
+	display: block;
+	height: 100%;
+	width: 100%;
+	color: var(--input-color-select);
+	text-align: right;
+}
+
+div.input-container[type=select]:after:hover
+{
+	color: var(--input-color-select-hover);
+}
+
+div.input-container[type=select]:focus::after
+{
+	content: '\eab9';
+	color: var(--input-color-select-active);
 }
 
 /*    End Input CSS    */
\ No newline at end of file