Add centered dimmers and modals

fomantic · Feb 19, 2018 · 3766a33 · 3766a33
1 parent 0f464a6
commit 3766a33
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 85 deletions.
diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
@@ -2,6 +2,11 @@
 
 ### Version 2.3.0 - Feb 19, 2018
 
+**Major Enhancements**
+- **Modal** - Modal has been rewritten to use `flexbox`. No need to call `refresh()` to recalculate vertical centering.
+- **Modal** - Modal has a new setting `centered` which can be past `false` to make a modal top aligned
+- **Dimmer** - Dimmers now have centered content with a single wrapping `content` element.
+
 **Enhancements**
 - **Popup** - Popup will now align the center of the arrow (not the edge of the popup) when it would be reasonable (up to 2x arrow's offset from edge). [See this explanation](http://oi66.tinypic.com/2zr2ckk.jpg)
 - **Popup** - Popup can now position elements correctly even when they have a different offset context than their activating element. Like in [this example](https://jsfiddle.net/g853mc03/)

diff --git a/src/definitions/modules/dimmer.js b/src/definitions/modules/dimmer.js
@@ -238,6 +238,7 @@ $.fn.dimmer = function(parameters) {
               }
               $dimmer
                 .transition({
+                  displayType : 'flex',
                   animation   : settings.transition + ' in',
                   queue       : false,
                   duration    : module.get.duration(),
@@ -282,6 +283,7 @@ $.fn.dimmer = function(parameters) {
               module.verbose('Hiding dimmer with css');
               $dimmer
                 .transition({
+                  displayType : 'flex',
                   animation   : settings.transition + ' out',
                   queue       : false,
                   duration    : module.get.duration(),

diff --git a/src/definitions/modules/dimmer.less b/src/definitions/modules/dimmer.less
@@ -45,21 +45,18 @@
   animation-duration: @duration;
   transition: @transition;
 
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
   user-select: none;
   will-change: opacity;
   z-index: @zIndex;
 }
 
 /* Dimmer Content */
 .ui.dimmer > .content {
-  width: 100%;
-  height: 100%;
-  display: @contentDisplay;
   user-select: text;
-}
-.ui.dimmer > .content > * {
-  display: @contentChildDisplay;
-  vertical-align: @verticalAlign;
   color: @textColor;
 }
 
@@ -90,23 +87,27 @@
             States
 *******************************/
 
+/* Animating */
 .animating.dimmable:not(body),
 .dimmed.dimmable:not(body) {
   overflow: @overflow;
 }
 
+/* Animating / Active / Visible */
 .dimmed.dimmable > .ui.animating.dimmer,
 .dimmed.dimmable > .ui.visible.dimmer,
 .ui.active.dimmer {
-  display: block;
+  display: flex;
   opacity: @visibleOpacity;
 }
 
+/* Disabled */
 .ui.disabled.dimmer {
   width: 0 !important;
   height: 0 !important;
 }
 
+
 /*******************************
            Variations
 *******************************/

diff --git a/src/definitions/modules/modal.js b/src/definitions/modules/modal.js
@@ -165,7 +165,6 @@ $.fn.modal = function(parameters) {
           module.cacheSizes();
           module.set.screenHeight();
           module.set.type();
-          module.set.position();
         },
 
         refreshModals: function() {
@@ -320,7 +319,6 @@ $.fn.modal = function(parameters) {
 
             module.showDimmer();
             module.cacheSizes();
-            module.set.position();
             module.set.screenHeight();
             module.set.type();
             module.set.clickaway();
@@ -684,25 +682,6 @@ $.fn.modal = function(parameters) {
               module.set.scrolling();
             }
           },
-          position: function() {
-            module.verbose('Centering modal on page', module.cache);
-            if(module.can.fit()) {
-              $module
-                .css({
-                  top: '',
-                  marginTop: module.cache.topOffset
-                })
-              ;
-            }
-            else {
-              $module
-                .css({
-                  marginTop : '',
-                  top       : $document.scrollTop()
-                })
-              ;
-            }
-          },
           undetached: function() {
             $dimmable.addClass(className.undetached);
           }

diff --git a/src/definitions/modules/modal.less b/src/definitions/modules/modal.less
@@ -24,11 +24,7 @@
 
 .ui.modal {
   display: none;
-  position: fixed;
   z-index: @zIndex;
-
-  top: 50%;
-  left: 50%;
   text-align: left;
 
   background: @background;
@@ -337,14 +333,13 @@
            Variations
 *******************************/
 
-/*--------------
-    Scrolling
----------------*/
-
 /* A modal that cannot fit on the page */
 .scrolling.dimmable.dimmed {
   overflow: hidden;
 }
+.scrolling.dimmable > .dimmer {
+  justify-content: flex-start;
+}
 .scrolling.dimmable.dimmed > .dimmer {
   overflow: auto;
   -webkit-overflow-scrolling: touch;
@@ -353,9 +348,6 @@
   position: fixed;
 }
 .modals.dimmer .ui.scrolling.modal {
-  position: relative !important;
-  left: auto !important;
-  top: auto !important;
   margin: @scrollingMargin auto !important;
 }
 
@@ -373,26 +365,13 @@
   margin-top: @scrollingMargin !important;
 }
 
-/* Coupling with Sidebar */
-.undetached.dimmable.dimmed > .pusher {
-  z-index: auto;
-}
-
-@media only screen and (max-width : @largestTabletScreen) {
-  .modals.dimmer .ui.scrolling.modal {
-    margin-top: @mobileScrollingMargin !important;
-    margin-bottom: @mobileScrollingMargin !important;
-  }
-}
 
 /* Scrolling Content */
-
 .ui.modal .scrolling.content {
   max-height: @scrollingContentMaxHeight;
   overflow: auto;
 }
 
-
 /*--------------
    Full Screen
 ---------------*/

diff --git a/src/themes/default/modules/dimmer.variables b/src/themes/default/modules/dimmer.variables
@@ -29,10 +29,6 @@
 /* Hidden (Default) */
 @hiddenOpacity: 0;
 
-/* Content */
-@contentDisplay: table;
-@contentChildDisplay: table-cell;
-
 /* Visible */
 @visibleOpacity: 1;
 
@@ -58,4 +54,4 @@
 @simpleStartBackgroundColor: rgba(0, 0, 0, 0);
 @simpleEndBackgroundColor: @backgroundColor;
 @simpleInvertedStartBackgroundColor: rgba(255, 255, 255, 0);
-@simpleInvertedEndBackgroundColor: @invertedBackgroundColor;
+@simpleInvertedEndBackgroundColor: @invertedBackgroundColor;
diff --git a/src/themes/default/modules/modal.variables b/src/themes/default/modules/modal.variables
@@ -84,14 +84,14 @@
 @largeMonitorWidth: 900px;
 @widescreenMonitorWidth: 950px;
 
-@mobileMargin: 0em 0em 0em -(@mobileWidth / 2);
-@tabletMargin: 0em 0em 0em -(@tabletWidth / 2);
-@computerMargin: 0em 0em 0em -(@computerWidth / 2);
-@largeMonitorMargin: 0em 0em 0em -(@largeMonitorWidth / 2);
-@widescreenMonitorMargin: 0em 0em 0em -(@widescreenMonitorWidth / 2);
+@mobileMargin: 0em 0em 0em 0em;
+@tabletMargin: 0em 0em 0em 0em;
+@computerMargin: 0em 0em 0em 0em;
+@largeMonitorMargin: 0em 0em 0em 0em;
+@widescreenMonitorMargin: 0em 0em 0em 0em;
 
 @fullScreenWidth: 95%;
-@fullScreenOffset: (100% - @fullScreenWidth) / 2;
+@fullScreenOffset: 0em;
 @fullScreenMargin: 1em auto;
 
 /* Coupling */
@@ -118,7 +118,7 @@
 @basicInvertedModalHeaderColor: @darkTextColor;
 
 /* Scrolling Margin */
-@scrollingMargin: 3.5rem;
+@scrollingMargin: 5vh;
 @mobileScrollingMargin: 1rem;
 
 /* Scrolling Content */
@@ -142,11 +142,11 @@
 @miniLargeMonitorWidth: (@largeMonitorWidth * @miniRatio);
 @miniWidescreenMonitorWidth: (@widescreenMonitorWidth * @miniRatio);
 
-@miniMobileMargin: 0em 0em 0em -(@miniMobileWidth / 2);
-@miniTabletMargin: 0em 0em 0em -(@miniTabletWidth / 2);
-@miniComputerMargin: 0em 0em 0em -(@miniComputerWidth / 2);
-@miniLargeMonitorMargin: 0em 0em 0em -(@miniLargeMonitorWidth / 2);
-@miniWidescreenMonitorMargin: 0em 0em 0em -(@miniWidescreenMonitorWidth / 2);
+@miniMobileMargin: 0em 0em 0em 0em;
+@miniTabletMargin: 0em 0em 0em 0em;
+@miniComputerMargin: 0em 0em 0em 0em;
+@miniLargeMonitorMargin: 0em 0em 0em 0em;
+@miniWidescreenMonitorMargin: 0em 0em 0em 0em;
 
 @tinyHeaderSize: 1.3em;
 @tinyMobileWidth: @mobileWidth;
@@ -155,11 +155,11 @@
 @tinyLargeMonitorWidth: (@largeMonitorWidth * @tinyRatio);
 @tinyWidescreenMonitorWidth: (@widescreenMonitorWidth * @tinyRatio);
 
-@tinyMobileMargin: 0em 0em 0em -(@tinyMobileWidth / 2);
-@tinyTabletMargin: 0em 0em 0em -(@tinyTabletWidth / 2);
-@tinyComputerMargin: 0em 0em 0em -(@tinyComputerWidth / 2);
-@tinyLargeMonitorMargin: 0em 0em 0em -(@tinyLargeMonitorWidth / 2);
-@tinyWidescreenMonitorMargin: 0em 0em 0em -(@tinyWidescreenMonitorWidth / 2);
+@tinyMobileMargin: 0em 0em 0em 0em;
+@tinyTabletMargin: 0em 0em 0em 0em;
+@tinyComputerMargin: 0em 0em 0em 0em;
+@tinyLargeMonitorMargin: 0em 0em 0em 0em;
+@tinyWidescreenMonitorMargin: 0em 0em 0em 0em;
 
 @smallHeaderSize: 1.3em;
 @smallMobileWidth: @mobileWidth;
@@ -168,11 +168,11 @@
 @smallLargeMonitorWidth: (@largeMonitorWidth * @smallRatio);
 @smallWidescreenMonitorWidth: (@widescreenMonitorWidth * @smallRatio);
 
-@smallMobileMargin: 0em 0em 0em -(@smallMobileWidth / 2);
-@smallTabletMargin: 0em 0em 0em -(@smallTabletWidth / 2);
-@smallComputerMargin: 0em 0em 0em -(@smallComputerWidth / 2);
-@smallLargeMonitorMargin: 0em 0em 0em -(@smallLargeMonitorWidth / 2);
-@smallWidescreenMonitorMargin: 0em 0em 0em -(@smallWidescreenMonitorWidth / 2);
+@smallMobileMargin: 0em 0em 0em 0em;
+@smallTabletMargin: 0em 0em 0em 0em;
+@smallComputerMargin: 0em 0em 0em 0em;
+@smallLargeMonitorMargin: 0em 0em 0em 0em;
+@smallWidescreenMonitorMargin: 0em 0em 0em 0em;
 
 @largeHeaderSize: 1.6em;
 @largeMobileWidth: @mobileWidth;
@@ -181,8 +181,8 @@
 @largeLargeMonitorWidth: (@largeMonitorWidth * @largeRatio);
 @largeWidescreenMonitorWidth: (@widescreenMonitorWidth * @largeRatio);
 
-@largeMobileMargin: 0em 0em 0em -(@largeMobileWidth / 2);
-@largeTabletMargin: 0em 0em 0em -(@largeTabletWidth / 2);
-@largeComputerMargin: 0em 0em 0em -(@largeComputerWidth / 2);
-@largeLargeMonitorMargin: 0em 0em 0em -(@largeLargeMonitorWidth / 2);
-@largeWidescreenMonitorMargin: 0em 0em 0em -(@largeWidescreenMonitorWidth / 2);
+@largeMobileMargin: 0em 0em 0em 0em;
+@largeTabletMargin: 0em 0em 0em 0em;
+@largeComputerMargin: 0em 0em 0em 0em;
+@largeLargeMonitorMargin: 0em 0em 0em 0em;
+@largeWidescreenMonitorMargin: 0em 0em 0em 0em;