fomantic-ui 2.9.0-beta.317 → 2.9.0-beta.319

package/dist/components/flyout.js

@@ -1,5 +1,5 @@
 /*!
- * # Fomantic-UI 2.9.0-beta.317+6a18b84 - Flyout
+ * # Fomantic-UI 2.9.0-beta.319+0740de8 - Flyout
  * http://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -23,7 +23,7 @@ window = (typeof window != 'undefined' && window.Math == Math)
     : Function('return this')()
 ;
 
-$.fn.flyout = function(parameters) {
+$.flyout = $.fn.flyout = function(parameters) {
   var
     $allModules     = $(this),
     $window         = $(window),
@@ -68,15 +68,19 @@ $.fn.flyout = function(parameters) {
         moduleNamespace      = 'module-' + namespace,
 
         $module              = $(this),
-        $context             = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $body,
-        $close               = $module.find(selector.close),
+        $context             = [window,document].indexOf(settings.context) < 0 ? $document.find(settings.context) : $body,
+        $closeIcon           = $module.find(selector.close),
+        $inputs,
+        $focusedElement,
 
         $flyouts             = $module.children(selector.flyout),
         $pusher              = $context.children(selector.pusher),
         $style,
 
+        isFlyoutComponent    = $module.hasClass('flyout'),
+
         element              = this,
-        instance             = $module.hasClass(namespace) ? $module.data(moduleNamespace) : undefined,
+        instance             = isFlyoutComponent ? $module.data(moduleNamespace) : undefined,
 
         ignoreRepeatedEvents = false,
         isBody               = $context[0] === $body[0],
@@ -86,6 +90,7 @@ $.fn.flyout = function(parameters) {
 
         elementNamespace,
         id,
+        observer,
         currentScroll,
         transitionEvent,
 
@@ -97,7 +102,8 @@ $.fn.flyout = function(parameters) {
         initialize: function() {
           module.debug('Initializing flyout', parameters);
 
-          if(!$module.hasClass(namespace)) {
+          module.create.id();
+          if(!isFlyoutComponent) {
             module.create.flyout();
             if(!$.isFunction(settings.onHidden)) {
               settings.onHidden = function () {
@@ -105,6 +111,9 @@ $.fn.flyout = function(parameters) {
                 $module.remove();
               };
             }
+            if(!settings.autoShow) {
+              settings.autoShow = true;
+            }
           }
           $module.addClass(settings.class);
           if (settings.title !== '') {
@@ -122,13 +131,14 @@ $.fn.flyout = function(parameters) {
             }
             settings.actions.forEach(function (el) {
               var
-                icon = el[fields.icon] ? '<i class="' + module.helpers.deQuote(el[fields.icon]) + ' icon"></i>' : '',
+                icon = el[fields.icon] ? '<i '+(el[fields.text] ? 'aria-hidden="true"' : '')+' class="' + module.helpers.deQuote(el[fields.icon]) + ' icon"></i>' : '',
                 text = module.helpers.escape(el[fields.text] || '', settings.preserveHTML),
                 cls = module.helpers.deQuote(el[fields.class] || ''),
                 click = el[fields.click] && $.isFunction(el[fields.click]) ? el[fields.click] : function () {}
               ;
               $actions.append($('<button/>', {
                 html: icon + text,
+                'aria-label': (el[fields.text] || el[fields.icon] || '').replace(/<[^>]+(>|$)/g,''),
                 class: className.button + ' ' + cls,
                 click: function () {
                   if (click.call(element, $module) === false) {
@@ -140,8 +150,6 @@ $.fn.flyout = function(parameters) {
             });
           }
 
-          module.create.id();
-
           transitionEvent = module.get.transitionEvent();
 
           // avoids locking rendering if initialized in onReady
@@ -160,6 +168,9 @@ $.fn.flyout = function(parameters) {
             module.setup.heights();
             module.bind.resize();
           }
+          module.refreshInputs();
+          module.bind.events();
+          module.observeChanges();
           module.instantiate();
 
           if(settings.autoShow){
@@ -178,30 +189,37 @@ $.fn.flyout = function(parameters) {
         create: {
           flyout: function() {
             module.verbose('Programmaticaly create flyout', $context);
-            $module = $('<div/>', {class: className.flyout});
+            $module = $('<div/>', {class: className.flyout, role: 'dialog', 'aria-modal': settings.dimPage});
             if (settings.closeIcon) {
-              $close = $('<i/>', {class: className.close})
-              $module.append($close);
+              $closeIcon = $('<i/>', {class: className.close, role: 'button', tabindex: 0, 'aria-label': settings.text.close})
+              $module.append($closeIcon);
             }
             if (settings.title !== '') {
-              $('<div/>', {class: className.header}).appendTo($module);
+              var titleId = '_' + module.get.id() + 'title';
+              $module.attr('aria-labelledby', titleId);
+              $('<div/>', {class: className.header, id: titleId}).appendTo($module);
             }
             if (settings.content !== '') {
-              $('<div/>', {class: className.content}).appendTo($module);
+              var descId = '_' + module.get.id() + 'desc';
+              $module.attr('aria-describedby', descId);
+              $('<div/>', {class: className.content, id: descId}).appendTo($module);
             }
             if (module.has.configActions()) {
               $('<div/>', {class: className.actions}).appendTo($module);
             }
-            $context.append($module);
+            $module.prependTo($context);
           },
           id: function() {
-            id = (Math.random().toString(16) + '000000000').substr(2,8);
+            id = (Math.random().toString(16) + '000000000').slice(2, 10);
             elementNamespace = '.' + id;
             module.verbose('Creating unique id for element', id);
           }
         },
 
         destroy: function() {
+          if (observer) {
+            observer.disconnect();
+          }
           module.verbose('Destroying previous module for', $module);
           $module
             .off(eventNamespace)
@@ -210,6 +228,10 @@ $.fn.flyout = function(parameters) {
           if(module.is.ios()) {
             module.remove.ios();
           }
+          $closeIcon.off(elementNamespace);
+          if($inputs) {
+            $inputs.off(elementNamespace);
+          }
           // bound by uuid
           $context.off(elementNamespace);
           $window.off(elementNamespace);
@@ -217,6 +239,21 @@ $.fn.flyout = function(parameters) {
         },
 
         event: {
+          keyboard: function(event) {
+            var
+                keyCode   = event.which
+            ;
+            if(keyCode === settings.keys.escape) {
+              if(settings.closable) {
+                module.debug('Escape key pressed hiding flyout');
+                module.hide();
+              }
+              else {
+                module.debug('Escape key pressed, but closable is set to false');
+              }
+              event.preventDefault();
+            }
+          },
           resize: function() {
             module.setup.heights();
           },
@@ -239,6 +276,34 @@ $.fn.flyout = function(parameters) {
           close: function(event) {
             module.hide();
           },
+          closeKeyUp: function(event){
+            var
+                keyCode   = event.which
+            ;
+            if (keyCode === settings.keys.enter || keyCode === settings.keys.space) {
+              module.hide();
+            }
+          },
+          inputKeyDown: {
+            first: function(event) {
+              var
+                  keyCode = event.which
+              ;
+              if (keyCode === settings.keys.tab && event.shiftKey) {
+                $inputs.last().focus();
+                event.preventDefault();
+              }
+            },
+            last: function(event) {
+              var
+                  keyCode = event.which
+              ;
+              if (keyCode === settings.keys.tab && !event.shiftKey) {
+                $inputs.first().focus();
+                event.preventDefault();
+              }
+            }
+          },
           approve: function(event) {
             if (ignoreRepeatedEvents || settings.onApprove.call(module.element, $(this)) === false) {
               module.verbose('Approve callback returned false cancelling close');
@@ -282,16 +347,23 @@ $.fn.flyout = function(parameters) {
             module.verbose('Adding resize event to window', $window);
             $window.on('resize' + elementNamespace, module.event.resize);
           },
+          events: function() {
+            module.verbose('Attaching events');
+            $module
+                .on('click' + eventNamespace, selector.close, module.event.close)
+                .on('click' + eventNamespace, selector.approve, module.event.approve)
+                .on('click' + eventNamespace, selector.deny, module.event.deny)
+            ;
+            $closeIcon
+                .on('keyup' + elementNamespace, module.event.closeKeyUp)
+            ;
+          },
           clickaway: function() {
             module.verbose('Adding clickaway events to context', $context);
             $context
               .on('click'    + elementNamespace, module.event.clickaway)
               .on('touchend' + elementNamespace, module.event.clickaway)
             ;
-
-            $module.on('click' + elementNamespace, settings.selector.close, module.event.close);
-            $module.on('click' + elementNamespace, settings.selector.approve, module.event.approve);
-            $module.on('click' + elementNamespace, settings.selector.deny, module.event.deny);
           },
           scrollLock: function() {
             if(settings.scrollLock) {
@@ -378,7 +450,7 @@ $.fn.flyout = function(parameters) {
               if(direction === 'left' || direction === 'right') {
                 module.debug('Adding CSS rules for animation distance', width);
                 style  += ''
-                  + ' body.pushable > .ui.visible.' + direction + '.flyout ~ .pusher:after {'
+                  + ' body.pushable > .ui.visible.' + direction + '.flyout ~ .pusher::after {'
                   + '   -webkit-transform: translate3d('+ distance[direction] + 'px, 0, 0);'
                   + '           transform: translate3d('+ distance[direction] + 'px, 0, 0);'
                   + ' }'
@@ -386,7 +458,7 @@ $.fn.flyout = function(parameters) {
               }
               else if(direction === 'top' || direction == 'bottom') {
                 style  += ''
-                  + ' body.pushable > .ui.visible.' + direction + '.flyout ~ .pusher:after {'
+                  + ' body.pushable > .ui.visible.' + direction + '.flyout ~ .pusher::after {'
                   + '   -webkit-transform: translate3d(0, ' + distance[direction] + 'px, 0);'
                   + '           transform: translate3d(0, ' + distance[direction] + 'px, 0);'
                   + ' }'
@@ -394,8 +466,8 @@ $.fn.flyout = function(parameters) {
               }
               /* opposite sides visible forces content overlay */
               style += ''
