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

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

@@ -1,325 +1,335 @@
-/* ============================================================ */
-/* CSS for control sap.suite.ui.microchart/ComparisonMicroChart */
-/* Base Theme                                                   */
-/* ============================================================ */
+/* ============================================================= */
+/* CSS for control sap.suite.ui.microchart/ComparisonMicroChart  */
+/* Base theme                                                    */
+/* ============================================================= */
+
 .sapSuiteCpMCChartContent {
-  position: relative;
-  outline: none;
-  font-family: @sapUiFontFamily;
-  display: flex;
-  align-items: center;
+	position: relative;
+	outline: none;
+	font-family: var(--sapFontFamily);
+	display: flex;
+	align-items: center;
 }
 
 html.sapUiMedia-Std-Desktop .sapMTileCntContent > .sapSuiteCpMCChartContent.sapSuiteCpMCSizeAuto,
 html.sapUiMedia-Std-Tablet .sapMTileCntContent > .sapSuiteCpMCChartContent.sapSuiteCpMCSizeAuto,
 .sapMTileCntContent > .sapSuiteCpMCChartContent.sapSuiteCpMCSizeM  {
-  height: 100%;
-  width: 100%
+	height: 100%;
+	width: 100%
 }
 
 .sapSuiteCpMC {
-  .sapMBtn {
-    position: absolute;
-    top: -15px;
-    right: -38px;
-  }
+
+	.sapMBtn {
+		position: absolute;
+		top: -15px;
+		right: -38px;
+	}
 }
 
 html.sap-desktop .sapSuiteCpMCChartContent[tabindex]:focus {
-  outline: @sapUiContentFocusWidth @sapUiContentFocusStyle @sapUiContentFocusColor;
-  outline-offset: 1px;
+	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	outline-offset: 1px;
 }
 
 html.sap-desktop .sapSuiteCpMCChartContent:focus:not([tabindex]),
 .sapSuiteCpMCChartContent:focus:not([tabindex]) {
-  outline: none;
+	outline: none;
 }
 
 html.sap-desktop .sapSuiteCpMCChartBar.sapSuiteUiMicroChartPointer:hover {
-  border: 1px solid @sapUiContentFocusColor;
-  outline: 1px solid @sapUiContentFocusColor;
+	border: 1px solid var(--sapContent_FocusColor);
+	outline: 1px solid var(--sapContent_FocusColor);
 }
 
 html.sap-desktop .sapSuiteUiMicroChartBarPointer:focus {
-  outline: 2px solid @sapField_Focus_BorderColor !important;
+	outline: 2px solid var(--sapField_Focus_BorderColor) !important;
 }
 
 html.sap-desktop .sapSuiteUiMicroChartBarPointer:hover {
-  outline: 1px solid @sapButton_Hover_BorderColor;
+	outline: 1px solid var(--sapButton_Hover_BorderColor);
 }
 
 .sapSuiteCpMCVerticalAlignmentContainer {
-  position: relative;
-  width: 100%;
-  min-height: 1.5rem;
-  max-height: 100%;
-  min-width: 4rem;
-  max-width: 20rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+	position: relative;
+	width: 100%;
+	min-height: 1.5rem;
+	max-height: 100%;
+	min-width: 4rem;
+	max-width: 20rem;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
 }
 
 .sapSuiteCpMCShrinkable .sapSuiteCpMCVerticalAlignmentContainer {
-  top:	auto;
-  transform: none;
+	top:	auto;
+	transform: none;
 }
 
