fomantic-ui 2.9.0-beta.8 → 2.9.0-beta.80

package/src/definitions/elements/list.less

@@ -185,22 +185,25 @@ ol.ui.list ol li,
   margin-left: 0;
   padding-left: 0;
 }
-
-/* Header */
-.ui.list .list > .item .header,
-.ui.list > .item .header {
-  display: block;
-  margin: 0;
-  font-family: @itemHeaderFontFamily;
-  font-weight: @itemHeaderFontWeight;
-  color: @itemHeaderColor;
+& when (@variationListHeader) {
+  /* Header */
+  .ui.list .list > .item .header,
+  .ui.list > .item .header {
+    display: block;
+    margin: 0;
+    font-family: @itemHeaderFontFamily;
+    font-weight: @itemHeaderFontWeight;
+    color: @itemHeaderColor;
+  }
 }
 
-/* Description */
-.ui.list .list > .item .description,
-.ui.list > .item .description {
-  display: block;
-  color: @itemDescriptionColor;
+& when (@variationListDescription) {
+  /* Description */
+  .ui.list .list > .item .description,
+  .ui.list > .item .description {
+    display: block;
+    color: @itemDescriptionColor;
+  }
 }
 
 /* Child Link */
@@ -230,15 +233,17 @@ ol.ui.list ol li,
   }
 }
 
-/* Header Link */
-.ui.list .list > .item a.header,
-.ui.list > .item a.header {
-  cursor: pointer;
-  color: @itemHeaderLinkColor !important;
-}
-.ui.list .list > .item > a.header:hover,
-.ui.list > .item > a.header:hover {
-  color: @itemHeaderLinkHoverColor !important;
+& when (@variationListHeader) {
+  /* Header Link */
+  .ui.list .list > .item a.header,
+  .ui.list > .item a.header {
+    cursor: pointer;
+    color: @itemHeaderLinkColor !important;
+  }
+  .ui.list .list > .item > a.header:hover,
+  .ui.list > .item > a.header:hover {
+    color: @itemHeaderLinkHoverColor !important;
+  }
 }
 
 & when (@variationListFloated) {
@@ -406,13 +411,17 @@ ol.ui.list ol li,
       color: @invertedIconLinkColor;
     }
   }
-  .ui.inverted.list .list > .item .header,
-  .ui.inverted.list > .item .header {
-    color: @invertedHeaderColor;
+  & when (@variationListHeader) {
+    .ui.inverted.list .list > .item .header,
+    .ui.inverted.list > .item .header {
+      color: @invertedHeaderColor;
+    }
   }
-  .ui.inverted.list .list > .item .description,
-  .ui.inverted.list > .item .description {
-    color: @invertedDescriptionColor;
+  & when (@variationListDescription) {
+    .ui.inverted.list .list > .item .description,
+    .ui.inverted.list > .item .description {
+      color: @invertedDescriptionColor;
+    }
   }
   .ui.inverted.list .list > .item > .content,
   .ui.inverted.list > .item > .content {
@@ -974,23 +983,24 @@ ol.ui.list ol li,
       padding-right: @relaxedHorizontalPadding;
     }
   }
-
-  /* Very Relaxed */
-  .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:first-child) {
-    padding-top: @veryRelaxedItemVerticalPadding;
-  }
-  .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:last-child) {
-    padding-bottom: @veryRelaxedItemVerticalPadding;
-  }
-
-  & when (@variationListHorizontal) {
-    .ui.horizontal[class*="very relaxed"].list .list > .item:not(:first-child),
-    .ui.horizontal[class*="very relaxed"].list > .item:not(:first-child) {
-      padding-left: @veryRelaxedHorizontalPadding;
+  & when (@variationListVeryRelaxed) {
+    /* Very Relaxed */
+    .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:first-child) {
+      padding-top: @veryRelaxedItemVerticalPadding;
+    }
+    .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:last-child) {
+      padding-bottom: @veryRelaxedItemVerticalPadding;
     }
-    .ui.horizontal[class*="very relaxed"].list .list > .item:not(:last-child),
-    .ui.horizontal[class*="very relaxed"].list > .item:not(:last-child) {
-      padding-right: @veryRelaxedHorizontalPadding;
+
+    & when (@variationListHorizontal) {
+      .ui.horizontal[class*="very relaxed"].list .list > .item:not(:first-child),
+      .ui.horizontal[class*="very relaxed"].list > .item:not(:first-child) {
+        padding-left: @veryRelaxedHorizontalPadding;
+      }
+      .ui.horizontal[class*="very relaxed"].list .list > .item:not(:last-child),
+      .ui.horizontal[class*="very relaxed"].list > .item:not(:last-child) {
+        padding-right: @veryRelaxedHorizontalPadding;
+      }
     }
   }
 }

