Update FUI

semantic/dist/components/api.js

@@ -65,7 +65,7 @@ $.api = $.fn.api = function(parameters) {
 
         // context used for state
         $context        = (settings.stateContext)
-          ? $(settings.stateContext)
+          ? ([window,document].indexOf(settings.stateContext) < 0 ? $(document).find(settings.stateContext) : $(settings.stateContext))
           : $module,
 
         // request details
@@ -74,6 +74,7 @@ $.api = $.fn.api = function(parameters) {
         url,
         data,
         requestStartTime,
+        originalData,
 
         // standard module
         element         = this,
@@ -86,6 +87,7 @@ $.api = $.fn.api = function(parameters) {
 
         initialize: function() {
           if(!methodInvoked) {
+            originalData = settings.data;
             module.bind.events();
           }
           module.instantiate();
@@ -132,7 +134,7 @@ $.api = $.fn.api = function(parameters) {
                response = JSON.parse(response);
               }
               catch(e) {
-                // isnt json string
+                // isn't json string
               }
             }
             return response;
@@ -148,8 +150,8 @@ $.api = $.fn.api = function(parameters) {
               module.error(error.noStorage);
               return;
             }
-            response = sessionStorage.getItem(url);
+            response = sessionStorage.getItem(url + module.get.normalizedData());
-            module.debug('Using cached response', url, response);
+            module.debug('Using cached response', url, settings.data, response);
             response = module.decode.json(response);
             return response;
           }
@@ -167,8 +169,8 @@ $.api = $.fn.api = function(parameters) {
             if( $.isPlainObject(response) ) {
               response = JSON.stringify(response);
             }
-            sessionStorage.setItem(url, response);
+            sessionStorage.setItem(url + module.get.normalizedData(), response);
-            module.verbose('Storing cached response for url', url, response);
+            module.verbose('Storing cached response for url', url, settings.data, response);
           }
         },
 
@@ -197,7 +199,7 @@ $.api = $.fn.api = function(parameters) {
 
           // Add form content
           if(settings.serializeForm) {
-            settings.data = module.add.formData(settings.data);
+            settings.data = module.add.formData(originalData || settings.data);
           }
 
           // call beforesend and get any settings changes
@@ -334,10 +336,6 @@ $.api = $.fn.api = function(parameters) {
           cancelled: function() {
             return (module.cancelled || false);
           },
-          succesful: function() {
-            module.verbose('This behavior will be deleted due to typo. Use "was successful" instead.');
-            return module.was.successful();
-          },
           successful: function() {
             return (module.request && module.request.state() == 'resolved');
           },
@@ -365,8 +363,8 @@ $.api = $.fn.api = function(parameters) {
                   var
                     // allow legacy {$var} style
                     variable = (templatedString.indexOf('$') !== -1)
-                      ? templatedString.substr(2, templatedString.length - 3)
+                      ? templatedString.slice(2, -1)
-                      : templatedString.substr(1, templatedString.length - 2),
+                      : templatedString.slice(1, -1),
                     value   = ($.isPlainObject(urlData) && urlData[variable] !== undefined)
                       ? urlData[variable]
                       : ($module.data(variable) !== undefined)
@@ -397,8 +395,8 @@ $.api = $.fn.api = function(parameters) {
                   var
                     // allow legacy {/$var} style
                     variable = (templatedString.indexOf('$') !== -1)
-                      ? templatedString.substr(3, templatedString.length - 4)
+                      ? templatedString.slice(3, -1)
-                      : templatedString.substr(2, templatedString.length - 3),
+                      : templatedString.slice(2, -1),
                     value   = ($.isPlainObject(urlData) && urlData[variable] !== undefined)
                       ? urlData[variable]
                       : ($module.data(variable) !== undefined)
@@ -429,24 +427,76 @@ $.api = $.fn.api = function(parameters) {
           },
           formData: function(data) {
             var
-              canSerialize = ($.fn.serializeObject !== undefined),
+              formData = {},
-              formData     = (canSerialize)
+              hasOtherData,
-                ? $form.serializeObject()
+              useFormDataApi = settings.serializeForm === 'formdata'
-                : $form.serialize(),
-              hasOtherData
             ;
-            data         = data || settings.data;
+            data         = data || originalData || settings.data;
             hasOtherData = $.isPlainObject(data);
 
+            if (useFormDataApi) {
+              formData = new FormData($form[0]);
+              settings.processData = typeof settings.processData !== 'undefined' ? settings.processData : false;
+              settings.contentType = typeof settings.contentType !== 'undefined' ? settings.contentType : false;
+            } else {
+              var formArray = $form.serializeArray(),
+                  pushes = {},
+                  pushValues= {},
+                  build = function(base, key, value) {
+                    base[key] = value;
+                    return base;
+                  }
+              ;
+              // add files
+              $.each($('input[type="file"]',$form), function(i, tag) {
+                $.each($(tag)[0].files, function(j, file) {
+                  formArray.push({name:tag.name, value: file});
+                });
+              });
+              $.each(formArray, function(i, el) {
+                if (!settings.regExp.validate.test(el.name)) return;
+                var isCheckbox = $('[name="' + el.name + '"]', $form).attr('type') === 'checkbox',
+                    floatValue = parseFloat(el.value),
+                    value = (isCheckbox && el.value === 'on') || el.value === 'true' || (String(floatValue) === el.value ? floatValue : (el.value === 'false' ? false : el.value)),
+                    nameKeys = el.name.match(settings.regExp.key) || [], k, pushKey= el.name.replace(/\[\]$/,'')
+                ;
+                if(!(pushKey in pushes)) {
+                  pushes[pushKey] = 0;
+                  pushValues[pushKey] = value;
+                } else if (Array.isArray(pushValues[pushKey])) {
+                  pushValues[pushKey].push(value);
+                } else {
+                  pushValues[pushKey] = [pushValues[pushKey] , value];
+                }
+                value = pushValues[pushKey];
+
+                while ((k = nameKeys.pop()) !== undefined) {
+                  // foo[]
+                  if (k == '' && !Array.isArray(value)){
+                    value = build([], pushes[pushKey]++, value);
+                  }
+                  // foo[n]
+                  else if (settings.regExp.fixed.test(k)) {
+                    value = build([], k, value);
+                  }
+                  // foo; foo[bar]
+                  else if (settings.regExp.named.test(k)) {
+                    value = build({}, k, value);
+                  }
+                }
+                formData = $.extend(true, formData, value);
+              });
+            }
+
             if(hasOtherData) {
-              if(canSerialize) {
+              module.debug('Extending existing data with form data', data, formData);
-                module.debug('Extending existing data with form data', data, formData);
+              if(useFormDataApi) {
-                data = $.extend(true, {}, data, formData);
+                $.each(Object.keys(data),function(i, el){
-              }
+                  formData.append(el, data[el]);
-              else {
+                });
-                module.error(error.missingSerialize);
-                module.debug('Cant extend data. Replacing data with form data', data, formData);
                 data = formData;
+              } else {
+                data = $.extend(true, {}, data, formData);
               }
             }
             else {
@@ -698,6 +748,9 @@ $.api = $.fn.api = function(parameters) {
         },
 
         get: {
+          normalizedData: function(){
+            return typeof settings.data === "string" ? settings.data : JSON.stringify(settings.data, Object.keys(settings.data).sort());
+          },
           responseFromXHR: function(xhr) {
             return $.isPlainObject(xhr)
               ? (module.is.expectingJSON())
@@ -1083,6 +1136,8 @@ $.api.settings = {
   defaultData          : true,
 
   // whether to serialize closest form
+  // use true to convert complex named keys like a[b][1][c][] into a nested object
+  // use 'formdata' for formdata web api
   serializeForm        : false,
 
   // how long to wait before request should occur
@@ -1105,7 +1160,7 @@ $.api.settings = {
   responseAsync     : false,
 
 // whether onResponse should work with response value without force converting into an object
-  rawResponse       : false,
+  rawResponse       : true,
 
   // callbacks before request
   beforeSend  : function(settings) { return settings; },
@@ -1141,7 +1196,6 @@ $.api.settings = {
     legacyParameters  : 'You are using legacy API success callback names',
     method            : 'The method you called is not defined',
     missingAction     : 'API action used but no url was defined',
-    missingSerialize  : 'jquery-serialize-object is required to add form data to an existing data object',
     missingURL        : 'No URL specified for api event',
     noReturnedValue   : 'The beforeSend callback must return a settings object, beforeSend ignored.',
     noStorage         : 'Caching responses locally requires session storage',
@@ -1154,6 +1208,11 @@ $.api.settings = {
   regExp  : {
     required : /\{\$*[A-z0-9]+\}/g,
     optional : /\{\/\$*[A-z0-9]+\}/g,
+    validate: /^[a-z_][a-z0-9_-]*(?:\[[a-z0-9_-]*\])*$/i,
+    key:      /[a-z0-9_-]+|(?=\[\])/gi,
+    push:     /^$/,
+    fixed:    /^\d+$/,
+    named:    /^[a-z0-9_-]+$/i
   },
 
   className: {

semantic/dist/components/calendar.css

@@ -68,7 +68,6 @@
 .ui.calendar .ui.table tr td {
   padding: 0.5em;
   white-space: nowrap;
-  text-align: center;
 }
 .ui.calendar .ui.table tr th {
   border-left: none;
@@ -130,8 +129,8 @@
 }
 .ui.calendar:not(.disabled) .calendar:focus .ui.table tbody tr td.focus,
 .ui.calendar:not(.disabled) .calendar.active .ui.table tbody tr td.focus {
-  -webkit-box-shadow: inset 0 0 0 1px #6435C9;
+  -webkit-box-shadow: inset 0 0 0 1px #85B7D9;
-          box-shadow: inset 0 0 0 1px #6435C9;
+          box-shadow: inset 0 0 0 1px #85B7D9;
 }
 .ui.inverted.calendar .ui.table.inverted tr td.range {
   background: rgba(255, 255, 255, 0.08);
@@ -141,8 +140,8 @@
 }
 .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 {
-  -webkit-box-shadow: inset 0 0 0 1px #6435C9;
+  -webkit-box-shadow: inset 0 0 0 1px #85B7D9;
-          box-shadow: inset 0 0 0 1px #6435C9;
+          box-shadow: inset 0 0 0 1px #85B7D9;
 }
 .ui.inverted.calendar .ui.inverted.table tr .disabled {
   color: rgba(225, 225, 225, 0.3);
@@ -151,6 +150,23 @@
   color: rgba(255, 255, 255, 0.8);
   background: rgba(255, 255, 255, 0.02);
 }
+.ui.calendar.popup > .ui.ui.grid {
+  margin: -1rem;
+}
+.ui.calendar.popup > .ui.ui.grid > .column:not(:first-child) {
+  padding-left: 0;
+}
+.ui.calendar.popup > .ui.ui.grid > .column:not(:first-child) > .ui.table {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.ui.calendar.popup > .ui.ui.grid > .column:not(:last-child) {
+  padding-right: 0;
+}
+.ui.calendar.popup > .ui.ui.grid > .column:not(:last-child) > .ui.table {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
 
 
 /*******************************

semantic/dist/components/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
@@ -323,7 +322,7 @@ $.fn.calendar = function(parameters) {
                 var headerDate = isYear || isMonth ? new Date(year, 0, 1) :
                   isDay ? new Date(year, month, 1) : new Date(year, month, day, hour, minute);
                 var headerText = $('<span/>').addClass(className.link).appendTo(cell);
-                headerText.text(formatter.header(headerDate, mode, settings));
+                headerText.text(module.helper.dateFormat(formatter[mode+'Header'], headerDate));
                 var newMode = isMonth ? (settings.disableYear ? 'day' : 'year') :
                   isDay ? (settings.disableMonth ? 'year' : 'month') : 'day';
                 headerText.data(metadata.mode, newMode);
@@ -371,7 +370,7 @@ $.fn.calendar = function(parameters) {
                       isHour ? new Date(year, month, day, i) : new Date(year, month, day, hour, i * settings.minTimeGap);
                   var cellText = isYear ? i :
                     isMonth ? settings.text.monthsShort[i] : isDay ? cellDate.getDate() :
-                      formatter.time(cellDate, settings, true);
+                        module.helper.dateFormat(formatter.cellTime,cellDate);
                   cell = $('<td/>').addClass(className.cell).appendTo(row);
                   cell.text(cellText);
                   cell.data(metadata.date, cellDate);
@@ -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) {
@@ -490,7 +502,7 @@ $.fn.calendar = function(parameters) {
           var winWidth = $(window).width();
           $container.find('td[data-position]').each(function () {
             var cell = $(this);
-            var tooltipWidth = window.getComputedStyle(cell[0], ':after').width.replace(/[^0-9\.]/g,'');
+            var tooltipWidth = window.getComputedStyle(cell[0], '::after').width.replace(/[^0-9\.]/g,'');
             var tooltipPosition = cell.attr('data-position');
             // use a fallback width of 250 (calendar width) for IE/Edge (which return "auto")
             var calcPosition = (winWidth - cell.width() - (parseInt(tooltipWidth,10) || 250)) > cell.offset().left ? 'right' : 'left';
@@ -611,7 +623,9 @@ $.fn.calendar = function(parameters) {
                 var mode = module.get.mode();
                 var date = module.get.focusDate();
                 if (date && !settings.isDisabled(date, mode) && !module.helper.isDisabled(date, mode) && module.helper.isEnabled(date, mode)) {
-                  module.selectDate(date);
+                  if (settings.onSelect.call(element, date, module.get.mode()) !== false) {
+                    module.selectDate(date);
+                  }
                 }
                 //disable form submission:
                 event.preventDefault();
@@ -637,7 +651,7 @@ $.fn.calendar = function(parameters) {
             $container.removeClass(className.active);
             if (settings.formatInput) {
               var date = module.get.date();
-              var text = formatter.datetime(date, settings);
+              var text = module.helper.dateFormat(formatter[settings.type], date);
               $input.val(text);
             }
             if(selectionComplete){
@@ -708,6 +722,9 @@ $.fn.calendar = function(parameters) {
                   return AWN - Math.floor(Date.UTC(Wyr, 0, 7) / ms7d) + 1;
               }();
           },
+          formattedDate: function(format, date) {
+            return module.helper.dateFormat(format || formatter[settings.type], date || module.get.date());
+          },
           date: function () {
             return module.helper.sanitiseDate($module.data(metadata.date)) || null;
           },
@@ -732,7 +749,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
@@ -786,7 +803,7 @@ $.fn.calendar = function(parameters) {
               return null;
             }
             if (!(selector instanceof $)) {
-              selector = $(selector).first();
+              selector = $(document).find(selector).first();
             }
             //assume range related calendars are using the same namespace
             return selector.data(moduleNamespace);
@@ -801,7 +818,7 @@ $.fn.calendar = function(parameters) {
             date = module.helper.dateInRange(date);
 
             var mode = module.get.mode();
-            var text = formatter.datetime(date, settings);
+            var text = module.helper.dateFormat(formatter[settings.type],date);
 
             if (fireChange && settings.onBeforeChange.call(element, date, text, mode) === false) {
               return false;
@@ -923,6 +940,7 @@ $.fn.calendar = function(parameters) {
                 //if this is a range calendar, focus the container or input. This will open the popup from its event listeners.
                 var endModule = module.get.calendarModule(settings.endCalendar);
                 if (endModule) {
+                  endModule.refresh();
                   if (endModule.setting('on') !== 'focus') {
                     endModule.popup('show');
                   }
@@ -971,8 +989,62 @@ $.fn.calendar = function(parameters) {
         },
 
         helper: {
+          dateFormat: function(format,date) {
+            if (!(date instanceof Date)) {
+              return '';
+            }
+            if(typeof format === 'function') {
+              return format.call(module, date, settings);
+            }
+
+            var D = date.getDate(),
+                M = date.getMonth(),
+                Y = date.getFullYear(),
+                d = date.getDay(),
+                H = date.getHours(),
+                m = date.getMinutes(),
+                s = date.getSeconds(),
+                w = module.get.weekOfYear(Y,M,D+1-settings.firstDayOfWeek),
+                h = H % 12 || 12,
+                a = H < 12 ? settings.text.am.toLowerCase() : settings.text.pm.toLowerCase(),
+                tokens = {
+                  D:    D,
+                  DD:   ('0'+D).slice(-2),
+                  M:    M + 1,
+                  MM:   ('0'+(M+1)).slice(-2),
+                  MMM:  settings.text.monthsShort[M],
+                  MMMM: settings.text.months[M],
+                  Y:    Y,
+                  YY:   String(Y).slice(2),
+                  YYYY: Y,
+                  d:    d,
+                  dd:   settings.text.dayNamesShort[d].slice(0,2),
+                  ddd:  settings.text.dayNamesShort[d],
+                  dddd: settings.text.dayNames[d],
+                  h:    h,
+                  hh:   ('0'+h).slice(-2),
+                  H:    H,
+                  HH:   ('0'+H).slice(-2),
+                  m:    m,
+                  mm:   ('0'+m).slice(-2),
+                  s:    s,
+                  ss:   ('0'+s).slice(-2),
+                  a:    a,
+                  A:    a.toUpperCase(),
+                  S:    ['th', 'st', 'nd', 'rd'][D % 10 > 3 ? 0 : (D % 100 - D % 10 !== 10) * D % 10],
+                  w:    w,
+                  ww:   ('0'+w).slice(-2)
+                }
+            ;
+            return format.replace(settings.regExp.token, function (match) {
+              if (match in tokens) {
+                return tokens[match];
+              }
+              return match.slice(1, match.length - 1);
+            });
+          },
           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);
               }
@@ -1005,7 +1077,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') {
@@ -1073,6 +1183,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);
@@ -1340,7 +1493,7 @@ $.fn.calendar.settings = {
   constantHeight     : true,       // add rows to shorter months to keep day calendar height consistent (6 rows)
   today              : false,      // show a 'today/now' button at the bottom of the calendar
   closable           : true,       // close the popup after selecting a date/time
-  monthFirst         : true,       // month before day when parsing/converting date from/to text
+  monthFirst         : true,       // month before day when parsing date from text
   touchReadonly      : true,       // set input to readonly on touch devices
   inline             : false,      // create the calendar inline instead of inside a popup
   on                 : null,       // when to show the popup (defaults to 'focus' for input, 'click' for others)
@@ -1348,7 +1501,6 @@ $.fn.calendar.settings = {
   startMode          : false,      // display mode to start in, can be 'year', 'month', 'day', 'hour', 'minute' (false = 'day')
   minDate            : null,       // minimum date/time that can be selected, dates/times before are disabled
   maxDate            : null,       // maximum date/time that can be selected, dates/times after are disabled
-  ampm               : true,       // show am/pm in time mode
   disableYear        : false,      // disable year selection mode
   disableMonth       : false,      // disable month selection mode
   disableMinute      : false,      // disable minute selection mode
@@ -1356,8 +1508,10 @@ $.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
+  showWeekNumbers    : false,      // 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
@@ -1370,11 +1524,14 @@ $.fn.calendar.settings = {
     position: 'bottom left',
     lastResort: 'bottom left',
     prefer: 'opposite',
+    observeChanges: false,
     hideOnScroll: false
   },
 
   text: {
     days: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+    dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
     months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
     monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
     today: 'Today',
@@ -1385,67 +1542,23 @@ $.fn.calendar.settings = {
   },
 
   formatter: {
-    header: function (date, mode, settings) {
-      return mode === 'year' ? settings.formatter.yearHeader(date, settings) :
-        mode === 'month' ? settings.formatter.monthHeader(date, settings) :
-          mode === 'day' ? settings.formatter.dayHeader(date, settings) :
-            mode === 'hour' ? settings.formatter.hourHeader(date, settings) :
-              settings.formatter.minuteHeader(date, settings);
-    },
     yearHeader: function (date, settings) {
       var decadeYear = Math.ceil(date.getFullYear() / 10) * 10;
       return (decadeYear - 9) + ' - ' + (decadeYear + 2);
     },
-    monthHeader: function (date, settings) {
+    monthHeader: 'YYYY',
-      return date.getFullYear();
+    dayHeader: 'MMMM YYYY',
-    },
+    hourHeader: 'MMMM D, YYYY',
-    dayHeader: function (date, settings) {
+    minuteHeader: 'MMMM D, YYYY',
-      var month = settings.text.months[date.getMonth()];
-      var year = date.getFullYear();
-      return month + ' ' + year;
-    },
-    hourHeader: function (date, settings) {
-      return settings.formatter.date(date, settings);
-    },
-    minuteHeader: function (date, settings) {
-      return settings.formatter.date(date, settings);
-    },
     dayColumnHeader: function (day, settings) {
       return settings.text.days[day];
     },
-    datetime: function (date, settings) {
+    datetime: 'MMMM D, YYYY h:mm A',
-      if (!date) {
+    date: 'MMMM D, YYYY',
-        return '';
+    time: 'h:mm A',
-      }
+    cellTime: 'h:mm A',
-      var day = settings.type === 'time' ? '' : settings.formatter.date(date, settings);
+    month: 'MMMM YYYY',
-      var time = settings.type.indexOf('time') < 0 ? '' : settings.formatter.time(date, settings, false);
+    year: 'YYYY',
-      var separator = settings.type === 'datetime' ? ' ' : '';
-      return day + separator + time;
-    },
-    date: function (date, settings) {
-      if (!date) {
-        return '';
-      }
-      var day = date.getDate();
-      var month = settings.text.months[date.getMonth()];
-      var year = date.getFullYear();
-      return settings.type === 'year' ? year :
-        settings.type === 'month' ? month + ' ' + year :
-        (settings.monthFirst ? month + ' ' + day : day + ' ' + month) + ', ' + year;
-    },
-    time: function (date, settings, forCalendar) {
-      if (!date) {
-        return '';
-      }
-      var hour = date.getHours();
-      var minute = date.getMinutes();
-      var ampm = '';
-      if (settings.ampm) {
-        ampm = ' ' + (hour < 12 ? settings.text.am : settings.text.pm);
-        hour = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
-      }
-      return hour + ':' + (minute < 10 ? '0' : '') + minute + ampm;
-    },
     today: function (settings) {
       return settings.type === 'date' ? settings.text.today : settings.text.now;
     },
@@ -1461,7 +1574,7 @@ $.fn.calendar.settings = {
       if (!text) {
         return null;
       }
-      text = String(text).trim();
+      text = String(text).trim().replace(/([.:\/\-])\s+/g,'$1').replace(/\s+([.:\/-])/g,'$1').replace(/\s+/g,' ');
       if (text.length === 0) {
         return null;
       }
@@ -1714,7 +1827,8 @@ $.fn.calendar.settings = {
 
   regExp: {
     dateWords: /[^A-Za-z\u00C0-\u024F]+/g,
-    dateNumbers: /[^\d:]+/g
+    dateNumbers: /[^\d:]+/g,
+    token: /d{1,4}|D{1,2}|M{1,4}|YY(?:YY)?|([Hhmsw])\1?|[SAaY]|"[^"]*"|'[^']*'/g
   },
 
   error: {
@@ -1763,7 +1877,9 @@ $.fn.calendar.settings = {
     variation: 'variation',
     position: 'position',
     month: 'month',
-    year: 'year'
+    year: 'year',
+    hours: 'hours',
+    days: 'days'
   },
 
   eventClass: 'blue'

semantic/dist/components/calendar.min.css

@@ -6,4 +6,4 @@
  * Released under the MIT license
  * http://opensource.org/licenses/MIT
  *
- */.ui.calendar .ui.popup{max-width:none;padding:0;border:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ui.calendar .calendar:focus{outline:0}.ui.calendar .ui.popup .ui.grid{display:block;white-space:nowrap}.ui.calendar .ui.popup .ui.grid>.column{width:auto}.ui.calendar .ui.table.minute,.ui.calendar .ui.table.month,.ui.calendar .ui.table.year{min-width:15em}.ui.calendar .ui.table.day{min-width:18em}.ui.calendar .ui.table.day.andweek{min-width:22em}.ui.calendar .ui.table.hour{min-width:20em}.ui.calendar .ui.table tr td,.ui.calendar .ui.table tr th{padding:.5em;white-space:nowrap;text-align:center}.ui.calendar .ui.table tr th{border-left:none}.ui.calendar .ui.table tr th i.icon{margin:0}.ui.calendar .ui.table tr:first-child th{position:relative;padding-left:0;padding-right:0}.ui.calendar .ui.table.day tr:first-child th{border:none}.ui.calendar .ui.table.day tr:nth-child(2) th{padding-top:.2em;padding-bottom:.3em}.ui.calendar .ui.table tr td{padding-left:.1em;padding-right:.1em}.ui.calendar .ui.table tr .link{cursor:pointer}.ui.calendar .ui.table tr .prev.link{width:14.28571429%;position:absolute;left:0}.ui.calendar .ui.table tr .next.link{width:14.28571429%;position:absolute;right:0}.ui.ui.calendar .ui.table tr .disabled{pointer-events:auto;cursor:default;color:rgba(40,40,40,.3)}.ui.calendar .ui.table tr .adjacent:not(.disabled):not(.active){color:rgba(0,0,0,.6);background:rgba(0,0,0,.03)}.ui.calendar .ui.table tr td.today{font-weight:700}.ui.calendar .ui.table tr td.range{background:rgba(0,0,0,.05);color:rgba(0,0,0,.95);-webkit-box-shadow:none;box-shadow:none}.ui.calendar:not(.disabled) .calendar.active .ui.table tbody tr td.focus,.ui.calendar:not(.disabled) .calendar:focus .ui.table tbody tr td.focus{-webkit-box-shadow:inset 0 0 0 1px #6435c9;box-shadow:inset 0 0 0 1px #6435c9}.ui.inverted.calendar .ui.table.inverted tr td.range{background:rgba(255,255,255,.08);color:#fff;-webkit-box-shadow:none;box-shadow:none}.ui.inverted.calendar:not(.disabled) .calendar.active .ui.table.inverted tbody tr td.focus,.ui.inverted.calendar:not(.disabled) .calendar:focus .ui.table.inverted tbody tr td.focus{-webkit-box-shadow:inset 0 0 0 1px #6435c9;box-shadow:inset 0 0 0 1px #6435c9}.ui.inverted.calendar .ui.inverted.table tr .disabled{color:rgba(225,225,225,.3)}.ui.inverted.calendar .ui.inverted.table tr .adjacent:not(.disabled):not(.active){color:rgba(255,255,255,.8);background:rgba(255,255,255,.02)}.ui.disabled.calendar{opacity:.45}.ui.disabled.calendar .ui.table tr .link,.ui.disabled.calendar>.input{pointer-events:none}
+ */.ui.calendar .ui.popup{max-width:none;padding:0;border:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ui.calendar .calendar:focus{outline:0}.ui.calendar .ui.popup .ui.grid{display:block;white-space:nowrap}.ui.calendar .ui.popup .ui.grid>.column{width:auto}.ui.calendar .ui.table.minute,.ui.calendar .ui.table.month,.ui.calendar .ui.table.year{min-width:15em}.ui.calendar .ui.table.day{min-width:18em}.ui.calendar .ui.table.day.andweek{min-width:22em}.ui.calendar .ui.table.hour{min-width:20em}.ui.calendar .ui.table tr td,.ui.calendar .ui.table tr th{padding:.5em;white-space:nowrap}.ui.calendar .ui.table tr th{border-left:none}.ui.calendar .ui.table tr th i.icon{margin:0}.ui.calendar .ui.table tr:first-child th{position:relative;padding-left:0;padding-right:0}.ui.calendar .ui.table.day tr:first-child th{border:none}.ui.calendar .ui.table.day tr:nth-child(2) th{padding-top:.2em;padding-bottom:.3em}.ui.calendar .ui.table tr td{padding-left:.1em;padding-right:.1em}.ui.calendar .ui.table tr .link{cursor:pointer}.ui.calendar .ui.table tr .prev.link{width:14.28571429%;position:absolute;left:0}.ui.calendar .ui.table tr .next.link{width:14.28571429%;position:absolute;right:0}.ui.ui.calendar .ui.table tr .disabled{pointer-events:auto;cursor:default;color:rgba(40,40,40,.3)}.ui.calendar .ui.table tr .adjacent:not(.disabled):not(.active){color:rgba(0,0,0,.6);background:rgba(0,0,0,.03)}.ui.calendar .ui.table tr td.today{font-weight:700}.ui.calendar .ui.table tr td.range{background:rgba(0,0,0,.05);color:rgba(0,0,0,.95);-webkit-box-shadow:none;box-shadow:none}.ui.calendar:not(.disabled) .calendar.active .ui.table tbody tr td.focus,.ui.calendar:not(.disabled) .calendar:focus .ui.table tbody tr td.focus{-webkit-box-shadow:inset 0 0 0 1px #85b7d9;box-shadow:inset 0 0 0 1px #85b7d9}.ui.inverted.calendar .ui.table.inverted tr td.range{background:rgba(255,255,255,.08);color:#fff;-webkit-box-shadow:none;box-shadow:none}.ui.inverted.calendar:not(.disabled) .calendar.active .ui.table.inverted tbody tr td.focus,.ui.inverted.calendar:not(.disabled) .calendar:focus .ui.table.inverted tbody tr td.focus{-webkit-box-shadow:inset 0 0 0 1px #85b7d9;box-shadow:inset 0 0 0 1px #85b7d9}.ui.inverted.calendar .ui.inverted.table tr .disabled{color:rgba(225,225,225,.3)}.ui.inverted.calendar .ui.inverted.table tr .adjacent:not(.disabled):not(.active){color:rgba(255,255,255,.8);background:rgba(255,255,255,.02)}.ui.calendar.popup>.ui.ui.grid{margin:-1rem}.ui.calendar.popup>.ui.ui.grid>.column:not(:first-child){padding-left:0}.ui.calendar.popup>.ui.ui.grid>.column:not(:first-child)>.ui.table{border-top-left-radius:0;border-bottom-left-radius:0}.ui.calendar.popup>.ui.ui.grid>.column:not(:last-child){padding-right:0}.ui.calendar.popup>.ui.ui.grid>.column:not(:last-child)>.ui.table{border-top-right-radius:0;border-bottom-right-radius:0}.ui.disabled.calendar{opacity:.45}.ui.disabled.calendar .ui.table tr .link,.ui.disabled.calendar>.input{pointer-events:none}

semantic/dist/components/checkbox.css

@@ -53,7 +53,7 @@
   outline: none;
   font-size: 1em;
 }
-.ui.checkbox label:before {
+.ui.checkbox label::before {
   position: absolute;
   top: 0;
   left: 0;
@@ -61,7 +61,7 @@
   height: 17px;
   content: '';
   background: #FFFFFF;
-  border-radius: 0.25rem;
+  border-radius: 0.21428571rem;
   -webkit-transition: border 0.1s ease, opacity 0.1s ease, -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease;
   transition: border 0.1s ease, opacity 0.1s ease, -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease;
   transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;
@@ -73,7 +73,7 @@
     Checkmark
 ---------------*/
 
-.ui.checkbox label:after {
+.ui.checkbox label::after {
   position: absolute;
   font-size: 14px;
   top: 0;
@@ -92,8 +92,8 @@
   padding-left: 0;
   padding-right: 1.85714em;
 }
-.ui.right.aligned.checkbox label:after,
+.ui.right.aligned.checkbox label::after,
-.ui.right.aligned.checkbox label:before {
+.ui.right.aligned.checkbox label::before {
   right: 0;
   left: auto;
 }
@@ -154,11 +154,11 @@
      Focus
 ---------------*/
 
-.ui.checkbox input:focus ~ label:before {
+.ui.checkbox input:focus ~ label::before {
   background: #FFFFFF;
-  border-color: #a285df;
+  border-color: #96C8DA;
 }
-.ui.checkbox input:focus ~ label:after {
+.ui.checkbox input:focus ~ label::after {
   color: rgba(0, 0, 0, 0.95);
 }
 .ui.checkbox input:focus ~ label {
@@ -169,11 +169,11 @@
      Active
 ---------------*/
 
-.ui.checkbox input:checked ~ label:before {
+.ui.checkbox input:checked ~ label::before {
   background: #FFFFFF;
   border-color: rgba(34, 36, 38, 0.35);
 }
-.ui.checkbox input:checked ~ label:after {
+.ui.checkbox input:checked ~ label::after {
   opacity: 1;
   color: rgba(0, 0, 0, 0.95);
 }
@@ -182,21 +182,21 @@
     Indeterminate
   ---------------*/
 
-.ui.checkbox input:not([type=radio]):indeterminate ~ label:before {
+.ui.checkbox input:not([type=radio]):indeterminate ~ label::before {
   background: #FFFFFF;
   border-color: rgba(34, 36, 38, 0.35);
 }
-.ui.checkbox input:not([type=radio]):indeterminate ~ label:after {
+.ui.checkbox input:not([type=radio]):indeterminate ~ label::after {
   opacity: 1;
   color: rgba(0, 0, 0, 0.95);
 }
-.ui.indeterminate.toggle.checkbox input:not([type=radio]):indeterminate ~ label:before {
+.ui.indeterminate.toggle.checkbox input:not([type=radio]):indeterminate ~ label::before {
   background: rgba(0, 0, 0, 0.15);
 }
-.ui.indeterminate.toggle.checkbox input:not([type=radio]) ~ label:after {
+.ui.indeterminate.toggle.checkbox input:not([type=radio]) ~ label::after {
   left: 1.075rem;
 }
-.ui.right.aligned.indeterminate.toggle.checkbox input:not([type=radio]) ~ label:after {
+.ui.right.aligned.indeterminate.toggle.checkbox input:not([type=radio]) ~ label::after {
   left: auto;
   right: 1.075rem;
 }
@@ -205,13 +205,13 @@
   Active Focus
 ---------------*/
 
-.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:before,
+.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label::before,
-.ui.checkbox input:checked:focus ~ label:before {
+.ui.checkbox input:checked:focus ~ label::before {
   background: #FFFFFF;
-  border-color: #a285df;
+  border-color: #96C8DA;
 }
-.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:after,
+.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label::after,
-.ui.checkbox input:checked:focus ~ label:after {
+.ui.checkbox input:checked:focus ~ label::after {
   color: rgba(0, 0, 0, 0.95);
 }
 
@@ -249,6 +249,7 @@
 }
 
 /* Selectable Label */
+.ui.checkbox input + label[for],
 .ui.checkbox input.hidden + label {
   cursor: pointer;
   -webkit-user-select: none;
@@ -275,7 +276,7 @@
 }
 
 /* Box */
-.ui.radio.checkbox label:before {
+.ui.radio.checkbox label::before {
   content: '';
   -webkit-transform: none;
           transform: none;
@@ -287,7 +288,7 @@
 }
 
 /* Bullet */
-.ui.radio.checkbox label:after {
+.ui.radio.checkbox label::after {
   border: none;
   content: '' !important;
   line-height: 15px;
@@ -302,31 +303,31 @@
 }
 
 /* Focus */
-.ui.radio.checkbox input:focus ~ label:before {
+.ui.radio.checkbox input:focus ~ label::before {
   background-color: #FFFFFF;
 }
-.ui.radio.checkbox input:focus ~ label:after {
+.ui.radio.checkbox input:focus ~ label::after {
   background-color: rgba(0, 0, 0, 0.95);
 }
 
 /* Indeterminate */
-.ui.radio.checkbox input:indeterminate ~ label:after {
+.ui.radio.checkbox input:indeterminate ~ label::after {
   opacity: 0;
 }
 
 /* Active */
-.ui.radio.checkbox input:checked ~ label:before {
+.ui.radio.checkbox input:checked ~ label::before {
   background-color: #FFFFFF;
 }
-.ui.radio.checkbox input:checked ~ label:after {
+.ui.radio.checkbox input:checked ~ label::after {
   background-color: rgba(0, 0, 0, 0.95);
 }
 
 /* Active Focus */
-.ui.radio.checkbox input:focus:checked ~ label:before {
+.ui.radio.checkbox input:focus:checked ~ label::before {
   background-color: #FFFFFF;
 }
-.ui.radio.checkbox input:focus:checked ~ label:after {
+.ui.radio.checkbox input:focus:checked ~ label::after {
   background-color: rgba(0, 0, 0, 0.95);
 }
 
@@ -352,7 +353,7 @@
 }
 
 /* Line */
-.ui.slider.checkbox label:before {
+.ui.slider.checkbox label::before {
   display: block;
   position: absolute;
   content: '';
@@ -364,14 +365,14 @@
   top: 0.4rem;
   background-color: rgba(0, 0, 0, 0.05);
   width: 3.5rem;
-  height: 0.25rem;
+  height: 0.21428571rem;
   border-radius: 500rem;
   -webkit-transition: background 0.3s ease;
   transition: background 0.3s ease;
 }
 
 /* Handle */
-.ui.slider.checkbox label:after {
+.ui.slider.checkbox label::after {
   background: #FFFFFF -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05)));
   background: #FFFFFF -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
   background: #FFFFFF linear-gradient(transparent, rgba(0, 0, 0, 0.05));
@@ -394,7 +395,7 @@
 }
 
 /* Focus */
-.ui.slider.checkbox input:focus ~ label:before {
+.ui.slider.checkbox input:focus ~ label::before {
   background-color: rgba(0, 0, 0, 0.15);
   border: none;
 }
@@ -411,10 +412,10 @@
 .ui.slider.checkbox input:checked ~ label {
   color: rgba(0, 0, 0, 0.95) !important;
 }
-.ui.slider.checkbox input:checked ~ label:before {
+.ui.slider.checkbox input:checked ~ label::before {
   background-color: #545454 !important;
 }
-.ui.slider.checkbox input:checked ~ label:after {
+.ui.slider.checkbox input:checked ~ label::after {
   left: 2rem;
 }
 
@@ -422,20 +423,20 @@
 .ui.slider.checkbox input:focus:checked ~ label {
   color: rgba(0, 0, 0, 0.95) !important;
 }
-.ui.slider.checkbox input:focus:checked ~ label:before {
+.ui.slider.checkbox input:focus:checked ~ label::before {
   background-color: #000000 !important;
 }
 .ui.right.aligned.slider.checkbox label {
   padding-left: 0;
   padding-right: 4.5rem;
 }
-.ui.right.aligned.slider.checkbox label:after {
+.ui.right.aligned.slider.checkbox label::after {
   left: auto;
   right: 2rem;
   -webkit-transition: right 0.3s ease;
   transition: right 0.3s ease;
 }
-.ui.right.aligned.slider.checkbox input:checked ~ label:after {
+.ui.right.aligned.slider.checkbox input:checked ~ label::after {
   left: auto;
   right: 0;
 }
@@ -465,7 +466,7 @@
 }
 
 /* Switch */
-.ui.toggle.checkbox label:before {
+.ui.toggle.checkbox label::before {
   display: block;
   position: absolute;
   content: '';
@@ -483,7 +484,7 @@
 }
 
 /* Handle */
-.ui.toggle.checkbox label:after {
+.ui.toggle.checkbox label::after {
   background: #FFFFFF -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05)));
   background: #FFFFFF -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
   background: #FFFFFF linear-gradient(transparent, rgba(0, 0, 0, 0.05));
@@ -502,14 +503,14 @@
   -webkit-transition: background 0.3s ease, left 0.3s ease;
   transition: background 0.3s ease, left 0.3s ease;
 }
-.ui.toggle.checkbox input ~ label:after {
+.ui.toggle.checkbox input ~ label::after {
   left: -0.05rem;
   -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
           box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
 }
 
 /* Focus */
-.ui.toggle.checkbox input:focus ~ label:before {
+.ui.toggle.checkbox input:focus ~ label::before {
   background-color: rgba(0, 0, 0, 0.15);
   border: none;
 }
@@ -524,10 +525,10 @@
 .ui.toggle.checkbox input:checked ~ label {
   color: rgba(0, 0, 0, 0.95) !important;
 }
-.ui.toggle.checkbox input:checked ~ label:before {
+.ui.toggle.checkbox input:checked ~ label::before {
-  background-color: #6435C9 !important;
+  background-color: #2185D0 !important;
 }
-.ui.toggle.checkbox input:checked ~ label:after {
+.ui.toggle.checkbox input:checked ~ label::after {
   left: 2.15rem;
   -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
           box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
@@ -537,20 +538,20 @@
 .ui.toggle.checkbox input:focus:checked ~ label {
   color: rgba(0, 0, 0, 0.95) !important;
 }
-.ui.toggle.checkbox input:focus:checked ~ label:before {
+.ui.toggle.checkbox input:focus:checked ~ label::before {
-  background-color: #4f20b5 !important;
+  background-color: #0d71bb !important;
 }
 .ui.right.aligned.toggle.checkbox label {
   padding-left: 0;
   padding-right: 4.5rem;
 }
-.ui.right.aligned.toggle.checkbox input ~ label:after {
+.ui.right.aligned.toggle.checkbox input ~ label::after {
   left: auto;
   right: 2.15rem;
   -webkit-transition: background 0.3s ease, right 0.3s ease;
   transition: background 0.3s ease, right 0.3s ease;
 }
-.ui.right.aligned.toggle.checkbox input:checked ~ label:after {
+.ui.right.aligned.toggle.checkbox input:checked ~ label::after {
   left: auto;
   right: -0.05rem;
 }
@@ -597,7 +598,7 @@
 }
 
 /* Slider Line */
-.ui.inverted.slider.checkbox label:before {
+.ui.inverted.slider.checkbox label::before {
   background-color: rgba(255, 255, 255, 0.5) !important;
 }
 
@@ -610,7 +611,7 @@
 .ui.inverted.slider.checkbox input:checked ~ label {
   color: #ffffff !important;
 }
-.ui.inverted.slider.checkbox input:checked ~ label:before {
+.ui.inverted.slider.checkbox input:checked ~ label::before {
   background-color: rgba(255, 255, 255, 0.8) !important;
 }
 
@@ -618,12 +619,12 @@
 .ui.inverted.slider.checkbox input:focus:checked ~ label {
   color: #ffffff !important;
 }
-.ui.inverted.slider.checkbox input:focus:checked ~ label:before {
+.ui.inverted.slider.checkbox input:focus:checked ~ label::before {
   background-color: rgba(255, 255, 255, 0.8) !important;
 }
 
 /* Toggle Switch */
-.ui.inverted.toggle.checkbox label:before {
+.ui.inverted.toggle.checkbox label::before {
   background-color: rgba(255, 255, 255, 0.9) !important;
 }
 
@@ -636,16 +637,16 @@
 .ui.inverted.toggle.checkbox input:checked ~ label {
   color: #ffffff !important;
 }
-.ui.inverted.toggle.checkbox input:checked ~ label:before {
+.ui.inverted.toggle.checkbox input:checked ~ label::before {
-  background-color: #6435C9 !important;
+  background-color: #2185D0 !important;
 }
 
 /* Toggle Active Focus */
 .ui.inverted.toggle.checkbox input:focus:checked ~ label {
   color: #ffffff !important;
 }
-.ui.inverted.toggle.checkbox input:focus:checked ~ label:before {
+.ui.inverted.toggle.checkbox input:focus:checked ~ label::before {
-  background-color: #4f20b5 !important;
+  background-color: #0d71bb !important;
 }
 
 /*--------------------
@@ -653,121 +654,121 @@
 ---------------------*/
 
 .ui.mini.checkbox {
-  font-size: 0.75em;
+  font-size: 0.78571429em;
 }
 .ui.tiny.checkbox {
-  font-size: 0.83333333em;
+  font-size: 0.85714286em;
 }
 .ui.small.checkbox {
-  font-size: 0.91666667em;
+  font-size: 0.92857143em;
 }
 .ui.large.checkbox {
-  font-size: 1.16666667em;
+  font-size: 1.14285714em;
 }
-.ui.large.form .checkbox:not(.slider):not(.toggle):not(.radio) label:after,
+.ui.large.form .checkbox:not(.slider):not(.toggle):not(.radio) label::after,
-.ui.large.checkbox:not(.slider):not(.toggle):not(.radio) label:after,
+.ui.large.checkbox:not(.slider):not(.toggle):not(.radio) label::after,
-.ui.large.form .checkbox:not(.slider):not(.toggle):not(.radio) label:before,
+.ui.large.form .checkbox:not(.slider):not(.toggle):not(.radio) label::before,
-.ui.large.checkbox:not(.slider):not(.toggle):not(.radio) label:before {
+.ui.large.checkbox:not(.slider):not(.toggle):not(.radio) label::before {
-  -webkit-transform: scale(1.16666667);
+  -webkit-transform: scale(1.14285714);
-          transform: scale(1.16666667);
+          transform: scale(1.14285714);
   -webkit-transform-origin: left;
           transform-origin: left;
 }
-.ui.large.form .checkbox.radio label:before,
+.ui.large.form .checkbox.radio label::before,
-.ui.large.checkbox.radio label:before {
+.ui.large.checkbox.radio label::before {
-  -webkit-transform: scale(1.16666667);
+  -webkit-transform: scale(1.14285714);
-          transform: scale(1.16666667);
+          transform: scale(1.14285714);
   -webkit-transform-origin: left;
           transform-origin: left;
 }
-.ui.large.form .checkbox.radio label:after,
+.ui.large.form .checkbox.radio label::after,
-.ui.large.checkbox.radio label:after {
+.ui.large.checkbox.radio label::after {
-  -webkit-transform: scale(0.58333333);
+  -webkit-transform: scale(0.57142857);
-          transform: scale(0.58333333);
+          transform: scale(0.57142857);
   -webkit-transform-origin: left;
           transform-origin: left;
-  left: 0.34166667em;
+  left: 0.33571429em;
 }
 .ui.big.checkbox {
-  font-size: 1.25em;
+  font-size: 1.28571429em;
 }
-.ui.big.form .checkbox:not(.slider):not(.toggle):not(.radio) label:after,
+.ui.big.form .checkbox:not(.slider):not(.toggle):not(.radio) label::after,
-.ui.big.checkbox:not(.slider):not(.toggle):not(.radio) label:after,
+.ui.big.checkbox:not(.slider):not(.toggle):not(.radio) label::after,
-.ui.big.form .checkbox:not(.slider):not(.toggle):not(.radio) label:before,
+.ui.big.form .checkbox:not(.slider):not(.toggle):not(.radio) label::before,
-.ui.big.checkbox:not(.slider):not(.toggle):not(.radio) label:before {
+.ui.big.checkbox:not(.slider):not(.toggle):not(.radio) label::before {
-  -webkit-transform: scale(1.25);
+  -webkit-transform: scale(1.28571429);
-          transform: scale(1.25);
+          transform: scale(1.28571429);
   -webkit-transform-origin: left;
           transform-origin: left;
 }
-.ui.big.form .checkbox.radio label:before,
+.ui.big.form .checkbox.radio label::before,
-.ui.big.checkbox.radio label:before {
+.ui.big.checkbox.radio label::before {
-  -webkit-transform: scale(1.25);
+  -webkit-transform: scale(1.28571429);
-          transform: scale(1.25);
+          transform: scale(1.28571429);
   -webkit-transform-origin: left;
           transform-origin: left;
 }
-.ui.big.form .checkbox.radio label:after,
+.ui.big.form .checkbox.radio label::after,
-.ui.big.checkbox.radio label:after {
+.ui.big.checkbox.radio label::after {
-  -webkit-transform: scale(0.625);
+  -webkit-transform: scale(0.64285714);
-          transform: scale(0.625);
+          transform: scale(0.64285714);
   -webkit-transform-origin: left;
           transform-origin: left;
-  left: 0.3625em;
+  left: 0.37142857em;
 }
 .ui.huge.checkbox {
-  font-size: 1.41666667em;
+  font-size: 1.42857143em;
 }
-.ui.huge.form .checkbox:not(.slider):not(.toggle):not(.radio) label:after,
+.ui.huge.form .checkbox:not(.slider):not(.toggle):not(.radio) label::after,
-.ui.huge.checkbox:not(.slider):not(.toggle):not(.radio) label:after,
+.ui.huge.checkbox:not(.slider):not(.toggle):not(.radio) label::after,
-.ui.huge.form .checkbox:not(.slider):not(.toggle):not(.radio) label:before,
+.ui.huge.form .checkbox:not(.slider):not(.toggle):not(.radio) label::before,
-.ui.huge.checkbox:not(.slider):not(.toggle):not(.radio) label:before {
+.ui.huge.checkbox:not(.slider):not(.toggle):not(.radio) label::before {
-  -webkit-transform: scale(1.41666667);
+  -webkit-transform: scale(1.42857143);
-          transform: scale(1.41666667);
+          transform: scale(1.42857143);
   -webkit-transform-origin: left;
           transform-origin: left;
 }
-.ui.huge.form .checkbox.radio label:before,
+.ui.huge.form .checkbox.radio label::before,
-.ui.huge.checkbox.radio label:before {
+.ui.huge.checkbox.radio label::before {
-  -webkit-transform: scale(1.41666667);
+  -webkit-transform: scale(1.42857143);
-          transform: scale(1.41666667);
+          transform: scale(1.42857143);
   -webkit-transform-origin: left;
           transform-origin: left;
 }
-.ui.huge.form .checkbox.radio label:after,
+.ui.huge.form .checkbox.radio label::after,
-.ui.huge.checkbox.radio label:after {
+.ui.huge.checkbox.radio label::after {
-  -webkit-transform: scale(0.70833333);
+  -webkit-transform: scale(0.71428571);
-          transform: scale(0.70833333);
+          transform: scale(0.71428571);
   -webkit-transform-origin: left;
           transform-origin: left;
-  left: 0.40416667em;
+  left: 0.40714286em;
 }
 .ui.massive.checkbox {
-  font-size: 1.75em;
+  font-size: 1.71428571em;
 }
-.ui.massive.form .checkbox:not(.slider):not(.toggle):not(.radio) label:after,
+.ui.massive.form .checkbox:not(.slider):not(.toggle):not(.radio) label::after,
-.ui.massive.checkbox:not(.slider):not(.toggle):not(.radio) label:after,
+.ui.massive.checkbox:not(.slider):not(.toggle):not(.radio) label::after,
-.ui.massive.form .checkbox:not(.slider):not(.toggle):not(.radio) label:before,
+.ui.massive.form .checkbox:not(.slider):not(.toggle):not(.radio) label::before,
-.ui.massive.checkbox:not(.slider):not(.toggle):not(.radio) label:before {
+.ui.massive.checkbox:not(.slider):not(.toggle):not(.radio) label::before {
-  -webkit-transform: scale(1.75);
+  -webkit-transform: scale(1.71428571);
-          transform: scale(1.75);
+          transform: scale(1.71428571);
   -webkit-transform-origin: left;
           transform-origin: left;
 }
-.ui.massive.form .checkbox.radio label:before,
+.ui.massive.form .checkbox.radio label::before,
-.ui.massive.checkbox.radio label:before {
+.ui.massive.checkbox.radio label::before {
-  -webkit-transform: scale(1.75);
+  -webkit-transform: scale(1.71428571);
-          transform: scale(1.75);
+          transform: scale(1.71428571);
   -webkit-transform-origin: left;
           transform-origin: left;
 }
-.ui.massive.form .checkbox.radio label:after,
+.ui.massive.form .checkbox.radio label::after,
-.ui.massive.checkbox.radio label:after {
+.ui.massive.checkbox.radio label::after {
-  -webkit-transform: scale(0.875);
+  -webkit-transform: scale(0.85714286);
-          transform: scale(0.875);
+          transform: scale(0.85714286);
   -webkit-transform-origin: left;
           transform-origin: left;
-  left: 0.4875em;
+  left: 0.47857143em;
 }
 
 
@@ -781,27 +782,27 @@
 }
 
 /* Checkmark */
-.ui.checkbox label:after,
+.ui.checkbox label::after,
-.ui.checkbox .box:after {
+.ui.checkbox .box::after {
   font-family: 'Checkbox';
 }
 
 /* Checked */
-.ui.checkbox input:checked ~ .box:after,
+.ui.checkbox input:checked ~ .box::after,
-.ui.checkbox input:checked ~ label:after {
+.ui.checkbox input:checked ~ label::after {
   content: '\e800';
 }
 
 /* Indeterminate */
-.ui.checkbox input:indeterminate ~ .box:after,
+.ui.checkbox input:indeterminate ~ .box::after,
-.ui.checkbox input:indeterminate ~ label:after {
+.ui.checkbox input:indeterminate ~ label::after {
   font-size: 12px;
   content: '\e801';
 }
 /*  UTF Reference
-.check:before { content: '\e800'; }
+.check::before { content: '\e800'; }
-.dash:before  { content: '\e801'; }
+.dash::before  { content: '\e801'; }
-.plus:before { content: '\e802'; }
+.plus::before { content: '\e802'; }
 */
 
 

semantic/dist/components/checkbox.js

@@ -239,18 +239,26 @@ $.fn.checkbox = function(parameters) {
               }
             }
 
+            shortcutPressed = false;
             if(key == keyCode.escape) {
               module.verbose('Escape key pressed blurring field');
               $input.blur();
               shortcutPressed = true;
             }
-            else if(!event.ctrlKey && ( key == keyCode.space || (key == keyCode.enter && settings.enableEnterKey)) ) {
+            else if(!event.ctrlKey && module.can.change()) {
-              module.verbose('Enter/space key pressed, toggling checkbox');
+                if( key == keyCode.space || (key == keyCode.enter && settings.enableEnterKey) ) {
-              module.toggle();
+                  module.verbose('Enter/space key pressed, toggling checkbox');
-              shortcutPressed = true;
+                  module.toggle();
-            }
+                  shortcutPressed = true;
-            else {
+                } else if($module.is('.toggle, .slider') && !module.is.radio()) {
-              shortcutPressed = false;
+                  if(key == keyCode.left && module.is.checked()) {
+                    module.uncheck();
+                    shortcutPressed = true;
+                  } else if(key == keyCode.right && module.is.unchecked()) {
+                    module.check();
+                    shortcutPressed = true;
+                  }
+                }
             }
           },
           keyup: function(event) {
@@ -323,7 +331,6 @@ $.fn.checkbox = function(parameters) {
             settings.onEnable.call(input);
             // preserve legacy callbacks
             settings.onEnabled.call(input);
-            module.trigger.change();
           }
         },
 
@@ -338,7 +345,6 @@ $.fn.checkbox = function(parameters) {
             settings.onDisable.call(input);
             // preserve legacy callbacks
             settings.onDisabled.call(input);
-            module.trigger.change();
           }
         },
 
@@ -866,7 +872,7 @@ $.fn.checkbox.settings = {
 
   selector : {
     checkbox : '.ui.checkbox',
-    label    : 'label, .box',
+    label    : 'label',
     input    : 'input[type="checkbox"], input[type="radio"]',
     link     : 'a[href]'
   }

semantic/dist/components/container.css

@@ -41,54 +41,54 @@
 /* Tablet */
 @media only screen and (min-width: 768px) and (max-width: 991.98px) {
   .ui.ui.ui.container:not(.fluid) {
-    width: 719px;
+    width: 713.66666667px;
     margin-left: auto;
     margin-right: auto;
   }
   .ui.ui.ui.grid.container {
-    width: calc(719px + 1rem);
+    width: calc(713.6666666666666px + 2rem);
   }
   .ui.ui.ui.relaxed.grid.container {
-    width: calc(719px + 3rem);
+    width: calc(713.6666666666666px + 3rem);
   }
   .ui.ui.ui.very.relaxed.grid.container {
-    width: calc(719px + 5rem);
+    width: calc(713.6666666666666px + 5rem);
   }
 }
 
 /* Small Monitor */
 @media only screen and (min-width: 992px) and (max-width: 1199.98px) {
   .ui.ui.ui.container:not(.fluid) {
-    width: 927px;
+    width: 919px;
     margin-left: auto;
     margin-right: auto;
   }
   .ui.ui.ui.grid.container {
-    width: calc(927px + 1rem);
+    width: calc(919px + 2rem);
   }
   .ui.ui.ui.relaxed.grid.container {
-    width: calc(927px + 3rem);
+    width: calc(919px + 3rem);
   }
   .ui.ui.ui.very.relaxed.grid.container {
-    width: calc(927px + 5rem);
+    width: calc(919px + 5rem);
   }
 }
 
 /* Large Monitor */
 @media only screen and (min-width: 1200px) {
   .ui.ui.ui.container:not(.fluid) {
-    width: 1119px;
+    width: 1108.33333333px;
     margin-left: auto;
     margin-right: auto;
   }
   .ui.ui.ui.grid.container {
-    width: calc(1119px + 1rem);
+    width: calc(1108.3333333333333px + 2rem);
   }
   .ui.ui.ui.relaxed.grid.container {
-    width: calc(1119px + 3rem);
+    width: calc(1108.3333333333333px + 3rem);
   }
   .ui.ui.ui.very.relaxed.grid.container {
-    width: calc(1119px + 5rem);
+    width: calc(1108.3333333333333px + 5rem);
   }
 }
 
@@ -103,7 +103,24 @@
   font-family: 'Raleway', sans-serif;
   max-width: 700px;
   line-height: 1.5;
-  font-size: 1.16666667rem;
+  font-size: 1.14285714rem;
+}
+
+/* Wide Container */
+@media only screen and (min-width: 768px) and (max-width: 991.98px) {
+  .ui.ui.ui.wide.container {
+    width: 856.4px;
+  }
+}
+@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
+  .ui.ui.ui.wide.container {
+    width: 1102.8px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .ui.ui.ui.wide.container {
+    width: 1330px;
+  }
 }
 
 /* Fluid */
@@ -132,6 +149,82 @@
           hyphens: auto;
 }
 
+/*--------------
+    Scrolling
+  ---------------*/
+
+.ui.scrolling.container {
+  overflow: auto;
+}
+@media only screen and (max-width: 767.98px) {
+  .ui.scrolling.container.short {
+    max-height: 11.25em;
+  }
+  .ui.scrolling.container[class*="very short"] {
+    max-height: 7.5em;
+  }
+  .ui.scrolling.container {
+    max-height: 15em;
+  }
+  .ui.scrolling.container.long {
+    max-height: 30em;
+  }
+  .ui.scrolling.container[class*="very long"] {
+    max-height: 45em;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .ui.scrolling.container.short {
+    max-height: 13.5em;
+  }
+  .ui.scrolling.container[class*="very short"] {
+    max-height: 9em;
+  }
+  .ui.scrolling.container {
+    max-height: 18em;
+  }
+  .ui.scrolling.container.long {
+    max-height: 36em;
+  }
+  .ui.scrolling.container[class*="very long"] {
+    max-height: 54em;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .ui.scrolling.container.short {
+    max-height: 18em;
+  }
+  .ui.scrolling.container[class*="very short"] {
+    max-height: 12em;
+  }
+  .ui.scrolling.container {
+    max-height: 24em;
+  }
+  .ui.scrolling.container.long {
+    max-height: 48em;
+  }
+  .ui.scrolling.container[class*="very long"] {
+    max-height: 72em;
+  }
+}
+@media only screen and (min-width: 1920px) {
+  .ui.scrolling.container.short {
+    max-height: 22.5em;
+  }
+  .ui.scrolling.container[class*="very short"] {
+    max-height: 15em;
+  }
+  .ui.scrolling.container {
+    max-height: 30em;
+  }
+  .ui.scrolling.container.long {
+    max-height: 60em;
+  }
+  .ui.scrolling.container[class*="very long"] {
+    max-height: 90em;
+  }
+}
+
 
 /*******************************
          Theme Overrides

semantic/dist/components/container.min.css

@@ -6,4 +6,4 @@
  * Released under the MIT license
  * http://opensource.org/licenses/MIT
  *
- */.ui.container{display:block;max-width:100%}@media only screen and (max-width:767.98px){.ui.ui.ui.container:not(.fluid){width:auto;margin-left:1em;margin-right:1em}.ui.ui.ui.grid.container{width:auto}.ui.ui.ui.relaxed.grid.container{width:auto}.ui.ui.ui.very.relaxed.grid.container{width:auto}}@media only screen and (min-width:768px) and (max-width:991.98px){.ui.ui.ui.container:not(.fluid){width:719px;margin-left:auto;margin-right:auto}.ui.ui.ui.grid.container{width:calc(719px + 1rem)}.ui.ui.ui.relaxed.grid.container{width:calc(719px + 3rem)}.ui.ui.ui.very.relaxed.grid.container{width:calc(719px + 5rem)}}@media only screen and (min-width:992px) and (max-width:1199.98px){.ui.ui.ui.container:not(.fluid){width:927px;margin-left:auto;margin-right:auto}.ui.ui.ui.grid.container{width:calc(927px + 1rem)}.ui.ui.ui.relaxed.grid.container{width:calc(927px + 3rem)}.ui.ui.ui.very.relaxed.grid.container{width:calc(927px + 5rem)}}@media only screen and (min-width:1200px){.ui.ui.ui.container:not(.fluid){width:1119px;margin-left:auto;margin-right:auto}.ui.ui.ui.grid.container{width:calc(1119px + 1rem)}.ui.ui.ui.relaxed.grid.container{width:calc(1119px + 3rem)}.ui.ui.ui.very.relaxed.grid.container{width:calc(1119px + 5rem)}}.ui.text.container{font-family:Raleway,sans-serif;max-width:700px;line-height:1.5;font-size:1.16666667rem}.ui.fluid.container{width:100%}.ui[class*="left aligned"].container{text-align:left}.ui[class*="center aligned"].container{text-align:center}.ui[class*="right aligned"].container{text-align:right}.ui.justified.container{text-align:justify;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}
+ */.ui.container{display:block;max-width:100%}@media only screen and (max-width:767.98px){.ui.ui.ui.container:not(.fluid){width:auto;margin-left:1em;margin-right:1em}.ui.ui.ui.grid.container{width:auto}.ui.ui.ui.relaxed.grid.container{width:auto}.ui.ui.ui.very.relaxed.grid.container{width:auto}}@media only screen and (min-width:768px) and (max-width:991.98px){.ui.ui.ui.container:not(.fluid){width:713.66666667px;margin-left:auto;margin-right:auto}.ui.ui.ui.grid.container{width:calc(713.6666666666666px + 2rem)}.ui.ui.ui.relaxed.grid.container{width:calc(713.6666666666666px + 3rem)}.ui.ui.ui.very.relaxed.grid.container{width:calc(713.6666666666666px + 5rem)}}@media only screen and (min-width:992px) and (max-width:1199.98px){.ui.ui.ui.container:not(.fluid){width:919px;margin-left:auto;margin-right:auto}.ui.ui.ui.grid.container{width:calc(919px + 2rem)}.ui.ui.ui.relaxed.grid.container{width:calc(919px + 3rem)}.ui.ui.ui.very.relaxed.grid.container{width:calc(919px + 5rem)}}@media only screen and (min-width:1200px){.ui.ui.ui.container:not(.fluid){width:1108.33333333px;margin-left:auto;margin-right:auto}.ui.ui.ui.grid.container{width:calc(1108.3333333333333px + 2rem)}.ui.ui.ui.relaxed.grid.container{width:calc(1108.3333333333333px + 3rem)}.ui.ui.ui.very.relaxed.grid.container{width:calc(1108.3333333333333px + 5rem)}}.ui.text.container{font-family:Raleway,sans-serif;max-width:700px;line-height:1.5;font-size:1.14285714rem}@media only screen and (min-width:768px) and (max-width:991.98px){.ui.ui.ui.wide.container{width:856.4px}}@media only screen and (min-width:992px) and (max-width:1199.98px){.ui.ui.ui.wide.container{width:1102.8px}}@media only screen and (min-width:1200px){.ui.ui.ui.wide.container{width:1330px}}.ui.fluid.container{width:100%}.ui[class*="left aligned"].container{text-align:left}.ui[class*="center aligned"].container{text-align:center}.ui[class*="right aligned"].container{text-align:right}.ui.justified.container{text-align:justify;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.ui.scrolling.container{overflow:auto}@media only screen and (max-width:767.98px){.ui.scrolling.container.short{max-height:11.25em}.ui.scrolling.container[class*="very short"]{max-height:7.5em}.ui.scrolling.container{max-height:15em}.ui.scrolling.container.long{max-height:30em}.ui.scrolling.container[class*="very long"]{max-height:45em}}@media only screen and (min-width:768px){.ui.scrolling.container.short{max-height:13.5em}.ui.scrolling.container[class*="very short"]{max-height:9em}.ui.scrolling.container{max-height:18em}.ui.scrolling.container.long{max-height:36em}.ui.scrolling.container[class*="very long"]{max-height:54em}}@media only screen and (min-width:992px){.ui.scrolling.container.short{max-height:18em}.ui.scrolling.container[class*="very short"]{max-height:12em}.ui.scrolling.container{max-height:24em}.ui.scrolling.container.long{max-height:48em}.ui.scrolling.container[class*="very long"]{max-height:72em}}@media only screen and (min-width:1920px){.ui.scrolling.container.short{max-height:22.5em}.ui.scrolling.container[class*="very short"]{max-height:15em}.ui.scrolling.container{max-height:30em}.ui.scrolling.container.long{max-height:60em}.ui.scrolling.container[class*="very long"]{max-height:90em}}

semantic/dist/components/dimmer.css

@@ -33,8 +33,8 @@
           animation-fill-mode: both;
   -webkit-animation-duration: 0.5s;
           animation-duration: 0.5s;
-  -webkit-transition: background-color 0.5s linear;
+  -webkit-transition: all 0.5s linear;
-  transition: background-color 0.5s linear;
+  transition: all 0.5s linear;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
@@ -80,6 +80,17 @@
 .ui.dimmer:not(.inverted)::-webkit-scrollbar-thumb:hover {
   background: rgba(255, 255, 255, 0.35);
 }
+.ui.dimmer:not(.inverted) {
+  
+/* IE11 */
+  scrollbar-face-color: #656565;
+  scrollbar-shadow-color: #656565;
+  scrollbar-track-color: #323232;
+  scrollbar-arrow-color: #323232;
+  
+/* firefox : first color thumb, second track */
+  scrollbar-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.1);
+}
 
 
 /*******************************
@@ -170,22 +181,26 @@ body.dimmable > .dimmer {
       Blurring
   ---------------*/
 
-.blurring.dimmable > :not(.dimmer) {
+@supports (not (-webkit-backdrop-filter: none)) and (not ((-webkit-backdrop-filter: none) or (backdrop-filter: none))) {
-  -webkit-filter: initial;
+  .blurring.dimmable > :not(.dimmer) {
-          filter: initial;
+    -webkit-filter: initial;
-  -webkit-transition: 800ms -webkit-filter ease;
+            filter: initial;
-  transition: 800ms -webkit-filter ease;
+    -webkit-transition: 800ms -webkit-filter ease;
-  transition: 800ms filter ease;
+    transition: 800ms -webkit-filter ease;
-  transition: 800ms filter ease, 800ms -webkit-filter ease;
+    transition: 800ms filter ease;
-}
+    transition: 800ms filter ease, 800ms -webkit-filter ease;
-.blurring.dimmed.dimmable > :not(.dimmer):not(.popup) {
+  }
-  -webkit-filter: blur(5px) grayscale(0.7);
+  .blurring.dimmed.dimmable > :not(.dimmer):not(.popup) {
-          filter: blur(5px) grayscale(0.7);
+    -webkit-filter: blur(5px) grayscale(0.7);
+            filter: blur(5px) grayscale(0.7);
+  }
 }
 
 /* Dimmer Color */
 .blurring.dimmable > .dimmer {
   background: rgba(0, 0, 0, 0.6);
+  -webkit-backdrop-filter: blur(5px) grayscale(0.7);
+  backdrop-filter: blur(5px) grayscale(0.7);
 }
 .blurring.dimmable > .inverted.dimmer {
   background: rgba(255, 255, 255, 0.6);

semantic/dist/components/dimmer.js

@@ -192,11 +192,14 @@ $.fn.dimmer = function(parameters) {
             ? callback
             : function(){}
           ;
-          module.debug('Showing dimmer', $dimmer, settings);
-          module.set.variation();
           if( (!module.is.dimmed() || module.is.animating()) && module.is.enabled() ) {
+            if(settings.onShow.call(element) === false) {
+              module.verbose('Show callback returned false cancelling dimmer show');
+              return;
+            }
+            module.debug('Showing dimmer', $dimmer, settings);
+            module.set.variation();
             module.animate.show(callback);
-            settings.onShow.call(element);
             settings.onChange.call(element);
           }
           else {
@@ -210,9 +213,12 @@ $.fn.dimmer = function(parameters) {
             : function(){}
           ;
           if( module.is.dimmed() || module.is.animating() ) {
+            if(settings.onHide.call(element) === false) {
+              module.verbose('Hide callback returned false cancelling dimmer hide');
+              return;
+            }
             module.debug('Hiding dimmer', $dimmer);
             module.animate.hide(callback);
-            settings.onHide.call(element);
             settings.onChange.call(element);
           }
           else {
@@ -264,6 +270,7 @@ $.fn.dimmer = function(parameters) {
                   },
                   onComplete  : function() {
                     module.set.active();
+                    settings.onVisible.call($dimmer);
                     callback();
                   }
                 })
@@ -285,6 +292,7 @@ $.fn.dimmer = function(parameters) {
                 .fadeTo(module.get.duration(), settings.opacity, function() {
                   $dimmer.removeAttr('style');
                   module.set.active();
+                  settings.onVisible.call($dimmer);
                   callback();
                 })
               ;
@@ -310,6 +318,7 @@ $.fn.dimmer = function(parameters) {
                     module.remove.dimmed();
                     module.remove.variation();
                     module.remove.active();
+                    settings.onHidden.call($dimmer);
                     callback();
                   }
                 })
@@ -323,6 +332,7 @@ $.fn.dimmer = function(parameters) {
                   module.remove.dimmed();
                   module.remove.active();
                   $dimmer.removeAttr('style');
+                  settings.onHidden.call($dimmer);
                   callback();
                 })
               ;
@@ -704,6 +714,8 @@ $.fn.dimmer.settings = {
   onChange    : function(){},
   onShow      : function(){},
   onHide      : function(){},
+  onVisible   : function(){},
+  onHidden    : function(){},
 
   error   : {
     method   : 'The method you called is not defined.'

semantic/dist/components/divider.css

@@ -60,8 +60,8 @@
   line-height: 1;
   text-align: center;
 }
-.ui.horizontal.divider:before,
+.ui.horizontal.divider::before,
-.ui.horizontal.divider:after {
+.ui.horizontal.divider::after {
   content: '';
   display: table-cell;
   position: relative;
@@ -69,10 +69,10 @@
   width: 50%;
   background-repeat: no-repeat;
 }
-.ui.horizontal.divider:before {
+.ui.horizontal.divider::before {
   background-position: right 1em top 50%;
 }
-.ui.horizontal.divider:after {
+.ui.horizontal.divider::after {
   background-position: left 1em top 50%;
 }
 
@@ -94,8 +94,8 @@
   -webkit-transform: translateX(-50%);
           transform: translateX(-50%);
 }
-.ui.vertical.divider:before,
+.ui.vertical.divider::before,
-.ui.vertical.divider:after {
+.ui.vertical.divider::after {
   position: absolute;
   left: 50%;
   content: '';
@@ -105,10 +105,10 @@
   width: 0;
   height: calc(100% - 1rem);
 }
-.ui.vertical.divider:before {
+.ui.vertical.divider::before {
   top: -100%;
 }
-.ui.vertical.divider:after {
+.ui.vertical.divider::after {
   top: auto;
   bottom: 0;
 }
@@ -130,10 +130,10 @@
     -webkit-transform: none;
             transform: none;
   }
-  .ui.stackable.grid .ui.vertical.divider:before,
+  .ui.stackable.grid .ui.vertical.divider::before,
-  .ui.grid .stackable.row .ui.vertical.divider:before,
+  .ui.grid .stackable.row .ui.vertical.divider::before,
-  .ui.stackable.grid .ui.vertical.divider:after,
+  .ui.stackable.grid .ui.vertical.divider::after,
-  .ui.grid .stackable.row .ui.vertical.divider:after {
+  .ui.grid .stackable.row .ui.vertical.divider::after {
     left: 0;
     border-left: none;
     border-right: none;
@@ -144,12 +144,12 @@
     width: 50%;
     background-repeat: no-repeat;
   }
-  .ui.stackable.grid .ui.vertical.divider:before,
+  .ui.stackable.grid .ui.vertical.divider::before,
-  .ui.grid .stackable.row .ui.vertical.divider:before {
+  .ui.grid .stackable.row .ui.vertical.divider::before {
     background-position: right 1em top 50%;
   }
-  .ui.stackable.grid .ui.vertical.divider:after,
+  .ui.stackable.grid .ui.vertical.divider::after,
-  .ui.grid .stackable.row .ui.vertical.divider:after {
+  .ui.grid .stackable.row .ui.vertical.divider::after {
     background-position: left 1em top 50%;
   }
 }
@@ -169,16 +169,16 @@
        Header
   ---------------*/
 
-.ui.horizontal.divider[class*="left aligned"]:before {
+.ui.horizontal.divider[class*="left aligned"]::before {
   display: none;
 }
-.ui.horizontal.divider[class*="left aligned"]:after {
+.ui.horizontal.divider[class*="left aligned"]::after {
   width: 100%;
 }
-.ui.horizontal.divider[class*="right aligned"]:before {
+.ui.horizontal.divider[class*="right aligned"]::before {
   width: 100%;
 }
-.ui.horizontal.divider[class*="right aligned"]:after {
+.ui.horizontal.divider[class*="right aligned"]::after {
   display: none;
 }
 
@@ -195,8 +195,8 @@
 .ui.hidden.divider {
   border-color: transparent !important;
 }
-.ui.hidden.divider:before,
+.ui.hidden.divider::before,
-.ui.hidden.divider:after {
+.ui.hidden.divider::after {
   display: none;
 }
 
@@ -210,8 +210,8 @@
   color: #FFFFFF;
 }
 .ui.divider.inverted,
-.ui.divider.inverted:after,
+.ui.divider.inverted::after,
-.ui.divider.inverted:before {
+.ui.divider.inverted::before {
   border-top-color: rgba(34, 36, 38, 0.15) !important;
   border-left-color: rgba(34, 36, 38, 0.15) !important;
   border-bottom-color: rgba(255, 255, 255, 0.15) !important;
@@ -251,25 +251,25 @@
   font-size: 1rem;
 }
 .ui.mini.divider {
-  font-size: 0.75rem;
+  font-size: 0.78571429rem;
 }
 .ui.tiny.divider {
-  font-size: 0.83333333rem;
+  font-size: 0.85714286rem;
 }
 .ui.small.divider {
-  font-size: 0.91666667rem;
+  font-size: 0.92857143rem;
 }
 .ui.large.divider {
-  font-size: 1.16666667rem;
+  font-size: 1.14285714rem;
 }
 .ui.big.divider {
-  font-size: 1.25rem;
+  font-size: 1.28571429rem;
 }
 .ui.huge.divider {
-  font-size: 1.41666667rem;
+  font-size: 1.42857143rem;
 }
 .ui.massive.divider {
-  font-size: 1.75rem;
+  font-size: 1.71428571rem;
 }
 
 
@@ -277,15 +277,15 @@
          Theme Overrides
 *******************************/
 
-.ui.horizontal.divider:before,
+.ui.horizontal.divider::before,
-.ui.horizontal.divider:after {
+.ui.horizontal.divider::after {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC');
 }
 @media only screen and (max-width: 767px) {
-  .ui.stackable.grid .ui.vertical.divider:before,
+  .ui.stackable.grid .ui.vertical.divider::before,
-  .ui.grid .stackable.row .ui.vertical.divider:before,
+  .ui.grid .stackable.row .ui.vertical.divider::before,
-  .ui.stackable.grid .ui.vertical.divider:after,
+  .ui.stackable.grid .ui.vertical.divider::after,
-  .ui.grid .stackable.row .ui.vertical.divider:after {
+  .ui.grid .stackable.row .ui.vertical.divider::after {
     background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAACCAYAAACuTHuKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1OThBRDY4OUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1OThBRDY4QUNDMTYxMUU0OUE3NUVGOEJDMzMzMjE2NyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjU5OEFENjg3Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjU5OEFENjg4Q0MxNjExRTQ5QTc1RUY4QkMzMzMyMTY3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+VU513gAAADVJREFUeNrs0DENACAQBDBIWLGBJQby/mUcJn5sJXQmOQMAAAAAAJqt+2prAAAAAACg2xdgANk6BEVuJgyMAAAAAElFTkSuQmCC');
   }
 }

semantic/dist/components/dropdown.css

@@ -58,10 +58,10 @@
   -webkit-box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
           box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
   border: 1px solid rgba(34, 36, 38, 0.15);
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
   -webkit-transition: opacity 0.1s ease;
   transition: opacity 0.1s ease;
-  z-index: 103;
+  z-index: 11;
   will-change: transform, opacity;
 }
 .ui.dropdown .menu > * {
@@ -85,7 +85,7 @@
   position: relative;
   width: auto;
   min-width: 1em;
-  font-size: 1em;
+  font-size: 0.85714286em;
   margin: 0 0 0 1em;
 }
 .ui.dropdown .menu > .item .dropdown.icon {
@@ -117,13 +117,13 @@
   display: block;
   border: none;
   height: auto;
-  min-height: 2.5rem;
+  min-height: 2.57142857rem;
   text-align: left;
   border-top: none;
   line-height: 1em;
   font-size: 1rem;
   color: rgba(0, 0, 0, 0.87);
-  padding: 0.75rem 1.16666667rem !important;
+  padding: 0.78571429rem 1.14285714rem;
   text-transform: none;
   font-weight: normal;
   -webkit-box-shadow: none;
@@ -172,13 +172,13 @@
 
 .ui.dropdown .menu > .header {
   margin: 1rem 0 0.75rem;
-  padding: 0 1.16666667rem;
+  padding: 0 1.14285714rem;
   font-weight: bold;
   text-transform: uppercase;
 }
 .ui.dropdown .menu > .header:not(.ui) {
   color: rgba(0, 0, 0, 0.85);
-  font-size: 0.91666667em;
+  font-size: 0.78571429em;
 }
 .ui.dropdown .menu > .divider {
   border-top: 1px solid rgba(34, 36, 38, 0.1);
@@ -188,19 +188,19 @@
 .ui.dropdown .menu > .horizontal.divider {
   border-top: none;
 }
-.ui.dropdown.dropdown .menu > .input {
+.ui.ui.ui.dropdown .menu > .input {
   width: auto;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  margin: 1.16666667rem 0.75rem;
+  margin: 1.14285714rem 0.78571429rem;
   min-width: 10rem;
 }
 .ui.dropdown .menu > .header + .input {
   margin-top: 0;
 }
 .ui.dropdown .menu > .input:not(.transparent) input {
-  padding: 0.5em 1.16666667em;
+  padding: 0.5em 1em;
 }
 .ui.dropdown .menu > .input:not(.transparent) .button,
 .ui.dropdown .menu > .input:not(.transparent) i.icon,
@@ -236,7 +236,7 @@
 -------------------*/
 
 .ui.dropdown .menu > .message {
-  padding: 0.75rem 1.16666667rem;
+  padding: 0.78571429rem 1.14285714rem;
   font-weight: normal;
 }
 .ui.dropdown .menu > .message:not(.ui) {
@@ -252,12 +252,12 @@
   left: 100%;
   right: auto;
   margin: 0 -0.5em !important;
-  border-radius: 0.33333333rem !important;
+  border-radius: 0.28571429rem !important;
   z-index: 21 !important;
 }
 
 /* Hide Arrow */
-.ui.dropdown .menu .menu:after {
+.ui.dropdown .menu .menu::after {
   display: none;
 }
 
@@ -297,7 +297,7 @@
 .ui.dropdown .menu > .item > img {
   margin-left: 0;
   float: none;
-  margin-right: 0.75rem;
+  margin-right: 0.78571429rem;
 }
 
 /*--------------
@@ -328,8 +328,8 @@
 
 
 /* Remove Menu Item Divider */
-.ui.dropdown .ui.menu > .item:before,
+.ui.dropdown .ui.menu > .item::before,
-.ui.menu .ui.dropdown .menu > .item:before {
+.ui.menu .ui.dropdown .menu > .item::before {
   display: none;
 }
 
@@ -365,9 +365,15 @@
 .ui.dropdown.icon.button > .dropdown.icon {
   margin: 0;
 }
-.ui.button.dropdown .menu {
+.ui.dropdown.button .menu {
   min-width: 100%;
 }
+.ui.dropdown.button:not(.pointing):not(.floating).active {
+  border-radius: 0.28571429rem 0.28571429rem 0 0;
+}
+.ui.dropdown.button:not(.pointing):not(.floating) > .menu {
+  border-radius: 0 0 0.28571429rem 0.28571429rem;
+}
 
 
 /*******************************
@@ -396,15 +402,15 @@ select.ui.dropdown {
   -webkit-transform: rotateZ(0deg);
           transform: rotateZ(0deg);
   min-width: 14em;
-  min-height: 2.96428571em;
+  min-height: 2.71428571em;
   background: #FFFFFF;
   display: inline-block;
-  padding: 0.91666667em 3.36666667em 0.91666667em 1.16666667em;
+  padding: 0.78571429em 3.2em 0.78571429em 1em;
   color: rgba(0, 0, 0, 0.87);
   -webkit-box-shadow: none;
           box-shadow: none;
   border: 1px solid rgba(34, 36, 38, 0.15);
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
   -webkit-transition: width 0.1s ease, -webkit-box-shadow 0.1s ease;
   transition: width 0.1s ease, -webkit-box-shadow 0.1s ease;
   transition: box-shadow 0.1s ease, width 0.1s ease;
@@ -422,10 +428,10 @@ select.ui.dropdown {
   width: auto;
   height: auto;
   line-height: 1.21428571em;
-  top: 0.91666667em;
+  top: 0.78571429em;
-  right: 1.16666667em;
+  right: 1em;
   z-index: 3;
-  margin: -0.91666667em;
+  margin: -0.78571429em;
   padding: 0.91666667em;
   opacity: 0.8;
   -webkit-transition: opacity 0.1s ease;
@@ -450,14 +456,14 @@ select.ui.dropdown {
   margin: 0 -1px;
   min-width: calc(100% + 2px);
   width: calc(100% + 2px);
-  border-radius: 0 0 0.33333333rem 0.33333333rem;
+  border-radius: 0 0 0.28571429rem 0.28571429rem;
   -webkit-box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
           box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
   -webkit-transition: opacity 0.1s ease;
   transition: opacity 0.1s ease;
 }
-.ui.selection.dropdown .menu:after,
+.ui.selection.dropdown .menu::after,
-.ui.selection.dropdown .menu:before {
+.ui.selection.dropdown .menu::before {
   display: none;
 }
 
@@ -466,81 +472,81 @@ select.ui.dropdown {
   ---------------*/
 
 .ui.selection.dropdown .menu > .message {
-  padding: 0.75rem 1.16666667rem;
+  padding: 0.78571429rem 1.14285714rem;
 }
 @media only screen and (max-width: 767.98px) {
   .ui.selection.dropdown.short .menu {
-    max-height: 5.85rem;
+    max-height: 6.01071429rem;
   }
   .ui.selection.dropdown[class*="very short"] .menu {
-    max-height: 3.9rem;
+    max-height: 4.00714286rem;
   }
   .ui.selection.dropdown .menu {
-    max-height: 7.8rem;
+    max-height: 8.01428571rem;
   }
   .ui.selection.dropdown.long .menu {
-    max-height: 15.6rem;
+    max-height: 16.02857143rem;
   }
   .ui.selection.dropdown[class*="very long"] .menu {
-    max-height: 23.4rem;
+    max-height: 24.04285714rem;
   }
 }
 @media only screen and (min-width: 768px) {
   .ui.selection.dropdown.short .menu {
-    max-height: 7.8rem;
+    max-height: 8.01428571rem;
   }
   .ui.selection.dropdown[class*="very short"] .menu {
-    max-height: 5.2rem;
+    max-height: 5.34285714rem;
   }
   .ui.selection.dropdown .menu {
-    max-height: 10.4rem;
+    max-height: 10.68571429rem;
   }
   .ui.selection.dropdown.long .menu {
-    max-height: 20.8rem;
+    max-height: 21.37142857rem;
   }
   .ui.selection.dropdown[class*="very long"] .menu {
-    max-height: 31.2rem;
+    max-height: 32.05714286rem;
   }
 }
 @media only screen and (min-width: 992px) {
   .ui.selection.dropdown.short .menu {
-    max-height: 11.7rem;
+    max-height: 12.02142857rem;
   }
   .ui.selection.dropdown[class*="very short"] .menu {
-    max-height: 7.8rem;
+    max-height: 8.01428571rem;
   }
   .ui.selection.dropdown .menu {
-    max-height: 15.6rem;
+    max-height: 16.02857143rem;
   }
   .ui.selection.dropdown.long .menu {
-    max-height: 31.2rem;
+    max-height: 32.05714286rem;
   }
   .ui.selection.dropdown[class*="very long"] .menu {
-    max-height: 46.8rem;
+    max-height: 48.08571429rem;
   }
 }
 @media only screen and (min-width: 1920px) {
   .ui.selection.dropdown.short .menu {
-    max-height: 15.6rem;
+    max-height: 16.02857143rem;
   }
   .ui.selection.dropdown[class*="very short"] .menu {
-    max-height: 10.4rem;
+    max-height: 10.68571429rem;
   }
   .ui.selection.dropdown .menu {
-    max-height: 20.8rem;
+    max-height: 21.37142857rem;
   }
   .ui.selection.dropdown.long .menu {
-    max-height: 41.6rem;
+    max-height: 42.74285714rem;
   }
   .ui.selection.dropdown[class*="very long"] .menu {
-    max-height: 62.4rem;
+    max-height: 64.11428571rem;
   }
 }
 
 /* Menu Item */
 .ui.selection.dropdown .menu > .item {
   border-top: 1px solid #FAFAFA;
-  padding: 0.75rem 1.16666667rem !important;
+  padding: 0.78571429rem 1.14285714rem;
   white-space: normal;
   word-wrap: normal;
 }
@@ -558,25 +564,27 @@ select.ui.dropdown {
 }
 
 /* Active */
+.ui.selection.simple.dropdown:hover,
 .ui.selection.active.dropdown {
-  border-color: #a285df;
+  border-color: #96C8DA;
   -webkit-box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
           box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
 }
+.ui.selection.simple.dropdown:hover .menu,
 .ui.selection.active.dropdown .menu {
-  border-color: #a285df;
+  border-color: #96C8DA;
   -webkit-box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
           box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
 }
 
 /* Focus */
 .ui.selection.dropdown:focus {
-  border-color: #a285df;
+  border-color: #96C8DA;
   -webkit-box-shadow: none;
           box-shadow: none;
 }
 .ui.selection.dropdown:focus .menu {
-  border-color: #a285df;
+  border-color: #96C8DA;
   -webkit-box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
           box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
 }
@@ -589,12 +597,12 @@ select.ui.dropdown {
 
 /* Visible Hover */
 .ui.selection.active.dropdown:hover {
-  border-color: #a285df;
+  border-color: #96C8DA;
   -webkit-box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
           box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
 }
 .ui.selection.active.dropdown:hover .menu {
-  border-color: #a285df;
+  border-color: #96C8DA;
   -webkit-box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
           box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
 }
@@ -614,7 +622,7 @@ select.ui.dropdown {
 
 /* Empty Connecting Border */
 .ui.active.empty.selection.dropdown {
-  border-radius: 0.33333333rem !important;
+  border-radius: 0.28571429rem !important;
   -webkit-box-shadow: none !important;
           box-shadow: none !important;
 }
@@ -627,7 +635,7 @@ select.ui.dropdown {
 /* CSS specific to iOS devices or firefox mobile only  */
 @supports (-webkit-touch-callout: none) or (-webkit-overflow-scrolling: touch) or (-moz-appearance:none) {
   @media (-moz-touch-enabled), (pointer: coarse) {
-    .ui.dropdown .scrollhint.menu:not(.hidden):before {
+    .ui.dropdown .scrollhint.menu:not(.hidden)::before {
       -webkit-animation: scrollhint 2s ease 2;
               animation: scrollhint 2s ease 2;
       content: '';
@@ -646,7 +654,7 @@ select.ui.dropdown {
               border-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.75)), to(rgba(0, 0, 0, 0))) 1 100%;
               border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)) 1 100%;
     }
-    .ui.inverted.dropdown .scrollhint.menu:not(.hidden):before {
+    .ui.inverted.dropdown .scrollhint.menu:not(.hidden)::before {
       -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.75)), to(rgba(255, 255, 255, 0))) 1 100%;
       -webkit-border-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)) 1 100%;
            -o-border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)) 1 100%;
@@ -716,13 +724,13 @@ select.ui.dropdown {
 /* Search Selection */
 .ui.search.selection.dropdown > input.search {
   line-height: 1.21428571em;
-  padding: 0.80952381em 3.36666667em 0.80952381em 1.16666667em;
+  padding: 0.67857143em 3.2em 0.67857143em 1em;
 }
 
 /* Used to size multi select input to character width */
 .ui.search.selection.dropdown > span.sizer {
   line-height: 1.21428571em;
-  padding: 0.80952381em 3.36666667em 0.80952381em 1.16666667em;
+  padding: 0.67857143em 3.2em 0.67857143em 1em;
   display: none;
   white-space: pre;
 }
@@ -759,33 +767,33 @@ select.ui.dropdown {
 }
 @media only screen and (max-width: 767.98px) {
   .ui.search.dropdown .menu {
-    max-height: 7.8rem;
+    max-height: 8.01428571rem;
   }
 }
 @media only screen and (min-width: 768px) {
   .ui.search.dropdown .menu {
-    max-height: 10.4rem;
+    max-height: 10.68571429rem;
   }
 }
 @media only screen and (min-width: 992px) {
   .ui.search.dropdown .menu {
-    max-height: 15.6rem;
+    max-height: 16.02857143rem;
   }
 }
 @media only screen and (min-width: 1920px) {
   .ui.search.dropdown .menu {
-    max-height: 20.8rem;
+    max-height: 21.37142857rem;
   }
 }
 
 /* Clearable Selection */
 .ui.dropdown > .remove.icon {
   cursor: pointer;
-  font-size: 1em;
+  font-size: 0.85714286em;
-  margin: -0.91666667em;
+  margin: -0.78571429em;
   padding: 0.91666667em;
   right: 2em;
-  top: 0.91666667em;
+  top: 0.78571429em;
   position: absolute;
   opacity: 0.6;
   z-index: 3;
@@ -820,7 +828,7 @@ select.ui.dropdown {
 
 /* Multiple Selection */
 .ui.ui.multiple.dropdown {
-  padding: 0.26984127em 3.36666667em 0.26984127em 0.41666667em;
+  padding: 0.22619048em 3.2em 0.22619048em 0.35714286em;
 }
 .ui.multiple.dropdown .menu {
   cursor: auto;
@@ -831,8 +839,8 @@ select.ui.dropdown {
   display: inline-block;
   white-space: normal;
   font-size: 1em;
-  padding: 0.41666667em 0.75em;
+  padding: 0.35714286em 0.78571429em;
-  margin: 0.16666667rem 0.33333333rem 0.16666667rem 0;
+  margin: 0.14285714rem 0.28571429rem 0.14285714rem 0;
   -webkit-box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
           box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
 }
@@ -848,8 +856,8 @@ select.ui.dropdown {
   position: static;
   padding: 0;
   max-width: 100%;
-  margin: 0.53968254em 0 0.53968254em 0.75em;
+  margin: 0.45238095em 0 0.45238095em 0.64285714em;
-  line-height: 1.41666667em;
+  line-height: 1.21428571em;
 }
 .ui.multiple.dropdown > .text.default {
   white-space: nowrap;
@@ -857,20 +865,20 @@ select.ui.dropdown {
   text-overflow: ellipsis;
 }
 .ui.multiple.dropdown > .label ~ input.search {
-  margin-left: 0.16666667em !important;
+  margin-left: 0.14285714em !important;
 }
 .ui.multiple.dropdown > .label ~ .text {
   display: none;
 }
 .ui.multiple.dropdown > .label:not(.image) > img:not(.centered) {
-  margin-right: 0.75rem;
+  margin-right: 0.78571429rem;
 }
 .ui.multiple.dropdown > .label:not(.image) > img.ui:not(.avatar) {
-  margin-bottom: 0.375rem;
+  margin-bottom: 0.39285714rem;
 }
 .ui.multiple.dropdown > .image.label img {
-  margin: -0.41666667em 0.75em -0.41666667em -0.75em;
+  margin: -0.35714286em 0.78571429em -0.35714286em -0.78571429em;
-  height: 1.83333333em;
+  height: 1.71428571em;
 }
 
 /*-----------------
@@ -891,8 +899,8 @@ select.ui.dropdown {
   top: 0;
   left: 0;
   padding: inherit;
-  margin: 0.53968254em 0 0.53968254em 0.75em;
+  margin: 0.45238095em 0 0.45238095em 0.64285714em;
-  line-height: 1.41666667em;
+  line-height: 1.21428571em;
 }
 .ui.multiple.search.dropdown > .label ~ .text {
   display: none;
@@ -903,9 +911,9 @@ select.ui.dropdown {
   position: static;
   padding: 0;
   max-width: 100%;
-  margin: 0.53968254em 0 0.53968254em 0.75em;
+  margin: 0.45238095em 0 0.45238095em 0.64285714em;
   width: 2.2em;
-  line-height: 1.41666667em;
+  line-height: 1.21428571em;
 }
 .ui.multiple.search.dropdown.button {
   min-width: 14em;
@@ -921,7 +929,7 @@ select.ui.dropdown {
   color: inherit;
 }
 .ui.inline.dropdown .dropdown.icon {
-  margin: 0 0.25em 0 0.25em;
+  margin: 0 0.21428571em 0 0.21428571em;
   vertical-align: baseline;
 }
 .ui.inline.dropdown > .text {
@@ -929,8 +937,8 @@ select.ui.dropdown {
 }
 .ui.inline.dropdown .menu {
   cursor: auto;
-  margin-top: 0.25em;
+  margin-top: 0.21428571em;
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
 }
 
 
@@ -951,7 +959,7 @@ select.ui.dropdown {
   color: rgba(0, 0, 0, 0.95);
   -webkit-box-shadow: none;
           box-shadow: none;
-  z-index: 104;
+  z-index: 12;
 }
 
 /*--------------------
@@ -963,7 +971,7 @@ select.ui.dropdown {
 .ui.dropdown .menu > .item:hover {
   background: rgba(0, 0, 0, 0.05);
   color: rgba(0, 0, 0, 0.95);
-  z-index: 105;
+  z-index: 13;
 }
 
 /*--------------------
@@ -984,32 +992,32 @@ select.ui.dropdown {
   ---------------------*/
 
 .ui.loading.dropdown > i.icon {
-  height: 1.16666667em !important;
+  height: 1em !important;
 }
 .ui.loading.selection.dropdown > i.icon {
-  padding: 1.75em 1.5em !important;
+  padding: 1.5em 1.28571429em !important;
 }
-.ui.loading.dropdown > i.icon:before {
+.ui.loading.dropdown > i.icon::before {
   position: absolute;
   content: '';
   top: 50%;
   left: 50%;
-  margin: -0.625em 0 0 -0.625em;
+  margin: -0.64285714em 0 0 -0.64285714em;
-  width: 1.25em;
+  width: 1.28571429em;
-  height: 1.25em;
+  height: 1.28571429em;
   border-radius: 500rem;
   border: 0.2em solid rgba(0, 0, 0, 0.1);
 }
-.ui.loading.dropdown > i.icon:after {
+.ui.loading.dropdown > i.icon::after {
   position: absolute;
   content: '';
   top: 50%;
   left: 50%;
   -webkit-box-shadow: 0 0 0 1px transparent;
           box-shadow: 0 0 0 1px transparent;
-  margin: -0.625em 0 0 -0.625em;
+  margin: -0.64285714em 0 0 -0.64285714em;
-  width: 1.25em;
+  width: 1.28571429em;
-  height: 1.25em;
+  height: 1.28571429em;
   -webkit-animation: loader 0.6s infinite linear;
           animation: loader 0.6s infinite linear;
   border: 0.2em solid #767676;
@@ -1017,8 +1025,8 @@ select.ui.dropdown {
 }
 
 /* Coupling */
-.ui.loading.dropdown.button > i.icon:before,
+.ui.loading.dropdown.button > i.icon::before,
-.ui.loading.dropdown.button > i.icon:after {
+.ui.loading.dropdown.button > i.icon::after {
   display: none;
 }
 .ui.loading.dropdown > .text {
@@ -1257,7 +1265,7 @@ select.ui.dropdown {
 .ui.dropdown .menu .right.menu {
   left: 100% !important;
   right: auto !important;
-  border-radius: 0.33333333rem !important;
+  border-radius: 0.28571429rem !important;
 }
 
 /* Leftward Opening Menu */
@@ -1270,7 +1278,7 @@ select.ui.dropdown {
   left: auto;
   right: 100%;
   margin: 0 -0.5em 0 0 !important;
-  border-radius: 0.33333333rem !important;
+  border-radius: 0.28571429rem !important;
 }
 .ui.dropdown .item .left.dropdown.icon,
 .ui.dropdown .left.menu .item .dropdown.icon {
@@ -1301,7 +1309,6 @@ select.ui.dropdown {
   bottom: 100%;
   -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.08);
           box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.08);
-  border-radius: 0.33333333rem 0.33333333rem 0 0;
 }
 
 /* Upward Sub Menu */
@@ -1313,18 +1320,24 @@ select.ui.dropdown {
 /* Active Upward */
 .ui.simple.upward.active.dropdown,
 .ui.simple.upward.dropdown:hover {
-  border-radius: 0.33333333rem 0.33333333rem 0 0 !important;
+  border-radius: 0 0 0.28571429rem 0.28571429rem;
 }
+
+/* Button */
 .ui.upward.dropdown.button:not(.pointing):not(.floating).active {
-  border-radius: 0.33333333rem 0.33333333rem 0 0;
+  border-radius: 0 0 0.28571429rem 0.28571429rem;
+}
+.ui.upward.dropdown.button:not(.pointing):not(.floating) > .menu {
+  border-radius: 0.28571429rem 0.28571429rem 0 0;
 }
 
 /* Selection */
-.ui.upward.selection.dropdown .menu {
+.ui.ui.upward.selection.dropdown .menu {
   border-top-width: 1px !important;
   border-bottom-width: 0 !important;
   -webkit-box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.08);
           box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.08);
+  border-radius: 0.28571429rem 0.28571429rem 0 0;
 }
 .ui.upward.selection.dropdown:hover {
   -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05);
@@ -1333,14 +1346,14 @@ select.ui.dropdown {
 
 /* Active Upward */
 .ui.active.upward.selection.dropdown {
-  border-radius: 0 0 0.33333333rem 0.33333333rem !important;
+  border-radius: 0 0 0.28571429rem 0.28571429rem !important;
 }
 
 /* Visible Upward */
 .ui.upward.selection.dropdown.visible {
   -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.08);
           box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.08);
-  border-radius: 0 0 0.33333333rem 0.33333333rem !important;
+  border-radius: 0 0 0.28571429rem 0.28571429rem !important;
 }
 
 /* Visible Hover Upward */
@@ -1408,25 +1421,25 @@ select.ui.dropdown {
 @media only screen and (max-width: 767.98px) {
   .ui.scrolling.dropdown .menu,
   .ui.dropdown .scrolling.menu {
-    max-height: 10rem;
+    max-height: 10.28571429rem;
   }
 }
 @media only screen and (min-width: 768px) {
   .ui.scrolling.dropdown .menu,
   .ui.dropdown .scrolling.menu {
-    max-height: 15rem;
+    max-height: 15.42857143rem;
   }
 }
 @media only screen and (min-width: 992px) {
   .ui.scrolling.dropdown .menu,
   .ui.dropdown .scrolling.menu {
-    max-height: 20rem;
+    max-height: 20.57142857rem;
   }
 }
 @media only screen and (min-width: 1920px) {
   .ui.scrolling.dropdown .menu,
   .ui.dropdown .scrolling.menu {
-    max-height: 20rem;
+    max-height: 20.57142857rem;
   }
 }
 
@@ -1454,8 +1467,8 @@ select.ui.dropdown {
 }
 
 /*--------------
-     Columnar
+       Columnar
----------------*/
+  ---------------*/
 
 .ui.column.dropdown > .menu {
   -ms-flex-wrap: wrap;
@@ -1480,8 +1493,8 @@ select.ui.dropdown {
 
 
 /* Displays without javascript */
-.ui.simple.dropdown .menu:before,
+.ui.simple.dropdown .menu::before,
-.ui.simple.dropdown .menu:after {
+.ui.simple.dropdown .menu::after {
   display: none;
 }
 .ui.simple.dropdown .menu {
@@ -1499,14 +1512,23 @@ select.ui.dropdown {
   transition: opacity 0.1s ease;
   margin-top: 0 !important;
 }
+.ui.simple.dropdown .upward.menu {
+  margin-bottom: 1.5em;
+}
+.ui.simple.selection.dropdown .upward.menu {
+  margin-bottom: 2.5em;
+}
+.ui.menu:not(.vertical) .ui.simple.dropdown.item .upward.menu {
+  margin-bottom: 2.8em;
+}
 .ui.simple.active.dropdown,
 .ui.simple.dropdown:hover {
-  border-bottom-left-radius: 0 !important;
+  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0 !important;
+  border-bottom-right-radius: 0;
 }
 .ui.simple.active.dropdown > .menu,
 .ui.simple.dropdown:hover > .menu {
-  overflow: visible;
+  overflow: auto;
   width: auto;
   height: auto;
   top: 100%;
@@ -1514,7 +1536,7 @@ select.ui.dropdown {
 }
 .ui.simple.dropdown > .menu > .item:active > .menu,
 .ui.simple.dropdown .menu .item:hover > .menu {
-  overflow: visible;
+  overflow: auto;
   width: auto;
   height: auto;
   top: 0 !important;
@@ -1569,10 +1591,10 @@ select.ui.dropdown {
   right: auto;
   -webkit-box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15) !important;
           box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15) !important;
-  border-radius: 0.33333333rem !important;
+  border-radius: 0.28571429rem !important;
 }
 .ui.floating.dropdown > .menu {
-  border-radius: 0.33333333rem !important;
+  border-radius: 0.28571429rem !important;
 }
 .ui:not(.upward).floating.dropdown > .menu {
   margin-top: 0.5em;
@@ -1587,10 +1609,10 @@ select.ui.dropdown {
 
 .ui.pointing.dropdown > .menu {
   top: 100%;
-  margin-top: 0.75rem;
+  margin-top: 0.78571429rem;
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
 }
-.ui.pointing.dropdown > .menu:not(.hidden):after {
+.ui.pointing.dropdown > .menu:not(.hidden)::after {
   display: block;
   position: absolute;
   pointer-events: none;
@@ -1598,17 +1620,17 @@ select.ui.dropdown {
   visibility: visible;
   -webkit-transform: rotate(45deg);
           transform: rotate(45deg);
-  width: 0.58333333em;
+  width: 0.5em;
-  height: 0.58333333em;
+  height: 0.5em;
   -webkit-box-shadow: -1px -1px 0 0 rgba(34, 36, 38, 0.15);
           box-shadow: -1px -1px 0 0 rgba(34, 36, 38, 0.15);
   background: #FFFFFF;
   z-index: 2;
 }
-.ui.pointing.dropdown > .menu:not(.hidden):after {
+.ui.pointing.dropdown > .menu:not(.hidden)::after {
-  top: -0.29166667em;
+  top: -0.25em;
   left: 50%;
-  margin: 0 0 0 -0.29166667em;
+  margin: 0 0 0 -0.25em;
 }
 
 /* Top Left Pointing */
@@ -1626,8 +1648,8 @@ select.ui.dropdown {
   right: auto;
   margin: 1em 0 0;
 }
-.ui.top.left.pointing.dropdown > .menu:after {
+.ui.top.left.pointing.dropdown > .menu::after {
-  top: -0.29166667em;
+  top: -0.25em;
   left: 1em;
   right: auto;
   margin: 0;
@@ -1643,9 +1665,9 @@ select.ui.dropdown {
   left: auto;
   margin: 1em 0 0;
 }
-.ui.top.pointing.dropdown > .left.menu:after,
+.ui.top.pointing.dropdown > .left.menu::after,
-.ui.top.right.pointing.dropdown > .menu:after {
+.ui.top.right.pointing.dropdown > .menu::after {
-  top: -0.29166667em;
+  top: -0.25em;
   left: auto !important;
   right: 1em !important;
   margin: 0;
@@ -1660,9 +1682,9 @@ select.ui.dropdown {
   right: auto;
   margin: 0 0 0 1em;
 }
-.ui.left.pointing.dropdown > .menu:after {
+.ui.left.pointing.dropdown > .menu::after {
   top: 1em;
-  left: -0.29166667em;
+  left: -0.25em;
   margin: 0 0 0 0;
   -webkit-transform: rotate(-45deg);
           transform: rotate(-45deg);
@@ -1672,10 +1694,10 @@ select.ui.dropdown {
   right: 100% !important;
   margin: 0 1em 0 0;
 }
-.ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu:after {
+.ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu::after {
   top: 1em;
   left: auto;
-  right: -0.29166667em;
+  right: -0.25em;
   margin: 0 0 0 0;
   -webkit-transform: rotate(135deg);
           transform: rotate(135deg);
@@ -1688,10 +1710,10 @@ select.ui.dropdown {
   right: 100%;
   margin: 0 1em 0 0;
 }
-.ui.right.pointing.dropdown > .menu:after {
+.ui.right.pointing.dropdown > .menu::after {
   top: 1em;
   left: auto;
-  right: -0.29166667em;
+  right: -0.25em;
   margin: 0 0 0 0;
   -webkit-transform: rotate(135deg);
           transform: rotate(135deg);
@@ -1705,9 +1727,9 @@ select.ui.dropdown {
   right: auto;
   margin: 0 0 1em;
 }
-.ui.bottom.pointing.dropdown > .menu:after {
+.ui.bottom.pointing.dropdown > .menu::after {
   top: auto;
-  bottom: -0.29166667em;
+  bottom: -0.25em;
   right: auto;
   margin: 0;
   -webkit-transform: rotate(-135deg);
@@ -1725,7 +1747,7 @@ select.ui.dropdown {
   left: 0;
   right: auto;
 }
-.ui.bottom.left.pointing.dropdown > .menu:after {
+.ui.bottom.left.pointing.dropdown > .menu::after {
   left: 1em;
   right: auto;
 }
@@ -1735,7 +1757,7 @@ select.ui.dropdown {
   right: 0;
   left: auto;
 }
-.ui.bottom.right.pointing.dropdown > .menu:after {
+.ui.bottom.right.pointing.dropdown > .menu::after {
   left: auto;
   right: 1em;
 }
@@ -1745,16 +1767,16 @@ select.ui.dropdown {
 .ui.top.pointing.upward.dropdown .menu {
   top: auto !important;
   bottom: 100% !important;
-  margin: 0 0 0.75rem;
+  margin: 0 0 0.78571429rem;
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
 }
-.ui.pointing.upward.dropdown .menu:after,
+.ui.pointing.upward.dropdown .menu::after,
-.ui.top.pointing.upward.dropdown .menu:after {
+.ui.top.pointing.upward.dropdown .menu::after {
   top: 100% !important;
   bottom: auto !important;
   -webkit-box-shadow: 1px 1px 0 0 rgba(34, 36, 38, 0.15);
           box-shadow: 1px 1px 0 0 rgba(34, 36, 38, 0.15);
-  margin: -0.29166667em 0 0;
+  margin: -0.25em 0 0;
 }
 
 /* Right Pointing Upward */
@@ -1763,7 +1785,7 @@ select.ui.dropdown {
   bottom: 0 !important;
   margin: 0 1em 0 0;
 }
-.ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after {
+.ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu::after {
   top: auto !important;
   bottom: 0 !important;
   margin: 0 0 1em 0;
@@ -1777,7 +1799,7 @@ select.ui.dropdown {
   bottom: 0 !important;
   margin: 0 0 0 1em;
 }
-.ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after {
+.ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu::after {
   top: auto !important;
   bottom: 0 !important;
   margin: 0 0 1em 0;
@@ -1795,31 +1817,31 @@ select.ui.dropdown {
 }
 .ui.mini.dropdown,
 .ui.mini.dropdown .menu > .item {
-  font-size: 0.75rem;
+  font-size: 0.78571429rem;
 }
 .ui.tiny.dropdown,
 .ui.tiny.dropdown .menu > .item {
-  font-size: 0.83333333rem;
+  font-size: 0.85714286rem;
 }
 .ui.small.dropdown,
 .ui.small.dropdown .menu > .item {
-  font-size: 0.91666667rem;
+  font-size: 0.92857143rem;
 }
 .ui.large.dropdown,
 .ui.large.dropdown .menu > .item {
-  font-size: 1.16666667rem;
+  font-size: 1.14285714rem;
 }
 .ui.big.dropdown,
 .ui.big.dropdown .menu > .item {
-  font-size: 1.25rem;
+  font-size: 1.28571429rem;
 }
 .ui.huge.dropdown,
 .ui.huge.dropdown .menu > .item {
-  font-size: 1.41666667rem;
+  font-size: 1.42857143rem;
 }
 .ui.massive.dropdown,
 .ui.massive.dropdown .menu > .item {
-  font-size: 1.75rem;
+  font-size: 1.71428571rem;
 }
 
 /*--------------
@@ -1893,6 +1915,8 @@ select.ui.dropdown {
 .ui.inverted.selection.visible.dropdown > .text:not(.default) {
   color: rgba(255, 255, 255, 0.9);
 }
+.ui.selection.simple.dropdown:hover .inverted.menu,
+.ui.inverted.selection.simple.dropdown:hover .menu,
 .ui.selection.active.dropdown .inverted.menu,
 .ui.inverted.selection.active.dropdown .menu,
 .ui.inverted.selection.active.dropdown:hover {
@@ -1989,8 +2013,20 @@ select.ui.dropdown {
 .ui.inverted.dropdown .menu::-webkit-scrollbar-thumb:hover {
   background: rgba(255, 255, 255, 0.35);
 }
-.ui.pointing.dropdown > .inverted.menu:after,
+.ui.dropdown .inverted.menu,
-.ui.inverted.pointing.dropdown > .menu:after {
+.ui.inverted.dropdown .menu {
+  
+/* IE11 */
+  scrollbar-face-color: #656565;
+  scrollbar-shadow-color: #656565;
+  scrollbar-track-color: #323232;
+  scrollbar-arrow-color: #323232;
+  
+/* firefox : first color thumb, second track */
+  scrollbar-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.1);
+}
+.ui.pointing.dropdown > .inverted.menu::after,
+.ui.inverted.pointing.dropdown > .menu::after {
   background: #1B1C1D;
   -webkit-box-shadow: -1px -1px 0 0 rgba(255, 255, 255, 0.15);
           box-shadow: -1px -1px 0 0 rgba(255, 255, 255, 0.15);
@@ -2023,21 +2059,21 @@ select.ui.dropdown {
 .ui.dropdown > .dropdown.icon {
   width: auto;
 }
-.ui.dropdown > .dropdown.icon:before {
+.ui.dropdown > .dropdown.icon::before {
   content: '\f0d7';
 }
 
 /* Sub Menu */
-.ui.dropdown .menu .item .dropdown.icon:before {
+.ui.dropdown .menu .item .dropdown.icon::before {
   content: '\f0da' /*rtl:'\f0d9'*/;
 }
-.ui.dropdown .item .left.dropdown.icon:before,
+.ui.dropdown .item .left.dropdown.icon::before,
-.ui.dropdown .left.menu .item .dropdown.icon:before {
+.ui.dropdown .left.menu .item .dropdown.icon::before {
   content: "\f0d9" /*rtl:"\f0da"*/;
 }
 
 /* Vertical Menu Dropdown */
-.ui.vertical.menu .dropdown.item > .dropdown.icon:before {
+.ui.vertical.menu .dropdown.item > .dropdown.icon::before {
   content: "\f0da" /*rtl:"\f0d9"*/;
 }
 /* Icons for Reference

semantic/dist/components/dropdown.js

@@ -30,11 +30,6 @@ $.fn.dropdown = function(parameters) {
 
     moduleSelector = $allModules.selector || '',
 
-    hasTouch       = ('ontouchstart' in document.documentElement),
-    clickEvent      = hasTouch
-        ? 'touchstart'
-        : 'click',
-
     time           = new Date().getTime(),
     performance    = [],
 
@@ -66,7 +61,7 @@ $.fn.dropdown = function(parameters) {
         moduleNamespace = 'module-' + namespace,
 
         $module         = $(this),
-        $context        = $(settings.context),
+        $context        = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context),
         $text           = $module.find(selector.text),
         $search         = $module.find(selector.search),
         $sizer          = $module.find(selector.sizer),
@@ -200,6 +195,7 @@ $.fn.dropdown = function(parameters) {
           select: function() {
             if(module.has.input() && selectObserver) {
               selectObserver.observe($module[0], {
+                attributes: true,
                 childList : true,
                 subtree   : true
               });
@@ -224,7 +220,7 @@ $.fn.dropdown = function(parameters) {
 
         create: {
           id: function() {
-            id = (Math.random().toString(16) + '000000000').substr(2, 8);
+            id = (Math.random().toString(16) + '000000000').slice(2, 10);
             elementNamespace = '.' + id;
             module.verbose('Creating unique id for element', id);
           },
@@ -421,6 +417,9 @@ $.fn.dropdown = function(parameters) {
                 module.debug('Disabling dropdown');
                 $module.addClass(className.disabled);
               }
+              if($input.is('[required]')) {
+                settings.forceSelection = true;
+              }
               $input
                 .removeAttr('required')
                 .removeAttr('class')
@@ -537,9 +536,7 @@ $.fn.dropdown = function(parameters) {
             }
             if(settings.onShow.call(element) !== false) {
               module.animate.show(function() {
-                if( module.can.click() ) {
+                module.bind.intent();
-                  module.bind.intent();
-                }
                 if(module.has.search() && !preventFocus) {
                   module.focusSearch();
                 }
@@ -560,14 +557,23 @@ $.fn.dropdown = function(parameters) {
             if(settings.onHide.call(element) !== false) {
               module.animate.hide(function() {
                 module.remove.visible();
-                // hidding search focus
+                // hiding search focus
                 if ( module.is.focusedOnSearch() && preventBlur !== true ) {
                   $search.blur();
                 }
                 callback.call(element);
               });
+              // Hide submenus explicitly. On some browsers (esp. mobile), they will not automatically receive a
+              // mouseleave event
+              var $subMenu = $module.find(selector.menu);
+              if($subMenu.length > 0) {
+                module.verbose('Hiding sub-menu', $subMenu);
+                $subMenu.each(function() {
+                  module.animate.hide(false, $(this));
+                });
+              }
             }
-          } else if( module.can.click() ) {
+          } else {
               module.unbind.intent();
           }
           iconClicked = false;
@@ -625,13 +631,18 @@ $.fn.dropdown = function(parameters) {
             $module
               .on('change' + eventNamespace, selector.input, module.event.change)
             ;
+            if(module.is.multiple() && module.is.searchSelection()) {
+              $module
+                  .on('paste' + eventNamespace, selector.search, module.event.paste)
+              ;
+            }
           },
           mouseEvents: function() {
             module.verbose('Binding mouse events');
             if(module.is.multiple()) {
               $module
-                .on(clickEvent   + eventNamespace, selector.label,  module.event.label.click)
+                .on('click'   + eventNamespace, selector.label,  module.event.label.click)
-                .on(clickEvent   + eventNamespace, selector.remove, module.event.remove.click)
+                .on('click'   + eventNamespace, selector.remove, module.event.remove.click)
               ;
             }
             if( module.is.searchSelection() ) {
@@ -640,31 +651,33 @@ $.fn.dropdown = function(parameters) {
                 .on('mouseup'   + eventNamespace, module.event.mouseup)
                 .on('mousedown' + eventNamespace, selector.menu,   module.event.menu.mousedown)
                 .on('mouseup'   + eventNamespace, selector.menu,   module.event.menu.mouseup)
-                .on(clickEvent  + eventNamespace, selector.icon,   module.event.icon.click)
+                .on('click'     + eventNamespace, selector.icon,   module.event.icon.click)
-                .on(clickEvent  + eventNamespace, selector.clearIcon, module.event.clearIcon.click)
+                .on('click'     + eventNamespace, selector.clearIcon, module.event.clearIcon.click)
                 .on('focus'     + eventNamespace, selector.search, module.event.search.focus)
-                .on(clickEvent  + eventNamespace, selector.search, module.event.search.focus)
+                .on('click'     + eventNamespace, selector.search, module.event.search.focus)
                 .on('blur'      + eventNamespace, selector.search, module.event.search.blur)
-                .on(clickEvent  + eventNamespace, selector.text,   module.event.text.focus)
+                .on('click'     + eventNamespace, selector.text,   module.event.text.focus)
               ;
               if(module.is.multiple()) {
                 $module
-                  .on(clickEvent + eventNamespace, module.event.click)
+                  .on('click' + eventNamespace, module.event.click)
-                  .on(clickEvent + eventNamespace, module.event.search.focus)
+                  .on('click' + eventNamespace, module.event.search.focus)
                 ;
               }
             }
             else {
               if(settings.on == 'click') {
                 $module
-                  .on(clickEvent + eventNamespace, selector.icon, module.event.icon.click)
+                  .on('click' + eventNamespace, selector.icon, module.event.icon.click)
-                  .on(clickEvent + eventNamespace, module.event.test.toggle)
+                  .on('click' + eventNamespace, module.event.test.toggle)
                 ;
               }
               else if(settings.on == 'hover') {
                 $module
                   .on('mouseenter' + eventNamespace, module.delay.show)
                   .on('mouseleave' + eventNamespace, module.delay.hide)
+                  .on('touchstart' + eventNamespace, module.event.test.toggle)
+                  .on('touchstart' + eventNamespace, selector.icon, module.event.icon.click)
                 ;
               }
               else {
@@ -676,7 +689,7 @@ $.fn.dropdown = function(parameters) {
                 .on('mousedown' + eventNamespace, module.event.mousedown)
                 .on('mouseup'   + eventNamespace, module.event.mouseup)
                 .on('focus'     + eventNamespace, module.event.focus)
-                .on(clickEvent  + eventNamespace, selector.clearIcon, module.event.clearIcon.click)
+                .on('click'     + eventNamespace, selector.clearIcon, module.event.clearIcon.click)
               ;
               if(module.has.menuSearch() ) {
                 $module
@@ -690,21 +703,16 @@ $.fn.dropdown = function(parameters) {
               }
             }
             $menu
-              .on((hasTouch ? 'touchstart' : 'mouseenter') + eventNamespace, selector.item, module.event.item.mouseenter)
+              .on('mouseenter' + eventNamespace, selector.item, module.event.item.mouseenter)
+              .on('touchstart' + eventNamespace, selector.item, module.event.item.mouseenter)
               .on('mouseleave' + eventNamespace, selector.item, module.event.item.mouseleave)
               .on('click'      + eventNamespace, selector.item, module.event.item.click)
             ;
           },
           intent: function() {
             module.verbose('Binding hide intent event to document');
-            if(hasTouch) {
-              $document
-                .on('touchstart' + elementNamespace, module.event.test.touch)
-                .on('touchmove'  + elementNamespace, module.event.test.touch)
-              ;
-            }
             $document
-              .on(clickEvent + elementNamespace, module.event.test.hide)
+              .on('click' + elementNamespace, module.event.test.hide)
             ;
           }
         },
@@ -712,14 +720,8 @@ $.fn.dropdown = function(parameters) {
         unbind: {
           intent: function() {
             module.verbose('Removing hide intent event from document');
-            if(hasTouch) {
-              $document
-                .off('touchstart' + elementNamespace)
-                .off('touchmove' + elementNamespace)
-              ;
-            }
             $document
-              .off(clickEvent + elementNamespace)
+              .off('click' + elementNamespace)
             ;
           }
         },
@@ -812,20 +814,28 @@ $.fn.dropdown = function(parameters) {
               throttle      : settings.throttle,
               urlData       : {
                 query: query
-              },
+              }
-              onError: function() {
+            },
+            apiCallbacks = {
+              onError: function(errorMessage, $module, xhr) {
                 module.add.message(message.serverError);
                 iconClicked = false;
                 focused = false;
                 callback.apply(null, callbackParameters);
+                if(typeof settings.apiSettings.onError === 'function') {
+                  settings.apiSettings.onError.call(this, errorMessage, $module, xhr);
+                }
               },
-              onFailure: function() {
+              onFailure: function(response, $module, xhr) {
                 module.add.message(message.serverError);
                 iconClicked = false;
                 focused = false;
                 callback.apply(null, callbackParameters);
+                if(typeof settings.apiSettings.onFailure === 'function') {
+                  settings.apiSettings.onFailure.call(this, response, $module, xhr);
+                }
               },
-              onSuccess : function(response) {
+              onSuccess : function(response, $module, xhr) {
                 var
                   values          = response[fields.remoteValues]
                 ;
@@ -844,19 +854,22 @@ $.fn.dropdown = function(parameters) {
                   var value = module.is.multiple() ? module.get.values() : module.get.value();
                   if (value !== '') {
                     module.verbose('Value(s) present after click icon, select value(s) in items');
-                    module.set.selected(value, null, null, true);
+                    module.set.selected(value, null, true, true);
                   }
                 }
                 iconClicked = false;
                 focused = false;
                 callback.apply(null, callbackParameters);
+                if(typeof settings.apiSettings.onSuccess === 'function') {
+                  settings.apiSettings.onSuccess.call(this, response, $module, xhr);
+                }
               }
             }
           ;
           if( !$module.api('get request') ) {
             module.setup.api();
           }
-          apiSettings = $.extend(true, {}, apiSettings, settings.apiSettings);
+          apiSettings = $.extend(true, {}, apiSettings, settings.apiSettings, apiCallbacks);
           $module
             .api('setting', apiSettings)
             .api('query')
@@ -1044,7 +1057,7 @@ $.fn.dropdown = function(parameters) {
             menuConfig[fields.values] = values;
             module.setup.menu(menuConfig);
             $.each(values, function(index, item) {
-              if(item.selected == true) {
+              if(item.selected === true) {
                 module.debug('Setting initial selection to', item[fields.value]);
                 module.set.selected(item[fields.value]);
                 if(!module.is.multiple()) {
@@ -1065,7 +1078,7 @@ $.fn.dropdown = function(parameters) {
                     settings.preserveHTML
                   )
                 ;
-                $input.append('<option value="' + value + '">' + name + '</option>');
+                $input.append('<option value="' + value + '"' + (item.selected === true ? ' selected' : '') + '>' + name + '</option>');
               });
               module.observe.select();
             }
@@ -1073,6 +1086,15 @@ $.fn.dropdown = function(parameters) {
         },
 
         event: {
+          paste: function(event) {
+            var pasteValue = (event.originalEvent.clipboardData || window.clipboardData).getData('text'),
+                tokens = pasteValue.split(settings.delimiter)
+            ;
+            tokens.forEach(function(value){
+              module.set.selected(module.escape.htmlEntities(value.trim()), null, true, true);
+            });
+            event.preventDefault();
+          },
           change: function() {
             if(!internalChange) {
               module.debug('Input changed, updating selection');
@@ -1131,7 +1153,7 @@ $.fn.dropdown = function(parameters) {
               if(module.is.multiple()) {
                 module.remove.activeLabel();
               }
-              if(!focused && !module.is.active() && (settings.showOnFocus || (event.type !== 'focus' && event.type !== 'focusin'))) {
+              if(!focused && !module.is.active() && (settings.showOnFocus || (event.type !== 'focus' && event.type !== 'focusin')) && event.type !== 'touchstart') {
                 focused = true;
                 module.search();
               }
@@ -1249,23 +1271,12 @@ $.fn.dropdown = function(parameters) {
               if (!module.is.multiple() || (module.is.multiple() && !module.is.active())) {
                 focused = true;
               }
-              if( module.determine.eventOnElement(event, toggleBehavior) ) {
+              if( module.determine.eventOnElement(event, toggleBehavior) && event.type !== 'touchstart') {
+                // do not preventDefault of touchstart; so emulated mouseenter is triggered on first touch and not later
+                // (when selecting an item). The double-showing of the dropdown through both events does not hurt.
                 event.preventDefault();
               }
             },
-            touch: function(event) {
-              module.determine.eventOnElement(event, function() {
-                if(event.type == 'touchstart') {
-                  module.timer = setTimeout(function() {
-                    module.hide();
-                  }, settings.delay.touch);
-                }
-                else if(event.type == 'touchmove') {
-                  clearTimeout(module.timer);
-                }
-              });
-              event.stopPropagation();
-            },
             hide: function(event) {
               if(module.determine.eventInModule(event, module.hide)){
                 if(element.id && $(event.target).attr('for') === element.id){
@@ -1285,8 +1296,8 @@ $.fn.dropdown = function(parameters) {
           },
           select: {
             mutation: function(mutations) {
-              module.debug('<select> modified, recreating menu');
               if(module.is.selectMutation(mutations)) {
+                module.debug('<select> modified, recreating menu');
                 module.disconnect.selectObserver();
                 module.refresh();
                 module.setup.select();
@@ -1349,13 +1360,15 @@ $.fn.dropdown = function(parameters) {
             },
             mouseleave: function(event) {
               var
-                $subMenu = $(this).children(selector.menu)
+                $subMenu = $(this).find(selector.menu)
               ;
               if($subMenu.length > 0) {
                 clearTimeout(module.itemTimer);
                 module.itemTimer = setTimeout(function() {
                   module.verbose('Hiding sub-menu', $subMenu);
-                  module.animate.hide(false, $subMenu);
+                  $subMenu.each(function() {
+                    module.animate.hide(false, $(this));
+                  });
                 }, settings.delay.hide);
               }
             },
@@ -1381,7 +1394,7 @@ $.fn.dropdown = function(parameters) {
                     module.remove.userAddition();
                   }
                   module.remove.searchTerm();
-                  if(!module.is.focusedOnSearch() && !(skipRefocus == true)) {
+                  if(!module.is.focusedOnSearch() && skipRefocus !== true) {
                     module.focusSearch(true);
                   }
                 }
@@ -1513,7 +1526,7 @@ $.fn.dropdown = function(parameters) {
           keydown: function(event) {
             var
               pressedKey    = event.which,
-              isShortcutKey = module.is.inObject(pressedKey, keys)
+              isShortcutKey = module.is.inObject(pressedKey, keys) || event.key === settings.delimiter
             ;
             if(isShortcutKey) {
               var
@@ -1531,7 +1544,7 @@ $.fn.dropdown = function(parameters) {
                 hasSubMenu            = ($subMenu.length> 0),
                 hasSelectedItem       = ($selectedItem.length > 0),
                 selectedIsSelectable  = ($selectedItem.not(selector.unselectable).length > 0),
-                delimiterPressed      = (pressedKey == keys.delimiter && settings.allowAdditions && module.is.multiple()),
+                delimiterPressed      = (event.key === settings.delimiter && module.is.multiple()),
                 isAdditionWithoutMenu = (settings.allowAdditions && settings.hideAdditions && (pressedKey == keys.enter || delimiterPressed) && selectedIsSelectable),
                 $nextItem,
                 isSubMenuItem,
@@ -1629,7 +1642,7 @@ $.fn.dropdown = function(parameters) {
                       .addClass(className.selected)
                     ;
                     module.set.scrollPosition($nextItem);
-                    if(settings.selectOnKeydown && module.is.single()) {
+                    if(settings.selectOnKeydown && module.is.single() && !$nextItem.hasClass(className.actionable)) {
                       module.set.selectedItem($nextItem);
                     }
                   }
@@ -1656,7 +1669,7 @@ $.fn.dropdown = function(parameters) {
                       .addClass(className.selected)
                     ;
                     module.set.scrollPosition($nextItem);
-                    if(settings.selectOnKeydown && module.is.single()) {
+                    if(settings.selectOnKeydown && module.is.single() && !$nextItem.hasClass(className.actionable)) {
                       module.set.selectedItem($nextItem);
                     }
                   }
@@ -1787,7 +1800,7 @@ $.fn.dropdown = function(parameters) {
             ;
             if( module.can.activate( $(element) ) ) {
               module.set.selected(value, $(element));
-              if(!module.is.multiple()) {
+              if(!module.is.multiple() && !(!settings.collapseOnActionable && $(element).hasClass(className.actionable))) {
                 module.hideAndClear();
               }
             }
@@ -1800,7 +1813,7 @@ $.fn.dropdown = function(parameters) {
             ;
             if( module.can.activate( $(element) ) ) {
               module.set.value(value, text, $(element));
-              if(!module.is.multiple()) {
+              if(!module.is.multiple() && !(!settings.collapseOnActionable && $(element).hasClass(className.actionable))) {
                 module.hideAndClear();
               }
             }
@@ -1851,7 +1864,7 @@ $.fn.dropdown = function(parameters) {
             ;
             $sizer.text(value);
             // prevent rounding issues
-            return Math.ceil( $sizer.width() + 1);
+            return Math.ceil( $sizer.width() + (module.is.edge() ? 3 : 1));
           },
           selectionCount: function() {
             var
@@ -2320,7 +2333,7 @@ $.fn.dropdown = function(parameters) {
               module.error(error.noStorage);
               return;
             }
-            name = sessionStorage.getItem(value);
+            name = sessionStorage.getItem(value + elementNamespace);
             return (name !== undefined)
               ? name
               : false
@@ -2364,7 +2377,7 @@ $.fn.dropdown = function(parameters) {
               return;
             }
             module.verbose('Saving remote data to session storage', value, name);
-            sessionStorage.setItem(value, name);
+            sessionStorage.setItem(value + elementNamespace, name);
           }
         },
 
@@ -2424,7 +2437,7 @@ $.fn.dropdown = function(parameters) {
             $nextSelectedItem
               .addClass(className.selected)
             ;
-            if(settings.selectOnKeydown && module.is.single()) {
+            if(settings.selectOnKeydown && module.is.single() && !$nextItem.hasClass(className.actionable)) {
               module.set.selectedItem($nextSelectedItem);
             }
             $menu
@@ -2510,7 +2523,7 @@ $.fn.dropdown = function(parameters) {
             var
               length = module.get.query().length
             ;
-            $search.val( text.substr(0, length));
+            $search.val( text.slice(0, length));
           },
           scrollPosition: function($item, forceScroll) {
             var
@@ -2627,13 +2640,13 @@ $.fn.dropdown = function(parameters) {
               module.set.scrollPosition($nextValue);
               $selectedItem.removeClass(className.selected);
               $nextValue.addClass(className.selected);
-              if(settings.selectOnKeydown && module.is.single()) {
+              if(settings.selectOnKeydown && module.is.single() && !$nextItem.hasClass(className.actionable)) {
                 module.set.selectedItem($nextValue);
               }
             }
           },
           direction: function($menu) {
-            if(settings.direction == 'auto') {
+            if(settings.direction === 'auto') {
               // reset position, remove upward if it's base menu
               if (!$menu) {
                 module.remove.upward();
@@ -2652,7 +2665,7 @@ $.fn.dropdown = function(parameters) {
                 module.set.leftward($menu);
               }
             }
-            else if(settings.direction == 'upward') {
+            else if(settings.direction === 'upward') {
               module.set.upward($menu);
             }
           },
@@ -2665,6 +2678,11 @@ $.fn.dropdown = function(parameters) {
             $element.addClass(className.leftward);
           },
           value: function(value, text, $selected, preventChangeTrigger) {
+            if(typeof text === 'boolean') {
+              preventChangeTrigger = text;
+              $selected = undefined;
+              text   = undefined;
+            }
             if(value !== undefined && value !== '' && !(Array.isArray(value) && value.length === 0)) {
               $input.removeClass(className.noselection);
             } else {
@@ -2728,12 +2746,21 @@ $.fn.dropdown = function(parameters) {
           visible: function() {
             $module.addClass(className.visible);
           },
-          exactly: function(value, $selectedItem) {
+          exactly: function(value, $selectedItem, preventChangeTrigger) {
+            if(typeof $selectedItem === 'boolean') {
+              preventChangeTrigger = $selectedItem;
+              $selectedItem   = undefined;
+            }
             module.debug('Setting selected to exact values');
             module.clear();
-            module.set.selected(value, $selectedItem);
+            module.set.selected(value, $selectedItem, preventChangeTrigger);
           },
           selected: function(value, $selectedItem, preventChangeTrigger, keepSearchTerm) {
+            if(typeof $selectedItem === 'boolean') {
+              keepSearchTerm = preventChangeTrigger;
+              preventChangeTrigger = $selectedItem;
+              $selectedItem   = undefined;
+            }
             var
               isMultiple = module.is.multiple()
             ;
@@ -2765,23 +2792,30 @@ $.fn.dropdown = function(parameters) {
 
                   isFiltered     = $selected.hasClass(className.filtered),
                   isActive       = $selected.hasClass(className.active),
+                  isActionable   = $selected.hasClass(className.actionable),
                   isUserValue    = $selected.hasClass(className.addition),
-                  shouldAnimate  = (isMultiple && $selectedItem.length == 1)
+                  shouldAnimate  = (isMultiple && $selectedItem && $selectedItem.length === 1)
                 ;
-                if(isMultiple) {
+                if(isActionable){
+                  if((!isMultiple || (!isActive || isUserValue)) && settings.apiSettings && settings.saveRemoteData) {
+                    module.save.remoteData(selectedText, selectedValue);
+                  }
+                  settings.onActionable.call(element, selectedValue, selectedText, $selected);
+                }
+                else if(isMultiple) {
                   if(!isActive || isUserValue) {
                     if(settings.apiSettings && settings.saveRemoteData) {
                       module.save.remoteData(selectedText, selectedValue);
                     }
                     if(settings.useLabels) {
+                      module.add.value(selectedValue, selectedText, $selected, preventChangeTrigger);
                       module.add.label(selectedValue, selectedText, shouldAnimate);
-                      module.add.value(selectedValue, selectedText, $selected);
                       module.set.activeItem($selected);
                       module.filterActive();
                       module.select.nextAvailable($selectedItem);
                     }
                     else {
-                      module.add.value(selectedValue, selectedText, $selected);
+                      module.add.value(selectedValue, selectedText, $selected, preventChangeTrigger);
                       module.set.text(module.add.variables(message.count));
                       module.set.activeItem($selected);
                     }
@@ -2795,7 +2829,7 @@ $.fn.dropdown = function(parameters) {
                   if(settings.apiSettings && settings.saveRemoteData) {
                     module.save.remoteData(selectedText, selectedValue);
                   }
-                  if (!keepSearchTerm) {
+                  if (!keepSearchTerm && !$selected.hasClass(className.actionable)) {
                     module.set.text(selectedText);
                   }
                   module.set.value(selectedValue, selectedText, $selected, preventChangeTrigger);
@@ -2894,7 +2928,7 @@ $.fn.dropdown = function(parameters) {
             $('<option/>')
               .prop('value', escapedValue)
               .addClass(className.addition)
-              .html(value)
+              .text(value)
               .appendTo($input)
             ;
             module.verbose('Adding user addition as an <option>', value);
@@ -2970,7 +3004,12 @@ $.fn.dropdown = function(parameters) {
             }
             return message;
           },
-          value: function(addedValue, addedText, $selectedItem) {
+          value: function(addedValue, addedText, $selectedItem, preventChangeTrigger) {
+            if(typeof addedText === 'boolean') {
+              preventChangeTrigger = addedText;
+              $selectedItem = undefined;
+              addedText   = undefined;
+            }
             var
               currentValue = module.get.values(true),
               newValue
@@ -2985,7 +3024,7 @@ $.fn.dropdown = function(parameters) {
             }
             // extend current array
             if(Array.isArray(currentValue)) {
-              newValue = currentValue.concat([addedValue]);
+              newValue = $selectedItem && $selectedItem.hasClass(className.actionable) ? currentValue : currentValue.concat([addedValue]);
               newValue = module.get.uniqueArray(newValue);
             }
             else {
@@ -3009,7 +3048,7 @@ $.fn.dropdown = function(parameters) {
             else {
               settings.onAdd.call(element, addedValue, addedText, $selectedItem);
             }
-            module.set.value(newValue, addedText, $selectedItem);
+            module.set.value(newValue, addedText, $selectedItem, preventChangeTrigger);
             module.check.maxSelections();
           },
         },
@@ -3069,18 +3108,10 @@ $.fn.dropdown = function(parameters) {
               return;
             }
             // temporarily disconnect observer
-            if(selectObserver) {
+            module.disconnect.selectObserver();
-              selectObserver.disconnect();
-              module.verbose('Temporarily disconnecting mutation observer');
-            }
             $option.remove();
             module.verbose('Removing user addition as an <option>', escapedValue);
-            if(selectObserver) {
+            module.observe.select();
-              selectObserver.observe($input[0], {
-                childList : true,
-                subtree   : true
-              });
-            }
           },
           message: function() {
             $menu.children(selector.message).remove();
@@ -3379,8 +3410,11 @@ $.fn.dropdown = function(parameters) {
           bubbledIconClick: function(event) {
             return $(event.target).closest($icon).length > 0;
           },
+          edge: function() {
+            return !!window.chrome && !!window.StyleMedia;
+          },
           chrome: function() {
-            return !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
+            return !!window.chrome && !window.StyleMedia;
           },
           alreadySetup: function() {
             return ($module.is('select') && $module.parent(selector.dropdown).data(moduleNamespace) !== undefined && $module.prev().length === 0);
@@ -3445,7 +3479,7 @@ $.fn.dropdown = function(parameters) {
               selectChanged = false
             ;
             $.each(mutations, function(index, mutation) {
-              if($(mutation.target).is('select') || $(mutation.addedNodes).is('select')) {
+              if($(mutation.target).is('select, option, optgroup') || $(mutation.addedNodes).is('select')) {
                 selectChanged = true;
                 return false;
               }
@@ -3587,9 +3621,6 @@ $.fn.dropdown = function(parameters) {
             $currentMenu.removeClass(className.loading);
             return canOpenRightward;
           },
-          click: function() {
-            return (hasTouch || settings.on == 'click');
-          },
           extendSelect: function() {
             return settings.allowAdditions || settings.apiSettings;
           },
@@ -3659,9 +3690,7 @@ $.fn.dropdown = function(parameters) {
               start = ($subMenu)
                 ? function() {}
                 : function() {
-                  if( module.can.click() ) {
+                  module.unbind.intent();
-                    module.unbind.intent();
-                  }
                   module.remove.active();
                 },
               transition = settings.transition.hideMethod || module.get.transition($subMenu)
@@ -3990,7 +4019,7 @@ $.fn.dropdown.settings = {
   keepOnScreen           : true,       // Whether dropdown should check whether it is on screen before showing
 
   match                  : 'both',     // what to match against with search selection (both, text, or label)
-  fullTextSearch         : false,      // search anywhere in value (set to 'exact' to require exact matches)
+  fullTextSearch         : 'exact',    // search anywhere in value (set to 'exact' to require exact matches)
   ignoreDiacritics       : false,      // match results also if they contain diacritics of the same base character (for example searching for "a" will also match "á" or "â" or "à", etc...)
   hideDividers           : false,      // Whether to hide any divider elements (specified in selector.divider) that are sibling to any items when searched (set to true will hide all dividers, set to 'empty' will hide them when they are not followed by a visible item)
 
@@ -3998,7 +4027,7 @@ $.fn.dropdown.settings = {
   preserveHTML           : true,       // preserve html when selecting value
   sortSelect             : false,      // sort selection on init
 
-  forceSelection         : true,       // force a choice on blur with search selection
+  forceSelection         : false,       // force a choice on blur with search selection
 
   allowAdditions         : false,      // whether multiple select should allow user added values
   ignoreCase             : false,      // whether to consider case sensitivity when creating labels
@@ -4009,7 +4038,7 @@ $.fn.dropdown.settings = {
   useLabels              : true,       // whether multiple select should filter currently active selections from choices
   delimiter              : ',',        // when multiselect uses normal <input> the values will be delimited with this character
 
-  showOnFocus            : true,       // show menu on focus
+  showOnFocus            : false,      // show menu on focus
   allowReselection       : false,      // whether current value should trigger callbacks when reselected
   allowTab               : true,       // add tabindex to element
   allowCategorySelection : false,      // allow elements with sub-menus to be selected
@@ -4024,6 +4053,8 @@ $.fn.dropdown.settings = {
 
   headerDivider          : true,       // whether option headers should have an additional divider line underneath when converted from <select> <optgroup>
 
+  collapseOnActionable   : true,      // whether the dropdown should collapse upon selection of an actionable item
+
   // label settings on multi-select
   label: {
     transition : 'scale',
@@ -4036,13 +4067,13 @@ $.fn.dropdown.settings = {
     hide   : 300,
     show   : 200,
     search : 20,
-    touch  : 50
   },
 
   /* Callbacks */
   onChange      : function(value, text, $selected){},
   onAdd         : function(value, text, $selected){},
   onRemove      : function(value, text, $selected){},
+  onActionable  : function(value, text, $selected){},
   onSearch      : function(searchTerm){},
 
   onLabelSelect : function($selectedLabels){},
@@ -4105,12 +4136,12 @@ $.fn.dropdown.settings = {
     icon                 : 'icon',     // optional icon name
     iconClass            : 'iconClass', // optional individual class for icon (for example to use flag instead)
     class                : 'class',    // optional individual class for item/header
-    divider              : 'divider'   // optional divider append for group headers
+    divider              : 'divider',   // optional divider append for group headers
+    actionable           : 'actionable' // optional actionable item
   },
 
   keys : {
     backspace  : 8,
-    delimiter  : 188, // comma
     deleteKey  : 46,
     enter      : 13,
     escape     : 27,
@@ -4177,7 +4208,8 @@ $.fn.dropdown.settings = {
     header              : 'header',
     divider             : 'divider',
     groupIcon           : '',
-    unfilterable        : 'unfilterable'
+    unfilterable        : 'unfilterable',
+    actionable          : 'actionable'
   }
 
 };
@@ -4252,6 +4284,9 @@ $.fn.dropdown.settings.templates = {
           maybeText = (option[fields.text])
             ? ' data-text="' + deQuote(option[fields.text],true) + '"'
             : '',
+          maybeActionable = (option[fields.actionable])
+            ? className.actionable+' '
+            : '',
           maybeDisabled = (option[fields.disabled])
             ? className.disabled+' '
             : '',
@@ -4260,7 +4295,7 @@ $.fn.dropdown.settings.templates = {
             : '',
           hasDescription = (escape(option[fields.description] || '', preserveHTML) != '')
         ;
-        html += '<div class="'+ maybeDisabled + maybeDescriptionVertical + (option[fields.class] ? deQuote(option[fields.class]) : className.item)+'" data-value="' + deQuote(option[fields.value],true) + '"' + maybeText + '>';
+        html += '<div class="'+ maybeActionable + maybeDisabled + maybeDescriptionVertical + (option[fields.class] ? deQuote(option[fields.class]) : className.item)+'" data-value="' + deQuote(option[fields.value],true) + '"' + maybeText + '>';
         if (isMenu) {
           html += '<i class="'+ (itemType.indexOf('left') !== -1 ? 'left' : '') + ' dropdown icon"></i>';
         }

semantic/dist/components/form.css

@@ -55,12 +55,14 @@
 
 .ui.form .field > label {
   display: block;
-  margin: 0 0 0.33333333rem 0;
+  margin: 0 0 0.28571429rem 0;
-  color: rgba(0, 0, 0, 0.87);
+  font-size: 0.92857143em;
-  font-size: 0.91666667em;
   font-weight: bold;
   text-transform: none;
 }
+.ui.form .field > label:not(.button) {
+  color: rgba(0, 0, 0, 0.87);
+}
 
 /*--------------------
     Standard Inputs
@@ -68,9 +70,11 @@
 
 .ui.form textarea,
 .ui.form input:not([type]),
+.ui.form input[type="color"],
 .ui.form input[type="date"],
 .ui.form input[type="datetime-local"],
 .ui.form input[type="email"],
+.ui.form input[type="month"],
 .ui.form input[type="number"],
 .ui.form input[type="password"],
 .ui.form input[type="search"],
@@ -78,7 +82,8 @@
 .ui.form input[type="time"],
 .ui.form input[type="text"],
 .ui.form input[type="file"],
-.ui.form input[type="url"] {
+.ui.form input[type="url"],
+.ui.form input[type="week"] {
   width: 100%;
   vertical-align: top;
 }
@@ -89,9 +94,11 @@
   height: 1.21428571em;
 }
 .ui.form input:not([type]),
+.ui.form input[type="color"],
 .ui.form input[type="date"],
 .ui.form input[type="datetime-local"],
 .ui.form input[type="email"],
+.ui.form input[type="month"],
 .ui.form input[type="number"],
 .ui.form input[type="password"],
 .ui.form input[type="search"],
@@ -99,24 +106,35 @@
 .ui.form input[type="time"],
 .ui.form input[type="text"],
 .ui.form input[type="file"],
-.ui.form input[type="url"] {
+.ui.form input[type="url"],
+.ui.form input[type="week"] {
   font-family: 'Raleway', sans-serif;
   margin: 0;
   outline: none;
   -webkit-appearance: none;
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
   line-height: 1.21428571em;
-  padding: 0.80952381em 1.16666667em;
+  padding: 0.67857143em 1em;
   font-size: 1em;
   background: #FFFFFF;
   border: 1px solid rgba(34, 36, 38, 0.15);
   color: rgba(0, 0, 0, 0.87);
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
   -webkit-box-shadow: 0 0 0 0 transparent inset;
           box-shadow: 0 0 0 0 transparent inset;
   -webkit-transition: color 0.1s ease, border-color 0.1s ease;
   transition: color 0.1s ease, border-color 0.1s ease;
 }
+.ui.form input[type="color"] {
+  padding: initial;
+}
+.ui.form input::-webkit-calendar-picker-indicator {
+  padding: 0;
+  opacity: 0.5;
+  -webkit-transition: opacity 0.3s ease;
+  transition: opacity 0.3s ease;
+  cursor: pointer;
+}
 
 /* Text Area */
 .ui.input textarea,
@@ -124,12 +142,12 @@
   margin: 0;
   -webkit-appearance: none;
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-  padding: 0.91666667em 1.16666667em;
+  padding: 0.78571429em 1em;
   background: #FFFFFF;
   border: 1px solid rgba(34, 36, 38, 0.15);
   outline: none;
   color: rgba(0, 0, 0, 0.87);
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
   -webkit-box-shadow: 0 0 0 0 transparent inset;
           box-shadow: 0 0 0 0 transparent inset;
   -webkit-transition: color 0.1s ease, border-color 0.1s ease;
@@ -182,7 +200,7 @@
 .ui.form .field .transparent.input:not(.icon) input,
 .ui.form .field input.transparent,
 .ui.form .field textarea.transparent {
-  padding: 0.80952381em 1.16666667em;
+  padding: 0.67857143em 1em;
 }
 .ui.form .field input.transparent,
 .ui.form .field textarea.transparent {
@@ -210,10 +228,10 @@
   width: 100%;
   background: #FFFFFF;
   border: 1px solid rgba(34, 36, 38, 0.15);
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
   -webkit-box-shadow: 0 0 0 0 transparent inset;
           box-shadow: 0 0 0 0 transparent inset;
-  padding: 0.62em 1.16666667em;
+  padding: 0.62em 1em;
   color: rgba(0, 0, 0, 0.87);
   -webkit-transition: color 0.1s ease, border-color 0.1s ease;
   transition: color 0.1s ease, border-color 0.1s ease;
@@ -225,7 +243,7 @@
 
 
 /* Block */
-.ui.form .field > .selection.dropdown {
+.ui.form .field > .selection.dropdown:not(.compact) {
   min-width: auto;
   width: 100%;
 }
@@ -321,13 +339,16 @@
   border: 1px solid #E0B4B4 !important;
   color: #9F3A38 !important;
 }
+.ui.form .field .prompt.label li::before {
+  color: #9F3A38;
+}
 .ui.form .inline.fields .field .prompt,
 .ui.form .inline.field .prompt {
   vertical-align: top;
   margin: -0.25em 0 -0.5em 0.5em;
 }
-.ui.form .inline.fields .field .prompt:before,
+.ui.form .inline.fields .field .prompt::before,
-.ui.form .inline.field .prompt:before {
+.ui.form .inline.field .prompt::before {
   border-width: 0 0 1px 1px;
   bottom: auto;
   right: auto;
@@ -389,9 +410,11 @@
 ---------------------*/
 
 .ui.form input:not([type]):focus,
+.ui.form input[type="color"]:focus,
 .ui.form input[type="date"]:focus,
 .ui.form input[type="datetime-local"]:focus,
 .ui.form input[type="email"]:focus,
+.ui.form input[type="month"]:focus,
 .ui.form input[type="number"]:focus,
 .ui.form input[type="password"]:focus,
 .ui.form input[type="search"]:focus,
@@ -399,18 +422,21 @@
 .ui.form input[type="time"]:focus,
 .ui.form input[type="text"]:focus,
 .ui.form input[type="file"]:focus,
-.ui.form input[type="url"]:focus {
+.ui.form input[type="url"]:focus,
+.ui.form input[type="week"]:focus {
   color: rgba(0, 0, 0, 0.95);
-  border-color: #6435C9;
+  border-color: #85B7D9;
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
   background: #FFFFFF;
   -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset;
           box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset;
 }
 .ui.form .ui.action.input:not([class*="left action"]) input:not([type]):focus,
+.ui.form .ui.action.input:not([class*="left action"]) input[type="color"]:focus,
 .ui.form .ui.action.input:not([class*="left action"]) input[type="date"]:focus,
 .ui.form .ui.action.input:not([class*="left action"]) input[type="datetime-local"]:focus,
 .ui.form .ui.action.input:not([class*="left action"]) input[type="email"]:focus,
+.ui.form .ui.action.input:not([class*="left action"]) input[type="month"]:focus,
 .ui.form .ui.action.input:not([class*="left action"]) input[type="number"]:focus,
 .ui.form .ui.action.input:not([class*="left action"]) input[type="password"]:focus,
 .ui.form .ui.action.input:not([class*="left action"]) input[type="search"]:focus,
@@ -418,14 +444,17 @@
 .ui.form .ui.action.input:not([class*="left action"]) input[type="time"]:focus,
 .ui.form .ui.action.input:not([class*="left action"]) input[type="text"]:focus,
 .ui.form .ui.action.input:not([class*="left action"]) input[type="file"]:focus,
-.ui.form .ui.action.input:not([class*="left action"]) input[type="url"]:focus {
+.ui.form .ui.action.input:not([class*="left action"]) input[type="url"]:focus,
+.ui.form .ui.action.input:not([class*="left action"]) input[type="week"]:focus {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 .ui.form .ui[class*="left action"].input input:not([type]),
+.ui.form .ui[class*="left action"].input input[type="color"],
 .ui.form .ui[class*="left action"].input input[type="date"],
 .ui.form .ui[class*="left action"].input input[type="datetime-local"],
 .ui.form .ui[class*="left action"].input input[type="email"],
+.ui.form .ui[class*="left action"].input input[type="month"],
 .ui.form .ui[class*="left action"].input input[type="number"],
 .ui.form .ui[class*="left action"].input input[type="password"],
 .ui.form .ui[class*="left action"].input input[type="search"],
@@ -433,20 +462,26 @@
 .ui.form .ui[class*="left action"].input input[type="time"],
 .ui.form .ui[class*="left action"].input input[type="text"],
 .ui.form .ui[class*="left action"].input input[type="file"],
-.ui.form .ui[class*="left action"].input input[type="url"] {
+.ui.form .ui[class*="left action"].input input[type="url"],
+.ui.form .ui[class*="left action"].input input[type="week"] {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
 }
 .ui.form textarea:focus {
   color: rgba(0, 0, 0, 0.95);
-  border-color: #6435C9;
+  border-color: #85B7D9;
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
   background: #FFFFFF;
   -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset;
           box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset;
   -webkit-appearance: none;
 }
 
+/* Focus */
+.ui.form input:focus::-webkit-calendar-picker-indicator {
+  opacity: 1;
+}
+
 /*--------------------
           States
   ---------------------*/
@@ -500,9 +535,11 @@
 .ui.form .fields.error .field textarea,
 .ui.form .fields.error .field select,
 .ui.form .fields.error .field input:not([type]),
+.ui.form .fields.error .field input[type="color"],
 .ui.form .fields.error .field input[type="date"],
 .ui.form .fields.error .field input[type="datetime-local"],
 .ui.form .fields.error .field input[type="email"],
+.ui.form .fields.error .field input[type="month"],
 .ui.form .fields.error .field input[type="number"],
 .ui.form .fields.error .field input[type="password"],
 .ui.form .fields.error .field input[type="search"],
@@ -511,12 +548,15 @@
 .ui.form .fields.error .field input[type="text"],
 .ui.form .fields.error .field input[type="file"],
 .ui.form .fields.error .field input[type="url"],
+.ui.form .fields.error .field input[type="week"],
 .ui.form .field.error textarea,
 .ui.form .field.error select,
 .ui.form .field.error input:not([type]),
+.ui.form .field.error input[type="color"],
 .ui.form .field.error input[type="date"],
 .ui.form .field.error input[type="datetime-local"],
 .ui.form .field.error input[type="email"],
+.ui.form .field.error input[type="month"],
 .ui.form .field.error input[type="number"],
 .ui.form .field.error input[type="password"],
 .ui.form .field.error input[type="search"],
@@ -524,7 +564,8 @@
 .ui.form .field.error input[type="time"],
 .ui.form .field.error input[type="text"],
 .ui.form .field.error input[type="file"],
-.ui.form .field.error input[type="url"] {
+.ui.form .field.error input[type="url"],
+.ui.form .field.error input[type="week"] {
   color: #9F3A38;
   background: #FFF6F6;
   border-color: #E0B4B4;
@@ -532,12 +573,43 @@
   -webkit-box-shadow: none;
           box-shadow: none;
 }
+.ui.form .field input:not(:-moz-placeholder-shown):invalid {
+  color: #9F3A38;
+  background: #FFF6F6;
+  border-color: #E0B4B4;
+  border-radius: '';
+  box-shadow: none;
+}
+.ui.form .field input:not(:-ms-input-placeholder):invalid {
+  color: #9F3A38;
+  background: #FFF6F6;
+  border-color: #E0B4B4;
+  border-radius: '';
+  box-shadow: none;
+}
+.ui.form .field input:not(:placeholder-shown):invalid {
+  color: #9F3A38;
+  background: #FFF6F6;
+  border-color: #E0B4B4;
+  border-radius: '';
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.ui.form .field input:not(:-ms-input-placeholder):invalid {
+  color: #9F3A38;
+  background: #FFF6F6;
+  border-color: #E0B4B4;
+  border-radius: '';
+  box-shadow: none;
+}
 .ui.form .field.error textarea:focus,
 .ui.form .field.error select:focus,
 .ui.form .field.error input:not([type]):focus,
+.ui.form .field.error input[type="color"]:focus,
 .ui.form .field.error input[type="date"]:focus,
 .ui.form .field.error input[type="datetime-local"]:focus,
 .ui.form .field.error input[type="email"]:focus,
+.ui.form .field.error input[type="month"]:focus,
 .ui.form .field.error input[type="number"]:focus,
 .ui.form .field.error input[type="password"]:focus,
 .ui.form .field.error input[type="search"]:focus,
@@ -545,7 +617,8 @@
 .ui.form .field.error input[type="time"]:focus,
 .ui.form .field.error input[type="text"]:focus,
 .ui.form .field.error input[type="file"]:focus,
-.ui.form .field.error input[type="url"]:focus {
+.ui.form .field.error input[type="url"]:focus,
+.ui.form .field.error input[type="week"]:focus {
   background: #FFF6F6;
   border-color: #E0B4B4;
   color: #9F3A38;
@@ -652,22 +725,16 @@
     ---------------------*/
 
 .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label,
-.ui.form .field.error .checkbox:not(.toggle):not(.slider) label,
+.ui.form .field.error .checkbox:not(.toggle):not(.slider) label {
-.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box,
-.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box {
   color: #9F3A38;
 }
-.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label:before,
+.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label::before,
-.ui.form .field.error .checkbox:not(.toggle):not(.slider) label:before,
+.ui.form .field.error .checkbox:not(.toggle):not(.slider) label::before {
-.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box:before,
-.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box:before {
   background: #FFF6F6;
   border-color: #E0B4B4;
 }
-.ui.form .fields.error .field .checkbox label:after,
+.ui.form .fields.error .field .checkbox label::after,
-.ui.form .field.error .checkbox label:after,
+.ui.form .field.error .checkbox label::after {
-.ui.form .fields.error .field .checkbox .box:after,
-.ui.form .field.error .checkbox .box:after {
   color: #9F3A38;
 }
 .ui.inverted.form .fields.error .field label,
@@ -723,9 +790,11 @@
 .ui.form .fields.info .field textarea,
 .ui.form .fields.info .field select,
 .ui.form .fields.info .field input:not([type]),
+.ui.form .fields.info .field input[type="color"],
 .ui.form .fields.info .field input[type="date"],
 .ui.form .fields.info .field input[type="datetime-local"],
 .ui.form .fields.info .field input[type="email"],
+.ui.form .fields.info .field input[type="month"],
 .ui.form .fields.info .field input[type="number"],
 .ui.form .fields.info .field input[type="password"],
 .ui.form .fields.info .field input[type="search"],
@@ -734,12 +803,15 @@
 .ui.form .fields.info .field input[type="text"],
 .ui.form .fields.info .field input[type="file"],
 .ui.form .fields.info .field input[type="url"],
+.ui.form .fields.info .field input[type="week"],
 .ui.form .field.info textarea,
 .ui.form .field.info select,
 .ui.form .field.info input:not([type]),
+.ui.form .field.info input[type="color"],
 .ui.form .field.info input[type="date"],
 .ui.form .field.info input[type="datetime-local"],
 .ui.form .field.info input[type="email"],
+.ui.form .field.info input[type="month"],
 .ui.form .field.info input[type="number"],
 .ui.form .field.info input[type="password"],
 .ui.form .field.info input[type="search"],
@@ -747,7 +819,8 @@
 .ui.form .field.info input[type="time"],
 .ui.form .field.info input[type="text"],
 .ui.form .field.info input[type="file"],
-.ui.form .field.info input[type="url"] {
+.ui.form .field.info input[type="url"],
+.ui.form .field.info input[type="week"] {
   color: #276F86;
   background: #F8FFFF;
   border-color: #A9D5DE;
@@ -758,9 +831,11 @@
 .ui.form .field.info textarea:focus,
 .ui.form .field.info select:focus,
 .ui.form .field.info input:not([type]):focus,
+.ui.form .field.info input[type="color"]:focus,
 .ui.form .field.info input[type="date"]:focus,
 .ui.form .field.info input[type="datetime-local"]:focus,
 .ui.form .field.info input[type="email"]:focus,
+.ui.form .field.info input[type="month"]:focus,
 .ui.form .field.info input[type="number"]:focus,
 .ui.form .field.info input[type="password"]:focus,
 .ui.form .field.info input[type="search"]:focus,
@@ -768,7 +843,8 @@
 .ui.form .field.info input[type="time"]:focus,
 .ui.form .field.info input[type="text"]:focus,
 .ui.form .field.info input[type="file"]:focus,
-.ui.form .field.info input[type="url"]:focus {
+.ui.form .field.info input[type="url"]:focus,
+.ui.form .field.info input[type="week"]:focus {
   background: #F8FFFF;
   border-color: #A9D5DE;
   color: #276F86;
@@ -875,22 +951,16 @@
     ---------------------*/
 
 .ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) label,
-.ui.form .field.info .checkbox:not(.toggle):not(.slider) label,
+.ui.form .field.info .checkbox:not(.toggle):not(.slider) label {
-.ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) .box,
-.ui.form .field.info .checkbox:not(.toggle):not(.slider) .box {
   color: #276F86;
 }
-.ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) label:before,
+.ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) label::before,
-.ui.form .field.info .checkbox:not(.toggle):not(.slider) label:before,
+.ui.form .field.info .checkbox:not(.toggle):not(.slider) label::before {
-.ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) .box:before,
-.ui.form .field.info .checkbox:not(.toggle):not(.slider) .box:before {
   background: #F8FFFF;
   border-color: #A9D5DE;
 }
-.ui.form .fields.info .field .checkbox label:after,
+.ui.form .fields.info .field .checkbox label::after,
-.ui.form .field.info .checkbox label:after,
+.ui.form .field.info .checkbox label::after {
-.ui.form .fields.info .field .checkbox .box:after,
-.ui.form .field.info .checkbox .box:after {
   color: #276F86;
 }
 .ui.inverted.form .fields.info .field label,
@@ -946,9 +1016,11 @@
 .ui.form .fields.success .field textarea,
 .ui.form .fields.success .field select,
 .ui.form .fields.success .field input:not([type]),
+.ui.form .fields.success .field input[type="color"],
 .ui.form .fields.success .field input[type="date"],
 .ui.form .fields.success .field input[type="datetime-local"],
 .ui.form .fields.success .field input[type="email"],
+.ui.form .fields.success .field input[type="month"],
 .ui.form .fields.success .field input[type="number"],
 .ui.form .fields.success .field input[type="password"],
 .ui.form .fields.success .field input[type="search"],
@@ -957,12 +1029,15 @@
 .ui.form .fields.success .field input[type="text"],
 .ui.form .fields.success .field input[type="file"],
 .ui.form .fields.success .field input[type="url"],
+.ui.form .fields.success .field input[type="week"],
 .ui.form .field.success textarea,
 .ui.form .field.success select,
 .ui.form .field.success input:not([type]),
+.ui.form .field.success input[type="color"],
 .ui.form .field.success input[type="date"],
 .ui.form .field.success input[type="datetime-local"],
 .ui.form .field.success input[type="email"],
+.ui.form .field.success input[type="month"],
 .ui.form .field.success input[type="number"],
 .ui.form .field.success input[type="password"],
 .ui.form .field.success input[type="search"],
@@ -970,7 +1045,8 @@
 .ui.form .field.success input[type="time"],
 .ui.form .field.success input[type="text"],
 .ui.form .field.success input[type="file"],
-.ui.form .field.success input[type="url"] {
+.ui.form .field.success input[type="url"],
+.ui.form .field.success input[type="week"] {
   color: #2C662D;
   background: #FCFFF5;
   border-color: #A3C293;
@@ -981,9 +1057,11 @@
 .ui.form .field.success textarea:focus,
 .ui.form .field.success select:focus,
 .ui.form .field.success input:not([type]):focus,
+.ui.form .field.success input[type="color"]:focus,
 .ui.form .field.success input[type="date"]:focus,
 .ui.form .field.success input[type="datetime-local"]:focus,
 .ui.form .field.success input[type="email"]:focus,
+.ui.form .field.success input[type="month"]:focus,
 .ui.form .field.success input[type="number"]:focus,
 .ui.form .field.success input[type="password"]:focus,
 .ui.form .field.success input[type="search"]:focus,
@@ -991,7 +1069,8 @@
 .ui.form .field.success input[type="time"]:focus,
 .ui.form .field.success input[type="text"]:focus,
 .ui.form .field.success input[type="file"]:focus,
-.ui.form .field.success input[type="url"]:focus {
+.ui.form .field.success input[type="url"]:focus,
+.ui.form .field.success input[type="week"]:focus {
   background: #FCFFF5;
   border-color: #A3C293;
   color: #2C662D;
@@ -1098,22 +1177,16 @@
     ---------------------*/
 
 .ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) label,
-.ui.form .field.success .checkbox:not(.toggle):not(.slider) label,
+.ui.form .field.success .checkbox:not(.toggle):not(.slider) label {
-.ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) .box,
-.ui.form .field.success .checkbox:not(.toggle):not(.slider) .box {
   color: #2C662D;
 }
-.ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) label:before,
+.ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) label::before,
-.ui.form .field.success .checkbox:not(.toggle):not(.slider) label:before,
+.ui.form .field.success .checkbox:not(.toggle):not(.slider) label::before {
-.ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) .box:before,
-.ui.form .field.success .checkbox:not(.toggle):not(.slider) .box:before {
   background: #FCFFF5;
   border-color: #A3C293;
 }
-.ui.form .fields.success .field .checkbox label:after,
+.ui.form .fields.success .field .checkbox label::after,
-.ui.form .field.success .checkbox label:after,
+.ui.form .field.success .checkbox label::after {
-.ui.form .fields.success .field .checkbox .box:after,
-.ui.form .field.success .checkbox .box:after {
   color: #2C662D;
 }
 .ui.inverted.form .fields.success .field label,
@@ -1169,9 +1242,11 @@
 .ui.form .fields.warning .field textarea,
 .ui.form .fields.warning .field select,
 .ui.form .fields.warning .field input:not([type]),
+.ui.form .fields.warning .field input[type="color"],
 .ui.form .fields.warning .field input[type="date"],
 .ui.form .fields.warning .field input[type="datetime-local"],
 .ui.form .fields.warning .field input[type="email"],
+.ui.form .fields.warning .field input[type="month"],
 .ui.form .fields.warning .field input[type="number"],
 .ui.form .fields.warning .field input[type="password"],
 .ui.form .fields.warning .field input[type="search"],
@@ -1180,12 +1255,15 @@
 .ui.form .fields.warning .field input[type="text"],
 .ui.form .fields.warning .field input[type="file"],
 .ui.form .fields.warning .field input[type="url"],
+.ui.form .fields.warning .field input[type="week"],
 .ui.form .field.warning textarea,
 .ui.form .field.warning select,
 .ui.form .field.warning input:not([type]),
+.ui.form .field.warning input[type="color"],
 .ui.form .field.warning input[type="date"],
 .ui.form .field.warning input[type="datetime-local"],
 .ui.form .field.warning input[type="email"],
+.ui.form .field.warning input[type="month"],
 .ui.form .field.warning input[type="number"],
 .ui.form .field.warning input[type="password"],
 .ui.form .field.warning input[type="search"],
@@ -1193,7 +1271,8 @@
 .ui.form .field.warning input[type="time"],
 .ui.form .field.warning input[type="text"],
 .ui.form .field.warning input[type="file"],
-.ui.form .field.warning input[type="url"] {
+.ui.form .field.warning input[type="url"],
+.ui.form .field.warning input[type="week"] {
   color: #573A08;
   background: #FFFAF3;
   border-color: #C9BA9B;
@@ -1204,9 +1283,11 @@
 .ui.form .field.warning textarea:focus,
 .ui.form .field.warning select:focus,
 .ui.form .field.warning input:not([type]):focus,
+.ui.form .field.warning input[type="color"]:focus,
 .ui.form .field.warning input[type="date"]:focus,
 .ui.form .field.warning input[type="datetime-local"]:focus,
 .ui.form .field.warning input[type="email"]:focus,
+.ui.form .field.warning input[type="month"]:focus,
 .ui.form .field.warning input[type="number"]:focus,
 .ui.form .field.warning input[type="password"]:focus,
 .ui.form .field.warning input[type="search"]:focus,
@@ -1214,7 +1295,8 @@
 .ui.form .field.warning input[type="time"]:focus,
 .ui.form .field.warning input[type="text"]:focus,
 .ui.form .field.warning input[type="file"]:focus,
-.ui.form .field.warning input[type="url"]:focus {
+.ui.form .field.warning input[type="url"]:focus,
+.ui.form .field.warning input[type="week"]:focus {
   background: #FFFAF3;
   border-color: #C9BA9B;
   color: #573A08;
@@ -1321,22 +1403,16 @@
     ---------------------*/
 
 .ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) label,
-.ui.form .field.warning .checkbox:not(.toggle):not(.slider) label,
+.ui.form .field.warning .checkbox:not(.toggle):not(.slider) label {
-.ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) .box,
-.ui.form .field.warning .checkbox:not(.toggle):not(.slider) .box {
   color: #573A08;
 }
-.ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) label:before,
+.ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) label::before,
-.ui.form .field.warning .checkbox:not(.toggle):not(.slider) label:before,
+.ui.form .field.warning .checkbox:not(.toggle):not(.slider) label::before {
-.ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) .box:before,
-.ui.form .field.warning .checkbox:not(.toggle):not(.slider) .box:before {
   background: #FFFAF3;
   border-color: #C9BA9B;
 }
-.ui.form .fields.warning .field .checkbox label:after,
+.ui.form .fields.warning .field .checkbox label::after,
-.ui.form .field.warning .checkbox label:after,
+.ui.form .field.warning .checkbox label::after {
-.ui.form .fields.warning .field .checkbox .box:after,
-.ui.form .field.warning .checkbox .box:after {
   color: #573A08;
 }
 .ui.inverted.form .fields.warning .field label,
@@ -1371,7 +1447,7 @@
   cursor: default;
   pointer-events: none;
 }
-.ui.loading.form:before {
+.ui.loading.form::before {
   position: absolute;
   content: '';
   top: 0;
@@ -1381,10 +1457,10 @@
   height: 100%;
   z-index: 100;
 }
-.ui.loading.form.segments:before {
+.ui.loading.form.segments::before {
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
 }
-.ui.loading.form:after {
+.ui.loading.form::after {
   position: absolute;
   content: '';
   top: 50%;
@@ -1412,25 +1488,25 @@
        Required Field
   ---------------------*/
 
-.ui.form .required.fields:not(.grouped) > .field > label:after,
+.ui.form .required.fields:not(.grouped) > .field > label::after,
-.ui.form .required.fields.grouped > label:after,
+.ui.form .required.fields.grouped > label::after,
-.ui.form .required.field > label:after,
+.ui.form .required.field > label::after,
-.ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
+.ui.form .required.fields:not(.grouped) > .field > .checkbox::after,
-.ui.form .required.field > .checkbox:after,
+.ui.form .required.field > .checkbox::after,
-.ui.form label.required:after {
+.ui.form label.required::after {
   margin: -0.2em 0 0 0.2em;
   content: '*';
   color: #DB2828;
 }
-.ui.form .required.fields:not(.grouped) > .field > label:after,
+.ui.form .required.fields:not(.grouped) > .field > label::after,
-.ui.form .required.fields.grouped > label:after,
+.ui.form .required.fields.grouped > label::after,
-.ui.form .required.field > label:after,
+.ui.form .required.field > label::after,
-.ui.form label.required:after {
+.ui.form label.required::after {
   display: inline-block;
   vertical-align: top;
 }
-.ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
+.ui.form .required.fields:not(.grouped) > .field > .checkbox::after,
-.ui.form .required.field > .checkbox:after {
+.ui.form .required.field > .checkbox::after {
   position: absolute;
   top: 0;
   left: 100%;
@@ -1449,9 +1525,7 @@
 .ui.inverted.form label,
 .ui.form .inverted.segment label,
 .ui.form .inverted.segment .ui.checkbox label,
-.ui.form .inverted.segment .ui.checkbox .box,
 .ui.inverted.form .ui.checkbox label,
-.ui.inverted.form .ui.checkbox .box,
 .ui.inverted.form .inline.fields > label,
 .ui.inverted.form .inline.fields .field > label,
 .ui.inverted.form .inline.fields .field > p,
@@ -1462,15 +1536,17 @@
 .ui.inverted.loading.form {
   color: #FFFFFF;
 }
-.ui.inverted.loading.form:before {
+.ui.inverted.loading.form::before {
   background: rgba(0, 0, 0, 0.85);
 }
 
 /* Inverted Field */
 .ui.inverted.form input:not([type]),
+.ui.inverted.form input[type="color"],
 .ui.inverted.form input[type="date"],
 .ui.inverted.form input[type="datetime-local"],
 .ui.inverted.form input[type="email"],
+.ui.inverted.form input[type="month"],
 .ui.inverted.form input[type="number"],
 .ui.inverted.form input[type="password"],
 .ui.inverted.form input[type="search"],
@@ -1478,7 +1554,8 @@
 .ui.inverted.form input[type="time"],
 .ui.inverted.form input[type="text"],
 .ui.inverted.form input[type="file"],
-.ui.inverted.form input[type="url"] {
+.ui.inverted.form input[type="url"],
+.ui.inverted.form input[type="week"] {
   background: #FFFFFF;
   border-color: rgba(255, 255, 255, 0.1);
   color: rgba(0, 0, 0, 0.87);
@@ -1500,9 +1577,9 @@
   margin-bottom: 0;
 }
 .ui.form .grouped.fields > label {
-  margin: 0 0 0.33333333rem 0;
+  margin: 0 0 0.28571429rem 0;
   color: rgba(0, 0, 0, 0.87);
-  font-size: 0.91666667em;
+  font-size: 0.92857143em;
   font-weight: bold;
   text-transform: none;
 }
@@ -1690,7 +1767,7 @@
   margin-top: 0;
   margin-bottom: 0;
   vertical-align: baseline;
-  font-size: 0.91666667em;
+  font-size: 0.92857143em;
   font-weight: bold;
   color: rgba(0, 0, 0, 0.87);
   text-transform: none;
@@ -1725,7 +1802,7 @@
 /* Label */
 .ui.form .inline.fields .field > :first-child,
 .ui.form .inline.field > :first-child {
-  margin: 0 0.83333333em 0 0;
+  margin: 0 0.85714286em 0 0;
 }
 .ui.form .inline.fields .field > :only-child,
 .ui.form .inline.field > :only-child {
@@ -1758,37 +1835,37 @@
 .ui.mini.form,
 .ui.mini.form .field .dropdown,
 .ui.mini.form .field .dropdown .menu > .item {
-  font-size: 0.75rem;
+  font-size: 0.78571429rem;
 }
 .ui.tiny.form,
 .ui.tiny.form .field .dropdown,
 .ui.tiny.form .field .dropdown .menu > .item {
-  font-size: 0.83333333rem;
+  font-size: 0.85714286rem;
 }
 .ui.small.form,
 .ui.small.form .field .dropdown,
 .ui.small.form .field .dropdown .menu > .item {
-  font-size: 0.91666667rem;
+  font-size: 0.92857143rem;
 }
 .ui.large.form,
 .ui.large.form .field .dropdown,
 .ui.large.form .field .dropdown .menu > .item {
-  font-size: 1.16666667rem;
+  font-size: 1.14285714rem;
 }
 .ui.big.form,
 .ui.big.form .field .dropdown,
 .ui.big.form .field .dropdown .menu > .item {
-  font-size: 1.25rem;
+  font-size: 1.28571429rem;
 }
 .ui.huge.form,
 .ui.huge.form .field .dropdown,
 .ui.huge.form .field .dropdown .menu > .item {
-  font-size: 1.41666667rem;
+  font-size: 1.42857143rem;
 }
 .ui.massive.form,
 .ui.massive.form .field .dropdown,
 .ui.massive.form .field .dropdown .menu > .item {
-  font-size: 1.75rem;
+  font-size: 1.71428571rem;
 }
 
 

semantic/dist/components/form.js

@@ -131,6 +131,11 @@ $.fn.form = function(parameters) {
           $reset      = $module.find(selector.reset);
         },
 
+        refreshEvents: function() {
+          module.removeEvents();
+          module.bindEvents();
+        },
+
         submit: function() {
           module.verbose('Submitting form', $module);
           submitting = true;
@@ -391,7 +396,6 @@ $.fn.form = function(parameters) {
           $module.off(eventNamespace);
           $field.off(eventNamespace);
           $submit.off(eventNamespace);
-          $field.off(eventNamespace);
         },
 
         event: {
@@ -419,6 +423,7 @@ $.fn.form = function(parameters) {
                   $field.one('keyup' + eventNamespace, module.event.field.keyup);
                   module.submit();
                   module.debug('Enter pressed on input submitting form');
+                  event.preventDefault();
                 }
                 keyHeldDown = true;
               }
@@ -543,7 +548,7 @@ $.fn.form = function(parameters) {
               parts,
               suffixPrompt
             ;
-            if(ancillary && ancillary.indexOf('..') >= 0) {
+            if(ancillary && ['integer', 'decimal', 'number'].indexOf(ruleName) >= 0 && ancillary.indexOf('..') >= 0) {
               parts = ancillary.split('..', 2);
               if(!rule.prompt) {
                 suffixPrompt = (
@@ -585,7 +590,7 @@ $.fn.form = function(parameters) {
               if(isLegacySettings) {
                 // 1.x (ducktyped)
                 settings   = $.extend(true, {}, $.fn.form.settings, legacyParameters);
-                validation = $.extend({}, $.fn.form.settings.defaults, parameters);
+                validation = $.extend(true, {}, $.fn.form.settings.defaults, parameters);
                 module.error(settings.error.oldSyntax, element);
                 module.verbose('Extending settings from legacy parameters', validation, settings);
               }
@@ -595,13 +600,13 @@ $.fn.form = function(parameters) {
                   parameters.fields = module.get.fieldsFromShorthand(parameters.fields);
                 }
                 settings   = $.extend(true, {}, $.fn.form.settings, parameters);
-                validation = $.extend({}, $.fn.form.settings.defaults, settings.fields);
+                validation = $.extend(true, {}, $.fn.form.settings.defaults, settings.fields);
                 module.verbose('Extending settings', validation, settings);
               }
             }
             else {
-              settings   = $.fn.form.settings;
+              settings   = $.extend(true, {}, $.fn.form.settings);
-              validation = $.fn.form.settings.defaults;
+              validation = $.extend(true, {}, $.fn.form.settings.defaults);
               module.verbose('Using default form validation', validation, settings);
             }
 
@@ -863,9 +868,11 @@ $.fn.form = function(parameters) {
               }
             });
             module.debug('Adding rules', newValidation.rules, validation);
+            module.refreshEvents();
           },
           fields: function(fields) {
-            validation = $.extend({}, validation, module.get.fieldsFromShorthand(fields));
+            validation = $.extend(true, {}, validation, module.get.fieldsFromShorthand(fields));
+            module.refreshEvents();
           },
           prompt: function(identifier, errors, internal) {
             var
@@ -886,13 +893,13 @@ $.fn.form = function(parameters) {
             }
             if(settings.inline) {
               if(!promptExists) {
-                $prompt = settings.templates.prompt(errors, className.label);
+                $prompt = $('<div/>').addClass(className.label);
                 $prompt
                   .appendTo($fieldGroup)
                 ;
               }
               $prompt
-                .html(errors[0])
+                .html(settings.templates.prompt(errors))
               ;
               if(!promptExists) {
                 if(settings.transition && module.can.useElement('transition') && $module.transition('is supported')) {
@@ -962,6 +969,7 @@ $.fn.form = function(parameters) {
             $.each(fields, function(index, field) {
               module.remove.rule(field);
             });
+            module.refreshEvents();
           },
           // alias
           rules: function(field, rules) {
@@ -1085,12 +1093,15 @@ $.fn.form = function(parameters) {
                 }
                 else if(isCheckbox) {
                   module.verbose('Setting checkbox value', value, $element);
-                  if(value === true || value === 1) {
+                  if(value === true || value === 1 || value === 'on') {
                     $element.checkbox('check');
                   }
                   else {
                     $element.checkbox('uncheck');
                   }
+                  if(typeof value === 'string') {
+                    $field.val(value);
+                  }
                 }
                 else if(isDropdown) {
                   module.verbose('Setting dropdown value', value, $element);
@@ -1203,10 +1214,10 @@ $.fn.form = function(parameters) {
               if(event && $module.data('moduleApi') !== undefined) {
                 event.stopImmediatePropagation();
               }
-              if(settings.errorFocus) {
+              if(settings.errorFocus && ignoreCallbacks !== true) {
                 var focusElement, hasTabIndex = true;
                 if (typeof settings.errorFocus === 'string') {
-                  focusElement = $(settings.errorFocus);
+                  focusElement = $(document).find(settings.errorFocus);
                   hasTabIndex = focusElement.is('[tabindex]');
                   // to be able to focus/scroll into non input elements we need a tabindex
                   if (!hasTabIndex) {
@@ -1526,7 +1537,7 @@ $.fn.form.settings = {
 
   autoCheckRequired : false,
   preventLeaving    : false,
-  errorFocus        : false,
+  errorFocus        : true,
   dateHandling      : 'date', // 'date', 'input', 'formatter'
 
   onValid           : function() {},
@@ -1582,7 +1593,6 @@ $.fn.form.settings = {
     doesntContain        : '{name} cannot contain  "{ruleValue}"',
     doesntContainExactly : '{name} cannot contain exactly "{ruleValue}"',
     minLength            : '{name} must be at least {ruleValue} characters',
-    length               : '{name} must be at least {ruleValue} characters',
     exactLength          : '{name} must be exactly {ruleValue} characters',
     maxLength            : '{name} cannot be longer than {ruleValue} characters',
     match                : '{name} must match {ruleValue} field',
@@ -1596,7 +1606,7 @@ $.fn.form.settings = {
   selector : {
     checkbox   : 'input[type="checkbox"], input[type="radio"]',
     clear      : '.clear',
-    field      : 'input:not(.search):not([type="file"]), textarea, select',
+    field      : 'input:not(.search):not([type="file"]):not([type="reset"]):not([type="button"]):not([type="submit"]), textarea, select',
     group      : '.field',
     input      : 'input:not([type="file"])',
     message    : '.error.message',
@@ -1637,15 +1647,22 @@ $.fn.form.settings = {
         html += '<li>' + value + '</li>';
       });
       html += '</ul>';
-      return $(html);
+      return html;
     },
 
-    // template that produces label
+    // template that produces label content
-    prompt: function(errors, labelClasses) {
+    prompt: function(errors) {
-      return $('<div/>')
+      if(errors.length === 1){
-        .addClass(labelClasses)
+        return errors[0];
-        .html(errors[0])
+      }
+      var
+          html = '<ul class="ui list">'
       ;
+      $.each(errors, function(index, value) {
+        html += '<li>' + value + '</li>';
+      });
+      html += '</ul>';
+      return html;
     }
   },
 
@@ -1855,14 +1872,6 @@ $.fn.form.settings = {
       ;
     },
 
-    // see rls notes for 2.0.6 (this is a duplicate of minLength)
-    length: function(value, requiredLength) {
-      return (value !== undefined)
-        ? (value.length >= requiredLength)
-        : false
-      ;
-    },
-
     // is exactly length
     exactLength: function(value, requiredLength) {
       return (value !== undefined)

semantic/dist/components/grid.css

@@ -34,10 +34,10 @@
 -----------------------*/
 
 .ui.grid {
-  margin-top: -0.5rem;
+  margin-top: -1rem;
-  margin-bottom: -0.5rem;
+  margin-bottom: -1rem;
-  margin-left: -0.5625rem;
+  margin-left: -1rem;
-  margin-right: -0.5625rem;
+  margin-right: -1rem;
 }
 .ui.relaxed.grid {
   margin-left: -1.5rem;
@@ -50,7 +50,7 @@
 
 /* Preserve Rows Spacing on Consecutive Grids */
 .ui.grid + .grid {
-  margin-top: 0.5rem;
+  margin-top: 1rem;
 }
 
 /*-------------------
@@ -64,13 +64,13 @@
   position: relative;
   display: inline-block;
   width: 6.25%;
-  padding-left: 0.5625rem;
+  padding-left: 1rem;
-  padding-right: 0.5625rem;
+  padding-right: 1rem;
   vertical-align: top;
 }
 .ui.grid > * {
-  padding-left: 0.5625rem;
+  padding-left: 1rem;
-  padding-right: 0.5625rem;
+  padding-right: 1rem;
 }
 
 /*-------------------
@@ -96,8 +96,8 @@
           align-items: stretch;
   width: 100% !important;
   padding: 0;
-  padding-top: 0.5rem;
+  padding-top: 1rem;
-  padding-bottom: 0.5rem;
+  padding-bottom: 1rem;
 }
 
 /*-------------------
@@ -107,8 +107,8 @@
 
 /* Vertical padding when no rows */
 .ui.grid > .column:not(.row) {
-  padding-top: 0.5rem;
+  padding-top: 1rem;
-  padding-bottom: 0.5rem;
+  padding-bottom: 1rem;
 }
 .ui.grid > .row > .column {
   margin-top: 0;
@@ -148,10 +148,10 @@
   -webkit-box-flex: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
-  margin: 0.5rem 0.5625rem;
+  margin: 1rem 1rem;
 }
 .ui.grid .column + .ui.vertical.divider {
-  height: calc(50% - 0.5rem);
+  height: calc(50% - 1rem);
 }
 
 /* Remove Border on Last Horizontal Segment */
@@ -351,8 +351,8 @@
 }
 
 /*-------------------
-    Column Width
+      Column Width
---------------------*/
+  --------------------*/
 
 
 /* Sizing Combinations */
@@ -454,8 +454,8 @@
 }
 
 /*----------------------
-    Width per Device
+      Width per Device
------------------------*/
+  -----------------------*/
 
 
 /* Mobile Sizing Combinations */
@@ -1051,8 +1051,8 @@
 /* Swap from padding to margin on columns to have dividers align */
 .ui[class*="vertically divided"].grid > .column:not(.row),
 .ui[class*="vertically divided"].grid > .row > .column {
-  margin-top: 0.5rem;
+  margin-top: 1rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: 1rem;
   padding-top: 0;
   padding-bottom: 0;
 }
@@ -1087,14 +1087,14 @@
 .ui[class*="vertically divided"].grid > .row {
   position: relative;
 }
-.ui[class*="vertically divided"].grid > .row:before {
+.ui[class*="vertically divided"].grid > .row::before {
   position: absolute;
   content: "";
   top: 0;
   left: 0;
-  width: calc(100% - 1.125rem);
+  width: calc(100% - 2rem);
   height: 1px;
-  margin: 0 0.5625rem;
+  margin: 0 1rem;
   -webkit-box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
           box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
 }
@@ -1106,7 +1106,7 @@
 }
 
 /* First Row Vertically Divided */
-.ui[class*="vertically divided"].grid > .row:first-child:before {
+.ui[class*="vertically divided"].grid > .row:first-child::before {
   -webkit-box-shadow: none;
           box-shadow: none;
 }
@@ -1122,18 +1122,18 @@
   -webkit-box-shadow: none;
           box-shadow: none;
 }
-.ui.inverted[class*="vertically divided"].grid > .row:before {
+.ui.inverted[class*="vertically divided"].grid > .row::before {
   -webkit-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.1);
           box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.1);
 }
 
 /* Relaxed */
-.ui.relaxed[class*="vertically divided"].grid > .row:before {
+.ui.relaxed[class*="vertically divided"].grid > .row::before {
   margin-left: 1.5rem;
   margin-right: 1.5rem;
   width: calc(100% - 3rem);
 }
-.ui[class*="very relaxed"][class*="vertically divided"].grid > .row:before {
+.ui[class*="very relaxed"][class*="vertically divided"].grid > .row::before {
   margin-left: 2.5rem;
   margin-right: 2.5rem;
   width: calc(100% - 5rem);
@@ -1332,7 +1332,7 @@
 .ui.grid > .primary.row,
 .ui.grid > .primary.column,
 .ui.grid > .row > .primary.column {
-  background-color: #6435C9;
+  background-color: #2185D0;
   color: #FFFFFF;
 }
 .ui.grid > .secondary.row,
@@ -1421,8 +1421,8 @@
 }
 
 /*----------------------
-      Equal Width
+        Equal Width
------------------------*/
+  -----------------------*/
 
 .ui[class*="equal width"].grid > .column:not(.row),
 .ui[class*="equal width"].grid > .row > .column,
@@ -1476,11 +1476,11 @@
   }
   
 /* Vertically Divided Reversed */
-  .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:first-child:before {
+  .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:first-child::before {
     -webkit-box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
             box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
   }
-  .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:last-child:before {
+  .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:last-child::before {
     -webkit-box-shadow: none;
             box-shadow: none;
   }
@@ -1526,11 +1526,11 @@
   }
   
 /* Vertically Divided Reversed */
-  .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:first-child:before {
+  .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:first-child::before {
     -webkit-box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
             box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
   }
-  .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:last-child:before {
+  .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:last-child::before {
     -webkit-box-shadow: none;
             box-shadow: none;
   }
@@ -1576,11 +1576,11 @@
   }
   
 /* Vertically Divided Reversed */
-  .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child:before {
+  .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child::before {
     -webkit-box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
             box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
   }
-  .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:last-child:before {
+  .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:last-child::before {
     -webkit-box-shadow: none;
             box-shadow: none;
   }
@@ -1613,13 +1613,16 @@
   }
   .ui.grid > .doubling.row > .column,
   .ui.doubling.grid > .row > .column {
-    display: inline-block !important;
+    padding-top: 1rem !important;
-    padding-top: 0.5rem !important;
+    padding-bottom: 1rem !important;
-    padding-bottom: 0.5rem !important;
     -webkit-box-shadow: none !important;
             box-shadow: none !important;
     margin: 0;
   }
+  .ui.grid:not(.stretched) > .doubling.row:not(.stretched) > .column:not(.stretched),
+  .ui.doubling.grid:not(.stretched) > .row:not(.stretched) > .column:not(.stretched) {
+    display: inline-block !important;
+  }
   .ui[class*="two column"].doubling.grid > .row > .column,
   .ui[class*="two column"].doubling.grid > .column:not(.row),
   .ui.grid > [class*="two column"].doubling.row.row > .column {
@@ -1706,8 +1709,8 @@
   }
   .ui.grid > .doubling.row > .column,
   .ui.doubling.grid > .row > .column {
-    padding-top: 0.5rem !important;
+    padding-top: 1rem !important;
-    padding-bottom: 0.5rem !important;
+    padding-bottom: 1rem !important;
     margin: 0 !important;
     -webkit-box-shadow: none !important;
             box-shadow: none !important;
@@ -1810,7 +1813,7 @@
     margin: 0 0 !important;
     -webkit-box-shadow: none !important;
             box-shadow: none !important;
-    padding: 0.5rem 0.5625rem;
+    padding: 1rem 1rem;
   }
   .ui.stackable.grid:not(.vertically) > .row {
     margin: 0;
@@ -1827,8 +1830,8 @@
 /* Don't pad inside segment or nested grid */
   .ui.grid .ui.stackable.grid,
   .ui.segment:not(.vertical) .ui.stackable.page.grid {
-    margin-left: -0.5625rem !important;
+    margin-left: -1rem !important;
-    margin-right: -0.5625rem !important;
+    margin-right: -1rem !important;
   }
   
 /* Divided Stackable */
@@ -1851,8 +1854,8 @@
     border-top: 1px solid rgba(34, 36, 38, 0.15);
     -webkit-box-shadow: none !important;
             box-shadow: none !important;
-    padding-top: 1rem !important;
+    padding-top: 2rem !important;
-    padding-bottom: 1rem !important;
+    padding-bottom: 2rem !important;
   }
   .ui.stackable.celled.grid > .row {
     -webkit-box-shadow: none !important;
@@ -1999,30 +2002,30 @@
   -----------------*/
 
 .ui.ui.ui.compact.grid {
-  margin: -0.28125rem;
+  margin: -0.5rem;
 }
 .ui.ui.ui.compact.grid > .column:not(.row),
 .ui.ui.ui.compact.grid > .row > .column {
-  padding-left: 0.28125rem;
+  padding-left: 0.5rem;
-  padding-right: 0.28125rem;
+  padding-right: 0.5rem;
 }
 .ui.ui.ui.compact.grid > * {
-  padding-left: 0.28125rem;
+  padding-left: 0.5rem;
-  padding-right: 0.28125rem;
+  padding-right: 0.5rem;
 }
 
 /* Row */
 .ui.ui.ui.compact.grid > .row {
-  padding-top: 0.25rem;
+  padding-top: 0.5rem;
-  padding-bottom: 0.25rem;
+  padding-bottom: 0.5rem;
   padding-left: 0;
   padding-right: 0;
 }
 
 /* Columns */
 .ui.ui.ui.compact.grid > .column:not(.row) {
-  padding-top: 0.25rem;
+  padding-top: 0.5rem;
-  padding-bottom: 0.25rem;
+  padding-bottom: 0.5rem;
 }
 
 /* Relaxed + Celled */
@@ -2040,30 +2043,30 @@
   -----------------*/
 
 .ui.ui.ui[class*="very compact"].grid {
-  margin: -0.140625rem;
+  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.140625rem;
+  padding-left: 0.25rem;
-  padding-right: 0.140625rem;
+  padding-right: 0.25rem;
 }
 .ui.ui.ui[class*="very compact"].grid > * {
-  padding-left: 0.140625rem;
+  padding-left: 0.25rem;
-  padding-right: 0.140625rem;
+  padding-right: 0.25rem;
 }
 
 /* Row */
 .ui.ui.ui[class*="very compact"].grid > .row {
-  padding-top: 0.125rem;
+  padding-top: 0.25rem;
-  padding-bottom: 0.125rem;
+  padding-bottom: 0.25rem;
   padding-left: 0;
   padding-right: 0;
 }
 
 /* Columns */
 .ui.ui.ui[class*="very compact"].grid > .column:not(.row) {
-  padding-top: 0.125rem;
+  padding-top: 0.25rem;
-  padding-bottom: 0.125rem;
+  padding-bottom: 0.25rem;
 }
 
 /* Relaxed + Celled */

semantic/dist/components/header.css

@@ -137,13 +137,13 @@ h1.ui.header {
   font-size: 2rem;
 }
 h1.ui.header .sub.header {
-  font-size: 1.16666667rem;
+  font-size: 1.14285714rem;
 }
 h2.ui.header {
   font-size: 1.71428571rem;
 }
 h2.ui.header .sub.header {
-  font-size: 1.16666667rem;
+  font-size: 1.14285714rem;
 }
 h3.ui.header {
   font-size: 1.28571429rem;
@@ -161,13 +161,13 @@ h5.ui.header {
   font-size: 1rem;
 }
 h5.ui.header .sub.header {
-  font-size: 0.91666667rem;
+  font-size: 0.92857143rem;
 }
 h6.ui.header {
   font-size: 0.85714286rem;
 }
 h6.ui.header .sub.header {
-  font-size: 0.91666667rem;
+  font-size: 0.92857143rem;
 }
 
 /*--------------
@@ -178,19 +178,19 @@ h6.ui.header .sub.header {
   font-size: 0.85714286em;
 }
 .ui.mini.header .sub.header {
-  font-size: 0.91666667rem;
+  font-size: 0.92857143rem;
 }
 .ui.mini.sub.header {
-  font-size: 0.75em;
+  font-size: 0.78571429em;
 }
 .ui.tiny.header {
   font-size: 1em;
 }
 .ui.tiny.header .sub.header {
-  font-size: 0.91666667rem;
+  font-size: 0.92857143rem;
 }
 .ui.tiny.sub.header {
-  font-size: 0.75em;
+  font-size: 0.78571429em;
 }
 .ui.small.header {
   font-size: 1.07142857em;
@@ -199,22 +199,22 @@ h6.ui.header .sub.header {
   font-size: 1rem;
 }
 .ui.small.sub.header {
-  font-size: 0.75em;
+  font-size: 0.78571429em;
 }
 .ui.large.header {
   font-size: 1.71428571em;
 }
 .ui.large.header .sub.header {
-  font-size: 1.16666667rem;
+  font-size: 1.14285714rem;
 }
 .ui.large.sub.header {
-  font-size: 0.91666667em;
+  font-size: 0.92857143em;
 }
 .ui.big.header {
   font-size: 1.85714286em;
 }
 .ui.big.header .sub.header {
-  font-size: 1.16666667rem;
+  font-size: 1.14285714rem;
 }
 .ui.big.sub.header {
   font-size: 1em;
@@ -224,7 +224,7 @@ h6.ui.header .sub.header {
   min-height: 1em;
 }
 .ui.huge.header .sub.header {
-  font-size: 1.16666667rem;
+  font-size: 1.14285714rem;
 }
 .ui.huge.sub.header {
   font-size: 1em;
@@ -234,10 +234,10 @@ h6.ui.header .sub.header {
   min-height: 1em;
 }
 .ui.massive.header .sub.header {
-  font-size: 1.41666667rem;
+  font-size: 1.42857143rem;
 }
 .ui.massive.sub.header {
-  font-size: 1.16666667em;
+  font-size: 1.14285714em;
 }
 
 /*--------------
@@ -246,9 +246,9 @@ h6.ui.header .sub.header {
 
 .ui.sub.header {
   padding: 0;
-  margin-bottom: 0.16666667rem;
+  margin-bottom: 0.14285714rem;
   font-weight: bold;
-  font-size: 0.83333333em;
+  font-size: 0.85714286em;
   text-transform: uppercase;
   color: '';
 }
@@ -262,7 +262,7 @@ h6.ui.header .sub.header {
   text-align: center;
   margin: 2rem 0 1rem;
 }
-.ui.icon.header:after {
+.ui.icon.header::after {
   content: '';
   display: block;
   height: 0;
@@ -272,6 +272,7 @@ h6.ui.header .sub.header {
 .ui.icon.header:first-child {
   margin-top: 0;
 }
+.ui.icon.header > .image.icon,
 .ui.icon.header > .icons,
 .ui.icon.header > i.icon {
   float: none;
@@ -297,6 +298,7 @@ h6.ui.header .sub.header {
 .ui.icon.header > i.square {
   font-size: 2em;
 }
+.ui.block.icon.header > .image.icon,
 .ui.block.icon.header > .icons,
 .ui.block.icon.header > i.icon {
   margin-bottom: 0;
@@ -352,13 +354,13 @@ h6.ui.header .sub.header {
 --------------------*/
 
 .ui.primary.header {
-  color: #6435C9;
+  color: #2185D0;
 }
 a.ui.primary.header:hover {
-  color: #5829bb;
+  color: #1678c2;
 }
 .ui.primary.dividing.header {
-  border-bottom: 2px solid #6435C9;
+  border-bottom: 2px solid #2185D0;
 }
 .ui.inverted.primary.header.header.header {
   color: #54C8FF;
@@ -639,7 +641,7 @@ a.ui.inverted.black.header.header.header:hover {
 .ui.justified.header {
   text-align: justify;
 }
-.ui.justified.header:after {
+.ui.justified.header::after {
   display: inline-block;
   content: '';
   width: 100%;
@@ -674,11 +676,11 @@ a.ui.inverted.black.header.header.header:hover {
   --------------------*/
 
 .ui.dividing.header {
-  padding-bottom: 0.25rem;
+  padding-bottom: 0.21428571rem;
   border-bottom: 1px solid rgba(34, 36, 38, 0.15);
 }
 .ui.dividing.header .sub.header {
-  padding-bottom: 0.25rem;
+  padding-bottom: 0.21428571rem;
 }
 .ui.dividing.header i.icon {
   margin-bottom: 0;
@@ -693,35 +695,35 @@ a.ui.inverted.black.header.header.header:hover {
 
 .ui.block.header {
   background: #F3F4F5;
-  padding: 0.75rem 1rem;
+  padding: 0.78571429rem 1rem;
   -webkit-box-shadow: none;
           box-shadow: none;
   border: 1px solid #D4D4D5;
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
 }
 .ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
   font-size: 1rem;
 }
 .ui.mini.block.header {
-  font-size: 0.75rem;
+  font-size: 0.78571429rem;
 }
 .ui.tiny.block.header {
-  font-size: 0.83333333rem;
+  font-size: 0.85714286rem;
 }
 .ui.small.block.header {
-  font-size: 0.91666667rem;
+  font-size: 0.92857143rem;
 }
 .ui.large.block.header {
-  font-size: 1.16666667rem;
+  font-size: 1.14285714rem;
 }
 .ui.big.block.header {
-  font-size: 1.25rem;
+  font-size: 1.28571429rem;
 }
 .ui.huge.block.header {
-  font-size: 1.41666667rem;
+  font-size: 1.42857143rem;
 }
 .ui.massive.block.header {
-  font-size: 1.75rem;
+  font-size: 1.71428571rem;
 }
 
 /*-------------------
@@ -730,7 +732,7 @@ a.ui.inverted.black.header.header.header:hover {
 
 .ui.attached.header {
   background: #FFFFFF;
-  padding: 0.75rem 1rem;
+  padding: 0.78571429rem 1rem;
   margin: 0 -1px 0 -1px;
   -webkit-box-shadow: none;
           box-shadow: none;
@@ -744,10 +746,10 @@ a.ui.inverted.black.header.header.header:hover {
   border-top: none;
 }
 .ui.top.attached.header {
-  border-radius: 0.33333333rem 0.33333333rem 0 0;
+  border-radius: 0.28571429rem 0.28571429rem 0 0;
 }
 .ui.bottom.attached.header {
-  border-radius: 0 0 0.33333333rem 0.33333333rem;
+  border-radius: 0 0 0.28571429rem 0.28571429rem;
 }
 
 /* Attached Sizes */
@@ -755,25 +757,25 @@ a.ui.inverted.black.header.header.header:hover {
   font-size: 1em;
 }
 .ui.mini.attached.header {
-  font-size: 0.75em;
+  font-size: 0.78571429em;
 }
 .ui.tiny.attached.header {
-  font-size: 0.83333333em;
+  font-size: 0.85714286em;
 }
 .ui.small.attached.header {
-  font-size: 0.91666667em;
+  font-size: 0.92857143em;
 }
 .ui.large.attached.header {
-  font-size: 1.16666667em;
+  font-size: 1.14285714em;
 }
 .ui.big.attached.header {
-  font-size: 1.25em;
+  font-size: 1.28571429em;
 }
 .ui.huge.attached.header {
-  font-size: 1.41666667em;
+  font-size: 1.42857143em;
 }
 .ui.massive.attached.header {
-  font-size: 1.75em;
+  font-size: 1.71428571em;
 }
 
 /*-------------------

semantic/dist/components/image.css

@@ -259,7 +259,7 @@ img.ui.bordered.image {
 .ui.mini.image {
   width: 35px;
   height: auto;
-  font-size: 0.75rem;
+  font-size: 0.78571429rem;
 }
 .ui.tiny.images .image,
 .ui.tiny.images img,
@@ -267,7 +267,7 @@ img.ui.bordered.image {
 .ui.tiny.image {
   width: 80px;
   height: auto;
-  font-size: 0.83333333rem;
+  font-size: 0.85714286rem;
 }
 .ui.small.images .image,
 .ui.small.images img,
@@ -275,7 +275,7 @@ img.ui.bordered.image {
 .ui.small.image {
   width: 150px;
   height: auto;
-  font-size: 0.91666667rem;
+  font-size: 0.92857143rem;
 }
 .ui.large.images .image,
 .ui.large.images img,
@@ -283,7 +283,7 @@ img.ui.bordered.image {
 .ui.large.image {
   width: 450px;
   height: auto;
-  font-size: 1.16666667rem;
+  font-size: 1.14285714rem;
 }
 .ui.big.images .image,
 .ui.big.images img,
@@ -291,7 +291,7 @@ img.ui.bordered.image {
 .ui.big.image {
   width: 600px;
   height: auto;
-  font-size: 1.25rem;
+  font-size: 1.28571429rem;
 }
 .ui.huge.images .image,
 .ui.huge.images img,
@@ -299,7 +299,7 @@ img.ui.bordered.image {
 .ui.huge.image {
   width: 800px;
   height: auto;
-  font-size: 1.41666667rem;
+  font-size: 1.42857143rem;
 }
 .ui.massive.images .image,
 .ui.massive.images img,
@@ -307,7 +307,7 @@ img.ui.bordered.image {
 .ui.massive.image {
   width: 960px;
   height: auto;
-  font-size: 1.75rem;
+  font-size: 1.71428571rem;
 }
 
 

semantic/dist/components/image.min.css

@@ -6,4 +6,4 @@
  * Released under the MIT license
  * http://opensource.org/licenses/MIT
  *
- */.ui.image{position:relative;display:inline-block;vertical-align:middle;max-width:100%;background-color:transparent}img.ui.image{display:block}.ui.image img,.ui.image svg{display:block;max-width:100%;height:auto}.ui.hidden.images,.ui.ui.hidden.image{display:none}.ui.hidden.transition.image,.ui.hidden.transition.images{display:block;visibility:hidden}.ui.images>.hidden.transition{display:inline-block;visibility:hidden}.ui.disabled.image,.ui.disabled.images{cursor:default;opacity:.45}.ui.inline.image,.ui.inline.image img,.ui.inline.image svg{display:inline-block}.ui.top.aligned.image,.ui.top.aligned.image img,.ui.top.aligned.image svg{display:inline-block;vertical-align:top}.ui.middle.aligned.image,.ui.middle.aligned.image img,.ui.middle.aligned.image svg{display:inline-block;vertical-align:middle}.ui.bottom.aligned.image,.ui.bottom.aligned.image img,.ui.bottom.aligned.image svg{display:inline-block;vertical-align:bottom}.ui.images .ui.top.aligned.image,.ui.top.aligned.images .image{-ms-flex-item-align:start;align-self:flex-start}.ui.images .ui.middle.aligned.image,.ui.middle.aligned.images .image{-ms-flex-item-align:center;align-self:center}.ui.bottom.aligned.images .image,.ui.images .ui.bottom.aligned.image{-ms-flex-item-align:end;align-self:flex-end}.ui.rounded.image,.ui.rounded.image>*,.ui.rounded.images .image,.ui.rounded.images .image>*{border-radius:.3125em}.ui.bordered.image img,.ui.bordered.image svg,.ui.bordered.images .image,.ui.bordered.images img,.ui.bordered.images svg,img.ui.bordered.image{border:1px solid rgba(0,0,0,.1)}.ui.circular.image,.ui.circular.images{overflow:hidden}.ui.circular.image,.ui.circular.image>*,.ui.circular.images .image,.ui.circular.images .image>*{border-radius:500rem}.ui.fluid.image,.ui.fluid.image img,.ui.fluid.image svg,.ui.fluid.images,.ui.fluid.images img,.ui.fluid.images svg{display:block;width:100%;height:auto}.ui.avatar.image,.ui.avatar.image img,.ui.avatar.image svg,.ui.avatar.images .image,.ui.avatar.images img,.ui.avatar.images svg{margin-right:.25em;display:inline-block;width:2em;height:2em;border-radius:500rem}.ui.spaced.image{display:inline-block!important;margin-left:.5em;margin-right:.5em}.ui[class*="left spaced"].image{margin-left:.5em;margin-right:0}.ui[class*="right spaced"].image{margin-left:0;margin-right:.5em}.ui.floated.image,.ui.floated.images{float:left;margin-right:1em;margin-bottom:1em}.ui.right.floated.image,.ui.right.floated.images{float:right;margin-right:0;margin-bottom:1em;margin-left:1em}.ui.floated.image:last-child,.ui.floated.images:last-child{margin-bottom:0}.ui.centered.image{display:block;margin-left:auto;margin-right:auto}.ui.centered.images{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.ui.medium.image,.ui.medium.images .image,.ui.medium.images img,.ui.medium.images svg{width:300px;height:auto;font-size:1rem}.ui.mini.image,.ui.mini.images .image,.ui.mini.images img,.ui.mini.images svg{width:35px;height:auto;font-size:.75rem}.ui.tiny.image,.ui.tiny.images .image,.ui.tiny.images img,.ui.tiny.images svg{width:80px;height:auto;font-size:.83333333rem}.ui.small.image,.ui.small.images .image,.ui.small.images img,.ui.small.images svg{width:150px;height:auto;font-size:.91666667rem}.ui.large.image,.ui.large.images .image,.ui.large.images img,.ui.large.images svg{width:450px;height:auto;font-size:1.16666667rem}.ui.big.image,.ui.big.images .image,.ui.big.images img,.ui.big.images svg{width:600px;height:auto;font-size:1.25rem}.ui.huge.image,.ui.huge.images .image,.ui.huge.images img,.ui.huge.images svg{width:800px;height:auto;font-size:1.41666667rem}.ui.massive.image,.ui.massive.images .image,.ui.massive.images img,.ui.massive.images svg{width:960px;height:auto;font-size:1.75rem}.ui.images{font-size:0;margin:0 -.25rem 0}.ui.images .image,.ui.images>img,.ui.images>svg{display:inline-block;margin:0 .25rem .5rem}
+ */.ui.image{position:relative;display:inline-block;vertical-align:middle;max-width:100%;background-color:transparent}img.ui.image{display:block}.ui.image img,.ui.image svg{display:block;max-width:100%;height:auto}.ui.hidden.images,.ui.ui.hidden.image{display:none}.ui.hidden.transition.image,.ui.hidden.transition.images{display:block;visibility:hidden}.ui.images>.hidden.transition{display:inline-block;visibility:hidden}.ui.disabled.image,.ui.disabled.images{cursor:default;opacity:.45}.ui.inline.image,.ui.inline.image img,.ui.inline.image svg{display:inline-block}.ui.top.aligned.image,.ui.top.aligned.image img,.ui.top.aligned.image svg{display:inline-block;vertical-align:top}.ui.middle.aligned.image,.ui.middle.aligned.image img,.ui.middle.aligned.image svg{display:inline-block;vertical-align:middle}.ui.bottom.aligned.image,.ui.bottom.aligned.image img,.ui.bottom.aligned.image svg{display:inline-block;vertical-align:bottom}.ui.images .ui.top.aligned.image,.ui.top.aligned.images .image{-ms-flex-item-align:start;align-self:flex-start}.ui.images .ui.middle.aligned.image,.ui.middle.aligned.images .image{-ms-flex-item-align:center;align-self:center}.ui.bottom.aligned.images .image,.ui.images .ui.bottom.aligned.image{-ms-flex-item-align:end;align-self:flex-end}.ui.rounded.image,.ui.rounded.image>*,.ui.rounded.images .image,.ui.rounded.images .image>*{border-radius:.3125em}.ui.bordered.image img,.ui.bordered.image svg,.ui.bordered.images .image,.ui.bordered.images img,.ui.bordered.images svg,img.ui.bordered.image{border:1px solid rgba(0,0,0,.1)}.ui.circular.image,.ui.circular.images{overflow:hidden}.ui.circular.image,.ui.circular.image>*,.ui.circular.images .image,.ui.circular.images .image>*{border-radius:500rem}.ui.fluid.image,.ui.fluid.image img,.ui.fluid.image svg,.ui.fluid.images,.ui.fluid.images img,.ui.fluid.images svg{display:block;width:100%;height:auto}.ui.avatar.image,.ui.avatar.image img,.ui.avatar.image svg,.ui.avatar.images .image,.ui.avatar.images img,.ui.avatar.images svg{margin-right:.25em;display:inline-block;width:2em;height:2em;border-radius:500rem}.ui.spaced.image{display:inline-block!important;margin-left:.5em;margin-right:.5em}.ui[class*="left spaced"].image{margin-left:.5em;margin-right:0}.ui[class*="right spaced"].image{margin-left:0;margin-right:.5em}.ui.floated.image,.ui.floated.images{float:left;margin-right:1em;margin-bottom:1em}.ui.right.floated.image,.ui.right.floated.images{float:right;margin-right:0;margin-bottom:1em;margin-left:1em}.ui.floated.image:last-child,.ui.floated.images:last-child{margin-bottom:0}.ui.centered.image{display:block;margin-left:auto;margin-right:auto}.ui.centered.images{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.ui.medium.image,.ui.medium.images .image,.ui.medium.images img,.ui.medium.images svg{width:300px;height:auto;font-size:1rem}.ui.mini.image,.ui.mini.images .image,.ui.mini.images img,.ui.mini.images svg{width:35px;height:auto;font-size:.78571429rem}.ui.tiny.image,.ui.tiny.images .image,.ui.tiny.images img,.ui.tiny.images svg{width:80px;height:auto;font-size:.85714286rem}.ui.small.image,.ui.small.images .image,.ui.small.images img,.ui.small.images svg{width:150px;height:auto;font-size:.92857143rem}.ui.large.image,.ui.large.images .image,.ui.large.images img,.ui.large.images svg{width:450px;height:auto;font-size:1.14285714rem}.ui.big.image,.ui.big.images .image,.ui.big.images img,.ui.big.images svg{width:600px;height:auto;font-size:1.28571429rem}.ui.huge.image,.ui.huge.images .image,.ui.huge.images img,.ui.huge.images svg{width:800px;height:auto;font-size:1.42857143rem}.ui.massive.image,.ui.massive.images .image,.ui.massive.images img,.ui.massive.images svg{width:960px;height:auto;font-size:1.71428571rem}.ui.images{font-size:0;margin:0 -.25rem 0}.ui.images .image,.ui.images>img,.ui.images>svg{display:inline-block;margin:0 .25rem .5rem}

semantic/dist/components/label.css

@@ -17,7 +17,7 @@
   display: inline-block;
   line-height: 1;
   vertical-align: baseline;
-  margin: 0 0.16666667em;
+  margin: 0 0.14285714em;
   background-color: #E8E8E8;
   background-image: none;
   padding: 0.5833em 0.833em;
@@ -25,7 +25,7 @@
   text-transform: none;
   font-weight: bold;
   border: 0 solid transparent;
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
   -webkit-transition: background 0.1s ease;
   transition: background 0.1s ease;
 }
@@ -61,7 +61,7 @@ a.ui.label {
 }
 
 /* Icon */
-.ui.left.icon.label > .icon,
+.ui.ui[class*="left icon"].label > .icon,
 .ui.label > .icon {
   width: auto;
   margin: 0 0.75em 0 0;
@@ -83,7 +83,7 @@ a.ui.label {
 .ui.label > .close.icon,
 .ui.label > .delete.icon {
   cursor: pointer;
-  font-size: 0.91666667em;
+  font-size: 0.92857143em;
   opacity: 0.5;
   -webkit-transition: background 0.1s ease;
   transition: background 0.1s ease;
@@ -94,10 +94,14 @@ a.ui.label {
 }
 
 /* Backward compatible positioning */
-.ui.label.left.icon > .close.icon,
+.ui.label[class*="left icon"] > .close.icon,
-.ui.label.left.icon > .delete.icon {
+.ui.label[class*="left icon"] > .delete.icon {
   margin: 0 0.5em 0 0;
 }
+.ui.label[class*="left icon"] > .close.icon.right,
+.ui.label[class*="left icon"] > .delete.icon.right {
+  margin: 0 0 0 0.5em;
+}
 .ui.label:not(.icon) > .close.icon,
 .ui.label:not(.icon) > .delete.icon {
   margin: 0 0 0 0.5em;
@@ -109,7 +113,7 @@ a.ui.label {
 }
 
 /* Right Side Icon */
-.ui.right.icon.label > .icon {
+.ui[class*="right icon"].label > .icon {
   margin: 0 0 0 0.75em;
 }
 
@@ -184,7 +188,7 @@ a.ui.label {
   text-transform: none;
   background: #E8E8E8;
   padding: 0.5833em 0.833em 0.5833em 0.5em;
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
   -webkit-box-shadow: none;
           box-shadow: none;
 }
@@ -196,13 +200,13 @@ a.ui.label {
   vertical-align: top;
   height: 2.1666em;
   margin: -0.5833em 0.5em -0.5833em -0.5em;
-  border-radius: 0.33333333rem 0 0 0.33333333rem;
+  border-radius: 0.28571429rem 0 0 0.28571429rem;
 }
 .ui.image.label .detail {
   background: rgba(0, 0, 0, 0.1);
   margin: -0.5833em -0.833em -0.5833em 0.5em;
   padding: 0.5833em 0.833em;
-  border-radius: 0 0.33333333rem 0.33333333rem 0;
+  border-radius: 0 0.28571429rem 0.28571429rem 0;
 }
 .ui.bottom.attached.image.label:not(.right) > img,
 .ui.top.right.attached.image.label > img {
@@ -223,12 +227,12 @@ a.ui.label {
   position: relative;
   padding-left: 1.5em;
   padding-right: 1.5em;
-  border-radius: 0 0.33333333rem 0.33333333rem 0;
+  border-radius: 0 0.28571429rem 0.28571429rem 0;
   -webkit-transition: none;
   transition: none;
 }
-.ui.tag.labels .label:before,
+.ui.tag.labels .label::before,
-.ui.tag.label:before {
+.ui.tag.label::before {
   position: absolute;
   -webkit-transform: translateY(-50%) translateX(50%) rotate(-45deg);
           transform: translateY(-50%) translateX(50%) rotate(-45deg);
@@ -242,8 +246,8 @@ a.ui.label {
   -webkit-transition: none;
   transition: none;
 }
-.ui.tag.labels .label:after,
+.ui.tag.labels .label::after,
-.ui.tag.label:after {
+.ui.tag.label::after {
   position: absolute;
   content: '';
   top: 50%;
@@ -256,15 +260,15 @@ a.ui.label {
           box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3);
   border-radius: 500rem;
 }
-.ui.basic.tag.labels .label:before,
+.ui.basic.tag.labels .label::before,
-.ui.basic.tag.label:before {
+.ui.basic.tag.label::before {
   border-color: inherit;
   border-width: 1px 0 0 1px;
   border-style: inherit;
   right: calc(100% + 1px);
 }
-.ui.basic.tag.labels .label:after,
+.ui.basic.tag.labels .label::after,
-.ui.basic.tag.label:after {
+.ui.basic.tag.label::after {
   -webkit-box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.8);
           box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.8);
 }
@@ -292,7 +296,7 @@ a.ui.label {
 .ui.corner.label {
   background-color: transparent !important;
 }
-.ui.corner.label:after {
+.ui.corner.label::after {
   position: absolute;
   content: "";
   right: 0;
@@ -312,20 +316,20 @@ a.ui.label {
 .ui.corner.label .icon {
   cursor: inherit;
   position: absolute;
-  top: 0.75em;
+  top: 0.64285714em;
   left: auto;
-  right: 0.66666667em;
+  right: 0.57142857em;
-  font-size: 1.16666667em;
+  font-size: 1.14285714em;
   margin: 0;
 }
 
 /* Left Corner */
 .ui.left.corner.label,
-.ui.left.corner.label:after {
+.ui.left.corner.label::after {
   right: auto;
   left: 0;
 }
-.ui.left.corner.label:after {
+.ui.left.corner.label::after {
   border-top: 4em solid transparent;
   border-right: 4em solid transparent;
   border-bottom: 0 solid transparent;
@@ -333,7 +337,7 @@ a.ui.label {
   border-top-color: inherit;
 }
 .ui.left.corner.label .icon {
-  left: 0.66666667em;
+  left: 0.57142857em;
   right: auto;
 }
 
@@ -357,10 +361,10 @@ a.ui.label {
   min-width: -webkit-max-content;
   min-width: -moz-max-content;
   min-width: max-content;
-  border-radius: 0 0.33333333rem 0.33333333rem 0;
+  border-radius: 0 0.28571429rem 0.28571429rem 0;
   border-color: rgba(0, 0, 0, 0.15);
 }
-.ui.ribbon.label:after {
+.ui.ribbon.label::after {
   position: absolute;
   content: '';
   top: 100%;
@@ -413,11 +417,11 @@ a.ui.label {
   text-align: left;
   -webkit-transform: translateX(-100%);
           transform: translateX(-100%);
-  border-radius: 0.33333333rem 0 0 0.33333333rem;
+  border-radius: 0.28571429rem 0 0 0.28571429rem;
 }
-.ui[class*="right ribbon"].label:after {
+.ui[class*="right ribbon"].label::after {
   left: auto;
-  right: -1px;
+  right: 0;
   border-style: solid;
   border-width: 1.2em 1.2em 0 0;
   border-color: transparent;
@@ -429,10 +433,6 @@ a.ui.label {
 .ui.card .image > .ribbon.label {
   position: absolute;
   top: 1rem;
-  z-index: 1;
-}
-.ui.card.loading .image > .ribbon.label {
-  z-index: 100;
 }
 .ui.card .image > .ui.ribbon.label,
 .ui.image > .ui.ribbon.label {
@@ -465,29 +465,29 @@ a.ui.label {
   top: 0;
   left: 0;
   padding: 0.75em 1em;
-  border-radius: 0.25rem 0.25rem 0 0;
+  border-radius: 0.21428571rem 0.21428571rem 0 0;
 }
 .ui[class*="bottom attached"].label {
   top: auto;
   bottom: 0;
-  border-radius: 0 0 0.25rem 0.25rem;
+  border-radius: 0 0 0.21428571rem 0.21428571rem;
 }
 .ui[class*="top left attached"].label {
   width: auto;
   margin-top: 0;
-  border-radius: 0.25rem 0 0.33333333rem 0;
+  border-radius: 0.21428571rem 0 0.28571429rem 0;
 }
 .ui[class*="top right attached"].label {
   width: auto;
   left: auto;
   right: 0;
-  border-radius: 0 0.25rem 0 0.33333333rem;
+  border-radius: 0 0.21428571rem 0 0.28571429rem;
 }
 .ui[class*="bottom left attached"].label {
   width: auto;
   top: auto;
   bottom: 0;
-  border-radius: 0 0.33333333rem 0 0.25rem;
+  border-radius: 0 0.28571429rem 0 0.21428571rem;
 }
 .ui[class*="bottom right attached"].label {
   top: auto;
@@ -495,7 +495,7 @@ a.ui.label {
   left: auto;
   right: 0;
   width: auto;
-  border-radius: 0.33333333rem 0 0.25rem 0;
+  border-radius: 0.28571429rem 0 0.21428571rem 0;
 }
 
 
@@ -523,8 +523,8 @@ a.ui.label:hover {
   background-image: none;
   color: rgba(0, 0, 0, 0.8);
 }
-.ui.labels a.label:hover:before,
+.ui.labels a.label:hover::before,
-a.ui.label:hover:before {
+a.ui.label:hover::before {
   color: rgba(0, 0, 0, 0.8);
 }
 
@@ -538,7 +538,7 @@ a.ui.label:hover:before {
   background-image: none;
   color: rgba(0, 0, 0, 0.95);
 }
-.ui.active.label:before {
+.ui.active.label::before {
   background-color: #D0D0D0;
   background-image: none;
   color: rgba(0, 0, 0, 0.95);
@@ -555,8 +555,8 @@ a.ui.active.label:hover {
   background-image: none;
   color: rgba(0, 0, 0, 0.95);
 }
-.ui.labels a.active.label:hover:before,
+.ui.labels a.active.label:hover::before,
-a.ui.active.label:hover:before {
+a.ui.active.label:hover::before {
   background-color: #C8C8C8;
   background-image: none;
   color: rgba(0, 0, 0, 0.95);
@@ -614,13 +614,13 @@ a.ui.active.label:hover:before {
 a.ui.basic.label:hover {
   text-decoration: none;
   background: none #FFFFFF;
-  color: #4d17c0;
+  color: #1e70bf;
   -webkit-box-shadow: none;
           box-shadow: none;
 }
 
 /* Pointing */
-.ui.basic.pointing.label:before {
+.ui.basic.pointing.label::before {
   border-color: inherit;
 }
 
@@ -659,7 +659,7 @@ a.ui.basic.label:hover {
   background: #1B1C1D;
 }
 .ui.inverted.basic.label:hover {
-  color: #6435C9;
+  color: #4183C4;
 }
 
 /*-------------------
@@ -668,36 +668,36 @@ a.ui.basic.label:hover {
 
 .ui.primary.labels .label,
 .ui.ui.ui.primary.label {
-  background-color: #6435C9;
+  background-color: #2185D0;
-  border-color: #6435C9;
+  border-color: #2185D0;
   color: rgba(255, 255, 255, 0.9);
 }
 
 /* Link */
 .ui.primary.labels a.label:hover,
 a.ui.ui.ui.primary.label:hover {
-  background-color: #5829bb;
+  background-color: #1678c2;
-  border-color: #5829bb;
+  border-color: #1678c2;
   color: #FFFFFF;
 }
 
 /* Ribbon */
 .ui.ui.ui.primary.ribbon.label {
-  border-color: #502aa1;
+  border-color: #1a69a4;
 }
 
 /* Basic */
 .ui.basic.labels .primary.label,
 .ui.ui.ui.basic.primary.label {
   background: none #FFFFFF;
-  border-color: #6435C9;
+  border-color: #2185D0;
-  color: #6435C9;
+  color: #2185D0;
 }
 .ui.basic.labels a.primary.label:hover,
 a.ui.ui.ui.basic.primary.label:hover {
   background: none #FFFFFF;
-  border-color: #5829bb;
+  border-color: #1678c2;
-  color: #5829bb;
+  color: #1678c2;
 }
 
 /* Inverted */
@@ -740,8 +740,8 @@ a.ui.ui.ui.inverted.basic.primary.label:hover {
 .ui.ui.ui.inverted.primary.basic.tag.label {
   border: 1px solid #54C8FF;
 }
-.ui.inverted.basic.tag.labels .primary.label:before,
+.ui.inverted.basic.tag.labels .primary.label::before,
-.ui.ui.ui.inverted.primary.basic.tag.label:before {
+.ui.ui.ui.inverted.primary.basic.tag.label::before {
   border-color: inherit;
   border-width: 1px 0 0 1px;
   border-style: inherit;
@@ -822,8 +822,8 @@ a.ui.ui.ui.inverted.basic.secondary.label:hover {
 .ui.ui.ui.inverted.secondary.basic.tag.label {
   border: 1px solid #545454;
 }
-.ui.inverted.basic.tag.labels .secondary.label:before,
+.ui.inverted.basic.tag.labels .secondary.label::before,
-.ui.ui.ui.inverted.secondary.basic.tag.label:before {
+.ui.ui.ui.inverted.secondary.basic.tag.label::before {
   border-color: inherit;
   border-width: 1px 0 0 1px;
   border-style: inherit;
@@ -904,8 +904,8 @@ a.ui.ui.ui.inverted.basic.red.label:hover {
 .ui.ui.ui.inverted.red.basic.tag.label {
   border: 1px solid #FF695E;
 }
-.ui.inverted.basic.tag.labels .red.label:before,
+.ui.inverted.basic.tag.labels .red.label::before,
-.ui.ui.ui.inverted.red.basic.tag.label:before {
+.ui.ui.ui.inverted.red.basic.tag.label::before {
   border-color: inherit;
   border-width: 1px 0 0 1px;
   border-style: inherit;
@@ -986,8 +986,8 @@ a.ui.ui.ui.inverted.basic.orange.label:hover {
 .ui.ui.ui.inverted.orange.basic.tag.label {
   border: 1px solid #FF851B;
 }
-.ui.inverted.basic.tag.labels .orange.label:before,
+.ui.inverted.basic.tag.labels .orange.label::before,
-.ui.ui.ui.inverted.orange.basic.tag.label:before {
+.ui.ui.ui.inverted.orange.basic.tag.label::before {
   border-color: inherit;
   border-width: 1px 0 0 1px;
   border-style: inherit;
@@ -1068,8 +1068,8 @@ a.ui.ui.ui.inverted.basic.yellow.label:hover {
 .ui.ui.ui.inverted.yellow.basic.tag.label {
   border: 1px solid #FFE21F;
 }
-.ui.inverted.basic.tag.labels .yellow.label:before,
+.ui.inverted.basic.tag.labels .yellow.label::before,
-.ui.ui.ui.inverted.yellow.basic.tag.label:before {
+.ui.ui.ui.inverted.yellow.basic.tag.label::before {
   border-color: inherit;
   border-width: 1px 0 0 1px;
   border-style: inherit;
@@ -1150,8 +1150,8 @@ a.ui.ui.ui.inverted.basic.olive.label:hover {
 .ui.ui.ui.inverted.olive.basic.tag.label {
   border: 1px solid #D9E778;
 }
-.ui.inverted.basic.tag.labels .olive.label:before,
+.ui.inverted.basic.tag.labels .olive.label::before,
-.ui.ui.ui.inverted.olive.basic.tag.label:before {
+.ui.ui.ui.inverted.olive.basic.tag.label::before {
   border-color: inherit;
   border-width: 1px 0 0 1px;
   border-style: inherit;
@@ -1232,8 +1232,8 @@ a.ui.ui.ui.inverted.basic.green.label:hover {
 .ui.ui.ui.inverted.green.basic.tag.label {
   border: 1px solid #2ECC40;
 }
-.ui.inverted.basic.tag.labels .green.label:before,
+.ui.inverted.basic.tag.labels .green.label::before,
-.ui.ui.ui.inverted.green.basic.tag.label:before {
+.ui.ui.ui.inverted.green.basic.tag.label::before {
   border-color: inherit;
   border-width: 1px 0 0 1px;
   border-style: inherit;
@@ -1314,8 +1314,8 @@ a.ui.ui.ui.inverted.basic.teal.label:hover {
 .ui.ui.ui.inverted.teal.basic.tag.label {
   border: 1px solid #6DFFFF;
 }
-.ui.inverted.basic.tag.labels .teal.label:before,
+.ui.inverted.basic.tag.labels .teal.label::before,
-.ui.ui.ui.inverted.teal.basic.tag.label:before {
+.ui.ui.ui.inverted.teal.basic.tag.label::before {
   border-color: inherit;
   border-width: 1px 0 0 1px;
   border-style: inherit;
@@ -1396,8 +1396,8 @@ a.ui.ui.ui.inverted.basic.blue.label:hover {
 .ui.ui.ui.inverted.blue.basic.tag.label {
   border: 1px solid #54C8FF;
 }
-.ui.inverted.basic.tag.labels .blue.label:before,
+.ui.inverted.basic.tag.labels .blue.label::before,
-.ui.ui.ui.inverted.blue.basic.tag.label:before {
+.ui.ui.ui.inverted.blue.basic.tag.label::before {
   border-color: inherit;
   border-width: 1px 0 0 1px;
   border-style: inherit;
@@ -1478,8 +1478,8 @@ a.ui.ui.ui.inverted.basic.violet.label:hover {
 .ui.ui.ui.inverted.violet.basic.tag.label {
   border: 1px solid #A291FB;
 }
-.ui.inverted.basic.tag.labels .violet.label:before,
+.ui.inverted.basic.tag.labels .violet.label::before,
-.ui.ui.ui.inverted.violet.basic.tag.label:before {
+.ui.ui.ui.inverted.violet.basic.tag.label::before {
   border-color: inherit;
   border-width: 1px 0 0 1px;
   border-style: inherit;
@@ -1560,8 +1560,8 @@ a.ui.ui.ui.inverted.basic.purple.label:hover {
 .ui.ui.ui.inverted.purple.basic.tag.label {
   border: 1px solid #DC73FF;
 }
-.ui.inverted.basic.tag.labels .purple.label:before,
+.ui.inverted.basic.tag.labels .purple.label::before,
-.ui.ui.ui.inverted.purple.basic.tag.label:before {
+.ui.ui.ui.inverted.purple.basic.tag.label::before {
   border-color: inherit;
   border-width: 1px 0 0 1px;
   border-style: inherit;
@@ -1642,8 +1642,8 @@ a.ui.ui.ui.inverted.basic.pink.label:hover {
 .ui.ui.ui.inverted.pink.basic.tag.label {
   border: 1px solid #FF8EDF;
 }
-.ui.inverted.basic.tag.labels .pink.label:before,
+.ui.inverted.basic.tag.labels .pink.label::before,
-.ui.ui.ui.inverted.pink.basic.tag.label:before {
+.ui.ui.ui.inverted.pink.basic.tag.label::before {
   border-color: inherit;
   border-width: 1px 0 0 1px;
   border-style: inherit;
@@ -1724,8 +1724,8 @@ a.ui.ui.ui.inverted.basic.brown.label:hover {
 .ui.ui.ui.inverted.brown.basic.tag.label {
   border: 1px solid #D67C1C;
 }
-.ui.inverted.basic.tag.labels .brown.label:before,
+.ui.inverted.basic.tag.labels .brown.label::before,
-.ui.ui.ui.inverted.brown.basic.tag.label:before {
+.ui.ui.ui.inverted.brown.basic.tag.label::before {
   border-color: inherit;
   border-width: 1px 0 0 1px;
   border-style: inherit;
@@ -1805,8 +1805,8 @@ a.ui.ui.ui.inverted.basic.grey.label:hover {
 .ui.ui.ui.inverted.grey.basic.tag.label {
   border: 1px solid #DCDDDE;
 }
-.ui.inverted.basic.tag.labels .grey.label:before,
+.ui.inverted.basic.tag.labels .grey.label::before,
-.ui.ui.ui.inverted.grey.basic.tag.label:before {
+.ui.ui.ui.inverted.grey.basic.tag.label::before {
   border-color: inherit;
   border-width: 1px 0 0 1px;
   border-style: inherit;
@@ -1886,8 +1886,8 @@ a.ui.ui.ui.inverted.basic.black.label:hover {
 .ui.ui.ui.inverted.black.basic.tag.label {
   border: 1px solid #545454;
 }
-.ui.inverted.basic.tag.labels .black.label:before,
+.ui.inverted.basic.tag.labels .black.label::before,
-.ui.ui.ui.inverted.black.basic.tag.label:before {
+.ui.ui.ui.inverted.black.basic.tag.label::before {
   border-color: inherit;
   border-width: 1px 0 0 1px;
   border-style: inherit;
@@ -1940,7 +1940,7 @@ a.ui.ui.ui.inverted.basic.black.label:hover {
 .ui.attached.pointing.label {
   position: absolute;
 }
-.ui.pointing.label:before {
+.ui.pointing.label::before {
   background-color: inherit;
   background-image: inherit;
   border-width: 0;
@@ -1949,7 +1949,7 @@ a.ui.ui.ui.inverted.basic.black.label:hover {
 }
 
 /* Arrow */
-.ui.pointing.label:before {
+.ui.pointing.label::before {
   position: absolute;
   content: '';
   -webkit-transform: rotate(45deg);
@@ -1968,8 +1968,8 @@ a.ui.ui.ui.inverted.basic.black.label:hover {
 .ui[class*="pointing above"].label {
   margin-top: 1em;
 }
-.ui.pointing.label:before,
+.ui.pointing.label::before,
-.ui[class*="pointing above"].label:before {
+.ui[class*="pointing above"].label::before {
   border-width: 1px 0 0 1px;
   -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
           transform: translateX(-50%) translateY(-50%) rotate(45deg);
@@ -1984,8 +1984,8 @@ a.ui.ui.ui.inverted.basic.black.label:hover {
   margin-top: 0;
   margin-bottom: 1em;
 }
-.ui[class*="bottom pointing"].label:before,
+.ui[class*="bottom pointing"].label::before,
-.ui[class*="pointing below"].label:before {
+.ui[class*="pointing below"].label::before {
   border-width: 0 1px 1px 0;
   top: auto;
   right: auto;
@@ -2001,7 +2001,7 @@ a.ui.ui.ui.inverted.basic.black.label:hover {
   margin-top: 0;
   margin-left: 0.6666em;
 }
-.ui[class*="left pointing"].label:before {
+.ui[class*="left pointing"].label::before {
   border-width: 0 0 1px 1px;
   -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
           transform: translateX(-50%) translateY(-50%) rotate(45deg);
@@ -2017,7 +2017,7 @@ a.ui.ui.ui.inverted.basic.black.label:hover {
   margin-top: 0;
   margin-right: 0.6666em;
 }
-.ui[class*="right pointing"].label:before {
+.ui[class*="right pointing"].label::before {
   border-width: 1px 1px 0 0;
   -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg);
           transform: translateX(50%) translateY(-50%) rotate(45deg);
@@ -2031,15 +2031,15 @@ a.ui.ui.ui.inverted.basic.black.label:hover {
 
 /*--- Above ---*/
 
-.ui.basic.pointing.label:before,
+.ui.basic.pointing.label::before,
-.ui.basic[class*="pointing above"].label:before {
+.ui.basic[class*="pointing above"].label::before {
   margin-top: -1px;
 }
 
 /*--- Below ---*/
 
-.ui.basic[class*="bottom pointing"].label:before,
+.ui.basic[class*="bottom pointing"].label::before,
-.ui.basic[class*="pointing below"].label:before {
+.ui.basic[class*="pointing below"].label::before {
   bottom: auto;
   top: 100%;
   margin-top: 1px;
@@ -2047,14 +2047,14 @@ a.ui.ui.ui.inverted.basic.black.label:hover {
 
 /*--- Left ---*/
 
-.ui.basic[class*="left pointing"].label:before {
+.ui.basic[class*="left pointing"].label::before {
   top: 50%;
   left: -1px;
 }
 
 /*--- Right ---*/
 
-.ui.basic[class*="right pointing"].label:before {
+.ui.basic[class*="right pointing"].label::before {
   top: 50%;
   right: -1px;
 }
@@ -2097,19 +2097,19 @@ a.ui.ui.ui.inverted.basic.black.label:hover {
 
 .ui.labels .label,
 .ui.label {
-  font-size: 1rem;
+  font-size: 0.85714286rem;
 }
 .ui.mini.labels .label,
 .ui.mini.label {
-  font-size: 0.75rem;
+  font-size: 0.64285714rem;
 }
 .ui.tiny.labels .label,
 .ui.tiny.label {
-  font-size: 0.83333333rem;
+  font-size: 0.71428571rem;
 }
 .ui.small.labels .label,
 .ui.small.label {
-  font-size: 0.91666667rem;
+  font-size: 0.78571429rem;
 }
 .ui.large.labels .label,
 .ui.large.label {
@@ -2117,15 +2117,15 @@ a.ui.ui.ui.inverted.basic.black.label:hover {
 }
 .ui.big.labels .label,
 .ui.big.label {
-  font-size: 1.25rem;
+  font-size: 1.28571429rem;
 }
 .ui.huge.labels .label,
 .ui.huge.label {
-  font-size: 1.41666667rem;
+  font-size: 1.42857143rem;
 }
 .ui.massive.labels .label,
 .ui.massive.label {
-  font-size: 1.75rem;
+  font-size: 1.71428571rem;
 }
 
 

semantic/dist/components/list.css

@@ -48,13 +48,13 @@ ol.ui.list li,
   table-layout: fixed;
   list-style-type: none;
   list-style-position: outside;
-  padding: 0.25em 0;
+  padding: 0.21428571em 0;
-  line-height: 1.16666667em;
+  line-height: 1.14285714em;
 }
-ul.ui.list > li:first-child:after,
+ul.ui.list > li:first-child::after,
-ol.ui.list > li:first-child:after,
+ol.ui.list > li:first-child::after,
-.ui.list > .list > .item:after,
+.ui.list > .list > .item::after,
-.ui.list > .item:after {
+.ui.list > .item::after {
   content: '';
   display: block;
   height: 0;
@@ -87,7 +87,7 @@ ol.ui.list ol,
 ul.ui.list ul li,
 ol.ui.list ol li,
 .ui.list .list > .item {
-  padding: 0.16666667em 0;
+  padding: 0.14285714em 0;
   line-height: inherit;
 }
 
@@ -103,7 +103,7 @@ ol.ui.list ol li,
 }
 .ui.list .list > .item > i.icon:not(.loading),
 .ui.list > .item > i.icon:not(.loading) {
-  padding-right: 0.33333333em;
+  padding-right: 0.28571429em;
   vertical-align: top;
 }
 .ui.list .list > .item > i.icon:only-child,
@@ -139,7 +139,7 @@ ol.ui.list ol li,
 /* Content */
 .ui.list .list > .item > .content,
 .ui.list > .item > .content {
-  line-height: 1.16666667em;
+  line-height: 1.14285714em;
   color: rgba(0, 0, 0, 0.87);
 }
 .ui.list .list > .item > .image + .content,
@@ -153,7 +153,7 @@ ol.ui.list ol li,
 }
 .ui.list .list > .item > i.loading.icon + .content,
 .ui.list > .item > i.loading.icon + .content {
-  padding-left: calc(0.3333333333333333em + 0.5em);
+  padding-left: calc(0.2857142857142857em + 0.5em);
 }
 .ui.list .list > .item > img.image + .content,
 .ui.list > .item > img.image + .content {
@@ -193,11 +193,11 @@ ol.ui.list ol li,
 .ui.list .list > a.item,
 .ui.list > a.item {
   cursor: pointer;
-  color: #6435C9;
+  color: #4183C4;
 }
 .ui.list .list > a.item:hover,
 .ui.list > a.item:hover {
-  color: #4d17c0;
+  color: #1e70bf;
 }
 
 /* Linked Item Icons */
@@ -212,11 +212,11 @@ ol.ui.list ol li,
 .ui.list .list > .item a.header,
 .ui.list > .item a.header {
   cursor: pointer;
-  color: #6435C9 !important;
+  color: #4183C4 !important;
 }
 .ui.list .list > .item > a.header:hover,
 .ui.list > .item > a.header:hover {
-  color: #4d17c0 !important;
+  color: #1e70bf !important;
 }
 
 /* Floated Content */
@@ -249,11 +249,11 @@ ol.ui.list ol li,
   background-color: transparent;
   list-style-type: none;
   list-style-position: outside;
-  padding: 0.25em 0;
+  padding: 0.21428571em 0;
-  line-height: 1.16666667em;
+  line-height: 1.14285714em;
 }
-.ui.menu .ui.list .list > .item:before,
+.ui.menu .ui.list .list > .item::before,
-.ui.menu .ui.list > .item:before {
+.ui.menu .ui.list > .item::before {
   border: none;
   background: none;
 }
@@ -305,8 +305,8 @@ ol.ui.list ol li,
 /* Padding on all elements */
 .ui.horizontal.list > .item:first-child,
 .ui.horizontal.list > .item:last-child {
-  padding-top: 0.25em;
+  padding-top: 0.21428571em;
-  padding-bottom: 0.25em;
+  padding-bottom: 0.21428571em;
 }
 
 /* Horizontal List */
@@ -392,7 +392,7 @@ ol.ui.list ol li,
 }
 .ui.inverted.list .list > a.item:hover,
 .ui.inverted.list > a.item:hover {
-  color: #4d17c0;
+  color: #1e70bf;
 }
 
 /* Linking Content */
@@ -400,7 +400,7 @@ ol.ui.list ol li,
   color: rgba(255, 255, 255, 0.9) !important;
 }
 .ui.inverted.list .item a:not(.ui):hover {
-  color: #4d17c0 !important;
+  color: #1e70bf !important;
 }
 
 /*-------------------
@@ -567,9 +567,9 @@ ul.ui.list li,
 .ui.bulleted.list > .item {
   position: relative;
 }
-ul.ui.list li:before,
+ul.ui.list li::before,
-.ui.bulleted.list .list > .item:before,
+.ui.bulleted.list .list > .item::before,
-.ui.bulleted.list > .item:before {
+.ui.bulleted.list > .item::before {
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
@@ -585,9 +585,9 @@ ul.ui.list li:before,
   color: inherit;
   vertical-align: top;
 }
-ul.ui.list li:before,
+ul.ui.list li::before,
-.ui.bulleted.list .list > a.item:before,
+.ui.bulleted.list .list > a.item::before,
-.ui.bulleted.list > a.item:before {
+.ui.bulleted.list > a.item::before {
   color: rgba(0, 0, 0, 0.87);
 }
 ul.ui.list ul,
@@ -635,9 +635,9 @@ ol.ui.list li,
   list-style-type: none;
   position: relative;
 }
-ol.ui.list li:before,
+ol.ui.list li::before,
-.ui.ordered.list .list > .item:before,
+.ui.ordered.list .list > .item::before,
-.ui.ordered.list > .item:before {
+.ui.ordered.list > .item::before {
   position: absolute;
   top: auto;
   left: auto;
@@ -654,18 +654,18 @@ ol.ui.list li:before,
   vertical-align: middle;
   opacity: 0.8;
 }
-ol.ui.inverted.list li:before,
+ol.ui.inverted.list li::before,
-.ui.ordered.inverted.list .list > .item:before,
+.ui.ordered.inverted.list .list > .item::before,
-.ui.ordered.inverted.list > .item:before {
+.ui.ordered.inverted.list > .item::before {
   color: rgba(255, 255, 255, 0.7);
 }
 
 /* Value */
-.ui.ordered.list .list > .item[data-value]:before,
+.ui.ordered.list .list > .item[data-value]::before,
-.ui.ordered.list > .item[data-value]:before {
+.ui.ordered.list > .item[data-value]::before {
   content: attr(data-value);
 }
-ol.ui.list li[value]:before {
+ol.ui.list li[value]::before {
   content: attr(value);
 }
 
@@ -674,8 +674,8 @@ ol.ui.list ol,
 .ui.ordered.list .list:not(.icon) {
   margin-left: 1em;
 }
-ol.ui.list ol li:before,
+ol.ui.list ol li::before,
-.ui.ordered.list .list > .item:before {
+.ui.ordered.list .list > .item::before {
   margin-left: -2em;
 }
 
@@ -684,17 +684,17 @@ ol.ui.horizontal.list,
 .ui.ordered.horizontal.list {
   margin-left: 0;
 }
-ol.ui.horizontal.list li:before,
+ol.ui.horizontal.list li::before,
-.ui.ordered.horizontal.list .list > .item:before,
+.ui.ordered.horizontal.list .list > .item::before,
-.ui.ordered.horizontal.list > .item:before {
+.ui.ordered.horizontal.list > .item::before {
   position: static;
   margin: 0 0.5em 0 0;
 }
 
 /* Suffixed Ordered */
-ol.ui.suffixed.list li:before,
+ol.ui.suffixed.list li::before,
-.ui.suffixed.ordered.list .list > .item:before,
+.ui.suffixed.ordered.list .list > .item::before,
-.ui.suffixed.ordered.list > .item:before {
+.ui.suffixed.ordered.list > .item::before {
   content: counters(ordered, ".") ".";
 }
 
@@ -742,7 +742,7 @@ ol.ui.suffixed.list li:before,
 .ui.divided.ordered.list .item .list:not(.icon) {
   margin-left: 0;
   margin-right: 0;
-  padding-bottom: 0.25em;
+  padding-bottom: 0.21428571em;
 }
 .ui.divided.ordered.list .item .list > .item {
   padding-left: 1em;
@@ -799,8 +799,8 @@ ol.ui.suffixed.list li:before,
 /* Padding on all elements */
 .ui.celled.list > .item:first-child,
 .ui.celled.list > .item:last-child {
-  padding-top: 0.25em;
+  padding-top: 0.21428571em;
-  padding-bottom: 0.25em;
+  padding-bottom: 0.21428571em;
 }
 
 /* Sub Menu */
@@ -822,7 +822,7 @@ ol.ui.suffixed.list li:before,
 .ui.celled.bulleted.list .item .list:not(.icon) {
   margin-left: -1.25rem;
   margin-right: -1.25rem;
-  padding-bottom: 0.25em;
+  padding-bottom: 0.21428571em;
 }
 
 /* Celled Ordered */
@@ -836,7 +836,7 @@ ol.ui.suffixed.list li:before,
 .ui.celled.ordered.list .item .list:not(.icon) {
   margin-left: 0;
   margin-right: 0;
-  padding-bottom: 0.25em;
+  padding-bottom: 0.21428571em;
 }
 .ui.celled.ordered.list .list > .item {
   padding-left: 1em;
@@ -876,10 +876,10 @@ ol.ui.suffixed.list li:before,
   --------------------*/
 
 .ui.relaxed.list:not(.horizontal) > .item:not(:first-child) {
-  padding-top: 0.5em;
+  padding-top: 0.42857143em;
 }
 .ui.relaxed.list:not(.horizontal) > .item:not(:last-child) {
-  padding-bottom: 0.5em;
+  padding-bottom: 0.42857143em;
 }
 .ui.horizontal.relaxed.list .list > .item:not(:first-child),
 .ui.horizontal.relaxed.list > .item:not(:first-child) {
@@ -892,10 +892,10 @@ ol.ui.suffixed.list li:before,
 
 /* Very Relaxed */
 .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:first-child) {
-  padding-top: 1em;
+  padding-top: 0.85714286em;
 }
 .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:last-child) {
-  padding-bottom: 1em;
+  padding-bottom: 0.85714286em;
 }
 .ui.horizontal[class*="very relaxed"].list .list > .item:not(:first-child),
 .ui.horizontal[class*="very relaxed"].list > .item:not(:first-child) {
@@ -914,53 +914,53 @@ ol.ui.suffixed.list li:before,
   font-size: 1em;
 }
 .ui.mini.list {
-  font-size: 0.75em;
+  font-size: 0.78571429em;
 }
 .ui.mini.horizontal.list .list > .item,
 .ui.mini.horizontal.list > .item {
-  font-size: 0.75rem;
+  font-size: 0.78571429rem;
 }
 .ui.tiny.list {
-  font-size: 0.83333333em;
+  font-size: 0.85714286em;
 }
 .ui.tiny.horizontal.list .list > .item,
 .ui.tiny.horizontal.list > .item {
-  font-size: 0.83333333rem;
+  font-size: 0.85714286rem;
 }
 .ui.small.list {
-  font-size: 0.91666667em;
+  font-size: 0.92857143em;
 }
 .ui.small.horizontal.list .list > .item,
 .ui.small.horizontal.list > .item {
-  font-size: 0.91666667rem;
+  font-size: 0.92857143rem;
 }
 .ui.large.list {
-  font-size: 1.16666667em;
+  font-size: 1.14285714em;
 }
 .ui.large.horizontal.list .list > .item,
 .ui.large.horizontal.list > .item {
-  font-size: 1.16666667rem;
+  font-size: 1.14285714rem;
 }
 .ui.big.list {
-  font-size: 1.25em;
+  font-size: 1.28571429em;
 }
 .ui.big.horizontal.list .list > .item,
 .ui.big.horizontal.list > .item {
-  font-size: 1.25rem;
+  font-size: 1.28571429rem;
 }
 .ui.huge.list {
-  font-size: 1.41666667em;
+  font-size: 1.42857143em;
 }
 .ui.huge.horizontal.list .list > .item,
 .ui.huge.horizontal.list > .item {
-  font-size: 1.41666667rem;
+  font-size: 1.42857143rem;
 }
 .ui.massive.list {
-  font-size: 1.75em;
+  font-size: 1.71428571em;
 }
 .ui.massive.horizontal.list .list > .item,
 .ui.massive.horizontal.list > .item {
-  font-size: 1.75rem;
+  font-size: 1.71428571rem;
 }
 
 

semantic/dist/components/menu.css

@@ -30,10 +30,10 @@
   border: 1px solid rgba(34, 36, 38, 0.15);
   -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
           box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
-  min-height: 2.83333333em;
+  min-height: 2.85714286em;
 }
-.ui.menu:after {
+.ui.menu::after {
   content: '';
   display: block;
   height: 0;
@@ -86,7 +86,7 @@
       -ms-user-select: none;
           user-select: none;
   background: none;
-  padding: 0.91666667em 1.16666667em;
+  padding: 0.92857143em 1.14285714em;
   text-transform: none;
   color: rgba(0, 0, 0, 0.87);
   font-weight: normal;
@@ -96,11 +96,11 @@
   transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease, -webkit-box-shadow 0.1s ease;
 }
 .ui.menu > .item:first-child {
-  border-radius: 0.33333333rem 0 0 0.33333333rem;
+  border-radius: 0.28571429rem 0 0 0.28571429rem;
 }
 
 /* Border */
-.ui.menu .item:before {
+.ui.menu .item::before {
   position: absolute;
   content: '';
   top: 0;
@@ -137,7 +137,7 @@
 .ui.menu .item > i.icon {
   opacity: 0.9;
   float: none;
-  margin: 0 0.41666667em 0 0;
+  margin: 0 0.35714286em 0 0;
 }
 
 /*--------------
@@ -148,8 +148,8 @@
   position: relative;
   top: 0;
   margin: -0.5em 0;
-  padding-bottom: 0.75em;
+  padding-bottom: 0.78571429em;
-  padding-top: 0.75em;
+  padding-top: 0.78571429em;
   font-size: 1em;
 }
 
@@ -185,8 +185,8 @@
 }
 .ui.menu .item > .input input {
   font-size: 1em;
-  padding-top: 0.66666667em;
+  padding-top: 0.57142857em;
-  padding-bottom: 0.66666667em;
+  padding-bottom: 0.57142857em;
 }
 
 /*--------------
@@ -221,7 +221,7 @@
 /* Menu */
 .ui.menu .dropdown.item .menu {
   min-width: calc(100% - 1px);
-  border-radius: 0 0 0.33333333rem 0.33333333rem;
+  border-radius: 0 0 0.28571429rem 0.28571429rem;
   background: #FFFFFF;
   margin: 0 0 0;
   -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
@@ -239,7 +239,7 @@
   margin: 0;
   text-align: left;
   font-size: 1em !important;
-  padding: 0.75em 1.16666667em !important;
+  padding: 0.78571429em 1.14285714em !important;
   background: transparent !important;
   color: rgba(0, 0, 0, 0.87) !important;
   text-transform: none !important;
@@ -276,8 +276,8 @@
 /* Secondary */
 .ui.secondary.menu .dropdown.item > .menu,
 .ui.text.menu .dropdown.item > .menu {
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
-  margin-top: 0.41666667em;
+  margin-top: 0.35714286em;
 }
 
 /* Pointing */
@@ -308,7 +308,7 @@
   margin: 0 0 0 0;
   -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
           box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
-  border-radius: 0 0.33333333rem 0.33333333rem 0.33333333rem;
+  border-radius: 0 0.28571429rem 0.28571429rem 0.28571429rem;
 }
 .ui.vertical.menu .dropdown.item.upward .menu {
   bottom: 0;
@@ -336,15 +336,15 @@
 
 .ui.menu .item > .label:not(.floating) {
   margin-left: 1em;
-  padding: 0.3em 0.75em;
+  padding: 0.3em 0.78571429em;
 }
 .ui.vertical.menu .item > .label {
   margin-top: -0.15em;
   margin-bottom: -0.15em;
-  padding: 0.3em 0.75em;
+  padding: 0.3em 0.78571429em;
 }
 .ui.menu .item > .floating.label {
-  padding: 0.3em 0.75em;
+  padding: 0.3em 0.78571429em;
 }
 .ui.menu .item > .label {
   background: #999999;
@@ -382,8 +382,8 @@
 ---------------*/
 
 
-/* Menu divider shouldnt apply */
+/* Menu divider shouldn't apply */
-.ui.menu .list .item:before {
+.ui.menu .list .item::before {
   background: none !important;
 }
 
@@ -393,7 +393,7 @@
 
 
 /* Show vertical dividers below last */
-.ui.vertical.sidebar.menu > .item:first-child:before {
+.ui.vertical.sidebar.menu > .item:first-child::before {
   display: block !important;
 }
 .ui.vertical.sidebar.menu > .item::before {
@@ -568,10 +568,10 @@ Floated Menu / Item
   border-right: none;
 }
 .ui.vertical.menu > .item:first-child {
-  border-radius: 0.33333333rem 0.33333333rem 0 0;
+  border-radius: 0.28571429rem 0.28571429rem 0 0;
 }
 .ui.vertical.menu > .item:last-child {
-  border-radius: 0 0 0.33333333rem 0.33333333rem;
+  border-radius: 0 0 0.28571429rem 0.28571429rem;
 }
 
 /*--- Label ---*/
@@ -596,7 +596,7 @@ Floated Menu / Item
 
 /*--- Border ---*/
 
-.ui.vertical.menu .item:before {
+.ui.vertical.menu .item::before {
   position: absolute;
   content: '';
   top: 0;
@@ -605,26 +605,26 @@ Floated Menu / Item
   height: 1px;
   background: rgba(34, 36, 38, 0.1);
 }
-.ui.vertical.menu .item:first-child:before {
+.ui.vertical.menu .item:first-child::before {
   display: none !important;
 }
 
 /*--- Sub Menu ---*/
 
 .ui.vertical.menu .item > .menu {
-  margin: 0.5em -1.16666667em 0;
+  margin: 0.5em -1.14285714em 0;
 }
 .ui.vertical.menu .menu .item {
   background: none;
-  padding: 0.5em 1.36111111em;
+  padding: 0.5em 1.33333333em;
-  font-size: 0.83333333em;
+  font-size: 0.85714286em;
   color: rgba(0, 0, 0, 0.5);
 }
 .ui.vertical.menu .item .menu a.item:hover,
 .ui.vertical.menu .item .menu .link.item:hover {
   color: rgba(0, 0, 0, 0.85);
 }
-.ui.vertical.menu .menu .item:before {
+.ui.vertical.menu .menu .item::before {
   display: none;
 }
 
@@ -636,13 +636,13 @@ Floated Menu / Item
           box-shadow: none;
 }
 .ui.vertical.menu > .active.item:first-child {
-  border-radius: 0.33333333rem 0.33333333rem 0 0;
+  border-radius: 0.28571429rem 0.28571429rem 0 0;
 }
 .ui.vertical.menu > .active.item:last-child {
-  border-radius: 0 0 0.33333333rem 0.33333333rem;
+  border-radius: 0 0 0.28571429rem 0.28571429rem;
 }
 .ui.vertical.menu > .active.item:only-child {
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
 }
 .ui.vertical.menu .active.item .menu .active.item {
   border-left: none;
@@ -674,10 +674,10 @@ Floated Menu / Item
   border-left: 1px solid transparent;
   border-right: 1px solid transparent;
   border-top: 2px solid transparent;
-  padding: 0.91666667em 1.41666667em;
+  padding: 0.92857143em 1.42857143em;
   color: rgba(0, 0, 0, 0.87);
 }
-.ui.tabular.menu .item:before {
+.ui.tabular.menu .item::before {
   display: none;
 }
 
@@ -697,12 +697,14 @@ Floated Menu / Item
   margin-bottom: -1px;
   -webkit-box-shadow: none;
           box-shadow: none;
-  border-radius: 0.33333333rem 0.33333333rem 0 0 !important;
+  border-radius: 0.28571429rem 0.28571429rem 0 0 !important;
+}
+.ui.tabular.menu .active.item:hover {
+  cursor: default;
 }
 
 /* Coupling with segment for attachment */
-.ui.tabular.menu + .attached:not(.top).segment,
+.ui.tabular.menu ~ .attached:not(.top).segment {
-.ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment {
   border-top: none;
   margin-left: 0;
   margin-top: 0;
@@ -736,7 +738,7 @@ Floated Menu / Item
   color: rgba(0, 0, 0, 0.95);
   border-color: #D4D4D5;
   margin: -1px 0 0 0;
-  border-radius: 0 0 0.33333333rem 0.33333333rem !important;
+  border-radius: 0 0 0.28571429rem 0.28571429rem !important;
 }
 
 /* Vertical Tabular (Left) */
@@ -760,7 +762,7 @@ Floated Menu / Item
   color: rgba(0, 0, 0, 0.95);
   border-color: #D4D4D5;
   margin: 0 -1px 0 0;
-  border-radius: 0.33333333rem 0 0 0.33333333rem !important;
+  border-radius: 0.28571429rem 0 0 0.28571429rem !important;
 }
 
 /* Vertical Right Tabular */
@@ -785,7 +787,7 @@ Floated Menu / Item
   color: rgba(0, 0, 0, 0.95);
   border-color: #D4D4D5;
   margin: 0 0 0 -1px;
-  border-radius: 0 0.33333333rem 0.33333333rem 0 !important;
+  border-radius: 0 0.28571429rem 0.28571429rem 0 !important;
 }
 
 /* Dropdown */
@@ -796,6 +798,16 @@ Floated Menu / Item
   border-top: 2px solid transparent;
   border-bottom: none;
 }
+.ui.inverted.tabular.menu .active.item,
+.ui.inverted.tabular.menu .active.item:hover {
+  background: none #1B1C1D;
+  border-color: #555555;
+}
+.ui.inverted.tabular.menu .item:not(.active):hover {
+  color: #ffffff;
+  background: transparent;
+  cursor: pointer;
+}
 
 /*--------------
      Pagination
@@ -809,12 +821,12 @@ Floated Menu / Item
   vertical-align: middle;
 }
 .ui.pagination.menu .item:last-child {
-  border-radius: 0 0.33333333rem 0.33333333rem 0;
+  border-radius: 0 0.28571429rem 0.28571429rem 0;
 }
 .ui.compact.menu .item:last-child {
-  border-radius: 0 0.33333333rem 0.33333333rem 0;
+  border-radius: 0 0.28571429rem 0.28571429rem 0;
 }
-.ui.pagination.menu .item:last-child:before {
+.ui.pagination.menu .item:last-child::before {
   display: none;
 }
 .ui.pagination.menu .item {
@@ -828,7 +840,7 @@ Floated Menu / Item
 /* Active */
 .ui.pagination.menu .active.item {
   border-top: none;
-  padding-top: 0.91666667em;
+  padding-top: 0.92857143em;
   background-color: rgba(0, 0, 0, 0.05);
   color: rgba(0, 0, 0, 0.95);
   -webkit-box-shadow: none;
@@ -841,8 +853,8 @@ Floated Menu / Item
 
 .ui.secondary.menu {
   background: none;
-  margin-left: -0.41666667em;
+  margin-left: -0.35714286em;
-  margin-right: -0.41666667em;
+  margin-right: -0.35714286em;
   border-radius: 0;
   border: none;
   -webkit-box-shadow: none;
@@ -856,16 +868,16 @@ Floated Menu / Item
   -webkit-box-shadow: none;
           box-shadow: none;
   border: none;
-  padding: 0.75em 0.91666667em;
+  padding: 0.78571429em 0.92857143em;
-  margin: 0 0.41666667em;
+  margin: 0 0.35714286em;
   background: none;
   -webkit-transition: color 0.1s ease;
   transition: color 0.1s ease;
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
 }
 
 /* No Divider */
-.ui.secondary.menu .item:before {
+.ui.secondary.menu .item::before {
   display: none !important;
 }
 
@@ -895,7 +907,7 @@ Floated Menu / Item
           box-shadow: none;
   background: rgba(0, 0, 0, 0.05);
   color: rgba(0, 0, 0, 0.95);
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
 }
 
 /* Active Hover */
@@ -942,16 +954,16 @@ Floated Menu / Item
 
 /* Sub Menu */
 .ui.vertical.secondary.menu .item:not(.dropdown) > .menu {
-  margin: 0 -0.91666667em;
+  margin: 0 -0.92857143em;
 }
 .ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item {
   margin: 0;
-  padding: 0.58333333em 1.36111111em;
+  padding: 0.5em 1.33333333em;
 }
 .ui.secondary.vertical.menu > .item {
   border: none;
-  margin: 0 0 0.41666667em;
+  margin: 0 0 0.35714286em;
-  border-radius: 0.33333333rem !important;
+  border-radius: 0.28571429rem !important;
 }
 .ui.secondary.vertical.menu > .header.item {
   border-radius: 0;
@@ -983,7 +995,7 @@ Floated Menu / Item
   -ms-flex-item-align: end;
       align-self: flex-end;
   margin: 0 0 -2px;
-  padding: 0.83333333em 1.16666667em;
+  padding: 0.85714286em 1.14285714em;
   border-bottom-width: 2px;
   -webkit-transition: color 0.1s ease;
   transition: color 0.1s ease;
@@ -1008,7 +1020,7 @@ Floated Menu / Item
   -webkit-box-shadow: none !important;
           box-shadow: none !important;
 }
-.ui.secondary.pointing.menu .item:after {
+.ui.secondary.pointing.menu .item::after {
   display: none;
 }
 
@@ -1104,7 +1116,7 @@ Floated Menu / Item
   -webkit-box-shadow: none;
           box-shadow: none;
   border: none;
-  margin: 1em -0.58333333em;
+  margin: 1em -0.5em;
 }
 .ui.text.menu .item {
   border-radius: 0;
@@ -1113,7 +1125,7 @@ Floated Menu / Item
   -ms-flex-item-align: center;
       align-self: center;
   margin: 0 0;
-  padding: 0.41666667em 0.58333333em;
+  padding: 0.35714286em 0.5em;
   font-weight: normal;
   color: rgba(0, 0, 0, 0.6);
   -webkit-transition: opacity 0.1s ease;
@@ -1121,8 +1133,8 @@ Floated Menu / Item
 }
 
 /* Border */
-.ui.text.menu .item:before,
+.ui.text.menu .item::before,
-.ui.text.menu .menu .item:before {
+.ui.text.menu .menu .item::before {
   display: none !important;
 }
 
@@ -1131,7 +1143,7 @@ Floated Menu / Item
   background-color: transparent;
   opacity: 1;
   color: rgba(0, 0, 0, 0.85);
-  font-size: 0.91666667em;
+  font-size: 0.92857143em;
   text-transform: uppercase;
   font-weight: bold;
 }
@@ -1159,16 +1171,16 @@ Floated Menu / Item
   margin-bottom: 0;
 }
 .ui.vertical.text.menu .item {
-  margin: 0.66666667em 0;
+  margin: 0.57142857em 0;
   padding-left: 0;
   padding-right: 0;
 }
 .ui.vertical.text.menu .item > i.icon {
   float: none;
-  margin: 0 0.41666667em 0 0;
+  margin: 0 0.35714286em 0 0;
 }
 .ui.vertical.text.menu .header.item {
-  margin: 0.66666667em 0 0.83333333em;
+  margin: 0.57142857em 0 0.71428571em;
 }
 
 /* Vertical Sub Menu */
@@ -1177,7 +1189,7 @@ Floated Menu / Item
 }
 .ui.vertical.text.menu .item:not(.dropdown) > .menu > .item {
   margin: 0;
-  padding: 0.58333333em 0;
+  padding: 0.5em 0;
 }
 
 /*--- hover ---*/
@@ -1205,7 +1217,7 @@ Floated Menu / Item
 }
 
 /* Disable Bariations */
-.ui.text.pointing.menu .active.item:after {
+.ui.text.pointing.menu .active.item::after {
   -webkit-box-shadow: none;
           box-shadow: none;
 }
@@ -1229,8 +1241,8 @@ Floated Menu / Item
 }
 
 /*--------------
-    Icon Only
+      Icon Only
----------------*/
+  ---------------*/
 
 
 /* Vertical Menu */
@@ -1252,8 +1264,8 @@ Floated Menu / Item
   opacity: 1;
 }
 
-/* Icon Gylph */
+/* Icon Glyph */
-.ui.icon.menu i.icon:before {
+.ui.icon.menu i.icon::before {
   opacity: 1;
 }
 
@@ -1299,7 +1311,7 @@ Floated Menu / Item
 .ui.labeled.icon.menu > .item > i.icon:not(.dropdown) {
   height: 1em;
   display: block;
-  font-size: 1.75em !important;
+  font-size: 1.71428571em !important;
   margin: 0 auto 0.5rem !important;
 }
 
@@ -1325,10 +1337,13 @@ Floated Menu / Item
         -ms-flex-direction: column;
             flex-direction: column;
   }
+  .ui.stackable.menu.pointing .active.item::after {
+    display: none;
+  }
   .ui.stackable.menu .item {
     width: 100% !important;
   }
-  .ui.stackable.menu .item:before {
+  .ui.stackable.menu .item::before {
     position: absolute;
     content: '';
     top: auto;
@@ -1368,7 +1383,7 @@ Floated Menu / Item
 .ui.ui.ui.menu .primary.active.item,
 .ui.ui.primary.menu .active.item:hover,
 .ui.ui.primary.menu .active.item {
-  color: #6435C9;
+  color: #2185D0;
 }
 .ui.ui.ui.menu .red.active.item,
 .ui.ui.red.menu .active.item:hover,
@@ -1459,10 +1474,10 @@ Floated Menu / Item
 
 /*--- Border ---*/
 
-.ui.inverted.menu .item:before {
+.ui.inverted.menu .item::before {
   background: rgba(255, 255, 255, 0.08);
 }
-.ui.vertical.inverted.menu .item:before {
+.ui.vertical.inverted.menu .item::before {
   background: rgba(255, 255, 255, 0.08);
 }
 
@@ -1518,7 +1533,7 @@ Floated Menu / Item
   background: transparent;
   color: #FFFFFF;
 }
-.ui.inverted.pointing.menu .active.item:after {
+.ui.inverted.pointing.menu .active.item::after {
   background: #3D3E3F;
   margin: 0 !important;
   -webkit-box-shadow: none !important;
@@ -1532,7 +1547,7 @@ Floated Menu / Item
   background: #3D3E3F;
   color: #FFFFFF !important;
 }
-.ui.inverted.pointing.menu .active.item:hover:after {
+.ui.inverted.pointing.menu .active.item:hover::after {
   background: #3D3E3F;
 }
 
@@ -1544,13 +1559,22 @@ Floated Menu / Item
   float: left;
   margin: 0 0.5rem 0 0;
 }
-.ui.floated.menu .item:last-child:before {
+.ui.floated.menu .item:last-child::before {
   display: none;
 }
 .ui.right.floated.menu {
   float: right;
   margin: 0 0 0 0.5rem;
 }
+.ui.center.aligned.menu,
+.ui.centered.menu {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  margin-left: 50%;
+}
 
 /*--------------
       Inverted
@@ -1558,22 +1582,22 @@ Floated Menu / Item
 
 .ui.ui.ui.inverted.menu .primary.active.item,
 .ui.ui.inverted.primary.menu {
-  background-color: #6435C9;
+  background-color: #2185D0;
 }
-.ui.inverted.primary.menu .item:before {
+.ui.inverted.primary.menu .item::before {
   background-color: rgba(34, 36, 38, 0.1);
 }
 .ui.ui.inverted.primary.menu .active.item {
   background-color: rgba(0, 0, 0, 0.1);
 }
 .ui.inverted.pointing.primary.menu .active.item {
-  background-color: #5829bb;
+  background-color: #1678c2;
 }
 .ui.ui.ui.inverted.menu .red.active.item,
 .ui.ui.inverted.red.menu {
   background-color: #DB2828;
 }
-.ui.inverted.red.menu .item:before {
+.ui.inverted.red.menu .item::before {
   background-color: rgba(34, 36, 38, 0.1);
 }
 .ui.ui.inverted.red.menu .active.item {
@@ -1586,7 +1610,7 @@ Floated Menu / Item
 .ui.ui.inverted.orange.menu {
   background-color: #F2711C;
 }
-.ui.inverted.orange.menu .item:before {
+.ui.inverted.orange.menu .item::before {
   background-color: rgba(34, 36, 38, 0.1);
 }
 .ui.ui.inverted.orange.menu .active.item {
@@ -1599,7 +1623,7 @@ Floated Menu / Item
 .ui.ui.inverted.yellow.menu {
   background-color: #FBBD08;
 }
-.ui.inverted.yellow.menu .item:before {
+.ui.inverted.yellow.menu .item::before {
   background-color: rgba(34, 36, 38, 0.1);
 }
 .ui.ui.inverted.yellow.menu .active.item {
@@ -1612,7 +1636,7 @@ Floated Menu / Item
 .ui.ui.inverted.olive.menu {
   background-color: #B5CC18;
 }
-.ui.inverted.olive.menu .item:before {
+.ui.inverted.olive.menu .item::before {
   background-color: rgba(34, 36, 38, 0.1);
 }
 .ui.ui.inverted.olive.menu .active.item {
@@ -1625,7 +1649,7 @@ Floated Menu / Item
 .ui.ui.inverted.green.menu {
   background-color: #21BA45;
 }
-.ui.inverted.green.menu .item:before {
+.ui.inverted.green.menu .item::before {
   background-color: rgba(34, 36, 38, 0.1);
 }
 .ui.ui.inverted.green.menu .active.item {
@@ -1638,7 +1662,7 @@ Floated Menu / Item
 .ui.ui.inverted.teal.menu {
   background-color: #00B5AD;
 }
-.ui.inverted.teal.menu .item:before {
+.ui.inverted.teal.menu .item::before {
   background-color: rgba(34, 36, 38, 0.1);
 }
 .ui.ui.inverted.teal.menu .active.item {
@@ -1651,7 +1675,7 @@ Floated Menu / Item
 .ui.ui.inverted.blue.menu {
   background-color: #2185D0;
 }
-.ui.inverted.blue.menu .item:before {
+.ui.inverted.blue.menu .item::before {
   background-color: rgba(34, 36, 38, 0.1);
 }
 .ui.ui.inverted.blue.menu .active.item {
@@ -1664,7 +1688,7 @@ Floated Menu / Item
 .ui.ui.inverted.violet.menu {
   background-color: #6435C9;
 }
-.ui.inverted.violet.menu .item:before {
+.ui.inverted.violet.menu .item::before {
   background-color: rgba(34, 36, 38, 0.1);
 }
 .ui.ui.inverted.violet.menu .active.item {
@@ -1677,7 +1701,7 @@ Floated Menu / Item
 .ui.ui.inverted.purple.menu {
   background-color: #A333C8;
 }
-.ui.inverted.purple.menu .item:before {
+.ui.inverted.purple.menu .item::before {
   background-color: rgba(34, 36, 38, 0.1);
 }
 .ui.ui.inverted.purple.menu .active.item {
@@ -1690,7 +1714,7 @@ Floated Menu / Item
 .ui.ui.inverted.pink.menu {
   background-color: #E03997;
 }
-.ui.inverted.pink.menu .item:before {
+.ui.inverted.pink.menu .item::before {
   background-color: rgba(34, 36, 38, 0.1);
 }
 .ui.ui.inverted.pink.menu .active.item {
@@ -1703,7 +1727,7 @@ Floated Menu / Item
 .ui.ui.inverted.brown.menu {
   background-color: #A5673F;
 }
-.ui.inverted.brown.menu .item:before {
+.ui.inverted.brown.menu .item::before {
   background-color: rgba(34, 36, 38, 0.1);
 }
 .ui.ui.inverted.brown.menu .active.item {
@@ -1716,7 +1740,7 @@ Floated Menu / Item
 .ui.ui.inverted.grey.menu {
   background-color: #767676;
 }
-.ui.inverted.grey.menu .item:before {
+.ui.inverted.grey.menu .item::before {
   background-color: rgba(34, 36, 38, 0.1);
 }
 .ui.ui.inverted.grey.menu .active.item {
@@ -1729,7 +1753,7 @@ Floated Menu / Item
 .ui.ui.inverted.black.menu {
   background-color: #1B1C1D;
 }
-.ui.inverted.black.menu .item:before {
+.ui.inverted.black.menu .item::before {
   background-color: rgba(34, 36, 38, 0.1);
 }
 .ui.ui.inverted.black.menu .active.item {
@@ -1738,7 +1762,7 @@ Floated Menu / Item
 .ui.inverted.pointing.black.menu .active.item {
   background-color: #27292a;
 }
-.ui.ui.ui.inverted.pointing.menu .active.item:after {
+.ui.ui.ui.inverted.pointing.menu .active.item::after {
   background-color: inherit;
 }
 
@@ -1754,23 +1778,23 @@ Floated Menu / Item
 .ui.horizontally.fitted.menu .item,
 .ui.horizontally.fitted.menu .item .menu .item,
 .ui.menu .horizontally.fitted.item {
-  padding-top: 0.91666667em;
+  padding-top: 0.92857143em;
-  padding-bottom: 0.91666667em;
+  padding-bottom: 0.92857143em;
 }
 .ui.vertically.fitted.menu .item,
 .ui.vertically.fitted.menu .item .menu .item,
 .ui.menu .vertically.fitted.item {
-  padding-left: 1.16666667em;
+  padding-left: 1.14285714em;
-  padding-right: 1.16666667em;
+  padding-right: 1.14285714em;
 }
 
 /*--------------
      Borderless
   ---------------*/
 
-.ui.borderless.menu .item:before,
+.ui.borderless.menu .item::before,
-.ui.borderless.menu .item .menu .item:before,
+.ui.borderless.menu .item .menu .item::before,
-.ui.menu .borderless.item:before {
+.ui.menu .borderless.item::before {
   background: none !important;
 }
 
@@ -1792,9 +1816,9 @@ Floated Menu / Item
   display: inline-block;
 }
 .ui.compact.menu:not(.secondary) .item:last-child {
-  border-radius: 0 0.33333333rem 0.33333333rem 0;
+  border-radius: 0 0.28571429rem 0.28571429rem 0;
 }
-.ui.compact.menu .item:last-child:before {
+.ui.compact.menu .item:last-child::before {
   display: none;
 }
 .ui.compact.vertical.menu {
@@ -1832,7 +1856,7 @@ Floated Menu / Item
 .ui.attached.item.menu:not(.tabular) {
   margin: 0 -1px !important;
 }
-.ui.item.menu .item:last-child:before {
+.ui.item.menu .item:last-child::before {
   display: none;
 }
 .ui.menu.two.item .item {
@@ -1937,7 +1961,7 @@ Floated Menu / Item
          Pointing
   --------------------*/
 
-.ui.pointing.menu .item:after {
+.ui.pointing.menu .item::after {
   visibility: hidden;
   position: absolute;
   content: '';
@@ -1947,8 +1971,8 @@ Floated Menu / Item
           transform: translateX(-50%) translateY(-50%) rotate(45deg);
   background: none;
   margin: 0.5px 0 0;
-  width: 0.66666667em;
+  width: 0.57142857em;
-  height: 0.66666667em;
+  height: 0.57142857em;
   border: none;
   border-bottom: 1px solid #D4D4D5;
   border-right: 1px solid #D4D4D5;
@@ -1956,7 +1980,7 @@ Floated Menu / Item
   -webkit-transition: background 0.1s ease;
   transition: background 0.1s ease;
 }
-.ui.vertical.pointing.menu .item:after {
+.ui.vertical.pointing.menu .item::after {
   position: absolute;
   top: 50%;
   right: 0;
@@ -1969,92 +1993,92 @@ Floated Menu / Item
   border-top: 1px solid #D4D4D5;
   border-right: 1px solid #D4D4D5;
 }
-@media only screen and (max-width: 767.98px) {
+.ui.pointing.menu .ui.dropdown .menu .item::after,
-  .stackable .ui.vertical.pointing.menu .item::after {
+.ui.vertical.pointing.menu .ui.dropdown .menu .item::after {
-    display: none;
-  }
-}
-.ui.pointing.menu .ui.dropdown .menu .item:after,
-.ui.vertical.pointing.menu .ui.dropdown .menu .item:after {
   display: none;
 }
 
 /* Active */
-.ui.pointing.menu .active.item:after {
+.ui.pointing.menu .active.item::after {
   visibility: visible;
 }
-.ui.pointing.menu .active.dropdown.item:after {
+.ui.pointing.menu .active.dropdown.item::after {
   visibility: hidden;
 }
 
 /* Don't double up pointers */
-.ui.pointing.menu .dropdown.active.item:after,
+.ui.pointing.menu .dropdown.active.item::after,
-.ui.pointing.menu .active.item .menu .active.item:after {
+.ui.pointing.menu .active.item .menu .active.item::after {
   display: none;
 }
 
 /* Colors */
-.ui.pointing.menu .active.item:hover:after {
+.ui.pointing.menu .active.item:hover::after {
   background-color: #F2F2F2;
 }
-.ui.pointing.menu .active.item:after {
+.ui.pointing.menu .active.item::after {
   background-color: #F2F2F2;
 }
-.ui.pointing.menu .active.item:hover:after {
+.ui.pointing.menu .active.item:hover::after {
   background-color: #F2F2F2;
 }
-.ui.vertical.pointing.menu .active.item:hover:after {
+.ui.vertical.pointing.menu .active.item:hover::after {
   background-color: #F2F2F2;
 }
-.ui.vertical.pointing.menu .active.item:after {
+.ui.vertical.pointing.menu .active.item::after {
   background-color: #F2F2F2;
 }
-.ui.vertical.pointing.menu .menu .active.item:after {
+.ui.vertical.pointing.menu .menu .active.item::after {
   background-color: #FFFFFF;
 }
-.ui.inverted.pointing.menu .primary.active.item:after {
+@media only screen and (max-width: 767.98px) {
-  background-color: #6435C9;
+  .ui.stackable.grid .ui.fluid.vertical.pointing.menu .active.item::after {
+    display: none;
+  }
 }
-.ui.inverted.pointing.menu .secondary.active.item:after {
+.ui.inverted.pointing.menu .primary.active.item::after {
-  background-color: #1B1C1D;
-}
-.ui.inverted.pointing.menu .red.active.item:after {
-  background-color: #DB2828;
-}
-.ui.inverted.pointing.menu .orange.active.item:after {
-  background-color: #F2711C;
-}
-.ui.inverted.pointing.menu .yellow.active.item:after {
-  background-color: #FBBD08;
-}
-.ui.inverted.pointing.menu .olive.active.item:after {
-  background-color: #B5CC18;
-}
-.ui.inverted.pointing.menu .green.active.item:after {
-  background-color: #21BA45;
-}
-.ui.inverted.pointing.menu .teal.active.item:after {
-  background-color: #00B5AD;
-}
-.ui.inverted.pointing.menu .blue.active.item:after {
   background-color: #2185D0;
 }
-.ui.inverted.pointing.menu .violet.active.item:after {
+.ui.inverted.pointing.menu .secondary.active.item::after {
+  background-color: #1B1C1D;
+}
+.ui.inverted.pointing.menu .red.active.item::after {
+  background-color: #DB2828;
+}
+.ui.inverted.pointing.menu .orange.active.item::after {
+  background-color: #F2711C;
+}
+.ui.inverted.pointing.menu .yellow.active.item::after {
+  background-color: #FBBD08;
+}
+.ui.inverted.pointing.menu .olive.active.item::after {
+  background-color: #B5CC18;
+}
+.ui.inverted.pointing.menu .green.active.item::after {
+  background-color: #21BA45;
+}
+.ui.inverted.pointing.menu .teal.active.item::after {
+  background-color: #00B5AD;
+}
+.ui.inverted.pointing.menu .blue.active.item::after {
+  background-color: #2185D0;
+}
+.ui.inverted.pointing.menu .violet.active.item::after {
   background-color: #6435C9;
 }
-.ui.inverted.pointing.menu .purple.active.item:after {
+.ui.inverted.pointing.menu .purple.active.item::after {
   background-color: #A333C8;
 }
-.ui.inverted.pointing.menu .pink.active.item:after {
+.ui.inverted.pointing.menu .pink.active.item::after {
   background-color: #E03997;
 }
-.ui.inverted.pointing.menu .brown.active.item:after {
+.ui.inverted.pointing.menu .brown.active.item::after {
   background-color: #A5673F;
 }
-.ui.inverted.pointing.menu .grey.active.item:after {
+.ui.inverted.pointing.menu .grey.active.item::after {
   background-color: #767676;
 }
-.ui.inverted.pointing.menu .black.active.item:after {
+.ui.inverted.pointing.menu .black.active.item::after {
   background-color: #1B1C1D;
 }
 
@@ -2084,7 +2108,7 @@ Floated Menu / Item
   margin-bottom: 0;
   top: 0;
   margin-top: 1rem;
-  border-radius: 0.33333333rem 0.33333333rem 0 0;
+  border-radius: 0.28571429rem 0.28571429rem 0 0;
 }
 .ui.menu[class*="top attached"]:first-child {
   margin-top: 0;
@@ -2098,7 +2122,7 @@ Floated Menu / Item
   margin-bottom: 1rem;
   -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), none;
           box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), none;
-  border-radius: 0 0 0.33333333rem 0.33333333rem;
+  border-radius: 0 0 0.28571429rem 0.28571429rem;
 }
 .ui[class*="bottom attached"].menu:last-child {
   margin-bottom: 0;
@@ -2106,19 +2130,22 @@ Floated Menu / Item
 
 /* Attached Menu Item */
 .ui.top.attached.menu > .item:first-child {
-  border-radius: 0.33333333rem 0 0 0;
+  border-radius: 0.28571429rem 0 0 0;
 }
 .ui.bottom.attached.menu > .item:first-child {
-  border-radius: 0 0 0 0.33333333rem;
+  border-radius: 0 0 0 0.28571429rem;
 }
 
 /* Tabular Attached */
-.ui.attached.menu:not(.tabular) {
+.ui.attached.menu:not(.tabular):not(.text) {
   border: 1px solid #D4D4D5;
 }
 .ui.attached.inverted.menu {
   border: none;
 }
+.ui[class*="top attached"].inverted.tabular.menu {
+  border-bottom: 1px solid #555555;
+}
 .ui.attached.tabular.menu {
   margin-left: 0;
   margin-right: 0;
@@ -2138,7 +2165,7 @@ Floated Menu / Item
 .ui.mini.menu,
 .ui.mini.menu .dropdown,
 .ui.mini.menu .dropdown .menu > .item {
-  font-size: 0.91666667rem;
+  font-size: 0.78571429rem;
 }
 .ui.mini.vertical.menu:not(.icon) {
   width: 9rem;
@@ -2146,7 +2173,7 @@ Floated Menu / Item
 .ui.tiny.menu,
 .ui.tiny.menu .dropdown,
 .ui.tiny.menu .dropdown .menu > .item {
-  font-size: 1rem;
+  font-size: 0.85714286rem;
 }
 .ui.tiny.vertical.menu:not(.icon) {
   width: 11rem;
@@ -2154,7 +2181,7 @@ Floated Menu / Item
 .ui.small.menu,
 .ui.small.menu .dropdown,
 .ui.small.menu .dropdown .menu > .item {
-  font-size: 1.08333333rem;
+  font-size: 0.92857143rem;
 }
 .ui.small.vertical.menu:not(.icon) {
   width: 13rem;
@@ -2162,7 +2189,7 @@ Floated Menu / Item
 .ui.large.menu,
 .ui.large.menu .dropdown,
 .ui.large.menu .dropdown .menu > .item {
-  font-size: 1.25rem;
+  font-size: 1.07142857rem;
 }
 .ui.large.vertical.menu:not(.icon) {
   width: 18rem;
@@ -2170,7 +2197,7 @@ Floated Menu / Item
 .ui.big.menu,
 .ui.big.menu .dropdown,
 .ui.big.menu .dropdown .menu > .item {
-  font-size: 1.33333333rem;
+  font-size: 1.14285714rem;
 }
 .ui.big.vertical.menu:not(.icon) {
   width: 20rem;
@@ -2178,7 +2205,7 @@ Floated Menu / Item
 .ui.huge.menu,
 .ui.huge.menu .dropdown,
 .ui.huge.menu .dropdown .menu > .item {
-  font-size: 1.41666667rem;
+  font-size: 1.21428571rem;
 }
 .ui.huge.vertical.menu:not(.icon) {
   width: 22rem;
@@ -2186,7 +2213,7 @@ Floated Menu / Item
 .ui.massive.menu,
 .ui.massive.menu .dropdown,
 .ui.massive.menu .dropdown .menu > .item {
-  font-size: 1.5rem;
+  font-size: 1.28571429rem;
 }
 .ui.massive.vertical.menu:not(.icon) {
   width: 25rem;

semantic/dist/components/message.css

@@ -25,7 +25,7 @@
   transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease;
   transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease;
   transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease, -webkit-box-shadow 0.1s ease;
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
   -webkit-box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.22) inset, 0 0 0 0 rgba(0, 0, 0, 0);
           box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.22) inset, 0 0 0 0 rgba(0, 0, 0, 0);
 }
@@ -51,7 +51,7 @@
 
 /* Default font size */
 .ui.message .header:not(.ui) {
-  font-size: 1.16666667em;
+  font-size: 1.14285714em;
 }
 
 /* Paragraph */
@@ -89,7 +89,7 @@
   margin: 0 0 0.3em 1em;
   padding: 0;
 }
-.ui.message .list:not(.ui) li:before {
+.ui.message .list:not(.ui) li::before {
   position: absolute;
   content: '•';
   left: -1em;
@@ -211,7 +211,7 @@
 
 .ui.attached.message {
   margin-bottom: -1px;
-  border-radius: 0.33333333rem 0.33333333rem 0 0;
+  border-radius: 0.28571429rem 0.28571429rem 0 0;
   -webkit-box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
           box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
   margin-left: -1px;
@@ -223,7 +223,7 @@
 }
 .ui.bottom.attached.message {
   margin-top: -1px;
-  border-radius: 0 0 0.33333333rem 0.33333333rem;
+  border-radius: 0 0 0.28571429rem 0.28571429rem;
   -webkit-box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset, 0 1px 2px 0 rgba(34, 36, 38, 0.15);
           box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset, 0 1px 2px 0 rgba(34, 36, 38, 0.15);
 }
@@ -332,46 +332,6 @@
 .ui.inverted.negative.message .header {
   color: #E0B4B4;
 }
-.ui.info.message {
-  background-color: #F8FFFF;
-  color: #276F86;
-}
-.ui.info.message,
-.ui.attached.info.message {
-  -webkit-box-shadow: 0 0 0 1px #A9D5DE inset, 0 0 0 0 rgba(0, 0, 0, 0);
-          box-shadow: 0 0 0 1px #A9D5DE inset, 0 0 0 0 rgba(0, 0, 0, 0);
-}
-.ui.floating.info.message {
-  -webkit-box-shadow: 0 0 0 1px #A9D5DE inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
-          box-shadow: 0 0 0 1px #A9D5DE inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
-}
-.ui.info.message .header {
-  color: #0E566C;
-}
-.ui.inverted.info.message,
-.ui.inverted.info.message .header {
-  color: #c6e3e9;
-}
-.ui.warning.message {
-  background-color: #FFFAF3;
-  color: #573A08;
-}
-.ui.warning.message,
-.ui.attached.warning.message {
-  -webkit-box-shadow: 0 0 0 1px #C9BA9B inset, 0 0 0 0 rgba(0, 0, 0, 0);
-          box-shadow: 0 0 0 1px #C9BA9B inset, 0 0 0 0 rgba(0, 0, 0, 0);
-}
-.ui.floating.warning.message {
-  -webkit-box-shadow: 0 0 0 1px #C9BA9B inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
-          box-shadow: 0 0 0 1px #C9BA9B inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
-}
-.ui.warning.message .header {
-  color: #794B02;
-}
-.ui.inverted.warning.message,
-.ui.inverted.warning.message .header {
-  color: #d7ccb5;
-}
 .ui.error.message {
   background-color: #FFF6F6;
   color: #9F3A38;
@@ -392,6 +352,26 @@
 .ui.inverted.error.message .header {
   color: #ecd1d1;
 }
+.ui.info.message {
+  background-color: #F8FFFF;
+  color: #276F86;
+}
+.ui.info.message,
+.ui.attached.info.message {
+  -webkit-box-shadow: 0 0 0 1px #A9D5DE inset, 0 0 0 0 rgba(0, 0, 0, 0);
+          box-shadow: 0 0 0 1px #A9D5DE inset, 0 0 0 0 rgba(0, 0, 0, 0);
+}
+.ui.floating.info.message {
+  -webkit-box-shadow: 0 0 0 1px #A9D5DE inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+          box-shadow: 0 0 0 1px #A9D5DE inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+}
+.ui.info.message .header {
+  color: #0E566C;
+}
+.ui.inverted.info.message,
+.ui.inverted.info.message .header {
+  color: #c6e3e9;
+}
 .ui.success.message {
   background-color: #FCFFF5;
   color: #2C662D;
@@ -412,18 +392,38 @@
 .ui.inverted.success.message .header {
   color: #b9d1ad;
 }
+.ui.warning.message {
+  background-color: #FFFAF3;
+  color: #573A08;
+}
+.ui.warning.message,
+.ui.attached.warning.message {
+  -webkit-box-shadow: 0 0 0 1px #C9BA9B inset, 0 0 0 0 rgba(0, 0, 0, 0);
+          box-shadow: 0 0 0 1px #C9BA9B inset, 0 0 0 0 rgba(0, 0, 0, 0);
+}
+.ui.floating.warning.message {
+  -webkit-box-shadow: 0 0 0 1px #C9BA9B inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+          box-shadow: 0 0 0 1px #C9BA9B inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+}
+.ui.warning.message .header {
+  color: #794B02;
+}
+.ui.inverted.warning.message,
+.ui.inverted.warning.message .header {
+  color: #d7ccb5;
+}
 .ui.primary.message {
   background-color: #DFF0FF;
   color: rgba(255, 255, 255, 0.9);
 }
 .ui.primary.message,
 .ui.attached.primary.message {
-  -webkit-box-shadow: 0 0 0 1px #6435C9 inset, 0 0 0 0 rgba(0, 0, 0, 0);
+  -webkit-box-shadow: 0 0 0 1px #2185D0 inset, 0 0 0 0 rgba(0, 0, 0, 0);
-          box-shadow: 0 0 0 1px #6435C9 inset, 0 0 0 0 rgba(0, 0, 0, 0);
+          box-shadow: 0 0 0 1px #2185D0 inset, 0 0 0 0 rgba(0, 0, 0, 0);
 }
 .ui.floating.primary.message {
-  -webkit-box-shadow: 0 0 0 1px #6435C9 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+  -webkit-box-shadow: 0 0 0 1px #2185D0 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
-          box-shadow: 0 0 0 1px #6435C9 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
+          box-shadow: 0 0 0 1px #2185D0 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
 }
 .ui.primary.message .header {
   color: rgba(242, 242, 242, 0.9);
@@ -656,25 +656,25 @@
   font-size: 1em;
 }
 .ui.mini.message {
-  font-size: 0.75em;
+  font-size: 0.78571429em;
 }
 .ui.tiny.message {
-  font-size: 0.83333333em;
+  font-size: 0.85714286em;
 }
 .ui.small.message {
-  font-size: 0.91666667em;
+  font-size: 0.92857143em;
 }
 .ui.large.message {
-  font-size: 1.16666667em;
+  font-size: 1.14285714em;
 }
 .ui.big.message {
-  font-size: 1.25em;
+  font-size: 1.28571429em;
 }
 .ui.huge.message {
-  font-size: 1.41666667em;
+  font-size: 1.42857143em;
 }
 .ui.massive.message {
-  font-size: 1.75em;
+  font-size: 1.71428571em;
 }
 
 

semantic/dist/components/modal.css

@@ -27,7 +27,7 @@
   -webkit-box-flex: 0;
       -ms-flex: 0 0 auto;
           flex: 0 0 auto;
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
   -webkit-user-select: text;
      -moz-user-select: text;
       -ms-user-select: text;
@@ -38,12 +38,12 @@
 .ui.modal > i.icon:first-child + *,
 .ui.modal > .dimmer:first-child + *:not(.close),
 .ui.modal > .dimmer:first-child + i.icon + * {
-  border-top-left-radius: 0.33333333rem;
+  border-top-left-radius: 0.28571429rem;
-  border-top-right-radius: 0.33333333rem;
+  border-top-right-radius: 0.28571429rem;
 }
 .ui.modal > :last-child {
-  border-bottom-left-radius: 0.33333333rem;
+  border-bottom-left-radius: 0.28571429rem;
-  border-bottom-right-radius: 0.33333333rem;
+  border-bottom-right-radius: 0.28571429rem;
 }
 .ui.modal > .ui.dimmer {
   border-radius: inherit;
@@ -72,8 +72,10 @@
   height: 2.25rem;
   padding: 0.625rem 0 0 0;
 }
+.ui.modal > .close:focus,
 .ui.modal > .close:hover {
   opacity: 1;
+  outline: none;
 }
 
 /*--------------
@@ -92,7 +94,7 @@
   border-bottom: 1px solid rgba(34, 36, 38, 0.15);
 }
 .ui.modal > .header:not(.ui) {
-  font-size: 1.41666667rem;
+  font-size: 1.42857143rem;
   line-height: 1.28571429em;
   font-weight: bold;
 }
@@ -155,9 +157,9 @@
 }
 .ui.modal > .content > i.icon + .description,
 .ui.modal > .content > .image + .description {
-  -webkit-box-flex: 1;
+  -webkit-box-flex: 0;
-      -ms-flex: 1 1 auto;
+      -ms-flex: 0 1 auto;
-          flex: 1 1 auto;
+          flex: 0 1 auto;
   min-width: '';
   width: auto;
   padding-left: 2em;
@@ -172,21 +174,29 @@
 }
 
 /*--------------
-     Actions
+       Actions
----------------*/
+  ---------------*/
 
 .ui.modal > .actions {
   background: #F9FAFB;
   padding: 1rem 1rem;
   border-top: 1px solid rgba(34, 36, 38, 0.15);
-  text-align: left;
+  text-align: right;
 }
 .ui.modal .actions > .button:not(.fluid) {
   margin-left: 0.75em;
 }
+.ui.modal > .basic.actions,
 .ui.basic.modal > .actions {
   border-top: none;
 }
+.ui.modal > .left.actions {
+  text-align: left;
+}
+.ui.modal > .left.actions > .button:not(.fluid) {
+  margin-left: 0.5em;
+  margin-right: 0.5em;
+}
 .ui.modal > .centered,
 .ui.modal > .center.aligned {
   text-align: center;
@@ -220,6 +230,16 @@
     width: 850px;
     margin: 0 0 0 0;
   }
+  .ui.modal:not(.fullscreen) > .active.dimmer + .close:not(.inside) {
+    pointer-events: none;
+    opacity: 0.1;
+  }
+  .ui.dimmer > .ui.modal:not(.fullscreen) > .close:not(.inside) {
+    text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.3), 1px -1px 2px rgba(0, 0, 0, 0.3), -1px 2px 2px rgba(0, 0, 0, 0.3), 1px 2px 2px rgba(0, 0, 0, 0.3);
+  }
+  .ui.inverted.dimmer > .ui.modal:not(.fullscreen) > .close:not(.inside) {
+    text-shadow: -1px -1px 2px rgba(255, 255, 255, 0.3), 1px -1px 2px rgba(255, 255, 255, 0.3), -1px 2px 2px rgba(255, 255, 255, 0.3), 1px 2px 2px rgba(255, 255, 255, 0.3);
+  }
 }
 @media only screen and (min-width: 1200px) {
   .ui.modal:not(.fullscreen) {
@@ -328,11 +348,16 @@
           box-shadow: none !important;
   color: #FFFFFF;
 }
+.ui.modal > .basic.header,
+.ui.modal > .basic.actions,
 .ui.basic.modal > .header,
 .ui.basic.modal > .content,
 .ui.basic.modal > .actions {
   background-color: transparent;
 }
+.ui.modal > .basic.header {
+  border-bottom: none;
+}
 .ui.basic.modal > .header {
   color: #FFFFFF;
   border-bottom: none;

semantic/dist/components/modal.js

@@ -65,8 +65,9 @@ $.fn.modal = function(parameters) {
         moduleNamespace = 'module-' + namespace,
 
         $module         = $(this),
-        $context        = $(settings.context),
+        $context        = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context),
-        $close          = $module.find(selector.close),
+        $closeIcon      = $module.find(selector.closeIcon),
+        $inputs,
 
         $allModals,
         $otherModals,
@@ -92,6 +93,7 @@ $.fn.modal = function(parameters) {
       module  = {
 
         initialize: function() {
+          module.create.id();
           if(!$module.hasClass('modal')) {
             module.create.modal();
             if(!$.isFunction(settings.onHidden)) {
@@ -116,15 +118,17 @@ $.fn.modal = function(parameters) {
               $actions.empty();
             }
             settings.actions.forEach(function (el) {
-              var icon = el[fields.icon] ? '<i class="' + module.helpers.deQuote(el[fields.icon]) + ' icon"></i>' : '',
+              var icon = el[fields.icon] ? '<i '+(el[fields.text] ? 'aria-hidden="true"' : '')+' class="' + module.helpers.deQuote(el[fields.icon]) + ' icon"></i>' : '',
                   text = module.helpers.escape(el[fields.text] || '', settings.preserveHTML),
                   cls = module.helpers.deQuote(el[fields.class] || ''),
                   click = el[fields.click] && $.isFunction(el[fields.click]) ? el[fields.click] : function () {};
               $actions.append($('<button/>', {
                 html: icon + text,
+                'aria-label': (el[fields.text] || el[fields.icon] || '').replace(/<[^>]+(>|$)/g,''),
                 class: className.button + ' ' + cls,
                 click: function () {
-                  if (click.call(element, $module) === false) {
+                  var button = $(this);
+                  if (button.is(selector.approve) || button.is(selector.deny) || click.call(element, $module) === false) {
                     return;
                   }
                   module.hide();
@@ -135,7 +139,6 @@ $.fn.modal = function(parameters) {
           module.cache = {};
           module.verbose('Initializing dimmer', $context);
 
-          module.create.id();
           module.create.dimmer();
 
           if ( settings.allowMultiple ) {
@@ -145,11 +148,9 @@ $.fn.modal = function(parameters) {
             $module.addClass('top aligned');
           }
           module.refreshModals();
-
+          module.refreshInputs();
           module.bind.events();
-          if(settings.observeChanges) {
+          module.observeChanges();
-            module.observeChanges();
-          }
           module.instantiate();
           if(settings.autoShow){
             module.show();
@@ -166,16 +167,20 @@ $.fn.modal = function(parameters) {
 
         create: {
           modal: function() {
-            $module = $('<div/>', {class: className.modal});
+            $module = $('<div/>', {class: className.modal, role: 'dialog', 'aria-modal': true});
             if (settings.closeIcon) {
-              $close = $('<i/>', {class: className.close})
+              $closeIcon = $('<i/>', {class: className.close, role: 'button', tabindex: 0, 'aria-label': settings.text.close})
-              $module.append($close);
+              $module.append($closeIcon);
             }
             if (settings.title !== '') {
-              $('<div/>', {class: className.title}).appendTo($module);
+              var titleId = '_' + module.get.id() + 'title';
+              $module.attr('aria-labelledby', titleId);
+              $('<div/>', {class: className.title, id: titleId}).appendTo($module);
             }
             if (settings.content !== '') {
-              $('<div/>', {class: className.content}).appendTo($module);
+              var descId = '_' + module.get.id() + 'desc';
+              $module.attr('aria-describedby', descId);
+              $('<div/>', {class: className.content, id: descId}).appendTo($module);
             }
             if (module.has.configActions()) {
               $('<div/>', {class: className.actions}).appendTo($module);
@@ -206,13 +211,13 @@ $.fn.modal = function(parameters) {
             $dimmer = $dimmable.dimmer('get dimmer');
           },
           id: function() {
-            id = (Math.random().toString(16) + '000000000').substr(2, 8);
+            id = (Math.random().toString(16) + '000000000').slice(2, 10);
             elementEventNamespace = '.' + id;
             module.verbose('Creating unique id for element', id);
           },
           innerDimmer: function() {
-            if ( $module.find(selector.dimmer).length == 0 ) {
+            if ( $module.find(selector.dimmer).length === 0 ) {
-              $module.prepend('<div class="ui inverted dimmer"></div>');
+              $('<div/>', {class: className.innerDimmer}).prependTo($module);
             }
           }
         },
@@ -228,15 +233,21 @@ $.fn.modal = function(parameters) {
           ;
           $window.off(elementEventNamespace);
           $dimmer.off(elementEventNamespace);
-          $close.off(eventNamespace);
+          $closeIcon.off(elementEventNamespace);
+          if($inputs) {
+            $inputs.off(elementEventNamespace);
+          }
           $context.dimmer('destroy');
         },
 
         observeChanges: function() {
           if('MutationObserver' in window) {
             observer = new MutationObserver(function(mutations) {
-              module.debug('DOM tree modified, refreshing');
+              if(settings.observeChanges) {
-              module.refresh();
+                module.debug('DOM tree modified, refreshing');
+                module.refresh();
+              }
+              module.refreshInputs();
             });
             observer.observe(element, {
               childList : true,
@@ -261,6 +272,23 @@ $.fn.modal = function(parameters) {
           $allModals   = $otherModals.add($module);
         },
 
+        refreshInputs: function(){
+          if($inputs){
+            $inputs
+              .off('keydown' + elementEventNamespace)
+            ;
+          }
+          $inputs    = $module.find('[tabindex], :input').filter(':visible').filter(function() {
+            return $(this).closest('.disabled').length === 0;
+          });
+          $inputs.first()
+              .on('keydown' + elementEventNamespace, module.event.inputKeyDown.first)
+          ;
+          $inputs.last()
+              .on('keydown' + elementEventNamespace, module.event.inputKeyDown.last)
+          ;
+        },
+
         attachEvents: function(selector, event) {
           var
             $toggle = $(selector)
@@ -289,6 +317,9 @@ $.fn.modal = function(parameters) {
               .on('click' + eventNamespace, selector.approve, module.event.approve)
               .on('click' + eventNamespace, selector.deny, module.event.deny)
             ;
+            $closeIcon
+                .on('keyup' + elementEventNamespace, module.event.closeKeyUp)
+            ;
             $window
               .on('resize' + elementEventNamespace, module.event.resize)
             ;
@@ -307,7 +338,7 @@ $.fn.modal = function(parameters) {
 
         get: {
           id: function() {
-            return (Math.random().toString(16) + '000000000').substr(2, 8);
+            return id;
           },
           element: function() {
             return $module;
@@ -346,10 +377,38 @@ $.fn.modal = function(parameters) {
           close: function() {
             module.hide();
           },
+          closeKeyUp: function(event){
+            var
+              keyCode   = event.which
+            ;
+            if ((keyCode === settings.keys.enter || keyCode === settings.keys.space) && $module.hasClass(className.front)) {
+              module.hide();
+            }
+          },
+          inputKeyDown: {
+            first: function(event) {
+              var
+                  keyCode = event.which
+              ;
+              if (keyCode === settings.keys.tab && event.shiftKey) {
+                $inputs.last().focus();
+                event.preventDefault();
+              }
+            },
+            last: function(event) {
+              var
+                  keyCode = event.which
+              ;
+              if (keyCode === settings.keys.tab && !event.shiftKey) {
+                $inputs.first().focus();
+                event.preventDefault();
+              }
+            }
+          },
           mousedown: function(event) {
             var
               $target   = $(event.target),
-              isRtl = module.is.rtl();
+              isRtl = module.is.rtl()
             ;
             initialMouseDownInModal = ($target.closest(selector.modal).length > 0);
             if(initialMouseDownInModal) {
@@ -397,10 +456,9 @@ $.fn.modal = function(parameters) {
           },
           keyboard: function(event) {
             var
-              keyCode   = event.which,
+              keyCode   = event.which
-              escapeKey = 27
             ;
-            if(keyCode == escapeKey) {
+            if(keyCode === settings.keys.escape) {
               if(settings.closable) {
                 module.debug('Escape key pressed hiding modal');
                 if ( $module.hasClass(className.front) ) {
@@ -456,6 +514,10 @@ $.fn.modal = function(parameters) {
             : function(){}
           ;
           if( module.is.animating() || !module.is.active() ) {
+            if(settings.onShow.call(element) === false) {
+              module.verbose('Show callback returned false cancelling show');
+              return;
+            }
             module.showDimmer();
             module.cacheSizes();
             module.set.bodyMargin();
@@ -485,7 +547,6 @@ $.fn.modal = function(parameters) {
                   $module.detach().appendTo($dimmer);
                 }
               }
-              settings.onShow.call(element);
               if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
                 module.debug('Showing modal with css animations');
                 $module
@@ -528,7 +589,6 @@ $.fn.modal = function(parameters) {
             ? callback
             : function(){}
           ;
-          module.debug('Hiding modal');
           if(settings.onHide.call(element, $(this)) === false) {
             module.verbose('Hide callback returned false cancelling hide');
             ignoreRepeatedEvents = false;
@@ -536,6 +596,7 @@ $.fn.modal = function(parameters) {
           }
 
           if( module.is.animating() || module.is.active() ) {
+            module.debug('Hiding modal');
             if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
               module.remove.active();
               $module
@@ -715,7 +776,7 @@ $.fn.modal = function(parameters) {
               $module
                   .off('mousedown' + elementEventNamespace)
               ;
-            }           
+            }
             $dimmer
               .off('mousedown' + elementEventNamespace)
             ;
@@ -900,13 +961,10 @@ $.fn.modal = function(parameters) {
         set: {
           autofocus: function() {
             var
-              $inputs    = $module.find('[tabindex], :input').filter(':visible').filter(function() {
-                return $(this).closest('.disabled').length === 0;
-              }),
               $autofocus = $inputs.filter('[autofocus]'),
               $input     = ($autofocus.length > 0)
                 ? $autofocus.first()
-                : $inputs.first()
+                : ($inputs.length > 1 ? $inputs.filter(':not(i.close)') : $inputs).first()
             ;
             if($input.length > 0) {
               $input.focus();
@@ -988,7 +1046,7 @@ $.fn.modal = function(parameters) {
                       ? $(document).scrollTop() + settings.padding
                       : $(document).scrollTop() + (module.cache.contextHeight - module.cache.height - settings.padding),
                   marginLeft: -(module.cache.width / 2)
-                }) 
+                })
               ;
             } else {
               $module
@@ -997,7 +1055,7 @@ $.fn.modal = function(parameters) {
                     ? -(module.cache.height / 2)
                     : settings.padding / 2,
                   marginLeft: -(module.cache.width / 2)
-                }) 
+                })
               ;
             }
             module.verbose('Setting modal offset for legacy mode');
@@ -1323,11 +1381,19 @@ $.fn.modal.settings = {
   // called after deny selector match
   onDeny     : function(){ return true; },
 
+  keys : {
+    space      : 32,
+    enter      : 13,
+    escape     : 27,
+    tab        :  9,
+  },
+
   selector    : {
     title    : '> .header',
     content  : '> .content',
     actions  : '> .actions',
     close    : '> .close',
+    closeIcon: '> .close',
     approve  : '.actions .positive, .actions .approve, .actions .ok',
     deny     : '.actions .negative, .actions .deny, .actions .cancel',
     modal    : '.ui.modal',
@@ -1359,11 +1425,13 @@ $.fn.modal.settings = {
     template   : 'ui tiny modal',
     ok         : 'positive',
     cancel     : 'negative',
-    prompt     : 'ui fluid input'
+    prompt     : 'ui fluid input',
+    innerDimmer: 'ui inverted dimmer'
   },
   text: {
     ok    : 'Ok',
-    cancel: 'Cancel'
+    cancel: 'Cancel',
+    close : 'Close'
   }
 };
 
@@ -1389,33 +1457,39 @@ $.fn.modal.settings.templates = {
   },
   alert: function () {
     var settings = this.get.settings(),
-        args     = settings.templates.getArguments(arguments)
+        args     = settings.templates.getArguments(arguments),
+        approveFn = args.handler
     ;
     return {
       title  : args.title,
       content: args.content,
+      onApprove: approveFn,
       actions: [{
         text : settings.text.ok,
         class: settings.className.ok,
-        click: args.handler
+        click: approveFn
       }]
     }
   },
   confirm: function () {
     var settings = this.get.settings(),
-        args     = settings.templates.getArguments(arguments)
+        args     = settings.templates.getArguments(arguments),
+        approveFn = function(){args.handler(true)},
+        denyFn = function(){args.handler(false)}
     ;
     return {
       title  : args.title,
       content: args.content,
+      onApprove: approveFn,
+      onDeny: denyFn,
       actions: [{
         text : settings.text.ok,
         class: settings.className.ok,
-        click: function(){args.handler(true)}
+        click: approveFn
       },{
         text: settings.text.cancel,
         class: settings.className.cancel,
-        click: function(){args.handler(false)}
+        click: denyFn
       }]
     }
   },
@@ -1423,7 +1497,14 @@ $.fn.modal.settings.templates = {
     var $this    = this,
         settings = this.get.settings(),
         args     = settings.templates.getArguments(arguments),
-        input    = $($.parseHTML(args.content)).filter('.ui.input')
+        input    = $($.parseHTML(args.content)).filter('.ui.input'),
+        approveFn = function(){
+          var settings = $this.get.settings(),
+              inputField = $this.get.element().find(settings.selector.prompt)[0]
+          ;
+          args.handler($(inputField).val());
+        },
+        denyFn = function(){args.handler(null)}
     ;
     if (input.length === 0) {
       args.content += '<p><div class="'+settings.className.prompt+'"><input placeholder="'+this.helpers.deQuote(args.placeholder || '')+'" type="text" value="'+this.helpers.deQuote(args.defaultValue || '')+'"></div></p>';
@@ -1431,19 +1512,16 @@ $.fn.modal.settings.templates = {
     return {
       title  : args.title,
       content: args.content,
+      onApprove: approveFn,
+      onDeny: denyFn,
       actions: [{
         text: settings.text.ok,
         class: settings.className.ok,
-        click: function(){
+        click:  approveFn
-          var settings = $this.get.settings(),
-              inputField = $this.get.element().find(settings.selector.prompt)[0]
-          ;
-          args.handler($(inputField).val());
-        }
       },{
         text: settings.text.cancel,
         class: settings.className.cancel,
-        click: function(){args.handler(null)}
+        click: denyFn
       }]
     }
   }

semantic/dist/components/placeholder.css

@@ -62,10 +62,10 @@
           animation-delay: 0.6s;
 }
 .ui.placeholder,
-.ui.placeholder > :before,
+.ui.placeholder > ::before,
-.ui.placeholder .image.header:after,
+.ui.placeholder .image.header::after,
 .ui.placeholder .line,
-.ui.placeholder .line:after {
+.ui.placeholder .line::after {
   background-color: #FFFFFF;
 }
 .ui.placeholder.hidden {
@@ -94,48 +94,48 @@
 /* Lines */
 .ui.placeholder .line {
   position: relative;
-  height: 1em;
+  height: 0.85714286em;
 }
-.ui.placeholder .line:before,
+.ui.placeholder .line::before,
-.ui.placeholder .line:after {
+.ui.placeholder .line::after {
   top: 100%;
   position: absolute;
   content: '';
   background-color: inherit;
 }
-.ui.placeholder .line:before {
+.ui.placeholder .line::before {
   left: 0;
 }
-.ui.placeholder .line:after {
+.ui.placeholder .line::after {
   right: 0;
 }
 
 /* Any Lines */
 .ui.placeholder .line {
-  margin-bottom: 0.58333333em;
+  margin-bottom: 0.5em;
 }
-.ui.placeholder .line:before,
+.ui.placeholder .line::before,
-.ui.placeholder .line:after {
+.ui.placeholder .line::after {
-  height: 0.58333333em;
+  height: 0.5em;
 }
 .ui.placeholder .line:not(:first-child) {
-  margin-top: 0.58333333em;
+  margin-top: 0.5em;
 }
 
 /* Line Outdent */
-.ui.placeholder .line:nth-child(1):after {
+.ui.placeholder .line:nth-child(1)::after {
   width: 0;
 }
-.ui.placeholder .line:nth-child(2):after {
+.ui.placeholder .line:nth-child(2)::after {
   width: 50%;
 }
-.ui.placeholder .line:nth-child(3):after {
+.ui.placeholder .line:nth-child(3)::after {
   width: 10%;
 }
-.ui.placeholder .line:nth-child(4):after {
+.ui.placeholder .line:nth-child(4)::after {
   width: 35%;
 }
-.ui.placeholder .line:nth-child(5):after {
+.ui.placeholder .line:nth-child(5)::after {
   width: 65%;
 }
 
@@ -147,31 +147,31 @@
 
 /* Header Line 1 & 2*/
 .ui.placeholder .header .line {
-  margin-bottom: 0.75em;
+  margin-bottom: 0.64285714em;
 }
-.ui.placeholder .header .line:before,
+.ui.placeholder .header .line::before,
-.ui.placeholder .header .line:after {
+.ui.placeholder .header .line::after {
-  height: 0.75em;
+  height: 0.64285714em;
 }
 .ui.placeholder .header .line:not(:first-child) {
-  margin-top: 0.75em;
+  margin-top: 0.64285714em;
 }
-.ui.placeholder .header .line:after {
+.ui.placeholder .header .line::after {
   width: 20%;
 }
-.ui.placeholder .header .line:nth-child(2):after {
+.ui.placeholder .header .line:nth-child(2)::after {
   width: 60%;
 }
 /* Image Header */
 .ui.placeholder .image.header .line {
   margin-left: 3em;
 }
-.ui.placeholder .image.header .line:before {
+.ui.placeholder .image.header .line::before {
-  width: 0.83333333rem;
+  width: 0.71428571rem;
 }
-.ui.placeholder .image.header:after {
+.ui.placeholder .image.header::after {
   display: block;
-  height: 1em;
+  height: 0.85714286em;
   content: '';
   margin-left: 3em;
 }
@@ -182,10 +182,10 @@
 .ui.placeholder .header .line:first-child {
   height: 0.01px;
 }
-.ui.placeholder .image:not(:first-child):before,
+.ui.placeholder .image:not(:first-child)::before,
-.ui.placeholder .paragraph:not(:first-child):before,
+.ui.placeholder .paragraph:not(:first-child)::before,
-.ui.placeholder .header:not(:first-child):before {
+.ui.placeholder .header:not(:first-child)::before {
-  height: 1.66666667em;
+  height: 1.42857143em;
   content: '';
   display: block;
 }
@@ -197,10 +197,10 @@
   background-image: linear-gradient(to right, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0.14) 15%, rgba(255, 255, 255, 0.08) 30%);
 }
 .ui.inverted.placeholder,
-.ui.inverted.placeholder > :before,
+.ui.inverted.placeholder > ::before,
-.ui.inverted.placeholder .image.header:after,
+.ui.inverted.placeholder .image.header::after,
 .ui.inverted.placeholder .line,
-.ui.inverted.placeholder .line:after {
+.ui.inverted.placeholder .line::after {
   background-color: #1B1C1D;
 }
 
@@ -214,22 +214,22 @@
         Sizes
 --------------------*/
 
-.ui.placeholder .full.line.line.line:after {
+.ui.placeholder .full.line.line.line::after {
   width: 0;
 }
-.ui.placeholder .very.long.line.line.line:after {
+.ui.placeholder .very.long.line.line.line::after {
   width: 10%;
 }
-.ui.placeholder .long.line.line.line:after {
+.ui.placeholder .long.line.line.line::after {
   width: 35%;
 }
-.ui.placeholder .medium.line.line.line:after {
+.ui.placeholder .medium.line.line.line::after {
   width: 50%;
 }
-.ui.placeholder .short.line.line.line:after {
+.ui.placeholder .short.line.line.line::after {
   width: 65%;
 }
-.ui.placeholder .very.short.line.line.line:after {
+.ui.placeholder .very.short.line.line.line::after {
   width: 80%;
 }
 

semantic/dist/components/placeholder.min.css

@@ -6,4 +6,4 @@
  * Released under the MIT license
  * http://opensource.org/licenses/MIT
  *
- */.ui.placeholder{position:static;overflow:hidden;-webkit-animation:placeholderShimmer 2s linear;animation:placeholderShimmer 2s linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;background-color:#fff;background-image:-webkit-gradient(linear,left top,right top,color-stop(0,rgba(0,0,0,.08)),color-stop(15%,rgba(0,0,0,.15)),color-stop(30%,rgba(0,0,0,.08)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.08) 0,rgba(0,0,0,.15) 15%,rgba(0,0,0,.08) 30%);background-image:linear-gradient(to right,rgba(0,0,0,.08) 0,rgba(0,0,0,.15) 15%,rgba(0,0,0,.08) 30%);background-size:1200px 100%;max-width:30rem}@-webkit-keyframes placeholderShimmer{0%{background-position:-1200px 0}100%{background-position:1200px 0}}@keyframes placeholderShimmer{0%{background-position:-1200px 0}100%{background-position:1200px 0}}.ui.placeholder+.ui.placeholder{margin-top:2rem}.ui.placeholder+.ui.placeholder{-webkit-animation-delay:.15s;animation-delay:.15s}.ui.placeholder+.ui.placeholder+.ui.placeholder{-webkit-animation-delay:.3s;animation-delay:.3s}.ui.placeholder+.ui.placeholder+.ui.placeholder+.ui.placeholder{-webkit-animation-delay:.45s;animation-delay:.45s}.ui.placeholder+.ui.placeholder+.ui.placeholder+.ui.placeholder+.ui.placeholder{-webkit-animation-delay:.6s;animation-delay:.6s}.ui.placeholder,.ui.placeholder .image.header:after,.ui.placeholder .line,.ui.placeholder .line:after,.ui.placeholder>:before{background-color:#fff}.ui.placeholder.hidden{display:none}.ui.placeholder .image:not(.header):not(.ui):not(.icon){height:100px}.ui.placeholder .square.image:not(.header){height:0;overflow:hidden;padding-top:100%}.ui.placeholder .rectangular.image:not(.header){height:0;overflow:hidden;padding-top:75%}.ui.placeholder .line{position:relative;height:1em}.ui.placeholder .line:after,.ui.placeholder .line:before{top:100%;position:absolute;content:'';background-color:inherit}.ui.placeholder .line:before{left:0}.ui.placeholder .line:after{right:0}.ui.placeholder .line{margin-bottom:.58333333em}.ui.placeholder .line:after,.ui.placeholder .line:before{height:.58333333em}.ui.placeholder .line:not(:first-child){margin-top:.58333333em}.ui.placeholder .line:nth-child(1):after{width:0}.ui.placeholder .line:nth-child(2):after{width:50%}.ui.placeholder .line:nth-child(3):after{width:10%}.ui.placeholder .line:nth-child(4):after{width:35%}.ui.placeholder .line:nth-child(5):after{width:65%}.ui.placeholder .header{position:relative;overflow:hidden}.ui.placeholder .header .line{margin-bottom:.75em}.ui.placeholder .header .line:after,.ui.placeholder .header .line:before{height:.75em}.ui.placeholder .header .line:not(:first-child){margin-top:.75em}.ui.placeholder .header .line:after{width:20%}.ui.placeholder .header .line:nth-child(2):after{width:60%}.ui.placeholder .image.header .line{margin-left:3em}.ui.placeholder .image.header .line:before{width:.83333333rem}.ui.placeholder .image.header:after{display:block;height:1em;content:'';margin-left:3em}.ui.placeholder .header .line:first-child,.ui.placeholder .image .line:first-child,.ui.placeholder .paragraph .line:first-child{height:.01px}.ui.placeholder .header:not(:first-child):before,.ui.placeholder .image:not(:first-child):before,.ui.placeholder .paragraph:not(:first-child):before{height:1.66666667em;content:'';display:block}.ui.inverted.placeholder{background-image:-webkit-gradient(linear,left top,right top,color-stop(0,rgba(255,255,255,.08)),color-stop(15%,rgba(255,255,255,.14)),color-stop(30%,rgba(255,255,255,.08)));background-image:-webkit-linear-gradient(left,rgba(255,255,255,.08) 0,rgba(255,255,255,.14) 15%,rgba(255,255,255,.08) 30%);background-image:linear-gradient(to right,rgba(255,255,255,.08) 0,rgba(255,255,255,.14) 15%,rgba(255,255,255,.08) 30%)}.ui.inverted.placeholder,.ui.inverted.placeholder .image.header:after,.ui.inverted.placeholder .line,.ui.inverted.placeholder .line:after,.ui.inverted.placeholder>:before{background-color:#1b1c1d}.ui.placeholder .full.line.line.line:after{width:0}.ui.placeholder .very.long.line.line.line:after{width:10%}.ui.placeholder .long.line.line.line:after{width:35%}.ui.placeholder .medium.line.line.line:after{width:50%}.ui.placeholder .short.line.line.line:after{width:65%}.ui.placeholder .very.short.line.line.line:after{width:80%}.ui.fluid.placeholder{max-width:none}
+ */.ui.placeholder{position:static;overflow:hidden;-webkit-animation:placeholderShimmer 2s linear;animation:placeholderShimmer 2s linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;background-color:#fff;background-image:-webkit-gradient(linear,left top,right top,color-stop(0,rgba(0,0,0,.08)),color-stop(15%,rgba(0,0,0,.15)),color-stop(30%,rgba(0,0,0,.08)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,.08) 0,rgba(0,0,0,.15) 15%,rgba(0,0,0,.08) 30%);background-image:linear-gradient(to right,rgba(0,0,0,.08) 0,rgba(0,0,0,.15) 15%,rgba(0,0,0,.08) 30%);background-size:1200px 100%;max-width:30rem}@-webkit-keyframes placeholderShimmer{0%{background-position:-1200px 0}100%{background-position:1200px 0}}@keyframes placeholderShimmer{0%{background-position:-1200px 0}100%{background-position:1200px 0}}.ui.placeholder+.ui.placeholder{margin-top:2rem}.ui.placeholder+.ui.placeholder{-webkit-animation-delay:.15s;animation-delay:.15s}.ui.placeholder+.ui.placeholder+.ui.placeholder{-webkit-animation-delay:.3s;animation-delay:.3s}.ui.placeholder+.ui.placeholder+.ui.placeholder+.ui.placeholder{-webkit-animation-delay:.45s;animation-delay:.45s}.ui.placeholder+.ui.placeholder+.ui.placeholder+.ui.placeholder+.ui.placeholder{-webkit-animation-delay:.6s;animation-delay:.6s}.ui.placeholder,.ui.placeholder .image.header::after,.ui.placeholder .line,.ui.placeholder .line::after,.ui.placeholder>::before{background-color:#fff}.ui.placeholder.hidden{display:none}.ui.placeholder .image:not(.header):not(.ui):not(.icon){height:100px}.ui.placeholder .square.image:not(.header){height:0;overflow:hidden;padding-top:100%}.ui.placeholder .rectangular.image:not(.header){height:0;overflow:hidden;padding-top:75%}.ui.placeholder .line{position:relative;height:.85714286em}.ui.placeholder .line::after,.ui.placeholder .line::before{top:100%;position:absolute;content:'';background-color:inherit}.ui.placeholder .line::before{left:0}.ui.placeholder .line::after{right:0}.ui.placeholder .line{margin-bottom:.5em}.ui.placeholder .line::after,.ui.placeholder .line::before{height:.5em}.ui.placeholder .line:not(:first-child){margin-top:.5em}.ui.placeholder .line:nth-child(1)::after{width:0}.ui.placeholder .line:nth-child(2)::after{width:50%}.ui.placeholder .line:nth-child(3)::after{width:10%}.ui.placeholder .line:nth-child(4)::after{width:35%}.ui.placeholder .line:nth-child(5)::after{width:65%}.ui.placeholder .header{position:relative;overflow:hidden}.ui.placeholder .header .line{margin-bottom:.64285714em}.ui.placeholder .header .line::after,.ui.placeholder .header .line::before{height:.64285714em}.ui.placeholder .header .line:not(:first-child){margin-top:.64285714em}.ui.placeholder .header .line::after{width:20%}.ui.placeholder .header .line:nth-child(2)::after{width:60%}.ui.placeholder .image.header .line{margin-left:3em}.ui.placeholder .image.header .line::before{width:.71428571rem}.ui.placeholder .image.header::after{display:block;height:.85714286em;content:'';margin-left:3em}.ui.placeholder .header .line:first-child,.ui.placeholder .image .line:first-child,.ui.placeholder .paragraph .line:first-child{height:.01px}.ui.placeholder .header:not(:first-child)::before,.ui.placeholder .image:not(:first-child)::before,.ui.placeholder .paragraph:not(:first-child)::before{height:1.42857143em;content:'';display:block}.ui.inverted.placeholder{background-image:-webkit-gradient(linear,left top,right top,color-stop(0,rgba(255,255,255,.08)),color-stop(15%,rgba(255,255,255,.14)),color-stop(30%,rgba(255,255,255,.08)));background-image:-webkit-linear-gradient(left,rgba(255,255,255,.08) 0,rgba(255,255,255,.14) 15%,rgba(255,255,255,.08) 30%);background-image:linear-gradient(to right,rgba(255,255,255,.08) 0,rgba(255,255,255,.14) 15%,rgba(255,255,255,.08) 30%)}.ui.inverted.placeholder,.ui.inverted.placeholder .image.header::after,.ui.inverted.placeholder .line,.ui.inverted.placeholder .line::after,.ui.inverted.placeholder>::before{background-color:#1b1c1d}.ui.placeholder .full.line.line.line::after{width:0}.ui.placeholder .very.long.line.line.line::after{width:10%}.ui.placeholder .long.line.line.line::after{width:35%}.ui.placeholder .medium.line.line.line::after{width:50%}.ui.placeholder .short.line.line.line::after{width:65%}.ui.placeholder .very.short.line.line.line::after{width:80%}.ui.fluid.placeholder{max-width:none}

semantic/dist/components/popup.css

@@ -32,25 +32,25 @@
   font-weight: normal;
   font-style: normal;
   color: rgba(0, 0, 0, 0.87);
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
   -webkit-box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
           box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
 }
 .ui.popup > .header {
   padding: 0;
   font-family: 'Raleway', sans-serif;
-  font-size: 1.16666667em;
+  font-size: 1.14285714em;
   line-height: 1.2;
   font-weight: bold;
 }
 .ui.popup > .header + .content {
-  padding-top: 0.58333333em;
+  padding-top: 0.5em;
 }
-.ui.popup:before {
+.ui.popup::before {
   position: absolute;
   content: '';
-  width: 0.83333333em;
+  width: 0.71428571em;
-  height: 0.83333333em;
+  height: 0.71428571em;
   background: #FFFFFF;
   -webkit-transform: rotate(45deg);
           transform: rotate(45deg);
@@ -76,13 +76,13 @@
 }
 
 /* Arrow */
-[data-tooltip]:before {
+[data-tooltip]::before {
   pointer-events: none;
   position: absolute;
   content: '';
   font-size: 1rem;
-  width: 0.83333333em;
+  width: 0.71428571em;
-  height: 0.83333333em;
+  height: 0.71428571em;
   background: #FFFFFF;
   -webkit-transform: rotate(45deg);
           transform: rotate(45deg);
@@ -92,7 +92,7 @@
 }
 
 /* Popup */
-[data-tooltip]:after {
+[data-tooltip]::after {
   pointer-events: none;
   content: attr(data-tooltip);
   position: absolute;
@@ -109,33 +109,33 @@
   font-weight: normal;
   font-style: normal;
   color: rgba(0, 0, 0, 0.87);
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
   -webkit-box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
           box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
   z-index: 1900;
 }
 
 /* Default Position (Top Center) */
-[data-tooltip]:not([data-position]):before {
+[data-tooltip]:not([data-position])::before {
   top: auto;
   right: auto;
   bottom: 100%;
   left: 50%;
   background: #FFFFFF;
-  margin-left: -0.08333333rem;
+  margin-left: -0.07142857rem;
-  margin-bottom: 0.16666667rem;
+  margin-bottom: 0.14285714rem;
 }
-[data-tooltip]:not([data-position]):after {
+[data-tooltip]:not([data-position])::after {
   left: 50%;
   -webkit-transform: translateX(-50%);
           transform: translateX(-50%);
   bottom: 100%;
-  margin-bottom: 0.58333333em;
+  margin-bottom: 0.5em;
 }
 
 /* Animation */
-[data-tooltip]:before,
+[data-tooltip]::before,
-[data-tooltip]:after {
+[data-tooltip]::after {
   pointer-events: none;
   visibility: hidden;
   opacity: 0;
@@ -144,76 +144,76 @@
   transition: transform 0.1s ease, opacity 0.1s ease;
   transition: transform 0.1s ease, opacity 0.1s ease, -webkit-transform 0.1s ease;
 }
-[data-tooltip]:before {
+[data-tooltip]::before {
   -webkit-transform: rotate(45deg) scale(0) !important;
           transform: rotate(45deg) scale(0) !important;
   -webkit-transform-origin: center top;
           transform-origin: center top;
 }
-[data-tooltip]:after {
+[data-tooltip]::after {
   -webkit-transform-origin: center bottom;
           transform-origin: center bottom;
 }
-[data-tooltip]:hover:before,
+[data-tooltip]:hover::before,
-[data-tooltip]:hover:after {
+[data-tooltip]:hover::after {
   visibility: visible;
   pointer-events: auto;
   opacity: 1;
 }
-[data-tooltip]:hover:before {
+[data-tooltip]:hover::before {
   -webkit-transform: rotate(45deg) scale(1) !important;
           transform: rotate(45deg) scale(1) !important;
 }
 
 /* Animation Position */
-[data-tooltip]:after,
+[data-tooltip]::after,
-[data-tooltip][data-position="top center"]:after,
+[data-tooltip][data-position="top center"]::after,
-[data-tooltip][data-position="bottom center"]:after {
+[data-tooltip][data-position="bottom center"]::after {
   -webkit-transform: translateX(-50%) scale(0) !important;
           transform: translateX(-50%) scale(0) !important;
 }
-[data-tooltip]:hover:after,
+[data-tooltip]:hover::after,
-[data-tooltip][data-position="bottom center"]:hover:after {
+[data-tooltip][data-position="bottom center"]:hover::after {
   -webkit-transform: translateX(-50%) scale(1) !important;
           transform: translateX(-50%) scale(1) !important;
 }
-[data-tooltip][data-position="left center"]:after,
+[data-tooltip][data-position="left center"]::after,
-[data-tooltip][data-position="right center"]:after {
+[data-tooltip][data-position="right center"]::after {
   -webkit-transform: translateY(-50%) scale(0) !important;
           transform: translateY(-50%) scale(0) !important;
 }
-[data-tooltip][data-position="left center"]:hover:after,
+[data-tooltip][data-position="left center"]:hover::after,
-[data-tooltip][data-position="right center"]:hover:after {
+[data-tooltip][data-position="right center"]:hover::after {
   -webkit-transform: translateY(-50%) scale(1) !important;
           transform: translateY(-50%) scale(1) !important;
   -moz-transform: translateY(-50%) scale(1.0001) !important;
 }
-[data-tooltip][data-position="top left"]:after,
+[data-tooltip][data-position="top left"]::after,
-[data-tooltip][data-position="top right"]:after,
+[data-tooltip][data-position="top right"]::after,
-[data-tooltip][data-position="bottom left"]:after,
+[data-tooltip][data-position="bottom left"]::after,
-[data-tooltip][data-position="bottom right"]:after {
+[data-tooltip][data-position="bottom right"]::after {
   -webkit-transform: scale(0) !important;
           transform: scale(0) !important;
 }
-[data-tooltip][data-position="top left"]:hover:after,
+[data-tooltip][data-position="top left"]:hover::after,
-[data-tooltip][data-position="top right"]:hover:after,
+[data-tooltip][data-position="top right"]:hover::after,
-[data-tooltip][data-position="bottom left"]:hover:after,
+[data-tooltip][data-position="bottom left"]:hover::after,
-[data-tooltip][data-position="bottom right"]:hover:after {
+[data-tooltip][data-position="bottom right"]:hover::after {
   -webkit-transform: scale(1) !important;
           transform: scale(1) !important;
 }
-[data-tooltip][data-variation~="fixed"]:after {
+[data-tooltip][data-variation~="fixed"]::after {
   white-space: normal;
   width: 250px;
 }
-[data-tooltip][data-variation*="wide fixed"]:after {
+[data-tooltip][data-variation*="wide fixed"]::after {
   width: 350px;
 }
-[data-tooltip][data-variation*="very wide fixed"]:after {
+[data-tooltip][data-variation*="very wide fixed"]::after {
   width: 550px;
 }
 @media only screen and (max-width: 767.98px) {
-  [data-tooltip][data-variation~="fixed"]:after {
+  [data-tooltip][data-variation~="fixed"]::after {
     width: 250px;
   }
 }
@@ -224,223 +224,221 @@
 
 
 /* Arrow */
-[data-tooltip][data-inverted]:before {
+[data-tooltip][data-inverted]::before {
   -webkit-box-shadow: none !important;
           box-shadow: none !important;
 }
 
 /* Arrow Position */
-[data-tooltip][data-inverted]:before {
+[data-tooltip][data-inverted]::before {
   background: #1B1C1D;
 }
 
 /* Popup  */
-[data-tooltip][data-inverted]:after {
+[data-tooltip][data-inverted]::after {
   background: #1B1C1D;
   color: #FFFFFF;
   border: none;
   -webkit-box-shadow: none;
           box-shadow: none;
 }
-[data-tooltip][data-inverted]:after .header {
-  background: none;
-  color: #FFFFFF;
-}
 
 /*--------------
         Position
     ---------------*/
 
-[data-position~="top"][data-tooltip]:before {
+[data-position~="top"][data-tooltip]::before {
   background: #FFFFFF;
 }
 
 /* Top Center */
-[data-position="top center"][data-tooltip]:after {
+[data-position="top center"][data-tooltip]::after {
   top: auto;
   right: auto;
   left: 50%;
   bottom: 100%;
   -webkit-transform: translateX(-50%);
           transform: translateX(-50%);
-  margin-bottom: 0.58333333em;
+  margin-bottom: 0.5em;
 }
-[data-position="top center"][data-tooltip]:before {
+[data-position="top center"][data-tooltip]::before {
   top: auto;
   right: auto;
   bottom: 100%;
   left: 50%;
   background: #FFFFFF;
-  margin-left: -0.08333333rem;
+  margin-left: -0.07142857rem;
-  margin-bottom: 0.16666667rem;
+  margin-bottom: 0.14285714rem;
 }
 
 /* Top Left */
-[data-position="top left"][data-tooltip]:after {
+[data-position="top left"][data-tooltip]::after {
   top: auto;
   right: auto;
   left: 0;
   bottom: 100%;
-  margin-bottom: 0.58333333em;
+  margin-bottom: 0.5em;
 }
-[data-position="top left"][data-tooltip]:before {
+[data-position="top left"][data-tooltip]::before {
   top: auto;
   right: auto;
   bottom: 100%;
   left: 1em;
-  margin-left: -0.08333333rem;
+  margin-left: -0.07142857rem;
-  margin-bottom: 0.16666667rem;
+  margin-bottom: 0.14285714rem;
 }
 
 /* Top Right */
-[data-position="top right"][data-tooltip]:after {
+[data-position="top right"][data-tooltip]::after {
   top: auto;
   left: auto;
   right: 0;
   bottom: 100%;
-  margin-bottom: 0.58333333em;
+  margin-bottom: 0.5em;
 }
-[data-position="top right"][data-tooltip]:before {
+[data-position="top right"][data-tooltip]::before {
   top: auto;
   left: auto;
   bottom: 100%;
   right: 1em;
-  margin-left: -0.08333333rem;
+  margin-left: -0.07142857rem;
-  margin-bottom: 0.16666667rem;
+  margin-bottom: 0.14285714rem;
 }
-[data-position~="bottom"][data-tooltip]:before {
+[data-position~="bottom"][data-tooltip]::before {
   background: #FFFFFF;
   -webkit-box-shadow: -1px -1px 0 0 #bababc;
           box-shadow: -1px -1px 0 0 #bababc;
 }
 
 /* Bottom Center */
-[data-position="bottom center"][data-tooltip]:after {
+[data-position="bottom center"][data-tooltip]::after {
   bottom: auto;
   right: auto;
   left: 50%;
   top: 100%;
   -webkit-transform: translateX(-50%);
           transform: translateX(-50%);
-  margin-top: 0.58333333em;
+  margin-top: 0.5em;
 }
-[data-position="bottom center"][data-tooltip]:before {
+[data-position="bottom center"][data-tooltip]::before {
   bottom: auto;
   right: auto;
   top: 100%;
   left: 50%;
-  margin-left: -0.08333333rem;
+  margin-left: -0.07142857rem;
-  margin-top: 0.36666667em;
+  margin-top: 0.30714286em;
-  -webkit-transform-origin: center top;
-          transform-origin: center top;
 }
 
 /* Bottom Left */
-[data-position="bottom left"][data-tooltip]:after {
+[data-position="bottom left"][data-tooltip]::after {
   left: 0;
   top: 100%;
-  margin-top: 0.58333333em;
+  margin-top: 0.5em;
 }
-[data-position="bottom left"][data-tooltip]:before {
+[data-position="bottom left"][data-tooltip]::before {
   bottom: auto;
   right: auto;
   top: 100%;
   left: 1em;
-  margin-left: -0.08333333rem;
+  margin-left: -0.07142857rem;
-  margin-top: 0.16666667rem;
+  margin-top: 0.14285714rem;
 }
 
 /* Bottom Right */
-[data-position="bottom right"][data-tooltip]:after {
+[data-position="bottom right"][data-tooltip]::after {
   right: 0;
   top: 100%;
-  margin-top: 0.58333333em;
+  margin-top: 0.5em;
 }
-[data-position="bottom right"][data-tooltip]:before {
+[data-position="bottom right"][data-tooltip]::before {
   bottom: auto;
   left: auto;
   top: 100%;
   right: 1em;
-  margin-left: -0.16666667rem;
+  margin-left: -0.14285714rem;
-  margin-top: 0.08333333rem;
+  margin-top: 0.07142857rem;
 }
 
 /* Left Center */
-[data-position="left center"][data-tooltip]:after {
+[data-position="left center"][data-tooltip]::after {
   right: 100%;
   top: 50%;
-  margin-right: 0.58333333em;
+  margin-right: 0.5em;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
 }
-[data-position="left center"][data-tooltip]:before {
+[data-position="left center"][data-tooltip]::before {
   right: 100%;
   top: 50%;
-  margin-top: -0.16666667rem;
+  margin-top: -0.14285714rem;
-  margin-right: -0.08333333rem;
+  margin-right: -0.07142857rem;
   background: #FFFFFF;
   -webkit-box-shadow: 1px -1px 0 0 #bababc;
           box-shadow: 1px -1px 0 0 #bababc;
 }
 
 /* Right Center */
-[data-position="right center"][data-tooltip]:after {
+[data-position="right center"][data-tooltip]::after {
   left: 100%;
   top: 50%;
-  margin-left: 0.58333333em;
+  margin-left: 0.5em;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
 }
-[data-position="right center"][data-tooltip]:before {
+[data-position="right center"][data-tooltip]::before {
   left: 100%;
   top: 50%;
-  margin-top: -0.08333333rem;
+  margin-top: -0.07142857rem;
-  margin-left: 0.16666667rem;
+  margin-left: 0.14285714rem;
   background: #FFFFFF;
   -webkit-box-shadow: -1px 1px 0 0 #bababc;
           box-shadow: -1px 1px 0 0 #bababc;
 }
 
 /* Inverted Arrow Color */
-[data-inverted][data-position~="bottom"][data-tooltip]:before {
+[data-inverted][data-position~="bottom"][data-tooltip]::before {
   background: #1B1C1D;
   -webkit-box-shadow: -1px -1px 0 0 #bababc;
           box-shadow: -1px -1px 0 0 #bababc;
 }
-[data-inverted][data-position="left center"][data-tooltip]:before {
+[data-inverted][data-position="left center"][data-tooltip]::before {
   background: #1B1C1D;
   -webkit-box-shadow: 1px -1px 0 0 #bababc;
           box-shadow: 1px -1px 0 0 #bababc;
 }
-[data-inverted][data-position="right center"][data-tooltip]:before {
+[data-inverted][data-position="right center"][data-tooltip]::before {
   background: #1B1C1D;
   -webkit-box-shadow: -1px 1px 0 0 #bababc;
           box-shadow: -1px 1px 0 0 #bababc;
 }
-[data-inverted][data-position~="top"][data-tooltip]:before {
+[data-inverted][data-position~="top"][data-tooltip]::before {
   background: #1B1C1D;
 }
-[data-position~="bottom"][data-tooltip]:before {
+[data-position~="bottom"][data-tooltip]::before {
   -webkit-transform-origin: center bottom;
           transform-origin: center bottom;
 }
-[data-position~="bottom"][data-tooltip]:after {
+[data-position~="bottom"][data-tooltip]::after {
   -webkit-transform-origin: center top;
           transform-origin: center top;
 }
-[data-position="left center"][data-tooltip]:before {
+[data-position="bottom center"][data-tooltip]::before {
+  -webkit-transform-origin: center top;
+          transform-origin: center top;
+}
+[data-position="left center"][data-tooltip]::before {
   -webkit-transform-origin: top center;
           transform-origin: top center;
 }
-[data-position="left center"][data-tooltip]:after {
+[data-position="left center"][data-tooltip]::after {
   -webkit-transform-origin: right center;
           transform-origin: right center;
 }
-[data-position="right center"][data-tooltip]:before {
+[data-position="right center"][data-tooltip]::before {
   -webkit-transform-origin: right center;
           transform-origin: right center;
 }
-[data-position="right center"][data-tooltip]:after {
+[data-position="right center"][data-tooltip]::after {
   -webkit-transform-origin: left center;
           transform-origin: left center;
 }
@@ -449,7 +447,7 @@
         Basic
     ---------------*/
 
-[data-tooltip][data-variation~="basic"]:before {
+[data-tooltip][data-variation~="basic"]::before {
   display: none;
 }
 
@@ -463,7 +461,7 @@
 
 /* Extending from Top */
 .ui.top.popup {
-  margin: 0 0 0.83333333em;
+  margin: 0 0 0.71428571em;
 }
 .ui.top.left.popup {
   -webkit-transform-origin: left bottom;
@@ -480,19 +478,19 @@
 
 /* Extending from Vertical Center */
 .ui.left.center.popup {
-  margin: 0 0.83333333em 0 0;
+  margin: 0 0.71428571em 0 0;
   -webkit-transform-origin: right 50%;
           transform-origin: right 50%;
 }
 .ui.right.center.popup {
-  margin: 0 0 0 0.83333333em;
+  margin: 0 0 0 0.71428571em;
   -webkit-transform-origin: left 50%;
           transform-origin: left 50%;
 }
 
 /* Extending from Bottom */
 .ui.bottom.popup {
-  margin: 0.83333333em 0 0;
+  margin: 0.71428571em 0 0;
 }
 .ui.bottom.left.popup {
   -webkit-transform-origin: left top;
@@ -514,9 +512,9 @@
 
 /*--- Below ---*/
 
-.ui.bottom.center.popup:before {
+.ui.bottom.center.popup::before {
-  margin-left: -0.36666667em;
+  margin-left: -0.30714286em;
-  top: -0.36666667em;
+  top: -0.30714286em;
   left: 50%;
   right: auto;
   bottom: auto;
@@ -527,8 +525,8 @@
   margin-left: 0;
 }
 /*rtl:rename*/
-.ui.bottom.left.popup:before {
+.ui.bottom.left.popup::before {
-  top: -0.36666667em;
+  top: -0.30714286em;
   left: 1em;
   right: auto;
   bottom: auto;
@@ -540,8 +538,8 @@
   margin-right: 0;
 }
 /*rtl:rename*/
-.ui.bottom.right.popup:before {
+.ui.bottom.right.popup::before {
-  top: -0.36666667em;
+  top: -0.30714286em;
   right: 1em;
   bottom: auto;
   left: auto;
@@ -552,19 +550,19 @@
 
 /*--- Above ---*/
 
-.ui.top.center.popup:before {
+.ui.top.center.popup::before {
   top: auto;
   right: auto;
-  bottom: -0.36666667em;
+  bottom: -0.30714286em;
   left: 50%;
-  margin-left: -0.36666667em;
+  margin-left: -0.30714286em;
 }
 .ui.top.left.popup {
   margin-left: 0;
 }
 /*rtl:rename*/
-.ui.top.left.popup:before {
+.ui.top.left.popup::before {
-  bottom: -0.36666667em;
+  bottom: -0.30714286em;
   left: 1em;
   top: auto;
   right: auto;
@@ -574,8 +572,8 @@
   margin-right: 0;
 }
 /*rtl:rename*/
-.ui.top.right.popup:before {
+.ui.top.right.popup::before {
-  bottom: -0.36666667em;
+  bottom: -0.30714286em;
   right: 1em;
   top: auto;
   left: auto;
@@ -585,12 +583,12 @@
 /*--- Left Center ---*/
 
 /*rtl:rename*/
-.ui.left.center.popup:before {
+.ui.left.center.popup::before {
   top: 50%;
-  right: -0.36666667em;
+  right: -0.30714286em;
   bottom: auto;
   left: auto;
-  margin-top: -0.36666667em;
+  margin-top: -0.30714286em;
   -webkit-box-shadow: 1px -1px 0 0 #bababc;
           box-shadow: 1px -1px 0 0 #bababc;
 }
@@ -598,37 +596,37 @@
 /*--- Right Center  ---*/
 
 /*rtl:rename*/
-.ui.right.center.popup:before {
+.ui.right.center.popup::before {
   top: 50%;
-  left: -0.36666667em;
+  left: -0.30714286em;
   bottom: auto;
   right: auto;
-  margin-top: -0.36666667em;
+  margin-top: -0.30714286em;
   -webkit-box-shadow: -1px 1px 0 0 #bababc;
           box-shadow: -1px 1px 0 0 #bababc;
 }
-.ui.right.center.popup:before,
+.ui.right.center.popup::before,
-.ui.left.center.popup:before {
+.ui.left.center.popup::before {
   background: #FFFFFF;
 }
 
 /* Arrow Color By Location */
-.ui.bottom.popup:before {
+.ui.bottom.popup::before {
   background: #FFFFFF;
 }
-.ui.top.popup:before {
+.ui.top.popup::before {
   background: #FFFFFF;
 }
 
 /* Inverted Arrow Color */
-.ui.inverted.bottom.popup:before {
+.ui.inverted.bottom.popup::before {
   background: #1B1C1D;
 }
-.ui.inverted.right.center.popup:before,
+.ui.inverted.right.center.popup::before,
-.ui.inverted.left.center.popup:before {
+.ui.inverted.left.center.popup::before {
   background: #1B1C1D;
 }
-.ui.inverted.top.popup:before {
+.ui.inverted.top.popup::before {
   background: #1B1C1D;
 }
 
@@ -675,7 +673,7 @@
        Basic
   ---------------*/
 
-.ui.basic.popup:before {
+.ui.basic.popup::before {
   display: none;
 }
 .ui.fixed.popup {
@@ -735,7 +733,7 @@
   background-color: none;
   color: #FFFFFF;
 }
-.ui.inverted.popup:before {
+.ui.inverted.popup::before {
   background-color: #1B1C1D;
   -webkit-box-shadow: none !important;
           box-shadow: none !important;
@@ -757,53 +755,53 @@
   font-size: 1rem;
 }
 .ui.mini.popup {
-  font-size: 0.75rem;
+  font-size: 0.78571429rem;
 }
-[data-tooltip][data-variation~="mini"]:before,
+[data-tooltip][data-variation~="mini"]::before,
-[data-tooltip][data-variation~="mini"]:after {
+[data-tooltip][data-variation~="mini"]::after {
-  font-size: 0.75rem;
+  font-size: 0.78571429rem;
 }
 .ui.tiny.popup {
-  font-size: 0.83333333rem;
+  font-size: 0.85714286rem;
 }
-[data-tooltip][data-variation~="tiny"]:before,
+[data-tooltip][data-variation~="tiny"]::before,
-[data-tooltip][data-variation~="tiny"]:after {
+[data-tooltip][data-variation~="tiny"]::after {
-  font-size: 0.83333333rem;
+  font-size: 0.85714286rem;
 }
 .ui.small.popup {
-  font-size: 0.91666667rem;
+  font-size: 0.92857143rem;
 }
-[data-tooltip][data-variation~="small"]:before,
+[data-tooltip][data-variation~="small"]::before,
-[data-tooltip][data-variation~="small"]:after {
+[data-tooltip][data-variation~="small"]::after {
-  font-size: 0.91666667rem;
+  font-size: 0.92857143rem;
 }
 .ui.large.popup {
-  font-size: 1.16666667rem;
+  font-size: 1.14285714rem;
 }
-[data-tooltip][data-variation~="large"]:before,
+[data-tooltip][data-variation~="large"]::before,
-[data-tooltip][data-variation~="large"]:after {
+[data-tooltip][data-variation~="large"]::after {
-  font-size: 1.16666667rem;
+  font-size: 1.14285714rem;
 }
 .ui.big.popup {
-  font-size: 1.25rem;
+  font-size: 1.28571429rem;
 }
-[data-tooltip][data-variation~="big"]:before,
+[data-tooltip][data-variation~="big"]::before,
-[data-tooltip][data-variation~="big"]:after {
+[data-tooltip][data-variation~="big"]::after {
-  font-size: 1.25rem;
+  font-size: 1.28571429rem;
 }
 .ui.huge.popup {
-  font-size: 1.41666667rem;
+  font-size: 1.42857143rem;
 }
-[data-tooltip][data-variation~="huge"]:before,
+[data-tooltip][data-variation~="huge"]::before,
-[data-tooltip][data-variation~="huge"]:after {
+[data-tooltip][data-variation~="huge"]::after {
-  font-size: 1.41666667rem;
+  font-size: 1.42857143rem;
 }
 .ui.massive.popup {
-  font-size: 1.75rem;
+  font-size: 1.71428571rem;
 }
-[data-tooltip][data-variation~="massive"]:before,
+[data-tooltip][data-variation~="massive"]::before,
-[data-tooltip][data-variation~="massive"]:after {
+[data-tooltip][data-variation~="massive"]::after {
-  font-size: 1.75rem;
+  font-size: 1.71428571rem;
 }
 
 

semantic/dist/components/popup.js

@@ -62,11 +62,11 @@ $.fn.popup = function(parameters) {
         moduleNamespace    = 'module-' + namespace,
 
         $module            = $(this),
-        $context           = $(settings.context),
+        $context           = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context),
-        $scrollContext     = $(settings.scrollContext),
+        $scrollContext     = [window,document].indexOf(settings.scrollContext) < 0 ? $(document).find(settings.scrollContext) : $(settings.scrollContext),
-        $boundary          = $(settings.boundary),
+        $boundary          = [window,document].indexOf(settings.boundary) < 0 ? $(document).find(settings.boundary) : $(settings.boundary),
         $target            = (settings.target)
-          ? $(settings.target)
+          ? ([window,document].indexOf(settings.target) < 0 ? $(document).find(settings.target) : $(settings.target))
           : $module,
 
         $popup,
@@ -121,8 +121,8 @@ $.fn.popup = function(parameters) {
         },
 
         refresh: function() {
-          if(settings.popup) {
+          if(settings.popup && typeof settings.popup === 'string') {
-            $popup = $(settings.popup).eq(0);
+            $popup = $(document).find(settings.popup).eq(0);
           }
           else {
             if(settings.inline) {
@@ -286,8 +286,8 @@ $.fn.popup = function(parameters) {
             }
             settings.onCreate.call($popup, element);
           }
-          else if(settings.popup) {
+          else if(settings.popup && typeof settings.popup === 'string') {
-            $(settings.popup).data(metadata.activator, $module);
+            $(document).find(settings.popup).data(metadata.activator, $module);
             module.verbose('Used popup specified in settings');
             module.refresh();
             if(settings.hoverable) {
@@ -309,7 +309,7 @@ $.fn.popup = function(parameters) {
         },
 
         createID: function() {
-          id = (Math.random().toString(16) + '000000000').substr(2, 8);
+          id = (Math.random().toString(16) + '000000000').slice(2, 10);
           elementNamespace = '.' + id;
           module.verbose('Creating unique id for element', id);
         },
@@ -368,7 +368,7 @@ $.fn.popup = function(parameters) {
         },
 
         hideAll: function() {
-          $(selector.popup)
+          $(document).find(selector.popup)
             .filter('.' + className.popupVisible)
             .each(function() {
               $(this)

semantic/dist/components/progress.css

@@ -25,7 +25,7 @@
           box-shadow: none;
   background: rgba(0, 0, 0, 0.1);
   padding: 0;
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
 }
 .ui.progress:first-child {
   margin: 0 0 2.5em;
@@ -48,7 +48,7 @@
   width: 0;
   min-width: 2em;
   background: #888888;
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
   -webkit-transition: width 0.1s ease, background-color 0.1s ease;
   transition: width 0.1s ease, background-color 0.1s ease;
   overflow: hidden;
@@ -69,7 +69,7 @@
   white-space: nowrap;
   position: absolute;
   width: auto;
-  font-size: 0.91666667em;
+  font-size: 0.92857143em;
   top: 50%;
   right: 0.5em;
   left: auto;
@@ -328,7 +328,7 @@
   right: 0;
   bottom: 0;
   background: #FFFFFF;
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
   -webkit-animation: progress-active 2s ease infinite;
           animation: progress-active 2s ease infinite;
   -webkit-transform-origin: left;
@@ -426,7 +426,7 @@
   height: 0.2rem;
   padding: 0;
   overflow: hidden;
-  border-radius: 0 0 0.33333333rem 0.33333333rem;
+  border-radius: 0 0 0.28571429rem 0.28571429rem;
 }
 .ui.progress.attached .bar {
   border-radius: 0;
@@ -436,7 +436,7 @@
 .ui.progress.top.attached,
 .ui.progress.top.attached .bar {
   top: 0;
-  border-radius: 0.33333333rem 0.33333333rem 0 0;
+  border-radius: 0.28571429rem 0.28571429rem 0 0;
 }
 .ui.progress.top.attached .bar {
   border-radius: 0;
@@ -464,7 +464,7 @@
 .ui.indeterminate.primary.progress .bar::before,
 .ui.primary.progress .bar,
 .ui.progress .primary.bar {
-  background-color: #6435C9;
+  background-color: #2185D0;
 }
 .ui.inverted.indeterminate.primary.progress .bar::before,
 .ui.primary.inverted.progress .bar,
@@ -623,43 +623,43 @@
   height: 1.75em;
 }
 .ui.mini.progress {
-  font-size: 0.75rem;
+  font-size: 0.78571429rem;
 }
 .ui.mini.progress .bar {
   height: 0.3em;
 }
 .ui.tiny.progress {
-  font-size: 0.83333333rem;
+  font-size: 0.85714286rem;
 }
 .ui.tiny.progress .bar {
   height: 0.5em;
 }
 .ui.small.progress {
-  font-size: 0.91666667rem;
+  font-size: 0.92857143rem;
 }
 .ui.small.progress .bar {
   height: 1em;
 }
 .ui.large.progress {
-  font-size: 1.16666667rem;
+  font-size: 1.14285714rem;
 }
 .ui.large.progress .bar {
   height: 2.5em;
 }
 .ui.big.progress {
-  font-size: 1.25rem;
+  font-size: 1.28571429rem;
 }
 .ui.big.progress .bar {
   height: 3.5em;
 }
 .ui.huge.progress {
-  font-size: 1.41666667rem;
+  font-size: 1.42857143rem;
 }
 .ui.huge.progress .bar {
   height: 4em;
 }
 .ui.massive.progress {
-  font-size: 1.75rem;
+  font-size: 1.71428571rem;
 }
 .ui.massive.progress .bar {
   height: 5em;
@@ -683,7 +683,7 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
   -webkit-animation: progress-pulsating 2s ease infinite;
           animation: progress-pulsating 2s ease infinite;
   -webkit-transform-origin: center;

semantic/dist/components/progress.js

@@ -93,7 +93,7 @@ $.fn.progress = function(parameters) {
            *
            * @param min A minimum value within multiple values
            * @param total A total amount of multiple values
-           * @returns {number} A precison. Could be 1, 10, 100, ... 1e+10.
+           * @returns {number} A precision. Could be 1, 10, 100, ... 1e+10.
            */
           derivePrecision: function(min, total) {
             var precisionPower = 0
@@ -607,6 +607,9 @@ $.fn.progress = function(parameters) {
             }
             else {
               module.remove.active();
+              module.remove.warning();
+              module.remove.error();
+              module.remove.success();
               module.set.label(settings.text.active);
             }
           },
@@ -991,7 +994,7 @@ $.fn.progress.settings = {
     nonNumeric      : 'Progress value is non numeric',
     tooHigh         : 'Value specified is above 100%',
     tooLow          : 'Value specified is below 0%',
-    sumExceedsTotal : 'Sum of multple values exceed total',
+    sumExceedsTotal : 'Sum of multiple values exceed total',
   },
 
   regExp: {

semantic/dist/components/reset.css

@@ -16,8 +16,8 @@
 
 /* Border-Box */
 *,
-*:before,
+*::before,
-*:after {
+*::after {
   -webkit-box-sizing: inherit;
           box-sizing: inherit;
 }

semantic/dist/components/reset.min.css

@@ -6,4 +6,4 @@
  * Released under the MIT license
  * http://opensource.org/licenses/MIT
  *
- */*,:after,:before{-webkit-box-sizing:inherit;box-sizing:inherit}html{-webkit-box-sizing:border-box;box-sizing:border-box}input[type=email],input[type=password],input[type=search],input[type=text]{-webkit-appearance:none;-moz-appearance:none}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
+ */*,::after,::before{-webkit-box-sizing:inherit;box-sizing:inherit}html{-webkit-box-sizing:border-box;box-sizing:border-box}input[type=email],input[type=password],input[type=search],input[type=text]{-webkit-appearance:none;-moz-appearance:none}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

semantic/dist/components/segment.css

@@ -20,7 +20,7 @@
           box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
   margin: 1rem 0;
   padding: 1em 1em;
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
   border: 1px solid rgba(34, 36, 38, 0.15);
 }
 .ui.segment:first-child {
@@ -40,10 +40,10 @@
   -webkit-box-shadow: none;
           box-shadow: none;
   border: none;
-  border-bottom: 1px solid rgba(34, 36, 38, 0.15);
+  border-top: 1px solid rgba(34, 36, 38, 0.15);
 }
-.ui.vertical.segment:last-child {
+.ui.vertical.segment:first-child {
-  border-bottom: none;
+  border-top: none;
 }
 
 /*-------------------
@@ -86,7 +86,7 @@
 }
 .ui.grid.segment {
   margin: 1rem 0;
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
 }
 
 /* Table */
@@ -175,7 +175,7 @@
 .ui.placeholder.segment > .inline > .button {
   display: inline-block;
   width: auto;
-  margin: 0 0.41666667rem 0 0;
+  margin: 0 0.35714286rem 0 0;
 }
 .ui.placeholder.segment > .inline > .button:last-child {
   margin-right: 0;
@@ -198,10 +198,10 @@
 .ui.piled.segment:last-child {
   margin-bottom: 0;
 }
-.ui.piled.segments:after,
+.ui.piled.segments::after,
-.ui.piled.segments:before,
+.ui.piled.segments::before,
-.ui.piled.segment:after,
+.ui.piled.segment::after,
-.ui.piled.segment:before {
+.ui.piled.segment::before {
   background-color: #FFFFFF;
   visibility: visible;
   content: '';
@@ -214,15 +214,15 @@
   -webkit-box-shadow: '';
           box-shadow: '';
 }
-.ui.piled.segments:before,
+.ui.piled.segments::before,
-.ui.piled.segment:before {
+.ui.piled.segment::before {
   -webkit-transform: rotate(-1.2deg);
           transform: rotate(-1.2deg);
   top: 0;
   z-index: -2;
 }
-.ui.piled.segments:after,
+.ui.piled.segments::after,
-.ui.piled.segment:after {
+.ui.piled.segment::after {
   -webkit-transform: rotate(1.2deg);
           transform: rotate(1.2deg);
   top: 0;
@@ -252,10 +252,10 @@
 .ui.stacked.segment {
   padding-bottom: 1.4em;
 }
-.ui.stacked.segments:before,
+.ui.stacked.segments::before,
-.ui.stacked.segments:after,
+.ui.stacked.segments::after,
-.ui.stacked.segment:before,
+.ui.stacked.segment::before,
-.ui.stacked.segment:after {
+.ui.stacked.segment::after {
   content: '';
   position: absolute;
   bottom: -3px;
@@ -266,23 +266,23 @@
   height: 6px;
   visibility: visible;
 }
-.ui.stacked.segments:before,
+.ui.stacked.segments::before,
-.ui.stacked.segment:before {
+.ui.stacked.segment::before {
   display: none;
 }
 
 /* Add additional page */
-.ui.tall.stacked.segments:before,
+.ui.tall.stacked.segments::before,
-.ui.tall.stacked.segment:before {
+.ui.tall.stacked.segment::before {
   display: block;
   bottom: 0;
 }
 
 /* Inverted */
-.ui.stacked.inverted.segments:before,
+.ui.stacked.inverted.segments::before,
-.ui.stacked.inverted.segments:after,
+.ui.stacked.inverted.segments::after,
-.ui.stacked.inverted.segment:before,
+.ui.stacked.inverted.segment::before,
-.ui.stacked.inverted.segment:after {
+.ui.stacked.inverted.segment::after {
   background-color: rgba(0, 0, 0, 0.03);
   border-top: 1px solid rgba(34, 36, 38, 0.35);
 }
@@ -366,7 +366,7 @@
   border: 1px solid rgba(34, 36, 38, 0.15);
   -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
           box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
 }
 .ui.segments:first-child {
   margin-top: 0;
@@ -393,7 +393,7 @@
   border-top: none;
   margin-top: 0;
   margin-bottom: 0;
-  border-radius: 0.33333333rem 0.33333333rem 0 0;
+  border-radius: 0.28571429rem 0.28571429rem 0 0;
 }
 
 /* Bottom */
@@ -404,12 +404,12 @@
   margin-bottom: 0;
   -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), none;
           box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), none;
-  border-radius: 0 0 0.33333333rem 0.33333333rem;
+  border-radius: 0 0 0.28571429rem 0.28571429rem;
 }
 
 /* Only */
 .ui.segments:not(.horizontal) > .segment:only-child {
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
 }
 
 /* Nested Group */
@@ -438,7 +438,7 @@
   -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
           box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
   margin: 1rem 0;
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
   border: 1px solid rgba(34, 36, 38, 0.15);
 }
 .ui.stackable.horizontal.segments {
@@ -483,10 +483,10 @@
   border-left: none;
 }
 .ui.horizontal.segments > .segment:first-child {
-  border-radius: 0.33333333rem 0 0 0.33333333rem;
+  border-radius: 0.28571429rem 0 0 0.28571429rem;
 }
 .ui.horizontal.segments > .segment:last-child {
-  border-radius: 0 0.33333333rem 0.33333333rem 0;
+  border-radius: 0 0.28571429rem 0.28571429rem 0;
 }
 
 /* Equal Width */
@@ -531,8 +531,8 @@
   -webkit-transition: all 0s linear;
   transition: all 0s linear;
 }
-.ui.loading.segments:before,
+.ui.loading.segments::before,
-.ui.loading.segment:before {
+.ui.loading.segment::before {
   position: absolute;
   content: '';
   top: 0;
@@ -540,11 +540,11 @@
   background: rgba(255, 255, 255, 0.8);
   width: 100%;
   height: 100%;
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
   z-index: 100;
 }
-.ui.loading.segments:after,
+.ui.loading.segments::after,
-.ui.loading.segment:after {
+.ui.loading.segment::after {
   position: absolute;
   content: '';
   top: 50%;
@@ -586,7 +586,7 @@
          Clearing
   --------------------*/
 
-.ui.clearing.segment:after {
+.ui.clearing.segment::after {
   content: "";
   display: block;
   clear: both;
@@ -743,7 +743,7 @@
 }
 
 /* Attached */
-.ui.inverted.attached.segment {
+.ui.ui.inverted.attached.segment {
   border-color: #555555;
 }
 
@@ -752,8 +752,8 @@
 .ui.inverted.loading.segment {
   color: #FFFFFF;
 }
-.ui.inverted.loading.segments:before,
+.ui.inverted.loading.segments::before,
-.ui.inverted.loading.segment:before {
+.ui.inverted.loading.segment::before {
   background: rgba(0, 0, 0, 0.85);
 }
 
@@ -801,23 +801,28 @@
   max-width: calc(100% + 2px);
   -webkit-box-shadow: none;
           box-shadow: none;
+}
+.ui.attached.segment:not(.basic) {
   border: 1px solid #D4D4D5;
 }
-.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: 0;
   margin-top: 1rem;
-  border-radius: 0.33333333rem 0.33333333rem 0 0;
+  border-radius: 0.28571429rem 0.28571429rem 0 0;
 }
 .ui.segment[class*="top attached"]:first-child {
   margin-top: 0;
 }
+.ui.tab.segment[class*="top attached"]:first-child {
+  margin-top: 1rem;
+}
 
 /* Bottom */
 .ui.segment[class*="bottom attached"] {
@@ -827,9 +832,12 @@
   margin-bottom: 1rem;
   -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), none;
           box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), none;
-  border-radius: 0 0 0.33333333rem 0.33333333rem;
+  border-radius: 0 0 0.28571429rem 0.28571429rem;
 }
 .ui.segment[class*="bottom attached"]:last-child {
+  margin-bottom: 0;
+}
+.ui.tab.segment[class*="bottom attached"]:last-child {
   margin-bottom: 1rem;
 }
 
@@ -846,6 +854,82 @@
   padding-right: 0;
 }
 
+/*--------------
+    Scrolling
+  ---------------*/
+
+.ui.scrolling.segment {
+  overflow: auto;
+}
+@media only screen and (max-width: 767.98px) {
+  .ui.scrolling.segment.short {
+    max-height: 11.25em;
+  }
+  .ui.scrolling.segment[class*="very short"] {
+    max-height: 7.5em;
+  }
+  .ui.scrolling.segment {
+    max-height: 15em;
+  }
+  .ui.scrolling.segment.long {
+    max-height: 30em;
+  }
+  .ui.scrolling.segment[class*="very long"] {
+    max-height: 45em;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .ui.scrolling.segment.short {
+    max-height: 13.5em;
+  }
+  .ui.scrolling.segment[class*="very short"] {
+    max-height: 9em;
+  }
+  .ui.scrolling.segment {
+    max-height: 18em;
+  }
+  .ui.scrolling.segment.long {
+    max-height: 36em;
+  }
+  .ui.scrolling.segment[class*="very long"] {
+    max-height: 54em;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .ui.scrolling.segment.short {
+    max-height: 18em;
+  }
+  .ui.scrolling.segment[class*="very short"] {
+    max-height: 12em;
+  }
+  .ui.scrolling.segment {
+    max-height: 24em;
+  }
+  .ui.scrolling.segment.long {
+    max-height: 48em;
+  }
+  .ui.scrolling.segment[class*="very long"] {
+    max-height: 72em;
+  }
+}
+@media only screen and (min-width: 1920px) {
+  .ui.scrolling.segment.short {
+    max-height: 22.5em;
+  }
+  .ui.scrolling.segment[class*="very short"] {
+    max-height: 15em;
+  }
+  .ui.scrolling.segment {
+    max-height: 30em;
+  }
+  .ui.scrolling.segment.long {
+    max-height: 60em;
+  }
+  .ui.scrolling.segment[class*="very long"] {
+    max-height: 90em;
+  }
+}
+
 /*-------------------
         Size
 --------------------*/
@@ -856,31 +940,31 @@
 }
 .ui.mini.segments .segment,
 .ui.mini.segment {
-  font-size: 0.75rem;
+  font-size: 0.78571429rem;
 }
 .ui.tiny.segments .segment,
 .ui.tiny.segment {
-  font-size: 0.83333333rem;
+  font-size: 0.85714286rem;
 }
 .ui.small.segments .segment,
 .ui.small.segment {
-  font-size: 0.91666667rem;
+  font-size: 0.92857143rem;
 }
 .ui.large.segments .segment,
 .ui.large.segment {
-  font-size: 1.16666667rem;
+  font-size: 1.14285714rem;
 }
 .ui.big.segments .segment,
 .ui.big.segment {
-  font-size: 1.25rem;
+  font-size: 1.28571429rem;
 }
 .ui.huge.segments .segment,
 .ui.huge.segment {
-  font-size: 1.41666667rem;
+  font-size: 1.42857143rem;
 }
 .ui.massive.segments .segment,
 .ui.massive.segment {
-  font-size: 1.75rem;
+  font-size: 1.71428571rem;
 }
 
 

semantic/dist/components/sidebar.css

@@ -102,7 +102,7 @@ body.pushable.dimmed {
 }
 .pushable:not(body) > .ui.sidebar,
 .pushable:not(body) > .fixed,
-.pushable:not(body) > .pusher:after {
+.pushable:not(body) > .pusher::after {
   position: absolute;
 }
 
@@ -130,7 +130,6 @@ body.pushable.dimmed {
   position: relative;
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
-  overflow: hidden;
   min-height: 100%;
   -webkit-transition: -webkit-transform 500ms ease;
   transition: -webkit-transform 500ms ease;
@@ -141,15 +140,18 @@ body.pushable.dimmed {
 /* Pusher should inherit background from context */
   background: inherit;
 }
+.pushable > .pusher:not(.overflowing) {
+  overflow: hidden;
+}
 body.pushable > .pusher {
-  background: #F4F4F4;
+  background: #FFFFFF;
 }
 
 /*--------------
      Dimmer
 ---------------*/
 
-.pushable > .pusher:after {
+.pushable > .pusher::after {
   position: fixed;
   top: 0;
   right: 0;
@@ -181,7 +183,7 @@ body.pushable > .pusher {
      Dimmed
 ---------------*/
 
-.pushable > .pusher.dimmed:after {
+.pushable > .pusher.dimmed::after {
   width: 100% !important;
   height: 100% !important;
   opacity: 1 !important;

semantic/dist/components/sidebar.js

@@ -66,7 +66,7 @@ $.fn.sidebar = function(parameters) {
         moduleNamespace = 'module-' + namespace,
 
         $module         = $(this),
-        $context        = $(settings.context),
+        $context        = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context),
 
         $sidebars       = $module.children(selector.sidebar),
         $fixed          = $context.children(selector.fixed),
@@ -118,7 +118,7 @@ $.fn.sidebar = function(parameters) {
 
         create: {
           id: function() {
-            id = (Math.random().toString(16) + '000000000').substr(2,8);
+            id = (Math.random().toString(16) + '000000000').slice(2, 10);
             elementNamespace = '.' + id;
             module.verbose('Creating unique id for element', id);
           }
@@ -261,7 +261,7 @@ $.fn.sidebar = function(parameters) {
               if(direction === 'left' || direction === 'right') {
                 module.debug('Adding CSS rules for animation distance', width);
                 style  += ''
-                  + ' body.pushable > .ui.visible.' + direction + '.sidebar ~ .pusher:after {'
+                  + ' body.pushable > .ui.visible.' + direction + '.sidebar ~ .pusher::after {'
                   + '   -webkit-transform: translate3d('+ distance[direction] + 'px, 0, 0);'
                   + '           transform: translate3d('+ distance[direction] + 'px, 0, 0);'
                   + ' }'
@@ -269,7 +269,7 @@ $.fn.sidebar = function(parameters) {
               }
               else if(direction === 'top' || direction == 'bottom') {
                 style  += ''
-                  + ' body.pushable > .ui.visible.' + direction + '.sidebar ~ .pusher:after {'
+                  + ' body.pushable > .ui.visible.' + direction + '.sidebar ~ .pusher::after {'
                   + '   -webkit-transform: translate3d(0, ' + distance[direction] + 'px, 0);'
                   + '           transform: translate3d(0, ' + distance[direction] + 'px, 0);'
                   + ' }'
@@ -277,8 +277,8 @@ $.fn.sidebar = function(parameters) {
               }
               /* opposite sides visible forces content overlay */
               style += ''
-                + ' body.pushable > .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .pusher:after,'
+                + ' body.pushable > .ui.visible.left.sidebar ~ .ui.visible.right.sidebar ~ .pusher::after,'
-                + ' body.pushable > .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .pusher:after {'
+                + ' body.pushable > .ui.visible.right.sidebar ~ .ui.visible.left.sidebar ~ .pusher::after {'
                 + '   -webkit-transform: translate3d(0, 0, 0);'
                 + '           transform: translate3d(0, 0, 0);'
                 + ' }'
@@ -294,7 +294,7 @@ $.fn.sidebar = function(parameters) {
 
         refresh: function() {
           module.verbose('Refreshing selector cache');
-          $context  = $(settings.context);
+          $context  = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context);
           $sidebars = $context.children(selector.sidebar);
           $pusher   = $context.children(selector.pusher);
           $fixed    = $context.children(selector.fixed);
@@ -371,6 +371,10 @@ $.fn.sidebar = function(parameters) {
             : function(){}
           ;
           if(module.is.hidden()) {
+            if(settings.onShow.call(element) === false) {
+              module.verbose('Show callback returned false cancelling show');
+              return;
+            }
             module.refreshSidebars();
             if(settings.overlay)  {
               module.error(error.overlay);
@@ -395,10 +399,9 @@ $.fn.sidebar = function(parameters) {
             }
             module.pushPage(function() {
               callback.call(element);
-              settings.onShow.call(element);
+              settings.onVisible.call(element);
             });
             settings.onChange.call(element);
-            settings.onVisible.call(element);
           }
           else {
             module.debug('Sidebar is already visible');
@@ -410,7 +413,7 @@ $.fn.sidebar = function(parameters) {
             ? callback
             : function(){}
           ;
-          if(module.is.visible() || module.is.animating()) {
+          if((module.is.visible() || module.is.animating()) && settings.onHide.call(element) !== false) {
             module.debug('Hiding sidebar', callback);
             module.refreshSidebars();
             module.pullPage(function() {
@@ -418,7 +421,6 @@ $.fn.sidebar = function(parameters) {
               settings.onHidden.call(element);
             });
             settings.onChange.call(element);
-            settings.onHide.call(element);
           }
         },
 

semantic/dist/components/site.css

@@ -13,22 +13,93 @@
              Page
 *******************************/
 
-@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,400%3B0,700%3B1,400%3B1,700&subset=latin&display=swap');
+@font-face {
+  font-family: 'Raleway';
+  src: url("./../themes/default/assets/fonts/LatoLatin-Regular.woff2") format('woff2') , url("./../themes/default/assets/fonts/LatoLatin-Regular.woff") format('woff');
+  font-style: normal;
+  font-weight: normal;
+  font-display: swap;
+  text-rendering: optimizeLegibility;
+  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017F, U+0192, U+0218-021B, U+0237, U+02C6-02C7, U+02C9, U+02D8-02DD, U+0394, U+03A9, U+03BC, U+03C0, U+1E80-1E85, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20A3-20A4, U+20A7, U+20AC, U+2113, U+2122, U+2126, U+212E, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+F8FF, U+FB00-FB04;
+}
+@font-face {
+  font-family: 'Raleway';
+  src: url("./../themes/default/assets/fonts/LatoLatin-Bold.woff2") format('woff2') , url("./../themes/default/assets/fonts/LatoLatin-Bold.woff") format('woff');
+  font-style: normal;
+  font-weight: bold;
+  font-display: swap;
+  text-rendering: optimizeLegibility;
+  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017F, U+0192, U+0218-021B, U+0237, U+02C6-02C7, U+02C9, U+02D8-02DD, U+0394, U+03A9, U+03BC, U+03C0, U+1E80-1E85, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20A3-20A4, U+20A7, U+20AC, U+2113, U+2122, U+2126, U+212E, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+F8FF, U+FB00-FB04;
+}
+@font-face {
+  font-family: 'Raleway';
+  src: url("./../themes/default/assets/fonts/LatoLatin-Italic.woff2") format('woff2') , url("./../themes/default/assets/fonts/LatoLatin-Italic.woff") format('woff');
+  font-style: italic;
+  font-weight: normal;
+  font-display: swap;
+  text-rendering: optimizeLegibility;
+  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017F, U+0192, U+0218-021B, U+0237, U+02C6-02C7, U+02C9, U+02D8-02DD, U+0394, U+03A9, U+03BC, U+03C0, U+1E80-1E85, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20A3-20A4, U+20A7, U+20AC, U+2113, U+2122, U+2126, U+212E, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+F8FF, U+FB00-FB04;
+}
+@font-face {
+  font-family: 'Raleway';
+  src: url("./../themes/default/assets/fonts/LatoLatin-BoldItalic.woff2") format('woff2') , url("./../themes/default/assets/fonts/LatoLatin-BoldItalic.woff") format('woff');
+  font-style: italic;
+  font-weight: bold;
+  font-display: swap;
+  text-rendering: optimizeLegibility;
+  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017F, U+0192, U+0218-021B, U+0237, U+02C6-02C7, U+02C9, U+02D8-02DD, U+0394, U+03A9, U+03BC, U+03C0, U+1E80-1E85, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20A3-20A4, U+20A7, U+20AC, U+2113, U+2122, U+2126, U+212E, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+F8FF, U+FB00-FB04;
+}
+@font-face {
+  font-family: 'Raleway';
+  src: url("./../themes/default/assets/fonts/Lato-Regular.woff2") format('woff2') , url("./../themes/default/assets/fonts/Lato-Regular.woff") format('woff');
+  font-style: normal;
+  font-weight: normal;
+  font-display: swap;
+  text-rendering: optimizeLegibility;
+  unicode-range: U+0180-0191, U+0193-0217, U+021C-0236, U+0238-02C5, U+02C8, U+02CA-02D7, U+02DE-036F, U+0374-0375, U+037A-037E, U+0384-038A, U+038C, U+038E-0393, U+0395-03A1, U+03A3-03A8, U+03AA-03BB, U+03BD-03BF, U+03C1-03CE, U+03D0-0486, U+0488-0513, U+1D00-1DCA, U+1DFE-1E7F, U+1E86-1E9B, U+1E9E, U+1EA0-1EF9, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2000-200F, U+2012, U+2015-2017, U+201B, U+201F, U+202F, U+2034, U+203C-203E, U+205E-205F, U+2070-2071, U+2074-2094, U+20A0-20A2, U+20A5-20A6, U+20A8-20AB, U+20AD-20B5, U+20B8-20BA, U+20DD, U+2105, U+2116-2117, U+2120, U+2132, U+214D-214E, U+2153-215F, U+2183-2184, U+2190-2199, U+21A8, U+221F, U+2229, U+2261, U+2302, U+2310, U+2320-2321, U+2460-2473, U+24EA-24F4, U+24FF-2500, U+2502, U+250C, U+2510, U+2514, U+2518, U+2C60-2C6C, U+2C74-2C77;
+}
+@font-face {
+  font-family: 'Raleway';
+  src: url("./../themes/default/assets/fonts/Lato-Bold.woff2") format('woff2') , url("./../themes/default/assets/fonts/Lato-Bold.woff") format('woff');
+  font-style: normal;
+  font-weight: bold;
+  font-display: swap;
+  text-rendering: optimizeLegibility;
+  unicode-range: U+0180-0191, U+0193-0217, U+021C-0236, U+0238-02C5, U+02C8, U+02CA-02D7, U+02DE-036F, U+0374-0375, U+037A-037E, U+0384-038A, U+038C, U+038E-0393, U+0395-03A1, U+03A3-03A8, U+03AA-03BB, U+03BD-03BF, U+03C1-03CE, U+03D0-0486, U+0488-0513, U+1D00-1DCA, U+1DFE-1E7F, U+1E86-1E9B, U+1E9E, U+1EA0-1EF9, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2000-200F, U+2012, U+2015-2017, U+201B, U+201F, U+202F, U+2034, U+203C-203E, U+205E-205F, U+2070-2071, U+2074-2094, U+20A0-20A2, U+20A5-20A6, U+20A8-20AB, U+20AD-20B5, U+20B8-20BA, U+20DD, U+2105, U+2116-2117, U+2120, U+2132, U+214D-214E, U+2153-215F, U+2183-2184, U+2190-2199, U+21A8, U+221F, U+2229, U+2261, U+2302, U+2310, U+2320-2321, U+2460-2473, U+24EA-24F4, U+24FF-2500, U+2502, U+250C, U+2510, U+2514, U+2518, U+2C60-2C6C, U+2C74-2C77;
+}
+@font-face {
+  font-family: 'Raleway';
+  src: url("./../themes/default/assets/fonts/Lato-Italic.woff2") format('woff2') , url("./../themes/default/assets/fonts/Lato-Italic.woff") format('woff');
+  font-style: italic;
+  font-weight: normal;
+  font-display: swap;
+  text-rendering: optimizeLegibility;
+  unicode-range: U+0180-0191, U+0193-0217, U+021C-0236, U+0238-02C5, U+02C8, U+02CA-02D7, U+02DE-036F, U+0374-0375, U+037A-037E, U+0384-038A, U+038C, U+038E-0393, U+0395-03A1, U+03A3-03A8, U+03AA-03BB, U+03BD-03BF, U+03C1-03CE, U+03D0-0486, U+0488-0513, U+1D00-1DCA, U+1DFE-1E7F, U+1E86-1E9B, U+1E9E, U+1EA0-1EF9, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2000-200F, U+2012, U+2015-2017, U+201B, U+201F, U+202F, U+2034, U+203C-203E, U+205E-205F, U+2070-2071, U+2074-2094, U+20A0-20A2, U+20A5-20A6, U+20A8-20AB, U+20AD-20B5, U+20B8-20BA, U+20DD, U+2105, U+2116-2117, U+2120, U+2132, U+214D-214E, U+2153-215F, U+2183-2184, U+2190-2199, U+21A8, U+221F, U+2229, U+2261, U+2302, U+2310, U+2320-2321, U+2460-2473, U+24EA-24F4, U+24FF-2500, U+2502, U+250C, U+2510, U+2514, U+2518, U+2C60-2C6C, U+2C74-2C77;
+}
+@font-face {
+  font-family: 'Raleway';
+  src: url("./../themes/default/assets/fonts/Lato-BoldItalic.woff2") format('woff2') , url("./../themes/default/assets/fonts/Lato-BoldItalic.woff") format('woff');
+  font-style: italic;
+  font-weight: bold;
+  font-display: swap;
+  text-rendering: optimizeLegibility;
+  unicode-range: U+0180-0191, U+0193-0217, U+021C-0236, U+0238-02C5, U+02C8, U+02CA-02D7, U+02DE-036F, U+0374-0375, U+037A-037E, U+0384-038A, U+038C, U+038E-0393, U+0395-03A1, U+03A3-03A8, U+03AA-03BB, U+03BD-03BF, U+03C1-03CE, U+03D0-0486, U+0488-0513, U+1D00-1DCA, U+1DFE-1E7F, U+1E86-1E9B, U+1E9E, U+1EA0-1EF9, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2000-200F, U+2012, U+2015-2017, U+201B, U+201F, U+202F, U+2034, U+203C-203E, U+205E-205F, U+2070-2071, U+2074-2094, U+20A0-20A2, U+20A5-20A6, U+20A8-20AB, U+20AD-20B5, U+20B8-20BA, U+20DD, U+2105, U+2116-2117, U+2120, U+2132, U+214D-214E, U+2153-215F, U+2183-2184, U+2190-2199, U+21A8, U+221F, U+2229, U+2261, U+2302, U+2310, U+2320-2321, U+2460-2473, U+24EA-24F4, U+24FF-2500, U+2502, U+250C, U+2510, U+2514, U+2518, U+2C60-2C6C, U+2C74-2C77;
+}
 html,
 body {
   height: 100%;
 }
 html {
-  font-size: 12pt;
+  font-size: 14pt;
 }
 body {
   margin: 0;
   padding: 0;
   overflow-x: hidden;
   min-width: 320px;
-  background: #F4F4F4;
+  background: #FFFFFF;
   font-family: 'Raleway', sans-serif;
-  font-size: 12pt;
+  font-size: 14pt;
   line-height: 1.4285em;
   color: rgba(0, 0, 0, 0.87);
 }
@@ -101,11 +172,11 @@ p:last-child {
 --------------------*/
 
 a {
-  color: #6435C9;
+  color: #4183C4;
   text-decoration: none;
 }
 a:hover {
-  color: #4d17c0;
+  color: #1e70bf;
   text-decoration: none;
 }
 
@@ -115,47 +186,6 @@ a:hover {
 *******************************/
 
 
-
-/*******************************
-          Highlighting
-*******************************/
-
-
-/* Site */
-::-webkit-selection {
-  background-color: #dfd6f4;
-  color: rgba(0, 0, 0, 0.87);
-}
-::-moz-selection {
-  background-color: #dfd6f4;
-  color: rgba(0, 0, 0, 0.87);
-}
-::selection {
-  background-color: #dfd6f4;
-  color: rgba(0, 0, 0, 0.87);
-}
-
-/* Form */
-textarea::-webkit-selection,
-input::-webkit-selection {
-  background-color: rgba(100, 100, 100, 0.4);
-  color: rgba(0, 0, 0, 0.87);
-}
-textarea::-moz-selection,
-input::-moz-selection {
-  background-color: rgba(100, 100, 100, 0.4);
-  color: rgba(0, 0, 0, 0.87);
-}
-textarea::-moz-selection, input::-moz-selection {
-  background-color: rgba(100, 100, 100, 0.4);
-  color: rgba(0, 0, 0, 0.87);
-}
-textarea::selection,
-input::selection {
-  background-color: rgba(100, 100, 100, 0.4);
-  color: rgba(0, 0, 0, 0.87);
-}
-
 /* Force Simple Scrollbars */
 body ::-webkit-scrollbar {
   -webkit-appearance: none;
@@ -179,7 +209,18 @@ body ::-webkit-scrollbar-thumb:window-inactive {
 body ::-webkit-scrollbar-thumb:hover {
   background: rgba(128, 135, 139, 0.8);
 }
-
+body .ui {
+  
+/* IE11 */
+  scrollbar-face-color: #bfbfbf;
+  scrollbar-shadow-color: #bfbfbf;
+  scrollbar-track-color: #e6e6e6;
+  scrollbar-arrow-color: #e6e6e6;
+  
+/* firefox : first color thumb, second track*/
+  scrollbar-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.1);
+  scrollbar-width: thin;
+}
 /* Inverted UI */
 body .ui.inverted:not(.dimmer)::-webkit-scrollbar-track {
   background: rgba(255, 255, 255, 0.1);
@@ -193,6 +234,58 @@ body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:window-inactive {
 body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:hover {
   background: rgba(255, 255, 255, 0.35);
 }
+body .ui.inverted:not(.dimmer) {
+  
+/* IE11 */
+  scrollbar-face-color: #656565;
+  scrollbar-shadow-color: #656565;
+  scrollbar-track-color: #323232;
+  scrollbar-arrow-color: #323232;
+  
+/* firefox : first color thumb, second track */
+  scrollbar-color: rgba(255, 255, 255, 0.25) rgba(255, 255, 255, 0.1);
+}
+
+
+/*******************************
+          Highlighting
+*******************************/
+
+
+/* Site */
+::-webkit-selection {
+  background-color: #CCE2FF;
+  color: rgba(0, 0, 0, 0.87);
+}
+::-moz-selection {
+  background-color: #CCE2FF;
+  color: rgba(0, 0, 0, 0.87);
+}
+::selection {
+  background-color: #CCE2FF;
+  color: rgba(0, 0, 0, 0.87);
+}
+
+/* Form */
+textarea::-webkit-selection,
+input::-webkit-selection {
+  background-color: rgba(100, 100, 100, 0.4);
+  color: rgba(0, 0, 0, 0.87);
+}
+textarea::-moz-selection,
+input::-moz-selection {
+  background-color: rgba(100, 100, 100, 0.4);
+  color: rgba(0, 0, 0, 0.87);
+}
+textarea::-moz-selection, input::-moz-selection {
+  background-color: rgba(100, 100, 100, 0.4);
+  color: rgba(0, 0, 0, 0.87);
+}
+textarea::selection,
+input::selection {
+  background-color: rgba(100, 100, 100, 0.4);
+  color: rgba(0, 0, 0, 0.87);
+}
 
 
 /*******************************

semantic/dist/components/statistic.css

@@ -75,7 +75,7 @@
 }
 
 /* Clearing */
-.ui.statistics:after {
+.ui.statistics::after {
   display: block;
   content: ' ';
   height: 0;
@@ -330,7 +330,7 @@
 .ui.primary.statistics .statistic > .value,
 .ui.statistics .primary.statistic > .value,
 .ui.primary.statistic > .value {
-  color: #6435C9;
+  color: #2185D0;
 }
 .ui.inverted.primary.statistics .statistic > .value,
 .ui.statistics .inverted.primary.statistic > .value,

semantic/dist/components/tab.css

@@ -46,8 +46,8 @@
   position: relative !important;
   left: -10000px !important;
 }
-.ui.tab.loading:before,
+.ui.tab.loading::before,
-.ui.tab.loading.segment:before {
+.ui.tab.loading.segment::before {
   position: absolute;
   content: '';
   top: 50%;
@@ -58,8 +58,8 @@
   border-radius: 500rem;
   border: 0.2em solid rgba(0, 0, 0, 0.1);
 }
-.ui.tab.loading:after,
+.ui.tab.loading::after,
-.ui.tab.loading.segment:after {
+.ui.tab.loading.segment::after {
   position: absolute;
   content: '';
   top: 50%;

semantic/dist/components/tab.js

@@ -100,10 +100,18 @@ $.fn.tab = function(parameters) {
             initializedHistory = true;
           }
 
-          if(settings.autoTabActivation && instance === undefined && module.determine.activeTab() == null) {
+          var activeTab = module.determine.activeTab();
-            module.debug('No active tab detected, setting first tab active', module.get.initialPath());
+          if(settings.autoTabActivation && instance === undefined && activeTab == null) {
-            module.changeTab(settings.autoTabActivation === true ? module.get.initialPath() : settings.autoTabActivation);
+            activeTab = settings.autoTabActivation === true ? module.get.initialPath() : settings.autoTabActivation;
-          };
+            module.debug('No active tab detected, setting tab active', activeTab);
+            module.changeTab(activeTab);
+          }
+          if(activeTab != null && settings.history) {
+            var autoUpdate = $.address.autoUpdate();
+            $.address.autoUpdate(false);
+            $.address.value(activeTab);
+            $.address.autoUpdate(autoUpdate);
+          }
 
           module.instantiate();
         },
@@ -154,7 +162,7 @@ $.fn.tab = function(parameters) {
             module.verbose('Determined parent element for creating context', $context);
           }
           else if(settings.context) {
-            $context = $(settings.context);
+            $context = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context);
             module.verbose('Using selector for tab context', settings.context, $context);
           }
           else {
@@ -203,6 +211,7 @@ $.fn.tab = function(parameters) {
                   .history(true)
                   .state(settings.path)
                 ;
+                $(window).trigger('popstate');
               }
               else {
                 module.error(error.path);
@@ -370,6 +379,10 @@ $.fn.tab = function(parameters) {
                   module.verbose('Tab parameters found', nextPathArray);
                 }
               }
+              if (settings.onBeforeChange.call(element, currentPath) === false) {
+                module.debug('onBeforeChange returned false, cancelling tab change', $tab);
+                return false;
+              }
               if(isLastTab && remoteContent) {
                 if(!shouldIgnoreLoad) {
                   module.activate.navigation(currentPath);
@@ -406,6 +419,10 @@ $.fn.tab = function(parameters) {
               // if anchor exists use parent tab
               if($anchor && $anchor.length > 0 && currentPath) {
                 module.debug('Anchor link used, opening parent tab', $tab, $anchor);
+                if (settings.onBeforeChange.call(element, currentPath) === false) {
+                  module.debug('onBeforeChange returned false, cancelling tab change', $tab);
+                  return false;
+                }
                 if( !$tab.hasClass(className.active) ) {
                   setTimeout(function() {
                     module.scrollTo($anchor);
@@ -959,6 +976,7 @@ $.fn.tab.settings = {
   onLoad      : function(tabPath, parameterArray, historyEvent) {}, // called on every load
   onVisible   : function(tabPath, parameterArray, historyEvent) {}, // called every time tab visible
   onRequest   : function(tabPath, parameterArray, historyEvent) {}, // called ever time a tab beings loading remote content
+  onBeforeChange: function(tabPath) {}, // called before a tab is about to be changed. Returning false will cancel the tab change
 
   templates : {
     determineTitle: function(tabArray) {} // returns page title for path

semantic/dist/components/tab.min.css

@@ -6,4 +6,4 @@
  * Released under the MIT license
  * http://opensource.org/licenses/MIT
  *
- */.ui.tab{display:none}.ui.tab.active,.ui.tab.open{display:block}.ui.tab.loading{position:relative;overflow:hidden;display:block;min-height:250px}.ui.tab.loading *{position:relative!important;left:-10000px!important}.ui.tab.loading.segment:before,.ui.tab.loading:before{position:absolute;content:'';top:50%;left:50%;margin:-1.25em 0 0 -1.25em;width:2.5em;height:2.5em;border-radius:500rem;border:.2em solid rgba(0,0,0,.1)}.ui.tab.loading.segment:after,.ui.tab.loading:after{position:absolute;content:'';top:50%;left:50%;margin:-1.25em 0 0 -1.25em;width:2.5em;height:2.5em;-webkit-animation:loader .6s infinite linear;animation:loader .6s infinite linear;border:.2em solid #767676;border-radius:500rem;-webkit-box-shadow:0 0 0 1px transparent;box-shadow:0 0 0 1px transparent}
+ */.ui.tab{display:none}.ui.tab.active,.ui.tab.open{display:block}.ui.tab.loading{position:relative;overflow:hidden;display:block;min-height:250px}.ui.tab.loading *{position:relative!important;left:-10000px!important}.ui.tab.loading.segment::before,.ui.tab.loading::before{position:absolute;content:'';top:50%;left:50%;margin:-1.25em 0 0 -1.25em;width:2.5em;height:2.5em;border-radius:500rem;border:.2em solid rgba(0,0,0,.1)}.ui.tab.loading.segment::after,.ui.tab.loading::after{position:absolute;content:'';top:50%;left:50%;margin:-1.25em 0 0 -1.25em;width:2.5em;height:2.5em;-webkit-animation:loader .6s infinite linear;animation:loader .6s infinite linear;border:.2em solid #767676;border-radius:500rem;-webkit-box-shadow:0 0 0 1px transparent;box-shadow:0 0 0 1px transparent}

semantic/dist/components/text.css

@@ -17,7 +17,7 @@ span.ui.text {
   line-height: 1;
 }
 span.ui.primary.text {
-  color: #6435C9;
+  color: #2185D0;
 }
 span.ui.inverted.primary.text {
   color: #54C8FF;

semantic/dist/components/text.min.css

@@ -6,4 +6,4 @@
  * Released under the MIT license
  * https://github.com/fomantic/Fomantic-UI/blob/master/LICENSE.md
  *
- */span.ui.text{line-height:1}span.ui.primary.text{color:#6435c9}span.ui.inverted.primary.text{color:#54c8ff}span.ui.secondary.text{color:#1b1c1d}span.ui.inverted.secondary.text{color:#545454}span.ui.red.text{color:#db2828}span.ui.inverted.red.text{color:#ff695e}span.ui.orange.text{color:#f2711c}span.ui.inverted.orange.text{color:#ff851b}span.ui.yellow.text{color:#fbbd08}span.ui.inverted.yellow.text{color:#ffe21f}span.ui.olive.text{color:#b5cc18}span.ui.inverted.olive.text{color:#d9e778}span.ui.green.text{color:#21ba45}span.ui.inverted.green.text{color:#2ecc40}span.ui.teal.text{color:#00b5ad}span.ui.inverted.teal.text{color:#6dffff}span.ui.blue.text{color:#2185d0}span.ui.inverted.blue.text{color:#54c8ff}span.ui.violet.text{color:#6435c9}span.ui.inverted.violet.text{color:#a291fb}span.ui.purple.text{color:#a333c8}span.ui.inverted.purple.text{color:#dc73ff}span.ui.pink.text{color:#e03997}span.ui.inverted.pink.text{color:#ff8edf}span.ui.brown.text{color:#a5673f}span.ui.inverted.brown.text{color:#d67c1c}span.ui.grey.text{color:#767676}span.ui.inverted.grey.text{color:#dcddde}span.ui.black.text{color:#1b1c1d}span.ui.inverted.black.text{color:#545454}span.ui.error.text{color:#db2828}span.ui.info.text{color:#31ccec}span.ui.success.text{color:#21ba45}span.ui.warning.text{color:#f2c037}span.ui.disabled.text{opacity:.45}span.ui.medium.text{font-size:1em}span.ui.mini.text{font-size:.4em}span.ui.tiny.text{font-size:.5em}span.ui.small.text{font-size:.75em}span.ui.large.text{font-size:1.5em}span.ui.big.text{font-size:2em}span.ui.huge.text{font-size:4em}span.ui.massive.text{font-size:8em}
+ */span.ui.text{line-height:1}span.ui.primary.text{color:#2185d0}span.ui.inverted.primary.text{color:#54c8ff}span.ui.secondary.text{color:#1b1c1d}span.ui.inverted.secondary.text{color:#545454}span.ui.red.text{color:#db2828}span.ui.inverted.red.text{color:#ff695e}span.ui.orange.text{color:#f2711c}span.ui.inverted.orange.text{color:#ff851b}span.ui.yellow.text{color:#fbbd08}span.ui.inverted.yellow.text{color:#ffe21f}span.ui.olive.text{color:#b5cc18}span.ui.inverted.olive.text{color:#d9e778}span.ui.green.text{color:#21ba45}span.ui.inverted.green.text{color:#2ecc40}span.ui.teal.text{color:#00b5ad}span.ui.inverted.teal.text{color:#6dffff}span.ui.blue.text{color:#2185d0}span.ui.inverted.blue.text{color:#54c8ff}span.ui.violet.text{color:#6435c9}span.ui.inverted.violet.text{color:#a291fb}span.ui.purple.text{color:#a333c8}span.ui.inverted.purple.text{color:#dc73ff}span.ui.pink.text{color:#e03997}span.ui.inverted.pink.text{color:#ff8edf}span.ui.brown.text{color:#a5673f}span.ui.inverted.brown.text{color:#d67c1c}span.ui.grey.text{color:#767676}span.ui.inverted.grey.text{color:#dcddde}span.ui.black.text{color:#1b1c1d}span.ui.inverted.black.text{color:#545454}span.ui.error.text{color:#db2828}span.ui.info.text{color:#31ccec}span.ui.success.text{color:#21ba45}span.ui.warning.text{color:#f2c037}span.ui.disabled.text{opacity:.45}span.ui.medium.text{font-size:1em}span.ui.mini.text{font-size:.4em}span.ui.tiny.text{font-size:.5em}span.ui.small.text{font-size:.75em}span.ui.large.text{font-size:1.5em}span.ui.big.text{font-size:2em}span.ui.huge.text{font-size:4em}span.ui.massive.text{font-size:8em}

semantic/dist/components/toast.css

@@ -17,6 +17,9 @@
   position: fixed;
   z-index: 9999;
 }
+.ui.toast-container.absolute {
+  position: absolute;
+}
 .ui.toast-container.ui.attached {
   width: 100%;
   left: 0;
@@ -64,36 +67,42 @@
   bottom: 0;
 }
 .ui.toast-container.top.right {
-  top: 1em;
+  top: 0.85714286em;
-  right: 1em;
+  right: 0.85714286em;
-  margin-left: 1em;
+  margin-left: 0.85714286em;
 }
 .ui.toast-container.top.left {
-  top: 1em;
+  top: 0.85714286em;
-  left: 1em;
+  left: 0.85714286em;
-  margin-right: 1em;
+  margin-right: 0.85714286em;
 }
 .ui.toast-container.top.center {
   left: 50%;
   -webkit-transform: translate(-50%, 0);
           transform: translate(-50%, 0);
-  top: 1em;
+  top: 0.85714286em;
 }
 .ui.toast-container.bottom.right {
-  bottom: 1em;
+  bottom: 0.85714286em;
-  right: 1em;
+  right: 0.85714286em;
-  margin-left: 1em;
+  margin-left: 0.85714286em;
 }
 .ui.toast-container.bottom.left {
-  bottom: 1em;
+  bottom: 0.85714286em;
-  left: 1em;
+  left: 0.85714286em;
-  margin-right: 1em;
+  margin-right: 0.85714286em;
 }
 .ui.toast-container.bottom.center {
   left: 50%;
   -webkit-transform: translate(-50%, 0);
           transform: translate(-50%, 0);
-  bottom: 1em;
+  bottom: 0.85714286em;
+}
+.ui.toast-container.centered {
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  top: 50%;
+  left: 50%;
 }
 .ui.toast-container .visible.toast-box,
 .ui.toast-container .animating.toast-box,
@@ -114,7 +123,7 @@
 }
 .ui.toast-container .toast-box {
   margin-bottom: 0.5em;
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
   cursor: default;
 }
 .ui.toast-container .toast-box:hover {
@@ -351,8 +360,8 @@
   border-bottom-right-radius: 0;
 }
 .ui.vertical.attached:not(.left).actions {
-  border-top-right-radius: 0.33333333rem;
+  border-top-right-radius: 0.28571429rem;
-  border-bottom-right-radius: 0.33333333rem;
+  border-bottom-right-radius: 0.28571429rem;
 }
 .ui.vertical.attached:not(.left).actions .button:first-child,
 .ui.vertical.attached:not(.left).actions .button:last-child {
@@ -361,7 +370,7 @@
 }
 .ui.vertical.attached:not(.left).message {
   border-top-right-radius: 0;
-  border-bottom-left-radius: 0.33333333rem;
+  border-bottom-left-radius: 0.28571429rem;
 }
 .ui.vertical.attached.left.card > .image > img {
   border-top-left-radius: 0;
@@ -376,8 +385,8 @@
   border-bottom-left-radius: 0;
 }
 .ui.vertical.attached.left.actions {
-  border-top-left-radius: 0.33333333rem;
+  border-top-left-radius: 0.28571429rem;
-  border-bottom-left-radius: 0.33333333rem;
+  border-bottom-left-radius: 0.28571429rem;
 }
 .ui.vertical.attached.left.actions .button:first-child,
 .ui.vertical.attached.left.actions .button:last-child {
@@ -385,28 +394,28 @@
   border-bottom-right-radius: 0;
 }
 .ui.vertical.attached.left.message.message.message {
-  border-top-right-radius: 0.33333333rem;
+  border-top-right-radius: 0.28571429rem;
-  border-bottom-right-radius: 0.33333333rem;
+  border-bottom-right-radius: 0.28571429rem;
 }
 .ui.attached:not(.vertical):not(.top).actions {
-  border-bottom-left-radius: 0.33333333rem;
+  border-bottom-left-radius: 0.28571429rem;
-  border-bottom-right-radius: 0.33333333rem;
+  border-bottom-right-radius: 0.28571429rem;
 }
 .ui.attached:not(.vertical):not(.top).actions .button:first-child {
-  border-bottom-left-radius: 0.33333333rem;
+  border-bottom-left-radius: 0.28571429rem;
 }
 .ui.attached:not(.vertical):not(.top).actions .button:last-child {
-  border-bottom-right-radius: 0.33333333rem;
+  border-bottom-right-radius: 0.28571429rem;
 }
 .ui.attached:not(.vertical).top.actions {
-  border-top-left-radius: 0.33333333rem;
+  border-top-left-radius: 0.28571429rem;
-  border-top-right-radius: 0.33333333rem;
+  border-top-right-radius: 0.28571429rem;
 }
 .ui.attached:not(.vertical).top.actions .button:first-child {
-  border-top-left-radius: 0.33333333rem;
+  border-top-left-radius: 0.28571429rem;
 }
 .ui.attached:not(.vertical).top.actions .button:last-child {
-  border-top-right-radius: 0.33333333rem;
+  border-top-right-radius: 0.28571429rem;
 }
 
 
@@ -416,8 +425,8 @@
 
 .ui.toast {
   display: none;
-  border-radius: 0.33333333rem;
+  border-radius: 0.28571429rem;
-  padding: 0.91666667em 1.16666667em;
+  padding: 0.78571429em 1em;
   margin: 0 -1px -0.01em;
   color: rgba(0, 0, 0, 0.87);
   background-color: #FFFFFF;
@@ -490,6 +499,16 @@
 .ui.toast:not(.vertical).actions > .centered.icon {
   top: calc(50% - 1.2em);
 }
+.ui.toast.vertical > .content {
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+}
+.ui.toast.vertical.attached {
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+}
 .ui.toast.vertical > .close.icon + .content {
   padding-left: 1em;
 }
@@ -518,6 +537,28 @@
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
+.ui.toast.ui.ui.ui.image {
+  padding: 0;
+}
+.ui.toast.ui.ui.ui.image > .content {
+  padding-top: 0.78571429em;
+  padding-bottom: 0.78571429em;
+  padding-right: 1em;
+}
+.ui.toast.ui.ui.ui.image > .actions {
+  margin: 0;
+}
+.ui.toast.ui.ui.ui.image > .ui.image {
+  border-top-left-radius: 0.28571429rem;
+  border-bottom-left-radius: 0.28571429rem;
+}
+.ui.toast.ui.ui.ui.image > .ui.image.mini {
+  min-width: calc(0.7857142857142857em + 35px);
+}
+.ui.toast.ui.ui.ui.image > .ui.image.mini + .content {
+  min-height: calc(0.7857142857142857em + 35px);
+  padding-left: 4.4em;
+}
 .ui.hoverfloating.message:hover {
   -webkit-box-shadow: 0 0 0 1px inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
           box-shadow: 0 0 0 1px inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
@@ -567,7 +608,7 @@
 -------------- */
 
 .ui.primary.toast {
-  background-color: #6435C9;
+  background-color: #2185D0;
   color: rgba(255, 255, 255, 0.9);
 }
 .ui.inverted.primary.toast,
@@ -774,3 +815,9 @@
     opacity: 0;
   }
 }
+
+
+/*******************************
+         Theme Overrides
+*******************************/
+

semantic/dist/components/toast.js

@@ -61,7 +61,7 @@ $.fn.toast = function(parameters) {
         $animationObject,
         $close,
         $context         = (settings.context)
-          ? $(settings.context)
+          ? ([window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context))
           : $('body'),
 
         isToastComponent = $module.hasClass('toast') || $module.hasClass('message') || $module.hasClass('card'),
@@ -69,12 +69,14 @@ $.fn.toast = function(parameters) {
         element          = this,
         instance         = isToastComponent ? $module.data(moduleNamespace) : undefined,
 
+        id,
         module
       ;
       module = {
 
         initialize: function() {
           module.verbose('Initializing element');
+          module.create.id();
           if (!module.has.container()) {
             module.create.container();
           }
@@ -124,17 +126,22 @@ $.fn.toast = function(parameters) {
         },
 
         show: function(callback) {
-          callback = callback || function(){};
-          module.debug('Showing toast');
           if(settings.onShow.call($toastBox, element) === false) {
             module.debug('onShow callback returned false, cancelling toast animation');
             return;
           }
+          callback = callback || function(){};
+          module.debug('Showing toast');
           module.animate.show(callback);
         },
 
         close: function(callback) {
+          if(settings.onHide.call($toastBox, element) === false) {
+            module.debug('onHide callback returned false, cancelling toast animation');
+            return;
+          }
           callback = callback || function(){};
+          module.debug('Closing toast');
           module.remove.visible();
           module.unbind.events();
           module.animate.close(callback);
@@ -144,14 +151,18 @@ $.fn.toast = function(parameters) {
         create: {
           container: function() {
             module.verbose('Creating container');
-            $context.append($('<div/>',{class: settings.position + ' ' + className.container + ' ' +(settings.horizontal ? className.horizontal : '')}));
+            $context.append($('<div/>',{class: settings.position + ' ' + className.container + ' ' +(settings.horizontal ? className.horizontal : '') + ' ' + (settings.context && settings.context !== 'body' ? className.absolute : '')}));
+          },
+          id: function() {
+            id = (Math.random().toString(16) + '000000000').slice(2, 10);
+            module.verbose('Creating unique id for element', id);
           },
           toast: function() {
             $toastBox = $('<div/>', {class: className.box});
             var iconClass = module.get.iconClass();
             if (!isToastComponent) {
               module.verbose('Creating toast');
-              $toast = $('<div/>');
+              $toast = $('<div/>', {role: 'alert'});
               var $content = $('<div/>', {class: className.content});
               if (iconClass !== '') {
                 $toast.append($('<i/>', {class: iconClass + ' ' + className.icon}));
@@ -164,13 +175,21 @@ $.fn.toast = function(parameters) {
                 }));
               }
               if (settings.title !== '') {
+                var titleId = '_' + module.get.id() + 'title';
+                $toast.attr('aria-labelledby', titleId);
                 $content.append($('<div/>', {
                   class: className.title,
-                  text: settings.title
+                  id: titleId,
+                  html: module.helpers.escape(settings.title, settings.preserveHTML)
                 }));
               }
-
+              var descId = '_' + module.get.id() + 'desc';
-              $content.append($('<div/>', {class: className.message, html: module.helpers.escape(settings.message, settings.preserveHTML)}));
+              $toast.attr('aria-describedby', descId);
+              $content.append($('<div/>', {
+                class: className.message,
+                id: descId,
+                html: module.helpers.escape(settings.message, settings.preserveHTML)
+              }));
 
               $toast
                 .addClass(settings.class + ' ' + className.toast)
@@ -178,7 +197,7 @@ $.fn.toast = function(parameters) {
               ;
               $toast.css('opacity', settings.opacity);
               if (settings.closeIcon) {
-                $close = $('<i/>', {class: className.close + ' ' + (typeof settings.closeIcon === 'string' ? settings.closeIcon : '')});
+                $close = $('<i/>', {class: className.close + ' ' + (typeof settings.closeIcon === 'string' ? settings.closeIcon : ''), role: 'button', tabindex: 0, 'aria-label': settings.text.close});
                 if($close.hasClass(className.left)) {
                   $toast.prepend($close);
                 } else {
@@ -221,15 +240,17 @@ $.fn.toast = function(parameters) {
                 }
               }
               settings.actions.forEach(function (el) {
-                var icon = el[fields.icon] ? '<i class="' + module.helpers.deQuote(el[fields.icon]) + ' icon"></i>' : '',
+                var icon = el[fields.icon] ? '<i '+(el[fields.text] ? 'aria-hidden="true"' : '')+' class="' + module.helpers.deQuote(el[fields.icon]) + ' icon"></i>' : '',
                   text = module.helpers.escape(el[fields.text] || '', settings.preserveHTML),
                   cls = module.helpers.deQuote(el[fields.class] || ''),
                   click = el[fields.click] && $.isFunction(el[fields.click]) ? el[fields.click] : function () {};
                 $actions.append($('<button/>', {
                   html: icon + text,
+                  'aria-label': (el[fields.text] || el[fields.icon] || '').replace(/<[^>]+(>|$)/g,''),
                   class: className.button + ' ' + cls,
                   click: function () {
-                    if (click.call(element, $module) === false) {
+                    var button = $(this);
+                    if (button.is(selector.approve) || button.is(selector.deny) || click.call(element, $module) === false) {
                       return;
                     }
                     module.close();
@@ -329,13 +350,12 @@ $.fn.toast = function(parameters) {
         bind: {
           events: function() {
             module.debug('Binding events to toast');
-            if(settings.closeOnClick || settings.closeIcon) {
+            if(settings.closeIcon) {
-              (settings.closeIcon ? $close : $toast)
+              $close.on('click' + eventNamespace, module.event.close);
-                  .on('click' + eventNamespace, module.event.click)
-              ;
             }
+            $toast.on('click' + eventNamespace, module.event.click);
             if($animationObject) {
-              $animationObject.on('animationend' + eventNamespace, module.close);
+              $animationObject.on('animationend' + eventNamespace, module.event.close);
             }
             $toastBox
               .on('click' + eventNamespace, selector.approve, module.event.approve)
@@ -347,11 +367,10 @@ $.fn.toast = function(parameters) {
         unbind: {
           events: function() {
             module.debug('Unbinding events to toast');
-            if(settings.closeOnClick || settings.closeIcon) {
+            if(settings.closeIcon) {
-              (settings.closeIcon ? $close : $toast)
+              $close.off('click' + eventNamespace);
-                  .off('click' + eventNamespace)
-              ;
             }
+            $toast.off('click' + eventNamespace);
             if($animationObject) {
               $animationObject.off('animationend' + eventNamespace);
             }
@@ -383,11 +402,6 @@ $.fn.toast = function(parameters) {
           },
           close: function(callback) {
             callback = $.isFunction(callback) ? callback : function(){};
-            module.debug('Closing toast');
-            if(settings.onHide.call($toastBox, element) === false) {
-              module.debug('onHide callback returned false, cancelling toast animation');
-              return;
-            }
             if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
               $toastBox
                 .transition({
@@ -443,7 +457,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 + (settings.horizontal ? module.helpers.toClass(className.horizontal) : '')).length > 0);
+            return module.get.containers().length > 0;
           },
           toast: function(){
             return !!module.get.toast();
@@ -457,8 +471,14 @@ $.fn.toast = function(parameters) {
         },
 
         get: {
+          id: function() {
+            return id;
+          },
+          containers: function() {
+            return $context.children(module.helpers.toClass(settings.position) + selector.container + (settings.horizontal ? module.helpers.toClass(className.horizontal) : ':not('+module.helpers.toClass(className.horizontal)+')') + (settings.context && settings.context !== 'body' ? module.helpers.toClass(className.absolute) : ':not('+module.helpers.toClass(className.absolute)+')'));
+          },
           container: function() {
-            return ($context.find(module.helpers.toClass(settings.position) + selector.container)[0]);
+            return module.get.containers()[0];
           },
           toastBox: function() {
             return $toastBox || null;
@@ -490,9 +510,15 @@ $.fn.toast = function(parameters) {
         },
 
         event: {
+          close: function(){
+            module.close();
+          },
           click: function(event) {
-            if($(event.target).closest('a').length === 0) {
+            if($(event.target).closest(selector.clickable).length === 0) {
-              settings.onClick.call($toastBox, element);
+              if(settings.onClick.call($toastBox, element) === false || !settings.closeOnClick) {
+                module.verbose('Click callback returned false or close denied by setting cancelling close');
+                return;
+              }
               module.close();
             }
           },
@@ -515,7 +541,7 @@ $.fn.toast = function(parameters) {
         helpers: {
           toClass: function(selector) {
             var
-              classes = selector.split(' '),
+              classes = selector.trim().split(/\s+/),
               result = ''
             ;
 
@@ -805,6 +831,7 @@ $.fn.toast.settings = {
 
   className      : {
     container    : 'ui toast-container',
+    absolute     : 'absolute',
     box          : 'floating toast-box',
     progress     : 'ui attached active progress',
     toast        : 'ui toast',
@@ -833,6 +860,10 @@ $.fn.toast.settings = {
     unclickable  : 'unclickable'
   },
 
+  text: {
+    close : 'Close'
+  },
+
   icons          : {
     info         : 'info',
     success      : 'checkmark',
@@ -849,6 +880,7 @@ $.fn.toast.settings = {
     image        : '> img.image, > .image > img',
     icon         : '> i.icon',
     input        : 'input:not([type="hidden"]), textarea, select, button, .ui.button, ui.dropdown',
+    clickable    : 'a, details, .ui.accordion',
     approve      : '.actions .positive, .actions .approve, .actions .ok',
     deny         : '.actions .negative, .actions .deny, .actions .cancel'
   },

semantic/dist/components/transition.js

@@ -771,6 +771,10 @@ $.fn.transition = function() {
         },
 
         hide: function() {
+          if(settings.onHide.call(element) === false) {
+            module.verbose('Hide callback returned false cancelling hide');
+            return false;
+          }
           module.verbose('Hiding element');
           if( module.is.animating() ) {
             module.reset();
@@ -778,35 +782,32 @@ $.fn.transition = function() {
           element.blur(); // IE will trigger focus change if element is not blurred before hiding
           module.remove.display();
           module.remove.visible();
-          if($.isFunction(settings.onBeforeHide)){
+          settings.onBeforeHide.call(element, module.hideNow);
-            settings.onBeforeHide.call(element,function(){
-                module.hideNow();
-            });
-          } else {
-              module.hideNow();
-          }
-
         },
 
         hideNow: function() {
             module.set.hidden();
             module.force.hidden();
-            settings.onHide.call(element);
+            settings.onHidden.call(element);
             settings.onComplete.call(element);
             // module.repaint();
         },
 
         show: function(display) {
-          module.verbose('Showing element', display);
+          if(module.force.visible() && settings.onShow.call(element) !== false) {
-          if(module.force.visible()) {
+            module.verbose('Showing element', display);
             module.remove.hidden();
-            module.set.visible();
+            settings.onBeforeShow.call(element, module.showNow);
-            settings.onShow.call(element);
-            settings.onComplete.call(element);
-            // module.repaint();
           }
         },
 
+        showNow: function(){
+          module.set.visible();
+          settings.onVisible.call(element);
+          settings.onComplete.call(element);
+          // module.repaint();
+        },
+
         toggle: function() {
           if( module.is.visible() ) {
             module.hide();
@@ -1055,7 +1056,11 @@ $.fn.transition.settings = {
   onStart       : function() {},
   onComplete    : function() {},
   onShow        : function() {},
+  onBeforeShow  : function(callback) {callback.call(this)},
+  onVisible     : function() {},
   onHide        : function() {},
+  onHidden      : function() {},
+  onBeforeHide  : function(callback) {callback.call(this)},
 
   // whether timeout should be used to ensure callback fires in cases animationend does not
   useFailSafe   : true,
@@ -1097,7 +1102,7 @@ $.fn.transition.settings = {
 
   // possible errors
   error: {
-    noAnimation : 'Element is no longer attached to DOM. Unable to animate.  Use silent setting to surpress this warning in production.',
+    noAnimation : 'Element is no longer attached to DOM. Unable to animate.  Use silent setting to suppress this warning in production.',
     repeated    : 'That animation is already occurring, cancelling repeated animation',
     method      : 'The method you called is not defined',
     support     : 'This browser does not support CSS animations'