feat(calendar): added inverted variant

This PR adds full inverted support to the calendar component.
It also adds new metadata support for disabled/eventDates to supply new attributes inverted and variation. This way each cell tooltip can be adjusted on its own and makes it possible to have inverted or basic cell tooltips on non inverted calendars and vice versa

Author: lubber-de

src/definitions/modules/calendar.js

@@ -75,6 +75,7 @@ $.fn.calendar = function(parameters) {
 
         isTouch,
         isTouchDown = false,
+        isInverted = $module.hasClass(className.inverted),
         focusDateUsedForRange = false,
         module
       ;
@@ -141,6 +142,9 @@ $.fn.calendar = function(parameters) {
               $container = $('<div/>').addClass(className.popup)[domPositionFunction]($activatorParent);
             }
             $container.addClass(className.calendar);
+            if(isInverted){
+              $container.addClass(className.inverted);
+            }
             var onVisible = function () {
               module.refreshTooltips();
               return settings.onVisible.apply($container, arguments);
@@ -286,6 +290,9 @@ $.fn.calendar = function(parameters) {
                 tempMode += ' andweek';
               }
               var table = $('<table/>').addClass(className.table).addClass(tempMode).addClass(numberText[columns] + ' column').appendTo(container);
+              if(isInverted){
+                table.addClass(className.inverted);
+              }
               var textColumns = columns;
               //no header for time-only mode
               if (!isTimeOnly) {
@@ -355,15 +362,27 @@ $.fn.calendar = function(parameters) {
                     var disabledDate = module.helper.findDayAsObject(cellDate, mode, settings.disabledDates);
                     if (disabledDate !== null && disabledDate[metadata.message]) {
                       cell.attr("data-tooltip", disabledDate[metadata.message]);
-                      cell.attr("data-position", tooltipPosition);
+                      cell.attr("data-position", disabledDate[metadata.position] || tooltipPosition);
+                      if(disabledDate[metadata.inverted] || (isInverted && disabledDate[metadata.inverted] === undefined)) {
+                        cell.attr("data-inverted", '');
+                      }
+                      if(disabledDate[metadata.variation]) {
+                        cell.attr("data-variation", disabledDate[metadata.variation]);
+                      }
                     }
                   } else {
                     var eventDate = module.helper.findDayAsObject(cellDate, mode, settings.eventDates);
                     if (eventDate !== null) {
                       cell.addClass(eventDate[metadata.class] || settings.eventClass);
                       if (eventDate[metadata.message]) {
                         cell.attr("data-tooltip", eventDate[metadata.message]);
-                        cell.attr("data-position", tooltipPosition);
+                        cell.attr("data-position", eventDate[metadata.position] || tooltipPosition);
+                        if(eventDate[metadata.inverted] || (isInverted && eventDate[metadata.inverted] === undefined)) {
+                          cell.attr("data-inverted", '');
+                        }
+                        if(eventDate[metadata.variation]) {
+                          cell.attr("data-variation", eventDate[metadata.variation]);
+                        }
                       }
                     }
                   }
@@ -1639,6 +1658,7 @@ $.fn.calendar.settings = {
     grid: 'ui equal width grid',
     column: 'column',
     table: 'ui celled center aligned unstackable table',
+    inverted: 'inverted',
     prev: 'prev link',
     next: 'next link',
     prevIcon: 'chevron left icon',
@@ -1667,6 +1687,9 @@ $.fn.calendar.settings = {
     monthOffset: 'monthOffset',
     message: 'message',
     class: 'class',
+    inverted: 'inverted',
+    variation: 'variation',
+    position: 'position',
     month: 'month',
     year: 'year'
   },

src/definitions/modules/calendar.less

@@ -121,7 +121,7 @@
   right: 0;
 }
 
-.ui.calendar .ui.table tr .disabled {
+.ui.ui.calendar .ui.table tr .disabled {
   pointer-events: auto;
   cursor: default;
   color: @disabledTextColor;
@@ -146,22 +146,31 @@
   box-shadow: @rangeBoxShadow;
 }
 
-.ui.calendar .ui.table.inverted tr td.range {
-  background: @rangeInvertedBackground;
-  color: @rangeInvertedTextColor;
-  box-shadow: @rangeInvertedBoxShadow;
-}
-
 .ui.calendar:not(.disabled) .calendar:focus .ui.table tbody tr td.focus,
 .ui.calendar:not(.disabled) .calendar.active .ui.table tbody tr td.focus {
   box-shadow: @focusBoxShadow;
 }
 
-.ui.calendar:not(.disabled) .calendar:focus .ui.table.inverted tbody tr td.focus,
-.ui.calendar:not(.disabled) .calendar.active .ui.table.inverted tbody tr td.focus {
-  box-shadow: @focusInvertedBoxShadow;
-}
+& when (@variationCalendarInverted) {
+  .ui.inverted.calendar .ui.table.inverted tr td.range {
+    background: @rangeInvertedBackground;
+    color: @rangeInvertedTextColor;
+    box-shadow: @rangeInvertedBoxShadow;
+  }
 
+  .ui.inverted.calendar:not(.disabled) .calendar:focus .ui.table.inverted tbody tr td.focus,
+  .ui.inverted.calendar:not(.disabled) .calendar.active .ui.table.inverted tbody tr td.focus {
+    box-shadow: @focusInvertedBoxShadow;
+  }
+  .ui.inverted.calendar .ui.inverted.table tr .disabled {
+    color: @invertedDisabledTextColor;
+  }
+
+  .ui.inverted.calendar .ui.inverted.table tr .adjacent:not(.disabled) {
+    color: @adjacentInvertedTextColor;
+    background: @adjacentInvertedBackground;
+  }
+}
 
 /*******************************
             States

src/themes/default/globals/variation.variables

@@ -367,6 +367,7 @@
 @variationAccordionFluid: true;
 
 /* Calendar */
+@variationCalendarInverted: true;
 @variationCalendarDisabled: true;
 
 /* Checkbox */

src/themes/default/modules/calendar.variables

@@ -16,3 +16,5 @@
 
 @adjacentTextColor: @mutedTextColor;
 @adjacentBackground: @subtleTransparentBlack;
+@adjacentInvertedTextColor: @invertedMutedTextColor;
+@adjacentInvertedBackground: @subtleTransparentWhite;