IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

FIX: responsive buttons and wider content container (#19542)

Browse Source
This commit is contained in:
Ella E 2022-12-20 19:13:00 -07:00 committed by GitHub
parent dc13e8ecfd
commit 5443860130
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 40 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -85,8 +85,23 @@ body.wizard {
min-width: 35%; min-width: 35%;
width: 100%; width: 100%;
@include breakpoint("mobile-extra-large") {
max-width: 95%;
}
.wizard-container__button:not(.wizard-container__button-upload) {
@include breakpoint("mobile-extra-large") {
width: 100%;
margin: 0 0 0.5em;
}
}
&.styling { &.styling {
max-width: 85%; max-width: 85%;
@include breakpoint("mobile-extra-large") {
max-width: 100%;
}
} }
} }
@ -144,7 +159,7 @@ body.wizard {
&__step.branding .wizard-container__preview canvas { &__step.branding .wizard-container__preview canvas {
@include breakpoint("mobile-extra-large") { @include breakpoint("mobile-extra-large") {
max-width: 100%; max-width: 100%;
height: auto; height: auto !important;
} }
} }
@ -196,6 +211,10 @@ body.wizard {
width: calc(100% - 170px); width: calc(100% - 170px);
border-radius: 0.5em; border-radius: 0.5em;
margin-top: -1em; margin-top: -1em;
@media only screen and (max-device-width: 568px) {
display: none;
}
} }
} }
@ -332,7 +351,8 @@ body.wizard {
margin-right: -1.5em; margin-right: -1.5em;
@include breakpoint("mobile-extra-large") { @include breakpoint("mobile-extra-large") {
margin-bottom: 1em; margin-right: 0;
flex-direction: column;
} }
.wizard-container__link { .wizard-container__link {
color: var(--primary-400); color: var(--primary-400);
@ -426,6 +446,9 @@ body.wizard {
//background-color: var(--primary-200); //background-color: var(--primary-200);
background-color: transparent; background-color: transparent;
color: var(--tertiary); color: var(--tertiary);
@include breakpoint("mobile-extra-large") {
order: 2;
}
} }
&__button.configure-more:hover { &__button.configure-more:hover {
@ -437,6 +460,10 @@ body.wizard {
background-color: var(--tertiary); background-color: var(--tertiary);
color: var(--secondary); color: var(--secondary);
margin-left: 1em; margin-left: 1em;
@include breakpoint("mobile-extra-large") {
order: 1;
margin-left: 0;
}
&:hover { &:hover {
background-color: var(--primary-300); background-color: var(--primary-300);
} }
@ -444,6 +471,9 @@ body.wizard {
&__button.finish { &__button.finish {
color: var(--tertiary); color: var(--tertiary);
@include breakpoint("mobile-extra-large") {
order: 2;
}
} }
&__button.finish:hover { &__button.finish:hover {
@ -458,6 +488,10 @@ body.wizard {
&__button.next { &__button.next {
min-width: 70px; min-width: 70px;
margin-left: 1em; margin-left: 1em;
@include breakpoint("mobile-extra-large") {
order: 1;
margin-left: 0;
}
} }
&__button.danger { &__button.danger {
@ -513,6 +547,7 @@ body.wizard {
@media only screen and (max-device-width: 568px) { @media only screen and (max-device-width: 568px) {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: stretch;
} }
} }
@ -521,6 +556,9 @@ body.wizard {
flex-wrap: wrap; flex-wrap: wrap;
gap: 1em; gap: 1em;
align-items: center; align-items: center;
@include breakpoint("mobile-extra-large") {
order: 2;
}
} }
&__label { &__label {