Bookings Accommodations Check-in Check-out CSS

bacc-partial-indicators.css

/* Accommodation Booking - Check-in/Check-out indicators 

   https://github.com/woocommerce/woocommerce-accommodation-bookings/
 
   This CSS is just an example. It fails in two situations:
   
   - If the first two days of the week are booked together
   - If there are adjacent 1-night bookings

   This could be corrected with some clever JavaScript, but 
   modifying Bookings Accommodations with good class names for 
   available check-in or available check-out partial bookings
   would be the best CSS friendly solution. 

   To sidestep some of the issues, you can remove the latter two 
   rules. */

.product-type-accommodation-booking 
.wc-bookings-date-picker .ui-datepicker td.partial_booked a:after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	margin: 0px 0px;
	border-bottom: 2.5em solid #C96259;
	border-left: 1.5em solid transparent;
	z-index: -10;
	opacity: .75;
}

.product-type-accommodation-booking .wc-bookings-date-picker .ui-datepicker td.fully_booked + td.partial_booked.partial_booked a::after, 
.product-type-accommodation-booking .wc-bookings-date-picker .ui-datepicker td.partial_booked + td.partial_booked.partial_booked a::after {
	border-bottom: none;
	border-left: none;
	border-top: 2.5em solid #c96259;
	border-right: 1.5em solid transparent;
	left: 0;
	top: 0;
}

.product-type-accommodation-booking .wc-bookings-date-picker .ui-datepicker tr td:first-child > a::after {
	border-bottom: none;
	border-left: none;
	border-top: 2.5em solid #c96259;
 	border-right: 1.5em solid transparent;
	left: 0;
	top: 0;
}
/* End Accomodation Indicators */