engine/app/assets/stylesheets/locomotive/datepicker.scss

170 lines
3.2 KiB
SCSS

@import "compass/css3";
@import "compass/css3/border-radius";
@import "compass/css3/images";
@import "compass/css3/text-shadow";
.ui-datepicker {
display: none;
width: auto;
z-index: 999 !important;
background: #f1f1f1;
padding: 3px 0 0 0;
margin-top: 9px;
border: 1px solid #bec8cc;
@include border-radius(6px);
@include box-shadow(rgba(255, 255, 255, 0.9) 0px 1px 1px 0px inset);
.ui-datepicker-header {
&:before {
position: absolute;
top: -10px;
display: block;
width: 100%;
height: 8px;
background: transparent image-url("locomotive/datepicker/ui-widget-content-top.png") no-repeat center 0;
content: " ";
}
background: transparent;
padding: 0px;
border: 0px;
@include border-radius(0px);
@include background-image(linear-gradient(#edf0f1, #d7dadc));
.ui-datepicker-title {
margin: 0px;
color: #646f75;
font-size: 11px;
line-height: 14px;
font-weight: normal;
@include text-shadow(rgba(255, 255, 255, 0.8), 0px, 1px, 1px);
}
.ui-datepicker-prev, .ui-datepicker-next {
top: 4px;
width: 7px;
height: 13px;
span {
background-position: 0 0;
cursor: pointer;
}
&.ui-state-hover {
border: 0px;
@include border-radius(0px);
top: 5px;
}
}
.ui-datepicker-prev {
left: 10px;
span {
background-image: image-url("locomotive/datepicker/ui-widget-left-icon.png");
}
}
.ui-datepicker-next {
right: 10px;
span {
background-image: image-url("locomotive/datepicker/ui-widget-right-icon.png");
}
}
}
.ui-datepicker-calendar {
margin: 0px;
font-size: 12px;
font-weight: normal;
thead {
th {
background: #d7dadc;
padding: 3px 0px;
border-bottom: 1px solid #bcbfc2;
color: #96a7b0;
font-size: 9px;
font-weight: normal;
text-transform: uppercase;
}
}
tbody {
tr {
td {
border-top: 1px solid #f8f8f8;
border-right: 1px solid #e0e0e0;
width: 24px;
height: 20px;
line-height: 20px;
padding: 0px;
vertical-align: middle;
text-align: center;
a {
display: block;
background: none;
padding: 0px;
border: 0px;
border-bottom: 1px solid #e0e0e0;
color: #63696d;
font-size: 11px;
font-weight: normal;
text-align: center;
&.ui-state-active {
border-top-color: transparent;
border-bottom-color: transparent;
}
}
&.ui-datepicker-current-day {
border-top-color: transparent;
border-bottom-color: transparent;
@include background-image(linear-gradient(top, #e1e4e5, #e1e4e5 40%, #ccd1d3));
}
&.ui-datepicker-today a {
font-weight: bold;
}
&:last-child {
border-right: 0px;
}
}
&:last-child td a {
border-bottom: 0px;
}
}
}
}
}