@useblu/ocean-core 1.60.0 → 1.62.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.62.0](https://github.com/ocean-ds/ocean-web/compare/v1.61.0...v1.62.0) (2024-06-14)
+
+### Features
+
+- create accordion component ([#1106](https://github.com/ocean-ds/ocean-web/issues/1106)) ([f685167](https://github.com/ocean-ds/ocean-web/commit/f685167ca6e7293670b751bc583e7f5aacc8c01a))
+
+# [1.61.0](https://github.com/ocean-ds/ocean-web/compare/v1.60.0...v1.61.0) (2024-06-14)
+
+### Features
+
+- drawer ([#1105](https://github.com/ocean-ds/ocean-web/issues/1105)) ([1c749e0](https://github.com/ocean-ds/ocean-web/commit/1c749e011aa19acf67f1deb0cc15e47618f40e3f))
+
 # [1.60.0](https://github.com/ocean-ds/ocean-web/compare/v1.59.3...v1.60.0) (2024-06-13)
 
 ### Features

package/ocean.css

@@ -3934,8 +3934,13 @@
   top: 0;
   transition: all 335ms ease-out 0ms;
   visibility: hidden;
+}
+.ods-drawer--small {
   width: 378px;
 }
+.ods-drawer--large {
+  width: 476px;
+}
 .ods-drawer--right {
   left: auto;
   right: 0;
@@ -3964,7 +3969,7 @@
 
 .ods-drawer__content--header {
   display: flex;
-  height: 48px;
+  min-height: 48px;
   padding: 0 24px;
 }
 .ods-drawer__content--header--left {
@@ -3990,6 +3995,11 @@
 .ods-drawer__content--header .ods-btn--primary:hover {
   background-color: white;
 }
+@media (max-width: 767px) {
+  .ods-drawer__content--header {
+    padding: 0 16px;
+  }
+}
 
 .ods-snackbar {
   align-items: center;
@@ -4657,4 +4667,73 @@
   display: flex;
   min-height: 24px;
 }
+
+.ods-accordion {
+  border-bottom: 1px solid #e0e2ee;
+  padding: 16px 0;
+  width: 100%;
+}
+.ods-accordion__header {
+  align-items: center;
+  background-color: transparent;
+  border: hidden;
+  cursor: pointer;
+  display: flex;
+  font-family: "Nunito Sans";
+  font-size: 14px;
+  font-weight: 600;
+  justify-content: space-between;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+.ods-accordion__header:hover {
+  color: #5872f5;
+}
+.ods-accordion__header:focus {
+  outline: none;
+}
+.ods-accordion__header--collapsed {
+  color: #67697a;
+}
+.ods-accordion__header:not(.ods-accordion__header--collapsed) {
+  color: #5872f5;
+}
+.ods-accordion__icon {
+  height: 16px;
+  transition: transform 0.3s ease, fill 0.3s ease;
+  width: 16px;
+}
+.ods-accordion__icon--rotated {
+  color: #67697a;
+}
+.ods-accordion__icon:not(.ods-accordion__icon--rotated) {
+  color: #5872f5;
+  transform: rotate(180deg);
+}
+.ods-accordion__header:hover .ods-accordion__icon {
+  fill: #5872f5;
+}
+.ods-accordion__content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+  will-change: max-height;
+}
+.ods-accordion__content--collapsed {
+  max-height: 0;
+}
+.ods-accordion__content:not(.ods-accordion__content--collapsed) {
+  max-height: 800px;
+  transition: max-height 0.4s ease;
+}
+.ods-accordion__description {
+  color: #67697a;
+  font-family: "Nunito Sans";
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 21px;
+  margin: 0;
+  padding-top: 8px;
+}
 /*# sourceMappingURL=ocean.css.map */