foundation-datepicker.less

/*!
 * Datepicker for Foundation - less stylesheet, just version customized to foundation
 *
 * Copyright 2013 Peter Beno, najlepsiwebdesigner@gmail.com, @benopeter
 * project website http://foundation-datepicker.peterbeno.com
 *
 * Original project https://github.com/eternicode/bootstrap-datepicker
 * 		Original author 2012 Stefan Petre
 * 		Improvements by Andrew Rowls
 * 		Licensed under the Apache License v2.0
 * 		http://www.apache.org/licenses/LICENSE-2.0
 */

@import "build.less";
 
// real datepicker styles 
.datetimepicker {
	display:none;
	position:absolute;
	padding: 4px;
	margin-top: 1px;
	&-inline {
		width: 220px;
		display:none;
	}
	direction: ltr;
	&&-rtl {
		direction: rtl;
		table tr td span {
			float: right;
		}
	}
	&-dropdown {
		top: 0;
		left: 0;
		&:before {
			content: '';
			display: inline-block;
			border-left:   7px solid transparent;
			border-right:  7px solid transparent;
			border-bottom: 7px solid #ccc;
			border-bottom-color: rgba(0,0,0,.2);
			position: absolute;
			top: -7px;
			left: 6px;
		}
		&:after {
			content: '';
			display: inline-block;
			border-left:   6px solid transparent;
			border-right:  6px solid transparent;
			border-bottom: 6px solid @white;
			position: absolute;
			top: -6px;
			left: 7px;
		}
	}
	>div {
		display: none;
	}
	&.days div.datepicker-days {
		display: block;
	}
	&.months div.datepicker-months {
		display: block;
	}
	&.years div.datepicker-years {
		display: block;
	}
	table{
			
		border:none;
		margin: 0;
	}
	td,
	th{
		text-align: center;
		width: 20px;
		height: 20px;
		border: none;
		font-size:12px;
		padding:4px 8px;
		background:#fff;
		cursor:pointer;
		
		
		&.active {
			&.day {
				background:@activeColor; 
			}

			&.year {
				background:@activeColor; 
			}
			
		}
		span.active {
			background:@activeColor; 
		}

	}
	// Inline display inside a table presents some problems with
	// border and background colors.
	.table-striped & table tr {
		td, th {
			background-color:transparent;
		}
	}
	table tr td {

		span {
			display: block;
			width: 23%;
			height: 54px;
			line-height: 54px;
			float: left;
			margin: 1%;
			cursor: pointer;
		}
	}

	th.switch {
		width: 145px;
	}

	thead tr:first-child th,
	tfoot tr:first-child th {
		cursor: pointer;
	}
	// Basic styling for calendar-week cells
	.cw {
		font-size: 10px;
		width: 12px;
		padding: 0 2px 0 5px;
		vertical-align: middle;
	}
	thead tr:first-child th.cw {
		cursor: default;
		background-color: transparent;
	}
}

.datetimepicker-dropdown::before, .datetimepicker-dropdown::after {
	display:none;
}
.datetimepicker-close {
	position:absolute;
	top:-30px;
	right:0px;
	width:15px;
	height:30px;
	padding:0px;
	display: none;
}