fix#1957 Remove collapse margin. Beautify accordion. (#1964)

* Fix accordion margin. * Remove extra css variables.
epicmaxco · Jun 20, 2022 · 9c493a3 · 9c493a3
1 parent ba7947e
commit 9c493a3
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/packages/ui/src/components/va-accordion/VaAccordion.vue b/packages/ui/src/components/va-accordion/VaAccordion.vue
@@ -34,5 +34,28 @@ export default defineComponent({
 <style lang="scss">
 .va-accordion {
   font-family: var(--va-font-family);
+
+  // Do not remove border radius from expanded and next to it collapse
+  .va-collapse:not(.va-collapse--expanded, .va-collapse--expanded + .va-collapse) {
+    &:not(:first-child, :last-child) {
+      .va-collapse__header__content {
+        border-radius: 0;
+      }
+    }
+
+    &:first-child {
+      .va-collapse__header__content {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+
+    &:last-child {
+      .va-collapse__header__content {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+    }
+  }
 }
 </style>
diff --git a/packages/ui/src/components/va-collapse/VaCollapse.vue b/packages/ui/src/components/va-collapse/VaCollapse.vue
@@ -152,6 +152,7 @@ export default defineComponent({
       tabIndexComputed,
 
       computedClasses: computed(() => ({
+        'va-collapse--expanded': computedModelValue.value,
         'va-collapse--disabled': props.disabled,
         'va-collapse--solid': props.solid,
         'va-collapse--active': props.solid && computedModelValue.value,
@@ -192,7 +193,6 @@ export default defineComponent({
   &__body {
     transition: var(--va-collapse-body-transition);
     overflow: var(--va-collapse-body-overflow);
-    margin-top: var(--va-collapse-body-margin-top);
   }
 
   &__header {

diff --git a/packages/ui/src/components/va-collapse/_variables.scss b/packages/ui/src/components/va-collapse/_variables.scss
@@ -4,7 +4,6 @@
   --va-collapse-inset-margin: 0.5rem 0.5rem;
   --va-collapse-body-transition: all 0.3s linear;
   --va-collapse-body-overflow: hidden;
-  --va-collapse-body-margin-top: 0.1rem;
   --va-collapse-header-content-display: flex;
   --va-collapse-header-content-justify-content: space-between;
   --va-collapse-header-content-cursor: pointer;