@useblu/ocean-core 1.52.2 → 1.53.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.53.0](https://github.com/ocean-ds/ocean-web/compare/v1.52.2...v1.53.0) (2024-03-21)
+
+### Features
+
+- create chips component ([#1091](https://github.com/ocean-ds/ocean-web/issues/1091)) ([7fc498a](https://github.com/ocean-ds/ocean-web/commit/7fc498a565fe78a42c29bc7051796dc8560c301f))
+
 ## [1.52.2](https://github.com/ocean-ds/ocean-web/compare/v1.52.1...v1.52.2) (2024-01-30)
 
 ### Bug Fixes

package/ocean.css

@@ -4375,4 +4375,99 @@
 .ods-card-list-item--full-width {
   width: 100%;
 }
+
+.ods-chips {
+  display: inline-block;
+  position: relative;
+}
+.ods-chips__button {
+  background: #f7f9ff;
+  border: 0;
+  border-radius: 24px;
+  color: #0025e0;
+  display: flex;
+  font-size: 14px;
+  font-weight: 700;
+  gap: 4px;
+  height: 32px;
+  padding: 8px 16px;
+}
+.ods-chips__button:hover, .ods-chips__button:focus {
+  background: #ebecf5;
+}
+.ods-chips__button:active {
+  background: #0025e0;
+  color: white;
+}
+.ods-chips__button:active .ods-chips__badge > .ods-badge__content {
+  background: white;
+  color: #0025e0;
+}
+.ods-chips__button > svg {
+  height: 16px;
+  width: 16px;
+}
+.ods-chips__button--disabled {
+  background: #f7f9ff;
+  pointer-events: none;
+}
+.ods-chips__button--disabled .ods-chips__label {
+  color: #b6b9cc;
+}
+.ods-chips__button--disabled .ods-chips__badge > .ods-badge__content {
+  background: #b6b9cc;
+}
+.ods-chips__button--disabled > svg {
+  color: #b6b9cc;
+}
+.ods-chips__button--active {
+  background: #0025e0;
+  color: white;
+}
+.ods-chips__button--active:hover, .ods-chips__button--active:focus {
+  background: #0025e0;
+}
+.ods-chips__button--active .ods-chips__badge > .ods-badge__content {
+  background: white;
+  color: #0025e0;
+}
+.ods-chips__label {
+  margin: 0;
+}
+.ods-chips__options {
+  -ms-overflow-style: none;
+  align-items: flex-start;
+  background: white;
+  border: 1px solid #ebecf5;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  max-height: 200px;
+  overflow-y: auto;
+  padding: 4px;
+  position: absolute;
+  scrollbar-width: none;
+  top: 38px;
+  width: 220px;
+}
+.ods-chips__options::-webkit-scrollbar {
+  display: none;
+}
+.ods-chips__options--option {
+  align-items: center;
+  background-color: white;
+  border: 0;
+  color: #67697a;
+  display: flex;
+  font-size: 14px;
+  font-weight: 400;
+  min-height: 40px;
+  padding: 8px 12px;
+  width: 100%;
+}
+.ods-chips__options--option:hover {
+  background-color: #f7f9ff;
+  border-radius: 4px;
+  color: #0025e0;
+}
 /*# sourceMappingURL=ocean.css.map */