github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-03-29 12:36:11 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Modal mobile fixes (#25788)

Browse Source 
* UX: remove discourse-touch class wrapper

* UX: keep modal close btn in right position
This commit is contained in:
chapoi 2024-02-21 14:49:42 +02:00 committed by GitHub
parent a30b54be87
commit a9f8009801
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 98 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/assets/stylesheets/common/base/modal.scss
View File

@ -38,9 +38,12 @@
padding: 0.5rem 0.5rem 0.5rem 1.5rem; //offset for close button padding
border-bottom: 1px solid var(--primary-low);
.modal-close .d-icon {
font-size: var(--font-up-2);
color: var(--primary-high);
.modal-close {
margin-left: auto;
.d-icon {
font-size: var(--font-up-2);
color: var(--primary-high);
}
}
}

186
app/assets/stylesheets/mobile/login-modal.scss
View File

@ -1,101 +1,99 @@
.discourse-touch {
.d-modal.login-modal,
.d-modal.create-account {
.d-modal {
&__container {
width: 100%;
}
&__body {
flex-direction: column;
gap: unset;
padding-inline: 0.5rem;
}
&__footer {
border-top: 1px solid var(--primary-low);
padding: 1rem;
font-size: var(--font-down-1);
}
.d-modal.login-modal,
.d-modal.create-account {
.d-modal {
&__container {
width: 100%;
}
.close {
font-size: var(--font-up-3);
&__body {
flex-direction: column;
gap: unset;
padding-inline: 0.5rem;
}
.login-welcome-header {
padding: 1rem;
}
.login-right-side {
padding: 1rem 0 0;
background: unset;
}
.login-or-separator {
&__footer {
border-top: 1px solid var(--primary-low);
position: relative;
margin-block: 1rem;
span {
transform: translate(-50%, -50%);
position: absolute;
left: 50%;
top: 50%;
background: var(--secondary);
padding-inline: 0.5rem;
color: var(--primary-medium);
font-size: var(--font-down-1-rem);
text-transform: uppercase;
}
}
#login-buttons {
flex-direction: row;
flex-wrap: wrap;
padding: 0 1rem;
gap: 0.25em;
margin-bottom: 1rem;
.btn {
margin: 0;
padding-block: 0.65rem;
border: 1px solid var(--primary-low);
flex: 1 1 calc(50% - 0.25em);
font-size: var(--font-down-1);
white-space: nowrap;
&:last-child {
margin-right: auto;
}
}
}
#login-form,
.login-form {
margin: 0;
padding: 1rem;
.input-group {
input {
height: 2.5em;
margin-bottom: 0.25em;
}
margin-bottom: 1em;
.user-field:not(.dropdown) label.alt-placeholder {
top: 8px;
}
input:focus + label,
input.value-entered + label.alt-placeholder {
top: -10px;
}
input.alt-placeholder:invalid {
color: var(--primary);
}
label.more-info {
color: var(--primary-medium);
}
}
}
.caps-lock-warning {
display: none;
font-size: var(--font-down-1);
}
}
.close {
font-size: var(--font-up-3);
}
.login-welcome-header {
padding: 1rem;
}
.login-right-side {
padding: 1rem 0 0;
background: unset;
}
.login-or-separator {
border-top: 1px solid var(--primary-low);
position: relative;
margin-block: 1rem;
span {
transform: translate(-50%, -50%);
position: absolute;
left: 50%;
top: 50%;
background: var(--secondary);
padding-inline: 0.5rem;
color: var(--primary-medium);
font-size: var(--font-down-1-rem);
text-transform: uppercase;
}
}
#login-buttons {
flex-direction: row;
flex-wrap: wrap;
padding: 0 1rem;
gap: 0.25em;
margin-bottom: 1rem;
.btn {
margin: 0;
padding-block: 0.65rem;
border: 1px solid var(--primary-low);
flex: 1 1 calc(50% - 0.25em);
font-size: var(--font-down-1);
white-space: nowrap;
&:last-child {
margin-right: auto;
}
}
}
#login-form,
.login-form {
margin: 0;
padding: 1rem;
.input-group {
input {
height: 2.5em;
margin-bottom: 0.25em;
}
margin-bottom: 1em;
.user-field:not(.dropdown) label.alt-placeholder {
top: 8px;
}
input:focus + label,
input.value-entered + label.alt-placeholder {
top: -10px;
}
input.alt-placeholder:invalid {
color: var(--primary);
}
label.more-info {
color: var(--primary-medium);
}
}
}
.caps-lock-warning {
display: none;
}
}