chore(sass): address deprecation warnings for nested rules

ithaka · Aug 7, 2024 · f401540 · f401540
1 parent 4957b71
commit f401540
Show file tree

Hide file tree

Showing 10 changed files with 87 additions and 27 deletions.
diff --git a/files.txt b/files.txt
@@ -0,0 +1,60 @@
+packages/pharos/src/components/button/pharos-button.scss
+packages/pharos/src/utils/scss/_mixins.scss
+packages/pharos/src/components/combobox/pharos-combobox.scss
+packages/pharos/src/utils/scss/_mixins.scss
+packages/pharos/src/components/combobox/pharos-combobox.scss
+packages/pharos/src/utils/scss/_mixins.scss
+packages/pharos/src/components/dropdown-menu/pharos-dropdown-menu.scss
+packages/pharos/src/utils/scss/_mixins.scss
+packages/pharos/src/components/dropdown-menu/pharos-dropdown-menu.scss
+packages/pharos/src/utils/scss/_mixins.scss
+packages/pharos/src/components/dropdown-menu/pharos-dropdown-menu.scss
+packages/pharos/src/utils/scss/_mixins.scss
+packages/pharos/src/components/dropdown-menu/pharos-dropdown-menu.scss
+packages/pharos/src/utils/scss/_mixins.scss
+packages/pharos/src/components/dropdown-menu/pharos-dropdown-menu.scss
+packages/pharos/src/utils/scss/_mixins.scss
+packages/pharos/src/components/link/pharos-link.scss
+packages/pharos/src/utils/scss/_mixins.scss
+packages/pharos/src/components/link/pharos-link.scss
+packages/pharos/src/utils/scss/_mixins.scss
+packages/pharos/src/components/link/pharos-link.scss
+packages/pharos/src/utils/scss/_mixins.scss
+packages/pharos/src/components/link/pharos-link.scss
+packages/pharos/src/utils/scss/_mixins.scss
+packages/pharos/src/components/link/pharos-link.scss
+packages/pharos/src/utils/scss/_mixins.scss
+packages/pharos/src/components/popover/pharos-popover.scss
+packages/pharos/src/utils/scss/_mixins.scss
+packages/pharos/src/components/popover/pharos-popover.scss
+packages/pharos/src/utils/scss/_mixins.scss
+packages/pharos/src/components/popover/pharos-popover.scss
+packages/pharos/src/utils/scss/_mixins.scss
+packages/pharos/src/components/popover/pharos-popover.scss
+packages/pharos/src/utils/scss/_mixins.scss
+packages/pharos/src/components/popover/pharos-popover.scss
+packages/pharos/src/utils/scss/_mixins.scss
+packages/pharos/src/components/select/pharos-select.scss
+packages/pharos/src/utils/scss/_mixins.scss
+packages/pharos/src/components/select/pharos-select.scss
+packages/pharos/src/utils/scss/_mixins.scss
+packages/pharos/src/components/sidenav/pharos-sidenav-menu.scss
+packages/pharos/src/utils/scss/_mixins.scss
+packages/pharos/src/components/sidenav/pharos-sidenav-menu.scss
+packages/pharos/src/utils/scss/_mixins.scss
+packages/pharos/src/components/sidenav/pharos-sidenav-menu.scss
+packages/pharos/src/utils/scss/_mixins.scss
+packages/pharos/src/components/sidenav/pharos-sidenav-menu.scss
+packages/pharos/src/utils/scss/_mixins.scss
+packages/pharos/src/components/sidenav/pharos-sidenav-menu.scss
+packages/pharos/src/utils/scss/_mixins.scss
+packages/pharos/src/components/textarea/pharos-textarea.scss
+packages/pharos/src/utils/scss/_mixins.scss
+packages/pharos/src/components/textarea/pharos-textarea.scss
+packages/pharos/src/utils/scss/_mixins.scss
+packages/pharos/src/components/toggle-button-group/pharos-toggle-button.scss
+packages/pharos/src/utils/scss/_mixins.scss
+packages/pharos/src/components/toggle-button-group/pharos-toggle-button.scss
+packages/pharos/src/utils/scss/_mixins.scss
+packages/pharos/src/components/toggle-button-group/pharos-toggle-button.scss
+packages/pharos/src/utils/scss/_mixins.scss
diff --git a/packages/pharos/src/components/button/pharos-button.scss b/packages/pharos/src/components/button/pharos-button.scss
@@ -31,13 +31,13 @@
 }
 
 :host([variant='overlay']) #button-element {
+  opacity: 0.9;
+
   @include mixins.button-base(
     $color: var(--pharos-button-color-base-overlay-text-base),
     $background-color: var(--pharos-button-color-base-overlay-background-base),
     $border-color: var(--pharos-button-color-base-overlay-border-base)
   );
-
-  opacity: 0.9;
 }
 
 :host([href]) #button-element {

