discourse/app/assets/stylesheets/application/modal.css.scss

174 lines
3.1 KiB
SCSS

// base styles for every modal popup used in Discourse
@import "foundation/variables";
@import "foundation/mixins";
.modal-open {
.dropdown-menu {
z-index: 2050;
}
.dropdown.open {
*z-index: 2050;
}
.popover {
z-index: 2060;
}
.tooltip {
z-index: 2070;
}
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000000;
&.fade {
opacity: 0;
}
}
.modal-backdrop,
.modal-backdrop.fade.in {
opacity: 0.8;
filter: alpha(opacity=80);
}
.modal {
position: fixed;
top: 50%;
left: 50%;
z-index: 1050;
overflow: auto;
width: 610px;
margin: -250px 0 0 -305px;
background-color: #ffffff;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3);
*border: 1px solid #999;
/* IE6-7 */
@include border-radius-all (6px);
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
.modal.fade {
-webkit-transition: opacity .3s linear, top .3s ease-out;
-moz-transition: opacity .3s linear, top .3s ease-out;
-ms-transition: opacity .3s linear, top .3s ease-out;
-o-transition: opacity .3s linear, top .3s ease-out;
transition: opacity .3s linear, top .3s ease-out;
top: -25%;
}
.modal.fade.in {
top: 50%;
}
.modal-body {
overflow-y: auto;
max-height: 400px;
padding: 15px;
}
.modal-form {
margin-bottom: 0;
}
.modal-footer {
margin: 0 15px;
padding: 14px 0 15px;
border-top: 1px solid #ddd;
@include border-radius-all(0 0 6px 6px);
@include box-shadow (inset 0 1px 0 #ffffff);
*zoom: 1;
}
.modal-footer:before,
.modal-footer:after {
display: table;
content: "";
}
.modal-footer:after {
clear: both;
}
.modal-footer .btn + .btn {
margin-left: 5px;
margin-bottom: 0;
}
.modal-footer .btn-group .btn + .btn {
margin-left: -1px;
}
.modal-header {
border-bottom: 1px solid #9baab2;
@include box-shadow((0 1px 3px rgba($black, 0.12), inset 0 -4px 4px -4px rgba($black, 0.3)));
h3 {
color: $nav-pills-background-color-active;
font-size: 20px;
padding: 10px 15px 7px;
}
.close {
float: right;
font-size: 20px;
margin: 10px 10px 0px;
text-decoration: none;
color: $modal-close-button-color;
cursor: pointer;
&:hover {
color: darken($modal-close-button-color,20);
}
}
}
.modal {
.nav {
padding: 10px 30px;
background-color: #e6e6e6;
li > a {
font-size: 14px;
}
border-bottom: 1px solid #bbb;
}
&.hidden {
display: none;
}
.modal-body {
textarea {
width: 99%;
height: 80px;
}
label {
color: $darkish_gray;
}
p {
color: $black;
font-size: 13px;
}
.archetype-option {
margin-bottom: 20px;
}
}
.password-confirmation {
display: none;
}
section.field {
margin-bottom: 20px;
}
}
#move-selected {
form {
margin-top: 20px;
input[type=text] {
width: 500px;
}
}
}