style: narrowerd popover gap

ICIJ · Jul 25, 2024 · 1390dbe · 1390dbe
1 parent 87cf0b9
commit 1390dbe
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/src/components/Document/DocumentDownloadPopover/DocumentDownloadPopover.vue b/src/components/Document/DocumentDownloadPopover/DocumentDownloadPopover.vue
@@ -155,7 +155,7 @@ const maxRootContentLength = computed(() => {
         variant="outline-primary"
         class="document-download-popover__body__button"
       />
-      <div class="document-download-popover__body__sections pt-3">
+      <div class="document-download-popover__body__sections">
         <document-download-popover-section
           :title="$t('documentDownloadPopover.sectionTitle')"
           :value="document.title"
@@ -165,7 +165,7 @@ const maxRootContentLength = computed(() => {
           <display-content-type :value="document.contentType" />
         </document-download-popover-section>
         <document-download-popover-section v-if="executionWarning">
-          <dismissable-alert no-close no-button bordered icon-class="align-self-start" variant="warning">
+          <dismissable-alert class="m-0" no-close no-button bordered icon-class="align-self-start" variant="warning">
             {{ executionWarning }}
           </dismissable-alert>
         </document-download-popover-section>
@@ -188,6 +188,10 @@ const maxRootContentLength = computed(() => {
     flex-direction: column;
     gap: $spacer-sm;
 
+    .bs-popover-top & {
+      flex-direction: column-reverse;
+    }
+
     &__button {
       white-space: nowrap;
       align-self: flex-start;
@@ -197,7 +201,12 @@ const maxRootContentLength = computed(() => {
       margin-top: $spacer;
       display: flex;
       flex-direction: column;
-      gap: $spacer-xl;
+      gap: $spacer;
+
+      .bs-popover-top & {
+        margin-top: 0;
+        margin-bottom: $spacer;
+      }
     }
   }
 }

diff --git a/src/components/Document/DocumentDownloadPopover/DocumentDownloadPopoverSection.vue b/src/components/Document/DocumentDownloadPopover/DocumentDownloadPopoverSection.vue
@@ -19,7 +19,7 @@ const hasValue = computed(() => {
 
 <template>
   <section class="document-download-popover-section">
-    <div v-if="title" class="document-download-popover-section__title pb-2 text-tertiary-emphasis fst-italic">
+    <div v-if="title" class="document-download-popover-section__title pb-1 text-tertiary-emphasis fst-italic">
       {{ title }}
     </div>
     <div v-if="hasValue" class="document-download-popover-section__value text-primary-emphasis">

diff --git a/src/utils/settings.scss b/src/utils/settings.scss
@@ -147,11 +147,11 @@ $form-radio-input-border: var(--bs-border-width) solid $tertiary;
 $form-radio-input-checked-border-color: $form-check-input-checked-border-color;
 
 $popover-bg: var(--bs-primary-bg-subtle);
-$popover-box-shadow: var(--bs-box-shadow);
+$popover-box-shadow: none;
 $popover-font-size: $font-size-base;
 $popover-max-width: 375px;
 $popover-border-width: 1px;
-$popover-border-color: $popover-bg;
+$popover-border-color: transparent;
 $popover-body-padding-y: $spacer-xl;
 $popover-body-padding-x: $spacer-xl;
 $popover-arrow-width: $spacer-xl;