-                + ' body.pushable > .ui.visible.left.flyout ~ .ui.visible.right.flyout ~ .pusher:after,'
-                + ' body.pushable > .ui.visible.right.flyout ~ .ui.visible.left.flyout ~ .pusher:after {'
+                + ' body.pushable > .ui.visible.left.flyout ~ .ui.visible.right.flyout ~ .pusher::after,'
+                + ' body.pushable > .ui.visible.right.flyout ~ .ui.visible.left.flyout ~ .pusher::after {'
                 + '   -webkit-transform: translate3d(0, 0, 0);'
                 + '           transform: translate3d(0, 0, 0);'
                 + ' }'
@@ -406,13 +478,30 @@ $.fn.flyout = function(parameters) {
               .appendTo($head)
             ;
             module.debug('Adding sizing css to head', $style);
+          },
+          keyboardShortcuts: function() {
+            module.verbose('Adding keyboard shortcuts');
+            $document
+                .on('keydown' + eventNamespace, module.event.keyboard)
+            ;
+          }
+        },
+        observeChanges: function() {
+          if('MutationObserver' in window) {
+            observer = new MutationObserver(function(mutations) {
+              module.refreshInputs();
+            });
+            observer.observe(element, {
+              childList : true,
+              subtree   : true
+            });
+            module.debug('Setting up mutation observer', observer);
           }
         },