-// different possible sizes, only specifies the size of the whole element
+/* different possible sizes, only specifies the size of the whole element */
 .sapSuiteCpMCChartContent.sapSuiteCpMCResponsive {
-  width: 100%;
-  height: 100%;
+	width: 100%;
+	height: 100%;
 }
 
 .sapSuiteCpMCChartContent.sapSuiteCpMCSizeL {
-  height: 5.875rem;
-  width: 12rem;
+	height: 5.875rem;
+	width: 12rem;
 }
 
 html.sapUiMedia-Std-Desktop .sapSuiteCpMCChartContent.sapSuiteCpMCSizeAuto,
 html.sapUiMedia-Std-Tablet .sapSuiteCpMCChartContent.sapSuiteCpMCSizeAuto,
 .sapSuiteCpMCChartContent.sapSuiteCpMCSizeM {
-  height: 4.5rem;
-  width: 10.5rem;
+	height: 4.5rem;
+	width: 10.5rem;
 }
 
 html.sapUiMedia-Std-Phone .sapSuiteCpMCChartContent.sapSuiteCpMCSizeAuto,
 .sapSuiteCpMCChartContent.sapSuiteCpMCSizeS {
-  height: 3.5rem;
-  width: 8.25rem;
+	height: 3.5rem;
+	width: 8.25rem;
 }
 
 .sapSuiteCpMCChartContent.sapSuiteCpMCSizeXS {
-  height: 1.5rem;
-  width: 6rem;
+	height: 1.5rem;
+	width: 6rem;
 }
 
 .sapSuiteCpMCChartBar {
-  display: flex;
-  position: absolute;
-  width: 100%;
-  box-sizing: border-box;
+	display: flex;
+	position: absolute;
+	width: 100%;
+	box-sizing: border-box;
 }
 
 .sapSuiteCpMCChartBar > div {
-  height: 100%;
-  min-width: 0.25rem;
+	height: 100%;
+	min-width: 0.25rem;
 }
 
