fit-ui 3.0.0 → 3.2.0

package/dist/Fit.UI.css

@@ -3351,6 +3351,88 @@ div.FitUiControlCheckBox[data-enabled="true"][data-valid="false"][data-showinval
 	border-color: red;
 }
 
+div.FitUiControlColorPicker
+{
+	height: 2em; /* Equal height for all controls */
+	width: 200px;
+
+	border: 0.065em solid #BBBBBB;
+	border-radius: 2px;
+
+	background-image: url("Controls/ColorPicker/transparent.jpg");
+	background-repeat: repeat;
+}
+
+div.FitUiControlColorPicker input[type="color"],
+div.FitUiControlColorPicker span
+{
+	cursor: pointer;
+}
+div.FitUiControlColorPicker[data-enabled="false"] input[type="color"],
+div.FitUiControlColorPicker[data-enabled="false"] span
+{
+	cursor: default;
+}
+
+div.FitUiControlColorPicker input[type="color"]
+{
+	width: 100%;
+	height: 100%;
+	opacity: 0; /* Hide ugly native picker - selected color is applied as background-color to outer control element */
+}
+
+/* Focused indicator */
+div.FitUiControlColorPicker[data-focused="true"]
+{
+	border-color: #4484C7;
+}
+
+/* Error indicator */
+div.FitUiControlColorPicker[data-enabled="true"][data-valid="false"][data-showinvalid="true"]
+{
+	outline: none;
+}
+div.FitUiControlColorPicker[data-enabled="true"][data-valid="false"][data-showinvalid="true"][data-focused="false"]
+{
+	border-color: red;
+}
+
+/* Disabled indicator */
+div.FitUiControlColorPicker[data-enabled="false"]
+{
+	opacity: 0.7;
+}
+div.FitUiControlColorPicker[data-enabled="false"] span
+{
+	opacity: 0.5;
+}
+
+/* Label for HEX color code */
+div.FitUiControlColorPicker span:first-of-type
+{
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	left: 0;
+	width: 100%; /* Allow user to start text selection far away from value */
+	padding-left: 0.25em;
+}
+
+/* Clear button */
+div.FitUiControlColorPicker span:last-of-type
+{
+	position: absolute;
+	top: 50%;
+	transform: translateY(calc(-50% - 0.05em));
+	right: 0.2em;
+	font-size: 1.4em;
+}
+
+/* Hide label and clear button when no color is selected */
+div.FitUiControlColorPicker[data-transparent="true"] span:last-of-type
+{
+	display: none;
+}
 div.FitUiControlContextMenu.FitUiControlTreeView
 {
 	border: 0.065em solid #BBBBBB;
@@ -3470,6 +3552,22 @@ div.FitUiControlDatePicker input[type="text"]::-ms-clear
 	display: none;
 }
 
