fomantic-ui-sass 2.8.6 → 2.8.8

data/app/assets/javascripts/semantic-ui/slider.js

@@ -88,6 +88,7 @@ $.fn.slider = function(parameters) {
         precision,
         isTouch,
         gapRatio = 1,
+        previousValue,
 
         initialPosition,
         initialLoad,
@@ -205,28 +206,26 @@ $.fn.slider = function(parameters) {
             });
           },
           autoLabel: function() {
-            if(module.get.step() != 0) {
-              $labels = $module.find('.labels');
-              if($labels.length != 0) {
-                $labels.empty();
-              }
-              else {
-                $labels = $module.append('<ul class="auto labels"></ul>').find('.labels');
-              }
-              for(var i = 0, len = module.get.numLabels(); i <= len; i++) {
-                var
-                  labelText = module.get.label(i),
-                  $label = (labelText !== "") 
-                    ? !(i % module.get.gapRatio())
-                      ? $('<li class="label">' + labelText + '</li>') 
-                      : $('<li class="halftick label"></li>')
-                    : null,
-                  ratio  = i / len
-                ;
-                if($label) {
-                  module.update.labelPosition(ratio, $label);
-                  $labels.append($label);
-                }
+            $labels = $module.find('.labels');
+            if($labels.length != 0) {
+              $labels.empty();
+            }
+            else {
+              $labels = $module.append('<ul class="auto labels"></ul>').find('.labels');
+            }
+            for(var i = 0, len = module.get.numLabels(); i <= len; i++) {
+              var
+                labelText = module.get.label(i),
+                $label = (labelText !== "")
+                  ? !(i % module.get.gapRatio())
+                    ? $('<li class="label">' + labelText + '</li>')
+                    : $('<li class="halftick label"></li>')
+                  : null,
+                ratio  = i / len
+              ;
+              if($label) {
+                module.update.labelPosition(ratio, $label);
+                $labels.append($label);
               }
             }
           }
@@ -331,7 +330,13 @@ $.fn.slider = function(parameters) {
               } else {
                 $currThumb = module.determine.closestThumb(newPos);
               }
+              if (previousValue === undefined) {
+                previousValue = module.get.currentThumbValue();
+              }
+            } else if (previousValue === undefined) {
+                previousValue = module.get.value();
             }
+
             if(!module.is.disabled()) {
               module.bind.slidingEvents();
             }
@@ -379,6 +384,9 @@ $.fn.slider = function(parameters) {
             var value = module.determine.valueFromEvent(event);
             module.set.value(value);
             module.unbind.slidingEvents();
+            if (previousValue !== undefined) {
+              previousValue = undefined;
+            }
           },
           keydown: function(event, first) {
             if(settings.preventCrossover && module.is.range() && module.thumbVal === module.secondThumbVal) {
@@ -577,7 +585,7 @@ $.fn.slider = function(parameters) {
             return settings.step;
           },
           numLabels: function() {
-            var value = Math.round((module.get.max() - module.get.min()) / module.get.step());
+            var value = Math.round((module.get.max() - module.get.min()) / (module.get.step() === 0 ? 1 : module.get.step()));
             module.debug('Determined that there should be ' + value + ' labels');
             return value;
           },
@@ -591,7 +599,7 @@ $.fn.slider = function(parameters) {
 
             switch (settings.labelType) {
               case settings.labelTypes.number:
-                return Math.round(((value * module.get.step()) + module.get.min()) * precision ) / precision;
+                return Math.round(((value * (module.get.step() === 0 ? 1 : module.get.step())) + module.get.min()) * precision ) / precision;
               case settings.labelTypes.letter:
                 return alphabet[(value) % 26];
               default:
@@ -789,9 +797,8 @@ $.fn.slider = function(parameters) {
             }
             // Use precision to avoid ugly Javascript floating point rounding issues
             // (like 35 * .01 = 0.35000000000000003)
-            difference = Math.round(difference * precision) / precision;
             module.verbose('Cutting off additional decimal places');
-            return difference + module.get.min();
+            return Math.round((difference + module.get.min()) * precision) / precision;
           },
           keyMovement: function(event) {
             var
@@ -854,20 +861,31 @@ $.fn.slider = function(parameters) {
         },
 
         set: {
-          value: function(newValue) {
+          value: function(newValue, fireChange) {
+            fireChange = fireChange !== false;
+            var toReset = previousValue === undefined;
+            previousValue = previousValue === undefined ? module.get.value() : previousValue;
             module.update.value(newValue, function(value, thumbVal, secondThumbVal) {
-              if (!initialLoad || settings.fireOnInit){
-                settings.onChange.call(element, value, thumbVal, secondThumbVal);
+              if ((!initialLoad || settings.fireOnInit) && fireChange){
+                if (newValue !== previousValue) {
+                  settings.onChange.call(element, value, thumbVal, secondThumbVal);
+                }
                 settings.onMove.call(element, value, thumbVal, secondThumbVal);
               }
+              if (toReset) {
+                previousValue = undefined;
+              }
             });
           },
-          rangeValue: function(first, second) {
+          rangeValue: function(first, second, fireChange) {
+            fireChange = fireChange !== false;
             if(module.is.range()) {
               var
                 min = module.get.min(),
-                max = module.get.max()
+                max = module.get.max(),
+                toReset = previousValue === undefined
               ;
+              previousValue = previousValue === undefined ? module.get.value() : previousValue;
               if (first <= min) {
                 first = min;
               } else if(first >= max){
@@ -883,10 +901,15 @@ $.fn.slider = function(parameters) {
               value = Math.abs(module.thumbVal - module.secondThumbVal);
               module.update.position(module.thumbVal, $thumb);
               module.update.position(module.secondThumbVal, $secondThumb);
-              if (!initialLoad || settings.fireOnInit) {
-                settings.onChange.call(element, value, module.thumbVal, module.secondThumbVal);
+              if ((!initialLoad || settings.fireOnInit) && fireChange) {
+                if (value !== previousValue) {
+                  settings.onChange.call(element, value, module.thumbVal, module.secondThumbVal);
+                }
                 settings.onMove.call(element, value, module.thumbVal, module.secondThumbVal);
               }
+              if (toReset) {
+                previousValue = undefined;
+              }
             } else {
               module.error(error.notrange);
             }
@@ -1271,6 +1294,7 @@ $.fn.slider.settings = {
   labelDistance    : 100,
   preventCrossover : true,
   fireOnInit       : false,
+  interpretLabel   : false,
 
   //the decimal place to round to if step is undefined
   decimalPlaces  : 2,

data/app/assets/javascripts/semantic-ui/toast.js

@@ -144,15 +144,15 @@ $.fn.toast = function(parameters) {
         create: {
           container: function() {
             module.verbose('Creating container');
-            $context.append($('<div/>',{class: settings.position + ' ' + className.container}));
+            $context.append($('<div/>',{class: settings.position + ' ' + className.container + ' ' +(settings.horizontal ? className.horizontal : '')}));
           },
           toast: function() {
             $toastBox = $('<div/>', {class: className.box});
+            var iconClass = module.get.iconClass();
             if (!isToastComponent) {
               module.verbose('Creating toast');
               $toast = $('<div/>');
               var $content = $('<div/>', {class: className.content});
-              var iconClass = module.get.iconClass();
               if (iconClass !== '') {
                 $toast.append($('<i/>', {class: iconClass + ' ' + className.icon}));
               }
@@ -170,7 +170,7 @@ $.fn.toast = function(parameters) {
                 }));
               }
 
-              $content.append($('<div/>', {html: module.helpers.escape(settings.message, settings.preserveHTML)}));
+              $content.append($('<div/>', {class: className.message, html: module.helpers.escape(settings.message, settings.preserveHTML)}));
 
               $toast
                 .addClass(settings.class + ' ' + className.toast)
@@ -189,6 +189,18 @@ $.fn.toast = function(parameters) {
               $toast = settings.cloneModule ? $module.clone().removeAttr('id') : $module;
               $close = $toast.find('> i'+module.helpers.toClass(className.close));
               settings.closeIcon = ($close.length > 0);
+              if (iconClass !== '') {
+                $toast.find(selector.icon).attr('class',iconClass + ' ' + className.icon);
+              }
+              if (settings.showImage) {
+                $toast.find(selector.image).attr('src',settings.showImage);
+              }
+              if (settings.title !== '') {
+                $toast.find(selector.title).html(module.helpers.escape(settings.title, settings.preserveHTML));
+              }
+              if (settings.message !== '') {
+                $toast.find(selector.message).html(module.helpers.escape(settings.message, settings.preserveHTML));
+              }
             }
             if ($toast.hasClass(className.compact)) {
               settings.compact = true;
@@ -391,7 +403,7 @@ $.fn.toast = function(parameters) {
                       if(settings.transition.closeEasing !== ''){
                           if($toastBox) {
                             $toastBox.css('opacity', 0);
-                            $toastBox.wrap('<div/>').parent().slideUp(500, settings.transition.closeEasing, function () {
+                            $toastBox.wrap('<div/>').parent().hide(settings.transition.closeDuration, settings.transition.closeEasing, function () {
                               if ($toastBox) {
                                 $toastBox.parent().remove();
                                 callback.call($toastBox);
@@ -431,7 +443,7 @@ $.fn.toast = function(parameters) {
         has: {
           container: function() {
             module.verbose('Determining if there is already a container');
-            return ($context.find(module.helpers.toClass(settings.position) + selector.container).length > 0);
+            return ($context.find(module.helpers.toClass(settings.position) + selector.container + (settings.horizontal ? module.helpers.toClass(className.horizontal) : '')).length > 0);
           },
           toast: function(){
             return !!module.get.toast();
@@ -750,6 +762,7 @@ $.fn.toast.settings = {
   context        : 'body',
 
   position       : 'top right',
+  horizontal     : false,
   class          : 'neutral',
   classProgress  : false,
   classActions   : false,
@@ -780,7 +793,8 @@ $.fn.toast.settings = {
     showDuration : 500,
     hideMethod   : 'scale',
     hideDuration : 500,
-    closeEasing  : 'easeOutCubic'  //Set to empty string to stack the closed toast area immediately (old behaviour)
+    closeEasing  : 'easeOutCubic',  //Set to empty string to stack the closed toast area immediately (old behaviour)
+    closeDuration: 500
   },
 
   error: {
@@ -798,6 +812,7 @@ $.fn.toast.settings = {
     visible      : 'visible',
     content      : 'content',
     title        : 'ui header',
+    message      : 'message',
     actions      : 'actions',
     extraContent : 'extra content',
     button       : 'ui button',
@@ -805,6 +820,7 @@ $.fn.toast.settings = {
     close        : 'close icon',
     image        : 'ui image',
     vertical     : 'vertical',
+    horizontal   : 'horizontal',
     attached     : 'attached',
     inverted     : 'inverted',
     compact      : 'compact',
@@ -828,6 +844,10 @@ $.fn.toast.settings = {
     container    : '.ui.toast-container',
     box          : '.toast-box',
     toast        : '.ui.toast',
+    title        : '.header',
+    message      : '.message:not(.ui)',
+    image        : '> img.image, > .image > img',
+    icon         : '> i.icon',
     input        : 'input:not([type="hidden"]), textarea, select, button, .ui.button, ui.dropdown',
     approve      : '.actions .positive, .actions .approve, .actions .ok',
     deny         : '.actions .negative, .actions .deny, .actions .cancel'

data/app/assets/stylesheets/semantic-ui/collections/_breadcrumb.scss

@@ -1,5 +1,5 @@
 /*!
- * # Fomantic-UI - Breadcrumb
+ * # Fomantic-UI 2.8.8 - Breadcrumb
  * http://github.com/fomantic/Fomantic-UI/
  *
  *

data/app/assets/stylesheets/semantic-ui/collections/_form.scss

@@ -1,5 +1,5 @@
 /*!
- * # Fomantic-UI - Form
+ * # Fomantic-UI 2.8.8 - Form
  * http://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -372,6 +372,7 @@
 }
 .ui.form ::-moz-placeholder {
   color: rgba(191, 191, 191, 0.87);
+  opacity: 1;
 }
 .ui.form :focus::-webkit-input-placeholder {
   color: rgba(115, 115, 115, 0.87);
@@ -480,11 +481,17 @@
   display: flex;
 }
 .ui.ui.form .fields.error .field label,
+.ui.ui.form .fields.error .field .ui.label:not(.corner),
 .ui.ui.form .field.error label,
+.ui.ui.form .field.error .ui.label:not(.corner),
 .ui.ui.form .fields.error .field .input,
 .ui.ui.form .field.error .input {
   color: #9F3A38;
 }
+.ui.form .fields.error .field .ui.label,
+.ui.form .field.error .ui.label {
+  background-color: #ecd1d1;
+}
 .ui.form .fields.error .field .corner.label,
 .ui.form .field.error .corner.label {
   border-color: #9F3A38;
@@ -599,7 +606,7 @@
 .ui.form .fields.error .field .ui.dropdown,
 .ui.form .fields.error .field .ui.dropdown .item,
 .ui.form .field.error .ui.dropdown,
-.ui.form .field.error .ui.dropdown .text,
+.ui.form .field.error .ui.dropdown > .text,
 .ui.form .field.error .ui.dropdown .item {
   background: #FFF6F6;
   color: #9F3A38;
@@ -663,6 +670,10 @@
 .ui.form .field.error .checkbox .box:after {
   color: #9F3A38;
 }
+.ui.inverted.form .fields.error .field label,
+.ui.inverted.form .error.field label {
+  color: #ecd1d1;
+}
 
 /* On Form */
 .ui.form.info .info.message:not(:empty) {
@@ -693,11 +704,17 @@
   display: flex;
 }
 .ui.ui.form .fields.info .field label,
+.ui.ui.form .fields.info .field .ui.label:not(.corner),
 .ui.ui.form .field.info label,
+.ui.ui.form .field.info .ui.label:not(.corner),
 .ui.ui.form .fields.info .field .input,
 .ui.ui.form .field.info .input {
   color: #276F86;
 }
+.ui.form .fields.info .field .ui.label,
+.ui.form .field.info .ui.label {
+  background-color: #c6e3e9;
+}
 .ui.form .fields.info .field .corner.label,
 .ui.form .field.info .corner.label {
   border-color: #276F86;
@@ -812,7 +829,7 @@
 .ui.form .fields.info .field .ui.dropdown,
 .ui.form .fields.info .field .ui.dropdown .item,
 .ui.form .field.info .ui.dropdown,
-.ui.form .field.info .ui.dropdown .text,
+.ui.form .field.info .ui.dropdown > .text,
 .ui.form .field.info .ui.dropdown .item {
   background: #F8FFFF;
   color: #276F86;
@@ -876,6 +893,10 @@
 .ui.form .field.info .checkbox .box:after {
   color: #276F86;
 }
+.ui.inverted.form .fields.info .field label,
+.ui.inverted.form .info.field label {
+  color: #c6e3e9;
+}
 
 /* On Form */
 .ui.form.success .success.message:not(:empty) {
@@ -906,11 +927,17 @@
   display: flex;
 }
 .ui.ui.form .fields.success .field label,
+.ui.ui.form .fields.success .field .ui.label:not(.corner),
 .ui.ui.form .field.success label,
+.ui.ui.form .field.success .ui.label:not(.corner),
 .ui.ui.form .fields.success .field .input,
 .ui.ui.form .field.success .input {
   color: #2C662D;
 }
+.ui.form .fields.success .field .ui.label,
+.ui.form .field.success .ui.label {
+  background-color: #b9d1ad;
+}
 .ui.form .fields.success .field .corner.label,
 .ui.form .field.success .corner.label {
   border-color: #2C662D;
@@ -1025,7 +1052,7 @@
 .ui.form .fields.success .field .ui.dropdown,
 .ui.form .fields.success .field .ui.dropdown .item,
 .ui.form .field.success .ui.dropdown,
-.ui.form .field.success .ui.dropdown .text,
+.ui.form .field.success .ui.dropdown > .text,
 .ui.form .field.success .ui.dropdown .item {
   background: #FCFFF5;
   color: #2C662D;
@@ -1089,6 +1116,10 @@
 .ui.form .field.success .checkbox .box:after {
   color: #2C662D;
 }
+.ui.inverted.form .fields.success .field label,
+.ui.inverted.form .success.field label {
+  color: #b9d1ad;
+}
 
 /* On Form */
 .ui.form.warning .warning.message:not(:empty) {
@@ -1119,11 +1150,17 @@
   display: flex;
 }
 .ui.ui.form .fields.warning .field label,
+.ui.ui.form .fields.warning .field .ui.label:not(.corner),
 .ui.ui.form .field.warning label,
+.ui.ui.form .field.warning .ui.label:not(.corner),
 .ui.ui.form .fields.warning .field .input,
 .ui.ui.form .field.warning .input {
   color: #573A08;
 }
+.ui.form .fields.warning .field .ui.label,
+.ui.form .field.warning .ui.label {
+  background-color: #d7ccb5;
+}
 .ui.form .fields.warning .field .corner.label,
 .ui.form .field.warning .corner.label {
   border-color: #573A08;
@@ -1238,7 +1275,7 @@
 .ui.form .fields.warning .field .ui.dropdown,
 .ui.form .fields.warning .field .ui.dropdown .item,
 .ui.form .field.warning .ui.dropdown,
-.ui.form .field.warning .ui.dropdown .text,
+.ui.form .field.warning .ui.dropdown > .text,
 .ui.form .field.warning .ui.dropdown .item {
   background: #FFFAF3;
   color: #573A08;
@@ -1302,6 +1339,10 @@
 .ui.form .field.warning .checkbox .box:after {
   color: #573A08;
 }
+.ui.inverted.form .fields.warning .field label,
+.ui.inverted.form .warning.field label {
+  color: #d7ccb5;
+}
 
 /*--------------------
          Disabled
@@ -1471,6 +1512,9 @@
   margin: 0.5em 0;
   padding: 0;
 }
+.ui.form .grouped.inline.fields .ui.checkbox {
+  margin-bottom: 0.4em;
+}
 
 /*--------------------
         Fields
@@ -1544,28 +1588,11 @@
   .ui.form .fields {
     -ms-flex-wrap: wrap;
         flex-wrap: wrap;
+    margin-bottom: 0;
   }
-  .ui[class*="equal width"].form:not(.unstackable) .fields > .field,
-  .ui.form:not(.unstackable) [class*="equal width"].fields:not(.unstackable) > .field,
-  .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .fields,
-  .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .field,
-  .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .fields,
-  .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .field,
-  .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .fields,
-  .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .field,
-  .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .fields,
-  .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .field,
-  .ui.form:not(.unstackable) .six.fields:not(.unstackable) > .fields,
-  .ui.form:not(.unstackable) .six.fields:not(.unstackable) > .field,
-  .ui.form:not(.unstackable) .seven.fields:not(.unstackable) > .fields,
-  .ui.form:not(.unstackable) .seven.fields:not(.unstackable) > .field,
-  .ui.form:not(.unstackable) .eight.fields:not(.unstackable) > .fields,
-  .ui.form:not(.unstackable) .eight.fields:not(.unstackable) > .field,
-  .ui.form:not(.unstackable) .nine.fields:not(.unstackable) > .fields,
-  .ui.form:not(.unstackable) .nine.fields:not(.unstackable) > .field,
-  .ui.form:not(.unstackable) .ten.fields:not(.unstackable) > .fields,
-  .ui.form:not(.unstackable) .ten.fields:not(.unstackable) > .field {
-    width: 100% !important;
+  .ui.form:not(.unstackable) .fields:not(.unstackable) > .fields,
+  .ui.form:not(.unstackable) .fields:not(.unstackable) > .field {
+    width: 100%;
     margin: 0 0 1em;
   }
 }
@@ -1577,84 +1604,52 @@
   padding-right: 0.5em;
 }
 .ui.form .one.wide.field {
-  width: 6.25% !important;
+  width: 6.25%;
 }
 .ui.form .two.wide.field {
-  width: 12.5% !important;
+  width: 12.5%;
 }
 .ui.form .three.wide.field {
-  width: 18.75% !important;
+  width: 18.75%;
 }
 .ui.form .four.wide.field {
-  width: 25% !important;
+  width: 25%;
 }
 .ui.form .five.wide.field {
-  width: 31.25% !important;
+  width: 31.25%;
 }
 .ui.form .six.wide.field {
-  width: 37.5% !important;
+  width: 37.5%;
 }
 .ui.form .seven.wide.field {
-  width: 43.75% !important;
+  width: 43.75%;
 }
 .ui.form .eight.wide.field {
-  width: 50% !important;
+  width: 50%;
 }
 .ui.form .nine.wide.field {
-  width: 56.25% !important;
+  width: 56.25%;
 }
 .ui.form .ten.wide.field {
-  width: 62.5% !important;
+  width: 62.5%;
 }
 .ui.form .eleven.wide.field {
-  width: 68.75% !important;
+  width: 68.75%;
 }
 .ui.form .twelve.wide.field {
-  width: 75% !important;
+  width: 75%;
 }
 .ui.form .thirteen.wide.field {
-  width: 81.25% !important;
+  width: 81.25%;
 }
 .ui.form .fourteen.wide.field {
-  width: 87.5% !important;
+  width: 87.5%;
 }
 .ui.form .fifteen.wide.field {
-  width: 93.75% !important;
+  width: 93.75%;
 }
 .ui.form .sixteen.wide.field {
-  width: 100% !important;
-}
-
-/* Swap to full width on mobile */
-@media only screen and (max-width: 767.98px) {
-  .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .fields,
-  .ui.form:not(.unstackable) .two.fields:not(.unstackable) > .field,
-  .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .fields,
-  .ui.form:not(.unstackable) .three.fields:not(.unstackable) > .field,
-  .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .fields,
-  .ui.form:not(.unstackable) .four.fields:not(.unstackable) > .field,
-  .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .fields,
-  .ui.form:not(.unstackable) .five.fields:not(.unstackable) > .field,
-  .ui.form:not(.unstackable) .fields:not(.unstackable) > .two.wide.field,
-  .ui.form:not(.unstackable) .fields:not(.unstackable) > .three.wide.field,
-  .ui.form:not(.unstackable) .fields:not(.unstackable) > .four.wide.field,
-  .ui.form:not(.unstackable) .fields:not(.unstackable) > .five.wide.field,
-  .ui.form:not(.unstackable) .fields:not(.unstackable) > .six.wide.field,
-  .ui.form:not(.unstackable) .fields:not(.unstackable) > .seven.wide.field,
-  .ui.form:not(.unstackable) .fields:not(.unstackable) > .eight.wide.field,
-  .ui.form:not(.unstackable) .fields:not(.unstackable) > .nine.wide.field,
-  .ui.form:not(.unstackable) .fields:not(.unstackable) > .ten.wide.field,
-  .ui.form:not(.unstackable) .fields:not(.unstackable) > .eleven.wide.field,
-  .ui.form:not(.unstackable) .fields:not(.unstackable) > .twelve.wide.field,
-  .ui.form:not(.unstackable) .fields:not(.unstackable) > .thirteen.wide.field,
-  .ui.form:not(.unstackable) .fields:not(.unstackable) > .fourteen.wide.field,
-  .ui.form:not(.unstackable) .fields:not(.unstackable) > .fifteen.wide.field,
-  .ui.form:not(.unstackable) .fields:not(.unstackable) > .sixteen.wide.field {
-    width: 100% !important;
-  }
-  .ui.form .fields {
-    margin-bottom: 0;
-  }
+  width: 100%;
 }
 
 /*--------------------

data/app/assets/stylesheets/semantic-ui/collections/_grid.scss

@@ -1,5 +1,5 @@
 /*!
- * # Fomantic-UI - Grid
+ * # Fomantic-UI 2.8.8 - Grid
  * http://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -1320,9 +1320,8 @@
 .ui.grid > .justified.column.column,
 .ui.grid > .row > .justified.column.column {
   text-align: justify;
-  -webkit-hyphens: auto;
-      -ms-hyphens: auto;
-          hyphens: auto;
+  -ms-hyphens: auto;
+      hyphens: auto;
 }
 
 /*----------------------
@@ -1794,7 +1793,7 @@
   --------------------*/
 
 @media only screen and (max-width: 767.98px) {
-  .ui.stackable.grid {
+  .ui.ui.ui.ui.stackable.grid {
     width: auto;
     margin-left: 0 !important;
     margin-right: 0 !important;
@@ -1998,6 +1997,9 @@
         Compact
   -----------------*/
 
+.ui.ui.ui.compact.grid {
+  margin: -0.5rem;
+}
 .ui.ui.ui.compact.grid > .column:not(.row),
 .ui.ui.ui.compact.grid > .row > .column {
   padding-left: 0.5rem;
@@ -2012,6 +2014,8 @@
 .ui.ui.ui.compact.grid > .row {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 /* Columns */
@@ -2034,6 +2038,9 @@
       Very compact
   -----------------*/
 
+.ui.ui.ui[class*="very compact"].grid {
+  margin: -0.25rem;
+}
 .ui.ui.ui[class*="very compact"].grid > .column:not(.row),
 .ui.ui.ui[class*="very compact"].grid > .row > .column {
   padding-left: 0.25rem;
@@ -2048,8 +2055,8 @@
 .ui.ui.ui[class*="very compact"].grid > .row {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 /* Columns */