refactor(ui5-select): move styles to base theme (#169)

Author: MapTo0

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

@@ -1,3 +1,15 @@
+@import "./base.less";
+@import "./global.less";
+
+@_ui5_select_disabled_background: @sapUiFieldBackground;
+@_ui5_select_disabled_border_color: @sapUiFieldBorderColor;
+@_ui5_select_state_error_warning_border_style: solid;
+@_ui5_select_state_error_warning_border_width: 0.125rem;
+@_ui5_select_hover_icon_left_border: none;
+@_ui5_select_rtl_hover_icon_left_border: none;
+@_ui5_select_rtl_hover_icon_right_border: none;
+@_ui5_select_focus_width: 1px;
+
 :host(ui5-select) {
 	display: inline-block;
 	width: 100%;
@@ -41,9 +53,7 @@ ui5-select {
 		&:before {
 			content: "";
 			position: absolute;
-			width: calc(~"100% - 0.25rem");
-			height: calc(~"100% - 0.25rem");
-			border: 1px dotted @sapUiContentFocusColor;
+			border: @_ui5_select_focus_width dotted @sapUiContentFocusColor;
 			top: 1px;
 			right: 1px;
 			bottom: 1px;
@@ -60,6 +70,8 @@ ui5-select {
 
 	// Disabled
 	&.sapWCSelectDisabled {
+		background: @_ui5_select_disabled_background;
+		border-color: @_ui5_select_disabled_border_color;
 		cursor: default;
 		opacity: 0.5;
 	}
@@ -83,20 +95,29 @@ ui5-select {
 	}
 }
 
+.sapWCSelect:hover:not(.sapWCSelectDisabled) .sapWCSelectDropDownIcon {
+	border-left: @_ui5_select_hover_icon_left_border;
+}
+
 // States
+.sapWCSelectState {
+	border-style: solid;
+	border-width: 0.125rem;
+}
+
 .sapWCSelectError {
+	border: @_ui5_select_state_error_warning_border_width @_ui5_select_state_error_warning_border_style @sapUiFieldInvalidColor;
 	background-color: @sapUiFieldInvalidBackground;
-	border: 0.125rem solid @sapUiFieldInvalidColor;
 }
 
 .sapWCSelectWarning {
+	border: @_ui5_select_state_error_warning_border_width @_ui5_select_state_error_warning_border_style @sapUiFieldInvalidColor;
 	background-color: @sapUiFieldWarningBackground;
-	border: 0.125rem solid @sapUiFieldWarningColor;
 }
 
 .sapWCSelectSuccess {
 	background-color: @sapUiFieldSuccessBackground;
-	border: 0.125rem solid @sapUiFieldSuccessColor;
+	border-color: @sapUiFieldSuccessColor;
 }
 
 // Compact
@@ -114,11 +135,25 @@ ui5-select {
 		padding-left: 0;
 		padding-right: 0.5rem;
 	}
+
+	.sapWCSelect:hover:not(.sapWCSelectDisabled) {
+		.sapWCSelectDropDownIcon {
+			border-left: @_ui5_select_rtl_hover_icon_left_border;
+			border-right: @_ui5_select_rtl_hover_icon_right_border;
+		}
+	}
 }
 
 ui5-select span[dir="rtl"] {
 	.sapWCSelect {
 		padding-left: 0;
 		padding-right: 0.5rem;
 	}
+
+	.sapWCSelect:hover:not(.sapWCSelectDisabled) {
+		.sapWCSelectDropDownIcon {
+			border-left: @_ui5_select_rtl_hover_icon_left_border;
+			border-right: @_ui5_select_rtl_hover_icon_right_border;
+		}
+	}
 }

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

@@ -9,62 +9,11 @@
 @import "./base.less";
 @import "./global.less";
 
-.sapWCSelect {
-	&:not(.sapWCSelectOpened):not(.sapWCSelectDisabled):focus {
-
-		&:before {
-			content: "";
-			position: absolute;
-			width: calc(~"100% - 0.375rem");
-			height: calc(~"100% - 0.375rem");
-			border: 0.125rem dotted @sapUiContentFocusColor;
-			top: 1px;
-			right: 1px;
-			bottom: 1px;
-			left: 1px;
-			pointer-events: none;
-		}
-	}
-
-	&.sapWCSelectDisabled {
-		background: @sapUiHcReducedBackground;
-		border-color: @sapUiHcReducedForeground;
-		color: @sapUiContentDisabledTextColor;
-	}
-
-	&.sapWCSelectError:not(.sapWCSelectDisabled),
-	&.sapWCSelectWarning:not(.sapWCSelectDisabled) {
-		border-style: dashed;
-		border-width: 1px;
-	}
-
-	&.sapWCInputBaseContentWrapperWarning:not(.sapWCInputBaseReadonlyWrapper):not(.sapWCInputBaseDisabledWrapper) {
-		border-style: dashed;
-		border-width: 1px;
-	}
-
-	&:hover:not(.sapWCSelectDisabled) {
-		.sapWCSelectDropDownIcon {
-			border-left: 0.0625rem solid @sapUiFieldHoverBorderColor;
-		}
-	}
-}
-
-// RTL
-:host(ui5-select) span[dir="rtl"] {
-	.sapWCSelect:hover:not(.sapWCSelectDisabled) {
-		.sapWCSelectDropDownIcon {
-			border-left: none;
-			border-right: 0.0625rem solid @sapUiFieldHoverBorderColor;
-		}
-	}
-}
-
-ui5-select span[dir="rtl"] {
-	.sapWCSelect:hover:not(.sapWCSelectDisabled) {
-		.sapWCSelectDropDownIcon {
-			border-left: none;
-			border-right: 0.0625rem solid @sapUiFieldHoverBorderColor;
-		}
-	}
-}
+@_ui5_select_disabled_background: @sapUiHcReducedBackground;
+@_ui5_select_disabled_border_color: @sapUiHcReducedForeground;
+@_ui5_select_state_error_warning_border_style: dashed;
+@_ui5_select_state_error_warning_border_width: 1px;
+@_ui5_select_hover_icon_left_border:  0.0625rem solid @sapUiFieldHoverBorderColor;
+@_ui5_select_rtl_hover_icon_left_border: none;
+@_ui5_select_rtl_hover_icon_right_border:  0.0625rem solid @sapUiFieldHoverBorderColor;;
+@_ui5_select_focus_width: 0.125rem;