@useblu/ocean-core 1.35.2 → 1.36.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.36.0](https://github.com/ocean-ds/ocean-web/compare/v1.35.2...v1.36.0) (2022-10-06)
+
+### Features
+
+- datepicker ([#1007](https://github.com/ocean-ds/ocean-web/issues/1007)) ([f91b2c4](https://github.com/ocean-ds/ocean-web/commit/f91b2c4ee160ab035c65afb7fa80bce886cb4d78))
+
 ## [1.35.2](https://github.com/ocean-ds/ocean-web/compare/v1.35.1...v1.35.2) (2022-10-06)
 
 ### Bug Fixes

package/ocean.css

@@ -3284,4 +3284,287 @@
 .ods-cross-sell-card__cta-icon svg {
   color: #0025e0;
 }
+
+.ods-datepicker-background {
+  background: transparent;
+  bottom: 0;
+  content: " ";
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+}
+
+.ods-datepicker {
+  display: flex;
+  position: relative;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  width: 100%;
+}
+.ods-datepicker:active, .ods-datepicker:focus,
+.ods-datepicker *:active,
+.ods-datepicker *:focus {
+  outline: none;
+}
+.ods-datepicker__form-row {
+  display: grid;
+  gap: 8px;
+  grid-template-columns: repeat(2, 1fr);
+  width: 100%;
+}
+.ods-datepicker__form-controls {
+  cursor: pointer;
+  margin: 0;
+}
+.ods-datepicker__form-controls > label {
+  color: #67697a;
+  font-family: "Nunito Sans";
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 15px;
+  margin: 0 0 8px;
+  padding: 0;
+  text-transform: none;
+}
+.ods-datepicker__form-controls input {
+  caret-color: #0025e0;
+  cursor: pointer;
+}
+.ods-datepicker__form-controls .date-field-focussed {
+  border-color: #5872f5;
+  border-width: 2px;
+  margin: 0;
+}
+@media (max-width: 321px) {
+  .ods-datepicker__form-row {
+    display: grid;
+    gap: 8px;
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(2, 1fr);
+    width: 100%;
+  }
+}
+.ods-datepicker .ods-datepicker__calendar {
+  background-color: white;
+  border: 1px solid #ebecf5;
+  border-radius: 8px;
+  box-shadow: 0 8px 16px rgba(12, 13, 20, 0.08);
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0 0 16px;
+  position: absolute;
+  width: 100%;
+}
+.ods-datepicker .ods-datepicker__calendar .rdp-vhidden {
+  display: none;
+}
+.ods-datepicker .ods-datepicker_calendar_m1 {
+  top: 4.5rem;
+}
+.ods-datepicker .ods-datepicker_calendar_m2 {
+  top: 4.5rem;
+}
+@media (max-width: 321px) {
+  .ods-datepicker .ods-datepicker_calendar_m2 {
+    top: 9.5rem;
+  }
+}
+.ods-datepicker .ods-datepicker__caption {
+  align-items: center;
+  color: #393b47;
+  display: flex;
+  height: 40px;
+  justify-content: center;
+  margin: 16px 8px;
+  position: relative;
+}
+.ods-datepicker .ods-datepicker__caption h2 {
+  font-family: "Avenir";
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 17.6px;
+  margin: 0;
+  text-align: center;
+  text-transform: capitalize;
+}
+.ods-datepicker .ods-datepicker__navButtons {
+  background-color: transparent;
+  border: 0;
+  color: #0025e0;
+  cursor: pointer;
+  font-size: 6px;
+  outline: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+}
+.ods-datepicker .ods-datepicker__navButtons:hover {
+  background: #f7f9ff;
+}
+.ods-datepicker .ods-datepicker__navButtonPrev {
+  left: 17px;
+}
+@media (max-width: 321px) {
+  .ods-datepicker .ods-datepicker__navButtonPrev {
+    left: 0;
+  }
+}
+.ods-datepicker .ods-datepicker__navButtonNext {
+  right: 17px;
+}
+@media (max-width: 321px) {
+  .ods-datepicker .ods-datepicker__navButtonNext {
+    right: 0;
+  }
+}
+.ods-datepicker .ods-datepicker__navIcon {
+  box-sizing: border-box;
+  width: 12px;
+}
+.ods-datepicker .ods-datepicker__table {
+  display: flex;
+  flex-direction: column;
+}
+.ods-datepicker .ods-datepicker__head {
+  margin-bottom: 8px;
+  padding: 0 8px;
+}
+.ods-datepicker .ods-datepicker__headRow {
+  color: #b6b9cc;
+  display: grid;
+  font-family: "Nunito Sans";
+  font-size: 12px;
+  font-weight: 600;
+  grid-template-columns: repeat(7, 1fr);
+  text-transform: capitalize;
+}
+.ods-datepicker .ods-datepicker__body {
+  padding: 0 8px;
+}
+.ods-datepicker .ods-datepicker__row {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+.ods-datepicker .ods-datepicker__cell {
+  display: flex;
+  height: 40px;
+  justify-content: center;
+  margin: 2px 0;
+  outline: 0;
+  text-align: center;
+  width: 100%;
+}
+.ods-datepicker .ods-datepicker__cell .ods-datepicker__selectedStart {
+  background: linear-gradient(to left, rgba(176, 245, 245, 0.24) 50%, white 50%);
+}
+.ods-datepicker .ods-datepicker__cell .ods-datepicker__selectedEnd {
+  background: linear-gradient(to right, rgba(176, 245, 245, 0.24) 50%, white 50%);
+}
+.ods-datepicker .ods-datepicker__selectedStart.ods-datepicker__selectedEnd {
+  background: transparent;
+}
+.ods-datepicker .ods-datepicker__day {
+  align-items: center;
+  background-color: transparent;
+  border: 0;
+  color: #67697a;
+  cursor: pointer;
+  display: flex;
+  font-family: "Nunito Sans";
+  font-size: 14px;
+  height: 100%;
+  justify-content: center;
+  line-height: 21px;
+  padding: 0;
+  position: relative;
+  text-align: center;
+  width: 100%;
+}
+.ods-datepicker .ods-datepicker__day:hover::after {
+  align-items: center;
+  border: 1px solid #b6b9cc;
+  border-radius: 20px;
+  box-sizing: border-box;
+  content: "";
+  display: flex;
+  height: 40px;
+  justify-content: center;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 40px;
+  z-index: 1;
+}
+.ods-datepicker .ods-datepicker__today {
+  color: #0025e0;
+}
+.ods-datepicker .ods-datepicker__disabled {
+  color: #d8dae8;
+}
+.ods-datepicker .ods-datepicker__selected {
+  background-color: rgba(176, 245, 245, 0.24);
+  position: relative;
+}
+.ods-datepicker .ods-datepicker__selected:hover::after {
+  align-items: center;
+  border: 1px solid #b6b9cc;
+  border-radius: 20px;
+  content: "";
+  display: flex;
+  height: 40px;
+  justify-content: center;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 40px;
+  z-index: 1;
+}
+.ods-datepicker .ods-datepicker__selectedStart {
+  color: white;
+  position: relative;
+  z-index: 1;
+}
+.ods-datepicker .ods-datepicker__selectedStart ::after {
+  align-items: center;
+  background-color: #13bdbd;
+  border-radius: 20px;
+  content: "";
+  display: flex;
+  height: 40px;
+  justify-content: center;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 40px;
+  z-index: -1;
+}
+.ods-datepicker .ods-datepicker__selectedEnd {
+  color: white;
+  position: relative;
+  z-index: 1;
+}
+.ods-datepicker .ods-datepicker__selectedEnd ::after {
+  align-items: center;
+  background-color: #13bdbd;
+  border-radius: 20px;
+  content: "";
+  display: flex;
+  height: 40px;
+  justify-content: center;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 40px;
+  z-index: -1;
+}
+.ods-datepicker .ods-datepicker__selectedMiddle {
+  background-color: rgba(176, 245, 245, 0.24);
+}
 /*# sourceMappingURL=ocean.css.map */