fomantic-ui 2.9.0-beta.215 → 2.9.0-beta.216

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.9.0-beta.215",
+  "version": "2.9.0-beta.216",
   "description": "Fomantic empowers designers and developers by creating a shared vocabulary for UI.",
   "keywords": [
     "fomantic-ui",

package/src/definitions/elements/button.less

@@ -262,61 +262,64 @@
     right: 0;
   }
 
-  /* Vertical */
-  .ui.vertical.animated.button .visible.content,
-  .ui.vertical.animated.button .hidden.content {
-    transition: top @animationDuration @animationEasing, transform @animationDuration @animationEasing;
-  }
-  .ui.vertical.animated.button .visible.content {
-    transform: translateY(0%);
-    right: auto;
-  }
-  .ui.vertical.animated.button .hidden.content {
-    top: -50%;
-    left: 0;
-    right: auto;
-  }
-  .ui.vertical.animated.button:focus .visible.content,
-  .ui.vertical.animated.button:hover .visible.content {
-    transform: translateY(200%);
-    right: auto;
-  }
-  .ui.vertical.animated.button:focus .hidden.content,
-  .ui.vertical.animated.button:hover .hidden.content {
-    top: 50%;
-    right: auto;
-  }
-
-  /* Fade */
-  .ui.fade.animated.button .visible.content,
-  .ui.fade.animated.button .hidden.content {
-    transition: opacity @animationDuration @animationEasing, transform @animationDuration @animationEasing;
-  }
-  .ui.fade.animated.button .visible.content {
-    left: auto;
-    right: auto;
-    opacity: 1;
-    transform: scale(1);
-  }
-  .ui.fade.animated.button .hidden.content {
-    opacity: 0;
-    left: 0;
-    right: auto;
-    transform: scale(@fadeScaleHigh);
-  }
-  .ui.fade.animated.button:focus .visible.content,
-  .ui.fade.animated.button:hover .visible.content {
-    left: auto;
-    right: auto;
-    opacity: 0;
-    transform: scale(@fadeScaleLow);
+  & when (@variationButtonVertical) {
+    /* Vertical */
+    .ui.vertical.animated.button .visible.content,
+    .ui.vertical.animated.button .hidden.content {
+      transition: top @animationDuration @animationEasing, transform @animationDuration @animationEasing;
+    }
+    .ui.vertical.animated.button .visible.content {
+      transform: translateY(0%);
+      right: auto;
+    }
+    .ui.vertical.animated.button .hidden.content {
+      top: -50%;
+      left: 0;
+      right: auto;
+    }
+    .ui.vertical.animated.button:focus .visible.content,
+    .ui.vertical.animated.button:hover .visible.content {
+      transform: translateY(200%);
+      right: auto;
+    }
+    .ui.vertical.animated.button:focus .hidden.content,
+    .ui.vertical.animated.button:hover .hidden.content {
+      top: 50%;
+      right: auto;
+    }
   }
-  .ui.fade.animated.button:focus .hidden.content,
-  .ui.fade.animated.button:hover .hidden.content {
-    left: 0;
-    right: auto;
-    opacity: 1;
-    transform: scale(1);
+  & when (@variationButtonAnimatedFade) {
+    /* Fade */
+    .ui.fade.animated.button .visible.content,
+    .ui.fade.animated.button .hidden.content {
+      transition: opacity @animationDuration @animationEasing, transform @animationDuration @animationEasing;
+    }
+    .ui.fade.animated.button .visible.content {
+      left: auto;
+      right: auto;
+      opacity: 1;
+      transform: scale(1);
+    }
+    .ui.fade.animated.button .hidden.content {
+      opacity: 0;
+      left: 0;
+      right: auto;
+      transform: scale(@fadeScaleHigh);
+    }
+    .ui.fade.animated.button:focus .visible.content,
+    .ui.fade.animated.button:hover .visible.content {
+      left: auto;
+      right: auto;
+      opacity: 0;
+      transform: scale(@fadeScaleLow);
+    }
+    .ui.fade.animated.button:focus .hidden.content,
+    .ui.fade.animated.button:hover .hidden.content {
+      left: 0;
+      right: auto;
+      opacity: 1;
+      transform: scale(1);
+    }
   }
 }
 
@@ -332,20 +335,23 @@
     text-shadow: none !important;
   }
 
