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 https://github.com/elastic/kibana/issues/190898
[screenshots](https://github.com/elastic/kibana/pull/193931#issuecomment-2375127180)
Closes https://github.com/elastic/kibana/issues/190899
[screenshots](https://github.com/elastic/kibana/pull/193931#issuecomment-2375128228)
Closes https://github.com/elastic/kibana/issues/190900 Access Page uses
`authentication_state_page`, but I was unable to find
'overwrite_session` and `logged_out` pages
Closes https://github.com/elastic/kibana/issues/190901
[screenshots](https://github.com/elastic/kibana/pull/193931#issuecomment-2375126897)
Closes https://github.com/elastic/kibana/issues/190902 ^used on same UI
Closes https://github.com/elastic/kibana/issues/190903
[screenshots](https://github.com/elastic/kibana/pull/193931#issuecomment-2375127629)
Closes https://github.com/elastic/kibana/issues/190904
[screenshots](https://github.com/elastic/kibana/pull/193931#issuecomment-2375127865)
This commit is contained in:
Kurt 2024-10-01 10:43:52 -04:00 committed by GitHub
parent 12205d51c5
commit c8c74399a0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 21 additions and 13 deletions

View file

@ -9,10 +9,10 @@
}
.interactiveSetup__logo {
margin-bottom: $euiSizeXL;
@include kibanaCircleLogo;
@include euiBottomShadowMedium;
margin-bottom: $euiSizeXL;
}
.interactiveSetup__content {

View file

@ -7,9 +7,10 @@
}
.secAccessAgreementPage__text {
@include euiYScrollWithShadows;
max-height: 400px;
padding: $euiSize $euiSizeL 0;
@include euiYScrollWithShadows;
}
.secAccessAgreementPage__footer {

View file

@ -9,10 +9,10 @@
}
.secAuthenticationStatePage__logo {
margin-bottom: $euiSizeXL;
@include kibanaCircleLogo;
@include euiBottomShadowMedium;
margin-bottom: $euiSizeXL;
}
.secAuthenticationStatePage__content {

View file

@ -23,11 +23,11 @@
}
&:focus {
@include euiFocusRing;
border-color: transparent;
border-radius: $euiBorderRadius;
@include euiFocusRing;
.secLoginCard__title {
text-decoration: underline;
}

View file

@ -9,10 +9,10 @@
}
.loginWelcome__logo {
margin-bottom: $euiSizeXL;
@include kibanaCircleLogo;
@include euiBottomShadowMedium;
margin-bottom: $euiSizeXL;
}
.loginWelcome__content {

View file

@ -3,8 +3,9 @@
}
.spcMenu__spacesList {
@include euiYScrollWithShadows;
max-height: $euiSizeXL * 10;
@include euiYScrollWithShadows;
}
.spcMenu__searchFieldWrapper {

View file

@ -8,7 +8,7 @@ exports[`it renders with custom logo 1`] = `
>
<EuiPortal>
<div
className="spcSelectorBackground"
className="spcSelectorBackground spcSelectorBackground__nonMixinAttributes"
role="presentation"
/>
</EuiPortal>
@ -69,7 +69,7 @@ exports[`it renders without crashing 1`] = `
>
<EuiPortal>
<div
className="spcSelectorBackground"
className="spcSelectorBackground spcSelectorBackground__nonMixinAttributes"
role="presentation"
/>
</EuiPortal>

View file

@ -4,6 +4,9 @@
.spcSelectorBackground {
@include kibanaFullScreenGraphics;
}
.spcSelectorBackground__nonMixinAttributes {
z-index: -1;
pointer-events: none;
}

View file

@ -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">