-// different possible looks that are changed base on the current width of the container
+/* different possible looks that are changed base on the current width of the container */
 .sapSuiteCpMCChartContent.sapSuiteCpMCLookL {
-  font-size: @sapMFontMediumSize;
+	font-size: @sapMFontMediumSize;
 
-  .sapSuiteCpMCChartItem {
-	height: 1.5rem;
-	margin-bottom: 0.625rem;
-  }
+	.sapSuiteCpMCChartItem {
+		height: 1.5rem;
+		margin-bottom: 0.625rem;
+	}
 
-  .sapSuiteCpMCChartBar {
-	height: 0.375rem;
-	top: 1.0625rem;
-	left: 0; // helps IE
-  }
+	.sapSuiteCpMCChartBar {
+		height: 0.375rem;
+		top: 1.0625rem;
+	}
 }
 
 .sapSuiteCpMCChartContent.sapSuiteCpMCLookM {
-  font-size: @sapMFontSmallSize;
+	font-size: var(--sapFontSmallSize);
 
-  .sapSuiteCpMCChartItem {
-	height: 1.5rem;
-	margin-bottom: 0;
-  }
+	.sapSuiteCpMCChartItem {
+		height: 1.5rem;
+		margin-bottom: 0;
+	}
 
-  .sapSuiteCpMCChartBar {
-	height: 0.375rem;
-	top: 1.125rem;
-	left: 0; // helps IE
-  }
+	.sapSuiteCpMCChartBar {
+		height: 0.375rem;
+		top: 1.125rem;
+	}
 }
 
 .sapSuiteCpMCChartContent.sapSuiteCpMCLookS {
-  font-size: @sapMFontSmallSize;
+  font-size: var(--sapFontSmallSize);
 
-  .sapSuiteCpMCChartItem {
-	height: 1rem;
-	margin-bottom: 0.125rem;
-  }
+	.sapSuiteCpMCChartItem {
+		height: 1rem;
+		margin-bottom: 0.125rem;
+	}
 
-  .sapSuiteCpMCChartBar {
-	height: 0.25rem;
-	top: 1rem;
-	left: 0; // helps IE
-  }
+	.sapSuiteCpMCChartBar {
+		height: 0.25rem;
+		top: 1rem;
+	}
 }
 
 .sapSuiteCpMCChartContent.sapSuiteCpMCLookXS {
-  .sapSuiteCpMCChartItemTitle, .sapSuiteCpMCChartItemValue {
-	display: none;
-  }
 
-  .sapSuiteCpMCChartItem {
-	height: 0.1875rem;
-	margin-bottom: 0.1875rem;
-  }
+	.sapSuiteCpMCChartItemTitle, .sapSuiteCpMCChartItemValue {
+		display: none;
+	}
 
-  .sapSuiteCpMCChartBar {
-	height: 0.25rem;
-  }
+	.sapSuiteCpMCChartItem {
+		height: 0.1875rem;
+		margin-bottom: 0.1875rem;
+	}
+
+	.sapSuiteCpMCChartBar {
+		height: 0.25rem;
+	}
 }
 
 .sapSuiteCpMCChartContent.sapSuiteCpMCLookWide {
-  font-size: @sapMFontMediumSize;
-
-  .sapSuiteCpMCChartItem {
-	height: 0.875rem;
-	margin-bottom: 0.3rem;
-	align-items: center;
-  }
-
-  .sapSuiteCpMCChartBar {
-	height: 0.375rem;
-	position: relative;
-	margin-left: 2.5%;
-	margin-right: 2.5%;
-	min-width: 4rem;
-	flex-shrink: 1000;
-  }
-
-  .sapSuiteCpMCChartItemTitle, .sapSuiteCpMCChartItemValue {
-	top: 0;
-	margin-left: 0;
-  }
-
-  .sapSuiteCpMCChartItemTitle {
-	flex-shrink: 1;
-  }
-
-  .sapSuiteCpMCChartItemValue {
-	text-align: right;
-	max-width: ~"calc(100% - 5% - 4ch - 4rem)"; // 5% for the margin-left and 4ch for the min-width of sapSuiteCpMCChartItemValue, 4rem for min-width of sapSuiteCpMCChartBar
-  }
-
-  .sapSuiteCpMCChartItemHiddenLabel {
-	display: block;
-	visibility: hidden; // even hidden label value has to be aligned with the other values
-  }
+	font-size: @sapMFontMediumSize;
+
+	.sapSuiteCpMCChartItem {
+		height: 0.875rem;
+		margin-bottom: 0.3rem;
+		align-items: center;
+	}
+
+	.sapSuiteCpMCChartBar {
+		height: 0.375rem;
+		position: relative;
+		margin-left: 2.5%;
+		margin-right: 2.5%;
+		min-width: 4rem;
+		flex-shrink: 1000;
+	}
+
+	.sapSuiteCpMCChartItemTitle, .sapSuiteCpMCChartItemValue {
+		top: 0;
+		margin-left: 0;
+	}
+
+	.sapSuiteCpMCChartItemTitle {
+		flex-shrink: 1;
+	}
+
+	.sapSuiteCpMCChartItemValue {
+		text-align: right;
+		max-width: ~"calc(100% - 5% - 4ch - 4rem)"; /* 5% for the margin-left and 4ch for the min-width of sapSuiteCpMCChartItemValue, 4rem for min-width of sapSuiteCpMCChartBar */
+	}
+
+	.sapSuiteCpMCChartItemHiddenLabel {
+		display: block;
+		visibility: hidden; /* even hidden label value has to be aligned with the other values */
+	}
 }
 
 .sapSuiteCpMCChartBarNegNoValue,
 .sapSuiteCpMCChartBarNoValue {
-  background-color: @sapContent_ForegroundColor;
-  box-shadow: inset -1px 0px 0px 0px @sapContent_ForegroundBorderColor,inset 1px 0px 0px 0px @sapContent_ForegroundBorderColor,inset 0px 1px 0px 0px @sapContent_ForegroundBorderColor, inset 0px -1px 0px 0px @sapContent_ForegroundBorderColor;
+	background-color: var(--sapContent_ForegroundColor);
+	box-shadow: inset -1px 0 0 0 var(--sapContent_ForegroundBorderColor),inset 1px 0 0 0 var(--sapContent_ForegroundBorderColor),inset 0 1px 0 0 var(--sapContent_ForegroundBorderColor), inset 0 -1px 0 0 var(--sapContent_ForegroundBorderColor);
 }
 
 .sapSuiteCpMCNegPosNoValue {
-  box-shadow: inset -1px 0px 0px 0px @sapContent_ForegroundBorderColor,inset 0px 1px 0px 0px @sapContent_ForegroundBorderColor,inset 0px -1px 0px 0px @sapContent_ForegroundBorderColor;
+	box-shadow: inset -1px 0 0 0 var(--sapContent_ForegroundBorderColor),inset 0 1px 0 0 var(--sapContent_ForegroundBorderColor),inset 0 -1px 0 0 var(--sapContent_ForegroundBorderColor);
 }
 
 .sapSuiteCpMCNotLastBarPart {
-  box-shadow: inset -1px 0px 0px 0px @sapUiFieldBackground, inset 1px 0px 0px 0px @sapContent_ForegroundBorderColor, inset 0px 1px 0px 0px @sapContent_ForegroundBorderColor, inset 0px -1px 0px 0px @sapContent_ForegroundBorderColor;
+	box-shadow: inset -1px 0 0 0 var(--sapField_Background), inset 1px 0 0 0 var(--sapContent_ForegroundBorderColor), inset 0 1px 0 0 var(--sapContent_ForegroundBorderColor), inset 0 -1px 0 0 var(--sapContent_ForegroundBorderColor);
 }
 
 .sapSuiteCpMCNotFirstBarPart {
-  box-shadow: inset -1px 0px 0px 0px @sapContent_ForegroundBorderColor, inset 1px 0px 0px 0px @sapUiFieldBackground, inset 0px 1px 0px 0px @sapContent_ForegroundBorderColor, inset 0px -1px 0px 0px @sapContent_ForegroundBorderColor;
+	box-shadow: inset -1px 0 0 0 var(--sapContent_ForegroundBorderColor), inset 1px 0 0 0 var(--sapField_Background), inset 0 1px 0 0 var(--sapContent_ForegroundBorderColor), inset 0 -1px 0 0 var(--sapContent_ForegroundBorderColor);
 }
 
 .sapSuiteCpMCChartItem {
-  width: 100%;
-  position: relative;
-  line-height: normal;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  flex: 0 0 auto; // item is not supposed to change it size
-
-  .sapSuiteCpMCChartItemTitle {
-    color: @sapChart_Data_TextColor;
-  }
-
-  .sapSuiteCpMCChartItemTitle, .sapSuiteCpMCChartItemValue {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+	width: 100%;
 	position: relative;
-	top: 0.0625rem;
-	min-width: 4ch; // always show at least 4 characters (for the first letter and dots)
-	text-align: start;
-  }
-
-  .sapSuiteCpMCChartItemHiddenLabel {
-	display: none;
-  }
-
-  .sapSuiteCpMCChartItemValue {
-	max-width: ~"calc(100% - 6% - 4ch)"; // 6% for the margin-left and 4ch for the min-width of sapSuiteCpMCChartItemValue
-	margin-left: 6%;
-	flex-shrink: 0;
-	text-align: end;
-  }
+	line-height: normal;
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+	flex: 0 0 auto; /* item is not supposed to change it size */
+
+	.sapSuiteCpMCChartItemTitle {
+		color: var(--sapChart_Data_TextColor);
+	}
+
+	.sapSuiteCpMCChartItemTitle, .sapSuiteCpMCChartItemValue {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		position: relative;
+		top: 0.0625rem;
+		min-width: 4ch; /* always show at least 4 characters (for the first letter and dots) */
+		text-align: start;
+	}
+
+	.sapSuiteCpMCChartItemHiddenLabel {
+		display: none;
+	}
+
+	.sapSuiteCpMCChartItemValue {
+		max-width: ~"calc(100% - 6% - 4ch)"; /* 6% for the margin-left and 4ch for the min-width of sapSuiteCpMCChartItemValue */
+		margin-left: 6%;
+		flex-shrink: 0;
+		text-align: end;
+	}
 }
 
 .sapSuiteCpMCSizeM:not(.sapSuiteCpMCLookWide),.sapSuiteCpMCLookM:not(.sapSuiteCpMCLookWide) {
-  .sapSuiteCpMCChartItem {
-    .sapSuiteCpMCChartItemTitle, .sapSuiteCpMCChartItemValue {
-      top: 0.125rem;
-    }
-  }
+
+	.sapSuiteCpMCChartItem {
+
+		.sapSuiteCpMCChartItemTitle, .sapSuiteCpMCChartItemValue {
+			top: 0.125rem;
+		}
+	}
 }
 
 .sapSuiteCpMCSizeL:not(.sapSuiteCpMCLookWide),.sapSuiteCpMCLookL:not(.sapSuiteCpMCLookWide) {
-  .sapSuiteCpMCChartItem {
-    .sapSuiteCpMCChartItemTitle, .sapSuiteCpMCChartItemValue {
-      top: -0.0625rem;
-    }
-  }
+
+	.sapSuiteCpMCChartItem {
+
+		.sapSuiteCpMCChartItemTitle, .sapSuiteCpMCChartItemValue {
+			top: -0.0625rem;
+		}
+	}
 }
 
 .sapSuiteCpMCSizeS:not(.sapSuiteCpMCLookWide),.sapSuiteCpMCLookS:not(.sapSuiteCpMCLookWide) {
-  .sapSuiteCpMCChartItem {
-    .sapSuiteCpMCChartItemTitle, .sapSuiteCpMCChartItemValue {
-      top: 0.0625rem;
-    }
-  }
+
+	.sapSuiteCpMCChartItem {
+
+		.sapSuiteCpMCChartItemTitle, .sapSuiteCpMCChartItemValue {
+			top: 0.0625rem;
+		}
+	}
 }
 
