Declutter global styles

src/components/document-preview/document-preview.vue

@@ -166,6 +166,7 @@ $colorLines: colors.$color-bg-light;
     &__image {
         width: 100%;
         background: url( "../../assets-inline/images/document_transparent_bg.png" ) repeat;
+        @include mixins.noEvents();
 
         &--crisp {
             image-rendering: pixelated;

src/components/file-menu/export-window/export-window.vue

@@ -496,7 +496,7 @@ export default {
 @use "@/styles/typography";
 @use "@/styles/ui";
 
-$idealFormWidth: 310px;
+$idealFormWidth: 370px;
 
 .export-modal {
     width: 100%;
@@ -507,7 +507,7 @@ $idealFormWidth: 310px;
         max-width: $idealFormWidth;
         padding: variables.$spacing-medium variables.$spacing-large;
         border: 1px dotted colors.$color-lines-dark;
-        border-bottom: none;
+        @include mixins.boxSize();
     }
 
     .export-actions {
@@ -523,6 +523,8 @@ $idealFormWidth: 310px;
     }
 
     @include mixins.large() {
+        border-bottom: none;
+        
         .export-actions button {
             width: math.div( $idealFormWidth, 2 );
         }
@@ -530,7 +532,7 @@ $idealFormWidth: 310px;
 
     @include mixins.mobile() {
         .export-form {
-            width: calc(100% - 16pt);
+            width: calc(100% - variables.$spacing-xxsmall);
             max-width: unset;
         }
 

src/components/grid-to-layers-window/grid-to-layers-window.vue

@@ -29,7 +29,7 @@
             <div class="form" @keyup.enter="requestSlice()">
                 <p v-t="'gridSliceExpl'" class="expl"></p>
                 <p>{{ $t( "currentDocumentSize", { width: Math.round( activeDocument.width ), height: Math.round( activeDocument.height ) }) }}</p>
-                <div class="wrapper wrapper--input">
+                <div class="wrapper wrapper--input wrapper--small">
                     <label v-t="'width'"></label>
                     <input
                         ref="widthInput"
@@ -39,7 +39,7 @@
                         class="input-field"
                     />
                 </div>
-                <div class="wrapper wrapper--input">
+                <div class="wrapper wrapper--input wrapper--small">
                     <label v-t="'height'"></label>
                     <input
                         v-model.number="height"
@@ -137,6 +137,10 @@ export default {
     @include ui.modalBase( 480px, 470px );
 }
 
+.wrapper--small .input-field {
+    width: 100px;
+}
+
 .expl {
     @include typography.smallText();
 }

src/components/layer-effects/layer-effects.vue

@@ -109,7 +109,7 @@
                     />
                 </div>
             </fieldset>
-            <fieldset class="fieldset">
+            <fieldset class="fieldset fieldset--duotone">
                 <legend v-t="'filters'" />
                 <div class="wrapper wrapper--slider">
                     <label v-t="'threshold'"></label>
@@ -365,22 +365,24 @@ export default {
 
 .layer-effects {
     @include panel.panel();
+    padding-top: variables.$spacing-small;
+    display: flex;
+    flex-direction: column;
 
-    & {
-        display: flex;
-        flex-direction: column;
+    :deep(.component__content) {
+        @include mixins.boxSize();
+        @include mixins.truncate();
+        border-bottom: 1px solid colors.$color-lines-dark;
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
 
-        :deep(.component__content) {
-            @include mixins.boxSize();
-            @include mixins.truncate();
-            border-bottom: 1px solid colors.$color-lines-dark;
-            overflow-x: hidden;
-            overflow-y: auto;
-        }
-
-        .component__actions {
-            margin-top: variables.$spacing-medium;
-        }
+    .component__actions {
+        margin-top: variables.$spacing-medium;
     }
 }
+
+.fieldset--duotone {
+    padding-bottom: variables.$spacing-small;
+}
 </style>

src/components/resize-canvas-window/resize-canvas-window.vue

@@ -27,7 +27,7 @@
         </template>
         <template #content>
             <div class="form" @keyup.enter="resize()">
-                <div class="wrapper wrapper--input">
+                <div class="wrapper wrapper--input wrapper--small">
                     <label v-t="'width'"></label>
                     <input
                         v-model.number="width"
@@ -37,7 +37,7 @@
                         class="input-field"
                     />
                 </div>
-                <div class="wrapper wrapper--input">
+                <div class="wrapper wrapper--input wrapper--small">
                     <label v-t="'height'"></label>
                     <input
                         v-model.number="height"
@@ -46,7 +46,7 @@
                         class="input-field"
                     />
                 </div>
-                <div class="wrapper wrapper--select">
+                <div class="wrapper wrapper--select wrapper--small">
                     <label v-t="'contentAlignment'"></label>
                     <select-box :options="alignmentOptions"
                                  v-model="alignment"
@@ -163,6 +163,17 @@ export default {
 @use "@/styles/ui";
 
 .resize-canvas {
-    @include ui.modalBase( 480px, 220px );
+    @include ui.modalBase( 420px, 220px );
+}
+
+.wrapper {
+    justify-content: space-between;
+}
+
+.wrapper--small {
+    .input-field,
+    .select-box-wrapper {
+        width: 180px;
+    }
 }
 </style>

src/components/tool-options-panel/tool-options-panel.vue

@@ -159,10 +159,7 @@ export default {
 .options-panel-wrapper {
     @include panel.panel();
     height: auto;
-
-    & {
-        overflow: initial !important;
-    }
+    overflow: initial !important;
 
     @include mixins.large() {
         &.collapsed {

src/components/tool-options-panel/tool-options-zoom/tool-options-zoom.vue

@@ -23,7 +23,7 @@
 <template>
     <div class="tool-option">
         <h3 v-t="'zoomLevel'"></h3>
-        <div class="wrapper full slider">
+        <div class="wrapper wrapper--slider wrapper--full">
             <slider
                 v-model="zoomLevel"
                 :min="min"

src/styles/_global.scss

@@ -1,10 +1,6 @@
 @use "_colors";
 @use "_mixins";
 @use "_variables";
-@use "@/styles/ui";
-@use "@/styles/form";
-@use "@/styles/typography";
-@use "@/styles/tooltip";
 
 html, body {
     margin: 0;