chore: fix sass deprecation warnings (#1566)

sass is changing how nested rules are handled to align with native css specs: https://sass-lang.com/documentation/breaking-changes/mixed-decls/
SchwarzIT · Jul 15, 2024 · 86874c4 · 86874c4
1 parent ce9f4b8
commit 86874c4
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 9 deletions.
diff --git a/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue b/packages/sit-onyx/src/components/OnyxNavBar/OnyxNavBar.vue
@@ -194,6 +194,10 @@ $gap: var(--onyx-spacing-md);
     position: relative;
     container-type: size;
 
+    // sync with grid
+    max-width: var(--onyx-grid-max-width);
+    margin-inline: var(--onyx-grid-margin-inline);
+
     // implement bottom border with ::after so it does not add to the height
     &::after {
       content: " ";
@@ -217,10 +221,6 @@ $gap: var(--onyx-spacing-md);
         grid-template-columns: max-content max-content 1fr auto;
         grid-template-areas: "app back nav context";
       }
-
-      // sync with grid
-      max-width: var(--onyx-grid-max-width);
-      margin-inline: var(--onyx-grid-margin-inline);
     }
 
     &__back {

diff --git a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
@@ -411,8 +411,6 @@ const selectInputProps = computed(() => {
     $wrapper-padding: var(--onyx-spacing-2xs);
     $outline-size: 0.25rem;
 
-    @include list.styles();
-
     position: absolute;
     left: 0;
     top: calc(100% + $outline-size);
@@ -423,6 +421,8 @@ const selectInputProps = computed(() => {
       visibility var(--onyx-duration-sm),
       opacity var(--onyx-duration-sm);
 
+    @include list.styles();
+
     &--open {
       visibility: visible;
       opacity: 1;

diff --git a/packages/sit-onyx/src/components/OnyxSelectOption/OnyxSelectOption.vue b/packages/sit-onyx/src/components/OnyxSelectOption/OnyxSelectOption.vue
@@ -54,9 +54,10 @@ defineSlots<{
 
   @include layers.component() {
     &__checkbox {
-      @include checkbox.styles();
       // prevent the checkbox to get squished by a long label
       flex-shrink: 0;
+
+      @include checkbox.styles();
     }
   }
 }

diff --git a/packages/sit-onyx/src/components/OnyxTable/OnyxTable.vue b/packages/sit-onyx/src/components/OnyxTable/OnyxTable.vue
@@ -201,14 +201,14 @@ $border: var(--onyx-1px-in-rem) solid var(--onyx-color-base-neutral-300);
   }
 
   @include layers.component() {
-    @include define-borders();
-
     font-family: var(--onyx-font-family);
     color: var(--onyx-color-text-icons-neutral-intense);
     text-align: left;
     contain: paint;
     width: 100%;
 
+    @include define-borders();
+
     &__empty {
       &-content {
         display: flex;