-//When Chinese language is selected and when the chart has been kept inside the GenericTile(Small), the space between the bar and chart should be 1px
+/* When Chinese language is selected and when the chart has been kept inside the GenericTile(Small), the space between the bar and chart should be 1px */
 
 .sapMGT.sapMTileSmallPhone {
-  .sapSuiteCpMC.sapCMCEastCharsPresent.sapSuiteCpMCLookS:not(.sapSuiteCpMCLookWide) {
-    .sapSuiteCpMCChartItem .sapSuiteCpMCChartItemTitle {
-      top: 0;
-    }
-  }
+
+	.sapSuiteCpMC.sapCMCEastCharsPresent.sapSuiteCpMCLookS:not(.sapSuiteCpMCLookWide) {
+
+		.sapSuiteCpMCChartItem .sapSuiteCpMCChartItemTitle {
+			top: 0;
+		}
+	}
 }
 
 .sapSuiteCpMCLookWide.sapSuiteCpMCSizeXS {
-  .sapSuiteCpMCChartItemValue {
-    display: none;
-  }
+
+	.sapSuiteCpMCChartItemValue {
+		display: none;
+	}
 }
-// colors
+
+/* colors */
 .sapSuiteCpMCChartItemValue,
 .sapSuiteCpMCChartItemValue.sapSuiteCpMCViewTypeNormal,
 .sapSuiteCpMCChartItemValue.sapSuiteCpMCSemanticColorNeutral {
-  color: @sapUiChartCategoryAxisLabelFontColor;
+	color: @sapUiChartCategoryAxisLabelFontColor;
 }
 
 .sapSuiteCpMCChartItemValue.sapSuiteCpMCSemanticColorGood {
-  color: @sapPositiveTextColor;
+	color: var(--sapPositiveTextColor);
 }
 
 .sapSuiteCpMCChartItemValue.sapSuiteCpMCSemanticColorCritical {
-  color: @sapCriticalTextColor;
+	color: var(--sapCriticalTextColor);
 }
 
 .sapSuiteCpMCChartItemValue.sapSuiteCpMCSemanticColorError {
-  color: @sapNegativeTextColor;
+	color: var(--sapNegativeTextColor);
 }
 
-
 .sapSuiteCpMCChartBarValue {
-  background-color: @sapUiChartPaletteQualitativeHue1;
+	background-color: @sapUiChartPaletteQualitativeHue1;
 }
+
 .sapSuiteCpMCChartBarValue {
-  .sapSuiteBackgroundSemanticColor(sapSuiteCpMCSemanticColor)
+	.sapSuiteBackgroundSemanticColor(sapSuiteCpMCSemanticColor)
 }