ab-ui-library 1.5.3 → 1.5.5

package/assets/styles/styles.css

@@ -4281,54 +4281,82 @@ body {
 }
 
 .collapse {
-  --ds-collapse-border-radius:var(--ds-border-radius-xs);
-  --ds-collapse-border:1px solid var(--ds-color-border-tertiary);
-  --ds-collapse-bg:var(--ds-color-bg-white);
-  --ds-collapse-header-size:var(--ds-space-56);
-  --ds-collapse-header-space:var(--ds-space-16) var(--ds-space-24);
-  --ds-collapse-content-space:0 var(--ds-space-16) var(--ds-space-24);
-  --ds-collapse-divider-space:0 0 var(--ds-space-16);
-  background-color: var(--ds-collapse-bg);
-  border: var(--ds-collapse-border);
-  border-radius: var(--ds-collapse-border-radius);
+  --ds-collapse-border-width:0 0 1px;
+  --ds-collapse-border-color:var(--ds-color-border-secondary);
+  --ds-collapse-border-color-disabled:var(--ds-color-border-disabled);
+  --ds-collapse-space:var(--ds-space-16);
+  --ds-collapse-size:var(--ds-space-56);
+  --ds-collapse-content-space:var(--ds-space-16) 0 0;
+  border-color: var(--ds-collapse-border-color);
+  border-style: solid;
+  border-width: var(--ds-collapse-border-width);
+  min-height: var(--ds-collapse-size);
   overflow: hidden;
+  padding: var(--ds-collapse-space);
 }
 
 .collapse--opened .collapse__header__icon {
-  transform: rotate(90deg);
+  transform: rotate(180deg);
   transition: transform 0.3s ease 0s, color 0.3s ease-in-out 0s;
 }
 
+.collapse--disabled {
+  border-color: var(--ds-collapse-border-color-disabled);
+}
+
+.collapse--disabled .collapse__header {
+  cursor: not-allowed;
+}
+
+.collapse--disabled .collapse__additional {
+  opacity: 0.5;
+}
+
 .collapse__header {
+  -webkit-box-pack: justify;
+  -moz-box-pack: justify;
+  -ms-flex-pack: justify;
   cursor: pointer;
-  height: var(--ds-collapse-header-size);
-  padding: var(--ds-collapse-header-space);
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
   width: 100%;
 }
 
 .collapse__header__icon {
+  order: 1;
   transform: rotate(0);
   transition: transform 0.3s ease 0s, color 0.3s ease-in-out 0s;
 }
 
-.collapse__content {
-  padding: var(--ds-collapse-content-space);
+.collapse__header__inner {
+  flex: 1;
+  padding-right: var(--ds-space-8);
 }
 
-.collapse__divider {
-  margin: var(--ds-collapse-divider-space);
+.collapse__header--reverse .collapse__header__icon {
+  order: -1;
 }
 
-.collapse-group {
-  --ds-collapse-group-item-space:var(--ds-space-8);
+.collapse__header--reverse .collapse__header__inner {
+  padding-left: var(--ds-space-8);
+  padding-right: 0;
 }
 
-.collapse-group__item {
-  margin-bottom: var(--ds-collapse-group-item-space);
+.collapse__content {
+  padding: var(--ds-collapse-content-space);
 }
 
-.collapse-group__item:last-child {
-  margin-bottom: 0;
+.collapse-group {
+  --ds-collapse-group-item-space:var(--ds-space-24);
+}
+
+.collapse-group__item:not(.collapse-group:last-child) {
+  margin-bottom: var(--ds-collapse-group-item-space);
 }
 
 .controller {
@@ -7735,6 +7763,10 @@ body {
   position: relative;
 }
 
+.navigation-item:not(.navigation-item:last-child) {
+  margin-bottom: var(--ds-space-2);
+}
+
 .navigation-item__inner {
   border-radius: var(--ds-border-radius-lg);
 }
@@ -8053,6 +8085,8 @@ body {
 }
 
 .side-sheet__header__top__left {
+  align-items: center;
+  display: flex;
   flex: 1;
 }