492 lines
11 KiB
SCSS
492 lines
11 KiB
SCSS
@import "../theme/variables";
|
|
$datepickerDayCellSize: 32px !default;
|
|
$datepickerWidth: 250px !default;
|
|
$datepickerMinBodyHeight: 170px !default;
|
|
$datepickerBorderRadius: 8px !default;
|
|
$datepickerPadding: 4px !default;
|
|
$datepickerZIndex: 100 !default;
|
|
$datepickerFontSize: 14px !default;
|
|
$datepickerYearsPerRow: 4 !default;
|
|
//$light-font :#ab8ce4;
|
|
$white :#fff;
|
|
|
|
$datepickerTextColor: (
|
|
button: #5cc4ef,
|
|
otherMonth: #dedede,
|
|
otherMonthInRange: #ccc,
|
|
disabled: #aeaeae,
|
|
currentDate: #4EB5E6,
|
|
common: #4a4a4a,
|
|
dayNames: #FF9A19,
|
|
navArrows: #9c9c9c
|
|
) !default;
|
|
|
|
$datepickerBG: (
|
|
selected: #5cc4ef,
|
|
selectedHover: darken(#5cc4ef, 5),
|
|
inRange: rgba(#5cc4ef, .1),
|
|
hover: #f0f0f0
|
|
) !default;
|
|
|
|
$datepickerBorderColor: (
|
|
nav: #efefef,
|
|
inline: #d7d7d7,
|
|
default: #dbdbdb
|
|
) !default;
|
|
|
|
$datepickerNavigationHeight: 32px !default;
|
|
$datepickerNavigationButtonsOffset: 2px !default;
|
|
|
|
$datepickerPointerSize: 10px !default;
|
|
$datepickerPointerOffset: 10px !default;
|
|
|
|
// Transitions
|
|
$datepickerTransitionSpeed: .3s !default;
|
|
$datepickerTransitionEase: ease !default;
|
|
$datepickerTransitionOffset: 8px !default;
|
|
|
|
// Objects
|
|
%otherMonth {
|
|
color: map_get($datepickerTextColor, otherMonth);
|
|
|
|
&:hover {
|
|
color: darken(map_get($datepickerTextColor, otherMonth), 10);
|
|
}
|
|
|
|
&.-disabled- {
|
|
&.-focus- {
|
|
color: map_get($datepickerTextColor, otherMonth);
|
|
}
|
|
}
|
|
|
|
&.-selected- {
|
|
color: #fff;
|
|
background: lighten(map_get($datepickerBG, selected), 15);
|
|
&.-focus- {
|
|
background: lighten(map_get($datepickerBG, selected), 10);
|
|
}
|
|
}
|
|
|
|
&.-in-range- {
|
|
background-color: map_get($datepickerBG, inRange);
|
|
color: darken(map_get($datepickerTextColor, otherMonth), 7);
|
|
|
|
&.-focus- {
|
|
background-color: rgba(map_get($datepickerBG, inRange), .2);
|
|
}
|
|
}
|
|
|
|
|
|
&:empty {
|
|
background: none;
|
|
border: none;
|
|
}
|
|
}
|
|
|
|
/* -------------------------------------------------
|
|
Datepicker cells
|
|
------------------------------------------------- */
|
|
|
|
.datepicker--cells {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.datepicker--cell {
|
|
border-radius: 5px;
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
display: flex;
|
|
position: relative;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: $datepickerDayCellSize;
|
|
z-index: 1;
|
|
|
|
&.-focus- {
|
|
background: map_get($datepickerBG, hover);
|
|
}
|
|
|
|
&.-current- {
|
|
color: map_get($datepickerTextColor, currentDate);
|
|
border-color: map_get($datepickerTextColor, currentDate);
|
|
&.-focus- {
|
|
color: map_get($datepickerTextColor, common);
|
|
}
|
|
|
|
&.-in-range- {
|
|
color: map_get($datepickerTextColor, currentDate);
|
|
}
|
|
}
|
|
&.-in-range- {
|
|
background: map_get($datepickerBG, inRange);
|
|
color: map_get($datepickerTextColor, common);
|
|
border-radius: 0;
|
|
&.-focus- {
|
|
background-color: rgba(map_get($datepickerBG, inRange), .2);
|
|
}
|
|
}
|
|
|
|
&.-disabled- {
|
|
cursor: default;
|
|
color: map_get($datepickerTextColor, disabled);
|
|
|
|
&.-focus- {
|
|
color: map_get($datepickerTextColor, disabled);
|
|
}
|
|
|
|
&.-in-range- {
|
|
color: darken(map_get($datepickerTextColor, disabled), 5);
|
|
}
|
|
|
|
&.-current- {
|
|
&.-focus- {
|
|
color: map_get($datepickerTextColor, disabled);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.-range-from- {
|
|
border: 1px solid rgba(map_get($datepickerBG, selected), .5);
|
|
background-color: map_get($datepickerBG, inRange);
|
|
border-radius: $datepickerBorderRadius 0 0 $datepickerBorderRadius;
|
|
}
|
|
&.-range-to- {
|
|
border: 1px solid rgba(map_get($datepickerBG, selected), .5);
|
|
background-color: map_get($datepickerBG, inRange);
|
|
border-radius: 0 $datepickerBorderRadius $datepickerBorderRadius 0;
|
|
}
|
|
|
|
&.-range-from-.-range-to- {
|
|
border-radius: $datepickerBorderRadius;
|
|
}
|
|
&.-selected- {
|
|
color:$white;
|
|
border: none;
|
|
background-color: $primary-color;
|
|
&.-current- {
|
|
color:$white;
|
|
background-color: $primary-color;
|
|
}
|
|
&.-focus- {
|
|
background-color: $primary-color;
|
|
}
|
|
}
|
|
&:empty {
|
|
cursor: default;
|
|
}
|
|
}
|
|
|
|
// Day names
|
|
// -------------------------------------------------
|
|
|
|
.datepicker--days-names {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: 8px 0 3px;
|
|
}
|
|
|
|
.datepicker--day-name {
|
|
color: map_get($datepickerTextColor, dayNames);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 1;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
font-size: .8em;
|
|
}
|
|
|
|
// Day cell
|
|
// -------------------------------------------------
|
|
|
|
.datepicker--cell-day {
|
|
width: (100/7)#{'%'};
|
|
height: 34px;
|
|
&.-other-month- {
|
|
@extend %otherMonth;
|
|
}
|
|
}
|
|
|
|
|
|
// Months
|
|
// -------------------------------------------------
|
|
|
|
.datepicker--months {}
|
|
|
|
.datepicker--cells-months {
|
|
height: $datepickerMinBodyHeight;
|
|
}
|
|
|
|
// Month cell
|
|
// -------------------------
|
|
|
|
.datepicker--cell-month {
|
|
width: 33.33%;
|
|
height: 25%;
|
|
}
|
|
|
|
// Years
|
|
// -------------------------------------------------
|
|
|
|
.datepicker--years {
|
|
height: $datepickerMinBodyHeight;
|
|
}
|
|
|
|
.datepicker--cells-years {
|
|
height: $datepickerMinBodyHeight;
|
|
}
|
|
// Year cell
|
|
// -------------------------
|
|
|
|
.datepicker--cell-year {
|
|
width: 100% / $datepickerYearsPerRow;
|
|
height: 33.33%;
|
|
|
|
&.-other-decade- {
|
|
@extend %otherMonth;
|
|
}
|
|
}
|
|
|
|
/* -------------------------------------------------
|
|
Datepicker
|
|
------------------------------------------------- */
|
|
|
|
.datepickers-container {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
|
|
@media print {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.datepicker {
|
|
background-color:$white;
|
|
// border:1px solid $light-gray;
|
|
// border: 1px solid map_get($datepickerBorderColor, default);
|
|
border-radius: $datepickerBorderRadius;
|
|
box-sizing: content-box;
|
|
font-size: $datepickerFontSize;
|
|
color: map_get($datepickerTextColor, common);
|
|
width: $datepickerWidth;
|
|
position: absolute;
|
|
left: -100000px;
|
|
opacity:0;
|
|
padding:10px;
|
|
transition: opacity $datepickerTransitionSpeed $datepickerTransitionEase, transform $datepickerTransitionSpeed $datepickerTransitionEase, left 0s $datepickerTransitionSpeed;
|
|
z-index: $datepickerZIndex;
|
|
box-shadow: 0 4px 14px rgba(174,197,231,.5);
|
|
&.-from-top- {
|
|
transform: translateY(-$datepickerTransitionOffset);
|
|
}
|
|
&.-from-right- {
|
|
transform: translateX($datepickerTransitionOffset);
|
|
}
|
|
&.-from-bottom- {
|
|
transform: translateY($datepickerTransitionOffset);
|
|
}
|
|
&.-from-left- {
|
|
transform: translateX(-$datepickerTransitionOffset);
|
|
}
|
|
|
|
|
|
&.active {
|
|
opacity: 1;
|
|
transform: translate(0);
|
|
transition: opacity $datepickerTransitionSpeed $datepickerTransitionEase, transform $datepickerTransitionSpeed $datepickerTransitionEase, left 0s 0s;
|
|
}
|
|
}
|
|
|
|
.datepicker-inline {
|
|
.datepicker {
|
|
position:static;
|
|
left:auto;
|
|
right:auto;
|
|
opacity:1;
|
|
transform:none;
|
|
border-color:$light-gray;
|
|
}
|
|
|
|
.datepicker--pointer {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.datepicker--content {
|
|
box-sizing: content-box;
|
|
padding: $datepickerPadding;
|
|
|
|
.-only-timepicker- & {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// Pointer
|
|
// -------------------------------------------------
|
|
$pointerHalfSize: $datepickerPointerSize / 2 - 1;
|
|
|
|
.datepicker--pointer {
|
|
position: absolute;
|
|
background: #fff;
|
|
border-top: 1px solid map-get($datepickerBorderColor, default);
|
|
border-right: 1px solid map-get($datepickerBorderColor, default);
|
|
width: $datepickerPointerSize;
|
|
height: $datepickerPointerSize;
|
|
z-index: -1;
|
|
|
|
// Main axis
|
|
// -------------------------
|
|
|
|
.-top-left- &, .-top-center- &, .-top-right- & {
|
|
top: calc(100% - #{$pointerHalfSize});
|
|
transform: rotate(135deg);
|
|
}
|
|
|
|
.-right-top- &, .-right-center- &, .-right-bottom- & {
|
|
right: calc(100% - #{$pointerHalfSize});
|
|
transform: rotate(225deg);
|
|
}
|
|
|
|
.-bottom-left- &, .-bottom-center- &, .-bottom-right- & {
|
|
bottom: calc(100% - #{$pointerHalfSize});
|
|
transform: rotate(315deg);
|
|
}
|
|
|
|
.-left-top- &, .-left-center- &, .-left-bottom- & {
|
|
left: calc(100% - #{$pointerHalfSize});
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
// Secondary axis
|
|
// -------------------------
|
|
|
|
.-top-left- &, .-bottom-left- & {
|
|
left: $datepickerPointerOffset;
|
|
}
|
|
.-top-right- &, .-bottom-right- & {
|
|
right: $datepickerPointerOffset;
|
|
}
|
|
.-top-center- &, .-bottom-center- & {
|
|
left: calc(50% - #{$datepickerPointerSize} / 2);
|
|
}
|
|
|
|
.-left-top- &, .-right-top- & {
|
|
top: $datepickerPointerOffset;
|
|
}
|
|
.-left-bottom- &, .-right-bottom- & {
|
|
bottom: $datepickerPointerOffset;
|
|
}
|
|
.-left-center- &, .-right-center- & {
|
|
top: calc(50% - #{$datepickerPointerSize} / 2);
|
|
}
|
|
|
|
}
|
|
|
|
// Body
|
|
// -------------------------------------------------
|
|
|
|
.datepicker--body {
|
|
display: none;
|
|
|
|
&.active {
|
|
display: block !important;
|
|
}
|
|
}
|
|
|
|
/* -------------------------------------------------
|
|
Navigation
|
|
------------------------------------------------- */
|
|
|
|
.datepicker--nav {
|
|
color: $primary-color;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
font-weight: 600;
|
|
border-radius: 5px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid map_get($datepickerBorderColor, nav);
|
|
min-height: $datepickerNavigationHeight;
|
|
padding: $datepickerPadding;
|
|
|
|
.-only-timepicker- & {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.datepicker--nav-title,
|
|
.datepicker--nav-action {
|
|
display: flex;
|
|
cursor: pointer;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.datepicker--nav-action {
|
|
width:$datepickerDayCellSize;
|
|
border-radius: 5px;
|
|
user-select: none;
|
|
|
|
|
|
&.-disabled- {
|
|
visibility: hidden;
|
|
}
|
|
|
|
svg {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
path {
|
|
fill: none;
|
|
stroke: $white;
|
|
stroke-width: 2px;
|
|
}
|
|
}
|
|
|
|
.datepicker--nav-title {
|
|
border-radius: $datepickerBorderRadius;
|
|
padding: 0 8px;
|
|
|
|
i {
|
|
font-style: normal;
|
|
color: $primary-color;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
&:hover {
|
|
|
|
}
|
|
|
|
&.-disabled- {
|
|
cursor: default;
|
|
background: none;
|
|
}
|
|
}
|
|
|
|
// Buttons
|
|
// -------------------------------------------------
|
|
|
|
.datepicker--buttons {
|
|
display: flex;
|
|
padding: $datepickerPadding;
|
|
border-top: 1px solid map_get($datepickerBorderColor, nav);
|
|
}
|
|
|
|
.datepicker--button {
|
|
color: map_get($datepickerTextColor, currentDate);
|
|
cursor: pointer;
|
|
border-radius: $datepickerBorderRadius;
|
|
flex: 1;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 32px;
|
|
|
|
&:hover {
|
|
color: map_get($datepickerTextColor, common);
|
|
background: map_get($datepickerBG, hover);
|
|
}
|
|
} |