refactor(ui5-input): move styles to base theme (#170)

Author: MapTo0

packages/main/src/themes/base/Input.less

@@ -10,6 +10,18 @@
 /* Base theme                       */
 /* ================================ */
 
+@_ui5_input_height: 2.5rem;
+@_ui5_input_compact_height: 1.625rem;
+@_ui5_input_wrapper_border_radius: 0;
+@_ui5_input_state_border_width: 0.125rem;
+@_ui5_input_error_font_weight: normal;
+@_ui5_input_focus_border_width: 1px;
+@_ui5_input_error_warning_border_style: solid;
+@_ui5_input_error_warning_font_style: normal;
+@_ui5_input_disabled_color: @sapUiContentDisabledTextColor;
+@_ui5_input_disabled_font_weight: normal;
+@_ui5_input_disabled_border_color: @sapUiFieldBorderColor;
+@_ui5_input_disabled_background: @sapUiFieldBackground;
 @sap_wc_input_disabled_opacity: 1;
 @sap_wc_input_icon_min_width: 2.375rem;
 
@@ -24,7 +36,7 @@ ui5-input {
 }
 
 .sapWCInputBase {
-	height: 2.5rem;
+	height: @_ui5_input_height;
 	background: transparent;
 	position: relative;
 	display: inline-block;
@@ -36,12 +48,12 @@ ui5-input {
 	&.sapWCFocus .sapWCInputBaseContentWrapper::after {
 		content: "";
 		position: absolute;
-		width: calc(~"100% - 0.25rem");
-		height: calc(~"100% - 0.25rem");
-		border: 1px dotted @sapUiContentFocusColor;
+		border: @_ui5_input_focus_border_width dotted @sapUiContentFocusColor;
 		pointer-events: none;
 		top: 1px;
 		left: 1px;
+		right: 1px;
+		bottom: 1px;
 	}
 
 	&.sapWCInputBaseDisabled {
@@ -94,7 +106,7 @@ ui5-input {
 	outline: none;
 	background-color: @sapUiFieldBackground;
 	border: 1px solid @sapUiFieldBorderColor;
-	border-radius: 0;
+	border-radius: @_ui5_input_wrapper_border_radius;
 
 	&.sapWCInputBaseDisabledWrapper {
 		pointer-events: none;
@@ -111,19 +123,47 @@ ui5-input {
 	}
 }
 
+.sapWCInputBaseDisabledWrapper {
+	background: @sapUiFieldReadOnlyBackground;
+	border-color: @sapUiFieldReadOnlyBorderColor;
+	-webkit-text-fill-color: @sapUiContentDisabledTextColor;
+	
+	& .sapWCInputBaseInner {
+		color: @sapUiContentDisabledTextColor;
+	}
+}
+
+.sapWCInputBaseContentWrapperState {
+	border-width: @_ui5_input_state_border_width;
+}
+
+.sapWCInputBaseContentWrapperError .sapWCInputBaseInner,
+.sapWCInputBaseContentWrapperWarning .sapWCInputBaseInner {
+	font-style: @_ui5_input_error_warning_font_style;
+}
+
+.sapWCInputBaseContentWrapperError .sapWCInputBaseInner {
+	font-weight: @_ui5_input_error_font_weight;
+}
+
 .sapWCInputBaseContentWrapperError:not(.sapWCInputBaseReadonlyWrapper) {
 	background-color: @sapUiFieldInvalidBackground;
-	border: 0.125rem solid @sapUiFieldInvalidColor;
+	border-color: @sapUiFieldInvalidColor;
+}
+
+.sapWCInputBaseContentWrapperError:not(.sapWCInputBaseReadonlyWrapper):not(.sapWCInputBaseDisabledWrapper),
+.sapWCInputBaseContentWrapperWarning:not(.sapWCInputBaseReadonlyWrapper):not(.sapWCInputBaseDisabledWrapper) {
+	border-style: @_ui5_input_error_warning_border_style;
 }
 
 .sapWCInputBaseContentWrapperWarning:not(.sapWCInputBaseReadonlyWrapper) {
 	background-color: @sapUiFieldWarningBackground;
-	border: 0.125rem solid @sapUiFieldWarningColor;
+	border-color: @sapUiFieldWarningColor;
 }
 
 .sapWCInputBaseContentWrapperSuccess:not(.sapWCInputBaseReadonlyWrapper) {
 	background-color: @sapUiFieldSuccessBackground;
-	border: 0.125rem solid @sapUiFieldSuccessColor;
+	border-color: @sapUiFieldSuccessColor;
 }
 
 /* Remove IE's defaut clear button */
@@ -134,7 +174,7 @@ ui5-input {
 
 .sapUiSizeCompact {
 	& .sapWCInputBase {
-		height: 1.625rem;
+		height: @_ui5_input_compact_height;
 	}
 
 	& .sapWCInputBaseInner {

packages/main/src/themes/sap_belize_hcb/Input.less

@@ -10,51 +10,12 @@
 @import "./base.less";
 @import "./global.less";
 
-.sapWCInputBase {
-	&.sapWCFocus .sapWCInputBaseContentWrapper::after {
-		width: calc(~"100% - 0.375rem");
-		height: calc(~"100% - 0.375rem");
-		border: 0.125rem dotted @sapUiContentFocusColor;
-	}
-}
-
-.sapWCInputBaseContentWrapper {
-
-	& .sapWCInputBaseInner {
-		color: @sapUiFieldTextColor;
-	}
-
-	&.sapWCInputBaseContentWrapperError:not(.sapWCInputBaseReadonlyWrapper):not(.sapWCInputBaseDisabledWrapper),
-	&.sapWCInputBaseContentWrapperWarning:not(.sapWCInputBaseReadonlyWrapper):not(.sapWCInputBaseDisabledWrapper) {
-		border-style: dashed;
-		border-width: 1px;
-	}
-
-	&.sapWCInputBaseContentWrapperSuccess,
-	&.sapWCInputBaseContentWrapperError,
-	&.sapWCInputBaseContentWrapperWarning {
-		border-width: 1px;
-	}
-
-	&.sapWCInputBaseContentWrapperError .sapWCInputBaseInner {	
-		font-weight: bold;	
-	}	
-
-	&.sapWCInputBaseContentWrapperError,	
-	&.sapWCInputBaseContentWrapperWarning {	
-		& .sapWCInputBaseInner {	
-			font-style: italic;	
-		}	
-	}
-
-	&.sapWCInputBaseDisabledWrapper {
-		background: @sapUiFieldReadOnlyBackground;
-		border-color: @sapUiFieldReadOnlyBorderColor;
-		font-weight: normal;
-		-webkit-text-fill-color: @sapUiContentDisabledTextColor;
-		
-		& .sapWCInputBaseInner {
-			color: @sapUiContentDisabledTextColor;
-		}
-	}
-}
+@_ui5_input_focus_border_width: 0.125rem;
+@_ui5_input_state_border_width: 1px;
+@_ui5_input_error_warning_border_style: dashed;
+@_ui5_input_error_warning_font_style: italic;
+@_ui5_input_error_font_weight: bold;
+@_ui5_input_disabled_color: @sapUiContentDisabledTextColor;
+@_ui5_input_disabled_font_weight: normal;
+@_ui5_input_disabled_border_color: @sapUiFieldReadOnlyBorderColor;
+@_ui5_input_disabled_background: @sapUiFieldReadOnlyBackground;

packages/main/src/themes/sap_fiori_3/Input.less

@@ -14,23 +14,6 @@
 /* Belize theme                     */
 /* ================================ */
 
+@_ui5_input_height: 2.25rem;
 @sap_wc_input_disabled_opacity: 0.4;
-
-.sapWCInputBase {
-	height: 2.25rem;
-}
-
-.sapWCInputBaseContentWrapper {
-	border-radius: 0.125rem;
-
-	&.sapWCInputBaseContentWrapperState {
-		border-width: 0.125rem;
-	}
-
-}
-
-.sapUiSizeCompact {
-	& .sapWCInputBase {
-		height: 1.625rem;
-	}
-}
+@_ui5_input_wrapper_border_radius: 0.125rem;