styled-bootstrap-grid - npm Package Compare versions

Comparing version 1.2.2 to 2.0.0

dist/Col.js

@@ -23,3 +23,3 @@ 'use strict';
 
-var MyCol = function MyCol(props) {
+var MyCol = function MyCol(props, ref) {
   var col = props.col,
@@ -284,3 +284,3 @@ offset = props.offset,
     _styled.Col,
-    allProps,
+    _extends({ ref: ref }, allProps),
     children
@@ -367,2 +367,2 @@ );
 
-exports.default = MyCol;
+exports.default = _react2.default.forwardRef(MyCol);

dist/Container.js

@@ -23,3 +23,3 @@ 'use strict';
 
-var container = function container(props) {
+var container = function container(props, ref) {
   var fluid = props.fluid,
@@ -32,3 +32,3 @@ children = props.children,
       _styled.ContainerFluid,
-      _extends({ 'data-name': 'container-fluid' }, otherProps),
+      _extends({ 'data-name': 'container-fluid', ref: ref }, otherProps),
       children
@@ -39,3 +39,3 @@ );
     _styled.Container,
-    _extends({ 'data-name': 'container' }, otherProps),
+    _extends({ 'data-name': 'container', ref: ref }, otherProps),
     children
@@ -54,2 +54,2 @@ );
 
-exports.default = container;
+exports.default = _react2.default.forwardRef(container);

dist/Row.js

@@ -23,3 +23,3 @@ 'use strict';
 
-var row = function row(props) {
+var row = function row(props, ref) {
   var children = props.children,
@@ -85,3 +85,4 @@ alignItems = props.alignItems,
       xlJustifyContent: xlJustifyContent,
-      'data-name': dataName
+      'data-name': dataName,
+      ref: ref
     }, otherProps),
@@ -119,2 +120,2 @@ children
 
-exports.default = row;
+exports.default = _react2.default.forwardRef(row);

dist/styled/Col.js

@@ -24,16 +24,16 @@ 'use strict';
   col: {
-    true: '\n      -ms-flex-preferred-size: 0;\n      flex-basis: 0;\n      -webkit-box-flex: 1;\n      -ms-flex-positive: 1;\n      flex-grow: 1;\n      max-width: 100%;\n    ',
-    auto: '\n      -webkit-box-flex: 0;\n      -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n      width: auto;\n      max-width: none;\n    ',
-    1: '\n      -webkit-box-flex: 0;\n      -ms-flex: 0 0 8.333333%;\n      flex: 0 0 8.333333%;\n      max-width: 8.333333%;\n    ',
-    2: '\n      -webkit-box-flex: 0;\n      -ms-flex: 0 0 16.666667%;\n      flex: 0 0 16.666667%;\n      max-width: 16.666667%;\n    ',
-    3: '\n      -webkit-box-flex: 0;\n      -ms-flex: 0 0 25%;\n      flex: 0 0 25%;\n      max-width: 25%;\n        ',
-    4: '\n      -webkit-box-flex: 0;\n      -ms-flex: 0 0 33.333333%;\n      flex: 0 0 33.333333%;\n      max-width: 33.333333%;\n        ',
-    5: '\n      -webkit-box-flex: 0;\n      -ms-flex: 0 0 41.666667%;\n      flex: 0 0 41.666667%;\n      max-width: 41.666667%;\n        ',
-    6: '\n      -webkit-box-flex: 0;\n      -ms-flex: 0 0 50%;\n      flex: 0 0 50%;\n      max-width: 50%;\n    ',
-    7: '\n      -webkit-box-flex: 0;\n      -ms-flex: 0 0 58.333333%;\n      flex: 0 0 58.333333%;\n      max-width: 58.333333%;\n    ',
-    8: '\n      -webkit-box-flex: 0;\n      -ms-flex: 0 0 66.666667%;\n      flex: 0 0 66.666667%;\n      max-width: 66.666667%;\n    ',
-    9: '\n      -webkit-box-flex: 0;\n      -ms-flex: 0 0 75%;\n      flex: 0 0 75%;\n      max-width: 75%;\n    ',
-    10: '\n      -webkit-box-flex: 0;\n      -ms-flex: 0 0 83.333333%;\n      flex: 0 0 83.333333%;\n      max-width: 83.333333%;\n    ',
-    11: '\n      -webkit-box-flex: 0;\n      -ms-flex: 0 0 91.666667%;\n      flex: 0 0 91.666667%;\n      max-width: 91.666667%;\n    ',
-    12: '\n      -webkit-box-flex: 0;\n      -ms-flex: 0 0 100%;\n      flex: 0 0 100%;\n      max-width: 100%;\n    '
+    true: '\n      -ms-flex-preferred-size: 0;\n      flex-basis: 0;\n      -ms-flex-positive: 1;\n      flex-grow: 1;\n      max-width: 100%;\n    ',
+    auto: '\n      -ms-flex: 0 0 auto;\n      flex: 0 0 auto;\n      width: auto;\n      max-width: none;\n    ',
+    1: '\n      -ms-flex: 0 0 8.333333%;\n      flex: 0 0 8.333333%;\n      max-width: 8.333333%;\n    ',
+    2: '\n      -ms-flex: 0 0 16.666667%;\n      flex: 0 0 16.666667%;\n      max-width: 16.666667%;\n    ',
+    3: '\n      -ms-flex: 0 0 25%;\n      flex: 0 0 25%;\n      max-width: 25%;\n        ',
+    4: '\n      -ms-flex: 0 0 33.333333%;\n      flex: 0 0 33.333333%;\n      max-width: 33.333333%;\n        ',
+    5: '\n      -ms-flex: 0 0 41.666667%;\n      flex: 0 0 41.666667%;\n      max-width: 41.666667%;\n        ',
+    6: '\n      -ms-flex: 0 0 50%;\n      flex: 0 0 50%;\n      max-width: 50%;\n    ',
+    7: '\n      -ms-flex: 0 0 58.333333%;\n      flex: 0 0 58.333333%;\n      max-width: 58.333333%;\n    ',
+    8: '\n      -ms-flex: 0 0 66.666667%;\n      flex: 0 0 66.666667%;\n      max-width: 66.666667%;\n    ',
+    9: '\n      -ms-flex: 0 0 75%;\n      flex: 0 0 75%;\n      max-width: 75%;\n    ',
+    10: '\n      -ms-flex: 0 0 83.333333%;\n      flex: 0 0 83.333333%;\n      max-width: 83.333333%;\n    ',
+    11: '\n      -ms-flex: 0 0 91.666667%;\n      flex: 0 0 91.666667%;\n      max-width: 91.666667%;\n    ',
+    12: '\n      -ms-flex: 0 0 100%;\n      flex: 0 0 100%;\n      max-width: 100%;\n    '
   },
@@ -55,17 +55,17 @@ offset: {
   order: {
-    first: '\n      -webkit-box-ordinal-group: 0;\n      -ms-flex-order: -1;\n      order: -1;\n    ',
-    last: '\n      -webkit-box-ordinal-group: 14;\n      -ms-flex-order: 13;\n      order: 13;\n    ',
-    0: '\n      -webkit-box-ordinal-group: 1;\n      -ms-flex-order: 0;\n      order: 0;\n    ',
-    1: '\n      -webkit-box-ordinal-group: 2;\n      -ms-flex-order: 1;\n      order: 1;\n    ',
-    2: '\n      -webkit-box-ordinal-group: 3;\n      -ms-flex-order: 2;\n      order: 2;\n    ',
-    3: '\n      -webkit-box-ordinal-group: 4;\n      -ms-flex-order: 3;\n      order: 3;\n    ',
-    4: '\n      -webkit-box-ordinal-group: 5;\n      -ms-flex-order: 4;\n      order: 4;\n    ',
-    5: '\n      -webkit-box-ordinal-group: 6;\n      -ms-flex-order: 5;\n      order: 5;\n    ',
-    6: '\n      -webkit-box-ordinal-group: 7;\n      -ms-flex-order: 6;\n      order: 6;\n    ',
-    7: '\n      -webkit-box-ordinal-group: 8;\n      -ms-flex-order: 7;\n      order: 7;\n    ',
-    8: '\n      -webkit-box-ordinal-group: 9;\n      -ms-flex-order: 8;\n      order: 8;\n    ',
-    9: '\n      -webkit-box-ordinal-group: 10;\n      -ms-flex-order: 9;\n      order: 9;\n    ',
-    10: '\n      -webkit-box-ordinal-group: 11;\n      -ms-flex-order: 10;\n      order: 10;\n    ',
-    11: '\n      -webkit-box-ordinal-group: 12;\n      -ms-flex-order: 11;\n      order: 11;\n    ',
-    12: '\n      -webkit-box-ordinal-group: 13;\n      -ms-flex-order: 12;\n      order: 12;\n    '
+    first: '\n      -ms-flex-order: -1;\n      order: -1;\n    ',
+    last: '\n      -ms-flex-order: 13;\n      order: 13;\n    ',
+    0: '\n      -ms-flex-order: 0;\n      order: 0;\n    ',
+    1: '\n      -ms-flex-order: 1;\n      order: 1;\n    ',
+    2: '\n      -ms-flex-order: 2;\n      order: 2;\n    ',
+    3: '\n      -ms-flex-order: 3;\n      order: 3;\n    ',
+    4: '\n      -ms-flex-order: 4;\n      order: 4;\n    ',
+    5: '\n      -ms-flex-order: 5;\n      order: 5;\n    ',
+    6: '\n      -ms-flex-order: 6;\n      order: 6;\n    ',
+    7: '\n      -ms-flex-order: 7;\n      order: 7;\n    ',
+    8: '\n      -ms-flex-order: 8;\n      order: 8;\n    ',
+    9: '\n      -ms-flex-order: 9;\n      order: 9;\n    ',
+    10: '\n      -ms-flex-order: 10;\n      order: 10;\n    ',
+    11: '\n      -ms-flex-order: 11;\n      order: 11;\n    ',
+    12: '\n      -ms-flex-order: 12;\n      order: 12;\n    '
   },
@@ -72,0 +72,0 @@ alignSelf: {

dist/styled/Row.js

@@ -7,3 +7,3 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  margin-right: -', 'px;\n  margin-left: -', 'px;\n\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n'], ['\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  margin-right: -', 'px;\n  margin-left: -', 'px;\n\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n']),
+var _templateObject = _taggedTemplateLiteral(['\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  margin-right: -', 'px;\n  margin-left: -', 'px;\n\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n'], ['\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-wrap: wrap;\n  flex-wrap: wrap;\n  margin-right: -', 'px;\n  margin-left: -', 'px;\n\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n']),
     _templateObject2 = _taggedTemplateLiteral(['', ''], ['', '']);
@@ -25,13 +25,13 @@
   alignItems: {
-    start: '\n      -webkit-box-align: start !important;\n      -ms-flex-align: start !important;\n      align-items: flex-start !important;\n    ',
-    end: '\n      -webkit-box-align: end !important;\n      -ms-flex-align: end !important;\n      align-items: flex-end !important;\n    ',
-    center: '\n      -webkit-box-align: center !important;\n      -ms-flex-align: center !important;\n      align-items: center !important;\n    ',
-    baseline: '\n      -webkit-box-align: baseline !important;\n      -ms-flex-align: baseline !important;\n      align-items: baseline !important;\n    ',
-    stretch: '\n      -webkit-box-align: stretch !important;\n      -ms-flex-align: stretch !important;\n      align-items: stretch !important;\n    '
+    start: '\n      -ms-flex-align: start !important;\n      align-items: flex-start !important;\n    ',
+    end: '\n      -ms-flex-align: end !important;\n      align-items: flex-end !important;\n    ',
+    center: '\n      -ms-flex-align: center !important;\n      align-items: center !important;\n    ',
+    baseline: '\n      -ms-flex-align: baseline !important;\n      align-items: baseline !important;\n    ',
+    stretch: '\n      -ms-flex-align: stretch !important;\n      align-items: stretch !important;\n    '
   },
   justifyContent: {
-    start: '\n      -webkit-box-pack: start !important;\n      -ms-flex-pack: start !important;\n      justify-content: flex-start !important;\n    ',
-    end: '\n      -webkit-box-pack: end !important;\n      -ms-flex-pack: end !important;\n      justify-content: flex-end !important;\n    ',
-    center: '\n      -webkit-box-pack: center !important;\n      -ms-flex-pack: center !important;\n      justify-content: center !important;\n    ',
-    between: '\n      -webkit-box-pack: justify !important;\n      -ms-flex-pack: justify !important;\n      justify-content: space-between !important;\n    ',
+    start: '\n      -ms-flex-pack: start !important;\n      justify-content: flex-start !important;\n    ',
+    end: '\n      -ms-flex-pack: end !important;\n      justify-content: flex-end !important;\n    ',
+    center: '\n      -ms-flex-pack: center !important;\n      justify-content: center !important;\n    ',
+    between: '\n      -ms-flex-pack: justify !important;\n      justify-content: space-between !important;\n    ',
     around: '\n      -ms-flex-pack: distribute !important;\n      justify-content: space-around !important;\n    '
@@ -38,0 +38,0 @@ }

example/src/App.js

@@ -32,3 +32,3 @@ import React from 'react';
         <h3>Auto-layout columns: Equal-width</h3>
-        <a href="https://getbootstrap.com/docs/4.0/layout/grid/#equal-width">Bootstrap documentation</a>
+        <a href="https://getbootstrap.com/docs/4.1/layout/grid/#equal-width">Bootstrap documentation</a>
       </Col>
@@ -51,3 +51,3 @@ </TitleRow>
         <h3>Auto-layout columns: Setting one column width</h3>
-        <a href="https://getbootstrap.com/docs/4.0/layout/grid/#setting-one-column-width">Bootstrap documentation</a>
+        <a href="https://getbootstrap.com/docs/4.1/layout/grid/#setting-one-column-width">Bootstrap documentation</a>
       </Col>
@@ -75,3 +75,3 @@ </TitleRow>
         <h3>Auto-layout columns: Variable width content</h3>
-        <a href="https://getbootstrap.com/docs/4.0/layout/grid/#variable-width-content">Bootstrap documentation</a>
+        <a href="https://getbootstrap.com/docs/4.1/layout/grid/#variable-width-content">Bootstrap documentation</a>
       </Col>
@@ -99,3 +99,3 @@ </TitleRow>
         <h3>Auto-layout columns: Stacked to horizontal</h3>
-        <a href="https://getbootstrap.com/docs/4.0/layout/grid/#stacked-to-horizontal">Bootstrap documentation</a>
+        <a href="https://getbootstrap.com/docs/4.1/layout/grid/#stacked-to-horizontal">Bootstrap documentation</a>
       </Col>
@@ -123,3 +123,3 @@ </TitleRow>
         <h3>Alignment: Vertical alignment</h3>
-        <a href="https://getbootstrap.com/docs/4.0/layout/grid/#vertical-alignment">Bootstrap documentation</a>
+        <a href="https://getbootstrap.com/docs/4.1/layout/grid/#vertical-alignment">Bootstrap documentation</a>
       </Col>
@@ -242,3 +242,3 @@ </TitleRow>
         <h3>Alignment: Horizontal alignment</h3>
-        <a href="https://getbootstrap.com/docs/4.0/layout/grid/#horizontal-alignment">Bootstrap documentation</a>
+        <a href="https://getbootstrap.com/docs/4.1/layout/grid/#horizontal-alignment">Bootstrap documentation</a>
       </Col>
@@ -343,3 +343,3 @@ </TitleRow>
         <h3>Reordering: Order classes</h3>
-        <a href="https://getbootstrap.com/docs/4.0/layout/grid/#order-classes">Bootstrap documentation</a>
+        <a href="https://getbootstrap.com/docs/4.1/layout/grid/#order-classes">Bootstrap documentation</a>
       </Col>
@@ -376,3 +376,3 @@ </TitleRow>
         <h3>Offsetting columns: Offset classes</h3>
-        <a href="https://getbootstrap.com/docs/4.0/layout/grid/#offset-classes">Bootstrap documentation</a>
+        <a href="https://getbootstrap.com/docs/4.1/layout/grid/#offset-classes">Bootstrap documentation</a>
       </Col>
@@ -398,3 +398,13 @@ </TitleRow>
         <a href="https://v4-alpha.getbootstrap.com/layout/responsive-utilities/#available-classes">Bootstrap documentation</a>
+
       </Col>
+      <Col col={12}>
+        <div style={{ fontSize: 12, paddingTop: 15, color: 'red' }}>
+          <i>Will be deprecated soon</i>
+          <ul>
+            <li><a href="https://stackoverflow.com/questions/35351353/missing-visible-and-hidden-in-bootstrap-v4">Link 1</a></li>
+            <li><a href="https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements">Link 2</a></li>
+          </ul>
+        </div>
+      </Col>
     </TitleRow>
@@ -401,0 +411,0 @@ <Row>

package.json

 {
   "name": "styled-bootstrap-grid",
-  "version": "1.2.2",
+  "version": "2.0.0",
   "description": "bootstrap grid system using styled components",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -16,6 +16,6 @@ # styled-bootstrap-grid
 
-This module is also based on the [Twitter Bootstrap](https://getbootstrap.com/) v4.0.0 `bootstrap-grid.css`.
+This module is also based on the [Twitter Bootstrap](https://getbootstrap.com/) v4.1.3 `bootstrap-grid.css`.
 **The css provided to styled bootstrap grid is not mine.**
 
-> For more information about how does this grid system works *(I mean with classes like containers, row, col, offset, push)* , please refer to the official [Twitter Bootstrap layout documentation](https://v4-alpha.getbootstrap.com/layout/overview/).
+> For more information about how does this grid system works *(I mean with classes like containers, row, col, offset, push)* , please refer to the official [Twitter Bootstrap layout documentation](https://getbootstrap.com/docs/4.1/layout/overview/).
 
@@ -29,3 +29,3 @@ ## Install
 > Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your `<head>`.
-> *from [Bootstrap documentation](https://getbootstrap.com/docs/4.0/getting-started/introduction/#responsive-meta-tag)*
+> *from [Bootstrap documentation](https://getbootstrap.com/docs/4.1/getting-started/introduction/#responsive-meta-tag)*
 
@@ -146,3 +146,3 @@ ```html
     xs: 575,
-    // or you cas uses aliases
+    // or you can use aliases
     // giant: 1200,
@@ -168,3 +168,3 @@ // desktop: 992,
       xs: 540,
-      // or you cas uses aliases
+      // or you can use aliases
       // giant: 1140,
@@ -272,3 +272,3 @@ // desktop: 960,
     xs: 575,
-    // or you cas uses aliases
+    // or you can use aliases
     // giant: 1200,
@@ -294,3 +294,3 @@ // desktop: 992,
       xs: 540,
-      // or you cas uses aliases
+      // or you can use aliases
       // giant: 1140,
@@ -297,0 +297,0 @@ // desktop: 960,

src/Col.jsx

@@ -6,3 +6,3 @@ import React from 'react';
 
-const MyCol = (props) => {
+const MyCol = (props, ref) => {
   const {
@@ -269,3 +269,3 @@ col,
   return (
-    <Col {...allProps}>
+    <Col ref={ref} {...allProps}>
       {children}
@@ -364,2 +364,2 @@ </Col>
 
-export default MyCol;
+export default React.forwardRef(MyCol);

src/Container.jsx

@@ -6,3 +6,3 @@ import React from 'react';
 
-const container = (props) => {
+const container = (props, ref) => {
   const {
@@ -15,5 +15,5 @@ fluid,
   if (fluid) {
-    return <ContainerFluid data-name="container-fluid" {...otherProps}>{children}</ContainerFluid>;
+    return <ContainerFluid data-name="container-fluid" ref={ref} {...otherProps}>{children}</ContainerFluid>;
   }
-  return <Container data-name="container" {...otherProps}>{children}</Container>;
+  return <Container data-name="container" ref={ref} {...otherProps}>{children}</Container>;
 };
@@ -34,2 +34,2 @@
 
-export default container;
+export default React.forwardRef(container);

src/Row.jsx

@@ -6,3 +6,3 @@ import React from 'react';
 
-const row = (props) => {
+const row = (props, ref) => {
   const {
@@ -70,2 +70,3 @@ children,
       data-name={dataName}
+      ref={ref}
       {...otherProps}
@@ -110,2 +111,2 @@ >
 
-export default row;
+export default React.forwardRef(row);

src/styled/Col.js

@@ -10,3 +10,2 @@ import styled from 'styled-components';
       flex-basis: 0;
-      -webkit-box-flex: 1;
       -ms-flex-positive: 1;
@@ -17,3 +16,2 @@ flex-grow: 1;
     auto: `
-      -webkit-box-flex: 0;
       -ms-flex: 0 0 auto;
@@ -25,3 +23,2 @@ flex: 0 0 auto;
     1: `
-      -webkit-box-flex: 0;
       -ms-flex: 0 0 8.333333%;
@@ -32,3 +29,2 @@ flex: 0 0 8.333333%;
     2: `
-      -webkit-box-flex: 0;
       -ms-flex: 0 0 16.666667%;
@@ -39,3 +35,2 @@ flex: 0 0 16.666667%;
     3: `
-      -webkit-box-flex: 0;
       -ms-flex: 0 0 25%;
@@ -46,3 +41,2 @@ flex: 0 0 25%;
     4: `
-      -webkit-box-flex: 0;
       -ms-flex: 0 0 33.333333%;
@@ -53,3 +47,2 @@ flex: 0 0 33.333333%;
     5: `
-      -webkit-box-flex: 0;
       -ms-flex: 0 0 41.666667%;
@@ -60,3 +53,2 @@ flex: 0 0 41.666667%;
     6: `
-      -webkit-box-flex: 0;
       -ms-flex: 0 0 50%;
@@ -67,3 +59,2 @@ flex: 0 0 50%;
     7: `
-      -webkit-box-flex: 0;
       -ms-flex: 0 0 58.333333%;
@@ -74,3 +65,2 @@ flex: 0 0 58.333333%;
     8: `
-      -webkit-box-flex: 0;
       -ms-flex: 0 0 66.666667%;
@@ -81,3 +71,2 @@ flex: 0 0 66.666667%;
     9: `
-      -webkit-box-flex: 0;
       -ms-flex: 0 0 75%;
@@ -88,3 +77,2 @@ flex: 0 0 75%;
     10: `
-      -webkit-box-flex: 0;
       -ms-flex: 0 0 83.333333%;
@@ -95,3 +83,2 @@ flex: 0 0 83.333333%;
     11: `
-      -webkit-box-flex: 0;
       -ms-flex: 0 0 91.666667%;
@@ -102,3 +89,2 @@ flex: 0 0 91.666667%;
     12: `
-      -webkit-box-flex: 0;
       -ms-flex: 0 0 100%;
@@ -125,3 +111,2 @@ flex: 0 0 100%;
     first: `
-      -webkit-box-ordinal-group: 0;
       -ms-flex-order: -1;
@@ -131,3 +116,2 @@ order: -1;
     last: `
-      -webkit-box-ordinal-group: 14;
       -ms-flex-order: 13;
@@ -137,3 +121,2 @@ order: 13;
     0: `
-      -webkit-box-ordinal-group: 1;
       -ms-flex-order: 0;
@@ -143,3 +126,2 @@ order: 0;
     1: `
-      -webkit-box-ordinal-group: 2;
       -ms-flex-order: 1;
@@ -149,3 +131,2 @@ order: 1;
     2: `
-      -webkit-box-ordinal-group: 3;
       -ms-flex-order: 2;
@@ -155,3 +136,2 @@ order: 2;
     3: `
-      -webkit-box-ordinal-group: 4;
       -ms-flex-order: 3;
@@ -161,3 +141,2 @@ order: 3;
     4: `
-      -webkit-box-ordinal-group: 5;
       -ms-flex-order: 4;
@@ -167,3 +146,2 @@ order: 4;
     5: `
-      -webkit-box-ordinal-group: 6;
       -ms-flex-order: 5;
@@ -173,3 +151,2 @@ order: 5;
     6: `
-      -webkit-box-ordinal-group: 7;
       -ms-flex-order: 6;
@@ -179,3 +156,2 @@ order: 6;
     7: `
-      -webkit-box-ordinal-group: 8;
       -ms-flex-order: 7;
@@ -185,3 +161,2 @@ order: 7;
     8: `
-      -webkit-box-ordinal-group: 9;
       -ms-flex-order: 8;
@@ -191,3 +166,2 @@ order: 8;
     9: `
-      -webkit-box-ordinal-group: 10;
       -ms-flex-order: 9;
@@ -197,3 +171,2 @@ order: 9;
     10: `
-      -webkit-box-ordinal-group: 11;
       -ms-flex-order: 10;
@@ -203,3 +176,2 @@ order: 10;
     11: `
-      -webkit-box-ordinal-group: 12;
       -ms-flex-order: 11;
@@ -209,3 +181,2 @@ order: 11;
     12: `
-      -webkit-box-ordinal-group: 13;
       -ms-flex-order: 12;
@@ -212,0 +183,0 @@ order: 12;

src/styled/Row.js

@@ -8,3 +8,2 @@ import styled from 'styled-components';
     start: `
-      -webkit-box-align: start !important;
       -ms-flex-align: start !important;
@@ -14,3 +13,2 @@ align-items: flex-start !important;
     end: `
-      -webkit-box-align: end !important;
       -ms-flex-align: end !important;
@@ -20,3 +18,2 @@ align-items: flex-end !important;
     center: `
-      -webkit-box-align: center !important;
       -ms-flex-align: center !important;
@@ -26,3 +23,2 @@ align-items: center !important;
     baseline: `
-      -webkit-box-align: baseline !important;
       -ms-flex-align: baseline !important;
@@ -32,3 +28,2 @@ align-items: baseline !important;
     stretch: `
-      -webkit-box-align: stretch !important;
       -ms-flex-align: stretch !important;
@@ -40,3 +35,2 @@ align-items: stretch !important;
     start: `
-      -webkit-box-pack: start !important;
       -ms-flex-pack: start !important;
@@ -46,3 +40,2 @@ justify-content: flex-start !important;
     end: `
-      -webkit-box-pack: end !important;
       -ms-flex-pack: end !important;
@@ -52,3 +45,2 @@ justify-content: flex-end !important;
     center: `
-      -webkit-box-pack: center !important;
       -ms-flex-pack: center !important;
@@ -58,3 +50,2 @@ justify-content: center !important;
     between: `
-      -webkit-box-pack: justify !important;
       -ms-flex-pack: justify !important;
@@ -72,3 +63,2 @@ justify-content: space-between !important;
 const Row = styled.div`
-  display: -webkit-box;
   display: -ms-flexbox;
@@ -75,0 +65,0 @@ display: flex;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

576965

increased by0.29%

Number of package files

47

increased by2.17%

Lines of code

2854

increased by3.18%

No dependency changes