updated css/js libraries

[e-DoKo.git] / css / bootstrap / modals.less

diff --git a/css/bootstrap/modals.less b/css/bootstrap/modals.less
index 81cacb7ab12f25882bc7f0f70f82451369eacc45..21cdee0f4edd8abd70ba42db8fd92bad337c37e6 100644 (file)
--- a/css/bootstrap/modals.less
+++ b/css/bootstrap/modals.less
@@ -2,89 +2,107 @@
 // Modals
 // --------------------------------------------------
 
 // 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

 
 

-// Recalculate z-index where appropriate,
-// but only apply to elements within modal
-.modal-open .modal {
-  .dropdown-menu {  z-index: @zindexDropdown + @zindexModal; }
-  .dropdown.open { *z-index: @zindexDropdown + @zindexModal; }
-  .popover       {  z-index: @zindexPopover  + @zindexModal; }
-  .tooltip       {  z-index: @zindexTooltip  + @zindexModal; }
+// Kill the scroll on the body
+.modal-open {
+  overflow: hidden;

 }
 
 }
 

-// Background
-.modal-backdrop {
+// Container that the modal scrolls within
+.modal {
+  display: none;
+  overflow: auto;
+  overflow-y: scroll;

   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;

-  z-index: @zindexModalBackdrop;
-  background-color: @black;
-  // Fade for backdrop
-  &.fade { opacity: 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)}

 }
 
 }
 

-.modal-backdrop,
-.modal-backdrop.fade.in {
-  .opacity(80);
+// Shell div to position the modal with bottom padding
+.modal-dialog {
+  position: relative;
+  width: auto;
+  margin: 10px;

 }
 
 }
 

-// Base modal
-.modal {
+// 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;
   position: fixed;

-  top: 50%;
-  left: 50%;
-  z-index: @zindexModal;
-  overflow: auto;
-  width: 560px;
-  margin: -250px 0 0 -280px;
-  background-color: @white;
-  border: 1px solid #999;
-  border: 1px solid rgba(0,0,0,.3);
-  *border: 1px solid #999; /* IE6-7 */
-  .border-radius(6px);
-  .box-shadow(0 3px 7px rgba(0,0,0,0.3));
-  .background-clip(padding-box);
-  &.fade {
-    .transition(e('opacity .3s linear, top .3s ease-out'));
-    top: -25%;
-  }
-  &.fade.in { top: 50%; }
+  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 {
 .modal-header {

-  padding: 9px 15px;
-  border-bottom: 1px solid #eee;
-  // Close icon
-  .close { margin-top: 2px; }
-  // Heading
-  h3 {
-    margin: 0;
-    line-height: 30px;
-  }
+  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;

 }
 
 }
 

-// Body (where all modal content resides)
-.modal-body {
-  overflow-y: auto;
-  max-height: 400px;
-  padding: 15px;
+// Title text within header
+.modal-title {
+  margin: 0;
+  line-height: @modal-title-line-height;

 }
 }

-// Remove bottom margin if need be
-.modal-form {
-  margin-bottom: 0;
+
+// 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 {
 }
 
 // Footer (for actions)
 .modal-footer {

-  padding: 14px 15px 15px;
-  margin-bottom: 0;
+  margin-top: 15px;
+  padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding;

   text-align: right; // right align buttons
   text-align: right; // right align buttons

-  background-color: #f5f5f5;
-  border-top: 1px solid #ddd;
-  .border-radius(0 0 6px 6px);
-  .box-shadow(inset 0 1px 0 @white);
-  .clearfix(); // clear it in case folks use .pull-* classes on 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 {
 
   // Properly space out buttons
   .btn + .btn {


@@ -95,4 +113,27 @@
   .btn-group .btn + .btn {
     margin-left: -1px;
   }
   .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; }

 }
 }