jingrow/air-datepicker
1
0
Fork 0
mirror of https://github.com/frappe/air-datepicker.git synced 2026-01-14 11:01:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/Grawl/air-datepicker into Grawl-master

Browse Source
This commit is contained in:
t1m0n 2016-07-02 22:16:15 +03:00
commit 0fdc65d3a9
5 changed files with 90 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/sass/_datepicker-config.scss
View File

@ -1,16 +1,16 @@
$dayCellSize: 32px; $datepickerDayCellSize: 32px !default;
$datepickerWidth: 250px; $datepickerWidth: 250px !default;
$datepickerMinBodyHeight: 170px; $datepickerMinBodyHeight: 170px !default;
$datepickerBorderRadius: 4px; $datepickerBorderRadius: 4px !default;
$datepickerPadding: 4px; $datepickerPadding: 4px !default;
$datepickerZIndex: 100; $datepickerZIndex: 100 !default;
$fontFamily: Tahoma; $datepickerFontFamily: Tahoma !default;
$fontSize: 14px; $datepickerFontSize: 14px !default;
$yearsPerRow: 4; $datepickerYearsPerRow: 4 !default;
$textColor: ( $datepickerTextColor: (
button: #5cc4ef, button: #5cc4ef,
otherMonth: #dedede, otherMonth: #dedede,
otherMonthInRange: #ccc, otherMonthInRange: #ccc,
@ -19,60 +19,60 @@ $textColor: (
common: #4a4a4a, common: #4a4a4a,
dayNames: #FF9A19, dayNames: #FF9A19,
navArrows: #9c9c9c navArrows: #9c9c9c
); ) !default;
$bg: ( $datepickerBG: (
selected: #5cc4ef, selected: #5cc4ef,
selectedHover: darken(#5cc4ef, 5), selectedHover: darken(#5cc4ef, 5),
inRange: rgba(#5cc4ef, .1), inRange: rgba(#5cc4ef, .1),
hover: #f0f0f0 hover: #f0f0f0
); ) !default;
$borderColor: ( $datepickerBorderColor: (
nav: #efefef, nav: #efefef,
inline: #d7d7d7, inline: #d7d7d7,
default: #dbdbdb default: #dbdbdb
); ) !default;
$navigationHeight: 32px; $datepickerNavigationHeight: 32px !default;
$navigationButtonsOffset: 2px; $datepickerNavigationButtonsOffset: 2px !default;
$pointerSize: 10px; $datepickerPointerSize: 10px !default;
$pointerOffset: 10px; $datepickerPointerOffset: 10px !default;
// Transitions // Transitions
$transitionSpeed: .3s; $datepickerTransitionSpeed: .3s !default;
$transitionEase: ease; $datepickerTransitionEase: ease !default;
$transitionOffset: 8px; $datepickerTransitionOffset: 8px !default;
// Objects // Objects
%otherMonth { %otherMonth {
color: map_get($textColor, otherMonth); color: map_get($datepickerTextColor, otherMonth);
&:hover { &:hover {
color: darken(map_get($textColor, otherMonth), 10); color: darken(map_get($datepickerTextColor, otherMonth), 10);
} }
&.-disabled- { &.-disabled- {
&.-focus- { &.-focus- {
color: map_get($textColor, otherMonth); color: map_get($datepickerTextColor, otherMonth);
} }
} }
&.-selected- { &.-selected- {
color: #fff; color: #fff;
background: lighten(map_get($bg, selected), 15); background: lighten(map_get($datepickerBG, selected), 15);
&.-focus- { &.-focus- {
background: lighten(map_get($bg, selected), 10); background: lighten(map_get($datepickerBG, selected), 10);
} }
} }
&.-in-range- { &.-in-range- {
background-color: map_get($bg, inRange); background-color: map_get($datepickerBG, inRange);
color: darken(map_get($textColor, otherMonth), 7); color: darken(map_get($datepickerTextColor, otherMonth), 7);
&.-focus- { &.-focus- {
background-color: rgba(map_get($bg, inRange), .2); background-color: rgba(map_get($datepickerBG, inRange), .2);
} }
} }

42
src/sass/cell.scss
View File

@ -17,62 +17,62 @@
position: relative; position: relative;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: $dayCellSize; height: $datepickerDayCellSize;
z-index: 1; z-index: 1;
&.-focus- { &.-focus- {
background: map_get($bg, hover); background: map_get($datepickerBG, hover);
} }
&.-current- { &.-current- {
color: map_get($textColor, currentDate); color: map_get($datepickerTextColor, currentDate);
&.-focus- { &.-focus- {
color: map_get($textColor, common); color: map_get($datepickerTextColor, common);
} }
&.-in-range- { &.-in-range- {
color: map_get($textColor, currentDate); color: map_get($datepickerTextColor, currentDate);
} }
} }
&.-in-range- { &.-in-range- {
background: map_get($bg, inRange); background: map_get($datepickerBG, inRange);
color: map_get($textColor, common); color: map_get($datepickerTextColor, common);
border-radius: 0; border-radius: 0;
&.-focus- { &.-focus- {
background-color: rgba(map_get($bg, inRange), .2); background-color: rgba(map_get($datepickerBG, inRange), .2);
} }
} }
&.-disabled- { &.-disabled- {
cursor: default; cursor: default;
color: map_get($textColor, disabled); color: map_get($datepickerTextColor, disabled);
&.-focus- { &.-focus- {
color: map_get($textColor, disabled); color: map_get($datepickerTextColor, disabled);
} }
&.-in-range- { &.-in-range- {
color: darken(map_get($textColor, disabled), 5); color: darken(map_get($datepickerTextColor, disabled), 5);
} }
&.-current- { &.-current- {
&.-focus- { &.-focus- {
color: map_get($textColor, disabled); color: map_get($datepickerTextColor, disabled);
} }
} }
} }
&.-range-from- { &.-range-from- {
border: 1px solid rgba(map_get($bg, selected), .5); border: 1px solid rgba(map_get($datepickerBG, selected), .5);
background-color: map_get($bg, inRange); background-color: map_get($datepickerBG, inRange);
border-radius: $datepickerBorderRadius 0 0 $datepickerBorderRadius; border-radius: $datepickerBorderRadius 0 0 $datepickerBorderRadius;
} }
&.-range-to- { &.-range-to- {
border: 1px solid rgba(map_get($bg, selected), .5); border: 1px solid rgba(map_get($datepickerBG, selected), .5);
background-color: map_get($bg, inRange); background-color: map_get($datepickerBG, inRange);
border-radius: 0 $datepickerBorderRadius $datepickerBorderRadius 0; border-radius: 0 $datepickerBorderRadius $datepickerBorderRadius 0;
} }
@ -84,15 +84,15 @@
&.-selected- { &.-selected- {
color: #fff; color: #fff;
border: none; border: none;
background: map_get($bg, selected); background: map_get($datepickerBG, selected);
&.-current- { &.-current- {
color: #fff; color: #fff;
background: map_get($bg, selected); background: map_get($datepickerBG, selected);
} }
&.-focus- { &.-focus- {
background: map_get($bg, selectedHover); background: map_get($datepickerBG, selectedHover);
} }
} }
@ -111,7 +111,7 @@
} }
.datepicker--day-name { .datepicker--day-name {
color: map_get($textColor, dayNames); color: map_get($datepickerTextColor, dayNames);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -164,7 +164,7 @@
// ------------------------- // -------------------------
.datepicker--cell-year { .datepicker--cell-year {
width: 100% / $yearsPerRow; width: 100% / $datepickerYearsPerRow;
height: 33.33%; height: 33.33%;
&.-other-decade- { &.-other-decade- {

44
src/sass/datepicker.scss
View File

@ -16,44 +16,44 @@
.datepicker { .datepicker {
background: #fff; 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); box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
border-radius: $datepickerBorderRadius; border-radius: $datepickerBorderRadius;
box-sizing: content-box; box-sizing: content-box;
font-family: $fontFamily, sans-serif; font-family: $datepickerFontFamily, sans-serif;
font-size: $fontSize; font-size: $datepickerFontSize;
color: map_get($textColor, common); color: map_get($datepickerTextColor, common);
width: $datepickerWidth; width: $datepickerWidth;
position: absolute; position: absolute;
left: -100000px; left: -100000px;
opacity: 0; 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; z-index: $datepickerZIndex;
&.-from-top- { &.-from-top- {
transform: translateY(-$transitionOffset); transform: translateY(-$datepickerTransitionOffset);
} }
&.-from-right- { &.-from-right- {
transform: translateX($transitionOffset); transform: translateX($datepickerTransitionOffset);
} }
&.-from-bottom- { &.-from-bottom- {
transform: translateY($transitionOffset); transform: translateY($datepickerTransitionOffset);
} }
&.-from-left- { &.-from-left- {
transform: translateX(-$transitionOffset); transform: translateX(-$datepickerTransitionOffset);
} }
&.active { &.active {
opacity: 1; opacity: 1;
transform: translate(0); 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-inline {
.datepicker { .datepicker {
border-color: map-get($borderColor, inline); border-color: map-get($datepickerBorderColor, inline);
box-shadow: none; box-shadow: none;
position: static; position: static;
left: auto; left: auto;
@ -74,15 +74,15 @@
// Pointer // Pointer
// ------------------------------------------------- // -------------------------------------------------
$pointerHalfSize: $pointerSize / 2 - 1; $pointerHalfSize: $datepickerPointerSize / 2 - 1;
.datepicker--pointer { .datepicker--pointer {
position: absolute; position: absolute;
background: #fff; background: #fff;
border-top: 1px solid map-get($borderColor, default); border-top: 1px solid map-get($datepickerBorderColor, default);
border-right: 1px solid map-get($borderColor, default); border-right: 1px solid map-get($datepickerBorderColor, default);
width: $pointerSize; width: $datepickerPointerSize;
height: $pointerSize; height: $datepickerPointerSize;
z-index: -1; z-index: -1;
// Main axis // Main axis
@ -112,23 +112,23 @@ $pointerHalfSize: $pointerSize / 2 - 1;
// ------------------------- // -------------------------
.-top-left- &, .-bottom-left- & { .-top-left- &, .-bottom-left- & {
left: $pointerOffset; left: $datepickerPointerOffset;
} }
.-top-right- &, .-bottom-right- & { .-top-right- &, .-bottom-right- & {
right: $pointerOffset; right: $datepickerPointerOffset;
} }
.-top-center- &, .-bottom-center- & { .-top-center- &, .-bottom-center- & {
left: calc(50% - #{$pointerSize} / 2); left: calc(50% - #{$datepickerPointerSize} / 2);
} }
.-left-top- &, .-right-top- & { .-left-top- &, .-right-top- & {
top: $pointerOffset; top: $datepickerPointerOffset;
} }
.-left-bottom- &, .-right-bottom- & { .-left-bottom- &, .-right-bottom- & {
bottom: $pointerOffset; bottom: $datepickerPointerOffset;
} }
.-left-center- &, .-right-center- & { .-left-center- &, .-right-center- & {
top: calc(50% - #{$pointerSize} / 2); top: calc(50% - #{$datepickerPointerSize} / 2);
} }
} }

22
src/sass/navigation.scss
View File

@ -7,8 +7,8 @@
.datepicker--nav { .datepicker--nav {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid map_get($borderColor, nav); border-bottom: 1px solid map_get($datepickerBorderColor, nav);
min-height: $navigationHeight; min-height: $datepickerNavigationHeight;
padding: $datepickerPadding; padding: $datepickerPadding;
} }
@ -21,12 +21,12 @@
} }
.datepicker--nav-action { .datepicker--nav-action {
width: $dayCellSize; width: $datepickerDayCellSize;
border-radius: $datepickerBorderRadius; border-radius: $datepickerBorderRadius;
user-select: none; user-select: none;
&:hover { &:hover {
background: map_get($bg, hover); background: map_get($datepickerBG, hover);
} }
&.-disabled- { &.-disabled- {
@ -40,7 +40,7 @@
path { path {
fill: none; fill: none;
stroke: map_get($textColor, navArrows); stroke: map_get($datepickerTextColor, navArrows);
stroke-width: 2px; stroke-width: 2px;
} }
} }
@ -51,12 +51,12 @@
i { i {
font-style: normal; font-style: normal;
color: map_get($textColor, navArrows); color: map_get($datepickerTextColor, navArrows);
margin-left: 5px; margin-left: 5px;
} }
&:hover { &:hover {
background: map_get($bg, hover); background: map_get($datepickerBG, hover);
} }
&.-disabled- { &.-disabled- {
@ -71,11 +71,11 @@
.datepicker--buttons { .datepicker--buttons {
display: flex; display: flex;
padding: $datepickerPadding; padding: $datepickerPadding;
border-top: 1px solid map_get($borderColor, nav); border-top: 1px solid map_get($datepickerBorderColor, nav);
} }
.datepicker--button { .datepicker--button {
color: map_get($textColor, currentDate); color: map_get($datepickerTextColor, currentDate);
cursor: pointer; cursor: pointer;
border-radius: $datepickerBorderRadius; border-radius: $datepickerBorderRadius;
flex: 1; flex: 1;
@ -85,7 +85,7 @@
height: 32px; height: 32px;
&:hover { &:hover {
color: map_get($textColor, common); color: map_get($datepickerTextColor, common);
background: map_get($bg, hover); background: map_get($datepickerBG, hover);
} }
} }

12
src/sass/timepicker.scss
View File

@ -58,7 +58,7 @@ $rangeThumbBg: #dedede;
} }
.datepicker--time { .datepicker--time {
border-top: 1px solid map_get($borderColor, nav); border-top: 1px solid map_get($datepickerBorderColor, nav);
display: flex; display: flex;
align-items: center; align-items: center;
@ -108,7 +108,7 @@ $rangeThumbBg: #dedede;
&:after { &:after {
content: ''; content: '';
background: map_get($bg, hover); background: map_get($datepickerBG, hover);
border-radius: $datepickerBorderRadius; border-radius: $datepickerBorderRadius;
position: absolute; position: absolute;
left: -2px; left: -2px;
@ -129,7 +129,7 @@ $rangeThumbBg: #dedede;
.datepicker--time-current-ampm { .datepicker--time-current-ampm {
text-transform: uppercase; text-transform: uppercase;
align-self: flex-end; align-self: flex-end;
color: map_get($textColor, navArrows); color: map_get($datepickerTextColor, navArrows);
margin-left: 6px; margin-left: 6px;
font-size: 11px; font-size: 11px;
margin-bottom: 1px; margin-bottom: 1px;
@ -173,8 +173,8 @@ $rangeThumbBg: #dedede;
outline: none; outline: none;
@include thumbSelector() { @include thumbSelector() {
background: map_get($bg, selected); background: map_get($datepickerBG, selected);
border-color: map_get($bg, selected); border-color: map_get($datepickerBG, selected);
} }
} }
@ -214,7 +214,7 @@ $rangeThumbBg: #dedede;
} }
.datepicker--time-icon { .datepicker--time-icon {
color: map_get($textColor, navArrows); color: map_get($datepickerTextColor, navArrows);
border: 1px solid; border: 1px solid;
border-radius: 50%; border-radius: 50%;
font-size: 16px; font-size: 16px;