From f5b09242f9c718f0a847bf3f72a1d5efcb1a03c9 Mon Sep 17 00:00:00 2001 From: mahdi Date: Sun, 15 May 2022 11:43:39 +0430 Subject: [PATCH] update 5 files and delete 1 file --- .../Datepicker/RangeDatePicker/index.js | 3 +- .../Datepicker/RangeDatePicker/index.scss | 750 ----------------- src/components/SearchWithSuggestion/index.js | 2 +- src/index.scss | 758 ++++++++++++++++++ src/redux/data.js | 11 + 5 files changed, 772 insertions(+), 752 deletions(-) delete mode 100644 src/components/Datepicker/RangeDatePicker/index.scss diff --git a/src/components/Datepicker/RangeDatePicker/index.js b/src/components/Datepicker/RangeDatePicker/index.js index c3a7dd3..cf04d87 100644 --- a/src/components/Datepicker/RangeDatePicker/index.js +++ b/src/components/Datepicker/RangeDatePicker/index.js @@ -1,5 +1,6 @@ +// it has style inside index.scss ---> // Start RangeDatePicker && end RangeDatePicker + import React, { useState } from "react"; -import "./index.scss"; import DatePicker from "../CalendarComponents"; diff --git a/src/components/Datepicker/RangeDatePicker/index.scss b/src/components/Datepicker/RangeDatePicker/index.scss deleted file mode 100644 index a1681c8..0000000 --- a/src/components/Datepicker/RangeDatePicker/index.scss +++ /dev/null @@ -1,750 +0,0 @@ -.Calendar *{ - font-family: 'iranSans'; -} - -.DatePicker { - position: relative; - display: inline-block; - z-index: 100; - } - - .DatePicker__input { - background: #fff; - 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 { - direction: rtl; - } - - .DatePicker__input::placeholder { - color: #979797; - } - .DatePicker__input:focus::placeholder{ - color: #06BACE; - } - - .DatePicker__calendarContainer.-top + .DatePicker__calendarArrow { - top: auto; - bottom: calc(100% + 10px); - transform: translateY(-2.5rem) rotate(180deg); - animation: fadeArrowFlipped 0.3s forwards; - } - - .DatePicker__calendarContainer { - position: absolute; - top: calc(100% + 20px); - left: 50%; - transform: translateX(-50%); - } - - .DatePicker__calendarContainer.-top { - top: auto; - bottom: calc(100% + 20px); - } - - .Calendar, - .Calendar * { - margin: 0; - padding: 0; - box-sizing: border-box; - direction: ltr; - } - - .Calendar, - .Calendar.-rtl * { - direction: rtl; - } - - .DatePicker__calendarArrow { - position: absolute; - width: 0; - height: 0; - top: calc(100% + 10px); - left: 0; - right: 0; - margin: 0 auto; - border-style: solid; - z-index: 10; - border-width: 0 10px 10px 10px; - border-color: transparent transparent #fff transparent; - - } - - .Calendar { - --cl-color-black: #444444; - --cl-color-disabled: #d4d4d4; - --cl-color-error: #ff2929; - font-family:'iranSans'; - font-size: 10px; - 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; - } - - .DatePicker .Calendar, - .DatePicker__calendarArrow { - transform: translateY(2.5em); - opacity: 0; - animation: fadeCalendar 0.3s forwards; - - } - - .DatePicker__calendarContainer.-top .Calendar { - transform: translateY(-2.5em); - } - - .Calendar.-noFocusOutline *:focus { - outline: none !important; - } - - .Calendar > :not(.Calendar__footer) button { - font-family: inherit; - background: transparent; - cursor: pointer; - -webkit-tap-highlight-color: transparent; - outline: none; - } - - .Calendar__header { - display: flex; - color: var(--cl-color-black); - padding: 2em 2.9em; - align-items: center; - overflow: hidden; - } - - .Calendar__monthArrowWrapper { - line-height: 0; - font-size: 1em; - padding: 3px; - position: relative; - border: none; - z-index: 1; - opacity: 1; - transition: 0.2s; - background-color: #06BACE; - } - - .Calendar__monthArrowWrapper:focus { - outline: 1px dashed rgba(0, 0, 0, 0.4); - outline-offset: 2px; - } - - .Calendar__monthArrowWrapper:disabled, - .Calendar__monthArrowWrapper.-hidden { - opacity: 0; - pointer-events: none; - } - - .Calendar__monthArrowWrapper.-left { - transform: rotate(180deg); - } - .Calendar.-rtl .Calendar__monthArrowWrapper.-left { - transform: rotate(-180deg); - } - - .Calendar__monthArrowWrapper.-right { - transform: rotate(-0deg); - - } - .Calendar.-rtl .Calendar__monthArrowWrapper.-right { - transform: rotate(0deg); - } - - .Calendar__monthArrowWrapper:active .Calendar__monthArrow { - transform: scale(0.7); - } - - .Calendar__monthArrow { - border-radius: 7px; - padding: 12px; - transition: var(--animation-duration) transform; - pointer-events: none; - background-repeat: no-repeat; - display: block; - 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 { - flex: 1; - position: relative; - } - - .Calendar__monthYear { - 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.-hiddenNext { - opacity: 0; - transform: translateX(50%); - } - - .Calendar.-rtl .Calendar__monthYear.-hiddenNext { - transform: translateX(-150%); - } - - .Calendar__monthYear.-hiddenPrevious { - opacity: 0; - transform: translateX(-150%); - } - - .Calendar.-rtl .Calendar__monthYear.-hiddenPrevious { - transform: translateX(50%); - } - - .Calendar__monthYear.-shown { - opacity: 1; - margin-top: auto; - margin-bottom: auto; - transform: translateX(-50%); - } - - .Calendar__monthYear.-shownAnimated { - animation: var(--animation-duration) fadeTextToCenter forwards; - } - - .Calendar__monthYear > * { - padding: 0.2em 0.5em; - border: 1px solid transparent; - transition: var(--animation-duration); - font-size: 1.05em; - display: flex; - justify-content: center; - align-items: center; - transform: translateX(0) scale(0.95); - will-change: transform; - border-radius: 5px; - } - - .Calendar__monthYear:not(.-shown) > *, - .Calendar__monthYear > *.-hidden { - cursor: default; - pointer-events: none; - } - - .Calendar__monthText { - margin-left: -0.3em; - } - .Calendar__yearText:last-child { - margin-right: -0.3em; - } - - .Calendar__monthYear.-shown > *:hover, - .Calendar:not(.-noFocusOutline) .Calendar__monthYear.-shown > *:focus, - .Calendar__monthYear > *.-activeBackground { - background: #f5f5f5; - } - - .Calendar__monthText:hover { - transform: translateX(-0.2em) scale(0.95); - } - .Calendar.-rtl .Calendar__monthText:hover { - transform: translateX(0.2em) scale(0.95); - } - - .Calendar__yearText:hover { - transform: translateX(0.2em) scale(0.95); - } - .Calendar.-rtl .Calendar__yearText:hover { - transform: translateX(-0.2em) scale(0.95); - } - - .Calendar__monthYear .Calendar__yearText.-hidden { - transform: translateX(50%); - opacity: 0; - } - - .Calendar.-rtl .Calendar__monthYear .Calendar__yearText.-hidden { - transform: translateX(-50%); - } - - .Calendar__monthYear .Calendar__monthText.-hidden { - transform: translateX(-50%); - opacity: 0; - } - - .Calendar.-rtl .Calendar__monthYear .Calendar__monthText.-hidden { - transform: translateX(50%); - } - - .Calendar__monthYear:not(.-shown) > * { - pointer-events: none; - } - - .Calendar__monthSelectorAnimationWrapper, - .Calendar__yearSelectorAnimationWrapper { - position: absolute; - width: 100%; - height: 80%; - bottom: 0; - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; - } - - .Calendar__monthSelectorWrapper { - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - } - - .Calendar__monthSelector { - padding: 0 2.5em; - align-content: center; - padding-bottom: 2em; - } - - .Calendar__monthSelector, - .Calendar__yearSelector { - display: flex; - flex-wrap: wrap; - position: relative; - z-index: 2; - background-color: #fff; - transform: translateY(-150%); - will-change: transform; - transition: 0.6s; - height: 100%; - } - - .Calendar__yearSelectorWrapper { - width: 100%; - height: 100%; - } - - .Calendar__yearSelectorWrapper::after, - .Calendar__yearSelectorWrapper::before { - content: ''; - width: 100%; - height: 5em; - position: absolute; - left: 0; - opacity: 0; - transition: 0.4s; - transition-delay: 0.2s; - } - - .Calendar__yearSelectorWrapper::after { - background-image: linear-gradient(to bottom, #fff, #fff 10%, rgba(245, 245, 245, 0)); - top: -0.1em; - } - - .Calendar__yearSelectorWrapper::before { - background-image: linear-gradient(to top, #fff, #fff 10%, rgba(245, 245, 245, 0)); - bottom: 0; - } - - .Calendar__yearSelectorWrapper.-faded::after, - .Calendar__yearSelectorWrapper.-faded::before { - opacity: 1; - z-index: 3; - } - - .Calendar__yearSelector { - align-content: flex-start; - scrollbar-width: 0; - overflow: scroll; - position: relative; - width: 100%; - padding: 5em 2em; - -ms-overflow-style: none; - } - - .Calendar__yearSelector::-webkit-scrollbar { - display: none; - } - - .Calendar__yearSelectorItem { - width: 25%; - display: flex; - justify-content: center; - } - - .Calendar__yearSelectorItem:not(:nth-child(-n + 4)) { - margin-top: 1.5em; - } - - .Calendar__yearSelectorText { - border: none; - font-size: 1.4em; - min-width: 85%; - padding: 0.2em 0.5em; - border-radius: 5px; - } - - .Calendar__monthSelector.-open, - .Calendar__yearSelector.-open { - transform: translateY(0); - } - - .Calendar__yearSelectorText:focus, - .Calendar__monthSelectorItemText:focus { - outline: 1px dashed rgba(0, 0, 0, 0.4); - outline-offset: 2px; - } - - .Calendar__monthSelectorItem { - width: calc(100% / 3); - display: flex; - justify-content: center; - } - - .Calendar__monthSelectorItem:not(:nth-child(-n + 3)) { - margin-top: 2em; - } - - .Calendar__monthSelectorItemText { - border: none; - padding: 0.4em 0.4em; - border-radius: 8.5px; - font-size: 1.3em; - min-width: 70%; - transition: 0.3s; - } - - .Calendar__monthSelectorItem:not(.-active) .Calendar__monthSelectorItemText:not(:disabled):hover, - .Calendar__yearSelectorItem:not(.-active) .Calendar__yearSelectorText:not(:disabled):hover { - background: #f5f5f5; - } - - .Calendar__monthSelectorItemText:disabled, - .Calendar__yearSelectorText:disabled { - opacity: 0.5; - cursor: default; - } - - .Calendar__monthSelectorItem.-active .Calendar__monthSelectorItemText, - .Calendar__yearSelectorItem.-active .Calendar__yearSelectorText { - background-color: #006C94; - color: #fff; - } - - .Calendar__weekDays { - display: flex; - justify-content: space-between; - color: var(--cl-color-disabled); - font-size: 1.2em; - margin-bottom: 0.7em; - padding: 0 2.6em; - position: relative; - } - - .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[title]{ - text-decoration: none; - } - - .Calendar__sectionWrapper { - position: relative; - min-height: 25.8em; - overflow: hidden; - } - - .Calendar__section { - display: flex; - flex-direction: column; - padding: 0 3.2em; - position: absolute; - color: var(--cl-color-black); - top: 0; - padding-top: 0.5em; - left: 0; - width: 100%; - will-change: transform, opacity; - transform: translateZ(0); - backface-visibility: hidden; - transition: var(--animation-duration); - } - - .Calendar__section.-hiddenPrevious { - opacity: 0.5; - transform: translateX(-90%); - } - - .Calendar.-rtl .Calendar__section.-hiddenPrevious { - transform: translateX(90%); - } - - .Calendar__section.-hiddenNext { - opacity: 0.5; - transform: translateX(90%); - } - - .Calendar.-rtl .Calendar__section.-hiddenNext { - transform: translateX(-90%); - } - - .Calendar__section.-shown { - opacity: 1; - transform: translateX(0); - } - - .Calendar__section.-shownAnimated { - animation: var(--animation-duration) FadeContentToCenter forwards; - } - - .Calendar__weekRow { - display: flex; - width: 100%; - } - - .Calendar__day { - 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; - align-items: center; - - cursor: pointer; - vertical-align: middle; - background-color: #F3F3F3; - color:#06BACE; - - } - .Calendar__day span{ - padding: -10px; - margin-top: -30px; - font-size: 28px; - - } - - .Calendar__day:focus { - outline: 1px dashed rgba(0, 0, 0, 0.4); - outline-offset: 2px; - } - - .Calendar__day.-ltr { - min-height: 2.6em; - font-size: 1.45em; - } - - .Calendar__day.-rtl { - font-size: 1.55em; - height: 2.45em; - } - - .Calendar__day:not(.-blank):not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween):not(.-selected):hover { - - background-color: #DAFBFF; - color: #06BACE; - border:1px solid #06BACE; - } - - .Calendar__day.-selected, - .Calendar__day.-selectedStart, - .Calendar__day.-selectedEnd { - background: #006C94; - color: #fff; - } - - .Calendar__day.-ltr.-selectedStart { - border-radius: 0; - border-top-left-radius: 7px; - border-bottom-left-radius: 7px; - } - - .Calendar__day.-rtl.-selectedStart { - border-radius: 0; - border-top-right-radius: 7px; - border-bottom-right-radius: 7px; - } - - .Calendar__day.-selectedBetween { - background:rgba(0, 108, 148, 0.07); - - border-radius: 0; - } - - .Calendar__day.-ltr.-selectedEnd { - border-radius: 0; - border-top-right-radius: 7px; - border-bottom-right-radius: 7px; - } - - .Calendar__day.-rtl.-selectedEnd { - 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) { - color: var(--cl-color-error); - } - - .Calendar__day.-weekend.-today:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween)::after { - background: var(--cl-color-error); - } - - .Calendar__day.-disabled { - color: var(--cl-color-disabled) !important; - background: transparent !important; - cursor: default !important; - } - .Calendar__day.-selected { - - } - .Calendar__day.-today:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween) { - font-weight: 600; - color: var(--cl-color-black); - color: #000; - position: relative; - } - - .Calendar__day.-today:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween)::after { - content: ''; - position: absolute; - bottom: 0.2em; - display: block; - width: 0.6em; - height: 1px; - background: #000; - left: 50%; - opacity: 0.5; - transform: translateX(-50%); - transition: 0.2s; - } - - .Calendar__day.-today:hover:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween)::after { - opacity: 0; - } - - .Calendar__day.-blank { - color: transparent; - cursor: default; - pointer-events: none; - } - - .Calendar__footer { - 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 .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; - } - - to { - opacity: 1; - transform: translateY(0); - } - } - - @keyframes fadeArrowFlipped { - from { - opacity: 0; - } - - to { - opacity: 1; - transform: translateY(0) rotate(180deg); - } - } - - @keyframes fadeTextToCenter { - to { - opacity: 1; - transform: translateX(-50%); - } - } - - @keyframes FadeContentToCenter { - to { - opacity: 1; - transform: translateX(0); - } - } - \ No newline at end of file diff --git a/src/components/SearchWithSuggestion/index.js b/src/components/SearchWithSuggestion/index.js index 3515a66..2922da2 100644 --- a/src/components/SearchWithSuggestion/index.js +++ b/src/components/SearchWithSuggestion/index.js @@ -8,7 +8,7 @@ const langDetector = (lang, option1, option2) => { export default function PopularSearch(props) { const [value, setValue] = useState(""); const [popularsToggle, setPopularsToggle] = useState(false); - const { lang, theme, populars } = props; + const { lang, theme, populars, searchIcon } = props; const onChange = (val) => { setValue(val); diff --git a/src/index.scss b/src/index.scss index 247e066..af437a4 100644 --- a/src/index.scss +++ b/src/index.scss @@ -591,6 +591,764 @@ $red: #e92424; // * end DateRangePicker Component +// TODO Start RangeDatePicker Component + +.Calendar * { + font-family: "iranSans"; +} + +.DatePicker { + position: relative; + display: inline-block; + z-index: 100; +} + +.DatePicker__input { + background: #fff; + 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 { + direction: rtl; +} + +.DatePicker__input::placeholder { + color: #979797; +} +.DatePicker__input:focus::placeholder { + color: #06bace; +} + +.DatePicker__calendarContainer.-top + .DatePicker__calendarArrow { + top: auto; + bottom: calc(100% + 10px); + transform: translateY(-2.5rem) rotate(180deg); + animation: fadeArrowFlipped 0.3s forwards; +} + +.DatePicker__calendarContainer { + position: absolute; + top: calc(100% + 20px); + left: 50%; + transform: translateX(-50%); +} + +.DatePicker__calendarContainer.-top { + top: auto; + bottom: calc(100% + 20px); +} + +.Calendar, +.Calendar * { + margin: 0; + padding: 0; + box-sizing: border-box; + direction: ltr; +} + +.Calendar, +.Calendar.-rtl * { + direction: rtl; +} + +.DatePicker__calendarArrow { + position: absolute; + width: 0; + height: 0; + top: calc(100% + 10px); + left: 0; + right: 0; + margin: 0 auto; + border-style: solid; + z-index: 10; + border-width: 0 10px 10px 10px; + border-color: transparent transparent #fff transparent; +} + +.Calendar { + --cl-color-black: #444444; + --cl-color-disabled: #d4d4d4; + --cl-color-error: #ff2929; + font-family: "iranSans"; + font-size: 10px; + 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; +} + +.DatePicker .Calendar, +.DatePicker__calendarArrow { + transform: translateY(2.5em); + opacity: 0; + animation: fadeCalendar 0.3s forwards; +} + +.DatePicker__calendarContainer.-top .Calendar { + transform: translateY(-2.5em); +} + +.Calendar.-noFocusOutline *:focus { + outline: none !important; +} + +.Calendar > :not(.Calendar__footer) button { + font-family: inherit; + background: transparent; + cursor: pointer; + -webkit-tap-highlight-color: transparent; + outline: none; +} + +.Calendar__header { + display: flex; + color: var(--cl-color-black); + padding: 2em 2.9em; + align-items: center; + overflow: hidden; +} + +.Calendar__monthArrowWrapper { + line-height: 0; + font-size: 1em; + padding: 3px; + position: relative; + border: none; + z-index: 1; + opacity: 1; + transition: 0.2s; + background-color: #06bace; +} + +.Calendar__monthArrowWrapper:focus { + outline: 1px dashed rgba(0, 0, 0, 0.4); + outline-offset: 2px; +} + +.Calendar__monthArrowWrapper:disabled, +.Calendar__monthArrowWrapper.-hidden { + opacity: 0; + pointer-events: none; +} + +.Calendar__monthArrowWrapper.-left { + transform: rotate(180deg); +} +.Calendar.-rtl .Calendar__monthArrowWrapper.-left { + transform: rotate(-180deg); +} + +.Calendar__monthArrowWrapper.-right { + transform: rotate(-0deg); +} +.Calendar.-rtl .Calendar__monthArrowWrapper.-right { + transform: rotate(0deg); +} + +.Calendar__monthArrowWrapper:active .Calendar__monthArrow { + transform: scale(0.7); +} + +.Calendar__monthArrow { + border-radius: 7px; + padding: 12px; + transition: var(--animation-duration) transform; + pointer-events: none; + background-repeat: no-repeat; + display: block; + 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 { + flex: 1; + position: relative; +} + +.Calendar__monthYear { + 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.-hiddenNext { + opacity: 0; + transform: translateX(50%); +} + +.Calendar.-rtl .Calendar__monthYear.-hiddenNext { + transform: translateX(-150%); +} + +.Calendar__monthYear.-hiddenPrevious { + opacity: 0; + transform: translateX(-150%); +} + +.Calendar.-rtl .Calendar__monthYear.-hiddenPrevious { + transform: translateX(50%); +} + +.Calendar__monthYear.-shown { + opacity: 1; + margin-top: auto; + margin-bottom: auto; + transform: translateX(-50%); +} + +.Calendar__monthYear.-shownAnimated { + animation: var(--animation-duration) fadeTextToCenter forwards; +} + +.Calendar__monthYear > * { + padding: 0.2em 0.5em; + border: 1px solid transparent; + transition: var(--animation-duration); + font-size: 1.05em; + display: flex; + justify-content: center; + align-items: center; + transform: translateX(0) scale(0.95); + will-change: transform; + border-radius: 5px; +} + +.Calendar__monthYear:not(.-shown) > *, +.Calendar__monthYear > *.-hidden { + cursor: default; + pointer-events: none; +} + +.Calendar__monthText { + margin-left: -0.3em; +} +.Calendar__yearText:last-child { + margin-right: -0.3em; +} + +.Calendar__monthYear.-shown > *:hover, +.Calendar:not(.-noFocusOutline) .Calendar__monthYear.-shown > *:focus, +.Calendar__monthYear > *.-activeBackground { + background: #f5f5f5; +} + +.Calendar__monthText:hover { + transform: translateX(-0.2em) scale(0.95); +} +.Calendar.-rtl .Calendar__monthText:hover { + transform: translateX(0.2em) scale(0.95); +} + +.Calendar__yearText:hover { + transform: translateX(0.2em) scale(0.95); +} +.Calendar.-rtl .Calendar__yearText:hover { + transform: translateX(-0.2em) scale(0.95); +} + +.Calendar__monthYear .Calendar__yearText.-hidden { + transform: translateX(50%); + opacity: 0; +} + +.Calendar.-rtl .Calendar__monthYear .Calendar__yearText.-hidden { + transform: translateX(-50%); +} + +.Calendar__monthYear .Calendar__monthText.-hidden { + transform: translateX(-50%); + opacity: 0; +} + +.Calendar.-rtl .Calendar__monthYear .Calendar__monthText.-hidden { + transform: translateX(50%); +} + +.Calendar__monthYear:not(.-shown) > * { + pointer-events: none; +} + +.Calendar__monthSelectorAnimationWrapper, +.Calendar__yearSelectorAnimationWrapper { + position: absolute; + width: 100%; + height: 80%; + bottom: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; +} + +.Calendar__monthSelectorWrapper { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.Calendar__monthSelector { + padding: 0 2.5em; + align-content: center; + padding-bottom: 2em; +} + +.Calendar__monthSelector, +.Calendar__yearSelector { + display: flex; + flex-wrap: wrap; + position: relative; + z-index: 2; + background-color: #fff; + transform: translateY(-150%); + will-change: transform; + transition: 0.6s; + height: 100%; +} + +.Calendar__yearSelectorWrapper { + width: 100%; + height: 100%; +} + +.Calendar__yearSelectorWrapper::after, +.Calendar__yearSelectorWrapper::before { + content: ""; + width: 100%; + height: 5em; + position: absolute; + left: 0; + opacity: 0; + transition: 0.4s; + transition-delay: 0.2s; +} + +.Calendar__yearSelectorWrapper::after { + background-image: linear-gradient( + to bottom, + #fff, + #fff 10%, + rgba(245, 245, 245, 0) + ); + top: -0.1em; +} + +.Calendar__yearSelectorWrapper::before { + background-image: linear-gradient( + to top, + #fff, + #fff 10%, + rgba(245, 245, 245, 0) + ); + bottom: 0; +} + +.Calendar__yearSelectorWrapper.-faded::after, +.Calendar__yearSelectorWrapper.-faded::before { + opacity: 1; + z-index: 3; +} + +.Calendar__yearSelector { + align-content: flex-start; + scrollbar-width: 0; + overflow: scroll; + position: relative; + width: 100%; + padding: 5em 2em; + -ms-overflow-style: none; +} + +.Calendar__yearSelector::-webkit-scrollbar { + display: none; +} + +.Calendar__yearSelectorItem { + width: 25%; + display: flex; + justify-content: center; +} + +.Calendar__yearSelectorItem:not(:nth-child(-n + 4)) { + margin-top: 1.5em; +} + +.Calendar__yearSelectorText { + border: none; + font-size: 1.4em; + min-width: 85%; + padding: 0.2em 0.5em; + border-radius: 5px; +} + +.Calendar__monthSelector.-open, +.Calendar__yearSelector.-open { + transform: translateY(0); +} + +.Calendar__yearSelectorText:focus, +.Calendar__monthSelectorItemText:focus { + outline: 1px dashed rgba(0, 0, 0, 0.4); + outline-offset: 2px; +} + +.Calendar__monthSelectorItem { + width: calc(100% / 3); + display: flex; + justify-content: center; +} + +.Calendar__monthSelectorItem:not(:nth-child(-n + 3)) { + margin-top: 2em; +} + +.Calendar__monthSelectorItemText { + border: none; + padding: 0.4em 0.4em; + border-radius: 8.5px; + font-size: 1.3em; + min-width: 70%; + transition: 0.3s; +} + +.Calendar__monthSelectorItem:not(.-active) + .Calendar__monthSelectorItemText:not(:disabled):hover, +.Calendar__yearSelectorItem:not(.-active) + .Calendar__yearSelectorText:not(:disabled):hover { + background: #f5f5f5; +} + +.Calendar__monthSelectorItemText:disabled, +.Calendar__yearSelectorText:disabled { + opacity: 0.5; + cursor: default; +} + +.Calendar__monthSelectorItem.-active .Calendar__monthSelectorItemText, +.Calendar__yearSelectorItem.-active .Calendar__yearSelectorText { + background-color: #006c94; + color: #fff; +} + +.Calendar__weekDays { + display: flex; + justify-content: space-between; + color: var(--cl-color-disabled); + font-size: 1.2em; + margin-bottom: 0.7em; + padding: 0 2.6em; + position: relative; +} + +.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[title] { + text-decoration: none; +} + +.Calendar__sectionWrapper { + position: relative; + min-height: 25.8em; + overflow: hidden; +} + +.Calendar__section { + display: flex; + flex-direction: column; + padding: 0 3.2em; + position: absolute; + color: var(--cl-color-black); + top: 0; + padding-top: 0.5em; + left: 0; + width: 100%; + will-change: transform, opacity; + transform: translateZ(0); + backface-visibility: hidden; + transition: var(--animation-duration); +} + +.Calendar__section.-hiddenPrevious { + opacity: 0.5; + transform: translateX(-90%); +} + +.Calendar.-rtl .Calendar__section.-hiddenPrevious { + transform: translateX(90%); +} + +.Calendar__section.-hiddenNext { + opacity: 0.5; + transform: translateX(90%); +} + +.Calendar.-rtl .Calendar__section.-hiddenNext { + transform: translateX(-90%); +} + +.Calendar__section.-shown { + opacity: 1; + transform: translateX(0); +} + +.Calendar__section.-shownAnimated { + animation: var(--animation-duration) FadeContentToCenter forwards; +} + +.Calendar__weekRow { + display: flex; + width: 100%; +} + +.Calendar__day { + 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; + align-items: center; + + cursor: pointer; + vertical-align: middle; + background-color: #f3f3f3; + color: #06bace; +} +.Calendar__day span { + padding: -10px; + margin-top: -30px; + font-size: 28px; +} + +.Calendar__day:focus { + outline: 1px dashed rgba(0, 0, 0, 0.4); + outline-offset: 2px; +} + +.Calendar__day.-ltr { + min-height: 2.6em; + font-size: 1.45em; +} + +.Calendar__day.-rtl { + font-size: 1.55em; + height: 2.45em; +} + +.Calendar__day:not(.-blank):not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween):not(.-selected):hover { + background-color: #dafbff; + color: #06bace; + border: 1px solid #06bace; +} + +.Calendar__day.-selected, +.Calendar__day.-selectedStart, +.Calendar__day.-selectedEnd { + background: #006c94; + color: #fff; +} + +.Calendar__day.-ltr.-selectedStart { + border-radius: 0; + border-top-left-radius: 7px; + border-bottom-left-radius: 7px; +} + +.Calendar__day.-rtl.-selectedStart { + border-radius: 0; + border-top-right-radius: 7px; + border-bottom-right-radius: 7px; +} + +.Calendar__day.-selectedBetween { + background: rgba(0, 108, 148, 0.07); + + border-radius: 0; +} + +.Calendar__day.-ltr.-selectedEnd { + border-radius: 0; + border-top-right-radius: 7px; + border-bottom-right-radius: 7px; +} + +.Calendar__day.-rtl.-selectedEnd { + 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) { + color: var(--cl-color-error); +} + +.Calendar__day.-weekend.-today:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween)::after { + background: var(--cl-color-error); +} + +.Calendar__day.-disabled { + color: var(--cl-color-disabled) !important; + background: transparent !important; + cursor: default !important; +} +.Calendar__day.-selected { +} +.Calendar__day.-today:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween) { + font-weight: 600; + color: var(--cl-color-black); + color: #000; + position: relative; +} + +.Calendar__day.-today:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween)::after { + content: ""; + position: absolute; + bottom: 0.2em; + display: block; + width: 0.6em; + height: 1px; + background: #000; + left: 50%; + opacity: 0.5; + transform: translateX(-50%); + transition: 0.2s; +} + +.Calendar__day.-today:hover:not(.-selectedStart):not(.-selectedEnd):not(.-selectedBetween)::after { + opacity: 0; +} + +.Calendar__day.-blank { + color: transparent; + cursor: default; + pointer-events: none; +} + +.Calendar__footer { + 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 .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; + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes fadeArrowFlipped { + from { + opacity: 0; + } + + to { + opacity: 1; + transform: translateY(0) rotate(180deg); + } +} + +@keyframes fadeTextToCenter { + to { + opacity: 1; + transform: translateX(-50%); + } +} + +@keyframes FadeContentToCenter { + to { + opacity: 1; + transform: translateX(0); + } +} + +// * end RangeDatePicker Component + // TODO Start Folderlist Component .no-scrollbar { diff --git a/src/redux/data.js b/src/redux/data.js index 7b1f027..3bfd06a 100644 --- a/src/redux/data.js +++ b/src/redux/data.js @@ -31,6 +31,7 @@ import QuestionAnswer from "../components/QuestionAnswer"; import RadioButton from "../components/RadioButton"; import Range from "../components/Range"; import Datepicker from "../components/Datepicker"; +import SearchWithSuggestion from "../components/SearchWithSuggestion"; // mini components import MiniComponents from "../components/MiniComponents"; @@ -654,6 +655,16 @@ const components = [ code: null, }, }, + { + name: "Search With Suggestion", + author: "Ashrafi", + props: [], + content: { + name: "Search With Suggestion", + component: , + code: null, + }, + }, // mini components { name: "Mini Components",