Created
June 18, 2012 15:13
-
-
Save sirvine/2948857 to your computer and use it in GitHub Desktop.
Kalendae 0.2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** Base container **/ | |
.kalendae { | |
display: inline-block;zoom:1;*display:inline; | |
background:#eee; | |
padding:10px; | |
margin:5px; | |
border-radius:5px; | |
-moz-border-radius: 5px; | |
-webkit-border-radius: 5px; | |
font-size:11px; | |
font-family:'Helvetica Neue', 'Helvetica'; | |
cursor:default; | |
position:relative; | |
} | |
/** Popup Container for Kalendae.Input **/ | |
.kalendae.k-floating { | |
position:absolute; | |
top:0; | |
left:0; | |
z-index:100000; | |
margin:0; | |
box-shadow:0 1px 3px rgba(0,0,0,0.75); | |
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.75); | |
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.75); | |
} | |
/** Kalendae.Input's popup close button **/ | |
.kalendae .k-btn-close { | |
position:absolute; | |
top:-8px; | |
right:-8px; | |
width:16px; | |
height:16px; | |
background:white; | |
border:2px solid #ccc; | |
color:#999; | |
line-height:17px; | |
text-align:center; | |
font-size:13px; | |
border-radius:10px; | |
box-shadow:0 1px 3px rgba(0,0,0,0.75); | |
cursor:pointer; | |
} | |
.kalendae .k-btn-close:after {content:"\2716";} | |
.kalendae .k-btn-close:hover { | |
color:#7EA0E2; | |
background:white; | |
border-color:#7EA0E2; | |
} | |
/** Month Container **/ | |
.kalendae .k-calendar {display: inline-block;zoom:1;*display:inline;width:155px;vertical-align:top;} | |
/** Month Separator **/ | |
.kalendae .k-separator {display: inline-block;zoom:1;*display:inline;width:2px;vertical-align:top;background:#ddd;height:155px;margin:0px 10px;} | |
/** Month Title Row **/ | |
.kalendae .k-title {text-align:center;white-space:nowrap;position:relative;height:18px;} | |
.kalendae .k-caption {font-size:12px;line-height:18px;} | |
/** Month and Year Buttons **/ | |
.kalendae .k-btn-previous-month, | |
.kalendae .k-btn-next-month, | |
.kalendae .k-btn-previous-year, | |
.kalendae .k-btn-next-year {width:16px;height:16px;cursor:pointer;position:absolute;top:0;color:#777;font-size:20px;line-height:14px;} | |
.kalendae .k-btn-previous-year {left:0;} | |
.kalendae .k-btn-previous-month {left:16px;} | |
.kalendae .k-btn-next-month {right:16px;} | |
.kalendae .k-btn-next-year {right:0;} | |
.kalendae .k-btn-previous-month:after {content:"\276E";} | |
.kalendae .k-btn-next-month:after {content:"\276F";} | |
.kalendae .k-btn-previous-year:after {content:"\276E\276E";} | |
.kalendae .k-btn-next-year:after {content:"\276F\276F";} | |
.kalendae .k-btn-previous-year, | |
.kalendae .k-btn-next-year {letter-spacing:-4px;text-align:left;} | |
.kalendae .k-btn-previous-month:hover, | |
.kalendae .k-btn-next-month:hover {color:#7EA0E2;} | |
.kalendae .k-btn-previous-year:hover, | |
.kalendae .k-btn-next-year:hover {color:#6FDF81;} | |
/** Remove extra buttons when calendar shows multiple months **/ | |
.kalendae .k-first-month .k-btn-next-month, | |
.kalendae .k-middle-month .k-btn-next-month, | |
.kalendae .k-middle-month .k-btn-previous-month, | |
.kalendae .k-last-month .k-btn-previous-month, | |
.kalendae .k-first-month .k-btn-next-year, | |
.kalendae .k-middle-month .k-btn-next-year, | |
.kalendae .k-middle-month .k-btn-previous-year, | |
.kalendae .k-last-month .k-btn-previous-year {display:none;} | |
/** Force specific width for month container contents **/ | |
.kalendae .k-title, | |
.kalendae .k-header, | |
.kalendae .k-days { | |
width:154px; | |
display:block; | |
overflow:hidden; | |
} | |
/** Hide unusable buttons **/ | |
.kalendae.k-disable-next-month-btn .k-btn-next-month, | |
.kalendae.k-disable-previous-month-btn .k-btn-previous-month, | |
.kalendae.k-disable-next-year-btn .k-btn-next-year, | |
.kalendae.k-disable-previous-year-btn .k-btn-previous-year { | |
display:none; | |
} | |
/** Week columns and day cells **/ | |
.kalendae .k-header span, | |
.kalendae .k-days span { | |
float:left; | |
margin:1px 1px; | |
} | |
.kalendae .k-header span { | |
text-align:center; | |
font-weight:bold; | |
width:20px; | |
padding:1px 0; | |
color:#666; | |
} | |
.kalendae .k-days span { | |
text-align:right; | |
width:13px; | |
height:1.1em; | |
line-height:1em; | |
padding:2px 3px 2px 2px; | |
border:1px solid transparent; | |
border-radius:3px; | |
-moz-border-radius: 3px; | |
-webkit-border-radius: 3px; | |
color:#999; | |
} | |
/** Today **/ | |
.kalendae .k-today { | |
text-decoration:underline; | |
} | |
/** Selectable but not selected day **/ | |
.kalendae .k-days span.k-active { | |
border-color:#ddd; | |
background-color:#fff; | |
cursor:pointer; | |
color:#333; | |
} | |
/** Selected day, when outside the selectable area **/ | |
.kalendae .k-days span.k-selected { | |
border-color:#1072A5; | |
color:#1072A5; | |
} | |
/** Selected day, when inside the selectable area **/ | |
.kalendae .k-days span.k-selected.k-active { | |
background:#7EA0E2; | |
color:white; | |
} | |
/** Days between the start and end points on a range, outside of the selectable area **/ | |
.kalendae .k-days span.k-range { | |
background:none; | |
border-color:#6DD4FE; | |
} | |
/** Days between the start and end points on a range, inside of the selectable area **/ | |
.kalendae .k-days span.k-range.k-active { | |
background:#C4D4F1; | |
border-color:#19AEFE; | |
color:#333; | |
} | |
/** Selectable day, hovered **/ | |
.kalendae .k-days span.k-active:hover { | |
border-color:#666; | |
} | |
/** Days outside of the month view (before the first day of the month, after the last day of the month) **/ | |
.kalendae .k-days span.k-out-of-month {color:#ddd;} | |
/*-------------------------------------IE8 ONLY CODE BELOW THIS LINE--------------------------------------------*/ | |
.kalendae.ie8.k-floating { | |
border:1px solid #ccc; | |
} | |
.kalendae.ie8 .k-btn-close { | |
width:20px; | |
height:20px; | |
border:none; | |
background:url('/assets/close.png') no-repeat top left; | |
} | |
.kalendae.ie8 .k-btn-close:after {display:none;} | |
.kalendae.ie8 .k-btn-previous-month, | |
.kalendae.ie8 .k-btn-next-month, | |
.kalendae.ie8 .k-btn-previous-year, | |
.kalendae.ie8 .k-btn-next-year {width:16px;height:16px;cursor:pointer;background:#777 url('/assets/arrows.png') no-repeat center left;position:absolute;top:0;} | |
.kalendae.ie8 .k-btn-next-month, | |
.kalendae.ie8 .k-btn-next-year {background-position:center right;} | |
.kalendae.ie8 .k-btn-previous-month:hover, | |
.kalendae.ie8 .k-btn-next-month:hover {background-color:#7EA0E2;} | |
.kalendae.ie8 .k-btn-previous-year, | |
.kalendae.ie8 .k-btn-next-year {background-color:#333;} | |
.kalendae.ie8 .k-btn-previous-year:hover, | |
.kalendae.ie8 .k-btn-next-year:hover {background-color:#6FDF81;} | |
.kalendae.ie8 .k-btn-previous-month:after, | |
.kalendae.ie8 .k-btn-next-month:after, | |
.kalendae.ie8 .k-btn-previous-year:after, | |
.kalendae.ie8 .k-btn-next-year:after {display:none;} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment