refactor(ui5-datepicker): convert less to css (#338)

ilhan007 · web-flow · commit 3978327d7f20 · 2019-04-17T14:13:45.000+03:00
diff --git a/packages/main/src/DatePicker.js b/packages/main/src/DatePicker.js
@@ -7,12 +7,12 @@ import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes";
 import { getCalendarType } from "@ui5/webcomponents-base/src/Configuration";
 import { getLocale } from "@ui5/webcomponents-base/src/LocaleProvider";
 import { getIconURI } from "@ui5/webcomponents-base/src/IconPool";
+import { addCustomCSS } from "@ui5/webcomponents-base/src/theming/CustomStyle";
 import LocaleData from "@ui5/webcomponents-core/dist/sap/ui/core/LocaleData";
 import DateFormat from "@ui5/webcomponents-core/dist/sap/ui/core/format/DateFormat";
 import CalendarType from "@ui5/webcomponents-base/src/dates/CalendarType";
 import CalendarDate from "@ui5/webcomponents-base/src/dates/CalendarDate";
 import ValueState from "@ui5/webcomponents-base/src/types/ValueState";
-import ShadowDOM from "@ui5/webcomponents-base/src/compatibility/ShadowDOM";
 import DatePickerTemplateContext from "./DatePickerTemplateContext";
 import Icon from "./Icon";
 import Popover from "./Popover";
@@ -23,17 +23,15 @@ import Input from "./Input";
 import InputType from "./types/InputType";
 import DatePickerRenderer from "./build/compiled/DatePickerRenderer.lit";
 
-// Styles
-import belize from "./themes/sap_belize/DatePicker.less";
-import belizeHcb from "./themes/sap_belize_hcb/DatePicker.less";
-import fiori3 from "./themes/sap_fiori_3/DatePicker.less";
-
 // default calendar for bundling
 import "@ui5/webcomponents-core/dist/sap/ui/core/date/Gregorian";
 
-ShadowDOM.registerStyle("sap_belize", "DatePicker.css", belize);
-ShadowDOM.registerStyle("sap_belize_hcb", "DatePicker.css", belizeHcb);
-ShadowDOM.registerStyle("sap_fiori_3", "DatePicker.css", fiori3);
+// Styles
+import datePickerCss from "./themes-next/DatePicker.css";
+
+addCustomCSS("ui5-datepicker", "sap_fiori_3", datePickerCss);
+addCustomCSS("ui5-datepicker", "sap_belize", datePickerCss);
+addCustomCSS("ui5-datepicker", "sap_belize_hcb", datePickerCss);
 
 /**
  * @public
diff --git a/packages/main/src/themes-next/DatePicker.css b/packages/main/src/themes-next/DatePicker.css
@@ -0,0 +1,36 @@
+:host(ui5-datepicker) {
+	display: inline-block;
+	width: 100%;
+}
+
+ui5-datepicker {
+	display: inline-block;
+	width: 100%;
+}
+
+.sapWCDPIcon {
+	color: var(--sapUiContentIconColor);
+	cursor: pointer;
+	outline: none;
+	border: var(--_ui5_datepicker_icon_border);
+	box-sizing: border-box;
+}
+
+.sapWCDPIcon:hover,
+.sapWCDPIcon.sapWCDPIconPressed {
+	border-left-color: white;
+}
+
+.sapWCDPIcon:active {
+	background-color: var(--sapUiButtonLiteActiveBackground);
+	color: var(--sapUiButtonActiveTextColor);
+}
+
+.sapWCDPIcon.sapWCDPIconPressed {
+	background: var(--sapUiToggleButtonPressedBackground);
+	color: var(--sapUiButtonActiveTextColor);
+}
+
+.sapWCDPIcon:not(.sapWCDPIconPressed):not(:active):hover {
+	background: var(--sapUiButtonLiteHoverBackground);
+}
diff --git a/packages/main/src/themes-next/base/DatePicker-parameters.css b/packages/main/src/themes-next/base/DatePicker-parameters.css
@@ -0,0 +1,3 @@
+:root {
+	--_ui5_datepicker_icon_border: none;
+}
diff --git a/packages/main/src/themes-next/sap_belize/DatePicker-parameters.css b/packages/main/src/themes-next/sap_belize/DatePicker-parameters.css
@@ -0,0 +1 @@
+@import "../base/DatePicker-parameters.css";
diff --git a/packages/main/src/themes-next/sap_belize/parameters-bundle.css b/packages/main/src/themes-next/sap_belize/parameters-bundle.css
@@ -3,6 +3,7 @@
 
 @import "./Button-parameters.css";
 @import "./Popover-parameters.css";
+@import "./DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";
 @import "./CalendarHeader-parameters.css";
 @import "./Card-parameters.css";
diff --git a/packages/main/src/themes-next/sap_belize_hcb/DatePicker-parameters.css b/packages/main/src/themes-next/sap_belize_hcb/DatePicker-parameters.css
@@ -0,0 +1,5 @@
+@import "../base/DatePicker-parameters.css";
+
+:root {
+	--_ui5_datepicker_icon_border: 1px solid transparent;
+}
diff --git a/packages/main/src/themes-next/sap_belize_hcb/parameters-bundle.css b/packages/main/src/themes-next/sap_belize_hcb/parameters-bundle.css
@@ -5,6 +5,8 @@
 @import "./CalendarHeader-parameters.css";
 @import "./Card-parameters.css";
 @import "./CheckBox-parameters.css";
+@import "./DatePicker-parameters.css";
+@import "./DayPicker-parameters.css";
 @import "./Input-parameters.css";
 @import "./Link-parameters.css";
 @import "./ListItemBase-parameters.css";
@@ -13,7 +15,6 @@
 @import "./Panel-parameters.css";
 @import "./Popover-parameters.css";
 @import "./RadioButton-parameters.css";
-@import "./DayPicker-parameters.css";
 @import "./Select-parameters.css";
 @import "./Switch-parameters.css";
 @import "./TabContainer-parameters.css";
diff --git a/packages/main/src/themes-next/sap_fiori_3/DatePicker-parameters.css b/packages/main/src/themes-next/sap_fiori_3/DatePicker-parameters.css
@@ -0,0 +1 @@
+@import "../base/DatePicker-parameters.css";
diff --git a/packages/main/src/themes-next/sap_fiori_3/parameters-bundle.css b/packages/main/src/themes-next/sap_fiori_3/parameters-bundle.css
@@ -4,6 +4,8 @@
 @import "./Button-parameters.css";
 @import "./Card-parameters.css";
 @import "./CheckBox-parameters.css";
+@import "./DatePicker-parameters.css";
+@import "./DayPicker-parameters.css";
 @import "./Input-parameters.css";
 @import "./Link-parameters.css";
 @import "./ListItemBase-parameters.css";
@@ -12,7 +14,6 @@
 @import "./Panel-parameters.css";
 @import "./Popover-parameters.css";
 @import "./RadioButton-parameters.css";
-@import "./DayPicker-parameters.css";
 @import "./Select-parameters.css";
 @import "./Switch-parameters.css";
 @import "./TabContainer-parameters.css";

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+:root {`
	`2`	`+ --_ui5_datepicker_icon_border: none;`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+@import "../base/DatePicker-parameters.css";`
-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +@import "../base/DatePicker-parameters.css";
++
 +:root {
 +	--_ui5_datepicker_icon_border: 1px solid transparent;
 +}