fomantic-ui 2.9.3-beta.8 → 2.9.3

package/src/definitions/elements/loader.less

@@ -62,16 +62,16 @@
 & when (@variationLoaderSpeeds) {
     /* Speeds */
 
-    .ui.fast.loading.loading::after,
-    .ui.fast.loading.loading .input > i.icon::after,
-    .ui.fast.loading.loading > i.icon::after,
+    .ui.ui.fast.loading::after,
+    .ui.ui.fast.loading .input > i.icon::after,
+    .ui.ui.fast.loading > i.icon::after,
     .ui.fast.loader::after {
         animation-duration: @loaderSpeedFast;
     }
 
-    .ui.slow.loading.loading::after,
-    .ui.slow.loading.loading .input > i.icon::after,
-    .ui.slow.loading.loading > i.icon::after,
+    .ui.ui.slow.loading::after,
+    .ui.ui.slow.loading .input > i.icon::after,
+    .ui.ui.slow.loading > i.icon::after,
     .ui.slow.loader::after {
         animation-duration: @loaderSpeedSlow;
     }
@@ -204,49 +204,49 @@
         @c: @colors[@@color][color];
         @l: @colors[@@color][light];
 
-        .ui.@{color}.elastic.loader.loader::before,
+        .ui.ui.@{color}.elastic.loader::before,
         .ui.@{color}.basic.elastic.loading.button::before,
         .ui.@{color}.basic.elastic.loading.button::after,
-        .ui.@{color}.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card)::before,
-        .ui.@{color}.elastic.loading.loading.loading .input > i.icon::before,
-        .ui.@{color}.elastic.loading.loading.loading.loading > i.icon::before,
-        .ui.@{color}.loading.loading.loading.loading:not(.usual):not(.button)::after,
-        .ui.@{color}.loading.loading.loading.loading .input > i.icon::after,
-        .ui.@{color}.loading.loading.loading.loading > i.icon::after,
-        .ui.@{color}.loader.loader.loader::after {
+        .ui.ui.ui.@{color}.elastic.loading:not(.segment):not(.segments):not(.card)::before,
+        .ui.ui.ui.@{color}.elastic.loading .input > i.icon::before,
+        .ui.ui.ui.ui.@{color}.elastic.loading > i.icon::before,
+        .ui.ui.ui.ui.@{color}.loading:not(.usual):not(.button)::after,
+        .ui.ui.ui.ui.@{color}.loading .input > i.icon::after,
+        .ui.ui.ui.ui.@{color}.loading > i.icon::after,
+        .ui.ui.ui.@{color}.loader::after {
             color: @c;
         }
         .ui.inverted.@{color}.elastic.loader::before,
-        .ui.inverted.@{color}.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card)::before,
-        .ui.inverted.@{color}.elastic.loading.loading.loading .input > i.icon::before,
-        .ui.inverted.@{color}.elastic.loading.loading.loading > i.icon::before,
-        .ui.inverted.@{color}.loading.loading.loading.loading:not(.usual)::after,
-        .ui.inverted.@{color}.loading.loading.loading.loading .input > i.icon::after,
-        .ui.inverted.@{color}.loading.loading.loading.loading > i.icon::after,
-        .ui.inverted.@{color}.loader.loader.loader::after {
+        .ui.ui.ui.inverted.@{color}.elastic.loading:not(.segment):not(.segments):not(.card)::before,
+        .ui.ui.ui.inverted.@{color}.elastic.loading .input > i.icon::before,
+        .ui.ui.ui.inverted.@{color}.elastic.loading > i.icon::before,
+        .ui.ui.ui.ui.inverted.@{color}.loading:not(.usual)::after,
+        .ui.ui.ui.ui.inverted.@{color}.loading .input > i.icon::after,
+        .ui.ui.ui.ui.inverted.@{color}.loading > i.icon::after,
+        .ui.ui.ui.inverted.@{color}.loader::after {
             color: @l;
         }
     });
 }
 
