86 lines
2.4 KiB
JavaScript
86 lines
2.4 KiB
JavaScript
'use strict';
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.keys = undefined;
|
|
|
|
var _extends2 = require('babel-runtime/helpers/extends');
|
|
|
|
var _extends3 = _interopRequireDefault(_extends2);
|
|
|
|
var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
|
|
|
var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
|
|
|
exports.default = createBreakpoints;
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
// Sorted ASC by size. That's important.
|
|
// It can't be configured as it's used statically for propTypes.
|
|
var keys = exports.keys = ['xs', 'sm', 'md', 'lg', 'xl'];
|
|
|
|
// Keep in mind that @media is inclusive by the CSS specification.
|
|
function createBreakpoints(breakpoints) {
|
|
var _breakpoints$values = breakpoints.values,
|
|
values = _breakpoints$values === undefined ? {
|
|
xs: 0,
|
|
sm: 600,
|
|
md: 960,
|
|
lg: 1280,
|
|
xl: 1920
|
|
} : _breakpoints$values,
|
|
_breakpoints$unit = breakpoints.unit,
|
|
unit = _breakpoints$unit === undefined ? 'px' : _breakpoints$unit,
|
|
_breakpoints$step = breakpoints.step,
|
|
step = _breakpoints$step === undefined ? 5 : _breakpoints$step,
|
|
other = (0, _objectWithoutProperties3.default)(breakpoints, ['values', 'unit', 'step']);
|
|
|
|
|
|
function up(key) {
|
|
var value = typeof values[key] === 'number' ? values[key] : key;
|
|
return '@media (min-width:' + value + unit + ')';
|
|
}
|
|
|
|
function down(key) {
|
|
var endIndex = keys.indexOf(key) + 1;
|
|
var upperbound = values[keys[endIndex]];
|
|
|
|
if (endIndex === keys.length) {
|
|
// xl down applies to all sizes
|
|
return up('xs');
|
|
}
|
|
|
|
var value = typeof upperbound === 'number' && endIndex > 0 ? upperbound : key;
|
|
return '@media (max-width:' + (value - step / 100) + unit + ')';
|
|
}
|
|
|
|
function between(start, end) {
|
|
var endIndex = keys.indexOf(end) + 1;
|
|
|
|
if (endIndex === keys.length) {
|
|
return up(start);
|
|
}
|
|
|
|
return '@media (min-width:' + values[start] + unit + ') and ' + ('(max-width:' + (values[keys[endIndex]] - step / 100) + unit + ')');
|
|
}
|
|
|
|
function only(key) {
|
|
return between(key, key);
|
|
}
|
|
|
|
function width(key) {
|
|
return values[key];
|
|
}
|
|
|
|
return (0, _extends3.default)({
|
|
keys: keys,
|
|
values: values,
|
|
up: up,
|
|
down: down,
|
|
between: between,
|
|
only: only,
|
|
width: width
|
|
}, other);
|
|
} |