Last active
August 29, 2015 14:21
-
-
Save jdavidbakr/7e684c64d2b4a84891f6 to your computer and use it in GitHub Desktop.
LESS: Datepicker
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
.datepicker { | |
position: absolute; | |
font-size: 10px; | |
font-family: @datepicker-font; | |
color: @white; | |
line-height: normal; | |
width: 172px; | |
height: 135px; | |
padding: 14px; | |
background: @datepicker-frame-image no-repeat; | |
z-index: 3500; | |
} | |
/* header | |
********************************************************/ | |
.datepicker .header { | |
position: relative; | |
height: 15px; | |
margin-bottom: 5px; | |
padding-top: 1px; | |
background: black; | |
} | |
.datepicker .header .title { | |
text-align: center; | |
margin: 2px 18px 0 18px; | |
} | |
.datepicker .header .titleText { | |
color: #ccff00; | |
cursor: pointer; | |
} | |
.datepicker .header .previous, | |
.datepicker .header .next, | |
.datepicker .header .closeButton { | |
position: absolute; | |
cursor: pointer; | |
text-indent: -40px; | |
overflow: hidden; | |
width: 12px; | |
height: 12px; | |
top: 2px; | |
background-image: @datepicker-buttons-image; | |
background-position: left top; | |
background-repeat: no-repeat; | |
} | |
.datepicker .header .previous { | |
left: 4px; | |
} | |
.datepicker .header .previous:hover { | |
background-position: left bottom; | |
} | |
.datepicker .header .next { | |
right: 4px; | |
background-position: -13px top; | |
} | |
.datepicker .header .next:hover { | |
background-position: -13px bottom; | |
} | |
/* body | |
********************************************************/ | |
.datepicker .body { | |
position: relative; | |
top: 0px; | |
left: 2px; | |
width: 168px; | |
height: 112px; | |
overflow: hidden; | |
} | |
/* time | |
********************************************************/ | |
.datepicker .time { | |
position: relative; | |
width: 100%; | |
height: 100%; | |
} | |
.datepicker .time .hour, | |
.datepicker .time .separator, | |
.datepicker .time .minutes { | |
background: #333; | |
border: 0px; | |
width: 50px; | |
font-size: 32px; | |
color: #fff; | |
position: absolute; | |
top: 10px; | |
text-align: center; | |
padding: 2px; | |
} | |
.datepicker .time .hour { | |
left: 15px; | |
} | |
.datepicker .time .separator { | |
background: transparent; | |
width: 10px; | |
left: 76px; | |
} | |
.datepicker .time .minutes { | |
left: 95px; | |
} | |
.datepicker .time .ok { | |
position: absolute; | |
top: 65px; | |
height: 32px; | |
width: 136px; | |
left: 15px; | |
font-size: 20px; | |
} | |
/* days-grid | |
********************************************************/ | |
.datepicker .days { | |
width: 168px; | |
margin: auto; | |
} | |
.datepicker .days .day { | |
float: left; | |
text-align: center; | |
overflow: hidden; | |
width: 23px; | |
padding-top: 1px; | |
height: 14px; | |
margin: 0 1px 1px 0; | |
} | |
.datepicker .days .titles { | |
height: 15px; | |
margin-bottom: 2px; | |
text-transform: uppercase; | |
color: #aaa; | |
} | |
/* days-colors | |
********************************************************/ | |
.datepicker .days .week .day { | |
cursor: pointer; | |
} | |
.datepicker .days .week .day:hover { | |
color: #ccff00; | |
} | |
.datepicker .days .otherMonth { | |
color: #444444; | |
} | |
.datepicker .days .selected { | |
color: #ccff00; | |
} | |
/* months-grid | |
********************************************************/ | |
.datepicker .months .month { | |
float: left; | |
cursor: pointer; | |
text-align: center; | |
padding-top: 6px; | |
width: 55px; | |
overflow: hidden; | |
height: 21px; | |
margin: 0 1px 1px 0; | |
} | |
.datepicker .months .month3, | |
.datepicker .months .month6, | |
.datepicker .months .month9, | |
.datepicker .months .month12 { | |
margin-right: 0; | |
} | |
.datepicker .months .month10, | |
.datepicker .months .month11, | |
.datepicker .months .month12 { | |
margin-bottom: 0; | |
} | |
/* months-colors | |
********************************************************/ | |
.datepicker .months .month:hover { | |
color: #ccff00; | |
} | |
.datepicker .months .selected { | |
color: #ccff00; | |
} | |
/* years-grid | |
********************************************************/ | |
.datepicker .years .year { | |
float: left; | |
cursor: pointer; | |
text-align: center; | |
padding-top: 0px; | |
width: 40px; | |
overflow: hidden; | |
height: 21px; | |
margin: 0 1px 1px 0; | |
} | |
.datepicker .years .year4, | |
.datepicker .years .year9, | |
.datepicker .years .year14, | |
.datepicker .years .year19 { | |
margin-right: 0; | |
} | |
.datepicker .years .year15, | |
.datepicker .years .year16, | |
.datepicker .years .year17, | |
.datepicker .years .year18, | |
.datepicker .years .year19 { | |
margin-bottom: 0; | |
} | |
/* years-colors | |
********************************************************/ | |
.datepicker .years .year:hover { | |
color: #ccff00; | |
} | |
.datepicker .years .selected { | |
color: #ccff00 | |
} | |
/* global | |
********************************************************/ | |
.datepicker .unavailable { | |
color: #533 !important; | |
cursor: default !important; | |
text-decoration: line-through; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment