@ausbom/grid 0.5.1 → 0.6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/Grid.js +1 -1
- package/lib/index.js +1 -1
- package/lib/scss/module.scss +10 -8
- package/package.json +3 -3
package/lib/Grid.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=exports.GridItem=void 0;var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var
|
|
1
|
+
"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=exports.GridItem=void 0;var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _typeof2=_interopRequireDefault(require("@babel/runtime/helpers/typeof"));var _toConsumableArray2=_interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));var _classnames=_interopRequireDefault(require("classnames"));var _react=_interopRequireDefault(require("react"));var _excluded=["children","className","xs","s","m","l"],_excluded2=["className","children","verticalAlign","noRowGutter"];function _callSuper(t,o,e){return o=(0,_getPrototypeOf2["default"])(o),(0,_possibleConstructorReturn2["default"])(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],(0,_getPrototypeOf2["default"])(t).constructor):o.apply(t,e))}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}var bpClasses=function bpClasses(bp,prop){var classSuffix="bom-grid-col-".concat(bp);var classes=[];if(typeof prop==="boolean"&&prop===true){classes=[].concat((0,_toConsumableArray2["default"])(classes),["".concat(classSuffix)])}else if(typeof prop==="number"){classes=[].concat((0,_toConsumableArray2["default"])(classes),["".concat(classSuffix,"--span-").concat(prop)])}else if((0,_typeof2["default"])(prop)==="object"){if(typeof prop.offset==="number"){classes=[].concat((0,_toConsumableArray2["default"])(classes),["".concat(classSuffix,"--offset-").concat(prop.offset)])}if(typeof prop.span==="number"){classes=[].concat((0,_toConsumableArray2["default"])(classes),["".concat(classSuffix,"--span-").concat(prop.span)])}}return classes};var GridItem=exports.GridItem=function GridItem(_ref){var children=_ref.children,className=_ref.className,xs=_ref.xs,s=_ref.s,m=_ref.m,l=_ref.l,otherProps=(0,_objectWithoutProperties2["default"])(_ref,_excluded);var classes=_classnames["default"].apply(void 0,[className,"bom-grid-col"].concat((0,_toConsumableArray2["default"])(bpClasses("xs",xs)),(0,_toConsumableArray2["default"])(bpClasses("s",s)),(0,_toConsumableArray2["default"])(bpClasses("m",m)),(0,_toConsumableArray2["default"])(bpClasses("l",l))));return/*#__PURE__*/_react["default"].createElement("div",(0,_extends2["default"])({className:classes},otherProps),children)};var Grid=exports["default"]=/*#__PURE__*/function(_React$PureComponent){function Grid(){(0,_classCallCheck2["default"])(this,Grid);return _callSuper(this,Grid,arguments)}(0,_inherits2["default"])(Grid,_React$PureComponent);return(0,_createClass2["default"])(Grid,[{key:"render",value:function render(){var _this$props=this.props,className=_this$props.className,children=_this$props.children,verticalAlign=_this$props.verticalAlign,noRowGutter=_this$props.noRowGutter,otherProps=(0,_objectWithoutProperties2["default"])(_this$props,_excluded2);var classes=(0,_classnames["default"])(className,(0,_defineProperty2["default"])({"bom-grid":true,"bom-grid--no-row-gutter":!!noRowGutter},"bom-grid--vertical-align-".concat(verticalAlign),!!verticalAlign));return/*#__PURE__*/_react["default"].createElement("div",(0,_extends2["default"])({className:classes},otherProps),children)}}])}(_react["default"].PureComponent);(0,_defineProperty2["default"])(Grid,"defaultProps",{verticalAlign:"stretch",noRowGutter:false});
|
package/lib/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var _typeof=require("@babel/runtime/helpers/typeof");Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"GridItem",{enumerable:true,get:function get(){return _Grid.GridItem}});exports["default"]=void 0;var _Grid=_interopRequireWildcard(require("./Grid"));function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,"default":e};if(null===e||"object"!=_typeof(e)&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f)}for(var _t in e)"default"!==_t&&{}.hasOwnProperty.call(e,_t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,_t))&&(i.get||i.set)?o(f,_t,i):f[_t]=e[_t]);return f})(e,t)}var _default=exports["default"]=_Grid["default"];
|
package/lib/scss/module.scss
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@use "sass:math";
|
|
2
|
+
|
|
1
3
|
@import '~@ausbom/styles/lib/scss/globals';
|
|
2
4
|
@import './globals.scss';
|
|
3
5
|
|
|
@@ -20,14 +22,14 @@ $_column-gutter: (
|
|
|
20
22
|
@mixin _bom-grid($bp) {
|
|
21
23
|
display: flex;
|
|
22
24
|
flex-wrap: wrap;
|
|
23
|
-
margin-left: map-get($_column-gutter, $bp)
|
|
24
|
-
margin-right: map-get($_column-gutter, $bp)
|
|
25
|
+
margin-left: math.div(map-get($_column-gutter, $bp), -2);
|
|
26
|
+
margin-right: math.div(map-get($_column-gutter, $bp), -2);
|
|
25
27
|
flex: auto;
|
|
26
28
|
|
|
27
29
|
.bom-grid-col > .bom-grid {
|
|
28
30
|
// Ensure that nested grids don't add extra vertical space
|
|
29
|
-
margin-top: map-get($_row-gutter, $bp)
|
|
30
|
-
margin-bottom: map-get($_row-gutter, $bp)
|
|
31
|
+
margin-top: math.div(map-get($_row-gutter, $bp), -2);
|
|
32
|
+
margin-bottom: math.div(map-get($_row-gutter, $bp), -2);
|
|
31
33
|
}
|
|
32
34
|
}
|
|
33
35
|
|
|
@@ -78,8 +80,8 @@ $_column-gutter: (
|
|
|
78
80
|
}
|
|
79
81
|
|
|
80
82
|
padding:
|
|
81
|
-
(map-get($_row-gutter, $padding-bp)
|
|
82
|
-
(map-get($_column-gutter, $padding-bp)
|
|
83
|
+
(map-get($_row-gutter, $padding-bp) * 0.5)
|
|
84
|
+
(map-get($_column-gutter, $padding-bp) * 0.5);
|
|
83
85
|
}
|
|
84
86
|
|
|
85
87
|
[class*='bom-grid-col-#{$bp}'] {
|
|
@@ -89,7 +91,7 @@ $_column-gutter: (
|
|
|
89
91
|
|
|
90
92
|
@for $span from 1 through $_columns {
|
|
91
93
|
.bom-grid-col-#{$bp}--span-#{$span} {
|
|
92
|
-
$incr: 100
|
|
94
|
+
$incr: math.div(100, $_columns);
|
|
93
95
|
|
|
94
96
|
flex-grow: 0;
|
|
95
97
|
flex-basis: #{($incr * $span) + '%'};
|
|
@@ -99,7 +101,7 @@ $_column-gutter: (
|
|
|
99
101
|
|
|
100
102
|
@for $offset from 0 through $_columns {
|
|
101
103
|
.bom-grid-col-#{$bp}--offset-#{$offset} {
|
|
102
|
-
$incr: 100
|
|
104
|
+
$incr: math.div(100, $_columns);
|
|
103
105
|
|
|
104
106
|
margin-left: #{($incr * $offset) + '%'};
|
|
105
107
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ausbom/grid",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.2",
|
|
4
4
|
"description": "A grid is like an invisible table that helps designers position interface elements with strong alignment and consistent spacing. Grids are made up of columns, rows, gutters, and margins.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"box",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"react": ">= 16.3.x"
|
|
43
43
|
},
|
|
44
44
|
"dependencies": {
|
|
45
|
-
"@ausbom/styles": "^0.
|
|
45
|
+
"@ausbom/styles": "^0.14.2"
|
|
46
46
|
},
|
|
47
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "b2fb259306f6ff4acc90b41a8491469a9cea4d29"
|
|
48
48
|
}
|