-.ui.elastic.loader.loader::before,
-.ui.elastic.loading.loading.loading::before,
-.ui.elastic.loading.loading.loading .input > i.icon::before,
-.ui.elastic.loading.loading.loading > i.icon::before,
-.ui.loading.loading.loading.loading:not(.usual)::after,
-.ui.loading.loading.loading.loading .input > i.icon::after,
-.ui.loading.loading.loading.loading > i.icon::after,
-.ui.loader.loader.loader::after {
+.ui.ui.elastic.loader::before,
+.ui.ui.ui.elastic.loading::before,
+.ui.ui.ui.elastic.loading .input > i.icon::before,
+.ui.ui.ui.elastic.loading > i.icon::before,
+.ui.ui.ui.ui.loading:not(.usual)::after,
+.ui.ui.ui.ui.loading .input > i.icon::after,
+.ui.ui.ui.ui.loading > i.icon::after,
+.ui.ui.ui.loader::after {
     border-color: currentColor;
 }
-.ui.elastic.loading.loading.loading.loading.button:not(.inverted):not(.basic)::before {
+.ui.ui.ui.ui.elastic.loading.button:not(.inverted):not(.basic)::before {
     color: @invertedLoaderLineColor;
 }
 .ui.elastic.basic.loading.button::before,
 .ui.elastic.basic.loading.button::after {
     color: @loaderLineColor;
 }
-.ui.double.loading.loading.loading.loading.button::after {
+.ui.ui.ui.ui.double.loading.button::after {
     border-bottom-color: currentColor;
 }
 
@@ -278,30 +278,30 @@
     }
 }
 
-.ui.loading.loading.loading.loading.loading.loading::after,
-.ui.loading.loading.loading.loading.loading.loading .input > i.icon::after,
-.ui.loading.loading.loading.loading.loading.loading > i.icon::after,
-.ui.loader.loader.loader.loader.loader::after {
+.ui.ui.ui.ui.ui.ui.loading::after,
+.ui.ui.ui.ui.ui.ui.loading .input > i.icon::after,
+.ui.ui.ui.ui.ui.ui.loading > i.icon::after,
+.ui.ui.ui.ui.ui.loader::after {
     border-left-color: transparent;
     border-right-color: transparent;
 }
-.ui.loading.loading.loading.loading.loading.loading.loading:not(.double)::after,
-.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) .input > i.icon::after,
-.ui.loading.loading.loading.loading.loading.loading.loading:not(.double) > i.icon::after,
-.ui.loader.loader.loader.loader.loader.loader:not(.double)::after {
+.ui.ui.ui.ui.ui.ui.ui.loading:not(.double)::after,
+.ui.ui.ui.ui.ui.ui.ui.loading:not(.double) .input > i.icon::after,
+.ui.ui.ui.ui.ui.ui.ui.loading:not(.double) > i.icon::after,
+.ui.ui.ui.ui.ui.ui.loader:not(.double)::after {
     border-bottom-color: transparent;
 }
-.ui.loading.loading.loading.loading.loading.loading.card::after,
-.ui.loading.loading.loading.loading.loading.loading.segments::after,
-.ui.loading.loading.loading.loading.loading.loading.segment::after,
-.ui.loading.loading.loading.loading.loading.loading.form::after {
+.ui.ui.ui.ui.ui.ui.loading.card::after,
+.ui.ui.ui.ui.ui.ui.loading.segments::after,
+.ui.ui.ui.ui.ui.ui.loading.segment::after,
+.ui.ui.ui.ui.ui.ui.loading.form::after {
     border-left-color: @loaderFillColor;
     border-right-color: @loaderFillColor;
 }
-.ui.loading.loading.loading.loading.loading.loading.card:not(.double)::after,
-.ui.loading.loading.loading.loading.loading.loading.segments:not(.double)::after,
-.ui.loading.loading.loading.loading.loading.loading.segment:not(.double)::after,
-.ui.loading.loading.loading.loading.loading.loading.form:not(.double)::after {
+.ui.ui.ui.ui.ui.ui.loading.card:not(.double)::after,
+.ui.ui.ui.ui.ui.ui.loading.segments:not(.double)::after,
+.ui.ui.ui.ui.ui.ui.loading.segment:not(.double)::after,
+.ui.ui.ui.ui.ui.ui.loading.form:not(.double)::after {
     border-bottom-color: @loaderFillColor;
 }
 
@@ -316,17 +316,17 @@
     .ui.inverted.dimmer > .ui.elastic.loader {
         color: @loaderLineColor;
     }
-    .ui.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
-    .ui.elastic.loading.loading .input > i.icon::after,
-    .ui.elastic.loading.loading > i.icon::after,
-    .ui.elastic.loader.loader::after {
+    .ui.ui.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
+    .ui.ui.elastic.loading .input > i.icon::after,
+    .ui.ui.elastic.loading > i.icon::after,
+    .ui.ui.elastic.loader::after {
         animation: loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
         animation-delay: 0.3s;
     }
-    .ui.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
-    .ui.elastic.loading.loading.loading .input > i.icon::before,
-    .ui.elastic.loading.loading.loading > i.icon::before,
-    .ui.elastic.loader.loader::before {
+    .ui.ui.ui.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
+    .ui.ui.ui.elastic.loading .input > i.icon::before,
+    .ui.ui.ui.elastic.loading > i.icon::before,
+    .ui.ui.elastic.loader::before {
         animation: elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
         // https://github.com/fomantic/Fomantic-UI/pull/363
         // stylelint-disable-next-line property-no-vendor-prefix
@@ -339,30 +339,30 @@
         }
     }
     & when (@variationLoaderSpeeds) {
-        .ui.slow.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
-        .ui.slow.elastic.loading.loading .input > i.icon::after,
-        .ui.slow.elastic.loading.loading > i.icon::after,
-        .ui.slow.elastic.loader.loader::after {
+        .ui.ui.slow.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
+        .ui.ui.slow.elastic.loading .input > i.icon::after,
+        .ui.ui.slow.elastic.loading > i.icon::after,
+        .ui.ui.slow.elastic.loader::after {
             animation-duration: 1.5s;
             animation-delay: 0.45s;
         }
-        .ui.slow.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
-        .ui.slow.elastic.loading.loading.loading .input > i.icon::before,
-        .ui.slow.elastic.loading.loading.loading > i.icon::before,
-        .ui.slow.elastic.loader.loader::before {
+        .ui.ui.ui.slow.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
+        .ui.ui.ui.slow.elastic.loading .input > i.icon::before,
+        .ui.ui.ui.slow.elastic.loading > i.icon::before,
+        .ui.ui.slow.elastic.loader::before {
             animation-duration: 1.5s;
         }
-        .ui.fast.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
-        .ui.fast.elastic.loading.loading .input > i.icon::after,
-        .ui.fast.elastic.loading.loading > i.icon::after,
-        .ui.fast.elastic.loader.loader::after {
+        .ui.ui.fast.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::after,
+        .ui.ui.fast.elastic.loading .input > i.icon::after,
+        .ui.ui.fast.elastic.loading > i.icon::after,
+        .ui.ui.fast.elastic.loader::after {
             animation-duration: 0.66s;
             animation-delay: 0.2s;
         }
-        .ui.fast.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
-        .ui.fast.elastic.loading.loading.loading .input > i.icon::before,
-        .ui.fast.elastic.loading.loading.loading > i.icon::before,
-        .ui.fast.elastic.loader.loader::before {
+        .ui.ui.ui.fast.elastic.loading:not(.form):not(.segment):not(.segments):not(.card)::before,
+        .ui.ui.ui.fast.elastic.loading .input > i.icon::before,
+        .ui.ui.ui.fast.elastic.loading > i.icon::before,
+        .ui.ui.fast.elastic.loader::before {
             animation-duration: 0.66s;
         }
     }

package/src/definitions/elements/segment.less

@@ -189,6 +189,9 @@
         margin: @piledMargin 0;
         box-shadow: @piledBoxShadow;
         z-index: @piledZIndex;
+        background-color: @white;
+        border: @piledBorder;
+        color: @textColor;
     }
     .ui.piled.segment:first-child {
         margin-top: 0;
@@ -200,7 +203,7 @@
     .ui.piled.segments::before,
     .ui.piled.segment::after,
     .ui.piled.segment::before {
-        background-color: @white;
+        background-color: inherit;
         visibility: visible;
         content: "";
         display: block;
@@ -208,9 +211,16 @@
         left: 0;
         position: absolute;
         width: 100%;
-        border: @piledBorder;
+        border: inherit;
         box-shadow: @piledBoxShadow;
     }
+    & when (@variationSegmentInverted) {
+        .ui.inverted.piled.segment {
+            background-color: @invertedBackground;
+            border: @invertedPiledBorder;
+            color: @invertedTextColor;
+        }
+    }
     .ui.piled.segments::before,
     .ui.piled.segment::before {
         transform: rotate(-@piledDegrees);
@@ -240,6 +250,12 @@
             margin-bottom: 0;
         }
     }
+    @supports selector(:has(.f)) {
+        *:has(> .ui.piled.segment) {
+            z-index: 0;
+            position: relative;
+        }
+    }
 }
 
 & when (@variationSegmentStacked) {
@@ -258,7 +274,7 @@
         position: absolute;
         bottom: -(@stackedHeight / 2);
         left: 0;
-        border-top: 1px solid @borderColor;
+        border-top: @borderWidth solid @stackedBorderColor;
         background: @stackedPageBackground;
         width: 100%;
         height: @stackedHeight;
@@ -277,12 +293,14 @@
     }
     & when (@variationSegmentInverted) {
         /* Inverted */
-        .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;
+        .ui.stacked.inverted.segments,
+        .ui.stacked.inverted.segment {
+            border: @borderWidth solid @invertedStackedBorderColor;
+            &::before,
+            &::after {
+                background-color: @subtleTransparentBlack;
+                border-top: @borderWidth solid @invertedStackedBorderColor;
+            }
         }
     }
 }
@@ -350,10 +368,16 @@
            Raised
     -------------------- */
 
-    .ui.raised.raised.segments,
-    .ui.raised.raised.segment {
+    .ui.ui.raised.segments,
+    .ui.ui.raised.segment {
         box-shadow: @raisedBoxShadow;
     }
+    & when (@variationSegmentInverted) {
+        .ui.ui.inverted.raised.segments,
+        .ui.ui.inverted.raised.segment {
+            box-shadow: @invertedRaisedBoxShadow;
+        }
+    }
 }
 
 & when (@variationSegmentGroups) {
@@ -521,6 +545,7 @@
         pointer-events: none;
         user-select: none;
         transition: all 0s linear;
+        min-height: @loadingMinHeight;
     }
     .ui.loading.segments::before,
     .ui.loading.segment::before {
@@ -591,13 +616,19 @@
         @color: @value;
         @c: @colors[@@color][color];
         & when not (@color=primary) and not (@color=secondary) {
-            .ui.@{color}.segment.segment.segment.segment.segment:not(.inverted) {
+            .ui.ui.ui.ui.ui.@{color}.segment:not(.inverted) {
                 border-top: @coloredBorderSize solid @c;
             }
             & when (@variationSegmentInverted) {
-                .ui.inverted.@{color}.segment.segment.segment.segment.segment {
+                .ui.ui.ui.ui.ui.inverted.@{color}.segment {
                     background-color: @c;
                     color: @white;
+                    & when not (@variationSegmentPiled) and ((@variationSegmentAttached) or (@variationSegmentStacked)) {
+                        border-color: c;
+                    }
+                }
+                .ui.ui.inverted.@{color}.segment:not(.piled) when (@variationSegmentPiled) and ((@variationSegmentAttached) or (@variationSegmentStacked)) {
+                    border-color: @c;
                 }
             }
         }
@@ -817,24 +848,39 @@
         & when (@variationSegmentScrollingShort) {
             .ui.scrolling.segment.short {
                 max-height: @scrollingMobileMaxHeight * 0.75;
+                &.resizable when (@variationSegmentResizable) {
+                    height: @scrollingMobileMaxHeight * 0.75;
+                }
             }
         }
         & when (@variationSegmentScrollingVeryShort) {
             .ui.scrolling.segment[class*="very short"] {
                 max-height: @scrollingMobileMaxHeight * 0.5;
+                &.resizable when (@variationSegmentResizable) {
+                    height: @scrollingMobileMaxHeight * 0.5;
+                }
             }
         }
         .ui.scrolling.segment {
             max-height: @scrollingMobileMaxHeight;
+            &.resizable when (@variationSegmentResizable) {
+                height: @scrollingMobileMaxHeight;
+            }
         }
         & when (@variationSegmentScrollingLong) {
             .ui.scrolling.segment.long {
                 max-height: @scrollingMobileMaxHeight * 2;
+                &.resizable when (@variationSegmentResizable) {
+                    height: @scrollingMobileMaxHeight * 2;
+                }
             }
         }
         & when (@variationSegmentScrollingVeryLong) {
             .ui.scrolling.segment[class*="very long"] {
                 max-height: @scrollingMobileMaxHeight * 3;
+                &.resizable when (@variationSegmentResizable) {
+                    height: @scrollingMobileMaxHeight * 3;
+                }
             }
         }
     }
@@ -843,24 +889,39 @@
         & when (@variationSegmentScrollingShort) {
             .ui.scrolling.segment.short {
                 max-height: @scrollingTabletMaxHeight * 0.75;
+                &.resizable when (@variationSegmentResizable) {
+                    height: @scrollingTabletMaxHeight * 0.75;
+                }
             }
         }
         & when (@variationSegmentScrollingVeryShort) {
             .ui.scrolling.segment[class*="very short"] {
                 max-height: @scrollingTabletMaxHeight * 0.5;
+                &.resizable when (@variationSegmentResizable) {
+                    height: @scrollingTabletMaxHeight * 0.5;
+                }
             }
         }
         .ui.scrolling.segment {
             max-height: @scrollingTabletMaxHeight;
+            &.resizable when (@variationSegmentResizable) {
+                height: @scrollingTabletMaxHeight;
+            }
         }
         & when (@variationSegmentScrollingLong) {
             .ui.scrolling.segment.long {
                 max-height: @scrollingTabletMaxHeight * 2;
+                &.resizable when (@variationSegmentResizable) {
+                    height: @scrollingTabletMaxHeight * 2;
+                }
             }
         }
         & when (@variationSegmentScrollingVeryLong) {
             .ui.scrolling.segment[class*="very long"] {
                 max-height: @scrollingTabletMaxHeight * 3;
+                &.resizable when (@variationSegmentResizable) {
+                    height: @scrollingTabletMaxHeight * 3;
+                }
             }
         }
     }
@@ -868,24 +929,39 @@
         & when (@variationSegmentScrollingShort) {
             .ui.scrolling.segment.short {
                 max-height: @scrollingComputerMaxHeight * 0.75;
+                &.resizable when (@variationSegmentResizable) {
+                    height: @scrollingComputerMaxHeight * 0.75;
+                }
             }
         }
         & when (@variationSegmentScrollingVeryShort) {
             .ui.scrolling.segment[class*="very short"] {
                 max-height: @scrollingComputerMaxHeight * 0.5;
+                &.resizable when (@variationSegmentResizable) {
+                    height: @scrollingComputerMaxHeight * 0.5;
+                }
             }
         }
         .ui.scrolling.segment {
             max-height: @scrollingComputerMaxHeight;
+            &.resizable when (@variationSegmentResizable) {
+                height: @scrollingComputerMaxHeight;
+            }
         }
         & when (@variationSegmentScrollingLong) {
             .ui.scrolling.segment.long {
                 max-height: @scrollingComputerMaxHeight * 2;
+                &.resizable when (@variationSegmentResizable) {
+                    height: @scrollingComputerMaxHeight * 2;
+                }
             }
         }
         & when (@variationSegmentScrollingVeryLong) {
             .ui.scrolling.segment[class*="very long"] {
                 max-height: @scrollingComputerMaxHeight * 3;
+                &.resizable when (@variationSegmentResizable) {
+                    height: @scrollingComputerMaxHeight * 3;
+                }
             }
         }
     }
@@ -893,27 +969,48 @@
         & when (@variationSegmentScrollingShort) {
             .ui.scrolling.segment.short {
                 max-height: @scrollingWidescreenMaxHeight * 0.75;
+                &.resizable when (@variationSegmentResizable) {
+                    height: @scrollingWidescreenMaxHeight * 0.75;
+                }
             }
         }
         & when (@variationSegmentScrollingVeryShort) {
             .ui.scrolling.segment[class*="very short"] {
                 max-height: @scrollingWidescreenMaxHeight * 0.5;
+                &.resizable when (@variationSegmentResizable) {
+                    height: @scrollingWidescreenMaxHeight * 0.5;
+                }
             }
         }
         .ui.scrolling.segment {
             max-height: @scrollingWidescreenMaxHeight;
+            &.resizable when (@variationSegmentResizable) {
+                height: @scrollingWidescreenMaxHeight;
+            }
         }
         & when (@variationSegmentScrollingLong) {
             .ui.scrolling.segment.long {
                 max-height: @scrollingWidescreenMaxHeight * 2;
+                &.resizable when (@variationSegmentResizable) {
+                    height: @scrollingWidescreenMaxHeight * 2;
+                }
             }
         }
         & when (@variationSegmentScrollingVeryLong) {
             .ui.scrolling.segment[class*="very long"] {
                 max-height: @scrollingWidescreenMaxHeight * 3;
+                &.resizable when (@variationSegmentResizable) {
+                    height: @scrollingWidescreenMaxHeight * 3;
+                }
             }
         }
     }
+    & when (@variationSegmentResizable) {
+        .ui.resizable.scrolling.segment {
+            resize: @resizableDirection;
+            max-height: none;
+        }
+    }
 }
 
 /* -------------------

package/src/definitions/globals/site.js

@@ -292,7 +292,7 @@
                         });
                     }
                     clearTimeout(module.performance.timer);
-                    module.performance.timer = setTimeout(module.performance.display, 500);
+                    module.performance.timer = setTimeout(function () { module.performance.display(); }, 500);
                 },
                 display: function () {
                     var

package/src/definitions/modules/accordion.js

@@ -438,7 +438,7 @@
                             });
                         }
                         clearTimeout(module.performance.timer);
-                        module.performance.timer = setTimeout(module.performance.display, 500);
+                        module.performance.timer = setTimeout(function () { module.performance.display(); }, 500);
                     },
                     display: function () {
                         var

package/src/definitions/modules/calendar.js

@@ -1479,7 +1479,7 @@
                             });
                         }
                         clearTimeout(module.performance.timer);
-                        module.performance.timer = setTimeout(module.performance.display, 500);
+                        module.performance.timer = setTimeout(function () { module.performance.display(); }, 500);
                     },
                     display: function () {
                         var

package/src/definitions/modules/calendar.less

@@ -60,24 +60,24 @@
 .ui.calendar .ui.table.year,
 .ui.calendar .ui.table.month,
 .ui.calendar .ui.table.minute {
-    min-width: 15em;
+    min-width: @widthYearMonthMinute;
 }
 
 .ui.calendar .ui.table.day {
-    min-width: 18em;
+    min-width: @widthDay;
 }
 
 .ui.calendar .ui.table.day.andweek {
-    min-width: 22em;
+    min-width: @widthDayAndWeek;
 }
 
 .ui.calendar .ui.table.hour {
-    min-width: 20em;
+    min-width: @widthHour;
 }
 
 .ui.calendar .ui.table tr th,
 .ui.calendar .ui.table tr td {
-    padding: 0.5em;
+    padding: @cellPadding;
     white-space: nowrap;
 }
 
@@ -100,13 +100,13 @@
 }
 
 .ui.calendar .ui.table.day tr:nth-child(2) th {
-    padding-top: 0.2em;
-    padding-bottom: 0.3em;
+    padding-top: @cellHeaderTopPadding;
+    padding-bottom: @cellHeaderBottomPadding;
 }
 
 .ui.calendar .ui.table tr td {
-    padding-left: 0.1em;
-    padding-right: 0.1em;
+    padding-left: @cellLeftRightPadding;
+    padding-right: @cellLeftRightPadding;
 }
 
 .ui.calendar .ui.table tr .link {
@@ -114,13 +114,13 @@
 }
 
 .ui.calendar .ui.table tr .prev.link {
-    width: 14.28571%;
+    width: @widthPrevNext;
     position: absolute;
     left: 0;
 }
 
 .ui.calendar .ui.table tr .next.link {
-    width: 14.28571%;
+    width: @widthPrevNext;
     position: absolute;
     right: 0;
 }
@@ -196,6 +196,35 @@
     }
 }
 
+/* --------------------
+        Sizes
+--------------------- */
+
+& when not (@variationCalendarSizes = false) {
+    each(@variationCalendarSizes, {
+        @s: @@value;
+        .ui.@{value}.calendar,
+        .ui.@{value}.calendar .ui.table tr th,
+        .ui.@{value}.calendar .ui.table tr td {
+            font-size: @s;
+        }
+        .ui.@{value}.calendar .ui.table.year,
+        .ui.@{value}.calendar .ui.table.month,
+        .ui.@{value}.calendar .ui.table.minute {
+            min-width: unit(@widthYearMonthMinute * @s, em);
+        }
+        .ui.@{value}.calendar .ui.table.day {
+            min-width: unit(@widthDay * @s, em);
+        }
+        .ui.@{value}.calendar .ui.table.day.andweek {
+            min-width: unit(@widthDayAndWeek * @s, em);
+        }
+        .ui.@{value}.calendar .ui.table.hour {
+            min-width: unit(@widthHour * @s, em);
+        }
+    });
+}
+
 /*******************************
             States
 *******************************/

package/src/definitions/modules/checkbox.js

@@ -241,7 +241,9 @@
                             $input.trigger('blur');
                             shortcutPressed = true;
                             event.stopPropagation();
-                        } else if (!event.ctrlKey && module.can.change()) {
+                        } else if (!module.can.change()) {
+                            shortcutPressed = true;
+                        } else if (!event.ctrlKey) {
                             if (key === keyCode.space || (key === keyCode.enter && settings.enableEnterKey)) {
                                 module.verbose('Enter/space key pressed, toggling checkbox');
                                 module.toggle();
@@ -723,7 +725,7 @@
                             });
                         }
                         clearTimeout(module.performance.timer);
-                        module.performance.timer = setTimeout(module.performance.display, 500);
+                        module.performance.timer = setTimeout(function () { module.performance.display(); }, 500);
                     },
                     display: function () {
                         var