mirror of
https://github.com/frappe/air-datepicker.git
synced 2026-01-14 11:01:22 +08:00
allow Sass customizing
This commit is contained in:
Даниил Пронин
parent
d32cf743b3
commit
948043f48f
@ -1,16 +1,16 @@
|
||||
$dayCellSize: 32px;
|
||||
$datepickerWidth: 250px;
|
||||
$datepickerMinBodyHeight: 170px;
|
||||
$datepickerBorderRadius: 4px;
|
||||
$datepickerPadding: 4px;
|
||||
$datepickerZIndex: 100;
|
||||
$datepickerDayCellSize: 32px !default;
|
||||
$datepickerWidth: 250px !default;
|
||||
$datepickerMinBodyHeight: 170px !default;
|
||||
$datepickerBorderRadius: 4px !default;
|
||||
$datepickerPadding: 4px !default;
|
||||
$datepickerZIndex: 100 !default;
|
||||
|
||||
$fontFamily: Tahoma;
|
||||
$fontSize: 14px;
|
||||
$datepickerFontFamily: Tahoma !default;
|
||||
$datepickerFontSize: 14px !default;
|
||||
|
||||
$yearsPerRow: 4;
|
||||
$datepickerYearsPerRow: 4 !default;
|
||||
|
||||
$textColor: (
|
||||
$datepickerTextColor: (
|
||||
button: #5cc4ef,
|
||||
otherMonth: #dedede,
|
||||
otherMonthInRange: #ccc,
|
||||
@ -19,60 +19,60 @@ $textColor: (
|
||||
common: #4a4a4a,
|
||||
dayNames: #FF9A19,
|
||||
navArrows: #9c9c9c
|
||||
);
|
||||
) !default;
|
||||
|
||||
$bg: (
|
||||
$datepickerBG: (
|
||||
selected: #5cc4ef,
|
||||
selectedHover: darken(#5cc4ef, 5),
|
||||
inRange: rgba(#5cc4ef, .1),
|
||||
hover: #f0f0f0
|
||||
);
|
||||
) !default;
|
||||
|
||||
$borderColor: (
|
||||
$datepickerBorderColor: (
|
||||
nav: #efefef,
|
||||
inline: #d7d7d7,
|
||||
default: #dbdbdb
|
||||
);
|
||||
) !default;
|
||||
|
||||
$navigationHeight: 32px;
|
||||
$navigationButtonsOffset: 2px;
|
||||
$datepickerNavigationHeight: 32px !default;
|
||||
$datepickerNavigationButtonsOffset: 2px !default;
|
||||
|
||||
$pointerSize: 10px;
|
||||
$pointerOffset: 10px;
|
||||
$datepickerPointerSize: 10px !default;
|
||||
$datepickerPointerOffset: 10px !default;
|
||||
|
||||
// Transitions
|
||||
$transitionSpeed: .3s;
|
||||
$transitionEase: ease;
|
||||
$transitionOffset: 8px;
|
||||
$datepickerTransitionSpeed: .3s !default;
|
||||
$datepickerTransitionEase: ease !default;
|
||||
$datepickerTransitionOffset: 8px !default;
|
||||
|
||||
// Objects
|
||||
%otherMonth {
|
||||
color: map_get($textColor, otherMonth);
|
||||
color: map_get($datepickerTextColor, otherMonth);
|
||||
|
||||
&:hover {
|
||||
color: darken(map_get($textColor, otherMonth), 10);
|
||||
color: darken(map_get($datepickerTextColor, otherMonth), 10);
|
||||
}
|
||||
|
||||
&.-disabled- {
|
||||
&.-focus- {
|
||||
color: map_get($textColor, otherMonth);
|
||||
color: map_get($datepickerTextColor, otherMonth);
|
||||
}
|
||||
}
|
||||
|
||||
&.-selected- {
|
||||
color: #fff;
|
||||
background: lighten(map_get($bg, selected), 15);
|
||||
background: lighten(map_get($datepickerBG, selected), 15);
|
||||
&.-focus- {
|
||||
background: lighten(map_get($bg, selected), 10);
|
||||
background: lighten(map_get($datepickerBG, selected), 10);
|
||||
}
|
||||
}
|
||||
|
||||
&.-in-range- {
|
||||
background-color: map_get($bg, inRange);
|
||||
color: darken(map_get($textColor, otherMonth), 7);
|
||||
background-color: map_get($datepickerBG, inRange);
|
||||
color: darken(map_get($datepickerTextColor, otherMonth), 7);
|
||||
|
||||
&.-focus- {
|
||||
background-color: rgba(map_get($bg, inRange), .2);
|
||||
background-color: rgba(map_get($datepickerBG, inRange), .2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -17,62 +17,62 @@
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: $dayCellSize;
|
||||
height: $datepickerDayCellSize;
|
||||
z-index: 1;
|
||||
|
||||
&.-focus- {
|
||||
background: map_get($bg, hover);
|
||||
background: map_get($datepickerBG, hover);
|
||||
}
|
||||
|
||||
&.-current- {
|
||||
color: map_get($textColor, currentDate);
|
||||
color: map_get($datepickerTextColor, currentDate);
|
||||
|
||||
&.-focus- {
|
||||
color: map_get($textColor, common);
|
||||
color: map_get($datepickerTextColor, common);
|
||||
}
|
||||
|
||||
&.-in-range- {
|
||||
color: map_get($textColor, currentDate);
|
||||
color: map_get($datepickerTextColor, currentDate);
|
||||
}
|
||||
}
|
||||
|
||||
&.-in-range- {
|
||||
background: map_get($bg, inRange);
|
||||
color: map_get($textColor, common);
|
||||
background: map_get($datepickerBG, inRange);
|
||||
color: map_get($datepickerTextColor, common);
|
||||
border-radius: 0;
|
||||
|
||||
&.-focus- {
|
||||
background-color: rgba(map_get($bg, inRange), .2);
|
||||
background-color: rgba(map_get($datepickerBG, inRange), .2);
|
||||
}
|
||||
}
|
||||
|
||||
&.-disabled- {
|
||||
cursor: default;
|
||||
color: map_get($textColor, disabled);
|
||||
color: map_get($datepickerTextColor, disabled);
|
||||
|
||||
&.-focus- {
|
||||
color: map_get($textColor, disabled);
|
||||
color: map_get($datepickerTextColor, disabled);
|
||||
}
|
||||
|
||||
&.-in-range- {
|
||||
color: darken(map_get($textColor, disabled), 5);
|
||||
color: darken(map_get($datepickerTextColor, disabled), 5);
|
||||
}
|
||||
|
||||
&.-current- {
|
||||
&.-focus- {
|
||||
color: map_get($textColor, disabled);
|
||||
color: map_get($datepickerTextColor, disabled);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.-range-from- {
|
||||
border: 1px solid rgba(map_get($bg, selected), .5);
|
||||
background-color: map_get($bg, inRange);
|
||||
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($bg, selected), .5);
|
||||
background-color: map_get($bg, inRange);
|
||||
border: 1px solid rgba(map_get($datepickerBG, selected), .5);
|
||||
background-color: map_get($datepickerBG, inRange);
|
||||
border-radius: 0 $datepickerBorderRadius $datepickerBorderRadius 0;
|
||||
}
|
||||
|
||||
@ -84,15 +84,15 @@
|
||||
&.-selected- {
|
||||
color: #fff;
|
||||
border: none;
|
||||
background: map_get($bg, selected);
|
||||
background: map_get($datepickerBG, selected);
|
||||
|
||||
&.-current- {
|
||||
color: #fff;
|
||||
background: map_get($bg, selected);
|
||||
background: map_get($datepickerBG, selected);
|
||||
}
|
||||
|
||||
&.-focus- {
|
||||
background: map_get($bg, selectedHover);
|
||||
background: map_get($datepickerBG, selectedHover);
|
||||
}
|
||||
}
|
||||
|
||||
@ -111,7 +111,7 @@
|
||||
}
|
||||
|
||||
.datepicker--day-name {
|
||||
color: map_get($textColor, dayNames);
|
||||
color: map_get($datepickerTextColor, dayNames);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -164,7 +164,7 @@
|
||||
// -------------------------
|
||||
|
||||
.datepicker--cell-year {
|
||||
width: 100% / $yearsPerRow;
|
||||
width: 100% / $datepickerYearsPerRow;
|
||||
height: 33.33%;
|
||||
|
||||
&.-other-decade- {
|
||||
|
||||
@ -16,44 +16,44 @@
|
||||
|
||||
.datepicker {
|
||||
background: #fff;
|
||||
border: 1px solid map_get($borderColor, default);
|
||||
border: 1px solid map_get($datepickerBorderColor, default);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
|
||||
border-radius: $datepickerBorderRadius;
|
||||
box-sizing: content-box;
|
||||
font-family: $fontFamily, sans-serif;
|
||||
font-size: $fontSize;
|
||||
color: map_get($textColor, common);
|
||||
font-family: $datepickerFontFamily, sans-serif;
|
||||
font-size: $datepickerFontSize;
|
||||
color: map_get($datepickerTextColor, common);
|
||||
width: $datepickerWidth;
|
||||
position: absolute;
|
||||
left: -100000px;
|
||||
opacity: 0;
|
||||
transition: opacity $transitionSpeed $transitionEase, transform $transitionSpeed $transitionEase, left 0s $transitionSpeed;
|
||||
transition: opacity $datepickerTransitionSpeed $datepickerTransitionEase, transform $datepickerTransitionSpeed $datepickerTransitionEase, left 0s $datepickerTransitionSpeed;
|
||||
z-index: $datepickerZIndex;
|
||||
|
||||
&.-from-top- {
|
||||
transform: translateY(-$transitionOffset);
|
||||
transform: translateY(-$datepickerTransitionOffset);
|
||||
}
|
||||
&.-from-right- {
|
||||
transform: translateX($transitionOffset);
|
||||
transform: translateX($datepickerTransitionOffset);
|
||||
}
|
||||
&.-from-bottom- {
|
||||
transform: translateY($transitionOffset);
|
||||
transform: translateY($datepickerTransitionOffset);
|
||||
}
|
||||
&.-from-left- {
|
||||
transform: translateX(-$transitionOffset);
|
||||
transform: translateX(-$datepickerTransitionOffset);
|
||||
}
|
||||
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
transform: translate(0);
|
||||
transition: opacity $transitionSpeed $transitionEase, transform $transitionSpeed $transitionEase, left 0s 0s;
|
||||
transition: opacity $datepickerTransitionSpeed $datepickerTransitionEase, transform $datepickerTransitionSpeed $datepickerTransitionEase, left 0s 0s;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-inline {
|
||||
.datepicker {
|
||||
border-color: map-get($borderColor, inline);
|
||||
border-color: map-get($datepickerBorderColor, inline);
|
||||
box-shadow: none;
|
||||
position: static;
|
||||
left: auto;
|
||||
@ -74,15 +74,15 @@
|
||||
|
||||
// Pointer
|
||||
// -------------------------------------------------
|
||||
$pointerHalfSize: $pointerSize / 2 - 1;
|
||||
$pointerHalfSize: $datepickerPointerSize / 2 - 1;
|
||||
|
||||
.datepicker--pointer {
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
border-top: 1px solid map-get($borderColor, default);
|
||||
border-right: 1px solid map-get($borderColor, default);
|
||||
width: $pointerSize;
|
||||
height: $pointerSize;
|
||||
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
|
||||
@ -112,23 +112,23 @@ $pointerHalfSize: $pointerSize / 2 - 1;
|
||||
// -------------------------
|
||||
|
||||
.-top-left- &, .-bottom-left- & {
|
||||
left: $pointerOffset;
|
||||
left: $datepickerPointerOffset;
|
||||
}
|
||||
.-top-right- &, .-bottom-right- & {
|
||||
right: $pointerOffset;
|
||||
right: $datepickerPointerOffset;
|
||||
}
|
||||
.-top-center- &, .-bottom-center- & {
|
||||
left: calc(50% - #{$pointerSize} / 2);
|
||||
left: calc(50% - #{$datepickerPointerSize} / 2);
|
||||
}
|
||||
|
||||
.-left-top- &, .-right-top- & {
|
||||
top: $pointerOffset;
|
||||
top: $datepickerPointerOffset;
|
||||
}
|
||||
.-left-bottom- &, .-right-bottom- & {
|
||||
bottom: $pointerOffset;
|
||||
bottom: $datepickerPointerOffset;
|
||||
}
|
||||
.-left-center- &, .-right-center- & {
|
||||
top: calc(50% - #{$pointerSize} / 2);
|
||||
top: calc(50% - #{$datepickerPointerSize} / 2);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -7,8 +7,8 @@
|
||||
.datepicker--nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid map_get($borderColor, nav);
|
||||
min-height: $navigationHeight;
|
||||
border-bottom: 1px solid map_get($datepickerBorderColor, nav);
|
||||
min-height: $datepickerNavigationHeight;
|
||||
padding: $datepickerPadding;
|
||||
}
|
||||
|
||||
@ -21,12 +21,12 @@
|
||||
}
|
||||
|
||||
.datepicker--nav-action {
|
||||
width: $dayCellSize;
|
||||
width: $datepickerDayCellSize;
|
||||
border-radius: $datepickerBorderRadius;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
background: map_get($bg, hover);
|
||||
background: map_get($datepickerBG, hover);
|
||||
}
|
||||
|
||||
&.-disabled- {
|
||||
@ -40,7 +40,7 @@
|
||||
|
||||
path {
|
||||
fill: none;
|
||||
stroke: map_get($textColor, navArrows);
|
||||
stroke: map_get($datepickerTextColor, navArrows);
|
||||
stroke-width: 2px;
|
||||
}
|
||||
}
|
||||
@ -51,12 +51,12 @@
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
color: map_get($textColor, navArrows);
|
||||
color: map_get($datepickerTextColor, navArrows);
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: map_get($bg, hover);
|
||||
background: map_get($datepickerBG, hover);
|
||||
}
|
||||
|
||||
&.-disabled- {
|
||||
@ -71,11 +71,11 @@
|
||||
.datepicker--buttons {
|
||||
display: flex;
|
||||
padding: $datepickerPadding;
|
||||
border-top: 1px solid map_get($borderColor, nav);
|
||||
border-top: 1px solid map_get($datepickerBorderColor, nav);
|
||||
}
|
||||
|
||||
.datepicker--button {
|
||||
color: map_get($textColor, currentDate);
|
||||
color: map_get($datepickerTextColor, currentDate);
|
||||
cursor: pointer;
|
||||
border-radius: $datepickerBorderRadius;
|
||||
flex: 1;
|
||||
@ -85,7 +85,7 @@
|
||||
height: 32px;
|
||||
|
||||
&:hover {
|
||||
color: map_get($textColor, common);
|
||||
background: map_get($bg, hover);
|
||||
color: map_get($datepickerTextColor, common);
|
||||
background: map_get($datepickerBG, hover);
|
||||
}
|
||||
}
|
||||
@ -58,7 +58,7 @@ $rangeThumbBg: #dedede;
|
||||
}
|
||||
|
||||
.datepicker--time {
|
||||
border-top: 1px solid map_get($borderColor, nav);
|
||||
border-top: 1px solid map_get($datepickerBorderColor, nav);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -108,7 +108,7 @@ $rangeThumbBg: #dedede;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
background: map_get($bg, hover);
|
||||
background: map_get($datepickerBG, hover);
|
||||
border-radius: $datepickerBorderRadius;
|
||||
position: absolute;
|
||||
left: -2px;
|
||||
@ -129,7 +129,7 @@ $rangeThumbBg: #dedede;
|
||||
.datepicker--time-current-ampm {
|
||||
text-transform: uppercase;
|
||||
align-self: flex-end;
|
||||
color: map_get($textColor, navArrows);
|
||||
color: map_get($datepickerTextColor, navArrows);
|
||||
margin-left: 6px;
|
||||
font-size: 11px;
|
||||
margin-bottom: 1px;
|
||||
@ -173,8 +173,8 @@ $rangeThumbBg: #dedede;
|
||||
outline: none;
|
||||
|
||||
@include thumbSelector() {
|
||||
background: map_get($bg, selected);
|
||||
border-color: map_get($bg, selected);
|
||||
background: map_get($datepickerBG, selected);
|
||||
border-color: map_get($datepickerBG, selected);
|
||||
}
|
||||
}
|
||||
|
||||
@ -214,7 +214,7 @@ $rangeThumbBg: #dedede;
|
||||
}
|
||||
|
||||
.datepicker--time-icon {
|
||||
color: map_get($textColor, navArrows);
|
||||
color: map_get($datepickerTextColor, navArrows);
|
||||
border: 1px solid;
|
||||
border-radius: 50%;
|
||||
font-size: 16px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user