@charset "utf-8"; | |
@import "../util"; | |
/** | |
* Rules for the datepicker widget | |
* (used in the Virtual Collection creator) | |
* in Kalamar. | |
*/ | |
$border-size: 2px; | |
div.datepicker { | |
display: inline-block; | |
position: absolute; | |
z-index: 8000; | |
font-size: 80%; | |
padding: 4pt; | |
@include choose-item; | |
box-shadow: $choose-box-shadow; | |
border: { | |
width: $border-size; | |
style: solid; | |
radius: $standard-border-radius; | |
} | |
> div { | |
font-size: 120%; | |
width: 45%; | |
&.month { | |
float: right; | |
} | |
> span { | |
display: inline-block; | |
&:first-child, | |
&:last-child { | |
width: 15%; | |
&::before { | |
display: inline-block; | |
text-align: center; | |
cursor: pointer; | |
font-family: 'FontAwesome'; | |
min-width: 14px; | |
} | |
} | |
&:first-child::before { | |
content: $fa-previous; | |
} | |
&:last-child::before { | |
content: $fa-next; | |
} | |
overflow: hidden; | |
white-space: nowrap; | |
&:nth-child(2) { | |
cursor: pointer; | |
display: inline-block; | |
width: 70%; | |
text-align: center; | |
text-overflow: ellipsis; | |
border: { | |
radius: $standard-border-radius; | |
style: solid; | |
width: $border-size; | |
color: transparent; | |
} | |
&:hover { | |
@include choose-hover; | |
} | |
&.selected { | |
@include choose-active; | |
} | |
} | |
} | |
} | |
table { | |
border-collapse: separate; | |
border-spacing: 1px; | |
} | |
td { | |
@include standard-text-padding; | |
text-align: center; | |
border: { | |
style: solid; | |
width: 1px; | |
} | |
&:not(.out) { | |
cursor: pointer; | |
@include choose-item; | |
background-color: $nearly-white; | |
&.today { | |
background-color: $light-blue; | |
color: $dark-blue; | |
text-shadow: none; | |
} | |
&.selected { | |
@include choose-active; | |
} | |
&:hover { | |
@include choose-hover; | |
} | |
} | |
&.out { | |
border-color: transparent; | |
} | |
} | |
} |