Modals

ghost/admin/assets/sass/components/modals.scss

@@ -0,0 +1,140 @@
+//
+// Modals
+// --------------------------------------------------
+
+#modal-container { // TODO: This should probably not be an ID
+    display: none;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow-x: auto;
+    overflow-y: scroll;
+    z-index: 1040;
+    @include transition(all 0.15s linear 0s);
+    @include transform(translateZ(0));
+}
+
+.fade {
+    opacity: 0;
+    @include transition(opacity 0.2s linear 0s);
+    @include transform(translateZ(0));
+
+    &.in {
+        opacity: 1;
+    }
+}
+
+.modal-background {
+    display: none;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: rgba(0,0,0,0.6);
+    z-index: 1030;
+}
+
+.modal {
+    left: 50%;
+    right: auto;
+    width: 450px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: 30px;
+    padding-bottom: 30px;
+    z-index: 1050;
+    pointer-events: auto;
+
+    @media (max-width: 800px) {
+        width: auto;
+        padding: 10px;
+    };
+
+    button {
+        min-width: 100px;
+    }
+
+    @media (max-width: 800px) {
+        width: 100%;
+        margin-left: 0;
+    }
+
+    // Uploaders
+    .image-uploader,
+    .pre-image-uploader {
+        margin: 0;
+    }
+}
+
+.modal-action {
+    @extend .modal;
+    padding: 60px 0 30px;
+
+    @media (max-width: 800px) {
+        padding: 30px 0;
+    }
+}
+
+.modal-content {
+    position: relative;
+    padding: 18px;
+    background-clip: padding-box;
+    background-color: #FFFFFF;
+    border-radius: $rounded;
+    box-shadow: rgba(0,0,0,0.2) 0 0 0 6px;
+
+    .close {
+        position: absolute;
+        top: 19px;
+        right: 19px;
+        width: 16px;
+        padding: 0;
+        margin: 0;
+        border: none;
+        z-index: 9999;
+
+        @include icon($i-close, 1.4rem, $midgrey) {
+            @include transition(color 0.3s linear);
+        };
+        &:hover:before {
+            color: $grey;
+        }
+    }
+}
+.modal-header {
+    position: relative;
+
+    h1 {
+        display: inline-block;
+        margin: 0;
+        font-size: 1.85em;
+        font-weight: 100;
+    }
+}
+
+.modal-body {
+    position: relative;
+    overflow-y: auto;
+}
+
+.modal-footer {
+    margin-top: 20px;
+    .reject-button-class {
+        @extend .button;
+    }
+}
+
+.modal-style-wide {
+    width: 550px;
+
+    @media (max-width: 800px) {
+        width: 100%;
+    }
+}
+
+.modal-style-centered {
+    text-align: center;
+}

ghost/admin/assets/sass/screen.scss

@@ -31,6 +31,7 @@
 // --------------------------------------------------
 
 @import "components/navigation";
+@import "components/modals";
 @import "components/dropdowns";