LightcordApi DateInput and DateRange
This commit is contained in:
Jean Ouina
parent
5c05c3778c
commit
85e4a7936a
24872
LightcordApi/js/main.js
24872
LightcordApi/js/main.js
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,5 @@
|
|||
/*!
|
||||
Copyright (c) 2017 Jed Watson.
|
||||
Licensed under the MIT License (MIT), see
|
||||
http://jedwatson.github.io/classnames
|
||||
*/
|
||||
|
|
@ -19,10 +19,15 @@
|
|||
"@babel/preset-react": "^7.0.0",
|
||||
"@babel/register": "^7.0.0",
|
||||
"@types/bandagedbd__bdapi": "^0.2.2",
|
||||
"@types/moment": "^2.13.0",
|
||||
"@types/react": "^16.9.36",
|
||||
"@types/react-datepicker": "^3.1.1",
|
||||
"@types/react-dom": "^16.9.8",
|
||||
"@types/uuid": "^8.0.0",
|
||||
"babel-loader": "^8.0.6",
|
||||
"date-fns": "^2.15.0",
|
||||
"emotion": "^10.0.27",
|
||||
"react-datepicker": "^3.1.3",
|
||||
"terser-webpack-plugin": "^3.0.6",
|
||||
"ts-loader": "^7.0.5",
|
||||
"typedoc": "^0.17.8",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
import { ReactDOMSelector } from "./selectors"
|
||||
|
||||
// bait typescript into thinking this is not reactDOM so no circular dependency.
|
||||
window.ReactDOM = (window["Reac"+"tDOM"] || // If in Lightcord
|
||||
(()=>{ // If in Standard BetterDiscord
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
import { ReactSelector } from "./selectors";
|
||||
|
||||
window.React = (window.React || // If in Lightcord
|
||||
(()=>{ // If in Standard BetterDiscord
|
||||
try{
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
export const ReactSelector = mod => !["Component", "PureComponent", "Children", "createElement", "cloneElement"].find(k => !mod[k])
|
||||
export const ReactDOMSelector = mod => mod.findDOMNode
|
||||
|
|
@ -30,8 +30,8 @@ export default cloneNullProto({
|
|||
TextInput: createProxyErrorCatcherClass(TextInput),
|
||||
Dropdown: createProxyErrorCatcherClass(Dropdown),
|
||||
ColorPicker: createProxyErrorCatcherClass(ColorPicker),
|
||||
//DateRange: createProxyErrorCatcherClass(DateRange),
|
||||
//DateInput: createProxyErrorCatcherClass(DateInput)
|
||||
DateRange: createProxyErrorCatcherClass(DateRange),
|
||||
DateInput: createProxyErrorCatcherClass(DateInput)
|
||||
}),
|
||||
general: cloneNullProto({
|
||||
Title: createProxyErrorCatcherClass(Title),
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
import WebpackLoader from "../../modules/WebpackLoader"
|
||||
import { ReactNode, CSSProperties } from "react"
|
||||
import { ReactNode, CSSProperties, MouseEventHandler, MouseEvent } from "react"
|
||||
import NOOP from "../../modules/noop"
|
||||
|
||||
let ButtonModules
|
||||
|
||||
type ButtonProps = {
|
||||
children?: ReactNode,
|
||||
onClick?: () => void,
|
||||
onClick?: (ev: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => void,
|
||||
color?: ButtonColor,
|
||||
wrapper?: boolean,
|
||||
look?: ButtonLook,
|
||||
|
|
@ -14,7 +14,9 @@ type ButtonProps = {
|
|||
hoverColor?: ButtonHovers,
|
||||
disabled?: boolean,
|
||||
style?: CSSProperties,
|
||||
onRightClick?: () => void
|
||||
onRightClick?: () => void,
|
||||
className?: string,
|
||||
onMouseDown?: (ev: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>) => void
|
||||
}
|
||||
export default class Button extends React.Component<ButtonProps, {hover: boolean}> {
|
||||
constructor(props:ButtonProps){
|
||||
|
|
@ -58,6 +60,9 @@ export default class Button extends React.Component<ButtonProps, {hover: boolean
|
|||
if("onClick" in this.props){
|
||||
props.onClick = this.props.onClick
|
||||
}
|
||||
if("onMouseDown" in this.props){
|
||||
props.onMouseDown = this.props.onMouseDown
|
||||
}
|
||||
if("wrapper" in this.props){
|
||||
props.wrapper = !!this.props.wrapper
|
||||
}
|
||||
|
|
@ -129,21 +134,28 @@ export default class Button extends React.Component<ButtonProps, {hover: boolean
|
|||
let hoverColor = props.hoverColor ? colorsModule.ButtonHovers[props.hoverColor.toUpperCase()] || "" : ""
|
||||
if(hoverColor)hoverColor = " " + hoverColor
|
||||
|
||||
props.onClick = typeof props.onClick === "function" ? props.onClick : () => {}
|
||||
props.onClick = typeof props.onClick === "function" ? props.onClick : NOOP
|
||||
if(typeof props.wrapper !== "boolean")props.wrapper = true
|
||||
|
||||
props.onMouseDown = typeof props.onMouseDown === "function" ? props.onMouseDown : NOOP
|
||||
|
||||
let hover = this.state.hover ? euhModule1.hasHover : ""
|
||||
if(hover)hover = " " + hover
|
||||
|
||||
let classListButton = `${flexModule.flexChild} ${euhModule1.button} ${colorsModule.ButtonLooks[props.look.toUpperCase()]} ${colorsModule.ButtonColors[props.color.toUpperCase()]}${buttonSize}${hoverColor}${hover} ${euhModule1.grow}`.split(" ")
|
||||
if(typeof this.props.className === "string" && this.props.className){
|
||||
classListButton = this.props.className.split(" ").concat(classListButton)
|
||||
}
|
||||
let button = <button type="button"
|
||||
ref="button" className={`${flexModule.flexChild} ${euhModule1.button} ${colorsModule.ButtonLooks[props.look.toUpperCase()]} ${colorsModule.ButtonColors[props.color.toUpperCase()]}${buttonSize}${hoverColor}${hover} ${euhModule1.grow}`}
|
||||
style={{flex: "0 1 auto", ...props.style}} onClick={() => props.onClick()} onMouseEnter={(ev) => {
|
||||
ref="button" className={classListButton.join(" ")}
|
||||
style={{flex: "0 1 auto", ...props.style}} onClick={props.onClick} onMouseEnter={(ev) => {
|
||||
if(!hoverColor)return
|
||||
this.setState({hover: true})
|
||||
}} onMouseLeave={(ev) => {
|
||||
if(!hoverColor)return
|
||||
this.setState({hover: false})
|
||||
}} disabled={props.disabled} onContextMenu={() => props.onRightClick()}>
|
||||
}} disabled={props.disabled} onContextMenu={() => props.onRightClick()}
|
||||
onMouseDown={props.onMouseDown}>
|
||||
<div className={euhModule1.contents}>{props.children}</div>
|
||||
</button>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,11 @@
|
|||
|
||||
import * as React from "react"
|
||||
import { DateConstants } from "./DateRange"
|
||||
import WebpackLoader from "../../modules/WebpackLoader"
|
||||
import { getInternalTextInput } from "./TextInput"
|
||||
import Button from "./Button"
|
||||
import ReactDOM = require("react-dom")
|
||||
import * as DatePicker from "react-datepicker";
|
||||
|
||||
export type DateInputProps = {
|
||||
className?: string,
|
||||
|
|
@ -11,17 +16,33 @@ export type DateInputProps = {
|
|||
isModalInput?: boolean,
|
||||
maxDate?: Date,
|
||||
minDate?: Date,
|
||||
onChange?: () => void,
|
||||
onChange?: (value:Date, name:string) => void,
|
||||
selectsStart?: boolean,
|
||||
showMonthYearPicker?: boolean,
|
||||
startDate?: Date,
|
||||
endDate?: Date
|
||||
style?: React.CSSProperties
|
||||
style?: React.CSSProperties,
|
||||
name: string,
|
||||
selectsEnd?: boolean
|
||||
}
|
||||
export default class DateInput extends React.Component<DateInputProps> {
|
||||
let _datefns
|
||||
export function getDateFNS():typeof import("date-fns"){
|
||||
return _datefns || (_datefns = require("date-fns"))
|
||||
}
|
||||
export function getEmotion():typeof import("emotion"){
|
||||
return window["__SECRET_EMOTION__"]
|
||||
}
|
||||
let DateInputModules
|
||||
export default class DateInput extends React.Component<DateInputProps, {
|
||||
inputResetKey: number,
|
||||
isCalendarPickerOpen: boolean,
|
||||
calendarRight: number,
|
||||
calendarTop: number,
|
||||
value: Date
|
||||
}> {
|
||||
static defaultProps:Partial<DateInputProps> = {
|
||||
dateFormat: DateConstants.DATE_FORMAT,
|
||||
isModalInput: false
|
||||
isModalInput: true
|
||||
}
|
||||
|
||||
constructor(props:DateInputProps){
|
||||
|
|
@ -35,12 +56,299 @@ export default class DateInput extends React.Component<DateInputProps> {
|
|||
}
|
||||
}
|
||||
|
||||
get modules(){
|
||||
return DateInputModules || (DateInputModules = [
|
||||
WebpackLoader.find(e => e.default && e.default.displayName === "Clickable"),
|
||||
WebpackLoader.find(e => e.default && e.default.displayName === "TransitionGroup")
|
||||
])
|
||||
}
|
||||
|
||||
inputRef:React.Component
|
||||
|
||||
componentDidUpdate(e:DateInputProps){
|
||||
const defaultValue = this.props.defaultValue
|
||||
const dateFormat = this.props.dateFormat
|
||||
|
||||
if (e.defaultValue !== defaultValue && null != defaultValue) {
|
||||
|
||||
if(!this.inputRef)return
|
||||
let str = getDateFNS().format(defaultValue, dateFormat)
|
||||
this.inputRef["value"] = str
|
||||
}
|
||||
}
|
||||
|
||||
closeCalendarPicker(){
|
||||
this.setState({
|
||||
isCalendarPickerOpen: false
|
||||
})
|
||||
}
|
||||
|
||||
getCurrentValue(){
|
||||
let value = this.state.value
|
||||
let dateFormat = this.props.dateFormat;
|
||||
if(!value)return
|
||||
if(isDateValid(value))return getDateFNS().format(value, dateFormat)
|
||||
return null
|
||||
}
|
||||
|
||||
handleDateChange(value){
|
||||
this.closeCalendarPicker()
|
||||
const onChange = this.props.onChange
|
||||
const name = this.props.name
|
||||
this.setState((state) => {
|
||||
return {
|
||||
value: value,
|
||||
inputResetKey: state.inputResetKey + 1
|
||||
}
|
||||
}, function() {
|
||||
null != onChange && onChange(value, name)
|
||||
})
|
||||
}
|
||||
|
||||
handleInputBlur(ev){
|
||||
const value = this.state.value
|
||||
const newvalue = ev.currentTarget.value
|
||||
const iso = getDateFNS().parseISO(newvalue);
|
||||
if(isDateValid(iso) && value){
|
||||
if(iso.valueOf() !== value.valueOf())this.setState(function(state) {
|
||||
return {
|
||||
value: iso,
|
||||
inputResetKey: state.inputResetKey + 1
|
||||
}
|
||||
}, function() {
|
||||
const props = this.props
|
||||
const onChange = props.onChange
|
||||
const name = props.name;
|
||||
if(onChange)onChange(iso, name)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
toggleCalendarVisibility(ev){
|
||||
const rect:DOMRect = ev.currentTarget.getBoundingClientRect()
|
||||
const bottom = rect.bottom
|
||||
const right = rect.right
|
||||
const innerWidth = window.innerWidth;
|
||||
this.setState(function(state) {
|
||||
return {
|
||||
isCalendarPickerOpen: !state.isCalendarPickerOpen,
|
||||
calendarRight: innerWidth - right,
|
||||
calendarTop: bottom
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
setRef(ref){
|
||||
this.inputRef = ref
|
||||
}
|
||||
|
||||
renderCalendarPicker(){
|
||||
let state = this.state
|
||||
let calendarRight = state.calendarRight
|
||||
let calendarTop = state.calendarTop
|
||||
let isCalendarPickerOpen = state.isCalendarPickerOpen
|
||||
let value = state.value
|
||||
let props = this.props
|
||||
let minDate = props.minDate
|
||||
let maxDate = props.maxDate
|
||||
let endDate = props.endDate
|
||||
let filterDate = props.filterDate
|
||||
let startDate = props.startDate
|
||||
let selectsEnd = props.selectsEnd
|
||||
let selectsStart = props.selectsStart
|
||||
let isModalInput = props.isModalInput
|
||||
let y = props.showMonthYearPicker;
|
||||
return isCalendarPickerOpen ? React.createElement(AnimatedCalendarPicker, {
|
||||
value: value ? value : undefined,
|
||||
onClickOutside: this.closeCalendarPicker.bind(this),
|
||||
onSelect: this.handleDateChange.bind(this),
|
||||
minDate: minDate,
|
||||
maxDate: maxDate,
|
||||
endDate: endDate,
|
||||
filterDate: filterDate,
|
||||
startDate: startDate,
|
||||
selectsEnd: selectsEnd,
|
||||
selectsStart: selectsStart,
|
||||
right: calendarRight,
|
||||
top: calendarTop,
|
||||
isModalInput: isModalInput,
|
||||
showMonthYearPicker: y
|
||||
}) : null
|
||||
}
|
||||
|
||||
render(){
|
||||
const [
|
||||
Clickable,
|
||||
TransitionGroup
|
||||
] = this.modules
|
||||
let name = this.props.name
|
||||
return React.createElement(Clickable.default, {
|
||||
className: getEmotion().css({
|
||||
position: "relative"
|
||||
})
|
||||
}, React.createElement(getInternalTextInput(), {
|
||||
inputClassName: getEmotion().css({
|
||||
paddingRight: "32px"
|
||||
}),
|
||||
name: name,
|
||||
onBlur: this.handleInputBlur.bind(this),
|
||||
defaultValue: this.getCurrentValue(),
|
||||
inputRef: this.setRef.bind(this)
|
||||
}), React.createElement(Button, {
|
||||
className: getEmotion().css({
|
||||
"&:hover": {
|
||||
opacity: 1
|
||||
},
|
||||
position: "absolute",
|
||||
right: 0,
|
||||
top: "50%",
|
||||
opacity: .6,
|
||||
padding: "8px",
|
||||
transform: "translateY(-50%)",
|
||||
transition: "opacity .125s"
|
||||
}),
|
||||
color: "transparent",
|
||||
onMouseDown: this.toggleCalendarVisibility.bind(this),
|
||||
wrapper: false
|
||||
}, /*React.createElement(v.default, {
|
||||
className: _.default.calendarIcon,
|
||||
name: v.IconNames.CALENDAR
|
||||
})*/), ReactDOM.createPortal(React.createElement(TransitionGroup.default, {
|
||||
component: "div",
|
||||
transitionAppear: false
|
||||
}, this.renderCalendarPicker()), window.document.body))
|
||||
}
|
||||
}
|
||||
|
||||
export function isDateValid(date:Date){
|
||||
return (date instanceof Date || typeof date === "object" || Object.prototype.toString.call(date) === "[object Date]") && !isNaN(date.valueOf())
|
||||
}
|
||||
|
||||
let AnimatedCalendarPickerModules
|
||||
export class AnimatedCalendarPicker extends React.Component<any, {
|
||||
menuAnimation: any
|
||||
}> {
|
||||
static displayName = "AnimatedCalendarPicker"
|
||||
constructor(props){
|
||||
super(props)
|
||||
this.state = {
|
||||
menuAnimation: new this.modules[0].default.Value(0)
|
||||
}
|
||||
}
|
||||
|
||||
get modules(){
|
||||
return AnimatedCalendarPickerModules || (AnimatedCalendarPickerModules = [
|
||||
WebpackLoader.findByUniqueProperties(["Value","timing"])
|
||||
])
|
||||
}
|
||||
|
||||
componentWillEnter(ev){
|
||||
this.modules[0].default.timing(this.state.menuAnimation, {
|
||||
toValue: 1,
|
||||
duration: 150
|
||||
}).start(ev)
|
||||
}
|
||||
|
||||
componentWillLeave(e){
|
||||
this.modules[0].default.timing(this.state.menuAnimation, {
|
||||
toValue: 0,
|
||||
duration: 150
|
||||
}).start(e)
|
||||
}
|
||||
|
||||
render(){
|
||||
let props = this.props,
|
||||
r = props.value,
|
||||
n = props.onClickOutside,
|
||||
a = props.onSelect,
|
||||
i = props.minDate,
|
||||
o = props.maxDate,
|
||||
u = props.endDate,
|
||||
f = props.filterDate,
|
||||
c = props.startDate,
|
||||
d = props.selectsEnd,
|
||||
y = props.selectsStart,
|
||||
v = props.top,
|
||||
g = props.right,
|
||||
isModalInput = props.isModalInput,
|
||||
h = props.showMonthYearPicker,
|
||||
menuAnimation = this.state.menuAnimation,
|
||||
E = menuAnimation.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: ["-10px", "0px"]
|
||||
});
|
||||
const emotion = getEmotion()
|
||||
return React.createElement(this.modules[0].default.div, {
|
||||
className: [emotion.css({
|
||||
marginRight: "1px",
|
||||
margintop: "6px",
|
||||
position: "fixed",
|
||||
zIndex: 2
|
||||
}), isModalInput ? emotion.css({
|
||||
zIndex: 10000
|
||||
}) : null].filter(e=>e).join(" "),
|
||||
style: {
|
||||
opacity: menuAnimation,
|
||||
right: g,
|
||||
top: v,
|
||||
transform: [{
|
||||
translateY: E
|
||||
}]
|
||||
}
|
||||
}, React.createElement(CalendarPicker, {
|
||||
minDate: i,
|
||||
maxDate: o,
|
||||
endDate: u,
|
||||
filterDate: f,
|
||||
startDate: c,
|
||||
selectsEnd: d,
|
||||
selectsStart: y,
|
||||
value: r,
|
||||
onSelect: a,
|
||||
onClickOutside: n,
|
||||
showMonthYearPicker: h,
|
||||
onChange: console.log
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
export class CalendarPicker extends React.Component<any> {
|
||||
static defaultProps = {
|
||||
value: new Date()
|
||||
}
|
||||
static displayName = "CalendarPicker"
|
||||
|
||||
render(){
|
||||
var e = this.props
|
||||
, t = e.onClickOutside
|
||||
, r = e.onSelect
|
||||
, n = e.locale
|
||||
, l = e.value
|
||||
, o = e.endDate
|
||||
, u = e.filterDate
|
||||
, f = e.startDate
|
||||
, c = e.minDate
|
||||
, d = e.maxDate
|
||||
, p = e.selectsEnd
|
||||
, y = e.selectsStart
|
||||
, v = e.showMonthYearPicker;
|
||||
return React.createElement("div", {
|
||||
className: "lc-calendarPicker"
|
||||
}, React.createElement(DatePicker.default, {
|
||||
fixedHeight: true,
|
||||
inline: true,
|
||||
selected: l,
|
||||
locale: n,
|
||||
onClickOutside: t,
|
||||
onSelect: r,
|
||||
onChange: r,
|
||||
endDate: o,
|
||||
filterDate: u,
|
||||
startDate: f,
|
||||
minDate: c,
|
||||
maxDate: d,
|
||||
selectsEnd: p,
|
||||
selectsStart: y,
|
||||
showMonthYearPicker: v
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
|
@ -7,6 +7,7 @@ import Text from "../general/Text"
|
|||
export const DateConstants = {
|
||||
DATE_FORMAT: "yyyy-MM-dd"
|
||||
}
|
||||
import DateInput from "./DateInput"
|
||||
export type DateRangeProps = {
|
||||
dateFormat?: string,
|
||||
defaultEnd: Date,
|
||||
|
|
@ -92,7 +93,8 @@ export default class DateRange extends React.Component<DateRangeProps, {
|
|||
</Text>
|
||||
</FlexChild>
|
||||
<FlexChild grow={0}>
|
||||
|
||||
<DateInput defaultValue={start} minDate={this.getMinDate()} maxDate={end} onChange={this.handleStartChange.bind(this)}
|
||||
startDate={start} endDate={end} filterDate={filterDate} selectsStart={true} showMonthYearPicker={showMonthYearPicker} />
|
||||
</FlexChild>
|
||||
<FlexChild grow={0}>
|
||||
<Text className="lc-dateLabel" size="small"
|
||||
|
|
@ -101,7 +103,8 @@ export default class DateRange extends React.Component<DateRangeProps, {
|
|||
</Text>
|
||||
</FlexChild>
|
||||
<FlexChild grow={0}>
|
||||
|
||||
<DateInput defaultValue={end} minDate={start} maxDate={this.getMaxDate()} onChange={this.handleEndChange.bind(this)}
|
||||
startDate={start} endDate={end} filterDate={filterDate} selectsStart={true} showMonthYearPicker={showMonthYearPicker} />
|
||||
</FlexChild>
|
||||
</Flex>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,6 +18,10 @@ type TextInputProps = {
|
|||
onBlur?: (ev, name: string, input: TextInput) => void
|
||||
}
|
||||
|
||||
export function getInternalTextInput(){
|
||||
return TextInput.prototype.modules[0]
|
||||
}
|
||||
|
||||
let TextInputModules
|
||||
export default class TextInput extends React.PureComponent<TextInputProps, {value: string}> {
|
||||
hasSet: boolean
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ const LightcordApi = {
|
|||
|
||||
declare global {
|
||||
var React:typeof import("react")
|
||||
var ReactDOM: typeof import("react-dom")
|
||||
interface Window {
|
||||
/**
|
||||
* Lightcord is only availlaible in Lightcord (native)
|
||||
|
|
@ -45,7 +46,9 @@ declare global {
|
|||
get(ids: [number|((mod:any)=>boolean)], modules?:any[]):any
|
||||
},
|
||||
BdApi: typeof bandagedbdApi.BdApi,
|
||||
EDApi: typeof bandagedbdApi.BdApi
|
||||
EDApi: typeof bandagedbdApi.BdApi,
|
||||
ReactDOM: typeof import("react-dom"),
|
||||
React:typeof import("react")
|
||||
}
|
||||
var Lightcord:LightcordGlobal
|
||||
var BdApi: typeof bandagedbdApi.BdApi
|
||||
|
|
|
|||
|
|
@ -262,3 +262,761 @@
|
|||
.lc-dateWrapper {
|
||||
padding-top: 8px
|
||||
}
|
||||
|
||||
|
||||
/*CalendarPicker*/
|
||||
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,.react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow {
|
||||
margin-left: -8px;
|
||||
position: absolute
|
||||
}
|
||||
|
||||
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow:before,.react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow:before {
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
position: absolute;
|
||||
border: 8px solid transparent;
|
||||
height: 0;
|
||||
width: 1px
|
||||
}
|
||||
|
||||
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before,.react-datepicker__month-read-view--down-arrow:before,.react-datepicker__year-read-view--down-arrow:before {
|
||||
content: "";
|
||||
z-index: -1;
|
||||
border-width: 8px;
|
||||
left: -8px;
|
||||
border-bottom-color: #aeaeae
|
||||
}
|
||||
|
||||
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
|
||||
top: 0;
|
||||
margin-top: -8px
|
||||
}
|
||||
|
||||
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before {
|
||||
border-top: none;
|
||||
border-bottom-color: #f0f0f0
|
||||
}
|
||||
|
||||
.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle:before {
|
||||
top: -1px;
|
||||
border-bottom-color: #aeaeae
|
||||
}
|
||||
|
||||
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,.react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow {
|
||||
bottom: 0;
|
||||
margin-bottom: -8px
|
||||
}
|
||||
|
||||
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle,.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow:before,.react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow:before {
|
||||
border-bottom: none;
|
||||
border-top-color: #fff
|
||||
}
|
||||
|
||||
.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle:before,.react-datepicker__month-read-view--down-arrow:before,.react-datepicker__year-read-view--down-arrow:before {
|
||||
bottom: -1px;
|
||||
border-top-color: #aeaeae
|
||||
}
|
||||
|
||||
.react-datepicker-wrapper {
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.react-datepicker {
|
||||
font-size: .8rem;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
border: 1px solid #aeaeae;
|
||||
border-radius: .3rem;
|
||||
display: inline-block;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.react-datepicker__triangle {
|
||||
position: absolute;
|
||||
left: 50px
|
||||
}
|
||||
|
||||
.react-datepicker-popper {
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
.react-datepicker-popper[data-placement^=bottom] {
|
||||
margin-top: 10px
|
||||
}
|
||||
|
||||
.react-datepicker-popper[data-placement^=top] {
|
||||
margin-bottom: 6px
|
||||
}
|
||||
|
||||
.react-datepicker-popper[data-placement^=right] {
|
||||
margin-left: 8px
|
||||
}
|
||||
|
||||
.react-datepicker-popper[data-placement^=right] .react-datepicker__triangle {
|
||||
left: auto;
|
||||
right: 42px
|
||||
}
|
||||
|
||||
.react-datepicker-popper[data-placement^=left] {
|
||||
margin-right: 8px
|
||||
}
|
||||
|
||||
.react-datepicker-popper[data-placement^=left] .react-datepicker__triangle {
|
||||
left: 42px;
|
||||
right: auto
|
||||
}
|
||||
|
||||
.react-datepicker__header {
|
||||
text-align: center;
|
||||
background-color: #f0f0f0;
|
||||
border-bottom: 1px solid #aeaeae;
|
||||
border-top-left-radius: .3rem;
|
||||
border-top-right-radius: .3rem;
|
||||
padding-top: 8px;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.react-datepicker__month-dropdown-container--scroll,.react-datepicker__month-dropdown-container--select,.react-datepicker__year-dropdown-container--scroll,.react-datepicker__year-dropdown-container--select {
|
||||
display: inline-block;
|
||||
margin: 0 2px
|
||||
}
|
||||
|
||||
.react-datepicker__current-month {
|
||||
margin-top: 0;
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
font-size: .944rem
|
||||
}
|
||||
|
||||
.react-datepicker__navigation {
|
||||
line-height: 1.7rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
width: 0;
|
||||
border: .45rem solid transparent;
|
||||
z-index: 1
|
||||
}
|
||||
|
||||
.react-datepicker__navigation--previous {
|
||||
left: 10px;
|
||||
border-right-color: #ccc
|
||||
}
|
||||
|
||||
.react-datepicker__navigation--previous:hover {
|
||||
border-right-color: #b3b2b2
|
||||
}
|
||||
|
||||
.react-datepicker__navigation--next {
|
||||
right: 10px;
|
||||
border-left-color: #ccc
|
||||
}
|
||||
|
||||
.react-datepicker__navigation--next:hover {
|
||||
border-left-color: #b3b2b2
|
||||
}
|
||||
|
||||
.react-datepicker__navigation--years {
|
||||
position: relative;
|
||||
top: 0;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto
|
||||
}
|
||||
|
||||
.react-datepicker__navigation--years-previous {
|
||||
top: 4px;
|
||||
border-top-color: #ccc
|
||||
}
|
||||
|
||||
.react-datepicker__navigation--years-previous:hover {
|
||||
border-top-color: #b3b2b2
|
||||
}
|
||||
|
||||
.react-datepicker__navigation--years-upcoming {
|
||||
top: -4px;
|
||||
border-bottom-color: #ccc
|
||||
}
|
||||
|
||||
.react-datepicker__navigation--years-upcoming:hover {
|
||||
border-bottom-color: #b3b2b2
|
||||
}
|
||||
|
||||
.react-datepicker__month-container {
|
||||
display: inline;
|
||||
float: left
|
||||
}
|
||||
|
||||
.react-datepicker__month {
|
||||
margin: .4rem;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.react-datepicker__week-number {
|
||||
color: #ccc;
|
||||
display: inline-block;
|
||||
width: 1.7rem;
|
||||
line-height: 1.7rem;
|
||||
text-align: center;
|
||||
margin: .166rem
|
||||
}
|
||||
|
||||
.react-datepicker__week-number.react-datepicker__week-number--clickable {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
|
||||
border-radius: .3rem;
|
||||
background-color: #f0f0f0
|
||||
}
|
||||
|
||||
.react-datepicker__day,.react-datepicker__day-name {
|
||||
color: #000;
|
||||
display: inline-block;
|
||||
width: 1.7rem;
|
||||
line-height: 1.7rem;
|
||||
text-align: center;
|
||||
margin: .166rem
|
||||
}
|
||||
|
||||
.react-datepicker__day {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.react-datepicker__day:hover {
|
||||
border-radius: .3rem;
|
||||
background-color: #f0f0f0
|
||||
}
|
||||
|
||||
.react-datepicker__day--today {
|
||||
font-weight: 700
|
||||
}
|
||||
|
||||
.react-datepicker__day--highlighted {
|
||||
border-radius: .3rem;
|
||||
background-color: #3dcc4a;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.react-datepicker__day--highlighted:hover {
|
||||
background-color: #32be3f
|
||||
}
|
||||
|
||||
.react-datepicker__day--highlighted-custom-1 {
|
||||
color: #f0f
|
||||
}
|
||||
|
||||
.react-datepicker__day--highlighted-custom-2 {
|
||||
color: green
|
||||
}
|
||||
|
||||
.react-datepicker__day--in-range,.react-datepicker__day--in-selecting-range,.react-datepicker__day--selected {
|
||||
border-radius: .3rem;
|
||||
background-color: #216ba5;
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.react-datepicker__day--in-range:hover,.react-datepicker__day--in-selecting-range:hover,.react-datepicker__day--selected:hover {
|
||||
background-color: #1d5d90
|
||||
}
|
||||
|
||||
.react-datepicker__day--keyboard-selected {
|
||||
border-radius: 0;
|
||||
background-color: var(--blurple);
|
||||
color: #fff
|
||||
}
|
||||
|
||||
.react-datepicker__day--keyboard-selected:hover {
|
||||
background-color: #1d5d90
|
||||
}
|
||||
|
||||
.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) {
|
||||
background-color: rgba(33,107,165,.5)
|
||||
}
|
||||
|
||||
.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) {
|
||||
background-color: #f0f0f0;
|
||||
color: #000
|
||||
}
|
||||
|
||||
.react-datepicker__day--disabled {
|
||||
cursor: default;
|
||||
color: #ccc
|
||||
}
|
||||
|
||||
.react-datepicker__day--disabled:hover {
|
||||
background-color: transparent
|
||||
}
|
||||
|
||||
.react-datepicker__input-container {
|
||||
position: relative;
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.react-datepicker__month-read-view,.react-datepicker__year-read-view {
|
||||
border: 1px solid transparent;
|
||||
border-radius: .3rem
|
||||
}
|
||||
|
||||
.react-datepicker__month-read-view:hover,.react-datepicker__year-read-view:hover {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow {
|
||||
border-top-color: #b3b2b2
|
||||
}
|
||||
|
||||
.react-datepicker__month-read-view--down-arrow,.react-datepicker__year-read-view--down-arrow {
|
||||
border-top-color: #ccc;
|
||||
float: right;
|
||||
margin-left: 20px;
|
||||
top: 8px;
|
||||
position: relative;
|
||||
border-width: .45rem
|
||||
}
|
||||
|
||||
.react-datepicker__month-dropdown,.react-datepicker__year-dropdown {
|
||||
background-color: #f0f0f0;
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
left: 25%;
|
||||
top: 30px;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
border-radius: .3rem;
|
||||
border: 1px solid #aeaeae
|
||||
}
|
||||
|
||||
.react-datepicker__month-dropdown:hover,.react-datepicker__year-dropdown:hover {
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.react-datepicker__month-dropdown--scrollable,.react-datepicker__year-dropdown--scrollable {
|
||||
height: 150px;
|
||||
overflow-y: scroll
|
||||
}
|
||||
|
||||
.react-datepicker__month-option,.react-datepicker__year-option {
|
||||
line-height: 20px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto
|
||||
}
|
||||
|
||||
.react-datepicker__month-option:first-of-type,.react-datepicker__year-option:first-of-type {
|
||||
border-top-left-radius: .3rem;
|
||||
border-top-right-radius: .3rem
|
||||
}
|
||||
|
||||
.react-datepicker__month-option:last-of-type,.react-datepicker__year-option:last-of-type {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
border-bottom-left-radius: .3rem;
|
||||
border-bottom-right-radius: .3rem
|
||||
}
|
||||
|
||||
.react-datepicker__month-option:hover,.react-datepicker__year-option:hover {
|
||||
background-color: #ccc
|
||||
}
|
||||
|
||||
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming {
|
||||
border-bottom-color: #b3b2b2
|
||||
}
|
||||
|
||||
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous {
|
||||
border-top-color: #b3b2b2
|
||||
}
|
||||
|
||||
.react-datepicker__month-option--selected,.react-datepicker__year-option--selected {
|
||||
position: absolute;
|
||||
left: 15px
|
||||
}
|
||||
|
||||
.react-datepicker__close-icon {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: 0;
|
||||
outline: 0;
|
||||
padding: 0;
|
||||
vertical-align: middle
|
||||
}
|
||||
|
||||
.react-datepicker__close-icon:after {
|
||||
background-color: #216ba5;
|
||||
border-radius: 50%;
|
||||
bottom: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
content: "\D7";
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
line-height: 1;
|
||||
margin: -8px auto 0;
|
||||
padding: 2px;
|
||||
position: absolute;
|
||||
right: 7px;
|
||||
text-align: center;
|
||||
top: 50%
|
||||
}
|
||||
|
||||
.react-datepicker__today-button {
|
||||
background: #f0f0f0;
|
||||
border-top: 1px solid #aeaeae;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
padding: 5px 0;
|
||||
clear: left
|
||||
}
|
||||
|
||||
.react-datepicker__portal {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0,0,0,.8);
|
||||
left: 0;
|
||||
top: 0;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
z-index: 2147483647
|
||||
}
|
||||
|
||||
.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__day-name {
|
||||
width: 3rem;
|
||||
line-height: 3rem
|
||||
}
|
||||
|
||||
@media (max-height: 550px),(max-width:400px) {
|
||||
.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__day-name {
|
||||
width:2rem;
|
||||
line-height: 2rem
|
||||
}
|
||||
}
|
||||
|
||||
.react-datepicker__portal .react-datepicker__current-month {
|
||||
font-size: 1.44rem
|
||||
}
|
||||
|
||||
.react-datepicker__portal .react-datepicker__navigation {
|
||||
border: .81rem solid transparent
|
||||
}
|
||||
|
||||
.react-datepicker__portal .react-datepicker__navigation--previous {
|
||||
border-right-color: #ccc
|
||||
}
|
||||
|
||||
.react-datepicker__portal .react-datepicker__navigation--previous:hover {
|
||||
border-right-color: #b3b2b2
|
||||
}
|
||||
|
||||
.react-datepicker__portal .react-datepicker__navigation--next {
|
||||
border-left-color: #ccc
|
||||
}
|
||||
|
||||
.react-datepicker__portal .react-datepicker__navigation--next:hover {
|
||||
border-left-color: #b3b2b2
|
||||
}
|
||||
|
||||
.lc-calendarPicker {
|
||||
min-width: 320px
|
||||
}
|
||||
|
||||
.lc-calendarPicker button {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker {
|
||||
border: none;
|
||||
padding: 20px
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__month-container {
|
||||
width: 300px
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__day--in-range,.lc-calendarPicker .react-datepicker__day--in-selecting-range,.lc-calendarPicker .react-datepicker__day--selected,.lc-calendarPicker .react-datepicker__month--in-range,.lc-calendarPicker .react-datepicker__month--in-selecting-range,.lc-calendarPicker .react-datepicker__month--selected {
|
||||
border-radius: 0
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__header {
|
||||
padding-top: 0;
|
||||
border-bottom: 0
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker-year-header,.lc-calendarPicker .react-datepicker__current-month {
|
||||
margin: 0 0 10px;
|
||||
padding: 0 0 20px;
|
||||
border-bottom: 1px solid;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker-year-header {
|
||||
margin-bottom: 24px
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--next,.lc-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--previous {
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 1px solid;
|
||||
border-radius: 2px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 6px 12px;
|
||||
background-position: 50%;
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
font-size: 0
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--next.react-datepicker__navigation--next,.lc-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--previous.react-datepicker__navigation--next {
|
||||
left: auto;
|
||||
right: 20px;
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg)
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__month {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__week:first-of-type>.react-datepicker__day:first-of-type {
|
||||
border-radius: 3px 0 0
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__week:first-of-type>.react-datepicker__day:last-of-type {
|
||||
border-radius: 0 3px 0 0
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__week:last-of-type>.react-datepicker__day {
|
||||
border-bottom: 1px solid #dcddde
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__week:last-of-type>.react-datepicker__day:first-of-type {
|
||||
border-radius: 0 0 0 3px
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__week:last-of-type>.react-datepicker__day:last-of-type {
|
||||
border-radius: 0 0 3px
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__week>.react-datepicker__day:last-of-type {
|
||||
border-right: 1px solid
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__day-names {
|
||||
margin-bottom: 10px
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__day-name {
|
||||
width: 40px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
line-height: 1em;
|
||||
text-transform: uppercase;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__day {
|
||||
position: relative;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-top: 1px solid;
|
||||
border-left: 1px solid
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-range:hover,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--selected:hover,.lc-calendarPicker .react-datepicker__day:hover {
|
||||
border-radius: 0
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-range,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-selecting-range,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--selected {
|
||||
background: none;
|
||||
border-radius: 0
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-range:after,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-selecting-range:after,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--selected:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__monthPicker {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__month-wrapper {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__month-wrapper:last-child .react-datepicker__month-text {
|
||||
border-bottom: 1px solid #18191c
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__month-text {
|
||||
position: relative;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
line-height: 56px;
|
||||
border-top: 1px solid;
|
||||
border-left: 1px solid
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__month-text:last-child {
|
||||
border-right: 1px solid
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__month-text.react-datepicker__day--in-range:hover,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__day--selected:hover,.lc-calendarPicker .react-datepicker__month-text:hover {
|
||||
border-radius: 0
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--in-range,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--in-selecting-range,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--selected {
|
||||
background: none;
|
||||
border-radius: 0
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--in-range:after,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--in-selecting-range:after,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--selected:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__day--disabled,.lc-calendarPicker .react-datepicker__day--outside-month {
|
||||
font-weight: 500
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__month--in-range:not(.react-datepicker__month--in-selecting-range):not(.react-datepicker__month--disabled),.lc-calendarPicker .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range):not(.react-datepicker__day--disabled) {
|
||||
color: #f6f6f7
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker {
|
||||
background-color: #36393f;
|
||||
-webkit-box-shadow: 0 0 10px #18191c,0 2px 2px #202225;
|
||||
box-shadow: 0 0 10px #18191c,0 2px 2px #202225
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__header {
|
||||
background-color: #36393f;
|
||||
border-color: rgba(24,25,28,.2)
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker-year-header,.lc-calendarPicker .react-datepicker__current-month {
|
||||
border-bottom-color: rgba(24,25,28,.3);
|
||||
color: #f6f6f7
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--next,.lc-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--previous {
|
||||
border-color: #18191c;
|
||||
background-image: url(/assets/7619529e87dad31fd2ae83d9b9583e49.svg)
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__week:last-of-type .react-datepicker__day {
|
||||
border-bottom-color: #18191c
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__week .react-datepicker__day:last-of-type {
|
||||
border-right-color: #18191c
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__day-name {
|
||||
color: rgba(246,246,247,.6)
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__day {
|
||||
border-top-color: #18191c;
|
||||
border-left-color: #18191c;
|
||||
color: #f6f6f7
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__day.react-datepicker__day--selected:hover,.lc-calendarPicker .react-datepicker__day:hover {
|
||||
color: #fff;
|
||||
background-color: #7289da
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__day.react-datepicker__day--disabled,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--disabled:hover {
|
||||
background-color: #2f3136;
|
||||
color: rgba(246,246,247,.3)
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-range:after,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--in-selecting-range:after,.lc-calendarPicker .react-datepicker__day.react-datepicker__day--selected:after {
|
||||
background-color: #7289da
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__month-text {
|
||||
border-color: #18191c;
|
||||
color: #f6f6f7;
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__month-text:last-child {
|
||||
border-right-color: #18191c
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__month-text.react-datepicker__day--selected:hover,.lc-calendarPicker .react-datepicker__month-text:hover {
|
||||
color: #fff;
|
||||
background-color: #7289da
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--disabled,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--disabled:hover {
|
||||
background-color: #2f3136;
|
||||
color: rgba(246,246,247,.3)
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--in-range:after,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--in-selecting-range:after,.lc-calendarPicker .react-datepicker__month-text.react-datepicker__month--selected:after {
|
||||
background-color: #7289da
|
||||
}
|
||||
|
||||
.lc-calendarPicker .react-datepicker__month--disabled,.lc-calendarPicker .react-datepicker__month--outside-month {
|
||||
background-color: #2f3136;
|
||||
color: rgba(246,246,247,.3);
|
||||
cursor: unset
|
||||
}
|
||||
Loading…
Reference in New Issue