fit-ui 2.20.2 → 3.1.0

package/dist/Fit.UI.css

@@ -3470,6 +3470,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 +3529,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 +3546,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 +3555,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 +3635,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 +3645,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 */