discourse/app/assets/stylesheets/desktop/modal.scss
Dan Ungureanu cfee2728ce
FEATURE: New share topic modal (#12804)
The old share modal used to host both share and invite functionality,
under two tabs. The new "Share Topic" modal can be used only for
sharing, but has a link to the invite modal.

Among the sharing methods, there is also "Notify" which points out
that existing users will simply be notified (this was not clear
before). Staff members can notify as many users as they want, but
regular users are restricted to one at a time, no more than
max_topic_invitations_per_day. The user will not receive another
notification if they have been notified of the same topic in past hour.

The "Create Invite" modal also suffered some changes: the two radio
boxes for selecting the type (invite or email) have been replaced by a
single checkbox (is email?) and then the two labels about emails have
been replaced by a single one, some fields were reordered and the
advanced options toggle was moved to the bottom right of the modal.
2021-04-23 19:18:23 +03:00

118 lines
1.8 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-inner-container {
width: 600px;
}
}