-
         refresh: function() {
           module.verbose('Refreshing selector cache');
-          $context  = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context);
-          $flyouts = $context.children(selector.flyout);
+          $context  = [window,document].indexOf(settings.context) < 0 ? $document.find(settings.context) : $body;
+          module.refreshFlyouts();
           $pusher   = $context.children(selector.pusher);
           module.clear.cache();
         },
@@ -422,11 +511,24 @@ $.fn.flyout = function(parameters) {
           $flyouts = $context.children(selector.flyout);
         },
 
-        repaint: function() {
-          module.verbose('Forcing repaint event');
-          element.style.display = 'none';
-          element.scrollTop = element.scrollTop;
-          element.style.display = '';
+        refreshInputs: function(){
+          if($inputs){
+            $inputs
+                .off('keydown' + elementNamespace)
+            ;
+          }
+          if(!settings.dimPage){
+            return;
+          }
+          $inputs    = $module.find('[tabindex], :input').filter(':visible').filter(function() {
+            return $(this).closest('.disabled').length === 0;
+          });
+          $inputs.first()
+              .on('keydown' + elementNamespace, module.event.inputKeyDown.first)
+          ;
+          $inputs.last()
+              .on('keydown' + elementNamespace, module.event.inputKeyDown.last)
+          ;
         },
 
         setup: {
@@ -498,7 +600,10 @@ $.fn.flyout = function(parameters) {
             : function(){}
           ;
           if(module.is.hidden()) {
-            module.refreshFlyouts();
+            if(settings.onShow.call(element) === false) {
+              module.verbose('Show callback returned false cancelling show');
+              return;
+            }
             module.refresh();
             if(module.othersActive()) {
               module.debug('Other flyouts currently visible');
@@ -508,12 +613,19 @@ $.fn.flyout = function(parameters) {
                 ignoreRepeatedEvents = false;
               }
             }
+            module.set.dimmerStyles();
             module.pushPage(function() {
               callback.call(element);
-              settings.onShow.call(element);
+              settings.onVisible.call(element);
+              if(settings.keyboardShortcuts) {
+                module.add.keyboardShortcuts();
+              }
+              module.save.focus();
+              if(settings.autofocus) {
+                module.set.autofocus();
+              }
             });
             settings.onChange.call(element);
-            settings.onVisible.call(element);
           }
           else {
             module.debug('Flyout is already visible');
@@ -538,6 +650,7 @@ $.fn.flyout = function(parameters) {
               if($.isFunction(settings.onHidden)) {
                 settings.onHidden.call(element);
               }
+              module.restore.focus();
             });
             settings.onChange.call(element);
           }
@@ -591,7 +704,6 @@ $.fn.flyout = function(parameters) {
             : function(){}
           ;
           module.set.overlay();
-          module.repaint();
           if(settings.returnScroll) {
             currentScroll = (isBody ? $window : $context).scrollTop();
           }
@@ -634,18 +746,25 @@ $.fn.flyout = function(parameters) {
           module.unbind.clickaway();
           if(!module.othersActive()) {
             module.unbind.scrollLock();
+            if( settings.keyboardShortcuts ) {
+              module.remove.keyboardShortcuts();
+            }
           }
 
+
           animate = function() {
             module.set.overlay();
             module.set.animating();
+            if(settings.dimPage && !module.othersVisible()) {
+              module.set.closing();
+            }
             module.remove.visible();
-            
           };
           transitionEnd = function(event) {
             if( event.target == $module[0] ) {
               $module.off(transitionEvent + elementNamespace, transitionEnd);
               module.remove.animating();
+              module.remove.closing();
               module.remove.overlay();
               module.remove.inlineCSS();
               if(settings.returnScroll) {
@@ -681,6 +800,25 @@ $.fn.flyout = function(parameters) {
         },
 
         set: {
+          autofocus: function() {
+            var
+                $autofocus = $inputs.filter('[autofocus]'),
+                $input     = ($autofocus.length > 0)
+                    ? $autofocus.first()
+                    : ($inputs.length > 1 ? $inputs.filter(':not(i.close)') : $inputs).first()
+            ;
+            if($input.length > 0) {
+              $input.focus();
+            }
+          },
+          dimmerStyles: function() {
+            if(settings.blurring) {
+              $pusher.addClass(className.blurring);
+            }
+            else {
+              $pusher.removeClass(className.blurring);
+            }
+          },
           bodyMargin: function() {
             var position = module.can.leftBodyScrollbar() ? 'left':'right';
             $context.css((isBody ? 'margin-':'padding-')+position, tempBodyMargin + 'px');
@@ -718,6 +856,9 @@ $.fn.flyout = function(parameters) {
           animating: function() {
             $module.addClass(className.animating);
           },
+          closing: function() {
+            $pusher.addClass(className.closing);
+          },
           direction: function(direction) {
             direction = direction || module.get.direction();
             $module.addClass(className[direction]);
@@ -737,6 +878,12 @@ $.fn.flyout = function(parameters) {
               $style.remove();
             }
           },
+          keyboardShortcuts: function() {
+            module.verbose('Removing keyboard shortcuts');
+            $document
+                .off('keydown' + eventNamespace)
+            ;
+          },
 
           // ios scroll on html not document
           ios: function() {
@@ -758,6 +905,9 @@ $.fn.flyout = function(parameters) {
           animating: function() {
             $module.removeClass(className.animating);
           },
+          closing: function() {
+            $pusher.removeClass(className.closing);
+          },
           direction: function(direction) {
             direction = direction || module.get.direction();
             $module.removeClass(className[direction]);
@@ -771,7 +921,6 @@ $.fn.flyout = function(parameters) {
         },
 
         get: {
-          
           direction: function() {
             if($module.hasClass(className.top)) {
               return className.top;
@@ -801,6 +950,12 @@ $.fn.flyout = function(parameters) {
               }
             }
           },
+          id: function() {
+            return id;
+          },
+          element: function() {
+            return $module;
+          },
           settings: function() {
             return settings;
           }
@@ -816,6 +971,15 @@ $.fn.flyout = function(parameters) {
         },
 
         save: {
+          focus: function() {
+            var
+                $activeElement = $(document.activeElement),
+                inCurrentFlyout = $activeElement.closest($module).length > 0
+            ;
+            if(!inCurrentFlyout) {
+              $focusedElement = $(document.activeElement).blur();
+            }
+          },
           bodyMargin: function() {
             initialBodyMargin = $context.css((isBody ? 'margin-':'padding-')+(module.can.leftBodyScrollbar() ? 'left':'right'));
             var bodyMarginRightPixel = parseInt(initialBodyMargin.replace(/[^\d.]/g, '')),
@@ -911,6 +1075,11 @@ $.fn.flyout = function(parameters) {
         },
 
         restore: {
+          focus: function() {
+            if($focusedElement && $focusedElement.length > 0 && settings.restoreFocus) {
+              $focusedElement.focus();
+            }
+          },
           bodyMargin: function() {
             var position = module.can.leftBodyScrollbar() ? 'left':'right';
             $context.css((isBody ? 'margin-':'padding-')+position, initialBodyMargin);
@@ -946,7 +1115,7 @@ $.fn.flyout = 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;
@@ -1164,12 +1333,16 @@ $.fn.flyout.settings = {
   context      : 'body',
   exclusive    : false,
   closable     : true,
+  autofocus    : true,
+  restoreFocus : true,
   dimPage      : true,
   scrollLock   : false,
   returnScroll : false,
   delaySetup   : false,
   autoShow     : false,
 
+  keyboardShortcuts: true,
+
   //dynamic content
   title        : '',
   content      : '',
@@ -1198,6 +1371,13 @@ $.fn.flyout.settings = {
   onApprove    : function(){},
   onDeny       : function(){},
 
+  keys : {
+    space      : 32,
+    enter      : 13,
+    escape     : 27,
+    tab        :  9,
+  },
+
   className    : {
     flyout     : 'ui flyout',
     close      : 'close icon',
@@ -1206,6 +1386,8 @@ $.fn.flyout.settings = {
     actions    : 'actions',
     active     : 'active',
     animating  : 'animating',
+    blurring   : 'blurring',
+    closing    : 'closing',
     dimmed     : 'dimmed',
     ios        : 'ios',
     locked     : 'locked',
@@ -1254,7 +1436,8 @@ $.fn.flyout.settings = {
 
   text: {
     ok     : 'Ok',
-    cancel : 'Cancel'
+    cancel : 'Cancel',
+    close : 'Close'
   }
 };
 

package/dist/components/flyout.min.css

@@ -1,9 +1,9 @@
 /*!
- * # Fomantic-UI 2.9.0-beta.317+6a18b84 - Flyout
+ * # Fomantic-UI 2.9.0-beta.319+0740de8 - Flyout
  * http://github.com/fomantic/Fomantic-UI/
  *
  *
  * Released under the MIT license
  * http://opensource.org/licenses/MIT
  *
- */.ui.flyout{position:fixed;top:0;left:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:none;transition:none;will-change:transform;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);visibility:hidden;-webkit-overflow-scrolling:touch;height:100%;max-height:100%;max-width:100%;border-radius:0;margin:0;overflow-y:hidden;z-index:102;background:#fff}.ui.flyout>*{-webkit-backface-visibility:hidden;backface-visibility:hidden}.ui.flyout>.close{cursor:pointer;position:absolute;top:1.25rem;right:1.5rem;z-index:1;opacity:.8;font-size:1.25em;color:rgba(0,0,0,.85);width:2.25rem;height:2.25rem;padding:0;margin:0 0 0 .25rem;text-align:right}.ui.flyout>.close:hover{opacity:1}.ui.flyout>.header{display:block;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.flyout>.content{display:block;width:100%;font-size:1em;line-height:1.4;padding:1.5rem;background:#fff}.ui.flyout.left>.content,.ui.flyout.right>.content{min-height:calc(100vh - 9.1rem)}.ui.flyout.left>.scrolling.content,.ui.flyout.right>.scrolling.content{max-height:calc(100vh - 9.1rem);overflow:auto}.ui.flyout.bottom>.scrolling.content,.ui.flyout.top>.scrolling.content{max-height:calc(80vh - 9.1rem);overflow:auto}.ui.flyout>.actions{padding:1rem 1rem;border-top:1px solid rgba(34,36,38,.15);text-align:right}.ui.flyout .actions>.button:not(.fluid){margin-left:.75em}.ui.left.flyout{right:auto;left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.ui.right.flyout{right:0;left:auto;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.ui.bottom.flyout,.ui.top.flyout{width:100%;height:auto}.ui.top.flyout{top:0;bottom:auto;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.ui.bottom.flyout{top:auto;bottom:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.pushable.pushable.pushable{height:100%;overflow-x:hidden;padding:0}.pushable.pushable.pushable.locked{overflow-y:hidden;background:inherit}body.pushable{background:#545454}body.pushable.dimmed{background:inherit}.pushable:not(body){-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);overflow-y:hidden}.pushable:not(body)>.fixed,.pushable:not(body)>.pusher:after,.pushable:not(body)>.ui.flyout{position:absolute}.pushable>.fixed{position:fixed;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:-webkit-transform .5s ease;transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease;will-change:transform;z-index:101}.pushable>.pusher{position:relative;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;min-height:100%;-webkit-transition:-webkit-transform .5s ease;transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease;z-index:2;background:inherit}body.pushable>.pusher{background:#fff}.pushable>.pusher:after{position:fixed;top:0;right:0;content:'';background:rgba(0,0,0,.4);overflow:hidden;opacity:0;-webkit-transition:opacity .5s;transition:opacity .5s;will-change:opacity;z-index:1000}.ui.flyout.menu .item{border-radius:0!important}.pushable>.pusher.dimmed:after{width:100%!important;height:100%!important;opacity:1!important}.ui.animating.flyout{visibility:visible}.ui.visible.flyout{visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.ui.left.visible.flyout,.ui.right.visible.flyout{-webkit-box-shadow:0 0 20px rgba(34,36,38,.15);box-shadow:0 0 20px rgba(34,36,38,.15)}.ui.bottom.visible.flyout,.ui.top.visible.flyout{-webkit-box-shadow:0 0 20px rgba(34,36,38,.15);box-shadow:0 0 20px rgba(34,36,38,.15)}.ui.visible.left.flyout~.fixed,.ui.visible.left.flyout~.pusher{-webkit-transform:translate3d(400px,0,0);transform:translate3d(400px,0,0)}.ui.visible.right.flyout~.fixed,.ui.visible.right.flyout~.pusher{-webkit-transform:translate3d(-400px,0,0);transform:translate3d(-400px,0,0)}.ui.visible.top.flyout~.fixed,.ui.visible.top.flyout~.pusher{-webkit-transform:translate3d(0,36px,0);transform:translate3d(0,36px,0)}.ui.visible.bottom.flyout~.fixed,.ui.visible.bottom.flyout~.pusher{-webkit-transform:translate3d(0,-36px,0);transform:translate3d(0,-36px,0)}.ui.visible.left.flyout~.ui.visible.right.flyout~.fixed,.ui.visible.left.flyout~.ui.visible.right.flyout~.pusher,.ui.visible.right.flyout~.ui.visible.left.flyout~.fixed,.ui.visible.right.flyout~.ui.visible.left.flyout~.pusher{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.ui.flyout.inverted{background:rgba(0,0,0,.9)}.ui.flyout.inverted>.close{color:#fff}.ui.flyout.inverted>.content,.ui.flyout.inverted>.header{background:rgba(0,0,0,.9);color:#fff}.ui.flyout.inverted>.actions{background:#191a1b;border-top:1px solid rgba(34,36,38,.85);color:#fff}.ui.thin.left.flyout,.ui.thin.right.flyout{width:200px}.ui[class*="very thin"].left.flyout,.ui[class*="very thin"].right.flyout{width:120px}.ui.left.flyout,.ui.right.flyout{width:400px}.ui.wide.left.flyout,.ui.wide.right.flyout{width:600px}.ui[class*="very wide"].left.flyout,.ui[class*="very wide"].right.flyout{width:800px}.ui.visible.thin.left.flyout~.fixed,.ui.visible.thin.left.flyout~.pusher{-webkit-transform:translate3d(200px,0,0);transform:translate3d(200px,0,0)}.ui.visible[class*="very thin"].left.flyout~.fixed,.ui.visible[class*="very thin"].left.flyout~.pusher{-webkit-transform:translate3d(120px,0,0);transform:translate3d(120px,0,0)}.ui.visible.wide.left.flyout~.fixed,.ui.visible.wide.left.flyout~.pusher{-webkit-transform:translate3d(600px,0,0);transform:translate3d(600px,0,0)}.ui.visible[class*="very wide"].left.flyout~.fixed,.ui.visible[class*="very wide"].left.flyout~.pusher{-webkit-transform:translate3d(800px,0,0);transform:translate3d(800px,0,0)}.ui.visible.thin.right.flyout~.fixed,.ui.visible.thin.right.flyout~.pusher{-webkit-transform:translate3d(-200px,0,0);transform:translate3d(-200px,0,0)}.ui.visible[class*="very thin"].right.flyout~.fixed,.ui.visible[class*="very thin"].right.flyout~.pusher{-webkit-transform:translate3d(-120px,0,0);transform:translate3d(-120px,0,0)}.ui.visible.wide.right.flyout~.fixed,.ui.visible.wide.right.flyout~.pusher{-webkit-transform:translate3d(-600px,0,0);transform:translate3d(-600px,0,0)}.ui.visible[class*="very wide"].right.flyout~.fixed,.ui.visible[class*="very wide"].right.flyout~.pusher{-webkit-transform:translate3d(-800px,0,0);transform:translate3d(-800px,0,0)}.ui.fullscreen.flyout{width:100%}.ui[class*="one wide"].flyout:not(.fullscreen){width:6.25%}.ui[class*="two wide"].flyout:not(.fullscreen){width:12.5%}.ui[class*="three wide"].flyout:not(.fullscreen){width:18.75%}.ui[class*="four wide"].flyout:not(.fullscreen){width:25%}.ui[class*="five wide"].flyout:not(.fullscreen){width:31.25%}.ui[class*="six wide"].flyout:not(.fullscreen){width:37.5%}.ui[class*="seven wide"].flyout:not(.fullscreen){width:43.75%}.ui[class*="eight wide"].flyout:not(.fullscreen){width:50%}.ui[class*="nine wide"].flyout:not(.fullscreen){width:56.25%}.ui[class*="ten wide"].flyout:not(.fullscreen){width:62.5%}.ui[class*="eleven wide"].flyout:not(.fullscreen){width:68.75%}.ui[class*="twelve wide"].flyout:not(.fullscreen){width:75%}.ui[class*="thirteen wide"].flyout:not(.fullscreen){width:81.25%}.ui[class*="fourteen wide"].flyout:not(.fullscreen){width:87.5%}.ui[class*="fifteen wide"].flyout:not(.fullscreen){width:93.75%}.ui[class*="sixteen wide"].flyout:not(.fullscreen){width:100%}.ui.overlay.flyout{z-index:102}.ui.left.overlay.flyout{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.ui.right.overlay.flyout{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.ui.top.overlay.flyout{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.ui.bottom.overlay.flyout{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.animating.ui.overlay.flyout,.ui.visible.overlay.flyout{-webkit-transition:-webkit-transform .5s ease;transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease}.ui.visible.overlay.flyout{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.ui.visible.overlay.flyout~.fixed,.ui.visible.overlay.flyout~.pusher{-webkit-transform:none!important;transform:none!important}
+ */.ui.flyout{position:fixed;top:0;left:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:none;transition:none;will-change:transform;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);visibility:hidden;-webkit-overflow-scrolling:touch;height:100%;max-height:100%;max-width:100%;border-radius:0;margin:0;overflow-y:hidden;z-index:102;background:#fff}.ui.flyout>*{-webkit-backface-visibility:hidden;backface-visibility:hidden}.ui.flyout>.close{cursor:pointer;position:absolute;top:1.25rem;right:1.5rem;z-index:1;opacity:.8;font-size:1.25em;color:rgba(0,0,0,.85);width:2.25rem;height:2.25rem;padding:0;margin:0 0 0 .25rem;text-align:right}.ui.flyout>.close:focus,.ui.flyout>.close:hover{opacity:1;outline:0}.ui.flyout>.header{display:block;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.flyout>.content{display:block;width:100%;font-size:1em;line-height:1.4;padding:1.5rem;background:#fff}.ui.flyout.left>.content,.ui.flyout.right>.content{min-height:calc(100vh - 9.1rem)}.ui.flyout.left>.scrolling.content,.ui.flyout.right>.scrolling.content{max-height:calc(100vh - 9.1rem);overflow:auto}.ui.flyout.bottom>.scrolling.content,.ui.flyout.top>.scrolling.content{max-height:calc(80vh - 9.1rem);overflow:auto}.ui.flyout>.actions{background:#f9fafb;padding:1rem 1rem;border-top:1px solid rgba(34,36,38,.15);text-align:right}.ui.flyout .actions>.button:not(.fluid){margin-left:.75em}.ui.ui.flyout>.basic.actions{border-top:none}.ui.flyout>.left.actions{text-align:left}.ui.flyout>.left.actions>.button:not(.fluid){margin-left:.5em;margin-right:.5em}.ui.flyout>.center.aligned,.ui.flyout>.centered{text-align:center}.ui.flyout>.center.aligned.actions>.button:not(.fluid),.ui.flyout>.centered.actions>.button:not(.fluid){margin-left:.5em;margin-right:.5em}.ui.ui.flyout>.basic.actions,.ui.ui.flyout>.basic.header{background-color:transparent}.ui.flyout>.basic.header{border-bottom:none}.ui.left.flyout{right:auto;left:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.ui.right.flyout{right:0;left:auto;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.ui.bottom.flyout,.ui.top.flyout{width:100%;height:auto}.ui.top.flyout{top:0;bottom:auto;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.ui.bottom.flyout{top:auto;bottom:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.pushable.pushable.pushable{height:100%;overflow-x:hidden;padding:0}.pushable.pushable.pushable.locked{overflow-y:hidden;background:inherit}body.pushable{background:#545454}body.pushable.dimmed{background:inherit}.pushable:not(body){-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);overflow-y:hidden}.pushable:not(body)>.fixed,.pushable:not(body)>.pusher::after,.pushable:not(body)>.ui.flyout{position:absolute}.pushable>.fixed{position:fixed;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:-webkit-transform .5s ease;transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease;will-change:transform;z-index:101}.pushable>.pusher{position:relative;-webkit-backface-visibility:hidden;backface-visibility:hidden;min-height:100%;-webkit-transition:-webkit-transform .5s ease;transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease;z-index:2;background:inherit}.pushable>.pusher:not(.overflowing){overflow:hidden}body.pushable>.pusher{background:#fff}.pushable>.pusher::after{position:fixed;top:0;right:0;content:'';background:rgba(0,0,0,.4);overflow:hidden;opacity:0;-webkit-transition:all .5s;transition:all .5s;will-change:opacity;z-index:1000}.ui.flyout.menu .item{border-radius:0!important}.pushable>.pusher.dimmed::after{width:100%!important;height:100%!important;opacity:1!important}.pushable>.pusher.dimmed.blurring:not(.closing)::after{background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(5px) grayscale(.7);backdrop-filter:blur(5px) grayscale(.7)}.pushable>.pusher.closing.dimmed::after{opacity:0!important}.ui.animating.flyout{visibility:visible}.ui.visible.flyout{visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.ui.left.visible.flyout,.ui.right.visible.flyout{-webkit-box-shadow:0 0 20px rgba(34,36,38,.15);box-shadow:0 0 20px rgba(34,36,38,.15)}.ui.bottom.visible.flyout,.ui.top.visible.flyout{-webkit-box-shadow:0 0 20px rgba(34,36,38,.15);box-shadow:0 0 20px rgba(34,36,38,.15)}.ui.visible.left.flyout~.fixed,.ui.visible.left.flyout~.pusher{-webkit-transform:translate3d(400px,0,0);transform:translate3d(400px,0,0)}.ui.visible.right.flyout~.fixed,.ui.visible.right.flyout~.pusher{-webkit-transform:translate3d(-400px,0,0);transform:translate3d(-400px,0,0)}.ui.visible.top.flyout~.fixed,.ui.visible.top.flyout~.pusher{-webkit-transform:translate3d(0,36px,0);transform:translate3d(0,36px,0)}.ui.visible.bottom.flyout~.fixed,.ui.visible.bottom.flyout~.pusher{-webkit-transform:translate3d(0,-36px,0);transform:translate3d(0,-36px,0)}.ui.visible.left.flyout~.ui.visible.right.flyout~.fixed,.ui.visible.left.flyout~.ui.visible.right.flyout~.pusher,.ui.visible.right.flyout~.ui.visible.left.flyout~.fixed,.ui.visible.right.flyout~.ui.visible.left.flyout~.pusher{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.ui.flyout.inverted{background:#000}.ui.flyout.inverted>.close{color:#fff}.ui.flyout.inverted>.content,.ui.flyout.inverted>.header{background:#000;color:#fff}.ui.flyout.inverted>.actions{background:#191a1b;border-top:1px solid rgba(34,36,38,.85);color:#fff}.ui.left.flyout,.ui.right.flyout{width:400px}.ui.thin.left.flyout,.ui.thin.right.flyout{width:200px}.ui[class*="very thin"].left.flyout,.ui[class*="very thin"].right.flyout{width:120px}.ui.wide.left.flyout,.ui.wide.right.flyout{width:600px}.ui[class*="very wide"].left.flyout,.ui[class*="very wide"].right.flyout{width:800px}.ui.visible.thin.left.flyout~.fixed,.ui.visible.thin.left.flyout~.pusher{-webkit-transform:translate3d(200px,0,0);transform:translate3d(200px,0,0)}.ui.visible[class*="very thin"].left.flyout~.fixed,.ui.visible[class*="very thin"].left.flyout~.pusher{-webkit-transform:translate3d(120px,0,0);transform:translate3d(120px,0,0)}.ui.visible.wide.left.flyout~.fixed,.ui.visible.wide.left.flyout~.pusher{-webkit-transform:translate3d(600px,0,0);transform:translate3d(600px,0,0)}.ui.visible[class*="very wide"].left.flyout~.fixed,.ui.visible[class*="very wide"].left.flyout~.pusher{-webkit-transform:translate3d(800px,0,0);transform:translate3d(800px,0,0)}.ui.visible.thin.right.flyout~.fixed,.ui.visible.thin.right.flyout~.pusher{-webkit-transform:translate3d(-200px,0,0);transform:translate3d(-200px,0,0)}.ui.visible[class*="very thin"].right.flyout~.fixed,.ui.visible[class*="very thin"].right.flyout~.pusher{-webkit-transform:translate3d(-120px,0,0);transform:translate3d(-120px,0,0)}.ui.visible.wide.right.flyout~.fixed,.ui.visible.wide.right.flyout~.pusher{-webkit-transform:translate3d(-600px,0,0);transform:translate3d(-600px,0,0)}.ui.visible[class*="very wide"].right.flyout~.fixed,.ui.visible[class*="very wide"].right.flyout~.pusher{-webkit-transform:translate3d(-800px,0,0);transform:translate3d(-800px,0,0)}.ui.fullscreen.flyout{width:100%}.ui[class*="one wide"].flyout:not(.fullscreen){width:6.25%}.ui[class*="two wide"].flyout:not(.fullscreen){width:12.5%}.ui[class*="three wide"].flyout:not(.fullscreen){width:18.75%}.ui[class*="four wide"].flyout:not(.fullscreen){width:25%}.ui[class*="five wide"].flyout:not(.fullscreen){width:31.25%}.ui[class*="six wide"].flyout:not(.fullscreen){width:37.5%}.ui[class*="seven wide"].flyout:not(.fullscreen){width:43.75%}.ui[class*="eight wide"].flyout:not(.fullscreen){width:50%}.ui[class*="nine wide"].flyout:not(.fullscreen){width:56.25%}.ui[class*="ten wide"].flyout:not(.fullscreen){width:62.5%}.ui[class*="eleven wide"].flyout:not(.fullscreen){width:68.75%}.ui[class*="twelve wide"].flyout:not(.fullscreen){width:75%}.ui[class*="thirteen wide"].flyout:not(.fullscreen){width:81.25%}.ui[class*="fourteen wide"].flyout:not(.fullscreen){width:87.5%}.ui[class*="fifteen wide"].flyout:not(.fullscreen){width:93.75%}.ui[class*="sixteen wide"].flyout:not(.fullscreen){width:100%}.ui.overlay.flyout{z-index:102}.ui.left.overlay.flyout{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.ui.right.overlay.flyout{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.ui.top.overlay.flyout{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}.ui.bottom.overlay.flyout{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.animating.ui.overlay.flyout,.ui.visible.overlay.flyout{-webkit-transition:-webkit-transform .5s ease;transition:-webkit-transform .5s ease;transition:transform .5s ease;transition:transform .5s ease,-webkit-transform .5s ease}.ui.visible.overlay.flyout{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.ui.visible.overlay.flyout~.fixed,.ui.visible.overlay.flyout~.pusher{-webkit-transform:none!important;transform:none!important}