+/* Position trigger icon */
+div.FitUiControlDatePicker span
+{
+	position: absolute;
+	right: 0em;
+	top: 50%;
+	transform: translateY(-50%);
+	cursor: pointer;
+	padding: 0.5em;
+}
+div.FitUiControlDatePicker[data-time="true"] span
+{
+	right: auto;
+	left: 6em;
+}
+
 /* Date picker with Time picker */
 div.FitUiControlDatePicker[data-time="true"] input[type="text"]
 {
@@ -3513,8 +3611,10 @@ div.fitui-datepicker select:focus
 
 div.fitui-datepicker
 {
+	width: 18em;
 	margin-top: 1px;
 	z-index: 1300 !important; /* Using !important to override inline style */
+	box-shadow: 0px 0px 0.75em #D8D8D8;
 }
 
 /* Fluent UI compatibility */
@@ -3528,6 +3628,7 @@ html[data-fitui-companion="fluent-ui"] div.fitui-datepicker
 td.fitui-datepicker-week-col
 {
 	font-weight: bold;
+	text-align: center;
 }
 
 div.fitui-datepicker-header
@@ -3536,12 +3637,78 @@ div.fitui-datepicker-header
 	border: none;
 	border-bottom: 1px solid #E4E4E4;
 	border-radius: 0px;
-	background-color: #EAEAEA;
+	background-color: #F8F4F4;
+}
+
+div.fitui-datepicker-header a.fitui-datepicker-prev, /* Links in which arrow icons are found */
+div.fitui-datepicker-header a.fitui-datepicker-next
+{
+	top: 0.175em;
+}
+div.fitui-datepicker-header a.fitui-datepicker-prev
+{
+	border: 1px solid transparent;
+	left: 0.21em;
+}
+div.fitui-datepicker-rtl div.fitui-datepicker-header a.fitui-datepicker-prev /* Buttons are flipped - previous button in right side of calendar widget */
+{
+	left: auto;
+	right: 0.21em;
+}
+div.fitui-datepicker-header a.fitui-datepicker-prev-hover
+{
+	border-color: #D5D5D5;
+}
+div.fitui-datepicker-header a.fitui-datepicker-next
+{
+	border: 1px solid transparent;
+	right: 0.21em;
+}
+div.fitui-datepicker-rtl div.fitui-datepicker-header a.fitui-datepicker-next /* Buttons are flipped - next button in left side of calendar widget */
+{
+	right: auto;
+	left: 0.21em;
+}
+div.fitui-datepicker-header a.fitui-datepicker-next-hover
+{
+	border-color: #D5D5D5;
+}
+
+div.fitui-datepicker-header span.fitui-icon /* Arrow icons in header links */
+{
+	width: 100%;
+	height: 100%;
+	top: 50%;
+	transform: translateY(-50%);
+	left: 0;
+	margin-top: 0;
+	margin-left: 0;
+}
+div.fitui-datepicker-header span.fitui-icon.fitui-icon-circle-triangle-w, /* Left-side arrow icon */
+div.fitui-datepicker-header span.fitui-icon.fitui-icon-circle-triangle-e  /* Right-side arrow icon */
+{
+	background: none; /* Remove image icon */
+}
+div.fitui-datepicker-header span.fitui-icon.fitui-icon-circle-triangle-w:before, /* New font based left-side arrow icon */
+div.fitui-datepicker-header span.fitui-icon.fitui-icon-circle-triangle-e:before  /* New font based right-side arrow icon */
+{
+	font-family: "FontAwesome";
+	content: "\f053"; /* chevron left */
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	color: #333333;
+	text-indent: 0;
+}
+div.fitui-datepicker-header span.fitui-icon.fitui-icon-circle-triangle-e:before /* New font based right-side arrow icon */
+{
+	content: "\f054"; /* chevron right */
 }
 
 div.fitui-datepicker div.fitui-datepicker-title select /* Year/month pickers */
 {
-	margin: 1px;
+	margin: 0.2em;
 	padding: 0.05em 0.3em;
 	border: 1px solid #CECECE;
 
@@ -3550,6 +3717,8 @@ div.fitui-datepicker div.fitui-datepicker-title select /* Year/month pickers */
 	-webkit-appearance: none;
 	appearance: none;
 	border-radius: 2px;
+	background-color: white;
+	color: #333333;
 }
 div.fitui-datepicker div.fitui-datepicker-title select::-ms-expand /* IE10+ */
 {
@@ -3558,25 +3727,50 @@ div.fitui-datepicker div.fitui-datepicker-title select::-ms-expand /* IE10+ */
 
 div.fitui-widget-content a.fitui-state-default /* Day cells */
 {
-	border-color: #E4E4E4;
+	border-color: transparent;
 	background: none;
+	padding: 0.5em;
 }
 div.fitui-widget-content a.fitui-state-default:hover
 {
 	background: #E6E6E6;
 }
 
-div.fitui-widget-content a.fitui-state-active /* Selected day */
+div.fitui-widget-content a.fitui-state-highlight /* Current day */
 {
-	background: none;
 	color: #454545;
-	border-color: #E68383;
+	background-color: #EDEDED;
 }
 
-div.fitui-widget-content a.fitui-state-highlight /* Current day */
+div.fitui-widget-content a.fitui-state-active /* Selected day */
 {
+	background: #D2E8FF;
 	color: #454545;
-	background-color: #D6EBFF;
+	border-color: #83BBE8;
+}
+
+/* Support for week selection */
+
+div.fitui-datepicker[data-select-week="true"] tbody tr:hover /* Highlight rows when hovered */
+{
+	background: #E4E4E4;
+}
+div.fitui-datepicker[data-select-week="true"] tbody td a:hover /* Disable highlighting when hovering day cells */
+{
+	background: none;
+}
+div.fitui-datepicker[data-select-week="true"] tbody tr:has(a.fitui-state-active) /* Highlight row that contains (has) selected day */
+{
+	background: #D2E8FF;
+}
+div.fitui-datepicker[data-select-week="true"] tbody tr:has(a.fitui-state-active) a.fitui-state-highlight /* Change highlight color of current day if contained in selected week */
+{
+	background: #B3D8FF;
+}
+div.fitui-datepicker[data-select-week="true"] tbody a.fitui-state-active /* Disable highlighting for selected day (sunday, monday, or saturday, depending on locale) */
+{
+	background: none;
+	border-color: transparent;
 }
 
 /* Mobile */