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