@sapui5/sap.suite.ui.microchart 1.143.1 → 1.145.0

package/src/sap/suite/ui/microchart/themes/base/ColumnMicroChart.less

@@ -1,7 +1,7 @@
-/* ======================================================== */
-/* CSS for control sap.suite.ui.microchart/ColumnMicroChart */
-/* Base Theme                                               */
-/* ======================================================== */
+/* ========================================================= */
+/* CSS for control sap.suite.ui.microchart/ColumnMicroChart  */
+/* Base theme                                                */
+/* ========================================================= */
 
 .sapSuiteClMC {
 	outline: none;
@@ -49,7 +49,7 @@
 	margin-left: 4px;
 }
 
-// sizes
+/* sizes */
 .sapSuiteClMC.sapSuiteClMCSizeResponsive {
 	height: 100%;
 	width: 100%;
@@ -76,30 +76,33 @@ html.sapUiMedia-Std-Phone .sapSuiteClMC.sapSuiteClMCSizeAuto,
 .sapSuiteClMC.sapSuiteClMCSizeXS {
 	height: 1.5rem;
 	width: 6rem;
+
 	.sapSuiteClMCVerticalAlignmentContainer {
 		height: 1.125rem;
 	}
 }
 
-// different possible looks that are changed base on the current height of the container
+/* different possible looks that are changed base on the current height of the container */
 .sapSuiteClMC.sapSuiteClMCLookM {
+
 	.sapSuiteClMCEdgeLabel {
-		font-size: @sapMFontSmallSize;
+		font-size: var(--sapFontSmallSize);
 	}
 }
 
 .sapSuiteClMC.sapSuiteClMCLookS {
+
 	.sapSuiteClMCEdgeLabel {
-		font-size: @sapMFontSmallSize;
+		font-size: var(--sapFontSmallSize);
 	}
 
 	.sapSuiteClMCBar:not(:first-child) {
 		margin-left: 3px;
 	}
-
 }
 
 .sapSuiteClMC.sapSuiteClMCLookXS {
+
 	.sapSuiteClMCColumnLabelDivider,
 	.sapSuiteClMCLabelColumn,
 	.sapSuiteClMCLabels {
@@ -112,6 +115,7 @@ html.sapUiMedia-Std-Phone .sapSuiteClMC.sapSuiteClMCSizeAuto,
 }
 
 .sapSuiteClMC.sapSuiteClMCNoLabels {
+
 	.sapSuiteClMCColumnLabelDivider,
 	.sapSuiteClMCLabelColumn,
 	.sapSuiteClMCLabels{
@@ -120,6 +124,7 @@ html.sapUiMedia-Std-Phone .sapSuiteClMC.sapSuiteClMCSizeAuto,
 }
 
 .sapSuiteClMC.sapSuiteClMCNoColumnLabels {
+
 	.sapSuiteClMCColumnLabelDivider,
 	.sapSuiteClMCLabelColumn,
 	.sapSuiteClMCBottomColumnLabels {
@@ -129,18 +134,20 @@ html.sapUiMedia-Std-Phone .sapSuiteClMC.sapSuiteClMCSizeAuto,
 
 .sapSuiteClMC.sapSuiteClMCColumnLabels:not(.sapSuiteClMCNoColumnLabels),
 .sapSuiteClMC.sapSuiteClMCNoTopLabels {
+
 	.sapSuiteClMCPositionTop {
 		display: none;
 	}
 }
 
 .sapSuiteClMC.sapSuiteClMCColumnLabels:not(.sapSuiteClMCNoColumnLabels):not(.sapSuiteClMCNoBottomColumnLabels) {
+
 	.sapSuiteClMCPositionBtm{
 		display: none;
 	}
 }
 
-// focus
+/* focus */
 html.sap-desktop .sapSuiteClMC:focus:not([tabindex]),
 .sapSuiteClMC:focus:not([tabindex]) {
 	outline: none;
@@ -148,19 +155,20 @@ html.sap-desktop .sapSuiteClMC:focus:not([tabindex]),
 
 html.sap-desktop .sapSuiteClMCBar[tabindex]:focus,
 .sapSuiteClMCBar[tabindex]:focus {
-  	outline: none;
-  	& .sapSuiteClMCInnerBar {
-		outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
+	outline: none;
+
+	& .sapSuiteClMCInnerBar {
+		outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	}
 }
 
 html.sap-desktop .sapSuiteClMC:focus,
 .sapSuiteClMC:focus {
-	outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
-    outline-offset: 1px;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	outline-offset: 1px;
 }
 
-// labels
+/* labels */
 .sapSuiteClMCLabels {
 	display: flex;
 	flex: 0 0 auto;
@@ -181,13 +189,13 @@ html.sap-desktop .sapSuiteClMC:focus,
 	min-height: 1px;
 	flex: 1 0 50%;
 	font-size: @sapMFontMediumSize;
-	color: @sapChart_Data_TextColor;
+	color: var(--sapChart_Data_TextColor);
 }
 
 .sapSuiteClMCLabelColumn {
 	width: 100%;
 	text-align: center;
-	font-size: @sapMFontSmallSize;
+	font-size: var(--sapFontSmallSize);
 }
 
 .sapSuiteClMCLabelColumn.sapSuiteClMCLabelColumnTop {
@@ -209,6 +217,7 @@ html.sap-desktop .sapSuiteClMC:focus,
 }
 
 html[dir=rtl] {
+
 	.sapSuiteClMCLabel.sapSuiteClMCPositionLeft {
 		text-align: right;
 	}
@@ -223,14 +232,13 @@ html[dir=rtl] {
 }
 
 .sapSuiteClMCColumnLabelDivider {
-	flex: 0 0 @sapMFontSmallSize;
+	flex: 0 0 var(--sapFontSmallSize);
 }
 
-
-// colors
-html.sap-desktop .sapSuiteClMCBar.sapSuiteUiMicroChartPointer .sapSuiteClMCInnerBar:hover{
-	border: 1px solid @sapUiContentFocusColor;
-	outline: 1px solid @sapUiContentFocusColor;
+/* colors */
+html.sap-desktop .sapSuiteClMCBar.sapSuiteUiMicroChartPointer .sapSuiteClMCInnerBar:hover {
+	border: 1px solid var(--sapContent_FocusColor);
+	outline: 1px solid var(--sapContent_FocusColor);
 }
 
 .sapSuiteClMCInnerBar {
@@ -238,25 +246,25 @@ html.sap-desktop .sapSuiteClMCBar.sapSuiteUiMicroChartPointer .sapSuiteClMCInner
 }
 
 .sapSuiteClMCInnerBar.sapSuiteClMCSemanticColorNeutral {
-	background-color: @sapChart_Sequence_Neutral;
+	background-color: var(--sapChart_Sequence_Neutral);
 }
 
 .sapSuiteClMCLabel.sapSuiteClMCSemanticColorNeutral {
-	color: @sapNeutralTextColor;
+	color: var(--sapNeutralTextColor);
 }
 
 .sapSuiteClMCLabel.sapSuiteClMCSemanticColorGood {
-	color: @sapPositiveTextColor;
+	color: var(--sapPositiveTextColor);
 }
 
 .sapSuiteClMCLabel.sapSuiteClMCSemanticColorCritical {
-	color: @sapCriticalTextColor;
+	color: var(--sapCriticalTextColor);
 }
 
 .sapSuiteClMCLabel.sapSuiteClMCSemanticColorError {
-	color: @sapNegativeTextColor;
+	color: var(--sapNegativeTextColor);
 }
 
 .sapSuiteClMCLabelColumn.sapSuiteClMCBottomColumnLabel {
-	color: @sapChart_Data_TextColor;
+	color: var(--sapChart_Data_TextColor);
 }