discourse/app/assets/stylesheets/desktop/modal.scss
Dan Ungureanu 6ae065f9cd
Improved create invite modal (#14151)
* FEATURE: Always show advanced invite options

The UI is more simple and more efficient than how it was when the
advanced options toggle was introduced. It does not make sense to keep
it anymore.

* UX: Minor copy edits

* UX: Merge expire invite controls

There were two controls in the create invite modal. One was a static
text that displayed how much time is left until the invite expires. The
other one was a datetime selector that set the time the invite expires.

This commit merges the two controls in a single one: staff users will
continue to see the datetime selector without the static text and
regular users will only see the static text because they cannot set
when the invite expires.

* UX: Remove invite link

It should only be visible after the invite was created.
2021-11-18 20:19:02 +02:00

124 lines
1.9 KiB
SCSS

// Hardcode to be the same as before for now. I would recommend not using bootbox, or finding a way so the html structure can be the same
.bootbox.modal {
top: 50%;
left: 50%;
width: 610px;
margin: -250px 0 0 -305px;
.cancel {
margin-left: 1em;
}
}
.modal.in {
-webkit-animation: fade 0.25s;
animation: fade 0.25s;
}
.modal-footer .btn.right {
float: right;
}
.modal-header {
h3 {
font-size: $font-up-3;
}
}
.close {
font-size: $font-up-3;
text-decoration: none;
&:visited {
color: var(--primary-high);
}
cursor: pointer;
&:hover {
color: var(--primary);
}
}
.modal {
.category-chooser {
width: 50%;
}
.modal-body.insert-link {
input {
min-width: 450px;
}
}
}
.choose-topic-modal {
.modal-body {
position: relative;
height: 350px;
}
#choosing-topic {
// prevents content from moving when user selects different move options 525px
// is the same width we set on category edit modal
width: 525px;
p {
margin-top: 0;
}
.radios {
margin-bottom: 10px;
display: flex;
flex-direction: row;
.radio-label {
display: inline-block;
padding-right: 15px;
}
}
button {
margin-top: 10px;
display: block;
width: 300px;
}
form {
width: 95%;
margin-top: 20px;
.participant-selector {
width: 100%;
}
div.ac-wrap {
width: 100%;
margin-bottom: 9px;
}
}
}
}
.change-post-notice-modal {
.modal-body {
min-width: 450px;
}
}
.json-schema-editor-modal {
#json-editor-holder {
min-width: 500px;
}
}
.create-invite-modal,
.create-invite-bulk-modal,
.share-topic-modal {
&.modal .modal-body {
margin: 1em;
padding: unset;
}
.modal-inner-container {
width: 40em; // scale with user font-size
max-width: 100vw; // prevent overflow if user font-size is enourmous
}
}