styled-bootstrap-grid - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/styled/media.js

@@ -7,3 +7,4 @@ 'use strict';
 
-var _templateObject = _taggedTemplateLiteral(['\n    @media (min-width: ', 'px) {\n      ', '\n    }\n  '], ['\n    @media (min-width: ', 'px) {\n      ', '\n    }\n  ']);
+var _templateObject = _taggedTemplateLiteral(['\n      @media (max-width: ', 'px) {\n        ', '\n      }\n    '], ['\n      @media (max-width: ', 'px) {\n        ', '\n      }\n    ']),
+    _templateObject2 = _taggedTemplateLiteral(['\n      @media (min-width: ', 'px) {\n        ', '\n      }\n    '], ['\n      @media (min-width: ', 'px) {\n        ', '\n      }\n    ']);
 
@@ -22,9 +23,16 @@ var _styledComponents = require('styled-components');
   phone: 576,
-  sm: 576
+  sm: 576,
+  col: true
 };
 
 var media = Object.keys(breakpoints).reduce(function (accumulator, label) {
-  accumulator[label] = function () {
-    return (0, _styledComponents.css)(_templateObject, breakpoints[label], _styledComponents.css.apply(undefined, arguments));
-  };
+  if (label === 'col') {
+    accumulator[label] = function () {
+      return (0, _styledComponents.css)(_templateObject, breakpoints.sm - 1, _styledComponents.css.apply(undefined, arguments));
+    };
+  } else {
+    accumulator[label] = function () {
+      return (0, _styledComponents.css)(_templateObject2, breakpoints[label], _styledComponents.css.apply(undefined, arguments));
+    };
+  }
   return accumulator;
@@ -31,0 +39,0 @@ }, {});

package.json

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

README.md

@@ -162,2 +162,5 @@ # styled-bootstrap-grid
   color: black;
+  ${media.col`
+    color: orange;
+  `}
   ${media.phone`
@@ -196,2 +199,3 @@ color: blue;
 | - | - | - |
+| col | *phone* | `@media (max-width: 766px) { /* */ }`
 | sm | *phone* | `@media (min-width: 767px) { /* */ }`
@@ -198,0 +202,0 @@ | md | *tablet* | `@media (min-width: 768px) { /* */ }`

src/styled/media.js

@@ -12,10 +12,19 @@ import { css } from 'styled-components';
   sm: 576,
+  col: true,
 };
 
 const media = Object.keys(breakpoints).reduce((accumulator, label) => {
-  accumulator[label] = (...args) => css`
-    @media (min-width: ${breakpoints[label]}px) {
-      ${css(...args)}
-    }
-  `;
+  if (label === 'col') {
+    accumulator[label] = (...args) => css`
+      @media (max-width: ${breakpoints.sm - 1}px) {
+        ${css(...args)}
+      }
+    `;
+  } else {
+    accumulator[label] = (...args) => css`
+      @media (min-width: ${breakpoints[label]}px) {
+        ${css(...args)}
+      }
+    `;
+  }
   return accumulator;
@@ -22,0 +31,0 @@ }, {});

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

466425

increased by0.16%

Lines of code

2129

increased by0.8%

Number of lines in readme file

309

increased by1.31%

No dependency changes