0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
ghost/core/client/assets/sass/components/modals.scss
Jason Williams 1541b92ccf Fixup behavior and styling of editor re-auth.
Closes 
- Adds styling for re-auth modal.
- Prevent transition to posts route on success.
- Clear credentials from controller.
- Handle confirmAccept action if form is submitted via 'enter'.
- Only allow re-auth as the user that was previously logged in.
2014-12-15 14:42:00 +00:00

203 lines
3.3 KiB
SCSS

// ------------------------------------------------------------
// Modals
//
// Styles for the modal component
//
// * Outer Container
// * Inner Container
// * Content
// * Modifiers
// ------------------------------------------------------------
//
// Outer Container
// --------------------------------------------------
.modal-container {
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1040;
overflow-x: auto;
overflow-y: scroll;
transition: all 0.15s linear 0s;
transform: translateZ(0);
}
.fade {
opacity: 0;
transition: opacity 0.2s linear 0s;
transform: translateZ(0);
&.in {
opacity: 1;
}
}
.modal-background {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1030;
background: rgba(0,0,0,0.6);
}
//
// Inner Container
// --------------------------------------------------
.modal {
left: 50%;
right: auto;
z-index: 1050;
width: 450px;
margin-left: auto;
margin-right: auto;
padding-top: 30px;
padding-bottom: 30px;
pointer-events: auto;
@media (max-width: 900px) {
width: 100%;
padding: 10px;
margin-left: 0;
};
button {
min-width: 100px;
}
.image-uploader,
.pre-image-uploader {
margin: 0;
}
}//.modal
.modal-action {
@extend .modal;
padding: 60px 0 30px;
@media (max-width: 900px) {
padding: 30px 0;
}
}
//
// Content
// --------------------------------------------------
.modal-content {
position: relative;
padding: 18px;
background-clip: padding-box;
background-color: #FFFFFF;
border-radius: $border-radius;
box-shadow: rgba(0,0,0,0.2) 0 0 0 6px;
.close {
position: absolute;
top: 19px;
right: 19px;
z-index: 9999;
width: 16px;
padding: 0;
margin: 0;
border: none;
@include icon($i-close, 1.4rem, $midgrey) {
transition: color 0.3s linear;
};
&:hover:before {
color: $grey;
}
}
}//.modal-content
.modal-header {
position: relative;
margin-bottom: 18px;
h1 {
display: inline-block;
margin: 0;
font-size: 1.85em;
font-weight: 100;
}
}
.modal-body {
position: relative;
overflow-y: auto;
.red {
color: $red;
}
}
.modal-footer {
margin-top: 20px;
.reject-button-class {
@extend .btn;
}
}
//
// Modifiers
// --------------------------------------------------
.modal-style-wide {
width: 550px;
@media (max-width: 900px) {
width: 100%;
}
}
.modal-style-centered {
text-align: center;
}
// Modal login styles
.modal-body .login-form {
display: block; // Override inherited `display: table-cell;`
.password-wrap {
input {
width: 100%;
}
}
@media (max-width: 900px) {
margin: 0 auto;
max-width: 264px;
.password-wrap {
width: 100%;
margin: 0 auto 1em;
}
.btn {
margin: 0;
width: 100%;
margin-bottom: 1em;
}
}
@media (min-width: 901px) {
display: flex;
.password-wrap {
flex: 1;
}
}
}