@useblu/ocean-core 1.41.0 → 1.44.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.44.0](https://github.com/ocean-ds/ocean-web/compare/v1.43.0...v1.44.0) (2023-06-01)
+
+### Features
+
+- add attach mode to drawer ([#1067](https://github.com/ocean-ds/ocean-web/issues/1067)) ([2edfd28](https://github.com/ocean-ds/ocean-web/commit/2edfd28eb6ba53242b83d656f8c4f455e2ba5da9))
+
+# [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

@@ -3739,6 +3739,7 @@
   background-color: rgba(0, 0, 0, 0.5);
   height: 100%;
   opacity: 0;
+  overflow: hidden;
   position: fixed;
   right: 0;
   top: 0;
@@ -3758,16 +3759,23 @@
   flex-direction: column;
   flex-shrink: 0;
   height: 100%;
-  left: auto;
   outline: 0;
-  position: fixed;
-  right: 0;
+  position: absolute;
   top: 0;
-  transform: translateX(100%);
   transition: all 335ms ease-out 0ms;
   visibility: hidden;
   width: 378px;
 }
+.ods-drawer--right {
+  left: auto;
+  right: 0;
+  transform: translateX(100%);
+}
+.ods-drawer--left {
+  left: 0;
+  right: auto;
+  transform: translateX(-100%);
+}
 .ods-drawer--open {
   box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
   transform: translateX(0);
@@ -3812,4 +3820,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 */