@useblu/ocean-core 1.63.1 → 1.64.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.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

@@ -4420,27 +4420,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 +4458,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 +4475,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 +4500,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;