@useblu/ocean-core 1.41.0 → 1.43.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.43.0](https://github.com/ocean-ds/ocean-web/compare/v1.42.0...v1.43.0) (2023-02-24)
+
+### Features
+
+- snackbar component ([#1063](https://github.com/ocean-ds/ocean-web/issues/1063)) ([1177b1f](https://github.com/ocean-ds/ocean-web/commit/1177b1fe76809a9dec06ec57e569c10c15ccb245))
+
 # [1.41.0](https://github.com/ocean-ds/ocean-web/compare/v1.40.1...v1.41.0) (2023-02-09)
 
 ### Features

package/ocean.css

@@ -3812,4 +3812,302 @@
 .ods-drawer__content--header .ods-btn--primary:hover {
   background-color: white;
 }
+
+.ods-snackbar {
+  align-items: center;
+  background: #393b47;
+  border-radius: 4px;
+  display: flex;
+  min-height: 56px;
+  position: fixed;
+  width: 328px;
+  z-index: 99999;
+}
+@media (max-width: 767px) {
+  .ods-snackbar {
+    left: 3%;
+    margin: 0;
+    right: 5%;
+    width: 93%;
+  }
+}
+.ods-snackbar__top-right-default {
+  -webkit-animation-delay: 0s, 3.9s;
+          animation-delay: 0s, 3.9s;
+  -webkit-animation-duration: 150ms, 150ms;
+          animation-duration: 150ms, 150ms;
+  -webkit-animation-name: moveInDown, moveInDownBack;
+          animation-name: moveInDown, moveInDownBack;
+  -webkit-animation-timing-function: ease-out forwards, ease-out forwards;
+          animation-timing-function: ease-out forwards, ease-out forwards;
+  right: 40px;
+  top: 40px;
+}
+.ods-snackbar__top-right-action {
+  -webkit-animation-delay: 0s, 9.9s;
+          animation-delay: 0s, 9.9s;
+  -webkit-animation-duration: 150ms, 150ms;
+          animation-duration: 150ms, 150ms;
+  -webkit-animation-name: moveInDown, moveInDownBack;
+          animation-name: moveInDown, moveInDownBack;
+  -webkit-animation-timing-function: ease-out forwards, ease-out forwards;
+          animation-timing-function: ease-out forwards, ease-out forwards;
+  right: 40px;
+  top: 40px;
+}
+.ods-snackbar__top-left-default {
+  -webkit-animation-delay: 0s, 3.9s;
+          animation-delay: 0s, 3.9s;
+  -webkit-animation-duration: 150ms, 150ms;
+          animation-duration: 150ms, 150ms;
+  -webkit-animation-name: moveInDown, moveInDownBack;
+          animation-name: moveInDown, moveInDownBack;
+  -webkit-animation-timing-function: ease-out forwards, ease-out forwards;
+          animation-timing-function: ease-out forwards, ease-out forwards;
+  left: 40px;
+  top: 40px;
+}
+.ods-snackbar__top-left-action {
+  -webkit-animation-delay: 0s, 9.9s;
+          animation-delay: 0s, 9.9s;
+  -webkit-animation-duration: 150ms, 150ms;
+          animation-duration: 150ms, 150ms;
+  -webkit-animation-name: moveInDown, moveInDownBack;
+          animation-name: moveInDown, moveInDownBack;
+  -webkit-animation-timing-function: ease-out forwards, ease-out forwards;
+          animation-timing-function: ease-out forwards, ease-out forwards;
+  left: 40px;
+  top: 40px;
+}
+.ods-snackbar__bottom-right-default {
+  -webkit-animation-delay: 0s, 3.9s;
+          animation-delay: 0s, 3.9s;
+  -webkit-animation-duration: 150ms, 150ms;
+          animation-duration: 150ms, 150ms;
+  -webkit-animation-name: moveInUp, moveInUpBack;
+          animation-name: moveInUp, moveInUpBack;
+  -webkit-animation-timing-function: ease-out forwards, ease-out forwards;
+          animation-timing-function: ease-out forwards, ease-out forwards;
+  bottom: 40px;
+  right: 40px;
+}
+.ods-snackbar__bottom-right-action {
+  -webkit-animation-delay: 0s, 9.9s;
+          animation-delay: 0s, 9.9s;
+  -webkit-animation-duration: 150ms, 150ms;
+          animation-duration: 150ms, 150ms;
+  -webkit-animation-name: moveInUp, moveInUpBack;
+          animation-name: moveInUp, moveInUpBack;
+  -webkit-animation-timing-function: ease-out forwards, ease-out forwards;
+          animation-timing-function: ease-out forwards, ease-out forwards;
+  bottom: 40px;
+  right: 40px;
+}
+.ods-snackbar__bottom-left-default {
+  -webkit-animation-delay: 0s, 3.9s;
+          animation-delay: 0s, 3.9s;
+  -webkit-animation-duration: 150ms, 150ms;
+          animation-duration: 150ms, 150ms;
+  -webkit-animation-name: moveInUp, moveInUpBack;
+          animation-name: moveInUp, moveInUpBack;
+  -webkit-animation-timing-function: ease-out forwards, ease-out forwards;
+          animation-timing-function: ease-out forwards, ease-out forwards;
+  bottom: 40px;
+  left: 40px;
+}
+.ods-snackbar__bottom-left-action {
+  -webkit-animation-delay: 0s, 9.9s;
+          animation-delay: 0s, 9.9s;
+  -webkit-animation-duration: 150ms, 150ms;
+          animation-duration: 150ms, 150ms;
+  -webkit-animation-name: moveInUp, moveInUpBack;
+          animation-name: moveInUp, moveInUpBack;
+  -webkit-animation-timing-function: ease-out forwards, ease-out forwards;
+          animation-timing-function: ease-out forwards, ease-out forwards;
+  bottom: 40px;
+  left: 40px;
+}
+.ods-snackbar__content {
+  display: flex;
+  max-width: 328px;
+  padding: 12px 16px;
+  width: 328px;
+  z-index: 1;
+}
+.ods-snackbar__icon {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+.ods-snackbar__icon-info {
+  color: #b8c3ff;
+}
+.ods-snackbar__icon-positive {
+  color: #3dcc64;
+}
+.ods-snackbar__icon-negative {
+  color: #f5456e;
+}
+.ods-snackbar__icon-warning {
+  color: #ffa347;
+}
+.ods-snackbar__label {
+  align-items: center;
+  color: white;
+  display: flex;
+  flex: 1;
+  font-family: "Nunito Sans";
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 21px;
+  margin: 0;
+  max-height: 42px;
+  overflow: hidden;
+  padding: 0 16px;
+  text-overflow: ellipsis;
+}
+.ods-snackbar__action {
+  align-items: center;
+  color: #3dcc64;
+  cursor: pointer;
+  display: flex;
+  font-family: "Nunito Sans";
+  font-size: 14px;
+  font-weight: 700;
+  justify-content: center;
+}
+.ods-snackbar__action-text-info {
+  color: #b8c3ff;
+}
+.ods-snackbar__action-text-positive {
+  color: #3dcc64;
+}
+.ods-snackbar__action-text-negative {
+  color: #f5456e;
+}
+.ods-snackbar__action-text-warning {
+  color: #ffa347;
+}
+.ods-snackbar__progress {
+  background-color: #67697a;
+  border-radius: 4px;
+  height: 100%;
+  opacity: 0.4;
+  position: absolute;
+  width: 0;
+}
+.ods-snackbar__progress-default {
+  -webkit-animation: 4s forwards progress;
+          animation: 4s forwards progress;
+}
+.ods-snackbar__progress-action {
+  -webkit-animation: 10s forwards progress;
+          animation: 10s forwards progress;
+}
+
+@-webkit-keyframes moveInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-3rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes moveInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-3rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@-webkit-keyframes moveInDownBack {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-3rem);
+  }
+}
+@keyframes moveInDownBack {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-3rem);
+  }
+}
+@-webkit-keyframes moveInUp {
+  from {
+    opacity: 0;
+    transform: translateY(3rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes moveInUp {
+  from {
+    opacity: 0;
+    transform: translateY(3rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@-webkit-keyframes moveInUpBack {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(3rem);
+  }
+}
+@keyframes moveInUpBack {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(3rem);
+  }
+}
+@-webkit-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%;
+  }
+}
+@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%;
+  }
+}
 /*# sourceMappingURL=ocean.css.map */