Add some fixes to forms

ethib137 · Nov 8, 2020 · d12ac3f · d12ac3f
1 parent e4f31a4
commit d12ac3f
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 11 deletions.
diff --git a/dist/73-formed-theme.war b/dist/73-formed-theme.war
diff --git a/src/WEB-INF/frontend-token-definition.json b/src/WEB-INF/frontend-token-definition.json
@@ -375,15 +375,25 @@
 								}
 							],
 							"name": "formInputLabelPosition",
-							"type": "String"
+							"type": "String",
+							"validValues": [
+								{
+									"label": "absolute",
+									"value": "absolute"
+								},
+								{
+									"label": "static",
+									"value": "static"
+								}
+							]
 						},
 						{
 							"defaultValue": "-6px",
-							"label": "form-input-label-top-",
+							"label": "form-input-label-top-offset",
 							"mappings": [
 								{
 									"type": "cssVariable",
-									"value": "form-input-label-top-"
+									"value": "form-input-label-top-offset"
 								}
 							],
 							"name": "formInputLabelTopOffset",
@@ -410,11 +420,11 @@
 						{
 							"defaultValue": "#FFF",
 							"editorType": "ColorPicker",
-							"label": "form-input-group-button-background-",
+							"label": "form-input-group-button-background-color",
 							"mappings": [
 								{
 									"type": "cssVariable",
-									"value": "form-input-group-button-background-"
+									"value": "form-input-group-button-background-color"
 								}
 							],
 							"name": "formInputGroupButtonBackgroundColor",

diff --git a/src/WEB-INF/src/content/Language.properties b/src/WEB-INF/src/content/Language.properties
@@ -143,7 +143,7 @@ form-input-label-height=Form Input Label Height
 form-input-label-margin=Form Input Label Margin
 form-input-label-padding=Form Input Label Padding
 form-input-label-position=Form Input Label Position
-form-input-label-top-offest=Form Input Label Top Offset
+form-input-label-top-offset=Form Input Label Top Offset
 form-input-label-background-gradient-percentage=Form Input Label Background Gradient Percentage
 
 form-input-group-button-background-color=Form Input Group Button Background Color
@@ -180,4 +180,7 @@ form-input=Form Input
 form-input-label=Form Input Label
 form-input-group=Form Input Group
 form-widget-header=Form Widget Header
-form-widget-form-page=Form Widget Form Page
+form-widget-form-page=Form Widget Form Page
+
+absolute=Absolute
+static=Static
diff --git a/src/css/formed/_variables.scss b/src/css/formed/_variables.scss
@@ -40,12 +40,12 @@ $formInputLabelHeight: var(--form-input-label-height, 16px);
 $formInputLabelMargin: var(--form-input-label-margin, 0 0 0 12px);
 $formInputLabelPadding: var(--form-input-label-padding, 0 5px);
 $formInputLabelPosition: var(--form-input-label-position, absolute);
-$formInputLabelTopOffset: var(--form-input-label-top-offest, -6px);
+$formInputLabelTopOffset: var(--form-input-label-top-offset, -6px);
 $formInputLabelBackgroundGradientPercentage: var(--form-input-label-background-gradient-percentage, 37.5%);
 
 // Forms - Input Group
 $formInputGroupButtonBackgroundColor: var(--form-input-group-button-background-color, #FFF);
-$formInputGroupButtonBackgroundColorHover: var(--form-input-group-button-background-color-hover, #f5ebf4);
+$formInputGroupButtonBackgroundColorHover: var(--form-input-group-button-background-color-hover, #9299c1);
 $formInputGroupButtonTextColor: var(--form-input-group-button-text-color, #315498);
 $formInputGroupButtonTextColorHover: var(--form-input-group-button-text-color-hover, #414689);
 
@@ -72,5 +72,5 @@ $formPageNameMargin: var(--form-page-name-margin, 0 12px 10px);
 $formPageNameFontSize: var(--form-page-name-font-size, 28px);
 $formPageNameTextColor: var(--form-page-name-text-color, var(--body-color));
 $formPageDescriptionMargin: var(--form-page-description-margin, 10px 12px 24px);
-$formPageDescriptionFontSize: var(--form-page-description-margin, 14px);
-$formPageDescriptionTextColor: var(--form-age-description-text-color, var(--font-size-base));
+$formPageDescriptionFontSize: var(--form-page-description-font-size, 14px);
+$formPageDescriptionTextColor: var(--form-page-description-text-color, var(--body-color));
diff --git a/src/css/formed/forms.scss b/src/css/formed/forms.scss
@@ -31,6 +31,7 @@
 	.form-control, .cke, .table {
 		border-radius: $formInputBorderRadius;
 		border: solid $formInputBorderWidth $formInputBorderColor;
+		overflow: hidden;
 	}
 
 	.separator {
@@ -46,6 +47,11 @@
 		background-color: transparent;
 	}
 
+	.cke_contents {
+		border-bottom-left-radius: $formInputBorderRadius;
+		border-bottom-right-radius: $formInputBorderRadius;
+	}
+
 	.form-control {
 		background-color: $formInputBackgroundColor;
 		font-size: 16px;
@@ -86,6 +92,31 @@
 					border-left-width: 0;
 				}
 			}
+
+			.input-group-inset-item-after {
+				border-top-right-radius: $formInputBorderRadius;
+				border-bottom-right-radius: $formInputBorderRadius;
+			}
+
+			&.input-group-append:not(:first-child) {
+				& > .btn,
+				& > .form-control,
+				& > .form-file .btn,
+				& > .input-group-text {
+					border-top-right-radius: $formInputBorderRadius;
+					border-bottom-right-radius: $formInputBorderRadius;
+				}
+			}
+
+			&.input-group-prepend:not(:last-child) {
+				& > .btn,
+				& > .form-control,
+				& > .form-file .btn,
+				& > .input-group-text {
+					border-top-left-radius: $formInputBorderRadius;
+					border-bottom-left-radius: $formInputBorderRadius;
+				}
+			}
 		}
 
 		&.clay-color .input-group-inset-item {