-  /* Group */
-  .ui.inverted.buttons .button {
-    margin: @invertedGroupButtonOffset;
-  }
-  .ui.inverted.buttons .button:first-child {
-    margin-left: 0;
-  }
-  .ui.inverted.vertical.buttons .button {
-    margin: @invertedVerticalGroupButtonOffset;
-  }
-  .ui.inverted.vertical.buttons .button:first-child {
-    margin-top: 0;
+  & when (@variationButtonGroups) {
+    /* Group */
+    .ui.inverted.buttons .button {
+      margin: @invertedGroupButtonOffset;
+    }
+    .ui.inverted.buttons .button:first-child {
+      margin-left: 0;
+    }
+    & when (@variationButtonVertical) {
+      .ui.inverted.vertical.buttons .button {
+        margin: @invertedVerticalGroupButtonOffset;
+      }
+      .ui.inverted.vertical.buttons .button:first-child {
+        margin-top: 0;
+      }
+    }
   }
-
   /* States */
 
   /* Hover */
@@ -748,8 +754,10 @@
     vertical-align: top;
   }
 }
-.ui.animated.button > .content > .icon {
-  vertical-align: top;
+& when (@variationButtonAnimated) {
+  .ui.animated.button > .content > .icon {
+    vertical-align: top;
+  }
 }
 
 & when (@variationButtonBasic) {
@@ -767,15 +775,17 @@
     text-shadow: none !important;
     box-shadow: @basicBoxShadow;
   }
+  & when (@variationButtonGroups) {
+    .ui.basic.buttons {
+      box-shadow: @basicGroupBoxShadow;
+      border: @basicGroupBorder;
+      border-radius: @borderRadius;
+      border-right: none;
+    }
 
-  .ui.basic.buttons {
-    box-shadow: @basicGroupBoxShadow;
-    border: @basicGroupBorder;
-    border-radius: @borderRadius;
-  }
-
-  .ui.basic.buttons .button {
-    border-radius: 0;
+    .ui.basic.buttons .button {
+      border-radius: 0;
+    }
   }
 
   .ui.basic.buttons .button:hover,
@@ -810,18 +820,19 @@
   .ui.basic.active.button:hover {
     background-color: @transparentBlack;
   }
+  & when (@variationButtonGroups) {
 
-  /* Vertical */
-  .ui.basic.buttons .button:hover {
-    box-shadow: @basicHoverBoxShadow inset;
-  }
+    .ui.basic.buttons .button:hover {
+      box-shadow: @basicHoverBoxShadow inset;
+    }
 
-  .ui.basic.buttons .button:active {
-    box-shadow: @basicDownBoxShadow inset;
-  }
+    .ui.basic.buttons .button:active {
+      box-shadow: @basicDownBoxShadow inset;
+    }
 
-  .ui.basic.buttons .active.button {
-    box-shadow: @basicActiveBoxShadow;
+    .ui.basic.buttons .active.button {
+      box-shadow: @basicActiveBoxShadow;
+    }
   }
   & when (@variationButtonInverted) {
     /* Standard Basic Inverted */
@@ -867,21 +878,23 @@
     }
   }
 
-  & when (@variationButtonBasic) {
+  & when (@variationButtonGroups) {
     /* Basic Group */
-    .ui.basic.buttons .button {
-      border-left: @basicGroupBorder;
+    .ui.basic.buttons:not(.inverted) .button:not(.basic) {
+      border-right: @basicGroupBorder;
       box-shadow: none;
     }
 
-    .ui.basic.vertical.buttons .button {
-      border-left: none;
-      border-left-width: 0;
-      border-top: @basicGroupBorder;
-    }
+    & when (@variationButtonVertical) {
+      .ui.basic.vertical.buttons .button {
+        border-left: none;
+        border-left-width: 0;
+        border-top: @basicGroupBorder;
+      }
 
-    .ui.basic.vertical.buttons .button:first-child {
-      border-top-width: 0;
+      .ui.basic.vertical.buttons:not(.spaced) .button:first-child {
+        border-top: none;
+      }
     }
   }
 }
@@ -1220,7 +1233,7 @@
 
   /* Top / Bottom */
   .ui[class*="top attached"].buttons {
-    margin-bottom: @attachedOffset;
+    margin-bottom: @topAttachedOffset;
     border-radius: @borderRadius @borderRadius 0 0;
   }
 
@@ -1233,7 +1246,7 @@
   }
 
   .ui[class*="bottom attached"].buttons {
-    margin-top: @attachedOffset;
+    margin-top: @bottomAttachedOffset;
     border-radius: 0 0 @borderRadius @borderRadius;
   }
 
@@ -1539,10 +1552,6 @@
         box-shadow: 0 0 0 @basicColoredBorderSize @d inset;
         color: @d;
       }
-
-      .ui.buttons:not(.vertical) > .basic.@{color}.button:not(:first-child) {
-        margin-left: -@basicColoredBorderSize;
-      }
     }
     & when (@variationButtonInverted) {
       /* Inverted */
@@ -1898,8 +1907,10 @@
       float: none;
       width: 100%;
       margin: @verticalGroupOffset;
-      box-shadow: @verticalBoxShadow;
       border-radius: 0;
+      &:not(.basic) {
+        box-shadow: @verticalBoxShadow;
+      }
     }
 
     .ui.vertical.buttons .button:first-child {
@@ -1916,6 +1927,119 @@
     .ui.vertical.buttons .button:only-child {
       border-radius: @borderRadius;
     }
+    & when (@variationButtonBasic) {
+      .ui.vertical.buttons .basic.button:not(:first-child) {
+        border-top: none;
+      }
+    }
+  }
+
+  & when (@variationButtonWrapping) {
+    .ui.wrapping.buttons {
+      flex-wrap: wrap;
+    }
+    & when (@variationButtonBasic) {
+      .ui.wrapping.basic.buttons {
+        border-bottom: none;
+        & .button {
+          border-bottom: @basicGroupBorder;
+          &:hover {
+            background: transparent !important;
+          }
+        }
+      }
+    }
+    & when (@variationButtonCompact) {
+      .ui.compact.wrapping.buttons .button {
+        flex: none;
+      }
+    }
+  }
+  & when (@variationButtonWrapped) {
+    .ui.wrapped.buttons:not(.spaced) {
+      border-top-right-radius: 0;
+      & .button {
+        &:first-child {
+          border-radius: @basicBorderRadius 0 0 0;
+        }
+        &:last-child {
+          border-radius: 0 0 @basicBorderRadius 0;
+        }
+      }
+    }
+    & when (@variationButtonAttached) {
+      .ui.wrapped[class*="top attached"].buttons {
+        border-radius: @basicBorderRadius 0 0 0;
+        & .button:last-child {
+          border-radius: 0;
+        }
+      }
+      .ui.wrapped[class*="bottom attached"].buttons {
+        border-radius: 0 0 0 @basicBorderRadius;
+        & .button:first-child {
+          border-radius: 0;
+        }
+      }
+    }
+  }
+  & when (@variationButtonSpaced) {
+    .ui.spaced.buttons .ui.button {
+      margin-bottom: @spacedMargin;
+      margin-right: @spacedMargin;
+      border-radius: @basicBorderRadius;
+    }
+    & when (@variationButtonBasic) {
+      .ui.spaced.basic.buttons {
+        border: none;
+        & .button {
+          border: @basicGroupBorder;
+          &.basic {
+            border: none;
+          }
+        }
+      }
+      & when (@variationButtonVertical) {
+        .ui.spaced.basic.vertical.buttons .button:first-child {
+          border-top: @basicGroupBorder;
+        }
+      }
+      & when (@variationButtonWrapping) {
+        .ui.spaced.basic.wrapping.buttons .button:not(.basic) {
+          border-top: @basicGroupBorder;
+          border-right: @basicGroupBorder;
+          &:first-child {
+            border-left: @basicGroupBorder;
+          }
+        }
+      }
+      & when (@variationButtonInverted) {
+        .ui.spaced.basic.inverted.buttons .basic.button {
+          margin-bottom: e(%("calc(%d + %d)", @spacedMargin, @basicColoredBorderSize));
+          margin-top: @basicColoredBorderSize;
+        }
+      }
+    }
+  }
+
+  & when (@variationButtonBasic) {
+    .ui.basic.buttons:not(.vertical).inverted .button,
+    .ui.basic.buttons:not(.vertical) .basic.button {
+      margin-left: -@basicColoredBorderSize;
+      border-right: none;
+    }
+    .ui.basic.buttons:not(.vertical):not(.spaced):not(.inverted) .basic.button {
+      margin-top: -@basicColoredBorderSize;
+      border-bottom: none;
+    }
+    & when (@variationButtonAttached) or (@variationButtonInverted) {
+      .ui.inverted.basic.buttons:not(.spaced) .button,
+      .ui.attached.basic.buttons:not(.wrapping):not(.inverted) .basic.button {
+        margin-bottom: @attachedOffset;
+      }
+    }
+    .ui.basic.buttons:not(.vertical):not(.attached):not(.spaced):not(.wrapping):not(.inverted) .basic.button {
+      margin-bottom: -@basicColoredBorderSize;
+    }
   }
 }
 .loadUIOverrides();

