@useblu/ocean-core 1.66.0 → 1.68.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.68.0](https://github.com/ocean-ds/ocean-web/compare/v1.67.0...v1.68.0) (2024-08-15)
+
+### Features
+
+- create web notification component ([#1117](https://github.com/ocean-ds/ocean-web/issues/1117)) ([3d3ef2d](https://github.com/ocean-ds/ocean-web/commit/3d3ef2da18e20e203dc3e281a0301749849e08c5))
+
+# [1.67.0](https://github.com/ocean-ds/ocean-web/compare/v1.66.0...v1.67.0) (2024-07-15)
+
+### Features
+
+- update input ([#1114](https://github.com/ocean-ds/ocean-web/issues/1114)) ([114d564](https://github.com/ocean-ds/ocean-web/commit/114d5640cf22d553216363c19cde717c6ed8726a))
+
 # [1.66.0](https://github.com/ocean-ds/ocean-web/compare/v1.65.0...v1.66.0) (2024-07-02)
 
 ### Features

package/ocean.css

@@ -1059,10 +1059,11 @@
   margin-right: 4px;
 }
 .ods-form-control__element {
-  max-height: 69.19px;
+  max-height: 145px;
 }
 .ods-form-control__icon {
   align-items: start;
+  color: #aaadc0;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -1077,7 +1078,8 @@
   color: #aaadc0;
   font-size: 12px;
   font-weight: 600;
-  line-height: 1;
+  line-height: 1.32;
+  margin-bottom: 0;
   margin-top: 4px;
 }
 .ods-form-control__helper-text--error {
@@ -1093,11 +1095,10 @@
   font-family: "Nunito Sans";
   font-size: 14px;
   font-weight: 400;
-  line-height: 1.24;
-  margin-bottom: 8px;
+  line-height: 1;
 }
 .ods-form-label--disabled {
-  color: #aaadc0;
+  color: #ced1e1;
 }
 
 .ods-file-uploader {
@@ -1330,8 +1331,8 @@
   height: 48px;
 }
 .ods-input input {
-  border: 1px solid transparent;
   border-radius: 8px;
+  border-width: 0;
   box-sizing: border-box;
   color: #393b47;
   font-family: "Nunito Sans";
@@ -1361,9 +1362,7 @@
 .ods-input:hover, .ods-input:focus, .ods-input:active, .ods-input:focus-within {
   border-color: #5872f5;
   border-width: 2px;
-}
-.ods-input:hover input, .ods-input:focus input, .ods-input:active input, .ods-input:focus-within input {
-  border-width: 0;
+  margin: 0 -1px;
 }
 .ods-input--filled {
   border: 1px solid #b8c3ff;
@@ -1371,18 +1370,6 @@
 .ods-input--error {
   border-color: #f5456e;
 }
-.ods-input--disabled {
-  background-color: #e0e2ee;
-  border-color: #e0e2ee;
-  cursor: not-allowed;
-}
-.ods-input--disabled input {
-  color: #aaadc0;
-  cursor: not-allowed;
-}
-.ods-input--disabled:hover, .ods-input--disabled:focus, .ods-input--disabled:active {
-  border-color: #5872f5;
-}
 .ods-input__adornment {
   align-items: center;
   color: #393b47;
@@ -1390,12 +1377,36 @@
   height: 100%;
   padding-right: 16px;
 }
+.ods-input__adornment--start {
+  color: #393b47;
+}
 .ods-input__adornment--placeholder {
   color: #ced1e1;
 }
 .ods-input__adornment input {
   padding: 0 4px;
 }
+.ods-input__adornment svg {
+  color: #aaadc0;
+}
+.ods-input--disabled {
+  background-color: #f3f5fe;
+  border: 1px solid #f3f5fe;
+  color: #ced1e1;
+  cursor: not-allowed;
+}
+.ods-input--disabled input {
+  background-color: #f3f5fe;
+  color: #ced1e1;
+  cursor: not-allowed;
+}
+.ods-input--disabled svg {
+  color: #ced1e1;
+}
+.ods-input--disabled:hover, .ods-input--disabled:focus, .ods-input--disabled:active, .ods-input--disabled:focus-within {
+  border: 1px solid #f3f5fe;
+  margin: 0;
+}
 .ods-input--left {
   flex-direction: row-reverse;
 }
@@ -1408,6 +1419,9 @@
 .ods-input--right .ods-input__adornment {
   margin-left: -12px;
 }
+.ods-input--adornment input {
+  padding: 0 4px;
+}
 
 .ods-input--amount .ods-input--root {
   align-items: center;
@@ -1434,17 +1448,33 @@
 .ods-input--amount__stepper-controls_minus {
   padding-left: 4px;
 }
+.ods-input--amount .ods-input--amount--zero svg {
+  color: #ced1e1;
+}
+.ods-input--amount .ods-input--amount--zero input {
+  color: #ced1e1;
+}
+.ods-input--amount .ods-input--amount--zero:hover svg,
+.ods-input--amount .ods-input--amount--zero:focus svg {
+  color: #393b47;
+}
+
+.ods-input--amount--disabled:hover svg {
+  color: #ced1e1;
+}
 
 .ods-textarea {
   background-color: white;
-  border: 1px solid #ced1e1;
+  border: hidden;
   border-radius: 8px;
+  box-shadow: 0 0 0 1px #ced1e1;
   box-sizing: border-box;
   color: #393b47;
   font-family: "Nunito Sans";
   font-size: 16px;
   font-weight: 400;
-  line-height: 1.24;
+  height: 145px;
+  line-height: 1.5;
   outline: none;
   padding: 16px;
   resize: none;
@@ -1460,22 +1490,20 @@
   color: #ced1e1;
 }
 .ods-textarea:hover, .ods-textarea:focus, .ods-textarea:active, .ods-textarea:focus-within {
-  border: 2px solid #5872f5;
+  box-shadow: 0 0 0 2px #5872f5;
 }
 .ods-textarea:disabled {
-  background-color: #e0e2ee;
-  border-color: #e0e2ee;
-  color: #aaadc0;
+  background-color: #f3f5fe;
+  border: hidden;
+  box-shadow: 0 0 0 1px #f3f5fe;
+  color: #ced1e1;
   cursor: not-allowed;
 }
-.ods-textarea:disabled:active {
-  border-color: #e0e2ee;
-}
 .ods-textarea--filled {
-  border: 1px solid #b8c3ff;
+  box-shadow: 0 0 0 1px #b8c3ff;
 }
 .ods-textarea--error {
-  border-color: #f5456e;
+  box-shadow: 0 0 0 1px #f5456e;
 }
 
 .ods-checkbox {
@@ -1670,7 +1698,6 @@
 }
 
 .ods-select__root {
-  margin: 1px;
   min-width: 237px;
 }
 .ods-select__control {
@@ -1698,9 +1725,9 @@
   padding-right: 15px;
 }
 .ods-select__control:disabled {
-  background-color: #e0e2ee;
-  border-color: #e0e2ee;
-  color: #aaadc0;
+  background-color: #f3f5fe;
+  border-color: #f3f5fe;
+  color: #ced1e1;
   cursor: not-allowed;
 }
 .ods-select__control--filled {
@@ -1720,19 +1747,6 @@
 .ods-select__value--empty {
   color: #ced1e1;
 }
-.ods-select__arrow {
-  display: flex;
-  justify-self: center;
-}
-.ods-select__arrow--up {
-  transform: rotate(-180deg);
-}
-.ods-select__arrow--down {
-  transform: rotate(0);
-}
-.ods-select__arrow--disabled {
-  color: #aaadc0;
-}
 .ods-select__listbox-wrapper {
   position: relative;
   z-index: 2;
@@ -1756,15 +1770,15 @@
 }
 .ods-select__option {
   align-items: center;
-  color: #393b47;
+  color: #67697a;
   cursor: pointer;
   display: flex;
   flex: 1;
-  font-family: "Avenir";
+  font-family: "Nunito Sans";
   font-size: 14px;
   font-weight: 400;
   height: 40px;
-  line-height: 1.24;
+  line-height: 1.5;
   list-style: none;
   margin: 0;
   min-width: 0;
@@ -1776,13 +1790,131 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.ods-select__option--selected, .ods-select__option:hover, .ods-select__option:focus, .ods-select__option:active {
+.ods-select__option--selected {
   background-color: #f3f5fe;
   color: #0025e0;
-  font-weight: 700;
+  font-weight: 600;
+}
+.ods-select__option:hover:not(.ods-select__option--selected, .ods-select__option--disabled), .ods-select__option:focus:not(.ods-select__option--selected, .ods-select__option--disabled), .ods-select__option:active:not(.ods-select__option--selected, .ods-select__option--disabled) {
+  background-color: #f3f5fe;
+  color: #67697a;
+  font-weight: 400;
+}
+.ods-select__option--disabled {
+  background-color: white;
+  color: #aaadc0;
+  cursor: not-allowed;
+}
+
+.ods-select__arrow {
+  display: flex;
+  justify-self: center;
+}
+.ods-select__arrow svg {
+  color: #67697a;
+  height: 20px;
+  max-height: 20px;
+  max-width: 20px;
+  width: 20px;
+}
+.ods-select__arrow--down svg {
+  transform: rotate(0);
+  transition: transform 0.3s;
+}
+.ods-select__arrow--up svg {
+  transform: rotate(-180deg);
+  transition: transform 0.3s;
+}
+.ods-select__arrow--disabled {
+  color: #ced1e1;
+}
+.ods-select__arrow--disabled svg {
+  color: #ced1e1;
+}
+
+.ods-token-input {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-start;
+}
+.ods-token-input__input {
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 0 0 1px #ced1e1;
+  box-sizing: border-box;
+  height: 48px;
+  width: 48px;
 }
-.ods-select__option:hover:not(.ods-select__option--selected) {
+.ods-token-input__input:hover, .ods-token-input__input:focus, .ods-token-input__input:active, .ods-token-input__input:focus-within {
+  box-shadow: 0 0 0 2px #5872f5;
+}
+.ods-token-input input {
+  border: hidden;
+  border-radius: 8px;
+  box-sizing: border-box;
+  color: #393b47;
+  font-family: "Nunito Sans";
+  font-size: 16px;
   font-weight: 400;
+  height: 100%;
+  line-height: 1.24;
+  outline: none;
+  text-align: center;
+  width: 100%;
+}
+.ods-token-input--error {
+  box-shadow: 0 0 0 1px #f5456e;
+}
+.ods-token-input--disabled {
+  background-color: #f3f5fe;
+  border: hidden;
+  box-shadow: 0 0 0 1px #f3f5fe;
+}
+.ods-token-input--disabled input {
+  background-color: #f3f5fe;
+  color: #ced1e1;
+  cursor: not-allowed;
+}
+.ods-token-input--disabled:hover, .ods-token-input--disabled:focus, .ods-token-input--disabled:active {
+  box-shadow: 0 0 0 1px #f3f5fe;
+}
+
+.ods-select-autocomplete__root {
+  min-width: 237px;
+}
+.ods-select-autocomplete__listbox--empty {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  padding: 12px 0;
+}
+.ods-select-autocomplete__listbox--empty .ods-typography__description {
+  color: #aaadc0;
+}
+
+.ods-select-autocomplete__arrow {
+  justify-self: center;
+}
+.ods-select-autocomplete__arrow svg {
+  color: #67697a;
+  height: 20px;
+  max-height: 20px;
+  max-width: 20px;
+  width: 20px;
+}
+.ods-select-autocomplete__arrow--up svg {
+  transform: rotate(-180deg);
+  transition: transform 0.3s;
+}
+.ods-select-autocomplete__arrow--down svg {
+  transform: rotate(0);
+  transition: transform 0.3s;
+}
+.ods-select-autocomplete__arrow--disabled {
+  color: #ced1e1;
+}
+.ods-select-autocomplete__arrow--disabled svg {
+  color: #ced1e1;
 }
 
 .ods-alert {
@@ -2415,12 +2547,12 @@
   width: 48px;
 }
 .ods-icon-btn--disabled {
-  color: #aaadc0;
+  color: #ced1e1;
   cursor: not-allowed;
 }
-.ods-icon-btn--disabled:hover {
+.ods-icon-btn--disabled:hover, .ods-icon-btn--disabled:active, .ods-icon-btn--disabled:focus {
   background-color: inherit;
-  color: #aaadc0;
+  color: #ced1e1;
 }
 
 .ods-link {
@@ -4817,8 +4949,6 @@
   font-size: 14px;
 }
 .ods-unordered-list-item__description {
-  align-items: center;
-  display: flex;
   min-height: 24px;
 }
 
@@ -4891,4 +5021,215 @@
   margin: 0;
   padding-top: 8px;
 }
+
+.ods-web-notification {
+  align-items: center;
+  background: #393b47;
+  border-radius: 4px;
+  bottom: 40px;
+  display: flex;
+  min-height: 63px;
+  position: fixed;
+  width: 348px;
+}
+.ods-web-notification__action-text-info {
+  color: #b8c3ff;
+}
+.ods-web-notification__action-text-info:hover, .ods-web-notification__action-text-info:focus, .ods-web-notification__action-text-info:active {
+  color: #b8c3ff;
+}
+.ods-web-notification__action-text-positive {
+  color: #3dcc64;
+}
+.ods-web-notification__action-text-positive:hover, .ods-web-notification__action-text-positive:focus, .ods-web-notification__action-text-positive:active {
+  color: #3dcc64;
+}
+.ods-web-notification__action-text-warning {
+  color: #ffa347;
+}
+.ods-web-notification__action-text-warning:hover, .ods-web-notification__action-text-warning:focus, .ods-web-notification__action-text-warning:active {
+  color: #ffa347;
+}
+.ods-web-notification__bottom-left-action {
+  -webkit-animation-delay: 0s, 2s;
+          animation-delay: 0s, 2s;
+  -webkit-animation-duration: 150ms, 150ms;
+          animation-duration: 150ms, 150ms;
+  -webkit-animation-name: moveInUp;
+          animation-name: moveInUp;
+  -webkit-animation-timing-function: ease-out forwards;
+          animation-timing-function: ease-out forwards;
+  bottom: 40px;
+  left: 40px;
+}
+.ods-web-notification__bottom-left-default {
+  -webkit-animation-delay: 0s, 2s;
+          animation-delay: 0s, 2s;
+  -webkit-animation-duration: 150ms, 150ms;
+          animation-duration: 150ms, 150ms;
+  -webkit-animation-name: moveInUp;
+          animation-name: moveInUp;
+  -webkit-animation-timing-function: ease-out forwards;
+          animation-timing-function: ease-out forwards;
+  bottom: 40px;
+  left: 40px;
+}
+.ods-web-notification__bottom-right-action {
+  -webkit-animation-delay: 0s, 2s;
+          animation-delay: 0s, 2s;
+  -webkit-animation-duration: 150ms, 150ms;
+          animation-duration: 150ms, 150ms;
+  -webkit-animation-name: moveInUp;
+          animation-name: moveInUp;
+  -webkit-animation-timing-function: ease-out forwards;
+          animation-timing-function: ease-out forwards;
+  bottom: 40px;
+  right: 40px;
+}
+.ods-web-notification__bottom-right-default {
+  -webkit-animation-delay: 0s, 2s;
+          animation-delay: 0s, 2s;
+  -webkit-animation-duration: 150ms, 150ms;
+          animation-duration: 150ms, 150ms;
+  -webkit-animation-name: moveInUp;
+          animation-name: moveInUp;
+  -webkit-animation-timing-function: ease-out forwards;
+          animation-timing-function: ease-out forwards;
+  bottom: 40px;
+  right: 40px;
+}
+.ods-web-notification__content {
+  display: flex;
+  gap: 12px;
+  max-width: 328px;
+  padding: 12px 8px 12px 16px;
+  width: 328px;
+  z-index: 1;
+}
+.ods-web-notification__wrapper {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+  min-height: 39px;
+  min-width: 233px;
+  width: 100%;
+}
+.ods-web-notification__wrapper a {
+  text-decoration: none;
+}
+.ods-web-notification__wrapper a:hover {
+  text-decoration: none;
+}
+.ods-web-notification__wrapper .ods-link {
+  font-weight: 700;
+}
+.ods-web-notification__body {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.ods-web-notification__body p {
+  word-break: break-word;
+}
+.ods-web-notification__close-button {
+  color: #aaadc0;
+  cursor: pointer;
+  display: flex;
+  padding: 0 4px 4px;
+}
+.ods-web-notification.position-2 {
+  bottom: 110px;
+}
+.ods-web-notification.position-3 {
+  bottom: 180px;
+}
+.ods-web-notification.position-4 {
+  bottom: 250px;
+}
+.ods-web-notification.position-5 {
+  bottom: 320px;
+}
+.ods-web-notification.position-6 {
+  bottom: 390px;
+}
+.ods-web-notification.position-7 {
+  bottom: 460px;
+}
+.ods-web-notification.position-8 {
+  bottom: 530px;
+}
+.ods-web-notification.position-9 {
+  bottom: 600px;
+}
+.ods-web-notification.position-10 {
+  bottom: 670px;
+}
+@media (max-width: 767px) {
+  .ods-web-notification {
+    left: 3%;
+    margin: 0;
+    right: 5%;
+    width: 93%;
+  }
+}
+.ods-web-notification.position-1 {
+  bottom: 40px;
+}
+
+@keyframes moveInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-3rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes moveInDownBack {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-3rem);
+  }
+}
+@keyframes moveInUp {
+  from {
+    opacity: 0;
+    transform: translateY(3rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes moveInUpBack {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(3rem);
+  }
+}
+@keyframes progress {
+  0% {
+    border-bottom-left-radius: 4px;
+    border-top-left-radius: 4px;
+    width: 0%;
+  }
+  100% {
+    border-bottom-right-radius: 4px;
+    border-top-right-radius: 4px;
+    width: 100%;
+  }
+}
+.ods-typography__caption {
+  color: #e0e2ee;
+}
 /*# sourceMappingURL=ocean.css.map */