discourse/app/assets/stylesheets/desktop/modal.scss

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

128 lines
2.0 KiB
SCSS
Raw Normal View History

// 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;
}
2013-02-06 03:16:51 +08:00
}
.modal.in {
animation: fade 0.25s;
@media (prefers-reduced-motion) {
animation-duration: 0s;
}
2013-02-06 03:16:51 +08:00
}
.modal-footer .btn.right {
float: right;
}
2013-02-06 03:16:51 +08:00
.modal-header {
h3 {
font-size: var(--font-up-3);
2013-02-26 00:42:20 +08:00
}
2014-06-19 02:04:10 +08:00
}
2019-01-11 10:50:00 +08:00
.close {
font-size: var(--font-up-3);
2014-06-19 02:04:10 +08:00
text-decoration: none;
2019-01-11 10:50:00 +08:00
&:visited {
color: var(--primary-high);
2019-01-11 10:50:00 +08:00
}
2014-06-19 02:04:10 +08:00
cursor: pointer;
&:hover {
color: var(--primary);
2013-02-06 03:16:51 +08:00
}
}
.modal {
2017-10-20 03:51:08 +08:00
.category-chooser {
width: 50%;
}
.modal-body.insert-link {
input {
min-width: 450px;
}
}
2013-02-06 03:16:51 +08:00
}
.choose-topic-modal {
.modal-body {
position: relative;
min-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;
}
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;
}
}
.create-invite-modal,
.create-invite-bulk-modal,
.share-topic-modal {
.title {
align-items: center;
display: flex;
.subtitle {
margin-left: 0.5em;
}
}
&.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 enormous
}
}