style: new vars, change font-size, border-color, background, disabled…

…, active
Jenesius · Apr 1, 2023 · 650c21f · 650c21f
1 parent 0681f00
commit 650c21f
Show file tree

Hide file tree

Showing 13 changed files with 118 additions and 152 deletions.
diff --git a/plugin/styles/main.css b/plugin/styles/main.css
@@ -1,6 +1,13 @@
-* {
-    --input-error:          #fa5c5c;
-    --input-gray-light:     #c8c8c8;
-    --input-gray-dark:      #b2b2b2;
-    --input-disabled:       #e9e9e9;
+:root {
+    --vf-input-error:          #fa5c5c;
+    --vf-input-gray-light:     #c8c8c8;
+    --vf-input-gray-dark:      #b2b2b2;
+    --vf-input-background-disabled:       #e9e9e9;
+    --vf-input-border-color: var(--vf-input-gray-light);
+    --vf-input-border-color-focus: var(--vf-input-gray-dark);
+    --vf-input-color: #1c1c1c;
+    --vf-input-font-size: 13.333px;
+    --vf-input-border-radius: 4px;
+    --vf-input-active: #4e74ff;
+    --vf-input-active-disabled: #bac7f8;
 }
diff --git a/plugin/widgets/inputs/input-checkbox/widget-input-checkbox.vue b/plugin/widgets/inputs/input-checkbox/widget-input-checkbox.vue
@@ -69,21 +69,21 @@
         width: 18px;
         height: 18px;
         margin: 0;
-        border: 1px solid #c8c8c8;
+        border: 1px solid var(--vf-input-border-color);
         background-color: white;
         border-radius: 3px;
         display: grid;
         place-content: center;
     }
     .input-checkbox_active{
-        background-color: #4e74ff;
+        background-color: var(--vf-input-active);
     }
 
     .input-checkbox_disabled{
-        background-color: #e9e9e9;
+        background-color: var(--vf-input-background-disabled);
     }
     .input-checkbox_disabled.input-checkbox_active{
-        background-color: #bac7f8;
+        background-color: var(--vf-input-active-disabled);
     }
 
     .input-checkbox{

diff --git a/plugin/widgets/inputs/input-number/widget-input-number.vue b/plugin/widgets/inputs/input-number/widget-input-number.vue
@@ -69,18 +69,18 @@ function onStep(v: boolean) {
 	.input-number{
 		display: grid;
 		grid-template-columns: 30px 1fr;
-		border: 1px solid #c8c8c8;
+		border: 1px solid var(--vf-input-border-color);
 		height: 35px;
-		border-radius: 4px;
+		border-radius: var(--vf-input-border-radius);
 		background-color: white;
 	}
 
 	.input-number_disabled{
-		background-color: #e9e9e9;
+		background-color: var(--vf-input-background-disabled);
 		position: relative;
 	}
 	.input-number_error{
-		border: 1px solid #fa5c5c;
+		border: 1px solid var(--vf-input-error)
 	}
 
 	.input-number:focus-within {

diff --git a/plugin/widgets/inputs/input-number/widget-number-step.vue b/plugin/widgets/inputs/input-number/widget-number-step.vue
@@ -40,6 +40,6 @@
 		padding: 0 0 8px 0;
 	}
 	.step-container:active>.arrow{
-		border-color: #4e74ff;
+		border-color: var(--vf-input-active);
 	}
 </style>
diff --git a/plugin/widgets/inputs/input-password/widget-input-password.vue b/plugin/widgets/inputs/input-password/widget-input-password.vue
@@ -64,16 +64,16 @@
         align-items: center;
 
         height: 35px;
-        border-radius: 4px;
-        border: 1px solid #c8c8c8;
+        border-radius: var(--vf-input-font-size);
+        border: 1px solid var(--vf-input-border-color);
 		background-color: white;
     }
     .input-password-container:focus-within{
-        border-color: #b2b2b2;
+        border-color: var(--vf-input-border-color-focus);
     }
 
     .input-password-container_disabled{
-        background-color: #e9e9e9;
+        background-color: var(--vf-input-background-disabled)
     }
     .input-password{
         outline: none;
@@ -83,6 +83,7 @@
         flex-grow: 1;
 		width: 100%;
         padding: 0 4px;
+		font-size: var(--vf-input-font-size);
     }
 
     .input-password__toggle{
@@ -123,6 +124,6 @@
         top: 48%;
     }
 	.input-password_error{
-		border: 1px solid red;
+		border: 1px solid var(--vf-input-error)
 	}
 </style>
diff --git a/plugin/widgets/inputs/input-radio/element-input-radio.vue b/plugin/widgets/inputs/input-radio/element-input-radio.vue
@@ -39,7 +39,7 @@ const props = defineProps<IProps>()
 		height: 20px;
 		aspect-ratio: 1/1;
 		border-radius: 50%;
-		border: 1px solid #c8c8c8;
+		border: 1px solid var(--vf-input-border-color);
 		background-color: white;
 
 		display: grid;
@@ -50,7 +50,7 @@ const props = defineProps<IProps>()
 		aspect-ratio: 1/1;
 
 		border-radius: 50%;
-		background-color: #4e74ff;
+		background-color: var(--vf-input-active);
 		border: 1px solid #f0f0f0;
 	}
 	.element-input-radio-label{
@@ -61,13 +61,13 @@ const props = defineProps<IProps>()
 		cursor: default;
 	}
 	.element-input-radio_disabled .element-input-radio-button{
-		background-color: #e9e9e9;
+		background-color: var(--vf-input-background-disabled);
 	}
 	.element-input-radio_disabled .element-input-radio-button_active{
-		background-color: #bac7f8
+		background-color: var(--vf-input-active-disabled);
 	}
 	.element-input-radio_error .element-input-radio-button{
-		border: 1px solid red;
+		border: 1px solid var(--vf-input-error);
 	}
 	.fade-enter-active,
 	.fade-leave-active {

diff --git a/plugin/widgets/inputs/input-radio/widget-input-radio.vue b/plugin/widgets/inputs/input-radio/widget-input-radio.vue
@@ -72,9 +72,4 @@
     .input-radio-container:focus{
       outline: none;
     }
-    .input-radio-container:focus .input-radio-button{
-      border-color: #b2b2b2;
-    }
-
-
 </style>
diff --git a/plugin/widgets/inputs/input-single-checkbox/widget-input-single-checkbox.vue b/plugin/widgets/inputs/input-single-checkbox/widget-input-single-checkbox.vue
@@ -48,7 +48,7 @@
         width: 18px;
         height: 18px;
         margin: 0;
-        border: 1px solid #c8c8c8;
+        border: 1px solid var(--vf-input-border-color);
         background-color: white;
         border-radius: 3px;
         display: grid;
@@ -57,17 +57,17 @@
 		cursor: pointer;
     }
 	.input-checkbox:focus {
-		border-color: #b2b2b2;
+		border-color: var(--vf-input-border-color-focus);
 		outline: none;
 	}
     .input-checkbox_active {
-		background-color: #4e74ff;
+		background-color: var(--vf-input-active)
 	}
     .input-checkbox_disabled{
-        background-color: #e9e9e9;
+        background-color: var(--vf-input-background-disabled)
     }
     .input-checkbox_disabled.input-checkbox_active{
-        background-color: #bac7f8;
+        background-color: var(--vf-input-active-disabled);
     }
 
     .input-checkbox_disabled{

diff --git a/plugin/widgets/inputs/input-single-radio/widget-input-single-radio.vue b/plugin/widgets/inputs/input-single-radio/widget-input-single-radio.vue
@@ -27,47 +27,5 @@
 </script>
 
 <style scoped>
-	.container-input-single-checkbox {
-		display: flex;
-		gap: 10px;
-		align-items: center;
-	}
-    .input-checkbox{
-        width: 18px;
-        height: 18px;
-        margin: 0;
-        border: 1px solid #c8c8c8;
-        background-color: white;
-        border-radius: 3px;
-        display: grid;
-        place-content: center;
 
-		cursor: pointer;
-    }
-    .input-checkbox_active {
-		background-color: #4e74ff;
-	}
-    .input-checkbox_disabled{
-        background-color: #e9e9e9;
-    }
-    .input-checkbox_disabled.input-checkbox_active{
-        background-color: #bac7f8;
-    }
-
-    .input-checkbox_disabled{
-        cursor: default;
-    }
-
-    i.check {
-        display: none;
-        width: 4px;
-        height: 7px;
-        border: solid white;
-        border-width: 0 2px 2px 0;
-        transform: rotate( 45deg);
-        margin: 1px 1px 4px 1px;
-    }
-    .input-checkbox_active>i{
-        display: inline-block;
-    }
 </style>
diff --git a/plugin/widgets/inputs/input-switch/widget-input-switch.vue b/plugin/widgets/inputs/input-switch/widget-input-switch.vue
@@ -49,7 +49,7 @@
     .input-switch {
         width: 38px;
         border-radius: 11px;
-        border: 1px solid #c8c8c8;
+        border: 1px solid var(--vf-input-border-color);
         height: 21px;
         outline: none;
         box-sizing: border-box;
@@ -61,24 +61,24 @@
     .input-switch-button{
         height: 15px;
         width: 15px;
-        background-color: #c8c8c8;
+        background-color: var(--vf-input-gray-light);
         border-radius: 50%;
         transform: translateX(3px);
         transition: transform 0.1s, color 0.1s;
     }
     .input-switch-button_active{
-        background-color: #4e74ff;
+        background-color: var(--vf-input-active);
         transform: translateX(18px);
     }
     .input-switch-title{
         margin: 0;
         color: #333;
     }
     .input-switch_disabled{
-        background-color: #e9e9e9;
+        background-color: var(--vf-input-background-disabled);
         cursor: default;
     }
     .input-switch_disabled .input-switch-button_active{
-        background-color: #bac7f8;
+        background-color: var(--vf-input-active-disabled)
     }
 </style>
diff --git a/plugin/widgets/inputs/input-tel/widget-input-tel.vue b/plugin/widgets/inputs/input-tel/widget-input-tel.vue
@@ -78,23 +78,24 @@ function onInput(e: any) {
         height: 35px;
         max-height: 35px;
 
-	    border-radius: 4px;
-	    border: 1px solid #c8c8c8;
+	    border-radius: var(--vf-input-border-radius);
+	    border: 1px solid var(--vf-input-border-color);
         background-color: white;
     }
     .input-tel_disabled{
-	    background-color: #e9e9e9;
+	    background-color: var(--vf-input-background-disabled);
     }
     .input-tel{
         border: 0;
         outline: none;
         background-color: transparent;
 
-	    color: #1c1c1c;
+	    color: var(--vf-input-color);
         flex-grow: 1;
 		width: 100%;
+		font-size: var(--vf-input-font-size);
     }
 	.input-tel_error{
-		border: 1px solid red;
+		border: 1px solid var(--vf-input-error);
 	}
 </style>
diff --git a/plugin/widgets/inputs/input-text/widget-input-text.vue b/plugin/widgets/inputs/input-text/widget-input-text.vue
@@ -74,23 +74,23 @@ watch(() => props.maxLength, () => onInput(props.modelValue));
 .container-widget-input-text {
 	display: flex;
 	height: 35px;
-	border-radius: 4px;
-	border: 1px solid var(--input-gray-light);
+	border-radius: var(--vf-input-border-radius);
+	border: 1px solid var(--vf-input-border-color);
 	background-color: white;
 }
 .container-widget-input-text:focus-within {
-	border-color: var(--input-gray-dark);
+	border-color: var(--vf-input-gray-dark);
 }
 .container-widget-input-text_disabled {
-	background-color: var(--input-disabled);
+	background-color: var(--vf-input-background-disabled);
 }
 .container-widget-input-text_error {
-	border: 1px solid var(--input-error);
+	border: 1px solid var(--vf-input-error);
 }
 .widget-input-text-prefix {
 	color: #646363;
 	line-height: 35px;
-	font-size: 14px;
+	font-size: var(--vf-input-font-size);
 	padding: 0 0 0 4px;
 }
 .widget-input-text {
@@ -99,5 +99,7 @@ watch(() => props.maxLength, () => onInput(props.modelValue));
 	background-color: transparent;
 	border:0;
 	padding: 0 4px;
+	color: var(--vf-input-color);
+	font-size: var(--vf-input-font-size);
 }
 </style>