Skip to content

Instantly share code, notes, and snippets.

@pamelafox
Created February 8, 2012 05:49
Show Gist options
  • Save pamelafox/1765875 to your computer and use it in GitHub Desktop.
Save pamelafox/1765875 to your computer and use it in GitHub Desktop.
Zepto Bootstrap Datepicker SASS
.datepicker {
background-color: $white;
border-color: #999;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-width: 1px;
@include border-radius(4px);
@include box-shadow(0 2px 4px rgba(0,0,0,.2));
@include background-clip(padding-box);
display: none;
position: absolute;
padding-bottom: 4px;
width: 218px;
.nav {
font-weight: bold;
width: 100%;
padding: 4px 0;
background-color: #f5f5f5;
color: $gray;
border-bottom: 1px solid #ddd;
@include box-shadow(inset 0 1px 0 $white);
@include clearfix();
span {
display: block;
float: left;
text-align: center;
height: 28px;
line-height: 28px;
position: relative;
}
.bg {
width: 100%;
background-color: #fdf5d9;
height: 28px;
position: absolute;
top: 0;
left: 0;
@include border-radius(4px);
}
.fg {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
}
.button {
cursor: pointer;
padding: 0 4px;
@include border-radius(4px);
&:hover {
background-color: $gray;
color: $white;
}
}
.months {
float: left;
margin-left: 4px;
.name {
width: 72px;
padding: 0;
}
}
.years {
float: right;
margin-right: 4px;
.name {
width: 36px;
padding: 0;
}
}
.dow, .days div {
float: left;
width: 30px;
line-height: 3em;
text-align: center;
width: 14%;
}
.dow {
font-weight: bold;
color: $gray;
}
.calendar {
padding: 4px;
}
.days {
clear: left;
div {
cursor: pointer;
@include border-radius(4px);
&:hover {
background-color: $darkblue;
color: $white;
}
}
}
.overlap {
color: $lightgray;
}
.today {
background-color: #fee9cc;
}
.selected {
background-color: $lightgray;
color: $white;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment