fomantic-ui 2.9.0-beta.99 → 2.9.0

package/dist/components/modal.js

@@ -1,5 +1,5 @@
 /*!
- * # Fomantic-UI 2.9.0-beta.99 - Modal
+ * # Fomantic-UI 2.9.0 - Modal
  * http://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -23,7 +23,7 @@ window = (typeof window != 'undefined' && window.Math == Math)
     : Function('return this')()
 ;
 
-$.fn.modal = function(parameters) {
+$.modal = $.fn.modal = function(parameters) {
   var
     $allModules    = $(this),
     $window        = $(window),
@@ -65,7 +65,8 @@ $.fn.modal = function(parameters) {
         moduleNamespace = 'module-' + namespace,
 
         $module         = $(this),
-        $context        = $(settings.context),
+        $context        = [window,document].indexOf(settings.context) < 0 ? $document.find(settings.context) : $body,
+        isBody          = $context[0] === $body[0],
         $closeIcon      = $module.find(selector.closeIcon),
         $inputs,
 
@@ -75,8 +76,10 @@ $.fn.modal = function(parameters) {
         $dimmable,
         $dimmer,
 
+        isModalComponent = $module.hasClass('modal'),
+
         element         = this,
-        instance        = $module.hasClass('modal') ? $module.data(moduleNamespace) : undefined,
+        instance        = isModalComponent ? $module.data(moduleNamespace) : undefined,
 
         ignoreRepeatedEvents = false,
 
@@ -84,6 +87,8 @@ $.fn.modal = function(parameters) {
         initialMouseDownInScrollbar,
         initialBodyMargin = '',
         tempBodyMargin = '',
+        keepScrollingClass = false,
+        hadScrollbar = false,
 
         elementEventNamespace,
         id,
@@ -94,7 +99,7 @@ $.fn.modal = function(parameters) {
 
         initialize: function() {
           module.create.id();
-          if(!$module.hasClass('modal')) {
+          if(!isModalComponent) {
             module.create.modal();
             if(!$.isFunction(settings.onHidden)) {
               settings.onHidden = function () {
@@ -124,7 +129,7 @@ $.fn.modal = function(parameters) {
                   click = el[fields.click] && $.isFunction(el[fields.click]) ? el[fields.click] : function () {};
               $actions.append($('<button/>', {
                 html: icon + text,
-                'aria-label': $('<div>'+(el[fields.text] || el[fields.icon] || '')+'</div>').text(),
+                'aria-label': (el[fields.text] || el[fields.icon] || '').replace(/<[^>]+(>|$)/g,''),
                 class: className.button + ' ' + cls,
                 click: function () {
                   var button = $(this);
@@ -148,7 +153,6 @@ $.fn.modal = function(parameters) {
             $module.addClass('top aligned');
           }
           module.refreshModals();
-          module.refreshInputs();
           module.bind.events();
           module.observeChanges();
           module.instantiate();
@@ -186,6 +190,7 @@ $.fn.modal = function(parameters) {
               $('<div/>', {class: className.actions}).appendTo($module);
             }
             $context.append($module);
+            element = $module[0];
           },
           dimmer: function() {
             var
@@ -201,6 +206,7 @@ $.fn.modal = function(parameters) {
             }
             module.debug('Creating dimmer');
             $dimmable = $context.dimmer(dimmerSettings);
+            keepScrollingClass = module.is.scrolling();
             if(settings.detachable) {
               module.verbose('Modal is detachable, moving content into dimmer');
               $dimmable.dimmer('add content', $module);
@@ -211,13 +217,13 @@ $.fn.modal = function(parameters) {
             $dimmer = $dimmable.dimmer('get dimmer');
           },
           id: function() {
-            id = (Math.random().toString(16) + '000000000').substr(2, 8);
+            id = (Math.random().toString(16) + '000000000').slice(2, 10);
             elementEventNamespace = '.' + id;
             module.verbose('Creating unique id for element', id);
           },
           innerDimmer: function() {
-            if ( $module.find(selector.dimmer).length == 0 ) {
-              $module.prepend('<div class="ui inverted dimmer"></div>');
+            if ( $module.find(selector.dimmer).length === 0 ) {
+              $('<div/>', {class: className.innerDimmer}).prependTo($module);
             }
           }
         },
@@ -326,13 +332,13 @@ $.fn.modal = function(parameters) {
           },
           scrollLock: function() {
             // touch events default to passive, due to changes in chrome to optimize mobile perf
-            $dimmable.get(0).addEventListener('touchmove', module.event.preventScroll, { passive: false });
+            $dimmable[0].addEventListener('touchmove', module.event.preventScroll, { passive: false });
           }
         },
 
         unbind: {
           scrollLock: function() {
-            $dimmable.get(0).removeEventListener('touchmove', module.event.preventScroll, { passive: false });
+            $dimmable[0].removeEventListener('touchmove', module.event.preventScroll, { passive: false });
           }
         },
 
@@ -414,7 +420,7 @@ $.fn.modal = function(parameters) {
             if(initialMouseDownInModal) {
               module.verbose('Mouse down event registered inside the modal');
             }
-            initialMouseDownInScrollbar = module.is.scrolling() && ((!isRtl && $(window).outerWidth() - settings.scrollbarWidth <= event.clientX) || (isRtl && settings.scrollbarWidth >= event.clientX));
+            initialMouseDownInScrollbar = module.is.scrolling() && ((!isRtl && $window.outerWidth() - settings.scrollbarWidth <= event.clientX) || (isRtl && settings.scrollbarWidth >= event.clientX));
             if(initialMouseDownInScrollbar) {
               module.verbose('Mouse down event registered inside the scrollbar');
             }
@@ -514,9 +520,16 @@ $.fn.modal = function(parameters) {
             : function(){}
           ;
           if( module.is.animating() || !module.is.active() ) {
+            if(settings.onShow.call(element) === false) {
+              module.verbose('Show callback returned false cancelling show');
+              return;
+            }
+            hadScrollbar = module.has.scrollbar();
             module.showDimmer();
             module.cacheSizes();
-            module.set.bodyMargin();
+            if(hadScrollbar) {
+              module.set.bodyMargin();
+            }
             if(module.can.useFlex()) {
               module.remove.legacy();
             }
@@ -543,12 +556,13 @@ $.fn.modal = function(parameters) {
                   $module.detach().appendTo($dimmer);
                 }
               }
-              settings.onShow.call(element);
               if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
                 module.debug('Showing modal with css animations');
                 $module
                   .transition({
                     debug       : settings.debug,
+                    verbose     : settings.verbose,
+                    silent      : settings.silent,
                     animation   : (settings.transition.showMethod || settings.transition) + ' in',
                     queue       : settings.queue,
                     duration    : settings.transition.showDuration || settings.duration,
@@ -560,6 +574,7 @@ $.fn.modal = function(parameters) {
                       }
                       module.save.focus();
                       module.set.active();
+                      module.refreshInputs()
                       if(settings.autofocus) {
                         module.set.autofocus();
                       }
@@ -586,7 +601,6 @@ $.fn.modal = function(parameters) {
             ? callback
             : function(){}
           ;
-          module.debug('Hiding modal');
           if(settings.onHide.call(element, $(this)) === false) {
             module.verbose('Hide callback returned false cancelling hide');
             ignoreRepeatedEvents = false;
@@ -594,11 +608,14 @@ $.fn.modal = function(parameters) {
           }
 
           if( module.is.animating() || module.is.active() ) {
+            module.debug('Hiding modal');
             if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
               module.remove.active();
               $module
                 .transition({
                   debug       : settings.debug,
+                  verbose     : settings.verbose,
+                  silent      : settings.silent,
                   animation   : (settings.transition.hideMethod || settings.transition) + ' out',
                   queue       : settings.queue,
                   duration    : settings.transition.hideDuration || settings.duration,
@@ -642,7 +659,12 @@ $.fn.modal = function(parameters) {
 
         showDimmer: function() {
           if($dimmable.dimmer('is animating') || !$dimmable.dimmer('is active') ) {
-            module.save.bodyMargin();
+            if(hadScrollbar) {
+              if(!isBody) {
+                $dimmer.css('top', $dimmable.scrollTop());
+              }
+              module.save.bodyMargin();
+            }
             module.debug('Showing dimmer');
             $dimmable.dimmer('show');
           }
@@ -655,14 +677,15 @@ $.fn.modal = function(parameters) {
           if( $dimmable.dimmer('is animating') || ($dimmable.dimmer('is active')) ) {
             module.unbind.scrollLock();
             $dimmable.dimmer('hide', function() {
-              module.restore.bodyMargin();
+              if(hadScrollbar) {
+                module.restore.bodyMargin();
+              }
               module.remove.clickaway();
               module.remove.screenHeight();
             });
           }
           else {
             module.debug('Dimmer is not visible cannot hide');
-            return;
           }
         },
 
@@ -720,7 +743,7 @@ $.fn.modal = function(parameters) {
           keyboardShortcuts: function() {
             module.verbose('Adding keyboard shortcuts');
             $document
-              .on('keyup' + eventNamespace, module.event.keyboard)
+              .on('keydown' + eventNamespace, module.event.keyboard)
             ;
           }
         },
@@ -736,9 +759,9 @@ $.fn.modal = function(parameters) {
             }
           },
           bodyMargin: function() {
-            initialBodyMargin = $body.css('margin-'+(module.can.leftBodyScrollbar() ? 'left':'right'));
+            initialBodyMargin = $context.css((isBody ? 'margin-':'padding-')+(module.can.leftBodyScrollbar() ? 'left':'right'));
             var bodyMarginRightPixel = parseInt(initialBodyMargin.replace(/[^\d.]/g, '')),
-                bodyScrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+                bodyScrollbarWidth = isBody ? window.innerWidth - document.documentElement.clientWidth : $context[0].offsetWidth - $context[0].clientWidth;
             tempBodyMargin = bodyMarginRightPixel + bodyScrollbarWidth;
           }
         },
@@ -751,8 +774,8 @@ $.fn.modal = function(parameters) {
           },
           bodyMargin: function() {
             var position = module.can.leftBodyScrollbar() ? 'left':'right';
-            $body.css('margin-'+position, initialBodyMargin);
-            $body.find(selector.bodyFixed.replace('right',position)).each(function(){
+            $context.css((isBody ? 'margin-':'padding-')+position, initialBodyMargin);
+            $context.find(selector.bodyFixed.replace('right',position)).each(function(){
               var el = $(this),
                   attribute = el.css('position') === 'fixed' ? 'padding-'+position : position
               ;
@@ -786,25 +809,28 @@ $.fn.modal = function(parameters) {
             $dimmable.removeClass(className.blurring);
           },
           bodyStyle: function() {
-            if($body.attr('style') === '') {
+            if($context.attr('style') === '') {
               module.verbose('Removing style attribute');
-              $body.removeAttr('style');
+              $context.removeAttr('style');
             }
           },
           screenHeight: function() {
             module.debug('Removing page height');
-            $body
+            $context
               .css('height', '')
             ;
+            module.remove.bodyStyle()
           },
           keyboardShortcuts: function() {
             module.verbose('Removing keyboard shortcuts');
             $document
-              .off('keyup' + eventNamespace)
+              .off('keydown' + eventNamespace)
             ;
           },
           scrolling: function() {
-            $dimmable.removeClass(className.scrolling);
+            if(!keepScrollingClass) {
+              $dimmable.removeClass(className.scrolling);
+            }
             $module.removeClass(className.scrolling);
           }
         },
@@ -818,12 +844,12 @@ $.fn.modal = function(parameters) {
           ;
           if(module.cache.pageHeight === undefined || modalHeight !== 0) {
             $.extend(module.cache, {
-              pageHeight    : $(document).outerHeight(),
+              pageHeight    : $document.outerHeight(),
               width         : modalWidth,
               height        : modalHeight + settings.offset,
               scrollHeight  : scrollHeight + settings.offset,
-              contextHeight : (settings.context == 'body')
-                ? $(window).height()
+              contextHeight : isBody
+                ? $window.height()
                 : $dimmable.height(),
             });
             module.cache.topOffset = -(module.cache.height / 2);
@@ -854,7 +880,7 @@ $.fn.modal = function(parameters) {
                 }
             ;
             if(shouldEscape.test(string)) {
-              string = string.replace(/&(?![a-z0-9#]{1,6};)/, "&amp;");
+              string = string.replace(/&(?![a-z0-9#]{1,12};)/gi, "&amp;");
               return string.replace(badChars, escapedChar);
             }
             return string;
@@ -897,6 +923,9 @@ $.fn.modal = function(parameters) {
         has: {
           configActions: function () {
             return Array.isArray(settings.actions) && settings.actions.length > 0;
+          },
+          scrollbar: function() {
+            return isBody || $context.css('overflow-y') !== 'hidden';
           }
         },
         is: {
@@ -928,7 +957,7 @@ $.fn.modal = function(parameters) {
           },
           rtl: function() {
             if(module.cache.isRTL === undefined) {
-              module.cache.isRTL = $body.attr('dir') === 'rtl' || $body.css('direction') === 'rtl';
+              module.cache.isRTL = $module.attr('dir') === 'rtl' || $module.css('direction') === 'rtl' || $body.attr('dir') === 'rtl' || $body.css('direction') === 'rtl' || $context.attr('dir') === 'rtl' || $context.css('direction') === 'rtl';
             }
             return module.cache.isRTL;
           },
@@ -970,9 +999,9 @@ $.fn.modal = function(parameters) {
           bodyMargin: function() {
             var position = module.can.leftBodyScrollbar() ? 'left':'right';
             if(settings.detachable || module.can.fit()) {
-              $body.css('margin-'+position, tempBodyMargin + 'px');
+              $context.css((isBody ? 'margin-':'padding-')+position, tempBodyMargin + 'px');
             }
-            $body.find(selector.bodyFixed.replace('right',position)).each(function(){
+            $context.find(selector.bodyFixed.replace('right',position)).each(function(){
               var el = $(this),
                   attribute = el.css('position') === 'fixed' ? 'padding-'+position : position
               ;
@@ -1038,10 +1067,10 @@ $.fn.modal = function(parameters) {
               $module
                 .css({
                   top: (!$module.hasClass('aligned') && canFit)
-                    ? $(document).scrollTop() + (module.cache.contextHeight - module.cache.height) / 2
+                    ? $document.scrollTop() + (module.cache.contextHeight - module.cache.height) / 2
                     : !canFit || $module.hasClass('top')
-                      ? $(document).scrollTop() + settings.padding
-                      : $(document).scrollTop() + (module.cache.contextHeight - module.cache.height - settings.padding),
+                      ? $document.scrollTop() + settings.padding
+                      : $document.scrollTop() + (module.cache.contextHeight - module.cache.height - settings.padding),
                   marginLeft: -(module.cache.width / 2)
                 })
               ;
@@ -1059,11 +1088,11 @@ $.fn.modal = function(parameters) {
           },
           screenHeight: function() {
             if( module.can.fit() ) {
-              $body.css('height', '');
+              $context.css('height', '');
             }
             else if(!$module.hasClass('bottom')) {
               module.debug('Modal is taller than page content, resizing page height');
-              $body
+              $context
                 .css('height', module.cache.height + (settings.padding * 2) )
               ;
             }
@@ -1215,7 +1244,7 @@ $.fn.modal = function(parameters) {
             response
           ;
           passedArguments = passedArguments || queryArguments;
-          context         = element         || context;
+          context         = context         || element;
           if(typeof query == 'string' && object !== undefined) {
             query    = query.split(/[\. ]/);
             maxDepth = query.length - 1;
@@ -1422,7 +1451,8 @@ $.fn.modal.settings = {
     template   : 'ui tiny modal',
     ok         : 'positive',
     cancel     : 'negative',
-    prompt     : 'ui fluid input'
+    prompt     : 'ui fluid input',
+    innerDimmer: 'ui inverted dimmer'
   },
   text: {
     ok    : 'Ok',
@@ -1453,33 +1483,39 @@ $.fn.modal.settings.templates = {
   },
   alert: function () {
     var settings = this.get.settings(),
-        args     = settings.templates.getArguments(arguments)
+        args     = settings.templates.getArguments(arguments),
+        approveFn = args.handler
     ;
     return {
       title  : args.title,
       content: args.content,
+      onApprove: approveFn,
       actions: [{
         text : settings.text.ok,
         class: settings.className.ok,
-        click: args.handler
+        click: approveFn
       }]
     }
   },
   confirm: function () {
     var settings = this.get.settings(),
-        args     = settings.templates.getArguments(arguments)
+        args     = settings.templates.getArguments(arguments),
+        approveFn = function(){args.handler(true)},
+        denyFn = function(){args.handler(false)}
     ;
     return {
       title  : args.title,
       content: args.content,
+      onApprove: approveFn,
+      onDeny: denyFn,
       actions: [{
         text : settings.text.ok,
         class: settings.className.ok,
-        click: function(){args.handler(true)}
+        click: approveFn
       },{
         text: settings.text.cancel,
         class: settings.className.cancel,
-        click: function(){args.handler(false)}
+        click: denyFn
       }]
     }
   },
@@ -1487,27 +1523,31 @@ $.fn.modal.settings.templates = {
     var $this    = this,
         settings = this.get.settings(),
         args     = settings.templates.getArguments(arguments),
-        input    = $($.parseHTML(args.content)).filter('.ui.input')
+        input    = $($.parseHTML(args.content)).filter('.ui.input'),
+        approveFn = function(){
+          var settings = $this.get.settings(),
+              inputField = $this.get.element().find(settings.selector.prompt)[0]
+          ;
+          args.handler($(inputField).val());
+        },
+        denyFn = function(){args.handler(null)}
     ;
     if (input.length === 0) {
-      args.content += '<p><div class="'+settings.className.prompt+'"><input placeholder="'+this.helpers.deQuote(args.placeholder || '')+'" type="text" value="'+this.helpers.deQuote(args.defaultValue || '')+'"></div></p>';
+      args.content += '<p><div class="'+this.helpers.deQuote(settings.className.prompt)+'"><input placeholder="'+this.helpers.deQuote(args.placeholder || '')+'" type="text" value="'+this.helpers.deQuote(args.defaultValue || '')+'"></div></p>';
     }
     return {
       title  : args.title,
       content: args.content,
+      onApprove: approveFn,
+      onDeny: denyFn,
       actions: [{
         text: settings.text.ok,
         class: settings.className.ok,
-        click: function(){
-          var settings = $this.get.settings(),
-              inputField = $this.get.element().find(settings.selector.prompt)[0]
-          ;
-          args.handler($(inputField).val());
-        }
+        click:  approveFn
       },{
         text: settings.text.cancel,
         class: settings.className.cancel,
-        click: function(){args.handler(null)}
+        click: denyFn
       }]
     }
   }

package/dist/components/modal.min.css

@@ -1,9 +1,9 @@
 /*!
- * # Fomantic-UI 2.9.0-beta.99 - Modal
+ * # Fomantic-UI 2.9.0 - Modal
  * http://github.com/fomantic/Fomantic-UI/
  *
  *
  * Released under the MIT license
  * http://opensource.org/licenses/MIT
  *
- */.ui.modal{position:absolute;display:none;z-index:1001;text-align:left;background:#fff;border:none;-webkit-box-shadow:1px 3px 3px 0 rgba(0,0,0,.2),1px 3px 15px 2px rgba(0,0,0,.2);box-shadow:1px 3px 3px 0 rgba(0,0,0,.2),1px 3px 15px 2px rgba(0,0,0,.2);-webkit-transform-origin:50% 25%;transform-origin:50% 25%;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;border-radius:.28571429rem;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;will-change:top,left,margin,transform,opacity}.ui.modal>.dimmer:first-child+:not(.close),.ui.modal>.dimmer:first-child+i.icon+*,.ui.modal>:first-child:not(.close):not(.dimmer),.ui.modal>i.icon:first-child+*{border-top-left-radius:.28571429rem;border-top-right-radius:.28571429rem}.ui.modal>:last-child{border-bottom-left-radius:.28571429rem;border-bottom-right-radius:.28571429rem}.ui.modal>.ui.dimmer{border-radius:inherit}.ui.modal>.close{cursor:pointer;position:absolute;top:-2.5rem;right:-2.5rem;z-index:1;opacity:.8;font-size:1.25em;color:#fff;width:2.25rem;height:2.25rem;padding:.625rem 0 0 0}.ui.modal>.close:focus,.ui.modal>.close:hover{opacity:1;outline:0}.ui.modal>.header{display:block;font-family:Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;background:#fff;margin:0;padding:1.25rem 1.5rem;-webkit-box-shadow:none;box-shadow:none;color:rgba(0,0,0,.85);border-bottom:1px solid rgba(34,36,38,.15)}.ui.modal>.header:not(.ui){font-size:1.42857143rem;line-height:1.28571429em;font-weight:700}.ui.modal>.content{display:block;width:100%;font-size:1em;line-height:1.4;padding:1.5rem;background:#fff}.ui.modal>.image.content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.ui.modal>.content>.image{display:block;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;width:'';-ms-flex-item-align:start;align-self:start;max-width:100%}.ui.modal>[class*="top aligned"]{-ms-flex-item-align:start;align-self:start}.ui.modal>[class*="middle aligned"]{-ms-flex-item-align:center;align-self:center}.ui.modal>[class*=stretched]{-ms-flex-item-align:stretch;align-self:stretch}.ui.modal>.content>.description{display:block;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;min-width:0;-ms-flex-item-align:start;align-self:start}.ui.modal>.content>.image+.description,.ui.modal>.content>i.icon+.description{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;min-width:'';width:auto;padding-left:2em}.ui.modal>.content>.image>i.icon{margin:0;opacity:1;width:auto;line-height:1;font-size:8rem}.ui.modal>.actions{background:#f9fafb;padding:1rem 1rem;border-top:1px solid rgba(34,36,38,.15);text-align:right}.ui.modal .actions>.button:not(.fluid){margin-left:.75em}.ui.basic.modal>.actions{border-top:none}.ui.modal>.center.aligned,.ui.modal>.centered{text-align:center}.ui.modal>.center.aligned.actions>.button:not(.fluid),.ui.modal>.centered.actions>.button:not(.fluid){margin-left:.5em;margin-right:.5em}@media only screen and (max-width:767.98px){.ui.modal:not(.fullscreen){width:95%;margin:0}}@media only screen and (min-width:768px){.ui.modal:not(.fullscreen){width:88%;margin:0}}@media only screen and (min-width:992px){.ui.modal:not(.fullscreen){width:850px;margin:0}}@media only screen and (min-width:1200px){.ui.modal:not(.fullscreen){width:900px;margin:0}}@media only screen and (min-width:1920px){.ui.modal:not(.fullscreen){width:950px;margin:0}}@media only screen and (max-width:991.98px){.ui.modal>.close+.header{padding-right:2.25rem}.ui.modal>.close{top:1.0535rem;right:1rem;color:rgba(0,0,0,.87)}}@media only screen and (max-width:767.98px){.ui.modal>.header{padding:.75rem 1rem}.ui.modal>.close+.header{padding-right:2.25rem}.ui.overlay.fullscreen.modal>.content.content.content{min-height:calc(100vh - 8.1rem)}.ui.overlay.fullscreen.modal>.scrolling.content.content.content{max-height:calc(100vh - 8.1rem)}.ui.modal>.content{display:block;padding:1rem!important}.ui.modal>.close{top:.5rem!important;right:.5rem!important}.ui.modal .image.content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.ui.modal>.content>.image{display:block;max-width:100%;margin:0 auto!important;text-align:center;padding:0 0 1rem!important}.ui.modal>.content>.image>i.icon{font-size:5rem;text-align:center}.ui.modal>.content>.description{display:block;width:100%!important;margin:0!important;padding:1rem 0!important;-webkit-box-shadow:none;box-shadow:none}.ui.modal>.actions{padding:1rem 1rem 0!important}.ui.modal .actions>.button,.ui.modal .actions>.buttons{margin-bottom:1rem}}.ui.inverted.dimmer>.ui.modal{-webkit-box-shadow:1px 3px 10px 2px rgba(0,0,0,.2);box-shadow:1px 3px 10px 2px rgba(0,0,0,.2)}.ui.basic.modal{background-color:transparent;border:none;border-radius:0;-webkit-box-shadow:none!important;box-shadow:none!important;color:#fff}.ui.basic.modal>.actions,.ui.basic.modal>.content,.ui.basic.modal>.header{background-color:transparent}.ui.basic.modal>.header{color:#fff;border-bottom:none}.ui.basic.modal>.close{top:1rem;right:1.5rem;color:#fff}.ui.inverted.dimmer>.basic.modal{color:rgba(0,0,0,.87)}.ui.inverted.dimmer>.ui.basic.modal>.header{color:rgba(0,0,0,.85)}.ui.legacy.legacy.modal,.ui.legacy.legacy.page.dimmer>.ui.modal{left:50%!important}.ui.legacy.legacy.modal:not(.aligned),.ui.legacy.legacy.page.dimmer>.ui.modal:not(.aligned){top:50%}.ui.legacy.legacy.page.dimmer>.ui.scrolling.modal:not(.aligned),.ui.page.dimmer>.ui.scrolling.legacy.legacy.modal:not(.aligned),.ui.top.aligned.dimmer>.ui.legacy.legacy.modal:not(.aligned),.ui.top.aligned.legacy.legacy.page.dimmer>.ui.modal:not(.aligned){top:auto}.ui.legacy.overlay.fullscreen.modal{margin-top:-2rem!important}.ui.loading.modal{display:block;visibility:hidden;z-index:-1}.ui.active.modal{display:block}.modals.dimmer .ui.top.aligned.modal{top:5vh}.modals.dimmer .ui.bottom.aligned.modal{bottom:5vh}@media only screen and (max-width:767.98px){.modals.dimmer .ui.top.aligned.modal{top:1rem}.modals.dimmer .ui.bottom.aligned.modal{bottom:1rem}}.scrolling.dimmable.dimmed{overflow:hidden}.scrolling.dimmable>.dimmer{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;position:fixed}.scrolling.dimmable.dimmed>.dimmer{overflow:auto;-webkit-overflow-scrolling:touch}.modals.dimmer .ui.scrolling.modal:not(.fullscreen){margin:2rem auto}.modals.dimmer .ui.scrolling.modal:not([class*="overlay fullscreen"])::after{content:'\00A0';position:absolute;height:2rem}.scrolling.undetached.dimmable.dimmed{overflow:auto;-webkit-overflow-scrolling:touch}.scrolling.undetached.dimmable.dimmed>.dimmer{overflow:hidden}.scrolling.undetached.dimmable .ui.scrolling.modal:not(.fullscreen){position:absolute;left:50%}.ui.modal>.scrolling.content{max-height:calc(80vh - 10rem);overflow:auto}.ui.overlay.fullscreen.modal>.content{min-height:calc(100vh - 9.1rem)}.ui.overlay.fullscreen.modal>.scrolling.content{max-height:calc(100vh - 9.1rem)}.ui.fullscreen.modal{width:95%;left:2.5%;margin:1em auto}.ui.overlay.fullscreen.modal{width:100%;left:0;margin:0 auto;top:0;border-radius:0}.ui.fullscreen.modal>.close+.header:not(.centered):not(.center):not(.icon),.ui.modal>.close.inside+.header:not(.centered):not(.center):not(.icon){padding-right:2.25rem}.ui.fullscreen.modal>.close,.ui.modal>.close.inside{top:1.0535rem;right:1rem;color:rgba(0,0,0,.87)}.ui.basic.fullscreen.modal>.close{color:#fff}.ui.modal{font-size:1rem}.ui.mini.modal>.header:not(.ui){font-size:1.3em}@media only screen and (max-width:767.98px){.ui.mini.modal{width:95%;margin:0}}@media only screen and (min-width:768px){.ui.mini.modal{width:35.2%;margin:0}}@media only screen and (min-width:992px){.ui.mini.modal{width:340px;margin:0}}@media only screen and (min-width:1200px){.ui.mini.modal{width:360px;margin:0}}@media only screen and (min-width:1920px){.ui.mini.modal{width:380px;margin:0}}.ui.tiny.modal>.header:not(.ui){font-size:1.3em}@media only screen and (max-width:767.98px){.ui.tiny.modal{width:95%;margin:0}}@media only screen and (min-width:768px){.ui.tiny.modal{width:52.8%;margin:0}}@media only screen and (min-width:992px){.ui.tiny.modal{width:510px;margin:0}}@media only screen and (min-width:1200px){.ui.tiny.modal{width:540px;margin:0}}@media only screen and (min-width:1920px){.ui.tiny.modal{width:570px;margin:0}}.ui.small.modal>.header:not(.ui){font-size:1.3em}@media only screen and (max-width:767.98px){.ui.small.modal{width:95%;margin:0}}@media only screen and (min-width:768px){.ui.small.modal{width:70.4%;margin:0}}@media only screen and (min-width:992px){.ui.small.modal{width:680px;margin:0}}@media only screen and (min-width:1200px){.ui.small.modal{width:720px;margin:0}}@media only screen and (min-width:1920px){.ui.small.modal{width:760px;margin:0}}.ui.large.modal>.header:not(.ui){font-size:1.6em}@media only screen and (max-width:767.98px){.ui.large.modal{width:95%;margin:0}}@media only screen and (min-width:768px){.ui.large.modal{width:88%;margin:0}}@media only screen and (min-width:992px){.ui.large.modal{width:1020px;margin:0}}@media only screen and (min-width:1200px){.ui.large.modal{width:1080px;margin:0}}@media only screen and (min-width:1920px){.ui.large.modal{width:1140px;margin:0}}.ui.big.modal>.header:not(.ui){font-size:1.6em}@media only screen and (max-width:767.98px){.ui.big.modal{width:95%;margin:0}}@media only screen and (min-width:768px){.ui.big.modal{width:88%;margin:0}}@media only screen and (min-width:992px){.ui.big.modal{width:1190px;margin:0}}@media only screen and (min-width:1200px){.ui.big.modal{width:1260px;margin:0}}@media only screen and (min-width:1920px){.ui.big.modal{width:1330px;margin:0}}.ui.huge.modal>.header:not(.ui){font-size:1.6em}@media only screen and (max-width:767.98px){.ui.huge.modal{width:95%;margin:0}}@media only screen and (min-width:768px){.ui.huge.modal{width:88%;margin:0}}@media only screen and (min-width:992px){.ui.huge.modal{width:1360px;margin:0}}@media only screen and (min-width:1200px){.ui.huge.modal{width:1440px;margin:0}}@media only screen and (min-width:1920px){.ui.huge.modal{width:1520px;margin:0}}.ui.massive.modal>.header:not(.ui){font-size:1.8em}@media only screen and (max-width:767.98px){.ui.massive.modal{width:95%;margin:0}}@media only screen and (min-width:768px){.ui.massive.modal{width:88%;margin:0}}@media only screen and (min-width:992px){.ui.massive.modal{width:1530px;margin:0}}@media only screen and (min-width:1200px){.ui.massive.modal{width:1620px;margin:0}}@media only screen and (min-width:1920px){.ui.massive.modal{width:1710px;margin:0}}.ui.inverted.modal{background:rgba(0,0,0,.9)}.ui.inverted.modal>.content,.ui.inverted.modal>.header{background:rgba(0,0,0,.9);color:#fff}.ui.inverted.modal>.actions{background:#191a1b;border-top:1px solid rgba(34,36,38,.85);color:#fff}.ui.inverted.dimmer>.modal>.close{color:rgba(0,0,0,.85)}@media only screen and (max-width:991.98px){.ui.dimmer .inverted.modal>.close{color:#fff}}.ui.inverted.fullscreen.modal>.close,.ui.inverted.modal>.close.inside{color:#fff}
+ */.ui.modal{position:absolute;display:none;z-index:1001;text-align:left;background:#fff;border:none;-webkit-box-shadow:1px 3px 3px 0 rgba(0,0,0,.2),1px 3px 15px 2px rgba(0,0,0,.2);box-shadow:1px 3px 3px 0 rgba(0,0,0,.2),1px 3px 15px 2px rgba(0,0,0,.2);-webkit-transform-origin:50% 25%;transform-origin:50% 25%;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;border-radius:.28571429rem;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;will-change:top,left,margin,transform,opacity}.ui.modal>.dimmer:first-child+:not(.close),.ui.modal>.dimmer:first-child+i.icon+*,.ui.modal>:first-child:not(.close):not(.dimmer),.ui.modal>i.icon:first-child+*{border-top-left-radius:.28571429rem;border-top-right-radius:.28571429rem}.ui.modal>:last-child{border-bottom-left-radius:.28571429rem;border-bottom-right-radius:.28571429rem}.ui.modal>.ui.dimmer{border-radius:inherit}.ui.modal>.close{cursor:pointer;position:absolute;top:-2.5rem;right:-2.5rem;z-index:1;opacity:.8;font-size:1.25em;color:#fff;width:2.25rem;height:2.25rem;padding:.625rem 0 0 0}.ui.modal>.close:focus,.ui.modal>.close:hover{opacity:1;outline:0}.ui.modal>.header{display:block;font-family:Lato,system-ui,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";background:#fff;margin:0;padding:1.25rem 1.5rem;-webkit-box-shadow:none;box-shadow:none;color:rgba(0,0,0,.85);border-bottom:1px solid rgba(34,36,38,.15)}.ui.modal>.header:not(.ui){font-size:1.42857143rem;line-height:1.28571429em;font-weight:700}.ui.modal>.content{display:block;width:100%;font-size:1em;line-height:1.4;padding:1.5rem;background:#fff}.ui.modal>.image.content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.ui.modal>.content>.image{display:block;-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;width:'';-ms-flex-item-align:start;align-self:start;max-width:100%}.ui.modal>[class*="top aligned"]{-ms-flex-item-align:start;align-self:start}.ui.modal>[class*="middle aligned"]{-ms-flex-item-align:center;align-self:center}.ui.modal>[class*=stretched]{-ms-flex-item-align:stretch;align-self:stretch}.ui.modal>.content>.description{display:block;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;min-width:0;-ms-flex-item-align:start;align-self:start}.ui.modal>.content>.image+.description,.ui.modal>.content>i.icon+.description{-webkit-box-flex:0;-ms-flex:0 1 auto;flex:0 1 auto;min-width:'';width:auto;padding-left:2em}.ui.modal>.content>.image>i.icon{margin:0;opacity:1;width:auto;line-height:1;font-size:8rem}.ui.modal>.actions{background:#f9fafb;padding:1rem 1rem;border-top:1px solid rgba(34,36,38,.15);text-align:right}.ui.modal .actions>.button:not(.fluid){margin-left:.75em}.ui.basic.modal>.actions,.ui.ui.modal>.basic.actions{border-top:none}.ui.modal>.left.actions{text-align:left}.ui.modal>.left.actions>.button:not(.fluid){margin-left:.5em;margin-right:.5em}.ui.modal>.center.aligned,.ui.modal>.centered{text-align:center}.ui.modal>.center.aligned.actions>.button:not(.fluid),.ui.modal>.centered.actions>.button:not(.fluid){margin-left:.5em;margin-right:.5em}@media only screen and (max-width:767.98px){.ui.modal:not(.fullscreen){width:95%;margin:0}}@media only screen and (min-width:768px){.ui.modal:not(.fullscreen){width:88%;margin:0}}@media only screen and (min-width:992px){.ui.modal:not(.fullscreen){width:850px;margin:0}.ui.modal:not(.fullscreen)>.active.dimmer+.close:not(.inside){pointer-events:none;opacity:.1}.ui.dimmer>.ui.modal:not(.fullscreen)>.close:not(.inside){text-shadow:-1px -1px 2px rgba(0,0,0,.3),1px -1px 2px rgba(0,0,0,.3),-1px 2px 2px rgba(0,0,0,.3),1px 2px 2px rgba(0,0,0,.3)}.ui.inverted.dimmer>.ui.modal:not(.fullscreen)>.close:not(.inside){text-shadow:-1px -1px 2px rgba(255,255,255,.3),1px -1px 2px rgba(255,255,255,.3),-1px 2px 2px rgba(255,255,255,.3),1px 2px 2px rgba(255,255,255,.3)}}@media only screen and (min-width:1200px){.ui.modal:not(.fullscreen){width:900px;margin:0}}@media only screen and (min-width:1920px){.ui.modal:not(.fullscreen){width:950px;margin:0}}@media only screen and (max-width:991.98px){.ui.modal>.close+.header{padding-right:2.25rem}.ui.modal>.close{top:1.0535rem;right:1rem;color:rgba(0,0,0,.87)}}@media only screen and (max-width:767.98px){.ui.modal>.header{padding:.75rem 1rem}.ui.modal>.close+.header{padding-right:2.25rem}.ui.overlay.fullscreen.modal>.content.content.content{min-height:calc(100vh - 8.1rem)}.ui.overlay.fullscreen.modal>.scrolling.content.content.content{max-height:calc(100vh - 8.1rem)}.ui.modal>.content{display:block;padding:1rem!important}.ui.modal>.close{top:.5rem!important;right:.5rem!important}.ui.modal .image.content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.ui.modal>.content>.image{display:block;max-width:100%;margin:0 auto!important;text-align:center;padding:0 0 1rem!important}.ui.modal>.content>.image>i.icon{font-size:5rem;text-align:center}.ui.modal>.content>.description{display:block;width:100%!important;margin:0!important;padding:1rem 0!important;-webkit-box-shadow:none;box-shadow:none}.ui.modal>.actions{padding:1rem 1rem 0!important}.ui.modal .actions>.button,.ui.modal .actions>.buttons{margin-bottom:1rem}}.ui.inverted.dimmer>.ui.modal{-webkit-box-shadow:1px 3px 10px 2px rgba(0,0,0,.2);box-shadow:1px 3px 10px 2px rgba(0,0,0,.2)}.ui.basic.modal{background-color:transparent;border:none;border-radius:0;-webkit-box-shadow:none!important;box-shadow:none!important;color:#fff}.ui.basic.modal>.actions,.ui.basic.modal>.content,.ui.basic.modal>.header,.ui.ui.modal>.basic.actions,.ui.ui.modal>.basic.header{background-color:transparent}.ui.modal>.basic.header{border-bottom:none}.ui.basic.modal>.header{color:#fff;border-bottom:none}.ui.basic.modal>.close{top:1rem;right:1.5rem;color:#fff}.ui.inverted.dimmer>.basic.modal{color:rgba(0,0,0,.87)}.ui.inverted.dimmer>.ui.basic.modal>.header{color:rgba(0,0,0,.85)}.ui.legacy.legacy.modal,.ui.legacy.legacy.page.dimmer>.ui.modal{left:50%!important}.ui.legacy.legacy.modal:not(.aligned),.ui.legacy.legacy.page.dimmer>.ui.modal:not(.aligned){top:50%}.ui.legacy.legacy.page.dimmer>.ui.scrolling.modal:not(.aligned),.ui.page.dimmer>.ui.scrolling.legacy.legacy.modal:not(.aligned),.ui.top.aligned.dimmer>.ui.legacy.legacy.modal:not(.aligned),.ui.top.aligned.legacy.legacy.page.dimmer>.ui.modal:not(.aligned){top:auto}.ui.legacy.overlay.fullscreen.modal{margin-top:-2rem!important}.ui.loading.modal{display:block;visibility:hidden;z-index:-1}.ui.active.modal{display:block}.modals.dimmer .ui.top.aligned.modal{top:5vh}.modals.dimmer .ui.bottom.aligned.modal{bottom:5vh}@media only screen and (max-width:767.98px){.modals.dimmer .ui.top.aligned.modal{top:1rem}.modals.dimmer .ui.bottom.aligned.modal{bottom:1rem}}.scrolling.dimmable.dimmed{overflow:hidden}.scrolling.dimmable>.dimmer{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;position:fixed}.scrolling.dimmable:not(body)>.dimmer{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:absolute}.scrolling.dimmable.dimmed>.dimmer{overflow:auto;-webkit-overflow-scrolling:touch}.modals.dimmer .ui.scrolling.modal:not(.fullscreen){margin:2rem auto}.modals.dimmer .ui.scrolling.modal:not([class*="overlay fullscreen"])::after{content:'\00A0';position:absolute;height:2rem}.scrolling.undetached.dimmable.dimmed{overflow:auto;-webkit-overflow-scrolling:touch}.scrolling.undetached.dimmable.dimmed>.dimmer{overflow:hidden}.scrolling.undetached.dimmable .ui.scrolling.modal:not(.fullscreen){position:absolute;left:50%}.ui.modal>.scrolling.content{max-height:calc(80vh - 10rem);overflow:auto}.ui.overlay.fullscreen.modal>.content{min-height:calc(100vh - 9.1rem)}.ui.overlay.fullscreen.modal>.scrolling.content{max-height:calc(100vh - 9.1rem)}.ui.fullscreen.modal{width:95%;left:2.5%;margin:1em auto}.ui.overlay.fullscreen.modal{width:100%;left:0;margin:0 auto;top:0;border-radius:0}.ui.fullscreen.modal>.close+.header:not(.centered):not(.center):not(.icon),.ui.modal>.close.inside+.header:not(.centered):not(.center):not(.icon){padding-right:2.25rem}.ui.fullscreen.modal>.close,.ui.modal>.close.inside{top:1.0535rem;right:1rem;color:rgba(0,0,0,.87)}.ui.basic.fullscreen.modal>.close{color:#fff}.ui.modal{font-size:1rem}.ui.mini.modal>.header:not(.ui){font-size:1.3em}@media only screen and (max-width:767.98px){.ui.mini.modal{width:95%;margin:0}}@media only screen and (min-width:768px){.ui.mini.modal{width:35.2%;margin:0}}@media only screen and (min-width:992px){.ui.mini.modal{width:340px;margin:0}}@media only screen and (min-width:1200px){.ui.mini.modal{width:360px;margin:0}}@media only screen and (min-width:1920px){.ui.mini.modal{width:380px;margin:0}}.ui.tiny.modal>.header:not(.ui){font-size:1.3em}@media only screen and (max-width:767.98px){.ui.tiny.modal{width:95%;margin:0}}@media only screen and (min-width:768px){.ui.tiny.modal{width:52.8%;margin:0}}@media only screen and (min-width:992px){.ui.tiny.modal{width:510px;margin:0}}@media only screen and (min-width:1200px){.ui.tiny.modal{width:540px;margin:0}}@media only screen and (min-width:1920px){.ui.tiny.modal{width:570px;margin:0}}.ui.small.modal>.header:not(.ui){font-size:1.3em}@media only screen and (max-width:767.98px){.ui.small.modal{width:95%;margin:0}}@media only screen and (min-width:768px){.ui.small.modal{width:70.4%;margin:0}}@media only screen and (min-width:992px){.ui.small.modal{width:680px;margin:0}}@media only screen and (min-width:1200px){.ui.small.modal{width:720px;margin:0}}@media only screen and (min-width:1920px){.ui.small.modal{width:760px;margin:0}}.ui.large.modal>.header:not(.ui){font-size:1.6em}@media only screen and (max-width:767.98px){.ui.large.modal{width:95%;margin:0}}@media only screen and (min-width:768px){.ui.large.modal{width:88%;margin:0}}@media only screen and (min-width:992px){.ui.large.modal{width:1020px;margin:0}}@media only screen and (min-width:1200px){.ui.large.modal{width:1080px;margin:0}}@media only screen and (min-width:1920px){.ui.large.modal{width:1140px;margin:0}}.ui.big.modal>.header:not(.ui){font-size:1.6em}@media only screen and (max-width:767.98px){.ui.big.modal{width:95%;margin:0}}@media only screen and (min-width:768px){.ui.big.modal{width:88%;margin:0}}@media only screen and (min-width:992px){.ui.big.modal{width:1190px;margin:0}}@media only screen and (min-width:1200px){.ui.big.modal{width:1260px;margin:0}}@media only screen and (min-width:1920px){.ui.big.modal{width:1330px;margin:0}}.ui.huge.modal>.header:not(.ui){font-size:1.6em}@media only screen and (max-width:767.98px){.ui.huge.modal{width:95%;margin:0}}@media only screen and (min-width:768px){.ui.huge.modal{width:88%;margin:0}}@media only screen and (min-width:992px){.ui.huge.modal{width:1360px;margin:0}}@media only screen and (min-width:1200px){.ui.huge.modal{width:1440px;margin:0}}@media only screen and (min-width:1920px){.ui.huge.modal{width:1520px;margin:0}}.ui.massive.modal>.header:not(.ui){font-size:1.8em}@media only screen and (max-width:767.98px){.ui.massive.modal{width:95%;margin:0}}@media only screen and (min-width:768px){.ui.massive.modal{width:88%;margin:0}}@media only screen and (min-width:992px){.ui.massive.modal{width:1530px;margin:0}}@media only screen and (min-width:1200px){.ui.massive.modal{width:1620px;margin:0}}@media only screen and (min-width:1920px){.ui.massive.modal{width:1710px;margin:0}}.ui.inverted.modal{background:#000}.ui.inverted.modal>.content,.ui.inverted.modal>.header{background:#000;color:#fff}.ui.inverted.modal>.actions{background:#191a1b;border-top:1px solid rgba(34,36,38,.85);color:#fff}.ui.inverted.dimmer>.modal>.close{color:rgba(0,0,0,.85)}@media only screen and (max-width:991.98px){.ui.dimmer .inverted.modal>.close{color:#fff}}.ui.inverted.fullscreen.modal>.close,.ui.inverted.modal>.close.inside{color:#fff}