diff --git a/src/components/TestComponentNew/index.js b/src/components/TestComponentNew/index.js index 6e2d011..80a509e 100644 --- a/src/components/TestComponentNew/index.js +++ b/src/components/TestComponentNew/index.js @@ -1,5 +1,7 @@ import React, { useRef, useState } from "react"; +import "./index.scss"; + import { Calendar } from "react-multi-date-picker"; import DatePicker from "react-multi-date-picker"; @@ -21,6 +23,9 @@ const TestComponentNew = () => { fixRelativePosition={true} calendarPosition={`${"bottom"}-${"center"}`} onClose={() => false} + arrow={false} + inputClass="custom-input" + className="custom-calendar" style={{ width: "100%", height: "33px", diff --git a/src/components/TestComponentNew/index.scss b/src/components/TestComponentNew/index.scss new file mode 100644 index 0000000..a38a0ae --- /dev/null +++ b/src/components/TestComponentNew/index.scss @@ -0,0 +1,28 @@ +.custom-input { + border-radius: 15px; + border: 1px #0c8af8 solid; + padding: 4px 12px; + background-color: white; + height: 22px; + box-shadow: 0 0 2px #0074d9; + // display: none !important; +} + +.custom-input:focus { + outline: none; + border: 1px solid #0c8af8; + box-shadow: 0 0 10px 2px #0074d9; +} + +.rmdp-arrow-container { + background-color: #0074d9; + border-radius: 2px !important; + height: 24px !important; + width: 24px !important; +} + +.rmdp-arrow-container .rmdp-arrow { + border: solid #fff; + border-width: 0 2px 2px 0; + margin-top: 8px !important; +}