diff --git a/src/components/file-menu/export-window/export-window.vue b/src/components/file-menu/export-window/export-window.vue index 6c966c4..855a455 100644 --- a/src/components/file-menu/export-window/export-window.vue +++ b/src/components/file-menu/export-window/export-window.vue @@ -523,7 +523,9 @@ $idealFormWidth: 340px; } } - + @include mixins.minHeight( variables.$preview-ideal-height ) { + height: variables.$preview-ideal-height; + } @include mixins.componentFallback( variables.$preview-ideal-width, variables.$preview-ideal-height ) { // this view does not fit the original and export preview side-by-side, only show export diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue index 91511d9..39bfdef 100644 --- a/src/components/modal/modal.vue +++ b/src/components/modal/modal.vue @@ -79,7 +79,7 @@ export default { & { background-image: colors.$color-window-bg; - $headerHeight: 48px; + $headerHeight: variables.$modal-header-height; :deep(.component__header) { height: $headerHeight; diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index e2514f7..2dc28dc 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -4,12 +4,7 @@ $mobile-width: 640px; // the threshold below which we start to use the mobile vi $ideal-width: 990px; $menu-height: 46px; $heading-height: 40px; - -/* document preview variables */ - -$preview-ideal-width: 1280px; -$preview-ideal-height: 700px; -$preview-max-height: $preview-ideal-height - 55px; +$modal-header-height: 48px; /* spacing units used for global margins / paddings */ @@ -20,3 +15,9 @@ $spacing-medium: 16px; $spacing-large: 28px; $spacing-xlarge: 32px; $spacing-xxlarge: 48px; + +/* document preview variables */ + +$preview-ideal-width: 1280px; +$preview-ideal-height: 700px; +$preview-max-height: $preview-ideal-height - ( $modal-header-height + $spacing-xlarge + 55px ); // modal header + content padding + preview meta