Move nested declarations above rule (#193931)

## Summary > Sass's behavior for declarations that appear after nested rules will be changing to match the behavior specified by CSS in an upcoming version. To keep the existing behavior, move the declaration above the nested rule. To opt into the new behavior, wrap the declaration in & {}. I have moved the declarations above the nested rules. I had attempted to opt in to the new behavior, but the resulting CSS has duplicate selectors, which CI does not allow For more information about the new behavior, see [here](https://sass-lang.com/documentation/breaking-changes/mixed-decls/) Closes #190898 [screenshots](#193931 (comment)) Closes #190899 [screenshots](#193931 (comment)) Closes #190900 Access Page uses `authentication_state_page`, but I was unable to find 'overwrite_session` and `logged_out` pages Closes #190901 [screenshots](#193931 (comment)) Closes #190902 ^used on same UI Closes #190903 [screenshots](#193931 (comment)) Closes #190904 [screenshots](#193931 (comment))
elastic · Oct 1, 2024 · c8c7439 · c8c7439
1 parent 12205d5
commit c8c7439
Show file tree

Hide file tree

Showing 9 changed files with 21 additions and 13 deletions.
diff --git a/src/plugins/interactive_setup/public/app.scss b/src/plugins/interactive_setup/public/app.scss
@@ -9,10 +9,10 @@
 }
 
 .interactiveSetup__logo {
+  margin-bottom: $euiSizeXL;
+
   @include kibanaCircleLogo;
   @include euiBottomShadowMedium;
-
-  margin-bottom: $euiSizeXL;
 }
 
 .interactiveSetup__content {

diff --git a/x-pack/plugins/security/public/authentication/access_agreement/access_agreement_page.scss b/x-pack/plugins/security/public/authentication/access_agreement/access_agreement_page.scss
@@ -7,9 +7,10 @@
 }
 
 .secAccessAgreementPage__text {
-  @include euiYScrollWithShadows;
   max-height: 400px;
   padding: $euiSize $euiSizeL 0;
+
+  @include euiYScrollWithShadows;
 }
 
 .secAccessAgreementPage__footer {

diff --git a/...public/authentication/components/authentication_state_page/authentication_state_page.scss b/...public/authentication/components/authentication_state_page/authentication_state_page.scss
@@ -9,10 +9,10 @@
 }
 
 .secAuthenticationStatePage__logo {
+  margin-bottom: $euiSizeXL;
+
   @include kibanaCircleLogo;
   @include euiBottomShadowMedium;
-
-  margin-bottom: $euiSizeXL;
 }
 
 .secAuthenticationStatePage__content {

diff --git a/x-pack/plugins/security/public/authentication/login/components/login_form/login_form.scss b/x-pack/plugins/security/public/authentication/login/components/login_form/login_form.scss
@@ -23,11 +23,11 @@
   }
 
   &:focus {
-    @include euiFocusRing;
-
     border-color: transparent;
     border-radius: $euiBorderRadius;
 
+    @include euiFocusRing;
+
     .secLoginCard__title {
       text-decoration: underline;
     }

diff --git a/x-pack/plugins/security/public/authentication/login/login_page.scss b/x-pack/plugins/security/public/authentication/login/login_page.scss
@@ -9,10 +9,10 @@
 }
 
 .loginWelcome__logo {
+  margin-bottom: $euiSizeXL;
+
   @include kibanaCircleLogo;
   @include euiBottomShadowMedium;
-
-  margin-bottom: $euiSizeXL;
 }
 
 .loginWelcome__content {

diff --git a/x-pack/plugins/spaces/public/nav_control/components/spaces_menu.scss b/x-pack/plugins/spaces/public/nav_control/components/spaces_menu.scss
@@ -3,8 +3,9 @@
 }
 
 .spcMenu__spacesList {
-  @include euiYScrollWithShadows;
   max-height: $euiSizeXL * 10;
+
+  @include euiYScrollWithShadows;
 }
 
 .spcMenu__searchFieldWrapper {

diff --git a/x-pack/plugins/spaces/public/space_selector/__snapshots__/space_selector.test.tsx.snap b/x-pack/plugins/spaces/public/space_selector/__snapshots__/space_selector.test.tsx.snap
diff --git a/x-pack/plugins/spaces/public/space_selector/space_selector.scss b/x-pack/plugins/spaces/public/space_selector/space_selector.scss
@@ -4,6 +4,9 @@
 
 .spcSelectorBackground {
   @include kibanaFullScreenGraphics;
+}
+
+.spcSelectorBackground__nonMixinAttributes {
   z-index: -1;
   pointer-events: none;
 }

diff --git a/x-pack/plugins/spaces/public/space_selector/space_selector.tsx b/x-pack/plugins/spaces/public/space_selector/space_selector.tsx
@@ -124,7 +124,10 @@ export class SpaceSelector extends Component<Props, State> {
       >
         {/* Portal the fixed background graphic so it doesn't affect page positioning or overlap on top of global banners */}
         <EuiPortal>
-          <div className="spcSelectorBackground" role="presentation" />
+          <div
+            className="spcSelectorBackground spcSelectorBackground__nonMixinAttributes"
+            role="presentation"
+          />
         </EuiPortal>
 
         <KibanaPageTemplate.Section color="transparent" paddingSize="xl">