react-advance-jalaali-datepicker2/dist/Partials/Styles.js

Jalaali React Date Picker developed with love by Alireza Kasaaian

(function (global, factory) {
    if (typeof define === "function" && define.amd) {
        define(["exports"], factory);
    } else if (typeof exports !== "undefined") {
        factory(exports);
    } else {
        var mod = {
            exports: {}
        };
        factory(mod.exports);
        global.Styles = mod.exports;
    }
})(this, function (exports) {
    "use strict";

    Object.defineProperty(exports, "__esModule", {
        value: true
    });
    var Styles = function Styles(nDays) {
        return "\n        .JDatePicker {\n            width: 300px;\n            min-height: 210px;\n            padding: 5px;\n            position: absolute;\n            background: -moz-linear-gradient(90deg, rgba(232,232,232,1) 0%, rgba(255,255,255,1) 100%); /* ff3.6+ */\n            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(232,232,232,1))); /* safari4+,chrome */\n            background: -webkit-linear-gradient(90deg, rgba(232,232,232,1) 0%, rgba(255,255,255,1) 100%); /* safari5.1+,chrome10+ */\n            background: -o-linear-gradient(90deg, rgba(232,232,232,1) 0%, rgba(255,255,255,1) 100%); /* opera 11.10+ */\n            background: -ms-linear-gradient(90deg, rgba(232,232,232,1) 0%, rgba(255,255,255,1) 100%); /* ie10+ */\n            background: linear-gradient(0deg, rgba(232,232,232,1) 0%, rgba(255,255,255,1) 100%); /* w3c */\n            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#E8E8E8',GradientType=0 ); /* ie6-9 */ \n            border-radius: 5px;\n            box-shadow: 0px 0px 3px #15596c;\n            z-index: 1;\n        }\n        .days-titles div {\n            width: 14.28%;\n            display: inline-block;\n            font-size: 14px;\n            font-weight: 300;\n            text-align: center;\n        }\n        .JDatePicker .JC-years {\n            position:relative;\n            width:30%;\n            display: flex;\n            /*transform: translate(-50%, 0);*/\n            font-size:small;\n        }\n        .JDatePicker .JC-years select {\n            cursor:pointer;\n            border-radius:5px;\n            margin-bottom:5px;\n            background-color: inherit;\n            border:1px solid #e1e1e1 !important;\n            color: black;\n            padding: 6px;\n            width: 250px;\n            border: none;\n            font-size: 14px;\n            /*box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);*/\n            -webkit-appearance: button;\n            appearance: button;\n            outline: none;\n        }\n        .JDatePicker .JDheader svg {\n            color: #4778b5;\n        }\n        .JDatePicker .JC-years svg {\n          position: absolute;\n          top: 0;\n          left: 10px;\n          width: 20%;\n          height: 100%;\n          text-align: center;\n          pointer-events: none;\n          transform: scale(0.5);\n        }\n        .JDatePicker .JC-years::after {\n          display:none;\n          content: \"\\f107\";\n          font-size: 0.6em;\n          font-family: \"Font Awesome 5 Solid\";\n        }\n        \n        /*.JDatePicker .JC-years:hover::before {\n          color: rgba(255, 255, 255, 0.6);\n          background-color: rgba(255, 255, 255, 0.2);\n        }*/\n        \n        .JDatePicker .JC-years select option {\n          padding: 30px;\n        }\n        .JDatePicker .JC-months {\n            position: relative;\n            display: inline-block;\n            width: 100%;\n        }\n        .JDatePicker .monthPicker {\n            position: absolute;\n            right: -116px;\n            width: 300px;\n            background: #fff;\n            text-align: center;\n            padding: 5px;\n            border-radius: 5px;\n            top: -5px;\n            height:210px;\n            box-shadow: 0px 0px 7px -2px #000;\n            z-index: 1;\n        }\n        .JDatePicker .yearPicker {\n            position: absolute;\n            right: 0px;\n            width: 300px;\n            background: #fff;\n            text-align: center;\n            padding: 5px;\n            border-radius: 5px;\n            top: 0px;\n            height:210px;\n            box-shadow: 0px 0px 7px -2px #000;\n            z-index: 1;\n        }\n        .JDatePicker .month-items.selected {\n            background: #80cfdf;\n            color: black;\n        }\n        .JDatePicker .month-items:hover {\n            background: #e6e6e6;\n            color: black;\n        }\n        .JDatePicker .month-items {\n            width: 33.33%;\n            float: right;\n            text-align: center;\n            cursor: pointer;\n            padding: 4px 0px;\n            border: 1px solid #ccc;\n            font-size: 12px;\n            height:50px;\n        }\n        .JDatePicker .JC-months .prev,  .JDatePicker .JC-months .next{\n            float: right;\n            width: 20%;\n            text-align: center;\n            transform: rotate(180deg);\n            cursor: pointer;\n        }\n\t\t\n        .JDatePicker .JC-months span:first-child{\n            float: right;\n            width: 15%;\n        }\n        .JDatePicker .JC-months .holder:last-child{\n            float: right;\n            width: 100%;\n            padding-top: 4px;\n        }\n        .JDatePicker .JC-days {\n            position: relative;\n            display: inline-block;\n            background: #f7f7f7;\n            box-shadow: 0 2px 3px -2px #88c4d5;\n        }\n        .JDatePicker .JC-days .holder {\n            line-height: 24px;\n        }\n        .JDatePicker .print-month {\n            width: 60%;\n            text-align: center;\n            float: right;\n            cursor: pointer;\n        }\n        .JDatePicker .day-items{\n            width: 14.28%;\n            float: right;\n            text-align: center;\n            cursor: pointer;\n            //border-bottom: solid #fff 1px;\n            //border-left: 1px solid #fff;\n        }\n        .JDatePicker .day-items:hover, .JDatePicker .day-items.selected {\n            background: #cbdee4;\n        }\n        .JDatePicker .JDheader { \n            display:flex;\n            box-shadow: 0 3px 3px -2px #88c4d5;\n        }\n        .JDatePicker .JDheader .right{\n            display: inline-block;\n            width: 30%;\n        }\n        .JDatePicker .JDheader .left {\n            display: inline-block;\n            width: 70%;\n        }\n        \n        .JDatePicker .JDheader .left{\n            text-align: center;\n        }\n        .JDatePicker .JDheader .right .number {\n            width: 70%;\n            direction: ltr;\n            text-align: center;\n            display: inline-block;\n        }\n        .JDatePicker .JDheader .right .number:hover {\n            border: 1px solid #ccc;\n            cursor: text !important;\n        }\n        .JDatePicker .JDheader .right input[type=\"tel\"] {\n            width: 40%;\n            z-index: 2;\n            direction: ltr;\n            text-align: center;\n            display: inline-block;\n            top: 8px;\n            position: absolute;\n        }\n        .JDatePicker .JC-tooltip {\n            position: absolute;\n            background: #d9d9d9;\n            z-index: 1;\n            padding: 0px 10px;\n        }\n        .JDatePicker button {\n            border: none;\n            color: #fff;\n            font-size: 16px;\n            margin: 0 10px;\n            width: 40px;\n            height: 26px;\n            border-radius: 5px;\n        }\n        .JDatePicker .JDsubmit{\n            background: #7fc6ff;\n        }\n        .JDatePicker table td{\n            text-align:center;\n        }\n        .JDatePicker table tr td span{\n            display:block;\n            width:23%;\n            height:54px;\n            line-height:54px;\n            float:left;\n            margin:1%;\n            cursor:pointer;\n            border-radius: 4px;\n        }\n        .JDatePicker table tr td span:hover{\n            background: #eeeeee;\n        }\n        \n        .JDatePicker table tr td span.old, .JDatePicker table tr td span.new{\n            color:#999999;\n        }\n        \n        .JDatePicker table tr td span.active:hover, \n        .JDatePicker table tr td span.active:hover:hover, \n        .JDatePicker table tr td span.active.disabled:hover, \n        .JDatePicker table tr td span.active.disabled:hover:hover, \n        .JDatePicker table tr td span.active:active, \n        .JDatePicker table tr td span.active:hover:active, \n        .JDatePicker table tr td span.active.disabled:active, \n        .JDatePicker table tr td span.active.disabled:hover:active, \n        .JDatePicker table tr td span.active.active, \n        .JDatePicker table tr td span.active:hover.active, \n        .JDatePicker table tr td span.active.disabled.active, \n        .JDatePicker table tr td span.active.disabled:hover.active, \n        .JDatePicker table tr td span.active.disabled, \n        .JDatePicker table tr td span.active:hover.disabled, \n        .JDatePicker table tr td span.active.disabled.disabled, \n        .JDatePicker table tr td span.active.disabled:hover.disabled, \n        .JDatePicker table tr td span.active[disabled], \n        .JDatePicker table tr td span.active:hover[disabled], \n        .JDatePicker table tr td span.active.disabled[disabled], \n        .JDatePicker table tr td span.active.disabled:hover[disabled]{\n            background-color:#80cfdf;\n        }\n        \n        .print-month p{\n            margin:4px;\n        }\n        \n        .jdtrp > div {\n            display: initial;\n            margin: 0 6px;\n        }\n        ";
    };
    exports.default = Styles;
});