@useblu/ocean-core 1.63.1 → 1.65.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.65.0](https://github.com/ocean-ds/ocean-web/compare/v1.64.0...v1.65.0) (2024-06-26)
+
+### Features
+
+- update link ([#1111](https://github.com/ocean-ds/ocean-web/issues/1111)) ([8aa0bf2](https://github.com/ocean-ds/ocean-web/commit/8aa0bf2c4ad0c82e5a4f0c66595d8883edea93c8))
+
+# [1.64.0](https://github.com/ocean-ds/ocean-web/compare/v1.63.1...v1.64.0) (2024-06-26)
+
+### Features
+
+- update card list item component ([#1113](https://github.com/ocean-ds/ocean-web/issues/1113)) ([1c8cf3d](https://github.com/ocean-ds/ocean-web/commit/1c8cf3df19e2d0313d11a06975e845fcf23788a4))
+
 ## [1.63.1](https://github.com/ocean-ds/ocean-web/compare/v1.63.0...v1.63.1) (2024-06-20)
 
 ### Bug Fixes

package/ocean.css

@@ -2383,42 +2383,62 @@
   font-family: "Nunito Sans";
   font-weight: 600;
   line-height: 1;
+  text-decoration: underline;
+}
+.ods-link--chevron svg {
+  margin-left: 2px;
+}
+.ods-link--tiny {
+  font-size: 12px;
+  line-height: 12px;
+}
+.ods-link--tiny svg {
+  height: 14px;
+  margin-left: 0;
+  width: 14px;
+}
+.ods-link--external svg {
+  margin-left: 4px;
 }
 .ods-link--sm {
   font-size: 14px;
+  line-height: 14px;
 }
 .ods-link--md {
   font-size: 16px;
+  line-height: 16px;
 }
 .ods-link--primary {
   color: #0025e0;
 }
-.ods-link--primary:hover {
+.ods-link--primary:hover, .ods-link--primary:focus {
   color: #5872f5;
   text-decoration: underline;
 }
 .ods-link--inverse {
   color: #6ae5e5;
 }
-.ods-link--inverse:hover {
+.ods-link--inverse:hover, .ods-link--inverse:focus {
   color: #b0f5f5;
   text-decoration: underline;
 }
 .ods-link--neutral {
   color: #67697a;
 }
-.ods-link--neutral:hover {
+.ods-link--neutral:hover, .ods-link--neutral:focus {
   color: #5872f5;
   text-decoration: underline;
 }
+.ods-link--disabled {
+  color: #aaadc0;
+  cursor: not-allowed;
+  pointer-events: none;
+}
 .ods-link--with-icon {
   align-items: center;
   display: flex;
   flex-direction: row;
 }
-.ods-link svg {
-  margin-left: 4px;
-}
 
 .ods-list {
   background: white;
@@ -4420,27 +4440,18 @@
 .ods-card-list-item {
   align-items: center;
   border: 1px solid #e0e2ee;
-  border-radius: 12px;
+  border-radius: 8px;
   box-sizing: border-box;
   cursor: pointer;
   display: flex;
   flex-direction: row;
-  gap: 16px;
-  padding: 16px;
+  gap: 12px;
+  padding: 16px 12px 16px 16px;
   transition: 200ms;
   width: 320px;
 }
-.ods-card-list-item__leading-icon {
-  background-color: #f3f5fe;
-  border-radius: 50%;
-  box-sizing: content-box;
-  color: #5872f5;
-  height: 24px;
-  padding: 8px;
-  transition: 200ms;
-  width: 24px;
-}
 .ods-card-list-item__leading-icon svg {
+  color: #5872f5;
   height: 24px;
   width: 24px;
 }
@@ -4467,9 +4478,9 @@
   color: #67697a;
   font-family: "Nunito Sans";
   font-size: 12px;
-  font-weight: 400;
+  font-weight: 600;
   line-height: 1.5;
-  margin-top: 4px;
+  margin-top: 8px;
 }
 .ods-card-list-item__action {
   background-color: transparent;
@@ -4484,12 +4495,9 @@
   height: 20px;
   width: 20px;
 }
-.ods-card-list-item:hover:not(.ods-card-list-item--disabled) {
+.ods-card-list-item:hover:not(.ods-card-list-item--disabled, .ods-card-list-item--loading) {
   background-color: #f3f5fe;
 }
-.ods-card-list-item:hover:not(.ods-card-list-item--disabled):not(.ods-card-list-item--size-small) .ods-card-list-item__leading-icon {
-  background-color: rgba(184, 195, 255, 0.16);
-}
 .ods-card-list-item--disabled {
   cursor: not-allowed;
 }
@@ -4512,10 +4520,86 @@
   background-color: transparent;
   padding: 0;
 }
+.ods-card-list-item--size-small .ods-card-list-item__lines {
+  margin-left: 0;
+}
+.ods-card-list-item--size-small .ods-card-list-item__circle {
+  height: 20px;
+  min-height: 20px;
+  min-width: 20px;
+  width: 20px;
+}
+.ods-card-list-item--size-small .ods-card-list-item__lines__line2 {
+  width: 87px;
+}
+.ods-card-list-item--size-small .ods-card-list-item__lines__line2 {
+  width: 260px;
+}
 .ods-card-list-item--full-width {
   width: 100%;
 }
+.ods-card-list-item__circle {
+  -webkit-animation: pulse 1.5s infinite ease-in-out;
+          animation: pulse 1.5s infinite ease-in-out;
+  background-color: #f3f5fe;
+  border-radius: 50%;
+  height: 40px;
+  width: 40px;
+}
+.ods-card-list-item__lines {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-left: 4px;
+}
+.ods-card-list-item__lines__line1 {
+  -webkit-animation: pulse 1.5s infinite ease-in-out;
+          animation: pulse 1.5s infinite ease-in-out;
+  background-color: #f3f5fe;
+  border-radius: 4px;
+  height: 16px;
+  width: 80px;
+}
+.ods-card-list-item__lines__line2 {
+  -webkit-animation: pulse 1.5s infinite ease-in-out;
+          animation: pulse 1.5s infinite ease-in-out;
+  background-color: #f3f5fe;
+  border-radius: 4px;
+  height: 16px;
+  width: 236px;
+}
+.ods-card-list-item__lines__line3 {
+  -webkit-animation: pulse 1.5s infinite ease-in-out;
+          animation: pulse 1.5s infinite ease-in-out;
+  background-color: #f3f5fe;
+  border-radius: 4px;
+  height: 16px;
+  width: 118px;
+}
 
+@-webkit-keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 .ods-chips {
   display: inline-block;
   position: relative;