@useblu/ocean-core 1.67.0 → 1.68.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.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

package/ocean.css

@@ -5021,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 */