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

package/src/definitions/modules/flyout.less

@@ -58,21 +58,23 @@
 .ui.flyout > .close {
   cursor: pointer;
   position: absolute;
-  top: 1.25rem;
-  right: 1.5rem;
+  top: @closeTop;
+  right: @closeRight;
   z-index: 1;
-  opacity: 0.8;
-  font-size: 1.25em;
-  color: rgba(0, 0, 0, 0.85);
-  width: 2.25rem;
-  height: 2.25rem;
-  padding: 0;
-  margin: 0 0 0 0.25rem;
+  opacity: @closeOpacity;
+  font-size: @closeSize;
+  color: @closeColor;
+  width: @closeHitbox;
+  height: @closeHitbox;
+  padding: @closePadding;
+  margin: @closeMargin;
   text-align: right;
 }
 
+.ui.flyout > .close:focus,
 .ui.flyout > .close:hover {
   opacity: 1;
+  outline: none;
 }
 
 /*--------------
@@ -80,13 +82,12 @@
 ---------------*/
 .ui.flyout > .header {
   display: block;
-  background: #FFFFFF;
-  margin: 0;
-  padding: 1.25rem 1.5rem;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  color: rgba(0, 0, 0, 0.85);
-  border-bottom: 1px solid rgba(34, 36, 38, 0.15);
+  background: @headerBackground;
+  margin: @headerMargin;
+  padding: @headerPadding;
+  box-shadow: @headerBoxShadow;
+  color: @headerColor;
+  border-bottom: @headerBorder;
 }
 
 /*--------------
@@ -95,38 +96,74 @@
 .ui.flyout > .content {
   display: block;
   width: 100%;
-  font-size: 1em;
-  line-height: 1.4;
-  padding: 1.5rem;
-  background: #FFFFFF;
+  font-size: @contentFontSize;
+  line-height: @contentLineHeight;
+  padding: @contentPadding;
+  background: @contentBackground;
 }
 .ui.flyout.left > .content,
 .ui.flyout.right > .content {
-  min-height: calc(100vh - 9.1rem);
+  min-height: @contentMinHeight;
 }
 
 .ui.flyout.left > .scrolling.content,
 .ui.flyout.right > .scrolling.content{
-  max-height: calc(100vh - 9.1rem);
+  max-height: @scrollingContentMaxHeight;
   overflow: auto;
 }
 
 .ui.flyout.top > .scrolling.content,
 .ui.flyout.bottom > .scrolling.content{
-  max-height: calc(80vh - 9.1rem);
+  max-height: @scrollingContentMaxHeightTopBottom;
   overflow: auto;
 }
 
-/*--------------
-   Actions
----------------*/
-.ui.flyout > .actions {
-  padding: 1rem 1rem;
-  border-top: 1px solid rgba(34, 36, 38, 0.15);
-  text-align: right;
+& when (@variationFlyoutActions) {
+  /*--------------
+     Actions
+  ---------------*/
+  .ui.flyout > .actions {
+    background: @actionBackground;
+    padding: @actionPadding;
+    border-top: @actionBorder;
+    text-align: @actionAlign;
+  }
+  .ui.flyout .actions > .button:not(.fluid) {
+    margin-left: @buttonDistance;
+  }
+  & when (@variationFlyoutBasic) {
+    .ui.ui.flyout > .basic.actions {
+      border-top: none;
+    }
+  }
+  & when (@variationFlyoutLeftActions) {
+    .ui.flyout > .left.actions {
+      text-align: left;
+      & > .button:not(.fluid) {
+        margin-left: @buttonLeftDistance;
+        margin-right: @buttonLeftDistance;
+      }
+    }
+  }
 }
-.ui.flyout .actions > .button:not(.fluid) {
-  margin-left: 0.75em;
+& when (@variationFlyoutCentered) {
+  .ui.flyout > .centered,
+  .ui.flyout > .center.aligned {
+    text-align: center;
+    &.actions > .button:not(.fluid) when (@variationFlyoutActions){
+      margin-left: @buttonCenteredDistance;
+      margin-right: @buttonCenteredDistance;
+    }
+  }
+}
+& when (@variationFlyoutBasic) {
+  .ui.ui.flyout > .basic.header,
+  .ui.ui.flyout > .basic.actions {
+    background-color: transparent;
+  }
+  .ui.flyout > .basic.header {
+    border-bottom: none;
+  }
 }
 
 /*--------------
@@ -199,7 +236,7 @@ body.pushable {
 }
 .pushable:not(body) > .ui.flyout,
 .pushable:not(body) > .fixed,
-.pushable:not(body) > .pusher:after {
+.pushable:not(body) > .pusher::after {
   position: absolute;
 }
 
@@ -224,13 +261,15 @@ body.pushable {
 .pushable > .pusher {
   position: relative;
   backface-visibility: hidden;
-  overflow: hidden;
   min-height: 100%;
   transition: transform @duration @easing;
   z-index: @middleLayer;
 
   /* Pusher should inherit background from context */
   background: inherit;
+  &:not(.overflowing) {
+    overflow: hidden;
+  }
 }
 
 body.pushable > .pusher {
@@ -241,7 +280,7 @@ body.pushable > .pusher {
      Dimmer
 ---------------*/
 
-.pushable > .pusher:after {
+.pushable > .pusher::after {
   position: fixed;
   top: 0;
   right: 0;
@@ -270,12 +309,21 @@ body.pushable > .pusher {
      Dimmed
 ---------------*/
 
-.pushable > .pusher.dimmed:after {
+.pushable > .pusher.dimmed::after {
   width: 100% !important;
   height: 100% !important;
   opacity: 1 !important;
 }
-
+& when (@variationFlyoutBlurring) {
+  .pushable > .pusher.dimmed.blurring:not(.closing)::after {
+    background: @blurredBackgroundColor;
+    -webkit-backdrop-filter: @blurredEndFilter;
+    backdrop-filter: @blurredEndFilter;
+  }
+}
+.pushable > .pusher.closing.dimmed::after {
+  opacity: 0 !important;
+}
 /*--------------
     Animating
 ---------------*/
@@ -343,30 +391,28 @@ body.pushable > .pusher {
   }
 }
 
-/*--------------
-       iOS
----------------*/
-
-/*--------------
-     Inverted
----------------*/
-.ui.flyout.inverted {
-  background: rgba(0, 0, 0, 0.9);
-}
+& when (@variationFlyoutInverted) {
+  /*--------------
+       Inverted
+  ---------------*/
+  .ui.flyout.inverted {
+    background: @invertedBackground;
+  }
 
-.ui.flyout.inverted > .close {
-  color: #FFFFFF;
-}
+  .ui.flyout.inverted > .close {
+    color: @invertedCloseColor;
+  }
 
-.ui.flyout.inverted > .header,
-.ui.flyout.inverted > .content {
-  background: rgba(0, 0, 0, 0.9);
-  color: #FFFFFF;
-}
-.ui.flyout.inverted > .actions {
-  background: #191A1B;
-  border-top: 1px solid rgba(34, 36, 38, 0.85);
-  color: #FFFFFF;
+  .ui.flyout.inverted > .header,
+  .ui.flyout.inverted > .content {
+    background: @invertedBackground;
+    color: @invertedHeaderColor;
+  }
+  .ui.flyout.inverted > .actions {
+    background: @invertedActionBackground;
+    border-top: @invertedActionBorder;
+    color: @invertedActionColor;
+  }
 }
 
 /*******************************
@@ -379,6 +425,10 @@ body.pushable > .pusher {
 
 /* Left / Right */
 & when (@variationFlyoutLeft) or (@variationFlyoutRight) {
+  .ui.left.flyout,
+  .ui.right.flyout {
+    width: @width;
+  }
   & when (@variationFlyoutThin) {
     .ui.thin.left.flyout,
     .ui.thin.right.flyout {
@@ -391,11 +441,6 @@ body.pushable > .pusher {
     }
   }
 
-  .ui.left.flyout,
-  .ui.right.flyout {
-    width: @width;
-  }
-
   & when (@variationFlyoutWide) {
     .ui.wide.left.flyout,
     .ui.wide.right.flyout {
@@ -462,10 +507,11 @@ body.pushable > .pusher {
     }
   }
 
-  /* Fullscreen */
-
-  .ui.fullscreen.flyout {
-    width: 100%;
+  & when (@variationFlyoutFullscreen) {
+    /* Fullscreen */
+    .ui.fullscreen.flyout {
+      width: 100%;
+    }
   }
 
 

package/src/definitions/modules/modal.less

@@ -181,7 +181,7 @@
   .ui.modal .actions > .button:not(.fluid) {
     margin-left: @buttonDistance;
   }
-  .ui.modal > .basic.actions,
+  .ui.ui.modal > .basic.actions,
   .ui.basic.modal > .actions {
     border-top: none;
   }
@@ -344,8 +344,8 @@
     box-shadow: none !important;
     color: @basicModalColor;
   }
-  .ui.modal > .basic.header,
-  .ui.modal > .basic.actions,
+  .ui.ui.modal > .basic.header,
+  .ui.ui.modal > .basic.actions,
   .ui.basic.modal > .header,
   .ui.basic.modal > .content,
   .ui.basic.modal > .actions {

package/src/definitions/modules/sidebar.js

@@ -67,7 +67,7 @@ $.fn.sidebar = function(parameters) {
         moduleNamespace = 'module-' + namespace,
 
         $module         = $(this),
-        $context        = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $body,
+        $context        = [window,document].indexOf(settings.context) < 0 ? $document.find(settings.context) : $body,
         isBody          = $context[0] === $body[0],
 
         $sidebars       = $module.children(selector.sidebar),
@@ -305,8 +305,8 @@ $.fn.sidebar = function(parameters) {
 
         refresh: function() {
           module.verbose('Refreshing selector cache');
-          $context  = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context);
-          $sidebars = $context.children(selector.sidebar);
+          $context  = [window,document].indexOf(settings.context) < 0 ? $document.find(settings.context) : $body;
+          module.refreshSidebars();
           $pusher   = $context.children(selector.pusher);
           $fixed    = $context.children(selector.fixed);
           module.clear.cache();
@@ -401,7 +401,6 @@ $.fn.sidebar = function(parameters) {
               module.verbose('Show callback returned false cancelling show');
               return;
             }
-            module.refreshSidebars();
             if(settings.overlay)  {
               module.error(error.overlay);
               settings.transition = 'overlay';
@@ -423,6 +422,7 @@ $.fn.sidebar = function(parameters) {
                 settings.transition = 'overlay';
               }
             }
+            module.set.dimmerStyles();
             module.pushPage(function() {
               callback.call(element);
               settings.onVisible.call(element);
@@ -555,20 +555,24 @@ $.fn.sidebar = function(parameters) {
           animate = function() {
             module.set.transition(transition);
             module.set.animating();
-            module.remove.visible();
             if(settings.dimPage && !module.othersVisible()) {
-              $pusher.removeClass(className.dimmed);
+              module.set.closing();
             }
+            module.remove.visible();
           };
           transitionEnd = function(event) {
             if( event.target == $transition[0] ) {
               $transition.off(transitionEvent + elementNamespace, transitionEnd);
               module.remove.animating();
+              module.remove.closing();
               module.remove.transition();
               module.remove.inlineCSS();
               if(transition === 'scale down' || settings.returnScroll) {
                 module.scrollBack();
               }
+              if(settings.dimPage && !module.othersVisible()) {
+                $pusher.removeClass(className.dimmed);
+              }
               callback.call(element);
             }
           };
@@ -606,6 +610,14 @@ $.fn.sidebar = function(parameters) {
               el.css(attribute, 'calc(' + el.css(attribute) + ' + ' + tempBodyMargin + 'px)');
             });
           },
+          dimmerStyles: function() {
+            if(settings.blurring) {
+              $pusher.addClass(className.blurring);
+            }
+            else {
+              $pusher.removeClass(className.blurring);
+            }
+          },
           // ios only (scroll on html not document). This prevent auto-resize canvas/scroll in ios
           // (This is no longer necessary in latest iOS)
           ios: function() {
@@ -632,6 +644,9 @@ $.fn.sidebar = function(parameters) {
           animating: function() {
             $module.addClass(className.animating);
           },
+          closing: function() {
+            $pusher.addClass(className.closing);
+          },
           transition: function(transition) {
             transition = transition || module.get.transition();
             $module.addClass(transition);
@@ -676,6 +691,9 @@ $.fn.sidebar = function(parameters) {
           animating: function() {
             $module.removeClass(className.animating);
           },
+          closing: function() {
+            $pusher.removeClass(className.closing);
+          },
           transition: function(transition) {
             transition = transition || module.get.transition();
             $module.removeClass(transition);
@@ -1073,6 +1091,8 @@ $.fn.sidebar.settings = {
   className         : {
     active    : 'active',
     animating : 'animating',
+    blurring  : 'blurring',
+    closing   : 'closing',
     dimmed    : 'dimmed',
     ios       : 'ios',
     locked    : 'locked',

package/src/definitions/modules/sidebar.less

@@ -198,6 +198,17 @@ body.pushable > .pusher {
   height: 100% !important;
   opacity: 1 !important;
 }
+& when (@variationSidebarBlurring) {
+  .pushable > .pusher.dimmed.blurring:not(.closing)::after {
+    background: @blurredBackgroundColor;
+    -webkit-backdrop-filter: @blurredEndFilter;
+    backdrop-filter: @blurredEndFilter;
+
+  }
+}
+.pushable > .pusher.closing.dimmed::after {
+  opacity: 0 !important;
+}
 
 /*--------------
     Animating

package/src/themes/default/globals/variation.variables

@@ -551,6 +551,13 @@
 @variationEmbedRatio: true;
 
 /* Flyout */
+@variationFlyoutInverted: true;
+@variationFlyoutBasic: true;
+@variationFlyoutFullscreen: true;
+@variationFlyoutCentered: true;
+@variationFlyoutActions: true;
+@variationFlyoutLeftActions: true;
+@variationFlyoutBlurring: true;
 @variationFlyoutColumnWidth: true;
 @variationFlyoutThin: true;
 @variationFlyoutWide: true;
@@ -660,6 +667,7 @@
 @variationSidebarScale: true;
 @variationSidebarPush: true;
 @variationSidebarUncover: true;
+@variationSidebarBlurring: true;
 
 /* Slider */
 @variationSliderInverted: true;

package/src/themes/default/modules/flyout.variables

@@ -13,7 +13,10 @@
 
 /* Dimmer */
 @dimmerColor: rgba(0, 0, 0, 0.4);
-@dimmerTransition: opacity @duration;
+@dimmerTransition: all @duration;
+
+@blurredBackgroundColor: rgba(0, 0, 0, 0.6);
+@blurredEndFilter: e("blur(5px) grayscale(0.7)");
 
 /* Color below page */
 @canvasBackground: @lightBlack;
@@ -30,6 +33,48 @@
 @topLayer: 102;
 @dimmerLayer: 1000;
 
+/* Actions */
+@actionBorder: 1px solid @borderColor;
+@actionBackground: @offWhite;
+@actionPadding: 1rem 1rem;
+@actionAlign: right;
+
+@buttonDistance: 0.75em;
+@buttonCenteredDistance: 0.5em;
+@buttonLeftDistance: @buttonCenteredDistance;
+
+/* Scrolling Content */
+@contentMinHeight: calc(100vh - 9.1rem);
+@scrollingContentMaxHeight: @contentMinHeight;
+@scrollingContentMaxHeightTopBottom: calc(80vh - 9.1rem);
+
+/* Close Icon */
+@closeOpacity: 0.8;
+@closeSize: 1.25em;
+@closeColor: @darkTextColor;
+
+@closeHitbox: 2.25rem;
+@closePadding: 0;
+@closeMargin: 0 0 0 0.25rem;
+@closeTop: 1.25rem;
+@closeRight: 1.5rem;
+
+/* Header */
+@headerMargin: 0;
+@headerVerticalPadding: 1.25rem;
+@headerHorizontalPadding: 1.5rem;
+@headerPadding: @headerVerticalPadding @headerHorizontalPadding;
+@headerBackground: @white;
+@headerColor: @darkTextColor;
+@headerBoxShadow: none;
+@headerBorder: 1px solid @borderColor;
+
+/* Content */
+@contentFontSize: 1em;
+@contentPadding: 1.5rem;
+@contentLineHeight: 1.4;
+@contentBackground: @white;
+
 /*-------------------
       Variations
 --------------------*/
@@ -43,3 +88,13 @@
 
 /* Height */
 @height: 36px;
+
+/*-------------------
+      Inverted
+--------------------*/
+@invertedBackground: @fullBlack;
+@invertedCloseColor: @white;
+@invertedHeaderColor: @white;
+@invertedActionBackground: #191A1B;
+@invertedActionBorder: 1px solid rgba(34, 36, 38, 0.85);
+@invertedActionColor: @white;

package/src/themes/default/modules/modal.variables

@@ -48,7 +48,7 @@
 @contentFontSize: 1em;
 @contentPadding: 1.5rem;
 @contentLineHeight: 1.4;
-@contentBackground: #FFFFFF;
+@contentBackground: @white;
 
 /* Image / Description */
 @imageWidth: '';
@@ -249,7 +249,7 @@
 /*-------------------
       Inverted
 --------------------*/
-@invertedBackground: rgba(0,0,0,.9);
+@invertedBackground: @fullBlack;
 @invertedCloseColor: @white;
 @invertedHeaderColor: @white;
 @invertedHeaderBackgroundColor: @darkTextColor;

package/src/themes/default/modules/sidebar.variables

@@ -13,7 +13,10 @@
 
 /* Dimmer */
 @dimmerColor: rgba(0, 0, 0, 0.4);
-@dimmerTransition: opacity @duration;
+@dimmerTransition: all @duration;
+
+@blurredBackgroundColor: rgba(0, 0, 0, 0.6);
+@blurredEndFilter: e("blur(5px) grayscale(0.7)");
 
 /* Color below page */
 @canvasBackground: @lightBlack;