|
|
|
|
@ -1320,6 +1320,7 @@ $red: #e92424; |
|
|
|
|
float: left; |
|
|
|
|
margin: 15px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@keyframes fadeCalendar { |
|
|
|
|
from { |
|
|
|
|
opacity: 0; |
|
|
|
|
@ -1358,7 +1359,11 @@ $red: #e92424; |
|
|
|
|
|
|
|
|
|
// * end RangeDatePicker Component |
|
|
|
|
|
|
|
|
|
// TODO Start Calendar Component |
|
|
|
|
// TODO Start SimpleCalendar Component |
|
|
|
|
|
|
|
|
|
.Calendar * { |
|
|
|
|
font-family: "iranSans"; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.DatePicker { |
|
|
|
|
position: relative; |
|
|
|
|
@ -1368,11 +1373,16 @@ $red: #e92424; |
|
|
|
|
|
|
|
|
|
.DatePicker__input { |
|
|
|
|
background: #fff; |
|
|
|
|
border: 1px solid #ddd; |
|
|
|
|
padding: 0.4em 0.8em; |
|
|
|
|
font-family: inherit; |
|
|
|
|
border: 1px solid rgba(0, 0, 0, 0.4); |
|
|
|
|
padding: 0.6em 1.2em; |
|
|
|
|
font-family: "iranSans"; |
|
|
|
|
text-align: center; |
|
|
|
|
font-size: 12px; |
|
|
|
|
border-radius: 7px; |
|
|
|
|
} |
|
|
|
|
.DatePicker__input:focus { |
|
|
|
|
outline: 1px solid #06bace; |
|
|
|
|
color: #06bace; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.DatePicker__input.-rtl { |
|
|
|
|
@ -1382,6 +1392,9 @@ $red: #e92424; |
|
|
|
|
.DatePicker__input::placeholder { |
|
|
|
|
color: #979797; |
|
|
|
|
} |
|
|
|
|
.DatePicker__input:focus::placeholder { |
|
|
|
|
color: #06bace; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.DatePicker__calendarContainer.-top + .DatePicker__calendarArrow { |
|
|
|
|
top: auto; |
|
|
|
|
@ -1433,19 +1446,41 @@ $red: #e92424; |
|
|
|
|
--cl-color-black: #444444; |
|
|
|
|
--cl-color-disabled: #d4d4d4; |
|
|
|
|
--cl-color-error: #ff2929; |
|
|
|
|
font-family: "iranSans"; |
|
|
|
|
font-size: 10px; |
|
|
|
|
background: #fff; |
|
|
|
|
box-shadow: 0 1em 4em rgba(0, 0, 0, 0.07); |
|
|
|
|
background: rgba(245, 245, 245, 0.53); |
|
|
|
|
border: 1px solid #dbdbdb; |
|
|
|
|
box-shadow: 0 1em em rgba(0, 0, 0, 0.07); |
|
|
|
|
border-radius: 1em; |
|
|
|
|
position: relative; |
|
|
|
|
user-select: none; |
|
|
|
|
padding-top: 1.2em; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
width: 40em; |
|
|
|
|
z-index: 10; |
|
|
|
|
max-width: 90vw; |
|
|
|
|
min-height: 38.7em; |
|
|
|
|
} |
|
|
|
|
.Calendar.dashboard { |
|
|
|
|
--cl-color-black: #444444; |
|
|
|
|
--cl-color-disabled: #d4d4d4; |
|
|
|
|
--cl-color-error: #ff2929; |
|
|
|
|
font-family: "iranSans"; |
|
|
|
|
font-size: 10px; |
|
|
|
|
background: rgba(255, 255, 255, 1); |
|
|
|
|
border: 1px solid #edf2fb; |
|
|
|
|
box-shadow: 0 1em em rgba(0, 0, 0, 0.07); |
|
|
|
|
border-radius: 1em; |
|
|
|
|
position: relative; |
|
|
|
|
user-select: none; |
|
|
|
|
padding-top: 1.2em; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
width: 33em; |
|
|
|
|
width: 50em; |
|
|
|
|
z-index: 10; |
|
|
|
|
max-width: 90vw; |
|
|
|
|
min-height: 36.7em; |
|
|
|
|
min-height: 38.7em; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.DatePicker .Calendar, |
|
|
|
|
@ -1488,6 +1523,7 @@ $red: #e92424; |
|
|
|
|
z-index: 1; |
|
|
|
|
opacity: 1; |
|
|
|
|
transition: 0.2s; |
|
|
|
|
background-color: #06bace; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.Calendar__monthArrowWrapper:focus { |
|
|
|
|
@ -1502,17 +1538,17 @@ $red: #e92424; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.Calendar__monthArrowWrapper.-left { |
|
|
|
|
transform: rotate(90deg); |
|
|
|
|
transform: rotate(180deg); |
|
|
|
|
} |
|
|
|
|
.Calendar.-rtl .Calendar__monthArrowWrapper.-left { |
|
|
|
|
transform: rotate(-90deg); |
|
|
|
|
transform: rotate(-180deg); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.Calendar__monthArrowWrapper.-right { |
|
|
|
|
transform: rotate(-90deg); |
|
|
|
|
transform: rotate(-0deg); |
|
|
|
|
} |
|
|
|
|
.Calendar.-rtl .Calendar__monthArrowWrapper.-right { |
|
|
|
|
transform: rotate(90deg); |
|
|
|
|
transform: rotate(0deg); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.Calendar__monthArrowWrapper:active .Calendar__monthArrow { |
|
|
|
|
@ -1520,15 +1556,19 @@ $red: #e92424; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.Calendar__monthArrow { |
|
|
|
|
border-radius: 50%; |
|
|
|
|
border-radius: 7px; |
|
|
|
|
padding: 12px; |
|
|
|
|
transition: var(--animation-duration) transform; |
|
|
|
|
pointer-events: none; |
|
|
|
|
background-repeat: no-repeat; |
|
|
|
|
display: block; |
|
|
|
|
width: 1.7em; |
|
|
|
|
height: 1.7em; |
|
|
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg class='nc-icon-wrapper' fill='%23000000'%3E%3Cdefs stroke='none'%3E%3C/defs%3E%3Cpath class='cls-1' d='M12 23.25V.75' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5px'%3E%3C/path%3E%3Cpath class='cls-2' d='M22.5 11.25L12 .75 1.5 11.25' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5px' fill-rule='evenodd'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); |
|
|
|
|
width: 0.7em; |
|
|
|
|
height: 0.7em; |
|
|
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='15' height='15' viewBox='0 0 50 80' xml:space='preserve'%3E%3Cpolyline fill='none' stroke='%23FFFFFF' stroke-width='15' stroke-linecap='round' stroke-linejoin='round' points=' 0.375,0.375 45.63,38.087 0.375,75.8 '/%3E%3C/svg%3E"); |
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
background-color: #06bace; |
|
|
|
|
background-size: 10px; |
|
|
|
|
background-position: center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.Calendar__monthYearContainer { |
|
|
|
|
@ -1537,7 +1577,23 @@ $red: #e92424; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.Calendar__monthYear { |
|
|
|
|
font-size: 1.6em; |
|
|
|
|
font-size: 2em; |
|
|
|
|
font-weight: 500; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
position: absolute; |
|
|
|
|
top: 0; |
|
|
|
|
bottom: 0; |
|
|
|
|
left: 50%; |
|
|
|
|
will-change: transform, opacity; |
|
|
|
|
backface-visibility: hidden; |
|
|
|
|
transform: translateZ(0); |
|
|
|
|
transition: var(--animation-duration); |
|
|
|
|
line-height: 1; |
|
|
|
|
color: #246e8a; |
|
|
|
|
} |
|
|
|
|
.Calendar__monthYear.dashboard { |
|
|
|
|
font-size: 2em; |
|
|
|
|
font-weight: 500; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
@ -1550,6 +1606,7 @@ $red: #e92424; |
|
|
|
|
transform: translateZ(0); |
|
|
|
|
transition: var(--animation-duration); |
|
|
|
|
line-height: 1; |
|
|
|
|
color: #65a9ff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.Calendar__monthYear.-hiddenNext { |
|
|
|
|
@ -1760,7 +1817,7 @@ $red: #e92424; |
|
|
|
|
font-size: 1.4em; |
|
|
|
|
min-width: 85%; |
|
|
|
|
padding: 0.2em 0.5em; |
|
|
|
|
border-radius: 8.5px; |
|
|
|
|
border-radius: 5px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.Calendar__monthSelector.-open, |
|
|
|
|
@ -1808,7 +1865,7 @@ $red: #e92424; |
|
|
|
|
|
|
|
|
|
.Calendar__monthSelectorItem.-active .Calendar__monthSelectorItemText, |
|
|
|
|
.Calendar__yearSelectorItem.-active .Calendar__yearSelectorText { |
|
|
|
|
background-color: var(--cl-color-primary); |
|
|
|
|
background-color: #006c94; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -1821,12 +1878,33 @@ $red: #e92424; |
|
|
|
|
padding: 0 2.6em; |
|
|
|
|
position: relative; |
|
|
|
|
} |
|
|
|
|
.Calendar__weekDays.dashboard { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
color: var(--cl-color-disabled); |
|
|
|
|
font-size: 1.2em; |
|
|
|
|
margin-bottom: 0.7em; |
|
|
|
|
padding: 0.75em 2.6em; |
|
|
|
|
position: relative; |
|
|
|
|
background-color: #edf2fb; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.Calendar__weekDay { |
|
|
|
|
display: block; |
|
|
|
|
width: calc(100% / 7); |
|
|
|
|
|
|
|
|
|
text-align: center; |
|
|
|
|
text-decoration: none; |
|
|
|
|
border: 0px; |
|
|
|
|
color: #06bace; |
|
|
|
|
margin: 0.2em; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
} |
|
|
|
|
.Calendar__weekDay.dashboard { |
|
|
|
|
color: #a2b4cb; |
|
|
|
|
} |
|
|
|
|
.Calendar__weekDay[title] { |
|
|
|
|
text-decoration: none; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.Calendar__sectionWrapper { |
|
|
|
|
@ -1884,20 +1962,45 @@ $red: #e92424; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.Calendar__day { |
|
|
|
|
display: block; |
|
|
|
|
width: calc(100% / 7); |
|
|
|
|
width: calc(100% / 7 - 6px); |
|
|
|
|
text-align: center; |
|
|
|
|
padding: calc(0.25em - 1px) 0; |
|
|
|
|
padding: calc(0.25em - 1px); |
|
|
|
|
font-size: 1.6em; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
border-radius: 7px; |
|
|
|
|
transition: 0.2s; |
|
|
|
|
border: 1px solid transparent; |
|
|
|
|
margin-bottom: 0.3em; |
|
|
|
|
margin: 3px; |
|
|
|
|
color: rgba(0, 0, 0, 0.8); |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
cursor: pointer; |
|
|
|
|
vertical-align: middle; |
|
|
|
|
background-color: #f3f3f3; |
|
|
|
|
color: #06bace; |
|
|
|
|
} |
|
|
|
|
.Calendar__day.dashboard { |
|
|
|
|
width: calc(100% / 7 - 6px); |
|
|
|
|
text-align: center; |
|
|
|
|
padding: calc(0.25em - 1px); |
|
|
|
|
font-size: 1.6em; |
|
|
|
|
border-radius: 7px; |
|
|
|
|
transition: 0.2s; |
|
|
|
|
border: 1px solid transparent; |
|
|
|
|
margin: 3px; |
|
|
|
|
color: rgba(0, 0, 0, 0.8); |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
cursor: pointer; |
|
|
|
|
vertical-align: middle; |
|
|
|
|
background-color: transparent; |
|
|
|
|
color: #00253a; |
|
|
|
|
} |
|
|
|
|
.Calendar__day span { |
|
|
|
|
padding: -10px; |
|
|
|
|
margin-top: -30px; |
|
|
|
|
font-size: 28px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.Calendar__day:focus { |
|
|
|
|
@ -1916,45 +2019,46 @@ $red: #e92424; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.Calendar__day:not(.-blank):not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween):not(.-selected):hover { |
|
|
|
|
background: #eaeaea; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
color: var(--cl-color-black); |
|
|
|
|
border-color: transparent; |
|
|
|
|
background-color: #dafbff; |
|
|
|
|
color: #06bace; |
|
|
|
|
border: 1px solid #06bace; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.Calendar__day.-selected, |
|
|
|
|
.Calendar__day.-selectedStart, |
|
|
|
|
.Calendar__day.-selectedEnd { |
|
|
|
|
background: var(--cl-color-primary); |
|
|
|
|
background: #006c94; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.Calendar__day.-ltr.-selectedStart { |
|
|
|
|
border-radius: 0; |
|
|
|
|
border-top-left-radius: 100em; |
|
|
|
|
border-bottom-left-radius: 100em; |
|
|
|
|
border-top-left-radius: 7px; |
|
|
|
|
border-bottom-left-radius: 7px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.Calendar__day.-rtl.-selectedStart { |
|
|
|
|
border-radius: 0; |
|
|
|
|
border-top-right-radius: 100em; |
|
|
|
|
border-bottom-right-radius: 100em; |
|
|
|
|
border-top-right-radius: 7px; |
|
|
|
|
border-bottom-right-radius: 7px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.Calendar__day.-selectedBetween { |
|
|
|
|
background: var(--cl-color-primary-light); |
|
|
|
|
color: var(--cl-color-primary); |
|
|
|
|
background: rgba(0, 108, 148, 0.07); |
|
|
|
|
|
|
|
|
|
border-radius: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.Calendar__day.-ltr.-selectedEnd { |
|
|
|
|
border-top-right-radius: 100em; |
|
|
|
|
border-bottom-right-radius: 100em; |
|
|
|
|
border-radius: 0; |
|
|
|
|
border-top-right-radius: 7px; |
|
|
|
|
border-bottom-right-radius: 7px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.Calendar__day.-rtl.-selectedEnd { |
|
|
|
|
border-top-left-radius: 100em; |
|
|
|
|
border-bottom-left-radius: 100em; |
|
|
|
|
border-radius: 0; |
|
|
|
|
border-top-left-radius: 7px; |
|
|
|
|
border-bottom-left-radius: 7px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.Calendar__day.-weekend:not(.-selected):not(.-blank):not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween) { |
|
|
|
|
@ -1971,7 +2075,6 @@ $red: #e92424; |
|
|
|
|
cursor: default !important; |
|
|
|
|
} |
|
|
|
|
.Calendar__day.-selected { |
|
|
|
|
border-radius: 50%; |
|
|
|
|
} |
|
|
|
|
.Calendar__day.-today:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween) { |
|
|
|
|
font-weight: 600; |
|
|
|
|
@ -2008,7 +2111,57 @@ $red: #e92424; |
|
|
|
|
position: relative; |
|
|
|
|
z-index: 1; |
|
|
|
|
} |
|
|
|
|
.Calendar__footer .footer__Events { |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
align-items: center; |
|
|
|
|
font-size: 12px; |
|
|
|
|
font-family: "IranSans"; |
|
|
|
|
padding: 3px; |
|
|
|
|
} |
|
|
|
|
.Calendar__footer .footer__Events.dashboard { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: start; |
|
|
|
|
width: 100%; |
|
|
|
|
align-items: flex-start; |
|
|
|
|
font-size: 12px; |
|
|
|
|
font-family: "IranSans"; |
|
|
|
|
margin-top: 10px; |
|
|
|
|
padding: 1em 2em; |
|
|
|
|
border-top: 1px solid #edf2fb; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.Calendar__footer .footer__Events.dashboard p { |
|
|
|
|
font-size: 15px; |
|
|
|
|
margin: 2.5px 0px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.Calendar .holiday span { |
|
|
|
|
color: #ff2929; |
|
|
|
|
} |
|
|
|
|
.Calendar .DayNumDiv { |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
} |
|
|
|
|
.Calendar .DayNumDiv span { |
|
|
|
|
margin: 0; |
|
|
|
|
padding: 0; |
|
|
|
|
margin-bottom: -5px; |
|
|
|
|
} |
|
|
|
|
.Calendar .DayNumDiv .eventDots { |
|
|
|
|
margin-top: -10px; |
|
|
|
|
font-size: 20px; |
|
|
|
|
} |
|
|
|
|
.GoToTodayButton { |
|
|
|
|
background-color: #006c94; |
|
|
|
|
padding: 7.5px; |
|
|
|
|
font-size: 12px; |
|
|
|
|
color: white; |
|
|
|
|
font-family: "iranSans"; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
float: left; |
|
|
|
|
margin: 15px; |
|
|
|
|
} |
|
|
|
|
@keyframes fadeCalendar { |
|
|
|
|
from { |
|
|
|
|
opacity: 0; |
|
|
|
|
@ -2045,7 +2198,7 @@ $red: #e92424; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// * end Calendar Component |
|
|
|
|
// * end SimpleCalendar Component |
|
|
|
|
|
|
|
|
|
// TODO Start Folderlist Component |
|
|
|
|
|
|
|
|
|
|
