@useblu/ocean-core 1.40.1 → 1.43.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.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
+
+- drawer component ([#1061](https://github.com/ocean-ds/ocean-web/issues/1061)) ([2659cf7](https://github.com/ocean-ds/ocean-web/commit/2659cf70effdd66b9e0993fd142980ece5047ab4))
+
 ## [1.40.1](https://github.com/ocean-ds/ocean-web/compare/v1.40.0...v1.40.1) (2023-02-02)
 
 ### Reverts

package/ocean.css

@@ -3734,4 +3734,380 @@
   cursor: pointer;
   text-decoration: underline;
 }
+
+.ods-overlay {
+  background-color: rgba(0, 0, 0, 0.5);
+  height: 100%;
+  opacity: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1);
+  visibility: hidden;
+  width: 100%;
+}
+.ods-overlay--open {
+  opacity: 1;
+  visibility: visible;
+  z-index: 200;
+}
+
+.ods-drawer {
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  height: 100%;
+  left: auto;
+  outline: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  transform: translateX(100%);
+  transition: all 335ms ease-out 0ms;
+  visibility: hidden;
+  width: 378px;
+}
+.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);
+  transition: all 200ms ease-out 0ms;
+  visibility: visible;
+  z-index: 400;
+}
+@media (max-width: 575.98px) {
+  .ods-drawer--open {
+    cursor: default;
+    width: -webkit-fill-available;
+    width: -moz-available;
+    width: fill-available;
+  }
+}
+
+.ods-drawer__content--header {
+  display: flex;
+  height: 48px;
+  padding: 0 24px;
+}
+.ods-drawer__content--header--left {
+  justify-content: flex-start;
+}
+.ods-drawer__content--header--right {
+  justify-content: flex-end;
+}
+.ods-drawer__content--header .ods-btn--primary {
+  background: transparent;
+  border: 0;
+  color: #b6b9cc;
+  cursor: pointer;
+  height: 100%;
+  min-width: 0;
+  padding: 0;
+}
+@media (max-width: 575.98px) {
+  .ods-drawer__content--header .ods-btn--primary {
+    cursor: default;
+  }
+}
+.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 */