Remove deprecated @import commands from SASS files (#6426)

* Remove the use of @import statements in sass files and remove nested calls that assume a parent style is available and instead reference shared parent items with @use

* Update @uses with single quotes per Prettier

* fix: Add height CSS for Safari not showing layer icons (#6394) (#6424)

* Add height CSS for Safari not showing layer icons (#6394)

* Missed the drag icon

---------

Co-authored-by: Chris Benjamin <cbenjamin@stormseed.com>

* Add options for zoom change event (#6429)

* change order uses to match existing files

* couple of fixes to incorrect SASS references

---------

Co-authored-by: Chris Benjamin <cbenjamin@stormseed.com>
Co-authored-by: Artur Arseniev <artur.catch@hotmail.it>

Author: sirbeagle

packages/core/src/styles/scss/_gjs_assets.scss

@@ -1,4 +1,8 @@
-.#{$app-prefix}dropzone {
+@use 'gjs_main_mixins';
+@use 'gjs_vars';
+@use 'gjs_category_general';
+
+.#{gjs_vars.$app-prefix}dropzone {
   display: none;
   opacity: 0;
   position: absolute;
@@ -11,14 +15,14 @@
   pointer-events: none;
 }
 
-.#{$app-prefix}dropzone-active {
-  .#{$app-prefix}dropzone {
+.#{gjs_vars.$app-prefix}dropzone-active {
+  .#{gjs_vars.$app-prefix}dropzone {
     display: block;
     opacity: 1;
   }
 }
 
-.#{$am-prefix}assets {
+.#{gjs_vars.$am-prefix}assets {
   height: 290px;
   overflow: auto;
   clear: both;
@@ -28,12 +32,12 @@
   align-content: flex-start;
 }
 
-.#{$am-prefix}assets-header {
+.#{gjs_vars.$am-prefix}assets-header {
   padding: 5px;
 }
 
-.#{$am-prefix}add-asset {
-  .#{$am-prefix}add-field {
+.#{gjs_vars.$am-prefix}add-asset {
+  .#{gjs_vars.$am-prefix}add-field {
     width: 70%;
     float: left;
   }
@@ -44,7 +48,7 @@
   }
 }
 
-.#{$am-prefix}preview-cont {
+.#{gjs_vars.$am-prefix}preview-cont {
   position: relative;
   height: 70px;
   width: 30%;
@@ -54,7 +58,7 @@
   overflow: hidden;
 }
 
-.#{$am-prefix}preview {
+.#{gjs_vars.$am-prefix}preview {
   position: absolute;
   background-position: center center;
   background-size: cover;
@@ -64,22 +68,22 @@
   z-index: 1;
 }
 
-.#{$am-prefix}preview-bg {
-  @include opacity(0.5);
+.#{gjs_vars.$am-prefix}preview-bg {
+  @include gjs_main_mixins.opacity(0.5);
 
   position: absolute;
   height: 100%;
   width: 100%;
   z-index: 0;
 }
 
-.#{$am-prefix}dimensions {
-  @include opacity(0.5);
+.#{gjs_vars.$am-prefix}dimensions {
+  @include gjs_main_mixins.opacity(0.5);
 
   font-size: 10px;
 }
 
-.#{$am-prefix}meta {
+.#{gjs_vars.$am-prefix}meta {
   width: 70%;
   float: left;
   font-size: 12px;
@@ -91,7 +95,7 @@
   }
 }
 
-.#{$am-prefix}close {
+.#{gjs_vars.$am-prefix}close {
   @extend .btn-cl;
 
   cursor: pointer;
@@ -101,24 +105,24 @@
   display: none;
 }
 
-.#{$am-prefix}asset {
-  border-bottom: 1px solid darken-color(var(--gjs-main-dark-color), 3%);
+.#{gjs_vars.$am-prefix}asset {
+  border-bottom: 1px solid gjs_main_mixins.darken-color(var(--gjs-main-dark-color), 3%);
   padding: 5px;
   cursor: pointer;
   position: relative;
   box-sizing: border-box;
   width: 100%;
 
-  &:hover .#{$am-prefix}close {
+  &:hover .#{gjs_vars.$am-prefix}close {
     display: block;
   }
 }
 
-.#{$am-prefix}highlight {
+.#{gjs_vars.$am-prefix}highlight {
   background-color: var(--gjs-main-light-color);
 }
 
-.#{$am-prefix}assets-cont {
+.#{gjs_vars.$am-prefix}assets-cont {
   background-color: var(--gjs-secondary-dark-color);
   border-radius: 3px;
   box-sizing: border-box;

packages/core/src/styles/scss/_gjs_blocks.scss

@@ -1,32 +1,36 @@
-.#{$app-prefix}blocks-c {
+@use 'gjs_main_mixins';
+@use 'gjs_vars';
+@use 'gjs_category_general';
+
+.#{gjs_vars.$app-prefix}blocks-c {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
 }
 
-.#{$app-prefix}block-categories {
+.#{gjs_vars.$app-prefix}block-categories {
   display: flex;
   flex-direction: column;
 }
 
-.#{$app-prefix}block-category {
+.#{gjs_vars.$app-prefix}block-category {
   width: 100%;
 
-  &.#{$app-prefix}open {
-    @extend .#{$app-prefix}category-open;
+  &.#{gjs_vars.$app-prefix}open {
+    @extend .#{gjs_vars.$app-prefix}category-open;
   }
 
-  .#{$app-prefix}title {
-    @extend .#{$app-prefix}category-title;
+  .#{gjs_vars.$app-prefix}title {
+    @extend .#{gjs_vars.$app-prefix}category-title;
   }
 
-  .#{$app-prefix}caret-icon {
+  .#{gjs_vars.$app-prefix}caret-icon {
     margin-right: 5px;
   }
 }
 
-.#{$app-prefix}block {
-  @include user-select(none);
+.#{gjs_vars.$app-prefix}block {
+  @include gjs_main_mixins.user-select(none);
 
   width: 45%;
   min-width: 45px;
@@ -61,22 +65,22 @@
   }
 }
 
-.#{$app-prefix}block-svg {
+.#{gjs_vars.$app-prefix}block-svg {
   width: 54px;
   fill: currentColor;
 }
 
-.#{$app-prefix}block-svg-path {
+.#{gjs_vars.$app-prefix}block-svg-path {
   fill: currentColor;
 }
 
-.#{$app-prefix}block.fa {
+.#{gjs_vars.$app-prefix}block.fa {
   font-size: 2em;
   line-height: 2em;
   padding: 11px;
 }
 
-.#{$app-prefix}block-label {
+.#{gjs_vars.$app-prefix}block-label {
   line-height: normal;
   font-size: 0.65rem;
   font-weight: normal;
@@ -86,7 +90,7 @@
   pointer-events: none;
 }
 
-.#{$app-prefix}block.#{$app-prefix}bdrag {
+.#{gjs_vars.$app-prefix}block.#{gjs_vars.$app-prefix}bdrag {
   width: auto;
   padding: 0;
 }