Move popup and popover

modules/system/assets/ui/less/popover.less

@@ -1,3 +1,20 @@
+//
+// Dependencies
+// --------------------------------------------------
+
+@import "global.less";
+@import "dropdown.less";
+@import "icon.close.less";
+
+//
+// Popover
+// --------------------------------------------------
+
+@color-popover-bg:                           #ffffff;
+@color-popover-border:                       @dropdown-border;
+@color-popover-head-bg:                      #d35400;
+@color-popover-head-text:                    #ffffff;
+
 div.control-popover {
     position: absolute;
     background-clip: content-box;

modules/system/assets/ui/less/popup.base.less

@@ -0,0 +1,139 @@
+//
+// Modals
+// --------------------------------------------------
+
+// .modal-open      - body class for killing the scroll
+// .modal           - container to scroll within
+// .modal-dialog    - positioning shell for the actual modal
+// .modal-content   - actual modal w/ bg and corners and shit
+
+// Kill the scroll on the body
+.modal-open {
+    overflow: hidden;
+}
+
+// Container that the modal scrolls within
+.modal {
+    display: none;
+    overflow: auto;
+    overflow-y: scroll;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: @zindex-modal;
+    -webkit-overflow-scrolling: touch;
+
+    // Prevent Chrome on Windows from adding a focus outline. For details, see
+    // https://github.com/twbs/bootstrap/pull/10951.
+    outline: 0;
+
+    // When fading in the modal, animate it to slide down
+    &.fade .modal-dialog {
+        .translate(0, -25%);
+        .transition-transform(~"0.3s ease-out");
+    }
+    &.in .modal-dialog { .translate(0, 0)}
+}
+
+// Shell div to position the modal with bottom padding
+.modal-dialog {
+    position: relative;
+    width: auto;
+    margin: 10px;
+}
+
+// Actual modal
+.modal-content {
+    position: relative;
+    background-color: @modal-content-bg;
+    border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
+    border: 1px solid @modal-content-border-color;
+    border-radius: @border-radius-large;
+    .box-shadow(0 3px 9px rgba(0,0,0,.5));
+    background-clip: padding-box;
+    // Remove focus outline from opened modal
+    outline: none;
+}
+
+// Modal background
+.modal-backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: @zindex-modal-background;
+    background-color: @modal-backdrop-bg;
+    // Fade for backdrop
+    &.fade { .opacity(0); }
+    &.in { .opacity(@modal-backdrop-opacity); }
+}
+
+// Modal header
+// Top section of the modal w/ title and dismiss
+.modal-header {
+    padding: @modal-title-padding;
+    border-bottom: 1px solid @modal-header-border-color;
+    min-height: (@modal-title-padding + @modal-title-line-height);
+}
+// Close icon
+.modal-header .close {
+    margin-top: -2px;
+}
+
+// Title text within header
+.modal-title {
+    margin: 0;
+    line-height: @modal-title-line-height;
+}
+
+// Modal body
+// Where all modal content resides (sibling of .modal-header and .modal-footer)
+.modal-body {
+    position: relative;
+    padding: @modal-inner-padding;
+}
+
+// Footer (for actions)
+.modal-footer {
+    margin-top: 15px;
+    padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding;
+    text-align: right; // right align buttons
+    border-top: 1px solid @modal-footer-border-color;
+    &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons
+
+    // Properly space out buttons
+    .btn + .btn {
+        margin-left: 5px;
+        margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
+    }
+    // but override that for button groups
+    .btn-group .btn + .btn {
+        margin-left: -1px;
+    }
+    // and override it for block buttons as well
+    .btn-block + .btn-block {
+        margin-left: 0;
+    }
+}
+
+// Scale up the modal
+@media (min-width: @screen-sm-min) {
+    // Automatically set modal's width for larger viewports
+    .modal-dialog {
+        width: @modal-md;
+        margin: 30px auto;
+    }
+    .modal-content {
+        .box-shadow(0 5px 15px rgba(0,0,0,.5));
+    }
+
+    // Modal sizes
+    .modal-sm { width: @modal-sm; }
+}
+
+@media (min-width: @screen-md-min) {
+    .modal-lg { width: @modal-lg; }
+}

modules/system/assets/ui/less/popup.less

@@ -1,3 +1,36 @@
+//
+// Dependencies
+// --------------------------------------------------
+
+@import "global.less";
+@import "loader.less";
+@import "icon.close.less";
+
+//
+// Popup
+// --------------------------------------------------
+
+@import "popup.base.less";
+
+@color-popup-header-bg:                      #d35400;
+@color-popup-header-text:                    #ECF0F1;
+@color-popup-footer-bg:                      transparent;
+@color-popup-content-bg:                     @color-body-bg;
+
+@modal-inner-padding:         20px;
+@modal-title-padding:         15px;
+@modal-title-line-height:     @line-height-base;
+@modal-content-bg:                             #fff;
+@modal-content-border-color:                   rgba(0,0,0,.2);
+@modal-content-fallback-border-color:          #999;
+@modal-backdrop-bg:           #000;
+@modal-backdrop-opacity:      .5;
+@modal-header-border-color:   #e5e5e5;
+@modal-footer-border-color:   @modal-header-border-color;
+@modal-lg:                    900px;
+@modal-md:                    600px;
+@modal-sm:                    300px;
+
 //
 // Popup
 // --------------------------------------------------
@@ -126,7 +159,7 @@
             background-size: 50px 50px;
             background-repeat: no-repeat;
             background-position: 50% 50%;
-            background-image: url(../images/loading-indicator-transparent.svg);
+            background-image: url('@{loader-image-path}/loader-transparent.svg');
             .animation(spin 1s linear infinite);
             width: 50px;
             height: 50px;