react-datepicker2-clone
Version:
react datepicker component. (include persian jalaali calendar)
1 lines • 28.1 kB
Source Map (JSON)
{"version":3,"sources":["styles\\calendar-footer.scss","src\\styles\\style.css","styles\\mixins.scss","styles\\variables.scss","styles\\style.scss"],"names":[],"mappings":"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","sourcesContent":["@import \"./variables.scss\";\r\n@import \"./mixins.scss\";\r\n\r\n.#{$classPrefix}-footer {\r\n display: flex;\r\n justify-content: space-between;\r\ntext-align: left;\r\n button {\r\n margin-left: 1rem;\r\n background-color: transparent;\r\n color: $selectedColor;\r\n outline: 0;\r\n border: 0;\r\n cursor: pointer;\r\n @include transition-text\r\n &:hover {\r\n color: darken($selectedColor, 10);\r\n text-shadow: 0 0 1px $selectedColor;\r\n }\r\n &:last-child {\r\n margin: 0;\r\n }\r\n}\r\n}",".calendar-footer {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n text-align: left;\n}\n\n.calendar-footer button {\n margin-left: 1rem;\n background-color: transparent;\n color: #3a933b;\n outline: 0;\n border: 0;\n cursor: pointer;\n -webkit-transition: all ease-in-out 0.2s;\n transition: all ease-in-out 0.2s;\n}\n\n.calendar-footer button:hover {\n color: #2c6e2c;\n text-shadow: 0 0 1px #3a933b;\n}\n\n.calendar-footer button:last-child {\n margin: 0;\n}\n\n.heroContainer {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n position: fixed;\n top: 0;\n right: 0;\n width: 100vw;\n height: 100vh;\n overflow: hidden;\n z-index: 1100;\n -webkit-backdrop-filter: blur(5px);\n backdrop-filter: blur(5px);\n overflow: hidden;\n}\n\n.calendarContainer {\n position: relative;\n border-radius: 16px;\n -webkit-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);\n box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);\n width: 320px;\n margin: auto;\n text-align: center;\n padding: 24px;\n background-color: #fff;\n}\n\n.calendarContainer hr {\n margin: 0.5rem 0;\n}\n\n.calendarContainer * {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.calendarContainer .dayPickerContainer:after,\n.calendarContainer .monthsList:after,\n.calendarContainer .daysOfWeek:after {\n content: '';\n display: block;\n clear: both;\n}\n\n.datepicker-input {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n/* Heading */\n.calendarContainer .heading {\n height: auto;\n font-weight: bold;\n margin-bottom: 10px;\n text-align: right;\n}\n\n.calendarContainer .heading .selects {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.calendarContainer .heading .selects select {\n padding: 4px 12px 4px 4px;\n margin: 0 0.1rem;\n border: solid 1px #bdbdbd;\n width: 100px;\n}\n\n.calendarContainer .heading .selects button {\n background-color: transparent;\n border: 0;\n outline: 0;\n border-radius: 100%;\n width: 30px;\n height: 30px;\n -webkit-transition: all ease-in-out 0.2s;\n transition: all ease-in-out 0.2s;\n}\n\n.calendarContainer .heading .selects button svg {\n margin: 0 auto;\n}\n\n.calendarContainer .heading .selects button:hover {\n background-color: #777;\n}\n\n.calendarContainer .heading .selects button:hover svg {\n fill: #fff;\n}\n\n.calendarContainer .heading > button {\n background: none;\n margin: 5px 0;\n border: none;\n text-align: center;\n line-height: 30px;\n width: 36px;\n height: 32px;\n cursor: pointer;\n}\n\n.calendarContainer .heading > button:hover {\n background-color: #f2f2f2;\n}\n\n.calendarContainer .heading svg {\n width: 10px;\n fill: #777;\n}\n\n.calendarContainer .heading .title {\n height: auto;\n border-radius: 4px;\n width: auto;\n margin: 0 5px;\n border: 1px solid #f7f7f7;\n text-align: center;\n display: inline-block;\n font-weight: normal;\n padding: 4px 15px 5px 15px;\n line-height: 1.5;\n font-size: 1.2em;\n max-height: none;\n}\n\n.jalaali.calendarContainer .heading .title {\n padding: 4px 15px 7px 15px;\n}\n\n/* Day wrapper styles */\n.calendarContainer .dayWrapper {\n float: left;\n width: 14.28571429%;\n margin-top: 5px;\n position: relative;\n}\n\n/* Day wrapper button styles */\n.calendarContainer .dayWrapper button {\n border: none;\n background: none;\n outline: none;\n width: 100%;\n cursor: pointer;\n width: 40px;\n height: 40px;\n font-size: 1.1em;\n padding: 0;\n line-height: 1.5;\n padding: 0px 0px 1px 0px;\n color: #757575;\n}\n\n.jalaali.calendarContainer .dayWrapper button {\n padding: 0px 0px 1px 0px;\n}\n\n.calendarContainer .dayWrapper:not(.selected) button:hover {\n background-color: #d6f1ff;\n}\n\n.calendarContainer .dayWrapper button[disabled] {\n color: #aaa;\n cursor: not-allowed;\n background-color: #ebf4eb;\n}\n\n.calendarContainer .dayWrapper button.selected {\n background-color: #337ab7;\n color: #ffffff;\n}\n\n.calendarContainer .dayWrapper:not(.currentMonth) button {\n opacity: 0.5;\n}\n\n/* Days of week row */\n.calendarContainer .daysOfWeek {\n margin-bottom: 5px;\n padding-bottom: 5px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n color: #757575;\n}\n\n.calendarContainer .daysOfWeek > div {\n -webkit-box-flex: 1;\n -ms-flex-positive: 1;\n flex-grow: 1;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n width: 42px;\n}\n\n/* Month selector portion */\n.calendarContainer .monthsList {\n clear: both;\n width: 100%;\n}\n\n.calendarContainer .monthsList button {\n width: 33.33333332%;\n height: 25%;\n float: right;\n border: 1px solid #f9f9f9;\n outline: none;\n font-size: 1em;\n background: #fff;\n padding: 10px 0;\n cursor: pointer;\n}\n\n.calendarContainer .monthsList button:hover {\n background: #eeeeee;\n cursor: pointer;\n}\n\n/* Year selector portion */\n.calendarContainer .yearsList {\n clear: both;\n width: 100%;\n max-height: 200px;\n overflow-y: scroll;\n}\n\n.calendarContainer .yearsList button {\n width: 20%;\n height: 25%;\n float: right;\n border: 1px solid #f9f9f9;\n outline: none;\n font-size: 1em;\n background: #fff;\n padding: 10px 0;\n cursor: pointer;\n}\n\n.calendarContainer .yearsList button:hover {\n background: #eeeeee;\n cursor: pointer;\n}\n\n/* Selected state of buttons */\n.calendarContainer .selected button,\n.calendarContainer .selected button:hover :not([disabled]),\n.calendarContainer .selected button:active,\n.calendarContainer .selected button:focus {\n background-color: #3a933b;\n color: #ffffff;\n}\n\n.calendarContainer.jalaali {\n direction: rtl;\n}\n\n.calendarContainer.jalaali .dayWrapper {\n float: right;\n}\n\n/*time picker style*/\n.time-picker-container {\n margin-bottom: 10;\n}\n\n.time-picker-container > .time-label {\n float: left;\n line-height: 30px;\n width: 50%;\n text-align: center;\n}\n\n.time-picker-container > .time-picker-panel {\n float: right;\n width: 50%;\n}\n\n.time-picker-container.jalaali > .time-label {\n float: right;\n}\n\n.time-picker-container.jalaali > .time-picker-panel {\n float: left;\n}\n\n.rc-time-picker {\n border-radius: 4px;\n display: inline-block;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n width: 100%;\n font-size: 1.2em;\n}\n\n.rc-time-picker * {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.rc-time-picker-input {\n direction: ltr;\n text-align: center;\n width: 100%;\n position: relative;\n display: inline-block;\n cursor: pointer;\n font-size: 1em;\n line-height: 1.5;\n}\n\n.rc-time-picker-input:focus {\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n background-color: #f2f2f2;\n}\n\n.rc-time-picker:hover {\n background-color: #f2f2f2;\n}\n\n.rc-time-picker-panel {\n z-index: 2001;\n width: 170px;\n position: absolute;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.rc-time-picker-panel * {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.rc-time-picker-panel-inner {\n display: inline-block;\n position: relative;\n outline: none;\n list-style: none;\n font-size: 12px;\n text-align: left;\n background-color: #fff;\n background-clip: padding-box;\n line-height: 1.5;\n}\n\n.rc-time-picker-panel-input {\n margin: 0;\n width: 100%;\n cursor: default;\n line-height: 1.5;\n outline: 0;\n font-size: 1.4em;\n text-align: center;\n font-family: inherit;\n}\n\n.rc-time-picker-panel-input,\n.rc-time-picker-panel-input:hover {\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n}\n\n.rc-time-picker-panel-input-wrap {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n position: relative;\n padding: 6px;\n border-bottom: 1px solid #e9e9e9;\n}\n\n.rc-time-picker-panel-input-invalid {\n border-color: red;\n}\n\n.rc-time-picker-panel-clear-btn {\n position: absolute;\n right: 6px;\n cursor: pointer;\n overflow: hidden;\n width: 20px;\n height: 20px;\n text-align: center;\n line-height: 20px;\n top: 6px;\n margin: 0;\n}\n\n.rc-time-picker-panel-clear-btn:after {\n content: 'x';\n font-size: 12px;\n color: #aaa;\n display: inline-block;\n line-height: 1;\n width: 20px;\n -webkit-transition: color 0.3s ease;\n transition: color 0.3s ease;\n}\n\n.rc-time-picker-panel-clear-btn:hover:after {\n color: #666;\n}\n\n.rc-time-picker-panel-select {\n float: left;\n font-size: 12px;\n border: 1px solid #e9e9e9;\n border-width: 0 1px;\n margin-left: -1px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n width: 56px;\n overflow: hidden;\n position: relative;\n}\n\n.rc-time-picker-panel-select-active {\n overflow-y: auto;\n}\n\n.rc-time-picker-panel-select:first-child {\n border-left: 0;\n margin-left: 0;\n}\n\n.rc-time-picker-panel-select:last-child {\n border-right: 0;\n}\n\n.rc-time-picker-panel-select ul {\n list-style: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n width: 100%;\n max-height: 144px;\n overflow-x: hidden;\n overflow-y: scroll;\n}\n\n.rc-time-picker-panel-select li {\n list-style: none;\n -webkit-box-sizing: content-box;\n box-sizing: content-box;\n margin: 0;\n padding: 0 0 0 16px;\n width: 100%;\n height: 24px;\n line-height: 24px;\n text-align: left;\n cursor: pointer;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.rc-time-picker-panel-select li:hover {\n background: #edfaff;\n}\n\nli.rc-time-picker-panel-select-option-selected {\n background: #edfaff;\n color: #2db7f5;\n}\n\nli.rc-time-picker-panel-select-option-disabled {\n color: #bfbfbf;\n}\n\nli.rc-time-picker-panel-select-option-disabled:hover {\n background: transparent;\n cursor: not-allowed;\n}\n\n.tether-element.tether-element-attached-top.tether-element-attached-center.tether-target-attached-bottom.tether-target-attached-center.tether-enabled {\n z-index: 2000;\n}\n\n.calendarContainer *,\n.datepicker-input {\n font-family: inherit;\n}\n\n.today button {\n border: 3px solid #3a933b !important;\n}\n\n.jalaali.calendarContainer .selectToday {\n padding: 4px 0 6px 0;\n}\n\n.calendarButton {\n display: block;\n width: 100%;\n background: #4285f4;\n color: #fff;\n outline: none;\n border-radius: 5px;\n border: 0;\n cursor: pointer;\n padding: 5px 0 7px 0;\n -webkit-transition: 0.2s all ease-in-out;\n transition: 0.2s all ease-in-out;\n -webkit-transition-property: background;\n transition-property: background;\n}\n\n.calendarButton:hover {\n background: #1266f1;\n}\n\n.toggleButton {\n margin-bottom: 1rem;\n}\n\n.selectToday {\n margin-top: 1rem;\n}\n\n.highLightDot-container {\n text-align: center;\n bottom: 0;\n width: 100%;\n position: absolute;\n cursor: pointer;\n direction: ltr;\n}\n\n.highLightDot-container .highLightDot {\n border: 1px solid #fff;\n display: inline-block;\n width: 7px;\n height: 7px;\n border-radius: 50%;\n}\n\n.highLightDot-container .highLightDot:not(:first-child) {\n margin-left: 2px;\n}\n\n.disabled {\n cursor: not-allowed;\n}\n\nbutton[disabled],\nbutton[disabled]:hover {\n color: #aaa;\n cursor: not-allowed;\n background-color: #ebebeb;\n}\n/*# sourceMappingURL=style.css.map */","@mixin transition-text {\r\n transition: all ease-in-out 0.2s;\r\n \r\n}","$greycolor: #777;\r\n$selectedColor:#3a933b;\r\n$hoverColor: #d6f1ff;\r\n$classPrefix: \"calendar\";","@import \"./variables.scss\";\r\n@import \"./calendar-footer.scss\";\r\n\r\n.heroContainer {\r\n display: flex;\r\n position: fixed;\r\n top:0;\r\n right: 0;\r\n width: 100vw;\r\n height: 100vh;\r\n overflow: hidden;\r\n z-index: 1100;\r\n backdrop-filter: blur(5px);\r\n overflow: hidden;\r\n}\r\n\r\n.calendarContainer {\r\n position: relative;\r\n border-radius: 16px;\r\n -moz-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);\r\n -webkit-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);\r\n box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);\r\n width: 320px;\r\n margin: auto;\r\n text-align: center; \r\n padding: 24px;\r\n background-color: #fff;\r\n\r\n hr {\r\n margin: 0.5rem 0;\r\n }\r\n}\r\n\r\n.calendarContainer * {\r\n box-sizing: border-box;\r\n}\r\n\r\n.calendarContainer .dayPickerContainer:after,\r\n.calendarContainer .monthsList:after,\r\n.calendarContainer .daysOfWeek:after {\r\n content: '';\r\n display: block;\r\n clear: both;\r\n}\r\n\r\n.datepicker-input {\r\n box-sizing: border-box;\r\n}\r\n\r\n/* Heading */\r\n\r\n.calendarContainer .heading {\r\n height: auto;\r\n font-weight: bold;\r\n margin-bottom: 10px;\r\n text-align: right;\r\n .selects {\r\n display: flex;\r\n justify-content: space-between;\r\n select {\r\n padding: 4px 12px 4px 4px;\r\n margin: 0 0.1rem;\r\n border: solid 1px #bdbdbd;\r\n width: 100px;\r\n }\r\n button {\r\n background-color: transparent;\r\n border: 0;\r\n outline: 0;\r\n border-radius: 100%;\r\n width: 30px;\r\n height: 30px;\r\n @include transition-text;\r\n svg {\r\n margin: 0 auto;\r\n }\r\n \r\n &:hover {\r\n background-color: $greycolor;\r\n svg {\r\n fill: #fff;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.calendarContainer .heading > button {\r\n background: none;\r\n margin: 5px 0;\r\n border: none;\r\n text-align: center;\r\n line-height: 30px;\r\n width: 36px;\r\n height: 32px;\r\n cursor: pointer;\r\n}\r\n\r\n.calendarContainer .heading > button:hover {\r\n background-color: #f2f2f2;\r\n}\r\n\r\n.calendarContainer .heading svg {\r\n width: 10px;\r\n fill: $greycolor;\r\n}\r\n\r\n\r\n\r\n.calendarContainer .heading .title {\r\n height: auto;\r\n border-radius: 4px;\r\n width: auto;\r\n margin: 0 5px;\r\n border: 1px solid #f7f7f7;\r\n text-align: center;\r\n display: inline-block;\r\n font-weight: normal;\r\n padding: 4px 15px 5px 15px;\r\n line-height: 1.5;\r\n font-size: 1.2em;\r\n max-height: none;\r\n}\r\n\r\n.jalaali.calendarContainer .heading .title {\r\n padding: 4px 15px 7px 15px;\r\n}\r\n\r\n/* Day wrapper styles */\r\n\r\n.calendarContainer .dayWrapper {\r\n float: left;\r\n width: 14.28571429%;\r\n margin-top: 5px;\r\n position: relative;\r\n}\r\n\r\n/* Day wrapper button styles */\r\n.calendarContainer .dayWrapper button {\r\n border: none;\r\n background: none;\r\n outline: none;\r\n width: 100%;\r\n cursor: pointer;\r\n width: 40px;\r\n height: 40px;\r\n font-size: 1.1em;\r\n padding: 0;\r\n line-height: 1.5;\r\n padding: 0px 0px 1px 0px;\r\n color: #757575;\r\n}\r\n\r\n.jalaali.calendarContainer .dayWrapper button {\r\n padding: 0px 0px 1px 0px;\r\n}\r\n\r\n.calendarContainer .dayWrapper:not(.selected) button:hover {\r\n background-color: $hoverColor;\r\n}\r\n\r\n.calendarContainer .dayWrapper button[disabled] {\r\n color: #aaa;\r\n cursor: not-allowed;\r\n background-color: #ebf4eb;\r\n}\r\n\r\n.calendarContainer .dayWrapper button.selected {\r\n background-color: #337ab7;\r\n color: #ffffff;\r\n}\r\n\r\n.calendarContainer .dayWrapper:not(.currentMonth) button {\r\n opacity: 0.5;\r\n}\r\n\r\n/* Days of week row */\r\n\r\n.calendarContainer .daysOfWeek {\r\n margin-bottom: 5px;\r\n padding-bottom: 5px;\r\n display: flex;\r\n width: 100%;\r\n color: #757575\r\n\r\n\r\n}\r\n\r\n.calendarContainer .daysOfWeek > div {\r\n flex-grow: 1;\r\n justify-content: space-between;\r\n width: 42px;\r\n}\r\n\r\n/* Month selector portion */\r\n\r\n.calendarContainer .monthsList {\r\n clear: both;\r\n width: 100%;\r\n}\r\n\r\n.calendarContainer .monthsList button {\r\n width: 33.33333332%;\r\n height: 25%;\r\n float: right;\r\n border: 1px solid #f9f9f9;\r\n outline: none;\r\n font-size: 1em;\r\n background: #fff;\r\n padding: 10px 0;\r\n cursor: pointer;\r\n}\r\n\r\n.calendarContainer .monthsList button:hover {\r\n background: #eeeeee;\r\n cursor: pointer;\r\n}\r\n\r\n/* Year selector portion */\r\n\r\n.calendarContainer .yearsList {\r\n clear: both;\r\n width: 100%;\r\n max-height: 200px;\r\n overflow-y: scroll;\r\n}\r\n\r\n.calendarContainer .yearsList button {\r\n width: 20%;\r\n height: 25%;\r\n float: right;\r\n border: 1px solid #f9f9f9;\r\n outline: none;\r\n font-size: 1em;\r\n background: #fff;\r\n padding: 10px 0;\r\n cursor: pointer;\r\n}\r\n\r\n.calendarContainer .yearsList button:hover {\r\n background: #eeeeee;\r\n cursor: pointer;\r\n}\r\n\r\n/* Selected state of buttons */\r\n\r\n.calendarContainer .selected button,\r\n.calendarContainer .selected button:hover :not([disabled]),\r\n.calendarContainer .selected button:active,\r\n.calendarContainer .selected button:focus {\r\n background-color: $selectedColor;\r\n color: #ffffff;\r\n}\r\n\r\n.calendarContainer.jalaali {\r\n direction: rtl;\r\n}\r\n\r\n.calendarContainer.jalaali .dayWrapper {\r\n float: right;\r\n}\r\n\r\n/*time picker style*/\r\n\r\n.time-picker-container {\r\n margin-bottom: 10;\r\n}\r\n\r\n.time-picker-container > .time-label {\r\n float: left;\r\n line-height: 30px;\r\n width: 50%;\r\n text-align: center;\r\n}\r\n\r\n.time-picker-container > .time-picker-panel {\r\n float: right;\r\n width: 50%;\r\n}\r\n\r\n.time-picker-container.jalaali > .time-label {\r\n float: right;\r\n}\r\n\r\n.time-picker-container.jalaali > .time-picker-panel {\r\n float: left;\r\n}\r\n\r\n.rc-time-picker {\r\n border-radius: 4px;\r\n display: inline-block;\r\n box-sizing: border-box;\r\n width: 100%;\r\n font-size: 1.2em;\r\n}\r\n\r\n.rc-time-picker * {\r\n box-sizing: border-box;\r\n}\r\n\r\n.rc-time-picker-input {\r\n direction: ltr;\r\n text-align: center;\r\n width: 100%;\r\n position: relative;\r\n display: inline-block;\r\n cursor: pointer;\r\n font-size: 1em;\r\n line-height: 1.5;\r\n}\r\n\r\n\r\n.rc-time-picker-input:focus {\r\n box-shadow: none;\r\n border: none;\r\n background-color: #f2f2f2;\r\n}\r\n\r\n.rc-time-picker:hover {\r\n background-color: #f2f2f2;\r\n}\r\n\r\n.rc-time-picker-panel {\r\n z-index: 2001;\r\n width: 170px;\r\n position: absolute;\r\n box-sizing: border-box;\r\n}\r\n\r\n.rc-time-picker-panel * {\r\n box-sizing: border-box;\r\n}\r\n\r\n.rc-time-picker-panel-inner {\r\n display: inline-block;\r\n position: relative;\r\n outline: none;\r\n list-style: none;\r\n font-size: 12px;\r\n text-align: left;\r\n background-color: #fff;\r\n background-clip: padding-box;\r\n line-height: 1.5;\r\n}\r\n\r\n.rc-time-picker-panel-input {\r\n margin: 0;\r\n width: 100%;\r\n cursor: default;\r\n line-height: 1.5;\r\n outline: 0;\r\n font-size: 1.4em;\r\n text-align: center;\r\n font-family: inherit;\r\n}\r\n\r\n.rc-time-picker-panel-input,\r\n.rc-time-picker-panel-input:hover {\r\n box-shadow: none;\r\n border: none;\r\n}\r\n\r\n.rc-time-picker-panel-input-wrap {\r\n box-sizing: border-box;\r\n position: relative;\r\n padding: 6px;\r\n border-bottom: 1px solid #e9e9e9;\r\n}\r\n\r\n.rc-time-picker-panel-input-invalid {\r\n border-color: red;\r\n}\r\n\r\n.rc-time-picker-panel-clear-btn {\r\n position: absolute;\r\n right: 6px;\r\n cursor: pointer;\r\n overflow: hidden;\r\n width: 20px;\r\n height: 20px;\r\n text-align: center;\r\n line-height: 20px;\r\n top: 6px;\r\n margin: 0;\r\n}\r\n\r\n.rc-time-picker-panel-clear-btn:after {\r\n content: 'x';\r\n font-size: 12px;\r\n color: #aaa;\r\n display: inline-block;\r\n line-height: 1;\r\n width: 20px;\r\n transition: color 0.3s ease;\r\n}\r\n\r\n.rc-time-picker-panel-clear-btn:hover:after {\r\n color: #666;\r\n}\r\n\r\n.rc-time-picker-panel-select {\r\n float: left;\r\n font-size: 12px;\r\n border: 1px solid #e9e9e9;\r\n border-width: 0 1px;\r\n margin-left: -1px;\r\n box-sizing: border-box;\r\n width: 56px;\r\n overflow: hidden;\r\n position: relative;\r\n}\r\n\r\n.rc-time-picker-panel-select-active {\r\n overflow-y: auto;\r\n}\r\n\r\n.rc-time-picker-panel-select:first-child {\r\n border-left: 0;\r\n margin-left: 0;\r\n}\r\n\r\n.rc-time-picker-panel-select:last-child {\r\n border-right: 0;\r\n}\r\n\r\n.rc-time-picker-panel-select ul {\r\n list-style: none;\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n width: 100%;\r\n max-height: 144px;\r\n overflow-x: hidden;\r\n overflow-y: scroll;\r\n}\r\n\r\n.rc-time-picker-panel-select li {\r\n list-style: none;\r\n box-sizing: content-box;\r\n margin: 0;\r\n padding: 0 0 0 16px;\r\n width: 100%;\r\n height: 24px;\r\n line-height: 24px;\r\n text-align: left;\r\n cursor: pointer;\r\n user-select: none;\r\n}\r\n\r\n.rc-time-picker-panel-select li:hover {\r\n background: #edfaff;\r\n}\r\n\r\nli.rc-time-picker-panel-select-option-selected {\r\n background: #edfaff;\r\n color: #2db7f5;\r\n}\r\n\r\nli.rc-time-picker-panel-select-option-disabled {\r\n color: #bfbfbf;\r\n}\r\n\r\nli.rc-time-picker-panel-select-option-disabled:hover {\r\n background: transparent;\r\n cursor: not-allowed;\r\n}\r\n\r\n.tether-element.tether-element-attached-top.tether-element-attached-center.tether-target-attached-bottom.tether-target-attached-center.tether-enabled {\r\n z-index: 2000;\r\n}\r\n\r\n.calendarContainer *,\r\n.datepicker-input {\r\n font-family: inherit;\r\n}\r\n\r\n.today {\r\n button {\r\n border: 3px solid $selectedColor !important;\r\n }\r\n}\r\n\r\n.jalaali.calendarContainer {\r\n .selectToday {\r\n padding: 4px 0 6px 0;\r\n }\r\n}\r\n\r\n.calendarButton {\r\n display: block;\r\n width: 100%;\r\n background: #4285f4;\r\n color: #fff;\r\n outline: none;\r\n border-radius: 5px;\r\n border: 0;\r\n cursor: pointer;\r\n padding: 5px 0 7px 0;\r\n transition: 0.2s all ease-in-out;\r\n transition-property: background;\r\n\r\n &:hover {\r\n background: darken(#4285f4, 10);\r\n }\r\n}\r\n\r\n.toggleButton {\r\n margin-bottom: 1rem;\r\n}\r\n\r\n.selectToday {\r\n margin-top: 1rem;\r\n}\r\n\r\n.highLightDot-container {\r\n text-align: center;\r\n bottom: 0;\r\n width: 100%;\r\n position: absolute;\r\n cursor: pointer;\r\n direction: ltr;\r\n\r\n .highLightDot {\r\n &:not(:first-child) {\r\n margin-left: 2px;\r\n }\r\n\r\n border: 1px solid #fff;\r\n display: inline-block;\r\n width: 7px;\r\n height: 7px;\r\n border-radius: 50%;\r\n }\r\n}\r\n\r\n.disabled {\r\n cursor: not-allowed;\r\n}\r\n\r\nbutton[disabled],\r\nbutton[disabled]:hover {\r\n color: #aaa;\r\n cursor: not-allowed;\r\n background-color: #ebebeb;\r\n}\r\n"]}