package/src/definitions/modules/calendar.js

@@ -746,7 +746,7 @@ $.fn.calendar = function(parameters) {
             return $module.data(metadata.maxDate) || null;
           },
           monthOffset: function () {
-            return $module.data(metadata.monthOffset) || 0;
+            return $module.data(metadata.monthOffset) || settings.monthOffset || 0;
           },
           mode: function () {
             //only returns valid modes for the current settings
@@ -1452,6 +1452,7 @@ $.fn.calendar.settings = {
   startCalendar      : null,       // jquery object or selector for another calendar that represents the start date of a date range
   endCalendar        : null,       // jquery object or selector for another calendar that represents the end date of a date range
   multiMonth         : 1,          // show multiple months when in 'day' mode
+  monthOffset        : 0,          // position current month by offset when multimonth > 1
   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.
@@ -1467,6 +1468,7 @@ $.fn.calendar.settings = {
     position: 'bottom left',
     lastResort: 'bottom left',
     prefer: 'opposite',
+    observeChanges: false,
     hideOnScroll: false
   },
 
@@ -1558,7 +1560,7 @@ $.fn.calendar.settings = {
       if (!text) {
         return null;
       }
-      text = String(text).trim();
+      text = String(text).replace(/\s/g,'');
       if (text.length === 0) {
         return null;
       }

package/src/definitions/modules/calendar.less

@@ -172,6 +172,26 @@
   }
 }
 
+& when (@variationCalendarMultiMonth) {
+  .ui.calendar.popup > .ui.grid {
+    margin: @multiMonthMargin;
+    & > .column:not(:first-child) {
+      padding-left: @multiMonthPadding;
+      & > .ui.table {
+        border-top-left-radius:0;
+        border-bottom-left-radius:0;
+      }
+    }
+    & > .column:not(:last-child) {
+      padding-right:@multiMonthPadding;
+      & > .ui.table {
+        border-top-right-radius:0;
+        border-bottom-right-radius:0;
+      }
+    }
+  }
+}
+
 /*******************************
             States
 *******************************/

package/src/themes/default/elements/button.variables

@@ -377,6 +377,8 @@
 
 /* Attached */
 @attachedOffset: -1px;
+@topAttachedOffset: 0;
+@bottomAttachedOffset: @attachedOffset;
 @attachedBoxShadow: 0 0 0 1px @borderColor;
 @attachedHorizontalPadding: 0.75em;
 @attachedZIndex: auto;
@@ -403,3 +405,6 @@
 /* Circular */
 @circularBorderRadius: 10em;
 @circularIconWidth: 1em;
+
+/* Spaced */
+@spacedMargin: 1em;

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

@@ -15,6 +15,7 @@
 /* Button */
 @variationButtonDisabled: true;
 @variationButtonAnimated: true;
+@variationButtonAnimatedFade: true;
 @variationButtonInverted: true;
 @variationButtonSocial: true;
 @variationButtonFloated: true;
@@ -34,6 +35,9 @@
 @variationButtonCircular: true;
 @variationButtonGroups: true;
 @variationButtonStackable: true;
+@variationButtonWrapping: true;
+@variationButtonWrapped: true;
+@variationButtonSpaced: true;
 @variationButtonSizes: @variationAllSizes;
 @variationButtonColors: @variationAllColors;
 
@@ -488,6 +492,7 @@
 /* Calendar */
 @variationCalendarInverted: true;
 @variationCalendarDisabled: true;
+@variationCalendarMultiMonth: true;
 
 /* Checkbox */
 @variationCheckboxDisabled: true;

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

@@ -18,3 +18,6 @@
 @adjacentBackground: @subtleTransparentBlack;
 @adjacentInvertedTextColor: @invertedMutedTextColor;
 @adjacentInvertedBackground: @subtleTransparentWhite;
+
+@multiMonthMargin: -1rem;
+@multiMonthPadding: 0;