fomantic-ui 2.9.0-beta.99 → 2.9.1-beta.0

package/src/definitions/behaviors/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();
@@ -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
@@ -361,8 +363,8 @@ $.api = $.fn.api = function(parameters) {
                   var
                     // allow legacy {$var} style
                     variable = (templatedString.indexOf('$') !== -1)
-                      ? templatedString.substr(2, templatedString.length - 3)
-                      : templatedString.substr(1, templatedString.length - 2),
+                      ? templatedString.slice(2, -1)
+                      : templatedString.slice(1, -1),
                     value   = ($.isPlainObject(urlData) && urlData[variable] !== undefined)
                       ? urlData[variable]
                       : ($module.data(variable) !== undefined)
@@ -393,8 +395,8 @@ $.api = $.fn.api = function(parameters) {
                   var
                     // allow legacy {/$var} style
                     variable = (templatedString.indexOf('$') !== -1)
-                      ? templatedString.substr(3, templatedString.length - 4)
-                      : templatedString.substr(2, templatedString.length - 3),
+                      ? templatedString.slice(3, -1)
+                      : templatedString.slice(2, -1),
                     value   = ($.isPlainObject(urlData) && urlData[variable] !== undefined)
                       ? urlData[variable]
                       : ($module.data(variable) !== undefined)
@@ -426,28 +428,76 @@ $.api = $.fn.api = function(parameters) {
           formData: function(data) {
             var
               formData = {},
-              hasOtherData
+              hasOtherData,
+              useFormDataApi = settings.serializeForm === 'formdata'
             ;
-            data         = data || settings.data;
+            data         = data || originalData || settings.data;
             hasOtherData = $.isPlainObject(data);
 
-            $.each($form.serializeArray(), function (i, element) {
-              var node = formData[element.name];
-
-              if ('undefined' !== typeof node && node !== null) {
-                if (Array.isArray(node)) {
-                  node.push(element.value);
+            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 {
-                  formData[element.name] = [node, element.value];
+                  pushValues[pushKey] = [pushValues[pushKey] , value];
                 }
-              } else {
-                formData[element.name] = element.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) {
               module.debug('Extending existing data with form data', data, formData);
-              data = $.extend(true, {}, data, formData);
+              if(useFormDataApi) {
+                $.each(Object.keys(data),function(i, el){
+                  formData.append(el, data[el]);
+                });
+                data = formData;
+              } else {
+                data = $.extend(true, {}, data, formData);
+              }
             }
             else {
               module.debug('Adding form data', formData);
@@ -965,7 +1015,7 @@ $.api = $.fn.api = function(parameters) {
             response
           ;
           passedArguments = passedArguments || queryArguments;
-          context         = element         || context;
+          context         = context         || element;
           if(typeof query == 'string' && object !== undefined) {
             query    = query.split(/[\. ]/);
             maxDepth = query.length - 1;
@@ -1086,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
@@ -1108,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; },
@@ -1154,8 +1206,13 @@ $.api.settings = {
   },
 
   regExp  : {
-    required : /\{\$*[A-z0-9]+\}/g,
-    optional : /\{\/\$*[A-z0-9]+\}/g,
+    required : /\{\$*[a-z0-9]+\}/gi,
+    optional : /\{\/\$*[a-z0-9]+\}/gi,
+    validate: /^[a-z_][a-z0-9_-]*(?:\[[a-z0-9_-]*\])*$/i,
+    key:      /[a-z0-9_-]+|(?=\[\])/gi,
+    push:     /^$/,
+    fixed:    /^\d+$/,
+    named:    /^[a-z0-9_-]+$/i
   },
 
   className: {

package/src/definitions/behaviors/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: {
@@ -461,7 +465,7 @@ $.fn.form = function(parameters) {
           },
           beforeUnload: function(event) {
             if (module.is.dirty() && !submitting) {
-              var event = event || window.event;
+              event = event || window.event;
 
               // For modern browsers
               if (event) {
@@ -544,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 = (
@@ -586,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);
               }
@@ -596,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;
-              validation = $.fn.form.settings.defaults;
+              settings   = $.extend(true, {}, $.fn.form.settings);
+              validation = $.extend(true, {}, $.fn.form.settings.defaults);
               module.verbose('Using default form validation', validation, settings);
             }
 
@@ -638,6 +642,7 @@ $.fn.form = function(parameters) {
             if((t=$field.filter('[data-' + metadata.validate + '="'+ identifier +'"]')).length > 0 ) {
               return t;
             }
+            module.error(error.noField.replace('{identifier}',identifier));
             return $('<input/>');
           },
           fields: function(fields) {
@@ -797,16 +802,11 @@ $.fn.form = function(parameters) {
             if(typeof identifier !== 'string') {
               module.error(error.identifier, identifier);
             }
-            if($field.filter('#' + identifier).length > 0 ) {
-              return true;
-            }
-            else if( $field.filter('[name="' + identifier +'"]').length > 0 ) {
-              return true;
-            }
-            else if( $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]').length > 0 ) {
-              return true;
-            }
-            return false;
+            return (
+              $field.filter('#' + identifier).length > 0 ||
+              $field.filter('[name="' + identifier +'"]').length > 0 ||
+              $field.filter('[data-' + metadata.validate + '="'+ identifier +'"]').length > 0
+            );
           }
 
         },
@@ -864,9 +864,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
@@ -963,6 +965,7 @@ $.fn.form = function(parameters) {
             $.each(fields, function(index, field) {
               module.remove.rule(field);
             });
+            module.refreshEvents();
           },
           // alias
           rules: function(field, rules) {
@@ -1210,7 +1213,7 @@ $.fn.form = function(parameters) {
               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) {
@@ -1450,7 +1453,7 @@ $.fn.form = function(parameters) {
             response
           ;
           passedArguments = passedArguments || queryArguments;
-          context         = element         || context;
+          context         = context         || element;
           if(typeof query == 'string' && object !== undefined) {
             query    = query.split(/[\. ]/);
             maxDepth = query.length - 1;
@@ -1626,6 +1629,7 @@ $.fn.form.settings = {
     method     : 'The method you called is not defined.',
     noRule     : 'There is no rule matching the one you specified',
     oldSyntax  : 'Starting in 2.0 forms now only take a single settings object. Validation settings converted to new syntax automatically.',
+    noField    : 'Field identifier {identifier} not found',
     noElement  : 'This module requires ui {element}'
   },
 

package/src/definitions/behaviors/state.js

@@ -74,7 +74,7 @@ $.fn.state = function(parameters) {
 
           // bind events with delegated events
           if(settings.context && moduleSelector !== '') {
-            $(settings.context)
+            ([window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context))
               .on(moduleSelector, 'mouseenter' + eventNamespace, module.change.text)
               .on(moduleSelector, 'mouseleave' + eventNamespace, module.reset.text)
               .on(moduleSelector, 'click'      + eventNamespace, module.toggle.state)
@@ -527,7 +527,7 @@ $.fn.state = function(parameters) {
             response
           ;
           passedArguments = passedArguments || queryArguments;
-          context         = element         || context;
+          context         = context         || element;
           if(typeof query == 'string' && object !== undefined) {
             query    = query.split(/[\. ]/);
             maxDepth = query.length - 1;

package/src/definitions/behaviors/visibility.js

@@ -58,7 +58,7 @@ $.fn.visibility = function(parameters) {
         $window         = $(window),
 
         $module         = $(this),
-        $context        = $(settings.context),
+        $context        = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context),
 
         $placeholder,
 
@@ -428,7 +428,7 @@ $.fn.visibility = function(parameters) {
           },
           verticallyScrollableContext: function() {
             var
-              overflowY = ($context.get(0) !== window)
+              overflowY = ($context[0] !== window)
                 ? $context.css('overflow-y')
                 : false
             ;
@@ -436,7 +436,7 @@ $.fn.visibility = function(parameters) {
           },
           horizontallyScrollableContext: function() {
             var
-              overflowX = ($context.get(0) !== window)
+              overflowX = ($context[0] !== window)
                 ? $context.css('overflow-x')
                 : false
             ;
@@ -1139,7 +1139,7 @@ $.fn.visibility = function(parameters) {
             response
           ;
           passedArguments = passedArguments || queryArguments;
-          context         = element         || context;
+          context         = context         || element;
           if(typeof query == 'string' && object !== undefined) {
             query    = query.split(/[\. ]/);
             maxDepth = query.length - 1;

package/src/definitions/collections/form.less

@@ -66,12 +66,13 @@
 .ui.form .field > label {
   display: block;
   margin: @labelMargin;
-  color: @labelColor;
   font-size: @labelFontSize;
   font-weight: @labelFontWeight;
   text-transform: @labelTextTransform;
 }
-
+.ui.form:not(.inverted) .field > label:not(.button) {
+  color: @labelColor;
+}
 /*--------------------
     Standard Inputs
 ---------------------*/
@@ -139,6 +140,13 @@
   padding: initial;
 }
 
+.ui.form input::-webkit-calendar-picker-indicator {
+  padding: 0;
+  opacity: @iconOpacity;
+  transition: @iconTransition;
+  cursor: pointer;
+}
+
 /* Text Area */
 .ui.input textarea,
 .ui.form textarea {
@@ -336,7 +344,7 @@
   background: @promptBackground !important;
   border: @promptBorder !important;
   color: @promptTextColor !important;
-  & li:before {
+  & li::before {
     color: @promptTextColor;
   }
 }
@@ -346,8 +354,8 @@
     vertical-align: top;
     margin: @inlinePromptMargin;
   }
-  .ui.form .inline.fields .field .prompt:before,
-  .ui.form .inline.field .prompt:before {
+  .ui.form .inline.fields .field .prompt::before,
+  .ui.form .inline.field .prompt::before {
     border-width: 0 0 @inlinePromptBorderWidth @inlinePromptBorderWidth;
     bottom: auto;
     right: auto;
@@ -386,7 +394,7 @@
 .ui.form ::-webkit-input-placeholder {
   color: @inputPlaceholderColor;
 }
-.ui.form :-ms-input-placeholder {
+.ui.form :-ms-input-placeholder when (@supportIE) {
   color: @inputPlaceholderColor !important;
 }
 .ui.form ::-moz-placeholder {
@@ -397,7 +405,7 @@
 .ui.form :focus::-webkit-input-placeholder {
   color: @inputPlaceholderFocusColor;
 }
-.ui.form :focus:-ms-input-placeholder {
+.ui.form :focus:-ms-input-placeholder when (@supportIE) {
   color: @inputPlaceholderFocusColor !important;
 }
 .ui.form :focus::-moz-placeholder {
@@ -482,6 +490,10 @@
   box-shadow: @textAreaFocusBoxShadow;
   -webkit-appearance: none;
 }
+/* Focus */
+.ui.form input:focus::-webkit-calendar-picker-indicator {
+  opacity: @iconFocusOpacity;
+}
 
 & when not (@variationFormStates = false) {
   /*--------------------
@@ -528,7 +540,7 @@
       color: @c;
     }
 
-    .ui.form .fields.@{state} .field .ui.label, 
+    .ui.form .fields.@{state} .field .ui.label,
     .ui.form .field.@{state} .ui.label {
       background-color: @lbg;
     }
@@ -587,7 +599,7 @@
         border-radius: @formStates[@@state][borderRadius];
         box-shadow: @formStates[@@state][boxShadow];
       }
-      .ui.form .field input:not(:-ms-input-placeholder):invalid {
+      .ui.form .field input:not(:-ms-input-placeholder):invalid when (@supportIE) {
         color: @c;
         background: @bg;
         border-color: @formStates[@@state][borderColor];
@@ -649,7 +661,7 @@
     .ui.form .@{state} ::-webkit-input-placeholder {
       color: @formStates[@@state][inputPlaceholderColor];
     }
-    .ui.form .@{state} :-ms-input-placeholder {
+    .ui.form .@{state} :-ms-input-placeholder when (@supportIE) {
       color: @formStates[@@state][inputPlaceholderColor] !important;
     }
     .ui.form .@{state} ::-moz-placeholder {
@@ -659,7 +671,7 @@
     .ui.form .@{state} :focus::-webkit-input-placeholder {
       color: @formStates[@@state][inputPlaceholderFocusColor];
     }
-    .ui.form .@{state} :focus:-ms-input-placeholder {
+    .ui.form .@{state} :focus:-ms-input-placeholder when (@supportIE) {
       color: @formStates[@@state][inputPlaceholderFocusColor] !important;
     }
     .ui.form .@{state} :focus::-moz-placeholder {
@@ -721,13 +733,13 @@
     .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) label {
       color: @c;
     }
-    .ui.form .fields.@{state} .field .checkbox:not(.toggle):not(.slider) label:before,
-    .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) label:before {
+    .ui.form .fields.@{state} .field .checkbox:not(.toggle):not(.slider) label::before,
+    .ui.form .field.@{state} .checkbox:not(.toggle):not(.slider) label::before {
       background: @bg;
       border-color: @bdc;
     }
-    .ui.form .fields.@{state} .field .checkbox label:after,
-    .ui.form .field.@{state} .checkbox label:after {
+    .ui.form .fields.@{state} .field .checkbox label::after,
+    .ui.form .field.@{state} .checkbox label::after {
       color: @c;
     }
 
@@ -770,7 +782,7 @@
     cursor: default;
     pointer-events: none;
   }
-  .ui.loading.form:before {
+  .ui.loading.form::before {
     position: absolute;
     content: '';
     top: 0;
@@ -781,11 +793,11 @@
     z-index: @loaderDimmerZIndex;
   }
 
-  .ui.loading.form.segments:before {
+  .ui.loading.form.segments::before {
     border-radius: @defaultBorderRadius;
   }
 
-  .ui.loading.form:after {
+  .ui.loading.form::after {
     position: absolute;
     content: '';
     top: 50%;
@@ -814,27 +826,27 @@
        Required Field
   ---------------------*/
 
-  .ui.form .required.fields:not(.grouped) > .field > label:after,
-  .ui.form .required.fields.grouped > label:after,
-  .ui.form .required.field > label:after,
-  .ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
-  .ui.form .required.field > .checkbox:after,
-  .ui.form label.required:after {
+  .ui.form .required.fields:not(.grouped) > .field > label::after,
+  .ui.form .required.fields.grouped > label::after,
+  .ui.form .required.field > label::after,
+  .ui.form .required.fields:not(.grouped) > .field > .checkbox::after,
+  .ui.form .required.field > .checkbox::after,
+  .ui.form label.required::after {
     margin: @requiredMargin;
     content: @requiredContent;
     color: @requiredColor;
   }
 
-  .ui.form .required.fields:not(.grouped) > .field > label:after,
-  .ui.form .required.fields.grouped > label:after,
-  .ui.form .required.field > label:after,
-  .ui.form label.required:after {
+  .ui.form .required.fields:not(.grouped) > .field > label::after,
+  .ui.form .required.fields.grouped > label::after,
+  .ui.form .required.field > label::after,
+  .ui.form label.required::after {
     display: inline-block;
     vertical-align: top;
   }
 
-  .ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
-  .ui.form .required.field > .checkbox:after {
+  .ui.form .required.fields:not(.grouped) > .field > .checkbox::after,
+  .ui.form .required.field > .checkbox::after {
     position: absolute;
     top: 0;
     left: 100%;
@@ -865,7 +877,7 @@
   .ui.inverted.loading.form {
     color: @invertedLoaderLineColor;
   }
-  .ui.inverted.loading.form:before {
+  .ui.inverted.loading.form::before {
     background: @loaderInvertedDimmerColor;
   }
   /* Inverted Field */

package/src/definitions/collections/grid.less

@@ -1096,7 +1096,7 @@
     .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;
@@ -1119,7 +1119,7 @@
   }
   & when (@variationGridVertical) {
     /* First Row Vertically Divided */
-    .ui[class*="vertically divided"].grid > .row:first-child:before {
+    .ui[class*="vertically divided"].grid > .row:first-child::before {
       box-shadow: none;
     }
   }
@@ -1134,20 +1134,20 @@
       box-shadow: none;
     }
     & when (@variationGridVertical) {
-      .ui.inverted[class*="vertically divided"].grid > .row:before {
+      .ui.inverted[class*="vertically divided"].grid > .row::before {
         box-shadow: @verticallyDividedInvertedBorder;
       }
     }
   }
   & when (@variationGridRelaxed) and (@variationGridVertical) {
     /* Relaxed */
-    .ui.relaxed[class*="vertically divided"].grid > .row:before {
+    .ui.relaxed[class*="vertically divided"].grid > .row::before {
       margin-left: (@relaxedGutterWidth / 2);
       margin-right: (@relaxedGutterWidth / 2);
       width: e(%("calc(100%% - %d)", @relaxedGutterWidth));
     }
     & when (@variationGridVeryRelaxed) {
-      .ui[class*="very relaxed"][class*="vertically divided"].grid > .row:before {
+      .ui[class*="very relaxed"][class*="vertically divided"].grid > .row::before {
         margin-left: (@veryRelaxedGutterWidth / 2);
         margin-right: (@veryRelaxedGutterWidth / 2);
         width: e(%("calc(100%% - %d)", @veryRelaxedGutterWidth));
@@ -1391,10 +1391,10 @@
         box-shadow: none;
       }
       /* 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 {
         box-shadow: @verticallyDividedBorder;
       }
-      .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 {
         box-shadow: none;
       }
     }
@@ -1430,10 +1430,10 @@
         box-shadow: none;
       }
       /* 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 {
         box-shadow: @verticallyDividedBorder;
       }
-      .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 {
         box-shadow: none;
       }
     }
@@ -1469,10 +1469,10 @@
         box-shadow: none;
       }
       /* 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 {
         box-shadow: @verticallyDividedBorder;
       }
-      .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 {
         box-shadow: none;
       }
     }