diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss index 63c51aaa503..33ea260c81d 100644 --- a/app/assets/stylesheets/common/base/modal.scss +++ b/app/assets/stylesheets/common/base/modal.scss @@ -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); + } } } diff --git a/app/assets/stylesheets/mobile/login-modal.scss b/app/assets/stylesheets/mobile/login-modal.scss index e4c503cf363..e07ed522776 100644 --- a/app/assets/stylesheets/mobile/login-modal.scss +++ b/app/assets/stylesheets/mobile/login-modal.scss @@ -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; + } }