package/src/definitions/elements/segment.less

@@ -49,10 +49,10 @@
     border-radius: 0;
     box-shadow: none;
     border: none;
-    border-bottom: @borderWidth solid @borderColor;
+    border-top: @borderWidth solid @borderColor;
   }
-  .ui.vertical.segment:last-child {
-    border-bottom: none;
+  .ui.vertical.segment:first-child {
+    border-top: none;
   }
 }
 
@@ -299,9 +299,10 @@
   .ui.padded.segment {
     padding: @paddedSegmentPadding;
   }
-
-  .ui[class*="very padded"].segment {
-    padding: @veryPaddedSegmentPadding;
+  & when (@variationSegmentVeryPadded) {
+    .ui[class*="very padded"].segment {
+      padding: @veryPaddedSegmentPadding;
+    }
   }
 
   & when (@variationSegmentVertical) {
@@ -730,12 +731,12 @@ each(@colors,{
     box-shadow: @attachedBoxShadow;
     border: @attachedBorder;
   }
-  .ui.attached:not(.message) + .ui.attached.segment:not(.top) {
+  .ui.attached:not(.message):not(.text) + .ui.attached.segment:not(.top) {
     border-top: none;
   }
 
   /* Top */
-  .ui[class*="top attached"].segment {
+  .ui.segment[class*="top attached"] {
     bottom: 0;
     margin-bottom: 0;
     top: @attachedTopOffset;
@@ -745,6 +746,9 @@ each(@colors,{
   .ui.segment[class*="top attached"]:first-child {
     margin-top: 0;
   }
+  .ui.tab.segment[class*="top attached"]:first-child {
+    margin-top: @verticalMargin;
+  }
 
   /* Bottom */
   .ui.segment[class*="bottom attached"] {
@@ -756,6 +760,9 @@ each(@colors,{
     border-radius: 0 0 @borderRadius @borderRadius;
   }
   .ui.segment[class*="bottom attached"]:last-child {
+    margin-bottom: 0;
+  }
+  .ui.tab.segment[class*="bottom attached"]:last-child {
     margin-bottom: @verticalMargin;
   }
 }

package/src/definitions/elements/step.less

@@ -290,8 +290,10 @@
     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 {
@@ -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%;
+  }
 }
 
 /*-------------------

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,17 @@ a:hover {
   body ::-webkit-scrollbar-thumb:hover {
     background: @thumbHoverBackground;
   }
+  body .ui {
+    /* 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 +177,17 @@ a:hover {
   body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:hover {
     background: @thumbInvertedHoverBackground;
   }
+
+  body .ui.inverted:not(.dimmer) {
+    /* 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 +225,4 @@ input::selection {
   color: @inputHighlightColor;
 }
 
-.addScrollbars();
 .loadUIOverrides();

package/src/definitions/modules/accordion.less

@@ -37,7 +37,7 @@
 }
 
 /* Default Styling */
-.ui.accordion .title:not(.ui) {
+.ui.accordion .title {
   padding: @titlePadding;
   font-family: @titleFont;
   font-size: @titleFontSize;
@@ -45,12 +45,12 @@
 }
 
 /* Default Styling */
-.ui.accordion:not(.styled) .title ~ .content:not(.ui),
-.ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui) {
+.ui.accordion:not(.styled) .title ~ .content,
+.ui.accordion:not(.styled) .accordion .title ~ .content {
   margin: @contentMargin;
   padding: @contentPadding;
 }
-.ui.accordion:not(.styled) .title ~ .content:not(.ui):last-child {
+.ui.accordion:not(.styled) .title ~ .content:last-child {
   padding-bottom: 0;
 }
 
@@ -176,6 +176,56 @@
   }
 }
 
+& when (@variationAccordionCompact) {
+  /*--------------
+       Compact
+  ---------------*/
+
+  /* Default Styling */
+  .ui.compact.accordion:not(.styled) .title {
+    padding: @titlePaddingCompact;
+  }
+
+  .ui.compact.accordion:not(.styled) .title ~ .content,
+  .ui.compact.accordion:not(.styled) .accordion .title ~ .content {
+    padding: @contentPaddingCompact;
+  }
+
+  /* Styled */
+  .ui.compact.styled.accordion .title,
+  .ui.compact.styled.accordion .accordion .title {
+    padding: @styledTitlePaddingCompact;
+  }
+
+  .ui.compact.styled.accordion .title ~ .content,
+  .ui.compact.styled.accordion .accordion .title ~ .content {
+    padding: @styledContentPaddingCompact;
+  }
+
+  /*--------------
+    Very Compact
+  ---------------*/
+
+  .ui[class*="very compact"].accordion:not(.styled) .title {
+    padding: @titlePaddingVeryCompact;
+  }
+
+  .ui[class*="very compact"].accordion:not(.styled) .title ~ .content,
+  .ui[class*="very compact"].accordion:not(.styled) .accordion .title ~ .content {
+    padding: @contentPaddingVeryCompact;
+  }
+
+  .ui[class*="very compact"].styled.accordion .title,
+  .ui[class*="very compact"].styled.accordion .accordion .title {
+    padding: @styledTitlePaddingVeryCompact;
+  }
+
+  .ui[class*="very compact"].styled.accordion .title ~ .content,
+  .ui[class*="very compact"].styled.accordion .accordion .title ~ .content {
+    padding: @styledContentPaddingVeryCompact;
+  }
+}
+
 
 /*******************************
             States
@@ -210,7 +260,7 @@
        Inverted
   ---------------*/
 
-  .ui.inverted.accordion .title:not(.ui) {
+  .ui.inverted.accordion .title {
     color: @invertedTitleColor;
   }
 }

package/src/definitions/modules/calendar.js

@@ -122,7 +122,7 @@ $.fn.calendar = function(parameters) {
               module.set.maxDate($module.data(metadata.maxDate));
             }
             module.setting('type', module.get.type());
-            module.setting('on', settings.on || ($input.length ? 'focus' : 'click'));
+            module.setting('on', settings.on || 'click');
           },
           popup: function () {
             if (settings.inline) {
@@ -153,7 +153,10 @@ $.fn.calendar = function(parameters) {
               module.refreshTooltips();
               return settings.onVisible.apply($container, arguments);
             };
-            var onHidden = settings.onHidden;
+            var onHidden = function () {
+              module.blur();
+              return settings.onHidden.apply($container, arguments)
+            }
             if (!$input.length) {
               //no input, $container has to handle focus/blur
               $container.attr('tabindex', '0');
@@ -162,10 +165,6 @@ $.fn.calendar = function(parameters) {
                 module.focus();
                 return settings.onVisible.apply($container, arguments);
               };
-              onHidden = function () {
-                module.blur();
-                return settings.onHidden.apply($container, arguments);
-              };
             }
             var onShow = function () {
               //reset the focus date onShow
@@ -390,6 +389,19 @@ $.fn.calendar = function(parameters) {
                         cell.attr("data-variation", disabledDate[metadata.variation]);
                       }
                     }
+                    if (mode === 'hour') {
+                      var disabledHour = module.helper.findHourAsObject(cellDate, mode, settings.disabledHours);
+                      if (disabledHour !== null && disabledHour[metadata.message]) {
+                        cell.attr("data-tooltip", disabledHour[metadata.message]);
+                        cell.attr("data-position", disabledHour[metadata.position] || tooltipPosition);
+                        if(disabledHour[metadata.inverted] || (isInverted && disabledHour[metadata.inverted] === undefined)) {
+                          cell.attr("data-inverted", '');
+                        }
+                        if(disabledHour[metadata.variation]) {
+                          cell.attr("data-variation", disabledHour[metadata.variation]);
+                        }
+                      }
+                    }
                   } else {
                     eventDate = module.helper.findDayAsObject(cellDate, mode, settings.eventDates);
                     if (eventDate !== null) {
@@ -975,7 +987,7 @@ $.fn.calendar = function(parameters) {
 
         helper: {
           isDisabled: function(date, mode) {
-            return (mode === 'day' || mode === 'month' || mode === 'year') && ((mode === 'day' && settings.disabledDaysOfWeek.indexOf(date.getDay()) !== -1) || settings.disabledDates.some(function(d){
+            return (mode === 'day' || mode === 'month' || mode === 'year' || mode === 'hour') && (((mode === 'day' && settings.disabledDaysOfWeek.indexOf(date.getDay()) !== -1) || settings.disabledDates.some(function(d){
               if(typeof d === 'string') {
                 d = module.helper.sanitiseDate(d);
               }
@@ -1008,7 +1020,45 @@ $.fn.calendar = function(parameters) {
                   }
                 }
               }
-            }));
+            })) || (mode === 'hour' && settings.disabledHours.some(function(d){
+              if (typeof d === 'string') {
+                d = module.helper.sanitiseDate(d);
+              }
+              if (d instanceof Date) {
+                return module.helper.dateEqual(date, d, mode);
+              } else if (typeof d === 'number') {
+                return date.getHours() === d;
+              }
+              if (d !== null && typeof d === 'object') {
+                var blocked = true;
+
+                if (d[metadata.date]) {
+                  if (d[metadata.date] instanceof Date) {
+                    blocked = module.helper.dateEqual(date, module.helper.sanitiseDate(d[metadata.date]));
+                  } else if (Array.isArray(d[metadata.date])) {
+                    return d[metadata.date].some(function(idate) {
+                      blocked = module.helper.dateEqual(date, idate, mode);
+                    });
+                  }
+                }
+
+                if (d[metadata.days]) {
+                  if (typeof d[metadata.days] === 'number') {
+                    blocked = date.getDay() == d[metadata.days];
+                  } else if (Array.isArray(d[metadata.days])) {
+                    blocked = d[metadata.days].indexOf(date.getDay()) > -1;
+                  }
+                }
+
+                if (d[metadata.hours]) {
+                  if (typeof d[metadata.hours] === 'number') {
+                    return blocked && date.getHours() == d[metadata.hours];
+                  } else if (Array.isArray(d[metadata.hours])) {
+                    return blocked && d[metadata.hours].indexOf(date.getHours()) > -1;
+                  }
+                }
+              }
+            })));
           },
           isEnabled: function(date, mode) {
             if (mode === 'day') {
@@ -1076,6 +1126,49 @@ $.fn.calendar = function(parameters) {
             }
             return null;
           },
+          findHourAsObject: function(date, mode, hours) {
+            if (mode === 'hour') {
+              var d;
+              var hourCheck = function(date, d) {
+                 if (d[metadata.hours]) {
+                    if (typeof d[metadata.hours] === 'number' && date.getHours() == d[metadata.hours]) {
+                      return d;
+                  } else if (Array.isArray(d[metadata.hours])) {
+                    if (d[metadata.hours].indexOf(date.getHours()) > -1) {
+                      return d;
+                    }
+                  }
+                }
+              }
+              for (var i = 0; i < hours.length; i++) {
+                d = hours[i];
+                if (typeof d === 'number' && date.getHours() == d) {
+                  return null;
+                } else if (d !== null && typeof d === 'object') {
+                  if (d[metadata.days] && hourCheck(date,d)) {
+                    if (typeof d[metadata.days] === 'number' && date.getDay() == d[metadata.days]) {
+                      return d;
+                    } else if (Array.isArray(d[metadata.days])) {
+                      if (d[metadata.days].indexOf(date.getDay()) > -1) {
+                        return d;
+                      }
+                    }
+                  } else if (d[metadata.date] && hourCheck(date,d)) {
+                    if (d[metadata.date] instanceof Date && module.helper.dateEqual(date, module.helper.sanitiseDate(d[metadata.date]))) {
+                      return d;
+                    } else if (Array.isArray(d[metadata.date])) {
+                      if (d[metadata.date].some(function(idate) { return module.helper.dateEqual(date, idate, mode); })) {
+                        return d;
+                      }
+                    }
+                  } else if (hourCheck(date,d)) {
+                    return d;
+                  }
+                }
+              }
+            }
+            return null;
+          },
           sanitiseDate: function (date) {
             if (!(date instanceof Date)) {
               date = parser.date('' + date, settings);
@@ -1361,6 +1454,7 @@ $.fn.calendar.settings = {
   multiMonth         : 1,          // show multiple months when in 'day' mode
   minTimeGap         : 5,
   showWeekNumbers    : null,       // show Number of Week at the very first column of a dayView
+  disabledHours      : [],         // specific hour(s) which won't be selectable and contain additional information.
   disabledDates      : [],         // specific day(s) which won't be selectable and contain additional information.
   disabledDaysOfWeek : [],         // day(s) which won't be selectable(s) (0 = Sunday)
   enabledDates       : [],         // specific day(s) which will be selectable, all other days will be disabled
@@ -1766,7 +1860,9 @@ $.fn.calendar.settings = {
     variation: 'variation',
     position: 'position',
     month: 'month',
-    year: 'year'
+    year: 'year',
+    hours: 'hours',
+    days: 'days'
   },
 
   eventClass: 'blue'

package/src/definitions/modules/checkbox.js

@@ -323,7 +323,6 @@ $.fn.checkbox = function(parameters) {
             settings.onEnable.call(input);
             // preserve legacy callbacks
             settings.onEnabled.call(input);
-            module.trigger.change();
           }
         },
 
@@ -338,7 +337,6 @@ $.fn.checkbox = function(parameters) {
             settings.onDisable.call(input);
             // preserve legacy callbacks
             settings.onDisabled.call(input);
-            module.trigger.change();
           }
         },
 
@@ -866,7 +864,7 @@ $.fn.checkbox.settings = {
 
   selector : {
     checkbox : '.ui.checkbox',
-    label    : 'label, .box',
+    label    : 'label',
     input    : 'input[type="checkbox"], input[type="radio"]',
     link     : 'a[href]'
   }