FIX: Wizard css was overriding some of core css (#17126)

* Use `var()`
* Remove imports
* Scope all wizard css to `body.wizard`
This commit is contained in:
Jarek Radosz 2022-06-17 17:28:54 +02:00 committed by GitHub
parent 1ada3a9404
commit a69b914710
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,11 +1,3 @@
@import "color_definitions";
@import "vendor/normalize";
@import "vendor/normalize-ext";
@import "common/foundation/colors";
@import "common/select-kit/_index";
@import "common/components/svg";
@import "common/base/modal";
$bubbles-mask: svg-uri(
'<svg xmlns="http://www.w3.org/2000/svg" width="415.2" height="414" viewBox="0 0 415.2 414">
<defs>
@ -722,7 +714,7 @@ $bubbles-mask: svg-uri(
body.wizard {
background: var(--secondary) $bubbles-mask;
color: var(--primary-very-high);
line-height: $line-height-large;
line-height: var(--line-height-large);
font-size: 15px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen-Sans, Ubuntu, Cantarell, Arial, sans-serif;
@ -736,7 +728,6 @@ body.wizard {
flex-direction: column;
justify-content: center;
}
}
.finish-installation {
.tada {
@ -972,7 +963,7 @@ body.wizard {
span {
position: absolute;
font-size: $font-0;
font-size: var(--font-0);
mix-blend-mode: difference;
color: var(--secondary-or-primary);
z-index: 13;
@ -999,7 +990,7 @@ body.wizard {
.wizard-btn {
border-radius: 2px;
font-size: $font-0;
font-size: var(--font-0);
border: 0;
padding: 0.5em;
transition: background-color 0.3s;
@ -1012,7 +1003,7 @@ body.wizard {
&.small {
padding: 0.25em 0.5em;
font-size: $font-down-1;
font-size: var(--font-down-1);
}
&:hover,
@ -1206,7 +1197,7 @@ body.wizard {
.text-field input {
width: 100%;
font-size: $font-up-1;
font-size: var(--font-up-1);
margin: 0;
padding: 6px;
background-color: var(--secondary);
@ -1297,16 +1288,10 @@ body.wizard {
}
}
@media only screen and (min-device-width: 569px) {
@import "desktop/modal";
}
/* fix wizard for mobile -- iPhone 5 default width */
@media only screen and (max-device-width: 568px) {
@import "mobile/modal";
h1 {
font-size: $font-up-2 !important;
font-size: var(--font-up-2) !important;
}
.wizard-column {
margin: auto !important;
@ -1366,3 +1351,4 @@ body.wizard {
}
}
}
}