diff --git a/packages/pharos/src/components/combobox/pharos-combobox.scss b/packages/pharos/src/components/combobox/pharos-combobox.scss
@@ -49,13 +49,13 @@
 }
 
 .input-element {
+  border-right: none;
+  border-radius: var(--pharos-radius-base-standard) 0 0 var(--pharos-radius-base-standard);
+
   @include mixins.input-base;
   @include mixins.input-required;
   @include mixins.input-placeholder;
 
-  border-right: none;
-  border-radius: var(--pharos-radius-base-standard) 0 0 var(--pharos-radius-base-standard);
-
   &:focus {
     @include mixins.input-focus;
     @include mixins.input-padding-thick-border;

diff --git a/packages/pharos/src/components/dropdown-menu/pharos-dropdown-menu.scss b/packages/pharos/src/components/dropdown-menu/pharos-dropdown-menu.scss
@@ -10,8 +10,6 @@
 }
 
 .dropdown-menu__list {
-  @include mixins.interactive-focus;
-
   background-color: var(--pharos-color-ui-10);
   position: relative;
   contain: layout;
@@ -28,6 +26,8 @@
   transition:
     visibility 0s var(--pharos-transition-duration-short),
     opacity var(--pharos-transition-duration-short) linear;
+
+  @include mixins.interactive-focus;
 }
 
 :host([open]) .dropdown-menu__list {

diff --git a/packages/pharos/src/components/link/pharos-link.scss b/packages/pharos/src/components/link/pharos-link.scss
@@ -23,15 +23,15 @@
 }
 
 :host(:not([href])) #link-element {
-  @include mixins.link-base;
-  @include mixins.link-hover;
-  @include mixins.interactive-focus;
-
   background-color: transparent;
   border: none;
   padding: 0;
   text-align: left;
   cursor: pointer;
+
+  @include mixins.link-base;
+  @include mixins.link-hover;
+  @include mixins.interactive-focus;
 }
 
 :host([is-on-background]) #link-element {

diff --git a/packages/pharos/src/components/popover/pharos-popover.scss b/packages/pharos/src/components/popover/pharos-popover.scss
@@ -10,8 +10,6 @@
 }
 
 .popover {
-  @include mixins.interactive-focus;
-
   position: relative;
   margin: 0;
   box-shadow: var(--pharos-elevation-level-4);
@@ -24,6 +22,8 @@
     visibility 0s var(--pharos-transition-duration-short),
     opacity var(--pharos-transition-duration-short) linear;
   overflow: hidden;
+
+  @include mixins.interactive-focus;
 }
 
 :host([open]) .popover {

diff --git a/packages/pharos/src/components/select/pharos-select.scss b/packages/pharos/src/components/select/pharos-select.scss
@@ -7,15 +7,15 @@
 }
 
 #select-element {
-  @include mixins.input-base;
-  @include mixins.input-required;
-  @include mixins.transition-base(border-color, color);
-
   appearance: none;
   cursor: pointer;
   background: none;
   padding-right: 2.5rem;
 
+  @include mixins.transition-base(border-color, color);
+  @include mixins.input-base;
+  @include mixins.input-required;
+
   &:focus {
     @include mixins.input-padding-thick-border;
     @include mixins.input-focus;

diff --git a/packages/pharos/src/components/sidenav/pharos-sidenav-menu.scss b/packages/pharos/src/components/sidenav/pharos-sidenav-menu.scss
@@ -6,9 +6,6 @@
 }
 
 #button-element {
-  @include mixins.font-base;
-  @include mixins.interactive-focus;
-
   border: none;
   background: none;
   width: 100%;
@@ -23,6 +20,9 @@
   transition-property: background-color;
   transition-duration: var(--pharos-transition-duration-default);
 
+  @include mixins.font-base;
+  @include mixins.interactive-focus;
+
   &:focus {
     outline-offset: -2px;
   }

diff --git a/packages/pharos/src/components/textarea/pharos-textarea.scss b/packages/pharos/src/components/textarea/pharos-textarea.scss
@@ -7,13 +7,13 @@
 }
 
 .textarea {
+  min-height: var(--pharos-textarea-size-height-base);
+  overflow: auto;
+
   @include mixins.input-base;
   @include mixins.input-required;
   @include mixins.input-placeholder;
 
-  min-height: var(--pharos-textarea-size-height-base);
-  overflow: auto;
-
   &:focus {
     @include mixins.input-padding-thick-border;
     @include mixins.input-focus;

diff --git a/packages/pharos/src/components/toggle-button-group/pharos-toggle-button.scss b/packages/pharos/src/components/toggle-button-group/pharos-toggle-button.scss
@@ -1,15 +1,15 @@
 @use '../../utils/scss/mixins';
 
 :host([variant='secondary']) #button-element {
+  outline-offset: 0;
+  border-radius: 0;
+  border-width: 1px;
+
   @include mixins.button-base(
     $color: var(--pharos-color-text-base),
     $background-color: transparent,
     $border-color: var(--pharos-color-black)
   );
-
-  outline-offset: 0;
-  border-radius: 0;
-  border-width: 1px;
 }
 
 :host([variant='secondary']) #button-element:hover,