github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-05-13 22:03:16 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Ensure wizard previews display at correct width (#24801)

Browse Source
This commit is contained in:
David Taylor 2023-12-08 20:45:54 +00:00 committed by GitHub
parent 601510f730
commit 6388d929d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
app/assets/stylesheets/wizard.scss
View File

@ -93,11 +93,8 @@ body.wizard {
} }
&.styling { &.styling {
max-width: 85%;
@include breakpoint("mobile-extra-large") {
max-width: 100%; max-width: 100%;
} width: auto;
} }
} }
@ -161,16 +158,9 @@ body.wizard {
display: block; display: block;
} }
&__field.component-styling-preview {
display: inline;
@media only screen and (max-device-width: 568px) {
display: none;
}
}
&__field.text-governing-law, &__field.text-governing-law,
&__field.text-city-for-disputes { &__field.text-city-for-disputes {
@media only screen and (max-device-width: 568px) { @media only screen and (max-width: 568px) {
display: none; display: none;
} }
} }
@ -184,7 +174,7 @@ body.wizard {
box-sizing: border-box; box-sizing: border-box;
margin-right: 1em; margin-right: 1em;
@media only screen and (max-device-width: 568px) { @media only screen and (max-width: 925px) {
width: 80%; width: 80%;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -193,11 +183,11 @@ body.wizard {
+ .wizard-container__fields { + .wizard-container__fields {
padding: 1em; padding: 1em;
background: var(--primary-very-low); background: var(--primary-very-low);
width: calc(100% - 170px); width: auto;
border-radius: 0.5em; border-radius: 0.5em;
margin-top: -1em; margin-top: -1em;
@media only screen and (max-device-width: 568px) { @media only screen and (max-width: 925px) {
display: none; display: none;
} }
} }
@ -229,7 +219,7 @@ body.wizard {
.previews { .previews {
position: relative; position: relative;
height: 320px; height: 320px;
width: 100%; width: 628px;
overflow: hidden; overflow: hidden;
background: var(--secondary); background: var(--secondary);
border-radius: 10px; border-radius: 10px;
@ -285,7 +275,7 @@ body.wizard {
&__step-form { &__step-form {
flex: 1 0 50%; flex: 1 0 50%;
@media only screen and (max-device-width: 568px) { @media only screen and (max-width: 568px) {
width: 100%; width: 100%;
} }
} }
@ -318,7 +308,7 @@ body.wizard {
&__step-text { &__step-text {
display: inline; display: inline;
margin-right: 0.25em; margin-right: 0.25em;
@media only screen and (max-device-width: 568px) { @media only screen and (max-width: 568px) {
display: none; display: none;
} }
} }
@ -522,7 +512,7 @@ body.wizard {
margin: 0; margin: 0;
} }
@media only screen and (max-device-width: 568px) { @media only screen and (max-width: 568px) {
font-size: var(--font-0); font-size: var(--font-0);
} }
} }
@ -531,7 +521,7 @@ body.wizard {
color: var(--primary-high); color: var(--primary-high);
font-size: var(--font-up-1); font-size: var(--font-up-1);
margin: 0.25em 0 0.5em 3.5em; margin: 0.25em 0 0.5em 3.5em;
@media only screen and (max-device-width: 568px) { @media only screen and (max-width: 568px) {
margin-left: 2em; margin-left: 2em;
} }
} }
@ -579,7 +569,7 @@ body.wizard {
position: relative; position: relative;
vertical-align: middle; vertical-align: middle;
transition: background 0.25s; transition: background 0.25s;
@media only screen and (max-device-width: 568px) { @media only screen and (max-width: 568px) {
height: 20px; height: 20px;
width: 35px; width: 35px;
} }
@ -596,7 +586,7 @@ body.wizard {
color: var(--secondary); color: var(--secondary);
top: 4px; top: 4px;
left: 9px; left: 9px;
@media only screen and (max-device-width: 568px) { @media only screen and (max-width: 568px) {
top: 3px; top: 3px;
left: 5px; left: 5px;
font-size: var(--font-down-3); font-size: var(--font-down-3);
@ -611,7 +601,7 @@ body.wizard {
top: 4px; top: 4px;
left: 4px; left: 4px;
transition: left 0.25s; transition: left 0.25s;
@media only screen and (max-device-width: 568px) { @media only screen and (max-width: 568px) {
height: 12px; height: 12px;
width: 12px; width: 12px;
} }
@ -627,7 +617,7 @@ body.wizard {
} }
&__checkbox:checked + .wizard-container__checkbox-slider:before { &__checkbox:checked + .wizard-container__checkbox-slider:before {
left: 26px; left: 26px;
@media only screen and (max-device-width: 568px) { @media only screen and (max-width: 568px) {
left: 20px; left: 20px;
} }
} }