vendor/assets/stylesheets/flatpickr/rtl/themes/dark.rtl.css in flatpickr-2.4.8.0 vs vendor/assets/stylesheets/flatpickr/rtl/themes/dark.rtl.css in flatpickr-2.4.9.0

- old
+ new

@@ -25,13 +25,15 @@ overflow: visible; max-height: 640px; } .flatpickr-calendar.open { display: inline-block; - animation: flatpickrFadeInDown 300ms cubic-bezier(0, 1, 0.5, 1); z-index: 99999; } +.flatpickr-calendar.animate.open { + animation: flatpickrFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); +} .flatpickr-calendar.inline { display: block; position: relative; top: 2px; } @@ -44,10 +46,19 @@ display: block; } .flatpickr-calendar.hasWeeks { width: auto; } +.flatpickr-calendar .hasWeeks .dayContainer, +.flatpickr-calendar .hasTime .dayContainer { + border-bottom: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} +.flatpickr-calendar .hasWeeks .dayContainer { + border-right: 0; +} .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time { height: 40px; border-top: 1px solid #3f4458; } .flatpickr-calendar.noCalendar.hasTime .flatpickr-time { @@ -95,10 +106,13 @@ border-top-color: #3f4458; } .flatpickr-calendar.arrowBottom:after { border-top-color: rgba(63,68,88,0.95); } +.flatpickr-calendar:focus { + outline: 0; +} .flatpickr-wrapper { position: relative; display: inline-block; } .flatpickr-month { @@ -108,19 +122,21 @@ height: 28px; line-height: 24px; text-align: center; position: relative; user-select: none; + overflow: hidden; } .flatpickr-prev-month, .flatpickr-next-month { text-decoration: none; cursor: pointer; position: absolute; - top: 10px; - height: 16px; + top: 0px; + height: 28px; line-height: 16px; + padding: 10px calc(3.57% - 1.5px); } .flatpickr-prev-month i, .flatpickr-next-month i { position: relative; } @@ -128,11 +144,11 @@ .flatpickr-next-month.flatpickr-prev-month { /* /*rtl:begin:ignore*/ /* */ - right: calc(3.57% - 1.5px); + right: 0; /* /*rtl:end:ignore*/ /* */ } @@ -144,11 +160,11 @@ .flatpickr-next-month.flatpickr-next-month { /* /*rtl:begin:ignore*/ /* */ - left: calc(3.57% - 1.5px); + left: 0; /* /*rtl:end:ignore*/ /* */ } @@ -247,11 +263,28 @@ width: 75%; right: 12.5%; top: 5px; display: inline-block; text-align: center; + transform: translate(0px, 0px); } +.flatpickr-current-month.slideLeft { + transform: translate(100%, 0px); + animation: fadeOut 400ms ease, slideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1); +} +.flatpickr-current-month.slideLeftNew { + transform: translate(-100%, 0px); + animation: fadeIn 400ms ease, slideLeftNew 400ms cubic-bezier(0.23, 1, 0.32, 1); +} +.flatpickr-current-month.slideRight { + transform: translate(-100%, 0px); + animation: fadeOut 400ms ease, slideRight 400ms cubic-bezier(0.23, 1, 0.32, 1); +} +.flatpickr-current-month.slideRightNew { + transform: translate(0, 0); + animation: fadeIn 400ms ease, slideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1); +} .flatpickr-current-month span.cur-month { font-family: inherit; font-weight: 700; color: inherit; display: inline-block; @@ -301,29 +334,76 @@ } .flatpickr-weekdays { background: transparent; text-align: center; overflow: hidden; + width: 315px; + display: flex; + align-items: center; + height: 28px; } -.flatpickr-days, +span.flatpickr-weekday { + cursor: default; + font-size: 90%; + color: rgba(255,255,255,0.54); + line-height: 1; + margin: 0; + background: transparent; + text-align: center; + display: block; + flex: 1; + font-weight: bolder; + margin: 0; +} +.dayContainer, .flatpickr-weeks { padding: 1px 0 0 0; } .flatpickr-days { + position: relative; + overflow: hidden; + display: flex; + width: 315px; +} +.flatpickr-days:focus { + outline: 0; +} +.dayContainer { padding: 0; outline: 0; text-align: right; width: 315px; + min-width: 315px; + max-width: 315px; box-sizing: border-box; display: inline-block; display: -ms-flexbox; display: flex; flex-wrap: wrap; -ms-flex-wrap: wrap; -ms-flex-pack: justify; justify-content: space-around; + transform: translate(0px, 0px); + opacity: 1; } +.flatpickr-calendar.animate .dayContainer.slideLeft { + animation: fadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1), slideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1); +} +.flatpickr-calendar.animate .dayContainer.slideLeft, +.flatpickr-calendar.animate .dayContainer.slideLeftNew { + transform: translate(100%, 0px); +} +.flatpickr-calendar.animate .dayContainer.slideLeftNew { + animation: fadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1), slideLeft 400ms cubic-bezier(0.23, 1, 0.32, 1); +} +.flatpickr-calendar.animate .dayContainer.slideRight { + animation: fadeOut 400ms cubic-bezier(0.23, 1, 0.32, 1), slideRight 400ms cubic-bezier(0.23, 1, 0.32, 1); + transform: translate(-100%, 0px); +} +.flatpickr-calendar.animate .dayContainer.slideRightNew { + animation: fadeIn 400ms cubic-bezier(0.23, 1, 0.32, 1), slideRightNew 400ms cubic-bezier(0.23, 1, 0.32, 1); +} .flatpickr-day { background: none; border: 1px solid transparent; border-radius: 150px; box-sizing: border-box; @@ -363,15 +443,18 @@ } .flatpickr-day.today:hover, .flatpickr-day.today:focus { border-color: #eee; background: #eee; - color: #23283c; + color: #3f4458; } .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, +.flatpickr-day.selected.inRange, +.flatpickr-day.startRange.inRange, +.flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, @@ -380,13 +463,14 @@ .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay { - background: #2f87ff; + background: #80cbc4; + box-shadow: none; color: #fff; - border-color: #2f87ff; + border-color: #80cbc4; } .flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange, .flatpickr-day.endRange.startRange { border-radius: 0 50px 50px 0; @@ -394,10 +478,15 @@ .flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange, .flatpickr-day.endRange.endRange { border-radius: 50px 0 0 50px; } +.flatpickr-day.selected.startRange + .endRange, +.flatpickr-day.startRange.startRange + .endRange, +.flatpickr-day.endRange.startRange + .endRange { + box-shadow: 10px 0 0 #80cbc4; +} .flatpickr-day.selected.startRange.endRange, .flatpickr-day.startRange.startRange.endRange, .flatpickr-day.endRange.startRange.endRange { border-radius: 50px; } @@ -419,26 +508,10 @@ color: rgba(255,255,255,0.3); background: transparent; border-color: transparent; cursor: default; } -span.flatpickr-weekday { - cursor: default; - font-size: 90%; - color: rgba(255,255,255,0.54); - height: 27.333333333333332px; - line-height: 24px; - margin: 0; - background: transparent; - text-align: center; - display: block; - float: right; - width: 14.28%; - font-weight: bold; - margin: 0; - padding-top: 3.333333333333333px; -} .rangeMode .flatpickr-day { margin-top: 1px; } .flatpickr-weekwrapper { display: inline-block; @@ -475,11 +548,10 @@ height: 0; line-height: 40px; max-height: 40px; box-sizing: border-box; overflow: hidden; - transition: height 0.33s cubic-bezier(0, 1, 0.5, 1); display: flex; } .flatpickr-time:after { content: ""; display: table; @@ -550,19 +622,10 @@ } .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time .flatpickr-am-pm:focus { background: rgba(109,118,151,0.95); } -.hasWeeks .flatpickr-days, -.hasTime .flatpickr-days { - border-bottom: 0; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; -} -.hasWeeks .flatpickr-days { - border-right: 0; -} @media all and (-ms-high-contrast: none) { .flatpickr-month { padding: 0; } .flatpickr-month svg { @@ -577,38 +640,230 @@ opacity: 0; transform: translate3d(0, -20px, 0); } to { opacity: 1; - transform: none; + transform: translate3d(0, 0, 0); } } @-webkit-keyframes flatpickrFadeInDown { from { opacity: 0; transform: translate3d(0, -20px, 0); } to { opacity: 1; - transform: none; + transform: translate3d(0, 0, 0); } } @-o-keyframes flatpickrFadeInDown { from { opacity: 0; transform: translate3d(0, -20px, 0); } to { opacity: 1; - transform: none; + transform: translate3d(0, 0, 0); } } @keyframes flatpickrFadeInDown { from { opacity: 0; transform: translate3d(0, -20px, 0); } to { opacity: 1; - transform: none; + transform: translate3d(0, 0, 0); + } +} +@-moz-keyframes slideLeft { + from { + transform: translate(0px, 0px); + } + to { + transform: translate(100%, 0px); + } +} +@-webkit-keyframes slideLeft { + from { + transform: translate(0px, 0px); + } + to { + transform: translate(100%, 0px); + } +} +@-o-keyframes slideLeft { + from { + transform: translate(0px, 0px); + } + to { + transform: translate(100%, 0px); + } +} +@keyframes slideLeft { + from { + transform: translate(0px, 0px); + } + to { + transform: translate(100%, 0px); + } +} +@-moz-keyframes slideLeftNew { + from { + transform: translate(-100%, 0px); + } + to { + transform: translate(0px, 0px); + } +} +@-webkit-keyframes slideLeftNew { + from { + transform: translate(-100%, 0px); + } + to { + transform: translate(0px, 0px); + } +} +@-o-keyframes slideLeftNew { + from { + transform: translate(-100%, 0px); + } + to { + transform: translate(0px, 0px); + } +} +@keyframes slideLeftNew { + from { + transform: translate(-100%, 0px); + } + to { + transform: translate(0px, 0px); + } +} +@-moz-keyframes slideRight { + from { + transform: translate(0, 0); + } + to { + transform: translate(-100%, 0px); + } +} +@-webkit-keyframes slideRight { + from { + transform: translate(0, 0); + } + to { + transform: translate(-100%, 0px); + } +} +@-o-keyframes slideRight { + from { + transform: translate(0, 0); + } + to { + transform: translate(-100%, 0px); + } +} +@keyframes slideRight { + from { + transform: translate(0, 0); + } + to { + transform: translate(-100%, 0px); + } +} +@-moz-keyframes slideRightNew { + from { + transform: translate(100%, 0); + } + to { + transform: translate(0, 0); + } +} +@-webkit-keyframes slideRightNew { + from { + transform: translate(100%, 0); + } + to { + transform: translate(0, 0); + } +} +@-o-keyframes slideRightNew { + from { + transform: translate(100%, 0); + } + to { + transform: translate(0, 0); + } +} +@keyframes slideRightNew { + from { + transform: translate(100%, 0); + } + to { + transform: translate(0, 0); + } +} +@-moz-keyframes fadeOut { + from { + opacity: 1; + } + to { + opacity: 0; + } +} +@-webkit-keyframes fadeOut { + from { + opacity: 1; + } + to { + opacity: 0; + } +} +@-o-keyframes fadeOut { + from { + opacity: 1; + } + to { + opacity: 0; + } +} +@keyframes fadeOut { + from { + opacity: 1; + } + to { + opacity: 0; + } +} +@-moz-keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@-webkit-keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@-o-keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; } }