fomantic-ui 2.9.0-beta.29 → 2.9.0-beta.292

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,16 @@
   }
 
   /* 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);
   }
-  .ui.vertical.steps .active.step:last-child:after {
-    display: none;
+  & when (@variationStepVertical) {
+    .ui.vertical.steps .active.step:last-child::after {
+      display: none;
+    }
   }
   /* Content */
   .ui.steps:not(.unstackable) .step .content {
@@ -300,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;
   }
 
@@ -333,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;
 }
 
@@ -369,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;
 }
 
@@ -386,7 +388,7 @@
   .ui.steps .disabled.step .description {
     color: @disabledColor;
   }
-  .ui.steps .disabled.step:after {
+  .ui.steps .disabled.step::after {
     background: @disabledBackground;
   }
 }
@@ -428,7 +430,7 @@
     }
 
     /* Arrow */
-    .ui[class*="tablet stackable"].steps .step:after {
+    .ui[class*="tablet stackable"].steps .step::after {
       top: unset;
       bottom: -@arrowSize;
       right: 50%;
@@ -442,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;
     }
 
@@ -493,53 +495,55 @@
   }
 }
 
-/*-------------------
-    Evenly Divided
---------------------*/
+& when (@variationStepEqualWidth) {
+  /*-------------------
+      Evenly Divided
+  --------------------*/
 
-.ui.one.steps,
-.ui.two.steps,
-.ui.three.steps,
-.ui.four.steps,
-.ui.five.steps,
-.ui.six.steps,
-.ui.seven.steps,
-.ui.eight.steps {
-  width: 100%;
-}
-.ui.one.steps > .step,
-.ui.two.steps > .step,
-.ui.three.steps > .step,
-.ui.four.steps > .step,
-.ui.five.steps > .step,
-.ui.six.steps > .step,
-.ui.seven.steps > .step,
-.ui.eight.steps > .step {
-  flex-wrap: nowrap;
-}
-.ui.one.steps > .step {
-  width: 100%;
-}
-.ui.two.steps > .step {
-  width: 50%;
-}
-.ui.three.steps > .step {
-  width: 33.333%;
-}
-.ui.four.steps > .step {
-  width: 25%;
-}
-.ui.five.steps > .step {
-  width: 20%;
-}
-.ui.six.steps > .step {
-  width: 16.666%;
-}
-.ui.seven.steps > .step {
-  width: 14.285%;
-}
-.ui.eight.steps > .step {
-  width: 12.500%;
+  .ui.one.steps,
+  .ui.two.steps,
+  .ui.three.steps,
+  .ui.four.steps,
+  .ui.five.steps,
+  .ui.six.steps,
+  .ui.seven.steps,
+  .ui.eight.steps {
+    width: 100%;
+  }
+  .ui.one.steps > .step,
+  .ui.two.steps > .step,
+  .ui.three.steps > .step,
+  .ui.four.steps > .step,
+  .ui.five.steps > .step,
+  .ui.six.steps > .step,
+  .ui.seven.steps > .step,
+  .ui.eight.steps > .step {
+    flex-wrap: nowrap;
+  }
+  .ui.one.steps > .step {
+    width: 100%;
+  }
+  .ui.two.steps > .step {
+    width: 50%;
+  }
+  .ui.three.steps > .step {
+    width: 33.333%;
+  }
+  .ui.four.steps > .step {
+    width: 25%;
+  }
+  .ui.five.steps > .step {
+    width: 20%;
+  }
+  .ui.six.steps > .step {
+    width: 16.666%;
+  }
+  .ui.seven.steps > .step {
+    width: 14.285%;
+  }
+  .ui.eight.steps > .step {
+    width: 12.500%;
+  }
 }
 
 /*-------------------
@@ -575,7 +579,7 @@
     border-color: @solidWhiteBorderColor;
   }
 
-  .ui.inverted.steps .step:after {
+  .ui.inverted.steps .step::after {
     background-color: @black;
     border-color: @solidWhiteBorderColor;
   }
@@ -586,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;
   }
@@ -597,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/elements/text.less

@@ -26,24 +26,26 @@ span.ui.text {
   line-height: @lineHeight;
 }
 
-each(@colors, {
-  @color: replace(@key, '@', '');
-  @c: @colors[@@color][color];
-  @l: @colors[@@color][light];
+& when not (@variationTextColors = false) {
+  each(@variationTextColors, {
+    @color: @value;
+    @c: @colors[@@color][color];
+    @l: @colors[@@color][light];
 
-  span.ui.@{color}.text {
-    color: @c;
-  }
-  & when (@variationTextInverted) {
-    span.ui.inverted.@{color}.text {
-      color: @l;
+    span.ui.@{color}.text {
+      color: @c;
     }
-  }
-})
+    & when (@variationTextInverted) {
+      span.ui.inverted.@{color}.text {
+        color: @l;
+      }
+    }
+  })
+}
 
-& when (@variationTextStates) {
-  each(@textStates, {
-    @state: replace(@key, '@', '');
+& when not (@variationTextStates = false) {
+  each(@variationTextStates, {
+    @state: @value;
     @c: @textStates[@@state][color];
 
     span.ui.@{state}.text {

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.less

@@ -128,7 +128,7 @@ a:hover {
          Scrollbars
 *******************************/
 
-.addScrollbars() when (@useCustomScrollbars) {
+& when (@useCustomScrollbars) {
 
   /* Force Simple Scrollbars */
   body ::-webkit-scrollbar {
@@ -152,6 +152,18 @@ a:hover {
   body ::-webkit-scrollbar-thumb:hover {
     background: @thumbHoverBackground;
   }
+  body .ui {
+    & 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;
+  }
 
   /* Inverted UI */
   body .ui.inverted:not(.dimmer)::-webkit-scrollbar-track {
@@ -166,6 +178,18 @@ a:hover {
   body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:hover {
     background: @thumbInvertedHoverBackground;
   }
+
+  body .ui.inverted:not(.dimmer) {
+    & 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;
+  }
 }
 
 /*******************************
@@ -203,5 +227,4 @@ input::selection {
   color: @inputHighlightColor;
 }
 
-.addScrollbars();
 .loadUIOverrides();

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);
+            }
           }
         },
 
@@ -602,6 +604,7 @@ $.fn.accordion.settings = {
     accordion : '.accordion',
     title     : '.title',
     trigger   : '.title',
+    ignore    : '.ui.dropdown',
     content   : '.content'
   }