160 lines
2.7 KiB
SCSS
160 lines
2.7 KiB
SCSS
.datepicker {
|
|
width: 265px;
|
|
padding: 10px;
|
|
|
|
&.datepicker-orient-top {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
}
|
|
|
|
td, th {
|
|
width: 35px;
|
|
height: 35px;
|
|
@include border-radius(3px);
|
|
font-weight: 400;
|
|
}
|
|
|
|
thead {
|
|
th {
|
|
&.prev,
|
|
&.datepicker-switch,
|
|
&.next {
|
|
font-weight: 500;
|
|
|
|
i {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
&.dow {
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
|
|
tbody {
|
|
tr > td {
|
|
&.day {
|
|
|
|
&.today {
|
|
position: relative;
|
|
|
|
&:before {
|
|
content: '';
|
|
display: inline-block;
|
|
border: solid transparent;
|
|
border-width: 0 0 7px 7px;
|
|
border-bottom-color: #ffffff;
|
|
border-top-color: rgba(0, 0, 0, 0.2);
|
|
position: absolute;
|
|
bottom: 4px;
|
|
right: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
tfoot {
|
|
tr > th {
|
|
&.today,
|
|
&.clear {
|
|
@include border-radius(3px);
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.input-daterange {
|
|
.input-group-addon {
|
|
min-width: 44px;
|
|
}
|
|
}
|
|
|
|
@mixin datepicker-skin($color) {
|
|
.datepicker {
|
|
thead {
|
|
th {
|
|
&.prev,
|
|
&.datepicker-switch,
|
|
&.next {
|
|
&:hover {
|
|
background: $color;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
tbody {
|
|
tr > td {
|
|
&.day {
|
|
&:hover {
|
|
background-color: darken($color, 10%);
|
|
}
|
|
|
|
&.selected,
|
|
&.selected:hover,
|
|
&.active,
|
|
&.active:hover {
|
|
background-color: $color !important;
|
|
background-image: none;
|
|
color: #fff;
|
|
}
|
|
|
|
&.today {
|
|
background-color: lighten($color, 10%);
|
|
color: #ffffff;
|
|
|
|
&:before {
|
|
border-bottom-color: #ffffff;
|
|
border-top-color: rgba(0, 0, 0, 0.2);
|
|
}
|
|
}
|
|
|
|
&.range {
|
|
background: lighten($color, 10%);
|
|
}
|
|
}
|
|
|
|
span.month, span.year {
|
|
&.focused,
|
|
&:hover {
|
|
background-color: lighten($color, 5%) !important;
|
|
background-image: none;
|
|
color: #fff;
|
|
}
|
|
|
|
&.active:hover,
|
|
&.active {
|
|
background-color: $color !important;
|
|
background-image: none;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
tfoot {
|
|
tr > th {
|
|
&.today,
|
|
&.clear {
|
|
|
|
&:hover {
|
|
background: $color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.datepicker-inline {
|
|
border: 1px solid lighten($color, 10%);
|
|
}
|
|
}
|
|
}
|
|
|
|
@include datepicker-skin($primary); |