fomantic-ui 2.9.0-beta.99 → 2.9.0

package/src/definitions/elements/segment.less

@@ -198,10 +198,10 @@
   .ui.piled.segment:last-child {
     margin-bottom: 0;
   }
-  .ui.piled.segments:after,
-  .ui.piled.segments:before,
-  .ui.piled.segment:after,
-  .ui.piled.segment:before {
+  .ui.piled.segments::after,
+  .ui.piled.segments::before,
+  .ui.piled.segment::after,
+  .ui.piled.segment::before {
     background-color: @white;
     visibility: visible;
     content: '';
@@ -213,14 +213,14 @@
     border: @piledBorder;
     box-shadow: @piledBoxShadow;
   }
-  .ui.piled.segments:before,
-  .ui.piled.segment:before {
+  .ui.piled.segments::before,
+  .ui.piled.segment::before {
     transform: rotate(-@piledDegrees);
     top: 0;
     z-index: -2;
   }
-  .ui.piled.segments:after,
-  .ui.piled.segment:after {
+  .ui.piled.segments::after,
+  .ui.piled.segment::after {
     transform: rotate(@piledDegrees);
     top: 0;
     z-index: -1;
@@ -252,10 +252,10 @@
   .ui.stacked.segment {
     padding-bottom: @stackedPadding;
   }
-  .ui.stacked.segments:before,
-  .ui.stacked.segments:after,
-  .ui.stacked.segment:before,
-  .ui.stacked.segment:after {
+  .ui.stacked.segments::before,
+  .ui.stacked.segments::after,
+  .ui.stacked.segment::before,
+  .ui.stacked.segment::after {
     content: '';
     position: absolute;
     bottom: -(@stackedHeight / 2);
@@ -268,23 +268,23 @@
     height: @stackedHeight;
     visibility: visible;
   }
-  .ui.stacked.segments:before,
-  .ui.stacked.segment:before {
+  .ui.stacked.segments::before,
+  .ui.stacked.segment::before {
     display: none;
   }
 
   /* Add additional page */
-  .ui.tall.stacked.segments:before,
-  .ui.tall.stacked.segment:before {
+  .ui.tall.stacked.segments::before,
+  .ui.tall.stacked.segment::before {
     display: block;
     bottom: 0;
   }
   & when (@variationSegmentInverted) {
     /* Inverted */
-    .ui.stacked.inverted.segments:before,
-    .ui.stacked.inverted.segments:after,
-    .ui.stacked.inverted.segment:before,
-    .ui.stacked.inverted.segment:after {
+    .ui.stacked.inverted.segments::before,
+    .ui.stacked.inverted.segments::after,
+    .ui.stacked.inverted.segment::before,
+    .ui.stacked.inverted.segment::after {
       background-color: @subtleTransparentBlack;
       border-top: 1px solid @selectedBorderColor;
     }
@@ -438,10 +438,10 @@
       flex-direction: row;
       background-color: transparent;
       padding: 0;
-      box-shadow: @boxShadow;
-      margin: @margin;
-      border-radius: @borderRadius;
-      border: @border;
+      box-shadow: @groupedBoxShadow;
+      margin: @groupedMargin;
+      border-radius: @groupedBorderRadius;
+      border: @groupedBorder;
     }
     .ui.stackable.horizontal.segments {
       flex-wrap: wrap;
@@ -460,7 +460,9 @@
     /* Horizontal Segment */
     .ui.horizontal.segments:not(.compact) > .segment:not(.compact) {
       flex: 1 1 auto;
-      -ms-flex: 1 1 0; /* Solves #2550 MS Flex */
+      & when (@supportIE) {
+        -ms-flex: 1 1 0; /* Solves #2550 MS Flex */
+      }
     }
     .ui.horizontal.segments > .segment {
       margin: 0;
@@ -523,8 +525,8 @@
     user-select: none;
     transition: all 0s linear;
   }
-  .ui.loading.segments:before,
-  .ui.loading.segment:before {
+  .ui.loading.segments::before,
+  .ui.loading.segment::before {
     position: absolute;
     content: '';
     top: 0;
@@ -535,8 +537,8 @@
     border-radius: @borderRadius;
     z-index: @loaderDimmerZIndex;
   }
-  .ui.loading.segments:after,
-  .ui.loading.segment:after {
+  .ui.loading.segments::after,
+  .ui.loading.segment::after {
     position: absolute;
     content: '';
     top: 50%;
@@ -582,7 +584,7 @@
          Clearing
   --------------------*/
 
-  .ui.clearing.segment:after {
+  .ui.clearing.segment::after {
     content: "";
     display: block;
     clear: both;
@@ -668,7 +670,7 @@
   }
   & when (@variationSegmentAttached) {
     /* Attached */
-    .ui.inverted.attached.segment {
+    .ui.ui.inverted.attached.segment {
       border-color: @solidWhiteBorderColor;
     }
   }
@@ -678,8 +680,8 @@
     .ui.inverted.loading.segment {
       color: @invertedLoaderLineColor;
     }
-    .ui.inverted.loading.segments:before,
-    .ui.inverted.loading.segment:before {
+    .ui.inverted.loading.segments::before,
+    .ui.inverted.loading.segment::before {
       background: @loaderInvertedDimmerColor;
     }
   }
@@ -730,7 +732,9 @@
     width: @attachedWidth;
     max-width: @attachedWidth;
     box-shadow: @attachedBoxShadow;
-    border: @attachedBorder;
+    &:not(.basic) {
+      border: @attachedBorder;
+    }
   }
   .ui.attached:not(.message):not(.text) + .ui.attached.segment:not(.top) {
     border-top: none;
@@ -783,6 +787,115 @@
   }
 }
 
+& when (@variationSegmentScrolling) {
+  /*--------------
+    Scrolling
+  ---------------*/
+  .ui.scrolling.segment {
+    overflow: auto;
+  }
+  @media only screen and (max-width : @largestMobileScreen) {
+    & when (@variationSegmentScrollingShort) {
+      .ui.scrolling.segment.short {
+        max-height: @scrollingMobileMaxHeight * 0.75;
+      }
+    }
+    & when (@variationSegmentScrollingVeryShort) {
+      .ui.scrolling.segment[class*="very short"] {
+        max-height: @scrollingMobileMaxHeight * 0.5;
+      }
+    }
+    .ui.scrolling.segment {
+      max-height: @scrollingMobileMaxHeight;
+    }
+    & when (@variationSegmentScrollingLong) {
+      .ui.scrolling.segment.long {
+        max-height: @scrollingMobileMaxHeight * 2;
+      }
+    }
+    & when (@variationSegmentScrollingVeryLong) {
+      .ui.scrolling.segment[class*="very long"] {
+        max-height: @scrollingMobileMaxHeight * 3;
+      }
+    }
+  }
+
+  @media only screen and (min-width: @tabletBreakpoint) {
+    & when (@variationSegmentScrollingShort) {
+      .ui.scrolling.segment.short {
+        max-height: @scrollingTabletMaxHeight * 0.75;
+      }
+    }
+    & when (@variationSegmentScrollingVeryShort) {
+      .ui.scrolling.segment[class*="very short"] {
+        max-height: @scrollingTabletMaxHeight * 0.5;
+      }
+    }
+    .ui.scrolling.segment {
+      max-height: @scrollingTabletMaxHeight;
+    }
+    & when (@variationSegmentScrollingLong) {
+      .ui.scrolling.segment.long {
+        max-height: @scrollingTabletMaxHeight * 2;
+      }
+    }
+    & when (@variationSegmentScrollingVeryLong) {
+      .ui.scrolling.segment[class*="very long"] {
+        max-height: @scrollingTabletMaxHeight * 3;
+      }
+    }
+  }
+  @media only screen and (min-width: @computerBreakpoint) {
+    & when (@variationSegmentScrollingShort) {
+      .ui.scrolling.segment.short {
+        max-height: @scrollingComputerMaxHeight * 0.75;
+      }
+    }
+    & when (@variationSegmentScrollingVeryShort) {
+      .ui.scrolling.segment[class*="very short"] {
+        max-height: @scrollingComputerMaxHeight * 0.5;
+      }
+    }
+    .ui.scrolling.segment {
+      max-height: @scrollingComputerMaxHeight;
+    }
+    & when (@variationSegmentScrollingLong) {
+      .ui.scrolling.segment.long {
+        max-height: @scrollingComputerMaxHeight * 2;
+      }
+    }
+    & when (@variationSegmentScrollingVeryLong) {
+      .ui.scrolling.segment[class*="very long"]{
+        max-height: @scrollingComputerMaxHeight * 3;
+      }
+    }
+  }
+  @media only screen and (min-width: @widescreenMonitorBreakpoint) {
+    & when (@variationSegmentScrollingShort) {
+      .ui.scrolling.segment.short {
+        max-height: @scrollingWidescreenMaxHeight * 0.75;
+      }
+    }
+    & when (@variationSegmentScrollingVeryShort) {
+      .ui.scrolling.segment[class*="very short"] {
+        max-height: @scrollingWidescreenMaxHeight * 0.5;
+      }
+    }
+    .ui.scrolling.segment {
+      max-height: @scrollingWidescreenMaxHeight;
+    }
+    & when (@variationSegmentScrollingLong) {
+      .ui.scrolling.segment.long {
+        max-height: @scrollingWidescreenMaxHeight * 2;
+      }
+    }
+    & when (@variationSegmentScrollingVeryLong) {
+      .ui.scrolling.segment[class*="very long"] {
+        max-height: @scrollingWidescreenMaxHeight * 3;
+      }
+    }
+  }
+}
 /*-------------------
         Size
 --------------------*/

package/src/definitions/elements/step.less

@@ -78,7 +78,7 @@
 }
 
 /* Arrow */
-.ui.steps .step:after {
+.ui.steps .step::after {
   display: none;
   position: absolute;
   z-index: 2;
@@ -179,7 +179,7 @@
   .ui.ordered.steps {
     counter-reset: ordered;
   }
-  .ui.ordered.steps .step:before {
+  .ui.ordered.steps .step::before {
     display: block;
     position: static;
     text-align: center;
@@ -229,26 +229,26 @@
 
 
   /* Arrow */
-  .ui.vertical.steps .step:after {
+  .ui.vertical.steps .step::after {
     top: @verticalArrowTopOffset;
     right: @verticalArrowRightOffset;
     border-width: @verticalArrowBorderWidth;
     display: @verticalArrowDisplay;
   }
-  .ui.right.vertical.steps .step:after {
+  .ui.right.vertical.steps .step::after {
     border-width: @verticalLeftArrowBorderWidth;
     left: @verticalLeftArrowLeftOffset;
     right: @verticalLeftArrowRightOffset;
     transform: translateY(-50%) translateX(-50%) rotate(-45deg);
   }
 
-  .ui.vertical.steps .active.step:after {
+  .ui.vertical.steps .active.step::after {
     display: @verticalActiveArrowDisplay;
   }
-  .ui.vertical.steps .step:last-child:after {
+  .ui.vertical.steps .step:last-child::after {
     display: @verticalLastArrowDisplay;
   }
-  .ui.vertical.steps .active.step:last-child:after {
+  .ui.vertical.steps .active.step:last-child::after {
     display: @verticalActiveLastArrowDisplay;
   }
 }
@@ -284,14 +284,14 @@
   }
 
   /* Arrow */
-  .ui.steps:not(.unstackable) .step:after {
+  .ui.steps:not(.unstackable) .step::after {
     top: unset;
     bottom: -@arrowSize;
     right: 50%;
     transform: translateY(-50%) translateX(50%) rotate(45deg);
   }
   & when (@variationStepVertical) {
-    .ui.vertical.steps .active.step:last-child:after {
+    .ui.vertical.steps .active.step:last-child::after {
       display: none;
     }
   }
@@ -302,7 +302,7 @@
 
   /* Icon */
   .ui.steps:not(.unstackable) .step > i.icon,
-  .ui.ordered.steps:not(.unstackable) .step:before {
+  .ui.ordered.steps:not(.unstackable) .step::before {
     margin: 0 0 @mobileIconDistance 0;
   }
 
@@ -335,28 +335,28 @@
   cursor: auto;
   background: @activeBackground;
 }
-.ui.steps .step.active:after {
+.ui.steps .step.active::after {
   background: @activeBackground;
 }
 .ui.steps .step.active .title {
   color: @activeColor;
 }
-.ui.ordered.steps .step.active:before,
+.ui.ordered.steps .step.active::before,
 .ui.steps .active.step i.icon {
   color: @activeIconColor;
 }
 
 /* Active Arrow */
-.ui.steps .step:after {
+.ui.steps .step::after {
   display: @arrowDisplay;
 }
-.ui.steps .active.step:after {
+.ui.steps .active.step::after {
   display: @activeArrowDisplay;
 }
-.ui.steps .step:last-child:after {
+.ui.steps .step:last-child::after {
   display: @lastArrowDisplay;
 }
-.ui.steps .active.step:last-child:after {
+.ui.steps .active.step:last-child::after {
   display: @activeLastArrowDisplay;
 }
 
@@ -371,8 +371,8 @@
 }
 
 /* Completed */
-.ui.steps .step.completed > i.icon:before,
-.ui.ordered.steps .step.completed:before {
+.ui.steps .step.completed > i.icon::before,
+.ui.ordered.steps .step.completed::before {
   color: @completedColor;
 }
 
@@ -388,7 +388,7 @@
   .ui.steps .disabled.step .description {
     color: @disabledColor;
   }
-  .ui.steps .disabled.step:after {
+  .ui.steps .disabled.step::after {
     background: @disabledBackground;
   }
 }
@@ -430,7 +430,7 @@
     }
 
     /* Arrow */
-    .ui[class*="tablet stackable"].steps .step:after {
+    .ui[class*="tablet stackable"].steps .step::after {
       top: unset;
       bottom: -@arrowSize;
       right: 50%;
@@ -444,7 +444,7 @@
 
     /* Icon */
     .ui[class*="tablet stackable"].steps .step > i.icon,
-    .ui[class*="tablet stackable"].ordered.steps .step:before {
+    .ui[class*="tablet stackable"].ordered.steps .step::before {
       margin: 0 0 @mobileIconDistance 0;
     }
 
@@ -579,7 +579,7 @@
     border-color: @solidWhiteBorderColor;
   }
 
-  .ui.inverted.steps .step:after {
+  .ui.inverted.steps .step::after {
     background-color: @black;
     border-color: @solidWhiteBorderColor;
   }
@@ -590,10 +590,10 @@
 
   /* Active */
   .ui.inverted.steps .step.active,
-  .ui.inverted.steps .step.active:after {
+  .ui.inverted.steps .step.active::after {
     background: @invertedActiveBackground;
   }
-  .ui.inverted.ordered.steps .step.active:before,
+  .ui.inverted.ordered.steps .step.active::before,
   .ui.inverted.steps .active.step i.icon {
     color: @invertedSelectedTextColor;
   }
@@ -601,7 +601,7 @@
   & when (@variationStepDisabled) {
     /* Disabled */
     .ui.inverted.steps .disabled.step,
-    .ui.inverted.steps .disabled.step:after {
+    .ui.inverted.steps .disabled.step::after {
       background: @invertedDisabledBackground;
     }
     .ui.inverted.steps .disabled.step,

package/src/definitions/globals/reset.less

@@ -23,8 +23,8 @@
 
 /* Border-Box */
 *,
-*:before,
-*:after {
+*::before,
+*::after {
   box-sizing: inherit;
 }
 html {

package/src/definitions/globals/site.js

@@ -359,7 +359,7 @@ $.site = $.fn.site = 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;

package/src/definitions/globals/site.less

@@ -153,12 +153,13 @@ a:hover {
     background: @thumbHoverBackground;
   }
   body .ui {
-    /* IE11 */
-    scrollbar-face-color: @thumbBackgroundHex;
-    scrollbar-shadow-color: @thumbBackgroundHex;
-    scrollbar-track-color: @trackBackgroundHex;
-    scrollbar-arrow-color: @trackBackgroundHex;
-
+    & when (@supportIE) {
+      /* IE11 */
+      scrollbar-face-color: @thumbBackgroundHex;
+      scrollbar-shadow-color: @thumbBackgroundHex;
+      scrollbar-track-color: @trackBackgroundHex;
+      scrollbar-arrow-color: @trackBackgroundHex;
+    }
     /* firefox : first color thumb, second track*/
     scrollbar-color:  @thumbBackground @trackBackground;
     scrollbar-width: thin;
@@ -179,12 +180,13 @@ a:hover {
   }
 
   body .ui.inverted:not(.dimmer) {
-    /* IE11 */
-    scrollbar-face-color: @thumbInvertedBackgroundHex;
-    scrollbar-shadow-color: @thumbInvertedBackgroundHex;
-    scrollbar-track-color: @trackInvertedBackgroundHex;
-    scrollbar-arrow-color: @trackInvertedBackgroundHex;
-
+    & when (@supportIE) {
+      /* IE11 */
+      scrollbar-face-color: @thumbInvertedBackgroundHex;
+      scrollbar-shadow-color: @thumbInvertedBackgroundHex;
+      scrollbar-track-color: @trackInvertedBackgroundHex;
+      scrollbar-arrow-color: @trackInvertedBackgroundHex;
+    }
     /* firefox : first color thumb, second track */
     scrollbar-color:  @thumbInvertedBackground @trackInvertedBackground;
   }

package/src/definitions/modules/accordion.js

@@ -117,8 +117,10 @@ $.fn.accordion = function(parameters) {
         },
 
         event: {
-          click: function() {
-            module.toggle.call(this);
+          click: function(event) {
+            if($(event.target).closest(selector.ignore).length === 0) {
+              module.toggle.call(this);
+            }
           }
         },
 
@@ -188,6 +190,7 @@ $.fn.accordion = function(parameters) {
                     useFailSafe      : true,
                     debug            : settings.debug,
                     verbose          : settings.verbose,
+                    silent           : settings.silent,
                     duration         : settings.duration,
                     skipInlineHidden : true,
                     onComplete: function() {
@@ -253,6 +256,7 @@ $.fn.accordion = function(parameters) {
                       useFailSafe      : true,
                       debug            : settings.debug,
                       verbose          : settings.verbose,
+                      silent           : settings.silent,
                       duration         : settings.duration,
                       skipInlineHidden : true
                     })
@@ -323,6 +327,7 @@ $.fn.accordion = function(parameters) {
                       useFailSafe      : true,
                       debug            : settings.debug,
                       verbose          : settings.verbose,
+                      silent           : settings.silent,
                       duration         : settings.duration,
                       skipInlineHidden : true
                     })
@@ -491,7 +496,7 @@ $.fn.accordion = 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;
@@ -602,6 +607,7 @@ $.fn.accordion.settings = {
     accordion : '.accordion',
     title     : '.title',
     trigger   : '.title',
+    ignore    : '.ui.dropdown',
     content   : '.content'
   }