@useblu/ocean-core 1.36.1 → 1.37.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.37.0](https://github.com/ocean-ds/ocean-web/compare/v1.36.3...v1.37.0) (2022-10-20)
+
+### Features
+
+- dateclass ([#1030](https://github.com/ocean-ds/ocean-web/issues/1030)) ([6302611](https://github.com/ocean-ds/ocean-web/commit/63026116df2678e41d4ad03e08081641eefa4d70))
+
+## [1.36.2](https://github.com/ocean-ds/ocean-web/compare/v1.36.1...v1.36.2) (2022-10-11)
+
+**Note:** Version bump only for package @useblu/ocean-core
+
 ## [1.36.1](https://github.com/ocean-ds/ocean-web/compare/v1.36.0...v1.36.1) (2022-10-11)
 
 ### Bug Fixes

package/ocean.css

@@ -3285,7 +3285,7 @@
   color: #0025e0;
 }
 
-.ods-datepicker-background {
+.ods-date-background {
   background: transparent;
   bottom: 0;
   content: " ";
@@ -3295,7 +3295,7 @@
   top: 0;
 }
 
-.ods-datepicker {
+.ods-date {
   display: flex;
   position: relative;
   -webkit-user-select: none;
@@ -3304,22 +3304,25 @@
           user-select: none;
   width: 100%;
 }
-.ods-datepicker:active, .ods-datepicker:focus,
-.ods-datepicker *:active,
-.ods-datepicker *:focus {
+.ods-date:active, .ods-date:focus,
+.ods-date *:active,
+.ods-date *:focus {
   outline: none;
 }
-.ods-datepicker__form-row {
+.ods-date__form-row {
   display: grid;
   gap: 8px;
   grid-template-columns: repeat(2, 1fr);
   width: 100%;
 }
-.ods-datepicker__form-controls {
+.ods-date__form-row-datepicker {
+  width: 100%;
+}
+.ods-date__form-controls {
   cursor: pointer;
   margin: 0;
 }
-.ods-datepicker__form-controls > label {
+.ods-date__form-controls > label {
   color: #67697a;
   font-family: "Nunito Sans";
   font-size: 14px;
@@ -3329,17 +3332,17 @@
   padding: 0;
   text-transform: none;
 }
-.ods-datepicker__form-controls input {
+.ods-date__form-controls input {
   caret-color: #0025e0;
   cursor: pointer;
 }
-.ods-datepicker__form-controls .date-field-focussed {
+.ods-date__form-controls .date-field-focussed {
   border-color: #5872f5;
   border-width: 2px;
   margin: 0;
 }
 @media (max-width: 321px) {
-  .ods-datepicker__form-row {
+  .ods-date__form-row {
     display: grid;
     gap: 8px;
     grid-template-columns: 1fr;
@@ -3347,7 +3350,7 @@
     width: 100%;
   }
 }
-.ods-datepicker .ods-datepicker__calendar {
+.ods-date__calendar {
   background-color: white;
   border: 1px solid #ebecf5;
   border-radius: 8px;
@@ -3358,21 +3361,21 @@
   position: absolute;
   width: 100%;
 }
-.ods-datepicker .ods-datepicker__calendar .rdp-vhidden {
+.ods-date__calendar .rdp-vhidden {
   display: none;
 }
-.ods-datepicker .ods-datepicker_calendar_m1 {
+.ods-date_calendar_m1 {
   top: 72px;
 }
-.ods-datepicker .ods-datepicker_calendar_m2 {
+.ods-date_calendar_m2 {
   top: 72px;
 }
 @media (max-width: 321px) {
-  .ods-datepicker .ods-datepicker_calendar_m2 {
+  .ods-date_calendar_m2 {
     top: 150px;
   }
 }
-.ods-datepicker .ods-datepicker__caption {
+.ods-date__caption {
   align-items: center;
   color: #393b47;
   display: flex;
@@ -3381,7 +3384,7 @@
   margin: 16px 8px;
   position: relative;
 }
-.ods-datepicker .ods-datepicker__caption h2 {
+.ods-date__caption h2 {
   font-family: "Avenir";
   font-size: 16px;
   font-weight: 700;
@@ -3390,7 +3393,7 @@
   text-align: center;
   text-transform: capitalize;
 }
-.ods-datepicker .ods-datepicker__navButtons {
+.ods-date__navButtons {
   background-color: transparent;
   border: 0;
   color: #0025e0;
@@ -3401,38 +3404,44 @@
   position: absolute;
   top: 0;
 }
-.ods-datepicker .ods-datepicker__navButtons:hover {
+.ods-date__navButtons:hover {
   background: #f7f9ff;
 }
-.ods-datepicker .ods-datepicker__navButtonPrev {
+.ods-date__navButtonPrev {
   left: 17px;
 }
 @media (max-width: 321px) {
-  .ods-datepicker .ods-datepicker__navButtonPrev {
+  .ods-date__navButtonPrev {
     left: 0;
   }
 }
-.ods-datepicker .ods-datepicker__navButtonNext {
+.ods-date__navButtonPrev-datepicker {
+  left: 0;
+}
+.ods-date__navButtonNext {
   right: 17px;
 }
 @media (max-width: 321px) {
-  .ods-datepicker .ods-datepicker__navButtonNext {
+  .ods-date__navButtonNext {
     right: 0;
   }
 }
-.ods-datepicker .ods-datepicker__navIcon {
+.ods-date__navButtonNext-datepicker {
+  right: 0;
+}
+.ods-date__navIcon {
   box-sizing: border-box;
   width: 12px;
 }
-.ods-datepicker .ods-datepicker__table {
+.ods-date__table {
   display: flex;
   flex-direction: column;
 }
-.ods-datepicker .ods-datepicker__head {
+.ods-date__head {
   margin-bottom: 8px;
   padding: 0 8px;
 }
-.ods-datepicker .ods-datepicker__headRow {
+.ods-date__headRow {
   color: #b6b9cc;
   display: grid;
   font-family: "Nunito Sans";
@@ -3441,18 +3450,18 @@
   grid-template-columns: repeat(7, 1fr);
   text-transform: capitalize;
 }
-.ods-datepicker .ods-datepicker__body {
+.ods-date__body {
   padding: 0 8px;
 }
-.ods-datepicker .ods-datepicker__row {
+.ods-date__row {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
 }
-.ods-datepicker .rdp-head_cell {
+.ods-date .rdp-head_cell {
   border: 0;
   text-align: center;
 }
-.ods-datepicker .ods-datepicker__cell {
+.ods-date__cell {
   border: 0;
   display: flex;
   height: 40px;
@@ -3463,16 +3472,16 @@
   text-align: center;
   width: 100%;
 }
-.ods-datepicker .ods-datepicker__cell .ods-datepicker__selectedStart {
+.ods-date__cell .ods-date__selectedStart {
   background: linear-gradient(to left, rgba(176, 245, 245, 0.24) 50%, white 50%);
 }
-.ods-datepicker .ods-datepicker__cell .ods-datepicker__selectedEnd {
+.ods-date__cell .ods-date__selectedEnd {
   background: linear-gradient(to right, rgba(176, 245, 245, 0.24) 50%, white 50%);
 }
-.ods-datepicker .ods-datepicker__selectedStart.ods-datepicker__selectedEnd {
+.ods-date__selectedStart.ods-date__selectedEnd {
   background: transparent;
 }
-.ods-datepicker .ods-datepicker__day {
+.ods-date__day {
   align-items: center;
   background-color: transparent;
   border: 0;
@@ -3489,7 +3498,7 @@
   text-align: center;
   width: 100%;
 }
-.ods-datepicker .ods-datepicker__day:hover::after {
+.ods-date__day:hover::after {
   align-items: center;
   border: 1px solid #b6b9cc;
   border-radius: 20px;
@@ -3505,17 +3514,17 @@
   width: 40px;
   z-index: 1;
 }
-.ods-datepicker .ods-datepicker__today {
+.ods-date__today {
   color: #0025e0;
 }
-.ods-datepicker .ods-datepicker__disabled {
+.ods-date__disabled {
   color: #d8dae8;
 }
-.ods-datepicker .ods-datepicker__selected {
+.ods-date__selected {
   background-color: rgba(176, 245, 245, 0.24);
   position: relative;
 }
-.ods-datepicker .ods-datepicker__selected:hover::after {
+.ods-date__selected:hover::after {
   align-items: center;
   border: 1px solid #b6b9cc;
   border-radius: 20px;
@@ -3530,12 +3539,33 @@
   width: 40px;
   z-index: 1;
 }
-.ods-datepicker .ods-datepicker__selectedStart {
+.ods-date__selected-datepicker {
+  background: transparent;
+  color: white;
+  position: relative;
+  z-index: 1;
+}
+.ods-date__selected-datepicker ::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-date__selectedStart {
   color: white;
   position: relative;
   z-index: 1;
 }
-.ods-datepicker .ods-datepicker__selectedStart ::after {
+.ods-date__selectedStart ::after {
   align-items: center;
   background-color: #13bdbd;
   border-radius: 20px;
@@ -3550,12 +3580,12 @@
   width: 40px;
   z-index: -1;
 }
-.ods-datepicker .ods-datepicker__selectedEnd {
+.ods-date__selectedEnd {
   color: white;
   position: relative;
   z-index: 1;
 }
-.ods-datepicker .ods-datepicker__selectedEnd ::after {
+.ods-date__selectedEnd ::after {
   align-items: center;
   background-color: #13bdbd;
   border-radius: 20px;
@@ -3570,7 +3600,7 @@
   width: 40px;
   z-index: -1;
 }
-.ods-datepicker .ods-datepicker__selectedMiddle {
+.ods-date__selectedMiddle {
   background-color: rgba(176, 245, 245, 0.24);
 }
 /*# sourceMappingURL=ocean.css.map */