@useblu/ocean-core 1.57.1 → 1.58.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.58.0](https://github.com/ocean-ds/ocean-web/compare/v1.57.1...v1.58.0) (2024-05-15)
+
+### Features
+
+- alert button ([#1099](https://github.com/ocean-ds/ocean-web/issues/1099)) ([425e015](https://github.com/ocean-ds/ocean-web/commit/425e01503db7be486b9dbb0d43c631a891aca799))
+
 ## [1.57.1](https://github.com/ocean-ds/ocean-web/compare/v1.57.0...v1.57.1) (2024-04-18)
 
 **Note:** Version bump only for package @useblu/ocean-core

package/ocean.css

@@ -1786,18 +1786,24 @@
 }
 
 .ods-alert {
-  align-items: center;
+  align-items: flex-start;
   background-color: #f3f5fe;
   border-radius: 8px;
   color: #67697a;
   display: flex;
+  flex-direction: column;
   font-family: "Nunito Sans";
   font-size: 12px;
   font-weight: 400;
-  justify-content: left;
+  justify-content: center;
   line-height: 1.5;
   padding: 16px;
 }
+@media (min-width: 576px) {
+  .ods-alert__button--mobile {
+    display: none;
+  }
+}
 .ods-alert--error {
   background-color: #fff1f4;
 }
@@ -1807,6 +1813,12 @@
 .ods-alert--error .ods-alert__title {
   color: #f5456e;
 }
+.ods-alert--error .ods-btn {
+  background-color: #f5456e;
+}
+.ods-alert--error .ods-link {
+  color: #f5456e;
+}
 .ods-alert--warning {
   background-color: #fff7f0;
 }
@@ -1816,6 +1828,12 @@
 .ods-alert--warning .ods-alert__title {
   color: #ff8a14;
 }
+.ods-alert--warning .ods-btn {
+  background-color: #ff8a14;
+}
+.ods-alert--warning .ods-link {
+  color: #ff8a14;
+}
 .ods-alert--success {
   background-color: #f2fdf5;
 }
@@ -1825,8 +1843,14 @@
 .ods-alert--success .ods-alert__title {
   color: #2da94f;
 }
-.ods-alert--has-header {
-  align-items: flex-start;
+.ods-alert--success .ods-btn {
+  background-color: #2da94f;
+}
+.ods-alert--success .ods-link {
+  color: #2da94f;
+}
+.ods-alert__text {
+  display: flex;
   flex-direction: column;
 }
 .ods-alert__icon {
@@ -1834,12 +1858,26 @@
   min-width: 24px;
   stroke: #5872f5;
 }
+@media (max-width: 575.98px) {
+  .ods-alert__button {
+    display: none;
+  }
+}
+.ods-alert__button--mobile {
+  margin-top: 8px;
+}
+.ods-alert__button .ods-btn {
+  margin-left: 16px;
+  min-width: 0;
+}
 .ods-alert__header {
   align-items: center;
   display: flex;
-  margin: 0 0 8px 0;
   width: 100%;
 }
+.ods-alert__header--margin {
+  margin: 0 0 8px 0;
+}
 .ods-alert__title {
   color: #5872f5;
   font-size: 14px;
@@ -3912,8 +3950,8 @@
           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;
+  right: 40px;
 }
 .ods-snackbar__top-right-action {
   -webkit-animation-delay: 0s, 9.9s;
@@ -3924,8 +3962,8 @@
           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;
+  right: 40px;
 }
 .ods-snackbar__top-left-default {
   -webkit-animation-delay: 0s, 3.9s;
@@ -3936,8 +3974,8 @@
           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;
+  left: 40px;
 }
 .ods-snackbar__top-left-action {
   -webkit-animation-delay: 0s, 9.9s;
@@ -3948,8 +3986,8 @@
           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;
+  left: 40px;
 }
 .ods-snackbar__bottom-right-default {
   -webkit-animation-delay: 0s, 3.9s;