├── declination.json ├── .eslintignore ├── .npmrc ├── docs ├── globalUtils │ ├── transition.md │ ├── visibility.md │ ├── screen-readers.md │ ├── position.md │ ├── align.md │ ├── float.md │ ├── clearfix.md │ ├── display.md │ ├── borders.md │ ├── sizing.md │ ├── spacing.md │ ├── text.md │ ├── border-radius.md │ ├── cursor.md │ └── flexbox.md ├── utils.md ├── installation.md ├── contribute.md ├── prerequisite.md ├── configuration.md ├── release.md ├── getting-started.md ├── commands.md ├── introduction.md ├── faq.md └── branches.md ├── styleguide ├── jsdoc.sh ├── prepare.sh └── styleguide.ext.json ├── .ncurc.js ├── babel.ext.json ├── rollup.config.js ├── internals └── testing │ └── test-bundler.js ├── styleguide.config.js ├── .editorconfig ├── src ├── tests │ ├── index.test.js │ ├── visibility.test.js │ ├── screenreaders.test.js │ ├── cursor.test.js │ ├── flex.test.js │ ├── float.test.js │ ├── display.test.js │ ├── clearfix.test.js │ ├── spacing.test.js │ ├── sizing.test.js │ ├── text.test.js │ ├── utilities.test.js │ ├── align.test.js │ ├── position.test.js │ ├── transition.test.js │ ├── reboot.test.js │ ├── borders.test.js │ └── background.test.js ├── visibility.js ├── screenreaders.js ├── clearfix.js ├── sizing.js ├── index.js ├── float.js ├── align.js ├── position.js ├── _api.js ├── display.js ├── transition.js ├── background.js ├── cursor.js ├── spacing.js ├── text.js ├── flex.js ├── borders.js ├── reboot.js └── utilities.js ├── .gitignore ├── .npmignore ├── sonar-project.properties ├── babel.config.js ├── LICENSE.md ├── CONTRIBUTING.md ├── .travis.yml ├── CODE_OF_CONDUCT.md ├── README.md ├── package.json ├── index.d.ts └── CHANGELOG.md /declination.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | lib/ 2 | dist/ 3 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | package-lock=false 2 | -------------------------------------------------------------------------------- /docs/globalUtils/transition.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/utils.md: -------------------------------------------------------------------------------- 1 | List of global utils. 2 | -------------------------------------------------------------------------------- /styleguide/jsdoc.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | set -e 3 | -------------------------------------------------------------------------------- /docs/installation.md: -------------------------------------------------------------------------------- 1 | ```bash 2 | $ npm install $PACKAGE_NAME --save 3 | ``` 4 | -------------------------------------------------------------------------------- /.ncurc.js: -------------------------------------------------------------------------------- 1 | const { createConfig } = require('@rollup-umd/ncu'); 2 | module.exports = createConfig(); 3 | -------------------------------------------------------------------------------- /babel.ext.json: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [], 3 | "plugins": [ 4 | "babel-plugin-array-includes" 5 | ] 6 | } -------------------------------------------------------------------------------- /docs/contribute.md: -------------------------------------------------------------------------------- 1 | We highly encourage contribution, any feature request and merge request will be reviewed. 2 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | const { createConfig } = require('@rollup-umd/rollup'); 2 | module.exports = createConfig(); 3 | -------------------------------------------------------------------------------- /docs/globalUtils/visibility.md: -------------------------------------------------------------------------------- 1 | Use the following classNames. 2 | 3 | ```js static 4 | .visible 5 | .invisible 6 | ``` 7 | -------------------------------------------------------------------------------- /docs/globalUtils/screen-readers.md: -------------------------------------------------------------------------------- 1 | Use the following classNames. 2 | 3 | ```js static 4 | .sr-only 5 | .sr-only-focusable 6 | ``` 7 | -------------------------------------------------------------------------------- /docs/globalUtils/position.md: -------------------------------------------------------------------------------- 1 | Use the following classNames. 2 | 3 | ```js static 4 | .fixed-bottom 5 | .fixed-top 6 | .sticky-top 7 | ``` 8 | -------------------------------------------------------------------------------- /docs/prerequisite.md: -------------------------------------------------------------------------------- 1 | If you don't have them, install all the `peerDependencies` in your project: 2 | 3 | ```bash 4 | $ $PACKAGE_PEERS 5 | ``` 6 | -------------------------------------------------------------------------------- /internals/testing/test-bundler.js: -------------------------------------------------------------------------------- 1 | const Enzyme = require('enzyme'); 2 | const Adapter = require('enzyme-adapter-react-16'); 3 | Enzyme.configure({ adapter: new Adapter() }); 4 | -------------------------------------------------------------------------------- /styleguide.config.js: -------------------------------------------------------------------------------- 1 | const { createConfig } = require('@rollup-umd/documentation'); 2 | const config = createConfig({ 3 | pagePerSection: true, 4 | }); 5 | 6 | module.exports = config; 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_size = 2 6 | end_of_line = lf 7 | indent_style = space 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /docs/configuration.md: -------------------------------------------------------------------------------- 1 | WIP 2 | 3 | ```js 4 | 5 | Start documenting $PACKAGE_NAME configuration, read how to at 6 | this link 7 | 8 | ``` 9 | -------------------------------------------------------------------------------- /src/tests/index.test.js: -------------------------------------------------------------------------------- 1 | const exported = require('..'); 2 | 3 | describe('text exports', () => { 4 | Object.keys(exported).forEach((e) => { 5 | it(`${e} should be exported`, () => { 6 | expect(e).toBeDefined(); 7 | }); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | npm-debug.log 3 | tmp.json 4 | .DS_Store 5 | bundle-stats.html 6 | .idea/ 7 | coverage/ 8 | /reports 9 | /test-report.xml 10 | jest_0 11 | lib 12 | dist 13 | /public 14 | /docs/cli 15 | /docs/declinations 16 | .git-credentials 17 | package-lock.json 18 | *.iml 19 | -------------------------------------------------------------------------------- /src/tests/visibility.test.js: -------------------------------------------------------------------------------- 1 | import { fromJS } from 'immutable'; 2 | import { getVisibilityUtilities } from '../visibility'; 3 | 4 | describe('bootstrap visibility utility', () => { 5 | it('getVisibilityUtilities should have arguments', () => { 6 | const css = getVisibilityUtilities(); 7 | expect(fromJS({ css }).hashCode()).toEqual(600776174); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /src/visibility.js: -------------------------------------------------------------------------------- 1 | import { invisible } from '@bootstrap-styled/css-mixins/lib/visibility'; 2 | 3 | 4 | export function getVisibilityUtilities() { 5 | return ` 6 | .visible { 7 | ${invisible('visible')} 8 | } 9 | 10 | .invisible { 11 | ${invisible('hidden')} 12 | } 13 | 14 | `; 15 | } 16 | 17 | export default { 18 | getVisibilityUtilities, 19 | }; 20 | -------------------------------------------------------------------------------- /src/screenreaders.js: -------------------------------------------------------------------------------- 1 | import { srOnly, srOnlyFocusable } from '@bootstrap-styled/css-mixins/lib/screen-reader'; 2 | 3 | export function getScreenReadersUtilities() { 4 | return ` 5 | .sr-only { 6 | ${srOnly()} 7 | } 8 | 9 | .sr-only-focusable { 10 | ${srOnlyFocusable()} 11 | } 12 | `; 13 | } 14 | 15 | export default { 16 | getScreenReadersUtilities, 17 | }; 18 | -------------------------------------------------------------------------------- /docs/globalUtils/align.md: -------------------------------------------------------------------------------- 1 | ```js 2 |
3 | Somewhere 4 | in my 5 | text 6 | words 7 | are 8 | vertically 9 | aligned. 10 |
11 | ``` 12 | -------------------------------------------------------------------------------- /src/clearfix.js: -------------------------------------------------------------------------------- 1 | import { clearfix } from '@bootstrap-styled/css-mixins/lib/clearfix'; 2 | 3 | export function getClearfixUtilities() { 4 | return ` 5 | ${getClearfix()} 6 | `; 7 | } 8 | 9 | export function getClearfix() { 10 | return ` 11 | .clearfix { 12 | ${clearfix()} 13 | } 14 | `; 15 | } 16 | 17 | export default { 18 | getClearfixUtilities, 19 | getClearfix, 20 | }; 21 | -------------------------------------------------------------------------------- /src/tests/screenreaders.test.js: -------------------------------------------------------------------------------- 1 | import { getScreenReadersUtilities } from '../screenreaders'; 2 | 3 | describe('bootstrap screenreaders utility', () => { 4 | it('getScreenReadersUtilities should return a list of css utilities', () => { 5 | const css = getScreenReadersUtilities(); 6 | expect(css).not.toContain('undefined'); 7 | expect(css).not.toContain('null'); 8 | expect(css).toContain('.sr-only'); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | sonar-project.properties 3 | .gitlab-ci.yml 4 | internals 5 | .babelrc 6 | babel.ext.json 7 | babel.config.json 8 | .editorconfig 9 | .eslintignore 10 | bundle-stats.html 11 | CODE_OF_CONDUCT.md 12 | CHANGELOG.md 13 | README.md 14 | CONTRIBUTING.md 15 | declination.json 16 | rollup.config.js 17 | /styleguide.config.js 18 | test-report.xml 19 | .idea/ 20 | coverage/ 21 | docs/ 22 | reports/ 23 | /styleguide 24 | .ncurc.js 25 | index.d.ts 26 | -------------------------------------------------------------------------------- /src/tests/cursor.test.js: -------------------------------------------------------------------------------- 1 | import { fromJS } from 'immutable'; 2 | import { getCursorUtilities } from '../cursor'; 3 | 4 | describe('bootstrap cursor utility', () => { 5 | it('getCursorUtilities should return a list of cursor css utility', () => { 6 | const css = getCursorUtilities(); 7 | expect(css).not.toContain('undefined'); 8 | expect(css).not.toContain('null'); 9 | expect(fromJS({ css }).hashCode()).toEqual(222728468); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /docs/release.md: -------------------------------------------------------------------------------- 1 | Merge `dev` into `master` will release the documentation and tag a new version. 2 | 3 | It will also prepare a next version in `dev`. 4 | 5 | Before each release, members should check the [Changelog](CHANGELOG.md) that it is well filled with all change. 6 | 7 | If the next version is a patch or major update, edit the version in `package.json` then merge your change into `master`. 8 | 9 | If the next version is a bug fix, just merge your change into `master`. 10 | -------------------------------------------------------------------------------- /sonar-project.properties: -------------------------------------------------------------------------------- 1 | sonar.testExecutionReportPaths=reports/test-report.xml 2 | sonar.projectKey=com.github.bootstrap-styled.css-utils 3 | sonar.projectName=com.github.bootstrap-styled.css-utils 4 | sonar.sources=src 5 | sonar.exclusions=/src/**/tests/*.test.js 6 | sonar.test.exclusions=/src/**/tests/*.test.js 7 | sonar.dynamicAnalysis=reuseReports 8 | sonar.javascript.jstest.reportsPath=coverage 9 | sonar.javascript.lcov.reportPaths=coverage/lcov.info 10 | sonar.organization=bootstrap-styled 11 | -------------------------------------------------------------------------------- /docs/globalUtils/float.md: -------------------------------------------------------------------------------- 1 | Applies a float. 2 | 3 | ```js 4 | 5 | const style = { background: "#f5f5f5", border: "2px solid #3F007B", display: "flex", alignItems: 'center', justifyContent: 'center', textAlign: 'center', margin: '.25rem', height: '175px', width: '175px' }; 6 | 7 |
8 | 9 | 10 |
11 | 12 | 13 | ``` 14 | -------------------------------------------------------------------------------- /src/tests/flex.test.js: -------------------------------------------------------------------------------- 1 | import { fromJS } from 'immutable'; 2 | import { defaultProps, getFlexUtilities } from '../flex'; 3 | 4 | describe('bootstrap flex utility', () => { 5 | it('getFlexUtilities should return a list of css utilities', () => { 6 | const css = getFlexUtilities(defaultProps['$grid-breakpoints']); 7 | expect(css).not.toContain('undefined'); 8 | expect(css).not.toContain('null'); 9 | expect(fromJS({ css }).hashCode()).toEqual(632091713); 10 | }); 11 | it('getFlexUtilities should have arguments', () => { 12 | const css = getFlexUtilities(); 13 | expect(fromJS({ css }).hashCode()).toEqual(632091713); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /src/tests/float.test.js: -------------------------------------------------------------------------------- 1 | import { fromJS } from 'immutable'; 2 | import { defaultProps, getFloatUtilities } from '../float'; 3 | 4 | describe('bootstrap float utility', () => { 5 | it('getFloatUtilities should return a list of css utilities', () => { 6 | const css = getFloatUtilities(defaultProps['$grid-breakpoints']); 7 | expect(css).not.toContain('undefined'); 8 | expect(css).not.toContain('null'); 9 | expect(fromJS({ css }).hashCode()).toEqual(587768878); 10 | }); 11 | it('getFloatUtilities should have arguments', () => { 12 | const css = getFloatUtilities(); 13 | expect(fromJS({ css }).hashCode()).toEqual(587768878); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /src/tests/display.test.js: -------------------------------------------------------------------------------- 1 | import { fromJS } from 'immutable'; 2 | import { defaultProps, getDisplayUtilities } from '../display'; 3 | 4 | describe('bootstrap display utility', () => { 5 | it('getDisplayUtilities should return a list of css utilities', () => { 6 | const css = getDisplayUtilities(defaultProps['$grid-breakpoints']); 7 | expect(css).not.toContain('undefined'); 8 | expect(css).not.toContain('null'); 9 | expect(fromJS({ css }).hashCode()).toEqual(-146892677); 10 | }); 11 | it('getDisplayUtilities should have arguments', () => { 12 | const css = getDisplayUtilities(); 13 | expect(fromJS({ css }).hashCode()).toEqual(-146892677); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /docs/globalUtils/clearfix.md: -------------------------------------------------------------------------------- 1 | Applies a clearfix. 2 | 3 | The following example shows how the clearfix can be used. Without the clearfix the wrapping div would not span around the buttons which would cause a broken layout. 4 | ```js 5 | 6 | const style = { background: "#f5f5f5", border: "2px solid #3F007B", display: "flex", alignItems: 'center', justifyContent: 'center', textAlign: 'center', margin: '.25rem', height: '175px', width: '175px' }; 7 | 8 |
9 | 10 | 11 |
12 | 13 | 14 | ``` 15 | -------------------------------------------------------------------------------- /src/tests/clearfix.test.js: -------------------------------------------------------------------------------- 1 | import { fromJS } from 'immutable'; 2 | import { getClearfixUtilities, getClearfix } from '../clearfix'; 3 | 4 | describe('bootstrap clearfix utility', () => { 5 | it('getClearfixUtilities should return a list of css utilities', () => { 6 | const css = getClearfixUtilities(); 7 | expect(css).not.toContain('undefined'); 8 | expect(css).not.toContain('null'); 9 | expect(fromJS({ css }).hashCode()).toEqual(308530444); 10 | }); 11 | it('getClearfix should return a list of css utilities', () => { 12 | const css = getClearfix(); 13 | expect(css).not.toContain('undefined'); 14 | expect(css).not.toContain('null'); 15 | expect(fromJS({ css }).hashCode()).toEqual(-1061470531); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /src/tests/spacing.test.js: -------------------------------------------------------------------------------- 1 | import { fromJS } from 'immutable'; 2 | import { defaultProps, getSpacingUtilities } from '../spacing'; 3 | 4 | describe('bootstrap spacing utility', () => { 5 | it('getSpacingUtilities should return a list of css utilities', () => { 6 | const css = getSpacingUtilities( 7 | defaultProps['$grid-breakpoints'], 8 | defaultProps['$spacers'] // eslint-disable-line dot-notation 9 | ); 10 | expect(css).not.toContain('undefined'); 11 | expect(css).not.toContain('null'); 12 | expect(fromJS({ css }).hashCode()).toEqual(-924995996); 13 | }); 14 | it('getSpacingUtilities should have arguments', () => { 15 | const css = getSpacingUtilities(); 16 | expect(fromJS({ css }).hashCode()).toEqual(-924995996); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /src/tests/sizing.test.js: -------------------------------------------------------------------------------- 1 | import { fromJS } from 'immutable'; 2 | import { defaultProps, getSizingUtilities } from '../sizing'; 3 | 4 | describe('bootstrap sizing utility', () => { 5 | it('getSizingUtilities should return a list of css utilities', () => { 6 | const css = getSizingUtilities(defaultProps['$sizes']); // eslint-disable-line dot-notation 7 | expect(css).not.toContain('undefined'); 8 | expect(css).not.toContain('null'); 9 | expect(fromJS({ css }).hashCode()).toEqual(1050266963); 10 | }); 11 | it('getSizingUtilities should have arguments', () => { 12 | const css = getSizingUtilities(); 13 | expect(css).not.toContain('undefined'); 14 | expect(css).not.toContain('null'); 15 | expect(fromJS({ css }).hashCode()).toEqual(1050266963); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /docs/globalUtils/display.md: -------------------------------------------------------------------------------- 1 | Change the display. 2 | 3 | ```js 4 | 5 | const style = { background: "#f5f5f5", display: "flex", alignItems: 'center', justifyContent: 'center', textAlign: 'center', margin: '.25rem 0', height: '175px', width: '175px' }; 6 | 7 |
8 |
Inline
9 |
Inline
10 |
11 |
12 | Block 13 |
14 |
15 |
16 | inline-block 17 |
18 |
19 | inline-block 20 |
21 |
22 | 23 | 24 | 25 | ``` 26 | -------------------------------------------------------------------------------- /docs/globalUtils/borders.md: -------------------------------------------------------------------------------- 1 | Remove all or some borders from an element. 2 | 3 | ```js 4 | 5 | const style = { background: "#f5f5f5", border: "2px solid #3F007B", display: "flex", alignItems: 'center', justifyContent: 'center', textAlign: 'center', margin: '.25rem', height: '175px', width: '175px' }; 6 | 7 |
8 |
className=
"border-0"
9 |
className=
"border-top-0"
10 |
className=
"border-right-0"
11 |
className=
"border-bottom-0"
12 |
className=
"border-left-0"
13 |
14 | 15 | 16 | ``` 17 | -------------------------------------------------------------------------------- /src/sizing.js: -------------------------------------------------------------------------------- 1 | export const defaultProps = { 2 | $sizes: { 3 | 25: '25%', 4 | 50: '50%', 5 | 75: '75%', 6 | 100: '100%', 7 | }, 8 | }; 9 | 10 | export function getSizingUtilities(sizes = defaultProps['$sizes']) { // eslint-disable-line dot-notation 11 | const abbrev = { 12 | width: 'w', 13 | height: 'h', 14 | }; 15 | 16 | const sizingList = []; 17 | Object.keys(abbrev).forEach((cssProp) => { 18 | Object.keys(sizes).forEach((size) => { 19 | sizingList.push(` 20 | .${abbrev[cssProp]}-${size} { ${cssProp}: ${sizes[size]} !important; } 21 | `); 22 | }); 23 | }); 24 | 25 | return ` 26 | ${sizingList.join('\n')} 27 | .mw-100 { max-width: 100% !important; } 28 | .mh-100 { max-height: 100% !important; } 29 | `; 30 | } 31 | 32 | export default { 33 | defaultProps, 34 | getSizingUtilities, 35 | }; 36 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | only: [ 3 | 'src', 4 | 'styleguide', 5 | ], 6 | presets: [ 7 | [ 8 | '@babel/preset-env', 9 | { 10 | modules: false, 11 | }, 12 | ], 13 | ], 14 | plugins: [ 15 | '@babel/plugin-syntax-dynamic-import', 16 | '@babel/plugin-syntax-import-meta', 17 | '@babel/plugin-proposal-class-properties', 18 | '@babel/plugin-proposal-json-strings', 19 | [ 20 | '@babel/plugin-proposal-decorators', 21 | { 22 | legacy: true, 23 | }, 24 | ], 25 | ], 26 | env: { 27 | production: { 28 | plugins: [ 29 | 'add-module-exports', 30 | '@babel/plugin-transform-modules-commonjs', 31 | ], 32 | }, 33 | test: { 34 | plugins: [ 35 | '@babel/plugin-transform-modules-commonjs', 36 | 'dynamic-import-node', 37 | ], 38 | }, 39 | }, 40 | }; 41 | -------------------------------------------------------------------------------- /docs/getting-started.md: -------------------------------------------------------------------------------- 1 | Like every [rollup-umd](dev-tools.yeutech.com/rollup-umd) project $PACKAGE_NAME provide two distribution: 2 | 3 | 1. `dist` folder with all the javascript bundled in one file. You will have a UMD and ES5 file. 4 | 1. `lib` folder that just contain the ES6 transpiled in ES5. 5 | 6 | Whenever you use $PACKAGE_NAME, you need to import the one appropriate to your environment (node or browser). 7 | 8 | If you are building a distributed package in a node environment, you want to prevent bundling the whole library you are importing (if made with rollup-umd). 9 | 10 | To do so, always import from `lib`. 11 | 12 | This is correct: 13 | 14 | ```js static 15 | import myLib from '$PACKAGE_NAME/lib'; 16 | ``` 17 | 18 | This is wrong: 19 | 20 | ```js static 21 | import myLib from '$PACKAGE_NAME'; 22 | ``` 23 | 24 | If you are a developer, you want to read more [here](http://dev-tools.yeutech.com/rollup-umd/#distribution). 25 | -------------------------------------------------------------------------------- /docs/commands.md: -------------------------------------------------------------------------------- 1 | Build project: 2 | 3 | ```bash 4 | $ npm run build 5 | ``` 6 | 7 | Run unit test: 8 | 9 | ```bash 10 | $ npm test 11 | ``` 12 | 13 | Watch unit test: 14 | 15 | ```bash 16 | $ npm run test:watch 17 | ``` 18 | 19 | Build the `/lib` directory: 20 | 21 | ```bash 22 | $ npm run build:lib 23 | ``` 24 | 25 | Build the `/dist` directory: 26 | 27 | ```bash 28 | $ npm run build:dist 29 | ``` 30 | 31 | Build the `/dist` directory "uncompressed": 32 | 33 | ```bash 34 | $ npm run build:dist:dev 35 | ``` 36 | 37 | Watch the `/dist` directory: 38 | 39 | ```bash 40 | $ npm run build:dist:watch 41 | ``` 42 | 43 | Watch the `/lib` directory: 44 | 45 | ```bash 46 | $ npm run build:lib:watch 47 | ``` 48 | 49 | Start a documentation server and watch the `/docs` directory: 50 | 51 | ```bash 52 | $ npm run styleguide 53 | ``` 54 | 55 | Build documentation in `/public` directory: 56 | 57 | ```bash 58 | $ npm run styleguide:build 59 | ``` 60 | -------------------------------------------------------------------------------- /docs/introduction.md: -------------------------------------------------------------------------------- 1 | [![Build Status](https://travis-ci.org/bootstrap-styled/css-utils.svg?branch=master)](https://travis-ci.org/bootstrap-styled/css-utils) [![npm Version](https://img.shields.io/npm/v/@bootstrap-styled/css-utils.svg?style=flat)](https://www.npmjs.com/package/@bootstrap-styled/css-utils) [![License](https://img.shields.io/npm/l/@bootstrap-styled/css-utils.svg?style=flat)](https://www.npmjs.com/package/@bootstrap-styled/css-utils) [![npm Version](https://img.shields.io/node/v/@bootstrap-styled/css-utils.svg?style=flat)](https://www.npmjs.com/package/@bootstrap-styled/css-utils) [![Module formats](https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-green.svg?style=flat)](https://www.npmjs.com/package/@bootstrap-styled/css-utils) 2 | 3 | Bootstrap global utilities for bootstrap-styled. Toggle them individually in the [BootstrapProvider](https://bootstrap-styled.github.io/provider/) to permit or not their access globally in your application. 4 | -------------------------------------------------------------------------------- /styleguide/prepare.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | npx @rollup-umd/documentation-cli variable \ 4 | PACKAGE_NAME=$(node -p "require('./package.json').name") \ 5 | PACKAGE_PEERS="$(npx rollup-umd-scripts peer npm-install-cmd)" \ 6 | PACKAGE_VERSION=$(node -p "require('./package.json').version") \ 7 | NODE_VERSION=$(node --version) \ 8 | NPM_VERSION=$(npm --version) \ 9 | CI_REPOSITORY_URL="https://github.com/${TRAVIS_REPO_SLUG}.git" \ 10 | CI_PROJECT_URL="https://github.com/${TRAVIS_REPO_SLUG}" \ 11 | CI_PROJECT_NAMESPACE=$(echo $TRAVIS_REPO_SLUG | awk -F / '{print $1}') \ 12 | CI_PROJECT_NAME=$(echo $TRAVIS_REPO_SLUG | awk -F / '{print $2}') \ 13 | DECLINATION_LIST="$(npx rollup-umd-scripts declination list --with-link)" \ 14 | IMG_SHIELD_PUBLISHING=$(npx rollup-umd-scripts publish status --badge) 15 | 16 | npx @rollup-umd/documentation-cli add-section -n 'Code of conduct' -a 'FAQ' -c 'CODE_OF_CONDUCT.md' --force 17 | npx @rollup-umd/documentation-cli add-section -n 'Changelog' -a 'Code of conduct' -c 'CHANGELOG.md' --force 18 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | export { default as alignUtils } from './align'; 2 | export { default as backgroundUtils } from './background'; 3 | export { default as bordersUtils } from './borders'; 4 | export { default as clearfixUtils } from './clearfix'; 5 | export { default as cursorUtils } from './cursor'; 6 | export { default as displayUtils } from './display'; 7 | export { default as flexUtils } from './flex'; 8 | export { default as floatUtils } from './float'; 9 | export { default as positionUtils } from './position'; 10 | export { default as rebootUtils, getGlobalStyleNoBootstrapProvider, getGlobalStyles } from './reboot'; 11 | export { default as screenreadersUtils } from './screenreaders'; 12 | export { default as sizingUtils } from './sizing'; 13 | export { default as spacingUtils } from './spacing'; 14 | export { default as transitionUtils } from './transition'; 15 | export { default as textUtils } from './text'; 16 | export { default as visibilityUtils } from './visibility'; 17 | // extra 18 | export { default as unit } from '@bootstrap-styled/utils/lib/unitUtils'; 19 | -------------------------------------------------------------------------------- /docs/faq.md: -------------------------------------------------------------------------------- 1 | - What is rollup-umd ? 2 | 3 | > It is the boilerplate for all JS project aimed to be packaged. 4 | It is made on top of rollup because the distribution can work everywhere. 5 | If you are a contributor, we strongly suggest you to read [rollup-umd documentation](https://dev-tools.yeutech.com/rollup-umd/). 6 | 7 | - What is rollup-umd-scripts ? 8 | 9 | > It is a package containing scripts for creating and maintaining all rollup-umd projects. 10 | We use it with `npx`, the benefits compare to `npm install -g` is that we don't need to install it or upgrade, it download the CLI for every commands. 11 | If you are a contributor, we strongly suggest you to read [rollup-umd-scripts documentation](https://dev-tools.yeutech.com/rollup-umd-scripts/). 12 | 13 | - What is rollup-umd-documentation ? 14 | 15 | > It is our react-styleguide configuration, it also provide UI components for the documentation. 16 | If you are a contributor, we strongly suggest you to read [rollup-documentation documentation](https://dev-tools.yeutech.com/rollup-documentation/). 17 | -------------------------------------------------------------------------------- /docs/globalUtils/sizing.md: -------------------------------------------------------------------------------- 1 | ## Usage 2 | 3 | Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. 4 | 5 | 6 | ```js 7 | const styleExample = { border: "1px solid #3F007B"}; 8 | 9 | 10 |
Width 25%
11 |
Width 50%
12 |
Width 75%
13 |
Width 100%
14 | 15 | 16 | ``` 17 | 18 | ```js 19 | const styleExample = { border: "1px solid #3F007B"}; 20 | const styleWrapper = { height: "150px"}; 21 | 22 |
23 |
Height 25%
24 |
Height 50%
25 |
Height 75%
26 |
Height 100%
27 |
28 | 29 | ``` 30 | -------------------------------------------------------------------------------- /src/float.js: -------------------------------------------------------------------------------- 1 | import { floatLeft, floatRight, floatNone } from '@bootstrap-styled/css-mixins/lib/float'; 2 | import { mediaBreakpointUp, breakpointInfix } from '@bootstrap-styled/css-mixins/lib/breakpoints'; 3 | 4 | export const defaultProps = { 5 | '$grid-breakpoints': { 6 | xs: '0', 7 | sm: '576px', 8 | md: '768px', 9 | lg: '992px', 10 | xl: '1200px', 11 | }, 12 | }; 13 | 14 | export function getFloatUtilities(gridBreakpoints = defaultProps['$grid-breakpoints']) { 15 | const floatUtilityList = []; 16 | Object.keys(gridBreakpoints).forEach((breakpoint) => { 17 | const infix = breakpointInfix(breakpoint, gridBreakpoints); 18 | const floatUtility = mediaBreakpointUp(breakpoint, gridBreakpoints, ` 19 | .float${infix}-left { 20 | ${floatLeft()} 21 | } 22 | .float${infix}-right { 23 | ${floatRight()} 24 | } 25 | .float${infix}-none { 26 | ${floatNone()} 27 | } 28 | `); 29 | floatUtilityList.push(floatUtility); 30 | }); 31 | 32 | return floatUtilityList.join('\n'); 33 | } 34 | 35 | export default { 36 | defaultProps, 37 | getFloatUtilities, 38 | }; 39 | -------------------------------------------------------------------------------- /docs/branches.md: -------------------------------------------------------------------------------- 1 | 1. `master` is used to release the version. 2 | 1. `master` only accept merge requests from `dev` 3 | 1. `dev` is the development branch. It should be used by developers for applying their merge requests. 4 | 1. If you need to implement a new feature or edit an existing one, you need to submit to `dev` a merge request from your own branch with your modification. 5 | 6 | This is how you can create your own branch: 7 | 8 | ```bash 9 | $ git checkout dev 10 | $ git checkout -b $(whoami)-dev 11 | ``` 12 | 13 | You can now start working on your branch. 14 | 15 | When you are done, you can push to it: 16 | 17 | ```bash 18 | $ git push -u origin $(whoami)-dev 19 | ``` 20 | 21 | > `-u` will fix your default upstream, so next time you can just type `git push` to push to your branch. 22 | 23 | If you want to get the latest change in `dev` branch when you do `git pull`, run once: 24 | 25 | ```bash 26 | $ git pull -u origin dev 27 | ``` 28 | 29 | > `-u` will fix your default downstream, so next time you can just type `git pull` to pull from `dev` branch. 30 | 31 | When applying merge to `dev`, don't forget to check `Delete branch on merge` checkbox if you don't need it anymore. 32 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2017-2018 Yeutech Company Limited. https://bootstrap-styled.yeutech.com 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/tests/text.test.js: -------------------------------------------------------------------------------- 1 | import { fromJS } from 'immutable'; 2 | import { defaultProps, getTextUtilities } from '../text'; 3 | 4 | describe('bootstrap text utility', () => { 5 | it('getTextUtilities should return a list of css utilities', () => { 6 | const css = getTextUtilities( 7 | defaultProps['$enable-hover-media-query'], 8 | defaultProps['$grid-breakpoints'], 9 | defaultProps['$font-weight-normal'], 10 | defaultProps['$font-weight-bold'], 11 | defaultProps['$text-muted'], 12 | defaultProps['$brand-primary'], 13 | defaultProps['$brand-success'], 14 | defaultProps['$brand-info'], 15 | defaultProps['$brand-warning'], 16 | defaultProps['$brand-danger'], 17 | defaultProps['$gray-dark'] 18 | ); 19 | expect(css).not.toContain('undefined'); 20 | expect(css).not.toContain('null'); 21 | expect(fromJS({ css }).hashCode()).toEqual(-739621580); 22 | }); 23 | it('getTextUtilities should have arguments', () => { 24 | const css = getTextUtilities(); 25 | expect(css).not.toContain('undefined'); 26 | expect(css).not.toContain('null'); 27 | expect(fromJS({ css }).hashCode()).toEqual(-739621580); 28 | }); 29 | }); 30 | -------------------------------------------------------------------------------- /src/tests/utilities.test.js: -------------------------------------------------------------------------------- 1 | import { theme } from 'bootstrap-styled'; 2 | import { getUtilities } from '../utilities'; 3 | 4 | describe('bootstrap utilities', () => { 5 | it('should throw error if no theme passed', () => { 6 | expect(() => getUtilities()).toThrow( 7 | new Error('getUtilities expect theme and should be called at the end of your makeTheme.') 8 | ); 9 | }); 10 | it('should return all utilities', () => { 11 | const utilities = getUtilities(theme); 12 | expect([...utilities].length).toBeGreaterThanOrEqual(68); 13 | }); 14 | it('should merge with all utilities', () => { 15 | const utilities = getUtilities(theme, new Map([ 16 | ['test', { property: 'test', class: 't', values: [0] }], 17 | ])); 18 | expect([...utilities].length).toBeGreaterThanOrEqual(69); 19 | }); 20 | it('should have required keys', () => { 21 | const utilities = getUtilities(theme, new Map([ 22 | ['test', { property: 'test', class: 't', values: [0] }], 23 | ])); 24 | // eslint-disable-next-line 25 | for (const [key, value] of utilities) { 26 | expect(value.property).toBeDefined(); 27 | expect(value.values).toBeDefined(); 28 | } 29 | }); 30 | }); 31 | -------------------------------------------------------------------------------- /src/align.js: -------------------------------------------------------------------------------- 1 | export function getAlignUtilities() { 2 | return ` 3 | ${alignBaseline()} 4 | ${alignTop()} 5 | ${alignMiddle()} 6 | ${alignBottom()} 7 | ${alignTextBottom()} 8 | ${alignTextTop()} 9 | `; 10 | } 11 | 12 | export function alignBaseline() { 13 | return ` 14 | .align-baseline { vertical-align: baseline !important; } /* Browser default */ 15 | `; 16 | } 17 | 18 | export function alignTop() { 19 | return ` 20 | .align-top { vertical-align: top !important; } 21 | `; 22 | } 23 | 24 | export function alignMiddle() { 25 | return ` 26 | .align-middle { vertical-align: middle !important; } 27 | `; 28 | } 29 | 30 | export function alignBottom() { 31 | return ` 32 | .align-bottom { vertical-align: bottom !important; } 33 | `; 34 | } 35 | 36 | export function alignTextBottom() { 37 | return ` 38 | .align-text-bottom { vertical-align: text-bottom !important; } 39 | `; 40 | } 41 | 42 | export function alignTextTop() { 43 | return ` 44 | .align-text-top { vertical-align: text-top !important; } 45 | `; 46 | } 47 | 48 | export default { 49 | getAlignUtilities, 50 | alignBaseline, 51 | alignTop, 52 | alignMiddle, 53 | alignBottom, 54 | alignTextBottom, 55 | alignTextTop, 56 | }; 57 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | When contributing to this repository, please first discuss the change you wish to make via issue, 4 | email, or any other method with the owners of this repository before making a change. 5 | 6 | Please note we have a [code of conduct](./CODE_OF_CONDUCT.md), please follow it in all your interactions with the project. 7 | 8 | ## Pull Request Process 9 | 10 | 1. Ensure any install or build dependencies are removed before the end of the layer when doing a 11 | build. 12 | 2. Format your commit messages with [commitizen](#creating-releases). 13 | 3. You may merge the Pull Request in once you have the sign-off of two other developers, or if you 14 | do not have permission to do that, you may request the second reviewer to merge it for you. 15 | 16 | ## Creating releases 17 | 18 | [commitizen](https://github.com/commitizen/cz-cli) uses [semantic-release](https://github.com/semantic-release/semantic-release) 19 | to release new versions automatically. 20 | 21 | * Commits of type `fix` will trigger bugfix releases, think `0.0.1` 22 | * Commits of type `feat` will trigger feature releases, think `0.1.0` 23 | * Commits with `BREAKING CHANGE` in body or footer will trigger breaking releases, think `1.0.0` 24 | 25 | All other commit types will trigger no new release. 26 | -------------------------------------------------------------------------------- /src/position.js: -------------------------------------------------------------------------------- 1 | export const defaultProps = { 2 | '$zindex-fixed': '1030', 3 | '$zindex-sticky': '1030', 4 | }; 5 | 6 | export function getPositionUtilities( 7 | zindexFixed = defaultProps['$zindex-fixed'], 8 | zindexSticky = defaultProps['$zindex-sticky'], 9 | ) { 10 | return ` 11 | ${fixedTop(zindexFixed)} 12 | ${fixedBottom(zindexFixed)} 13 | ${stickTop(zindexSticky)} 14 | `; 15 | } 16 | 17 | export function fixedTop(zindexFixed = defaultProps['$zindex-fixed']) { 18 | return ` 19 | .fixed-top { 20 | position: fixed !important; 21 | top: 0; 22 | right: 0; 23 | left: 0; 24 | z-index: ${zindexFixed}; 25 | } 26 | `; 27 | } 28 | 29 | export function fixedBottom(zindexFixed = defaultProps['$zindex-fixed']) { 30 | return ` 31 | .fixed-bottom { 32 | position: fixed !important; 33 | right: 0; 34 | bottom: 0; 35 | left: 0; 36 | z-index: ${zindexFixed}; 37 | } 38 | `; 39 | } 40 | 41 | export function stickTop(zindexSticky = defaultProps['$zindex-sticky']) { 42 | return ` 43 | .sticky-top { 44 | position: sticky !important; 45 | top: 0; 46 | z-index: ${zindexSticky}; 47 | } 48 | `; 49 | } 50 | 51 | export default { 52 | defaultProps, 53 | getPositionUtilities, 54 | fixedTop, 55 | fixedBottom, 56 | stickTop, 57 | }; 58 | -------------------------------------------------------------------------------- /src/_api.js: -------------------------------------------------------------------------------- 1 | import { mediaBreakpointUp, breakpointInfix } from '@bootstrap-styled/css-mixins/lib/breakpoints'; 2 | import { generateUtility } from '@bootstrap-styled/css-mixins/lib/utilities'; 3 | 4 | /** 5 | * @param {object} gridBreakpoints - grid breakpoints 6 | * @param {Map} utilities - map of utilities 7 | * @returns {string} - css screen utilities 8 | */ 9 | export function screenUtilities( 10 | gridBreakpoints, 11 | utilities, 12 | ) { 13 | return Object.keys(gridBreakpoints).map((bp) => { 14 | const infix = breakpointInfix(bp, gridBreakpoints); 15 | const utilityList = []; 16 | // eslint-disable-next-line no-unused-vars, no-restricted-syntax 17 | for (const [key, utility] of utilities) { 18 | if (utility && (utility.responsive || infix === '')) { 19 | utilityList.push(generateUtility(utility, infix)); 20 | } 21 | } 22 | return mediaBreakpointUp(bp, gridBreakpoints, utilityList.join('\n')); 23 | }).join('\n'); 24 | } 25 | 26 | export function printUtilities( 27 | gridBreakpoints, 28 | utilities, 29 | ) { 30 | const utilityList = []; 31 | // eslint-disable-next-line no-unused-vars, no-restricted-syntax 32 | for (const [key, utility] of utilities) { 33 | if (utility && utility.print === true) { 34 | utilityList.push(generateUtility(utility, '-print')); 35 | } 36 | } 37 | return `@media print { 38 | ${utilityList.join('\n')} 39 | }`; 40 | } 41 | -------------------------------------------------------------------------------- /docs/globalUtils/spacing.md: -------------------------------------------------------------------------------- 1 | ## Usage 2 | 3 | ```js 4 | const style = { border: "1px solid #3F007B", height: '150px', width: '150px', margin: '.5rem' }; 5 | 6 |
7 |
All paddings
8 |
Top padding
9 |
Right padding
10 |
Bottom padding
11 |
Left padding
12 |
X-axis paddings
13 |
Y-axis paddings
14 |
15 | 16 | ``` 17 | The exact same rules apply for margin. Just replace the `p` by `m`. 18 | 19 | >>> You also have access to responsive variations. 20 | -------------------------------------------------------------------------------- /docs/globalUtils/text.md: -------------------------------------------------------------------------------- 1 | Easily realign text to components with text alignment classes. 2 | 3 | ## Justify 4 | 5 | ```js 6 |

Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.

7 | ``` 8 | 9 | ## Placement 10 | 11 | ```js 12 |
13 |

Left aligned text on all viewport sizes.

14 |

Center aligned text on all viewport sizes.

15 |

Right aligned text on all viewport sizes.

16 |
17 | ``` 18 | ## Placement responsive 19 | 20 | ```js 21 |
22 |

Right text on viewports SM (small) or wider.

23 |

Right text on viewports MD (medium) or wider.

24 |

Right text on viewports LG (large) or wider.

25 |

Right text on viewports XL (extra-large) or wider.

26 |
27 | ``` 28 | 29 | ## Casing 30 | 31 | ```js 32 |
33 |

Lowercased text.

34 |

Uppercased text.

35 |

CapiTaliZed text.

36 |
37 | ``` 38 | ## Style 39 | 40 | ```js 41 |
42 |

Bold text.

43 |

Normal weight text.

44 |

Italic text.

45 |
46 | ``` 47 | -------------------------------------------------------------------------------- /docs/globalUtils/border-radius.md: -------------------------------------------------------------------------------- 1 | Round corners of an element. 2 | 3 | ```js 4 | const style = { background: "#f5f5f5", border: "1px solid #3F007B", display: "flex", alignItems: 'center', justifyContent: 'center', textAlign: 'center', margin: '.25rem', height: '100px', width: '100px' }; 5 | 6 |
7 |
className=
"rounded-top"
8 |
className=
"rounded-right"
9 |
className=
"rounded-bottom"
10 |
className=
"rounded-left"
11 |
className=
"rounded"
12 |
className=
"rounded-circle"
13 |
className=
"rounded-0"
14 |
15 | 16 | ``` 17 | 18 | Remove rounded corners of an element. 19 | 20 | ```js 21 | const style = { background: "#f5f5f5", border: "1px solid #3F007B", display: "flex", alignItems: 'center', justifyContent: 'center', textAlign: 'center', margin: '.25rem', height: '100px', width: '100px' }; 22 | 23 |
24 |
className=
"rounded"
25 |
className=
"rounded rounded-top-0"
26 |
className=
"rounded rounded-right-0""
27 |
className=
"rounded rounded-bottom-0"
28 |
className=
"rounded rounded-left-0"
29 | 30 |
31 | 32 | ``` 33 | -------------------------------------------------------------------------------- /src/display.js: -------------------------------------------------------------------------------- 1 | import { breakpointInfix, mediaBreakpointUp } from '@bootstrap-styled/css-mixins/lib/breakpoints'; 2 | 3 | export const defaultProps = { 4 | '$grid-breakpoints': { 5 | xs: '0', 6 | sm: '576px', 7 | md: '768px', 8 | lg: '992px', 9 | xl: '1200px', 10 | }, 11 | }; 12 | 13 | export function getDisplayUtilities(gridBreakpoints = defaultProps['$grid-breakpoints']) { 14 | const utilityList = []; 15 | Object.keys(gridBreakpoints).forEach((breakpoint) => { 16 | const infix = breakpointInfix(breakpoint, gridBreakpoints); 17 | utilityList.push(` 18 | ${mediaBreakpointUp(breakpoint, gridBreakpoints, ` 19 | .d${infix}-none { display: none !important; } 20 | .d${infix}-inline { display: inline !important; } 21 | .d${infix}-inline-block { display: inline-block !important; } 22 | .d${infix}-block { display: block !important; } 23 | .d${infix}-table { display: table !important; } 24 | .d${infix}-table-cell { display: table-cell !important; } 25 | .d${infix}-flex { display: flex !important; } 26 | .d${infix}-inline-flex { display: inline-flex !important; } 27 | `)} 28 | `); 29 | }); 30 | utilityList.push(` 31 | .d-print-block { 32 | display: none !important; 33 | 34 | @media print { 35 | display: block !important; 36 | } 37 | } 38 | 39 | .d-print-inline { 40 | display: none !important; 41 | 42 | @media print { 43 | display: inline !important; 44 | } 45 | } 46 | 47 | .d-print-inline-block { 48 | display: none !important; 49 | 50 | @media print { 51 | display: inline-block !important; 52 | } 53 | } 54 | 55 | .d-print-none { 56 | @media print { 57 | display: none !important; 58 | } 59 | } 60 | `); 61 | return utilityList.join('\n'); 62 | } 63 | 64 | export default { 65 | defaultProps, 66 | getDisplayUtilities, 67 | }; 68 | -------------------------------------------------------------------------------- /src/tests/align.test.js: -------------------------------------------------------------------------------- 1 | import { fromJS } from 'immutable'; 2 | import { getAlignUtilities, alignBaseline, alignTop, alignMiddle, alignBottom, alignTextBottom, alignTextTop } from '../align'; 3 | 4 | describe('bootstrap align utility', () => { 5 | it('getAlignUtilities should return a list of css utilities', () => { 6 | const css = getAlignUtilities(); 7 | expect(css).not.toContain('undefined'); 8 | expect(css).not.toContain('null'); 9 | expect(fromJS({ css }).hashCode()).toEqual(-994697783); 10 | }); 11 | it('alignBaseline should return a css', () => { 12 | const css = alignBaseline(); 13 | expect(css).not.toContain('undefined'); 14 | expect(css).not.toContain('null'); 15 | expect(fromJS({ css }).hashCode()).toEqual(746143447); 16 | }); 17 | it('alignTop should return a css', () => { 18 | const css = alignTop(); 19 | expect(css).not.toContain('undefined'); 20 | expect(css).not.toContain('null'); 21 | expect(fromJS({ css }).hashCode()).toEqual(1025169343); 22 | }); 23 | it('alignMiddle should return a css', () => { 24 | const css = alignMiddle(); 25 | expect(css).not.toContain('undefined'); 26 | expect(css).not.toContain('null'); 27 | expect(fromJS({ css }).hashCode()).toEqual(355583440); 28 | }); 29 | it('alignBottom should return a css', () => { 30 | const css = alignBottom(); 31 | expect(css).not.toContain('undefined'); 32 | expect(css).not.toContain('null'); 33 | expect(fromJS({ css }).hashCode()).toEqual(-33018022); 34 | }); 35 | it('alignTextBottom should return a css', () => { 36 | const css = alignTextBottom(); 37 | expect(css).not.toContain('undefined'); 38 | expect(css).not.toContain('null'); 39 | expect(fromJS({ css }).hashCode()).toEqual(426607220); 40 | }); 41 | it('alignTextTop should return a css', () => { 42 | const css = alignTextTop(); 43 | expect(css).not.toContain('undefined'); 44 | expect(css).not.toContain('null'); 45 | expect(fromJS({ css }).hashCode()).toEqual(192526144); 46 | }); 47 | }); 48 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | sudo: required 3 | dist: trusty 4 | 5 | # Blocklist 6 | branches: 7 | except: 8 | - gh-pages # will be deployed to, no need to build it 9 | 10 | cache: 11 | directories: 12 | - node_modules 13 | 14 | before_install: 15 | - npm install -g npm 16 | # const 17 | - export PACKAGE_NAME=$(node -p "require('./package.json').name") 18 | - export PACKAGE_VERSION=$(node -p "require('./package.json').version") 19 | - export SONAR_VERSION=${PACKAGE_VERSION}-b${TRAVIS_BUILD_ID}-${TRAVIS_BRANCH} 20 | - export NODE_VERSION=$(node --version) 21 | - export NPM_VERSION=$(npm --version) 22 | 23 | # logging 24 | - npm --version || echo npm not installed 25 | - node --version || echo node not installed 26 | - echo "package version $PACKAGE_VERSION" 27 | 28 | stages: 29 | - build 30 | - test 31 | - release 32 | - deploy 33 | 34 | jobs: 35 | include: 36 | 37 | # Job: Build 38 | - stage: build 39 | node_js: 40 | - 'lts/*' 41 | - '10' 42 | - '8' 43 | script: 44 | - npm run build 45 | # Job: Test 46 | - stage: test 47 | node_js: 48 | - 'lts/*' 49 | - '10' 50 | - '8' 51 | addons: 52 | sonarcloud: 53 | organization: $(echo $TRAVIS_REPO_SLUG | awk -F '/' '{print $1}') 54 | script: 55 | - npm run test 56 | - if [[ "$TRAVIS_BRANCH" != greenkeeper* ]]; then sonar-scanner -Dsonar.projectVersion=${SONAR_VERSION}; fi 57 | 58 | # Job: Release 59 | - stage: release 60 | if: branch = master AND type = push AND fork = false 61 | node_js: 62 | - 'lts/*' 63 | skip_cleanup: true 64 | script: 65 | - npx semantic-release 66 | 67 | # Job: Page 68 | - stage: deploy 69 | if: branch = master AND type = push AND fork = false 70 | node_js: 71 | - 'lts/*' 72 | script: 73 | - git fetch --tags 74 | - git checkout refs/tags/$(git describe --tags `git rev-list --tags --max-count=1`) 75 | - npm install 76 | - chmod +x styleguide/prepare.sh 77 | - styleguide/prepare.sh 78 | - npm run styleguide:build 79 | deploy: 80 | - provider: pages 81 | skip_cleanup: true 82 | github_token: $GH_TOKEN # Set in the settings page of your repository, as a secure variable 83 | keep_history: true 84 | local_dir: public/ 85 | -------------------------------------------------------------------------------- /src/tests/position.test.js: -------------------------------------------------------------------------------- 1 | import { fromJS } from 'immutable'; 2 | import { defaultProps, getPositionUtilities, fixedTop, fixedBottom, stickTop } from '../position'; 3 | 4 | describe('bootstrap position utility', () => { 5 | it('getPositionUtilities should return a list of css utilities', () => { 6 | const css = getPositionUtilities(defaultProps['$zindex-fixed'], defaultProps['$zindex-sticky']); 7 | expect(css).not.toContain('undefined'); 8 | expect(css).not.toContain('null'); 9 | expect(fromJS({ css }).hashCode()).toEqual(-778562839); 10 | }); 11 | it('getPositionUtilities should have arguments', () => { 12 | const css = getPositionUtilities(); 13 | expect(css).not.toContain('undefined'); 14 | expect(css).not.toContain('null'); 15 | expect(fromJS({ css }).hashCode()).toEqual(-778562839); 16 | }); 17 | it('fixedTop should return class .fixed-top', () => { 18 | const css = fixedTop(defaultProps['$zindex-fixed']); 19 | expect(css).not.toContain('undefined'); 20 | expect(css).not.toContain('null'); 21 | expect(fromJS({ css }).hashCode()).toEqual(576700824); 22 | }); 23 | it('fixedTop should have arguments', () => { 24 | const css = fixedTop(); 25 | expect(css).not.toContain('undefined'); 26 | expect(css).not.toContain('null'); 27 | expect(fromJS({ css }).hashCode()).toEqual(576700824); 28 | }); 29 | it('fixedBottom should return class .fixed-bottom', () => { 30 | const css = fixedBottom(defaultProps['$zindex-fixed']); 31 | expect(css).not.toContain('undefined'); 32 | expect(css).not.toContain('null'); 33 | expect(fromJS({ css }).hashCode()).toEqual(243226372); 34 | }); 35 | it('fixedBottom should have arguments', () => { 36 | const css = fixedBottom(); 37 | expect(css).not.toContain('undefined'); 38 | expect(css).not.toContain('null'); 39 | expect(fromJS({ css }).hashCode()).toEqual(243226372); 40 | }); 41 | it('stickTop should return class .fixed-sticky', () => { 42 | const css = stickTop(defaultProps['$zindex-sticky']); 43 | expect(css).not.toContain('undefined'); 44 | expect(css).not.toContain('null'); 45 | expect(fromJS({ css }).hashCode()).toEqual(180990810); 46 | }); 47 | it('stickTop should have arguments', () => { 48 | const css = stickTop(); 49 | expect(css).not.toContain('undefined'); 50 | expect(css).not.toContain('null'); 51 | expect(fromJS({ css }).hashCode()).toEqual(180990810); 52 | }); 53 | }); 54 | -------------------------------------------------------------------------------- /src/transition.js: -------------------------------------------------------------------------------- 1 | import parseTransition from '@bootstrap-styled/utils/lib/parseTransition'; 2 | import { transition as transitionMixin } from '@bootstrap-styled/css-mixins/lib/transition'; 3 | 4 | export const defaultProps = { 5 | '$enable-transitions': true, 6 | '$transition-fade': 'opacity .15s linear', 7 | '$transition-collapse': 'height .35s ease', 8 | }; 9 | 10 | export function getTransitionUtilities( 11 | enableTransitions = defaultProps['$enable-transitions'], 12 | transitionFade = defaultProps['$transition-fade'], 13 | transitionCollapse = defaultProps['$transition-collapse'], 14 | ) { 15 | return ` 16 | ${fade(enableTransitions, transitionFade)} 17 | ${collapse(enableTransitions, transitionCollapse)} 18 | `; 19 | } 20 | 21 | export function fade(enableTransitions = defaultProps['$enable-transitions'], transitionFade = defaultProps['$transition-fade']) { 22 | return ` 23 | .fade, 24 | &.fade { 25 | opacity: 0; 26 | ${transitionMixin(enableTransitions, transitionFade)} 27 | 28 | &.show { 29 | opacity: 1; 30 | } 31 | } 32 | `; 33 | } 34 | 35 | export function collapse(enableTransitions = defaultProps['$enable-transitions'], transitionCollapse = defaultProps['$transition-collapse']) { 36 | return ` 37 | &.collapse, .collapse { 38 | display: none; 39 | &.show { 40 | display: block; 41 | } 42 | } 43 | 44 | tr&, tr { 45 | &.collapse.show { 46 | display: table-row; 47 | } 48 | } 49 | 50 | tbody&, tbody { 51 | &.collapse.show { 52 | display: table-row-group; 53 | } 54 | } 55 | 56 | &.collapsing, .collapsing { 57 | position: relative; 58 | height: 0; 59 | overflow: hidden; 60 | ${transitionMixin(enableTransitions, transitionCollapse)} 61 | } 62 | `; 63 | } 64 | 65 | 66 | // function for get react transition (could even use filter and transform from mixin transition) 67 | export function getReactTransition(enableTransition, transition) { 68 | const transitionList = parseTransition(transition); 69 | const { 70 | property, 71 | duration, 72 | timingFunction, 73 | delay, 74 | } = transitionList[0]; 75 | return transitionMixin(enableTransition, `${property} ${duration}ms ${timingFunction} ${delay}ms`); 76 | } 77 | 78 | export default { 79 | defaultProps, 80 | getTransitionUtilities, 81 | getReactTransition, 82 | fade, 83 | collapse, 84 | }; 85 | -------------------------------------------------------------------------------- /src/background.js: -------------------------------------------------------------------------------- 1 | import { bgVariant } from '@bootstrap-styled/css-mixins/lib/background-variant'; 2 | 3 | export const defaultProps = { 4 | '$enable-hover-media-query': false, 5 | '$brand-primary': '#0275d8', 6 | '$brand-success': '#5cb85c', 7 | '$brand-info': '#5bc0de', 8 | '$brand-warning': '#f0ad4e', 9 | '$brand-danger': '#d9543f', 10 | '$brand-inverse': '#373a3c', 11 | '$gray-lightest': '#f7f7f9', 12 | }; 13 | 14 | // 15 | // Contextual backgrounds 16 | // 17 | 18 | export function getBackgroundUtilities( 19 | $enableHoverMediaQuery = defaultProps['$enable-hover-media-query'], 20 | $brandPrimary = defaultProps['$brand-primary'], 21 | $brandSuccess = defaultProps['$brand-success'], 22 | $brandInfo = defaultProps['$brand-info'], 23 | $brandWarning = defaultProps['$brand-warning'], 24 | $brandDanger = defaultProps['$brand-danger'], 25 | $brandInverse = defaultProps['$brand-inverse'], 26 | $grayLightest = defaultProps['$gray-lightest'], 27 | ) { 28 | return ` 29 | ${bgVariant($enableHoverMediaQuery, '.bg-primary', $brandPrimary)} 30 | ${bgVariant($enableHoverMediaQuery, '.bg-success', $brandSuccess)} 31 | ${bgVariant($enableHoverMediaQuery, '.bg-info', $brandInfo)} 32 | ${bgVariant($enableHoverMediaQuery, '.bg-warning', $brandWarning)} 33 | ${bgVariant($enableHoverMediaQuery, '.bg-danger', $brandDanger)} 34 | ${bgVariant($enableHoverMediaQuery, '.bg-inverse', $brandInverse)} 35 | ${bgVariant($enableHoverMediaQuery, '.bg-faded', $grayLightest)} 36 | `; 37 | } 38 | export const bgPrimary = ($enableHoverMediaQuery, bgColor = defaultProps['$brand-primary']) => bgVariant($enableHoverMediaQuery, '.bg-primary', bgColor); 39 | export const bgSuccess = ($enableHoverMediaQuery, bgColor = defaultProps['$brand-success']) => bgVariant($enableHoverMediaQuery, '.bg-success', bgColor); 40 | export const bgInfo = ($enableHoverMediaQuery, bgColor = defaultProps['$brand-info']) => bgVariant($enableHoverMediaQuery, '.bg-info', bgColor); 41 | export const bgWarning = ($enableHoverMediaQuery, bgColor = defaultProps['$brand-warning']) => bgVariant($enableHoverMediaQuery, '.bg-warning', bgColor); 42 | export const bgDanger = ($enableHoverMediaQuery, bgColor = defaultProps['$brand-danger']) => bgVariant($enableHoverMediaQuery, '.bg-danger', bgColor); 43 | export const bgInverse = ($enableHoverMediaQuery, bgColor = defaultProps['$brand-inverse']) => bgVariant($enableHoverMediaQuery, '.bg-inverse', bgColor); 44 | export const bgFaded = ($enableHoverMediaQuery, bgColor = defaultProps['$gray-lightest']) => bgVariant($enableHoverMediaQuery, '.bg-faded', bgColor); 45 | 46 | export default { 47 | defaultProps, 48 | getBackgroundUtilities, 49 | bgFaded, 50 | bgPrimary, 51 | bgSuccess, 52 | bgInfo, 53 | bgWarning, 54 | bgDanger, 55 | bgInverse, 56 | }; 57 | -------------------------------------------------------------------------------- /src/tests/transition.test.js: -------------------------------------------------------------------------------- 1 | import { fromJS } from 'immutable'; 2 | import { getTransitionUtilities, fade, collapse, getReactTransition } from '../transition'; 3 | 4 | describe('bootstrap transition mixins', () => { 5 | describe('getTransitionUtils', () => { 6 | it('should return a css utility', () => { 7 | const enableTransitions = true; 8 | const css = getTransitionUtilities(enableTransitions, 'all .2s ease-in-out', 'height .35s ease'); 9 | expect(css).not.toContain('undefined'); 10 | expect(css).not.toContain('null'); 11 | expect(fromJS({ css }).hashCode()).toEqual(760045004); 12 | }); 13 | it('should have parameters', () => { 14 | const css = getTransitionUtilities(); 15 | expect(css).not.toContain('undefined'); 16 | expect(css).not.toContain('null'); 17 | expect(fromJS({ css }).hashCode()).toEqual(-486265482); 18 | }); 19 | }); 20 | describe('fade', () => { 21 | it('should return a css with defaultProps', () => { 22 | const css = fade(); 23 | expect(fromJS({ css }).hashCode()).toEqual(-297507179); 24 | }); 25 | it('should return a css with transition', () => { 26 | const enableTransitions = true; 27 | const css = fade(enableTransitions, 'opacity .15s linear'); 28 | expect(fromJS({ css }).hashCode()).toEqual(-297507179); 29 | }); 30 | it('should return a css without transition', () => { 31 | const enableTransitions = false; 32 | const css = fade(enableTransitions, 'opacity .15s linear'); 33 | expect(fromJS({ css }).hashCode()).toEqual(-1046095170); 34 | }); 35 | }); 36 | describe('collapse', () => { 37 | it('should return a css with defaultProps', () => { 38 | const css = collapse(); 39 | expect(fromJS({ css }).hashCode()).toEqual(204352853); 40 | }); 41 | it('should return a css with transition', () => { 42 | const enableTransitions = true; 43 | const css = collapse(enableTransitions, 'height .35s ease'); 44 | expect(fromJS({ css }).hashCode()).toEqual(204352853); 45 | }); 46 | it('should return a css without transition', () => { 47 | const enableTransitions = false; 48 | const css = collapse(enableTransitions, 'height .35s ease'); 49 | expect(fromJS({ css }).hashCode()).toEqual(-987798304); 50 | }); 51 | }); 52 | describe('getReactTransition', () => { 53 | it('should return a css with transition', () => { 54 | const enableTransitions = true; 55 | const css = getReactTransition(enableTransitions, 'height .35s ease'); 56 | expect(fromJS({ css }).hashCode()).toEqual(-627217750); 57 | }); 58 | it('should return a css without transition', () => { 59 | const enableTransitions = false; 60 | const css = getReactTransition(enableTransitions, 'height .35s ease'); 61 | expect(fromJS({ css }).hashCode()).toEqual(788434458); 62 | }); 63 | }); 64 | }); 65 | -------------------------------------------------------------------------------- /src/cursor.js: -------------------------------------------------------------------------------- 1 | export function getCursorUtilities() { 2 | return ` 3 | .cursor-alias { 4 | cursor: alias; 5 | } 6 | 7 | .cursor-all-scroll { 8 | cursor: all-scroll; 9 | } 10 | 11 | .cursor-auto { 12 | cursor: auto; 13 | } 14 | 15 | .cursor-cell { 16 | cursor: cell; 17 | } 18 | 19 | .cursor-context-menu { 20 | cursor: context-menu; 21 | } 22 | 23 | .cursor-col-resize { 24 | cursor: col-resize; 25 | } 26 | 27 | .cursor-copy { 28 | cursor: copy; 29 | } 30 | 31 | .cursor-crosshair { 32 | cursor: crosshair; 33 | } 34 | 35 | .cursor-default { 36 | cursor: default; 37 | } 38 | 39 | .cursor-e-resize { 40 | cursor: e-resize; 41 | } 42 | 43 | .cursor-ew-resize { 44 | cursor: ew-resize; 45 | } 46 | 47 | .cursor-grab { 48 | cursor: grab; 49 | } 50 | 51 | .cursor-grabbing { 52 | cursor: grabbing; 53 | } 54 | 55 | .cursor-help { 56 | cursor: help; 57 | } 58 | 59 | .cursor-move { 60 | cursor: move; 61 | } 62 | 63 | .cursor-n-resize { 64 | cursor: n-resize; 65 | } 66 | 67 | .cursor-ne-resize { 68 | cursor: ne-resize; 69 | } 70 | 71 | .cursor-nesw-resize { 72 | cursor: nesw-resize; 73 | } 74 | 75 | .cursor-ns-resize { 76 | cursor: ns-resize; 77 | } 78 | 79 | .cursor-nw-resize { 80 | cursor: nw-resize; 81 | } 82 | 83 | .cursor-nwse-resize { 84 | cursor: nwse-resize; 85 | } 86 | 87 | .cursor-no-drop { 88 | cursor: no-drop; 89 | } 90 | 91 | .cursor-none { 92 | cursor: none; 93 | } 94 | 95 | .cursor-not-allowed { 96 | cursor: not-allowed; 97 | } 98 | 99 | .cursor-pointer { 100 | cursor: pointer; 101 | } 102 | 103 | .cursor-progress { 104 | cursor: progress; 105 | } 106 | 107 | .cursor-row-resize { 108 | cursor: row-resize; 109 | } 110 | 111 | .cursor-s-resize { 112 | cursor: s-resize; 113 | } 114 | 115 | .cursor-se-resize { 116 | cursor: se-resize; 117 | } 118 | 119 | .cursor-sw-resize { 120 | cursor: sw-resize; 121 | } 122 | 123 | .cursor-text { 124 | cursor: text; 125 | } 126 | 127 | .cursor-vertical-text { 128 | cursor: vertical-text; 129 | } 130 | 131 | .cursor-w-resize { 132 | cursor: w-resize; 133 | } 134 | 135 | .cursor-wait { 136 | cursor: wait; 137 | } 138 | 139 | .cursor-zoom-in { 140 | cursor: zoom-in; 141 | } 142 | 143 | .cursor-zoom-out { 144 | cursor: zoom-out; 145 | } 146 | 147 | .cursor-initial { 148 | cursor: initial; 149 | } 150 | `; 151 | } 152 | 153 | export default { 154 | getCursorUtilities, 155 | }; 156 | -------------------------------------------------------------------------------- /docs/globalUtils/cursor.md: -------------------------------------------------------------------------------- 1 | Change the cursor. 2 | 3 | ```js 4 | 5 | const style = { background: "#f5f5f5", margin: "1rem",border: "2px solid #3F007B", display: "flex", alignItems: 'center', justifyContent: 'center', textAlign: 'center', margin: '.25rem', height: '150px', width: '150px' }; 6 |
7 |
.cursor-alias
8 |
.cursor-all-scroll
9 |
.cursor-auto
10 |
.cursor-cell
11 |
.cursor-context-menu
12 |
.cursor-col-resize
13 |
.cursor-copy
14 |
.cursor-crosshair
15 |
.cursor-default
16 |
.cursor-e-resize
17 |
.cursor-ew-resize
18 |
.cursor-grab
19 |
.cursor-grabbing
20 |
.cursor-help
21 |
.cursor-move
22 |
.cursor-n-resize
23 |
.cursor-ne-resize
24 |
.cursor-nesw-resize
25 |
.cursor-ns-resize
26 |
.cursor-nw-resize
27 |
.cursor-nwse-resize
28 |
.cursor-no-drop
29 |
.cursor-none
30 |
.cursor-not-allowed
31 |
.cursor-pointer
32 |
.cursor-progress
33 |
.cursor-row-resize
34 |
.cursor-s-resize
35 |
.cursor-se-resize
36 |
.cursor-sw-resize
37 |
.cursor-text
38 |
.cursor-vertical-text
39 |
.cursor-w-resize
40 |
.cursor-wait
41 |
.cursor-zoom-in
42 |
.cursor-zoom-out
43 |
.cursor-initial
44 |
45 | 46 | 47 | ``` 48 | -------------------------------------------------------------------------------- /src/spacing.js: -------------------------------------------------------------------------------- 1 | import { breakpointInfix, mediaBreakpointUp } from '@bootstrap-styled/css-mixins/lib/breakpoints'; 2 | 3 | export const defaultProps = { 4 | '$grid-breakpoints': { 5 | xs: '0', 6 | sm: '576px', 7 | md: '768px', 8 | lg: '992px', 9 | xl: '1200px', 10 | }, 11 | '$spacers': { // eslint-disable-line quote-props 12 | 0: { 13 | x: 0, 14 | y: 0, 15 | }, 16 | 1: { 17 | x: '0.25rem', 18 | y: '0.25rem', 19 | }, 20 | 2: { 21 | x: '0.5rem', 22 | y: '0.5rem', 23 | }, 24 | 3: { 25 | x: '1rem', 26 | y: '1rem', 27 | }, 28 | 4: { 29 | x: '1.5rem', 30 | y: '1.5rem', 31 | }, 32 | 5: { 33 | x: '3rem', 34 | y: '3rem', 35 | }, 36 | }, 37 | }; 38 | 39 | export function getSpacingUtilities( 40 | gridBreakpoints = defaultProps['$grid-breakpoints'], 41 | spacers = defaultProps['$spacers'] // eslint-disable-line dot-notation 42 | ) { 43 | const abbrevs = { 44 | margin: 'm', 45 | padding: 'p', 46 | }; 47 | 48 | const spacingUtilityList = []; 49 | const infixList = []; 50 | Object.keys(gridBreakpoints).forEach((breakpoint) => { 51 | const infix = breakpointInfix(breakpoint, gridBreakpoints); 52 | infixList.push(infix); 53 | 54 | Object.keys(abbrevs).forEach((prop) => { 55 | const abbrev = abbrevs[prop]; 56 | Object.keys(spacers).forEach((size) => { 57 | const lengths = spacers[size]; 58 | spacingUtilityList.push(mediaBreakpointUp(breakpoint, gridBreakpoints, ` 59 | .${abbrev}${infix}-${size} { ${prop}: ${lengths.y} ${lengths.x} !important; } /* a = All sides */ 60 | .${abbrev}t${infix}-${size} { ${prop}-top: ${lengths.y} !important; } 61 | .${abbrev}r${infix}-${size} { ${prop}-right: ${lengths.x} !important; } 62 | .${abbrev}b${infix}-${size} { ${prop}-bottom: ${lengths.y} !important; } 63 | .${abbrev}l${infix}-${size} { ${prop}-left: ${lengths.x} !important; } 64 | .${abbrev}x${infix}-${size} { 65 | ${prop}-right: ${lengths.x} !important; 66 | ${prop}-left: ${lengths.x} !important; 67 | } 68 | .${abbrev}y${infix}-${size} { 69 | ${prop}-top: ${lengths.y} !important; 70 | ${prop}-bottom: ${lengths.y} !important; 71 | } 72 | `)); 73 | }); 74 | }); 75 | }); 76 | 77 | const infixUtilityList = infixList.map((infix) => ` 78 | .m${infix}-auto { margin: auto !important; } 79 | .mt${infix}-auto { margin-top: auto !important; } 80 | .mr${infix}-auto { margin-right: auto !important; } 81 | .mb${infix}-auto { margin-bottom: auto !important; } 82 | .ml${infix}-auto { margin-left: auto !important; } 83 | .mx${infix}-auto { 84 | margin-right: auto !important; 85 | margin-left: auto !important; 86 | } 87 | .my${infix}-auto { 88 | margin-top: auto !important; 89 | margin-bottom: auto !important; 90 | } 91 | `); 92 | 93 | return ` 94 | ${infixUtilityList.join('\n')} 95 | ${spacingUtilityList.join('\n')} 96 | `; 97 | } 98 | 99 | export default { 100 | defaultProps, 101 | getSpacingUtilities, 102 | }; 103 | -------------------------------------------------------------------------------- /styleguide/styleguide.ext.json: -------------------------------------------------------------------------------- 1 | { 2 | "ignore": [ 3 | "**/__tests__/**", 4 | "**/*.test.{js,jsx,ts,tsx}", 5 | "**/*.spec.{js,jsx,ts,tsx}", 6 | "**/*.d.ts" 7 | ], 8 | "pagePerSection": true, 9 | "sections": [ 10 | { 11 | "name": "Introduction", 12 | "content": "docs/introduction.md" 13 | }, 14 | { 15 | "name": "Prerequisite", 16 | "content": "docs/prerequisite.md" 17 | }, 18 | { 19 | "name": "Getting started", 20 | "content": "docs/getting-started.md", 21 | "sections": [ 22 | { 23 | "name": "Installation", 24 | "content": "docs/installation.md" 25 | } 26 | ], 27 | "sectionDepth": 0 28 | }, 29 | { 30 | "name": "Utils", 31 | "content": "docs/utils.md", 32 | "sections": [ 33 | { 34 | "name": "Align", 35 | "content": "docs/globalUtils/align.md" 36 | }, 37 | { 38 | "name": "Borders", 39 | "content": "docs/globalUtils/borders.md" 40 | }, 41 | { 42 | "name": "Border-radius", 43 | "content": "docs/globalUtils/border-radius.md" 44 | }, 45 | { 46 | "name": "Clearfix", 47 | "content": "docs/globalUtils/clearfix.md" 48 | }, 49 | { 50 | "name": "Cursor", 51 | "content": "docs/globalUtils/cursor.md" 52 | }, 53 | { 54 | "name": "Display", 55 | "content": "docs/globalUtils/display.md" 56 | }, 57 | { 58 | "name": "Flexbox", 59 | "content": "docs/globalUtils/flexbox.md" 60 | }, 61 | { 62 | "name": "Positions", 63 | "content": "docs/globalUtils/position.md" 64 | }, 65 | { 66 | "name": "Screen-reader", 67 | "content": "docs/globalUtils/screen-readers.md" 68 | }, 69 | { 70 | "name": "Sizing", 71 | "content": "docs/globalUtils/sizing.md" 72 | }, 73 | { 74 | "name": "Spacing", 75 | "content": "docs/globalUtils/spacing.md" 76 | }, 77 | { 78 | "name": "Text", 79 | "content": "docs/globalUtils/text.md" 80 | }, 81 | { 82 | "name": "Transition", 83 | "content": "docs/globalUtils/transition.md" 84 | }, 85 | { 86 | "name": "Visibility", 87 | "content": "docs/globalUtils/visibility.md" 88 | } 89 | ], 90 | "sectionDepth": 1 91 | }, 92 | { 93 | "name": "FAQ", 94 | "content": "docs/faq.md" 95 | }, 96 | { 97 | "name": "Contribute", 98 | "content": "docs/contribute.md", 99 | "sections": [ 100 | { 101 | "name": "Commands", 102 | "content": "docs/commands.md" 103 | }, 104 | { 105 | "name": "Branches", 106 | "content": "docs/branches.md" 107 | }, 108 | { 109 | "name": "Release", 110 | "content": "docs/release.md" 111 | } 112 | ] 113 | } 114 | ], 115 | "ribbon": { 116 | "url": "https://github.com/bootstrap-styled/css-utils", 117 | "text": "Fork us on GitHub" 118 | } 119 | } 120 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, gender identity and expression, level of experience, 9 | nationality, personal appearance, race, religion, or sexual identity and 10 | orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at contact@yeutech.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at [http://contributor-covenant.org/version/1/4][version] 72 | 73 | [homepage]: http://contributor-covenant.org 74 | [version]: http://contributor-covenant.org/version/1/4/ 75 | -------------------------------------------------------------------------------- /src/tests/reboot.test.js: -------------------------------------------------------------------------------- 1 | import { fromJS } from 'immutable'; 2 | import { defaultProps, body, bodyUtils, boxSizing, getGlobalStyles, getGlobalStyleNoBootstrapProvider, html, ie10FixHidden, ie10FixViewport, svg, tabIndex, webkitFileUploadButton } from '../reboot'; 3 | 4 | describe('bootstrap reboot utility', () => { 5 | it('getGlobalStyleNoBootstrapProvider should return a set of global styles', () => { 6 | const css = getGlobalStyleNoBootstrapProvider( 7 | defaultProps['$font-family-base'], 8 | defaultProps['$font-size-base'], 9 | defaultProps['$font-weight-base'], 10 | defaultProps['$line-height-base'], 11 | defaultProps['$body-color'], 12 | defaultProps['$body-bg'], 13 | ); 14 | expect(fromJS({ css }).hashCode()).toEqual(95777949); 15 | }); 16 | it('getGlobalStyles should return a set of global styles', () => { 17 | const css = getGlobalStyles(); 18 | expect(fromJS({ css }).hashCode()).toEqual(739745613); 19 | }); 20 | it('getGlobalStyles should return a set of global styles without params', () => { 21 | const css = getGlobalStyles(); 22 | expect(fromJS({ css }).hashCode()).toEqual(739745613); 23 | }); 24 | it('body should return a css with default values', () => { 25 | const css = body(); 26 | expect(css).not.toContain('undefined'); 27 | expect(css).not.toContain('null'); 28 | expect(fromJS({ css }).hashCode()).toEqual(188062214); 29 | }); 30 | it('body should return a css with custom values', () => { 31 | const css = body( 32 | 'arial', 33 | '1.2rem', 34 | 'bold', 35 | '1.5rem', 36 | 'red', 37 | 'blue', 38 | ); 39 | expect(css).not.toContain('undefined'); 40 | expect(css).not.toContain('null'); 41 | expect(fromJS({ css }).hashCode()).toEqual(223379908); 42 | }); 43 | it('bodyUtils should return a css with default values', () => { 44 | const css = bodyUtils(); 45 | expect(css).not.toContain('undefined'); 46 | expect(css).not.toContain('null'); 47 | expect(fromJS({ css }).hashCode()).toEqual(-539439755); 48 | }); 49 | it('boxSizing should return a css', () => { 50 | const css = boxSizing(); 51 | expect(css).not.toContain('undefined'); 52 | expect(css).not.toContain('null'); 53 | expect(fromJS({ css }).hashCode()).toEqual(680872989); 54 | }); 55 | it('html should return a css', () => { 56 | const css = html(); 57 | expect(css).not.toContain('undefined'); 58 | expect(css).not.toContain('null'); 59 | expect(fromJS({ css }).hashCode()).toEqual(-401909997); 60 | }); 61 | it('ie10FixHidden should return a css', () => { 62 | const css = ie10FixHidden(); 63 | expect(css).not.toContain('undefined'); 64 | expect(css).not.toContain('null'); 65 | expect(fromJS({ css }).hashCode()).toEqual(-1008903539); 66 | }); 67 | it('ie10FixViewport should return a css', () => { 68 | const css = ie10FixViewport(); 69 | expect(css).not.toContain('undefined'); 70 | expect(css).not.toContain('null'); 71 | expect(fromJS({ css }).hashCode()).toEqual(-966787180); 72 | }); 73 | it('svg should return a css', () => { 74 | const css = svg(); 75 | expect(css).not.toContain('undefined'); 76 | expect(css).not.toContain('null'); 77 | expect(fromJS({ css }).hashCode()).toEqual(15932031); 78 | }); 79 | it('tabIndex should return a css', () => { 80 | const css = tabIndex(); 81 | expect(css).not.toContain('undefined'); 82 | expect(css).not.toContain('null'); 83 | expect(fromJS({ css }).hashCode()).toEqual(972266682); 84 | }); 85 | it('webkitFileUploadButton should return a css', () => { 86 | const css = webkitFileUploadButton(); 87 | expect(css).not.toContain('undefined'); 88 | expect(css).not.toContain('null'); 89 | expect(fromJS({ css }).hashCode()).toEqual(764020772); 90 | }); 91 | }); 92 | -------------------------------------------------------------------------------- /src/text.js: -------------------------------------------------------------------------------- 1 | import { mediaBreakpointUp, breakpointInfix } from '@bootstrap-styled/css-mixins/lib/breakpoints'; 2 | import { textTruncate } from '@bootstrap-styled/css-mixins/lib/text-truncate'; 3 | import { textHide } from '@bootstrap-styled/css-mixins/lib/text-hide'; 4 | import { textEmphasisVariant } from '@bootstrap-styled/css-mixins/lib/text-emphasis'; 5 | 6 | export const defaultProps = { 7 | '$grid-breakpoints': { 8 | xs: '0', 9 | sm: '576px', 10 | md: '768px', 11 | lg: '992px', 12 | xl: '1200px', 13 | }, 14 | '$enable-hover-media-query': false, 15 | '$font-weight-normal': 'normal', 16 | '$font-weight-bold': 'bold', 17 | '$text-muted': '#818a91', 18 | '$brand-primary': '#0275d8', 19 | '$brand-success': '#5cb85c', 20 | '$brand-info': '#5bc0de', 21 | '$brand-warning': '#f0ad4e', 22 | '$brand-danger': '#d9534f', 23 | '$gray-dark': '#373a3c', 24 | }; 25 | 26 | export function getTextUtilities( 27 | enableHoverMediaQuery = defaultProps['$enable-hover-media-query'], 28 | gridBreakpoints = defaultProps['$grid-breakpoints'], 29 | fontWeightNormal = defaultProps['$font-weight-normal'], 30 | fontWeightBold = defaultProps['$font-weight-bold'], 31 | textMuted = defaultProps['$text-muted'], 32 | brandPrimary = defaultProps['$brand-primary'], 33 | brandSuccess = defaultProps['$brand-success'], 34 | brandInfo = defaultProps['$brand-info'], 35 | brandWarning = defaultProps['$brand-warning'], 36 | brandDanger = defaultProps['$brand-danger'], 37 | grayDark = defaultProps['$gray-dark'] 38 | ) { 39 | const responseAlignmentList = []; 40 | Object.keys(gridBreakpoints).forEach((bp) => { 41 | const infix = breakpointInfix(bp, gridBreakpoints); 42 | const responsiveAlignement = mediaBreakpointUp(bp, gridBreakpoints, ` 43 | .text${infix}-left { text-align: left !important; } 44 | .text${infix}-right { text-align: right !important; } 45 | .text${infix}-center { text-align: center !important; } 46 | `); 47 | responseAlignmentList.push(responsiveAlignement); 48 | }); 49 | return ` 50 | /* Text */ 51 | 52 | /* Alignment */ 53 | 54 | .text-justify { text-align: justify !important; } 55 | .text-nowrap { white-space: nowrap !important; } 56 | .text-truncate { ${textTruncate()} } 57 | 58 | /* Responsive alignment */ 59 | 60 | ${responseAlignmentList.join('\n')} 61 | 62 | /* Transformation */ 63 | 64 | .text-lowercase { text-transform: lowercase !important; } 65 | .text-uppercase { text-transform: uppercase !important; } 66 | .text-capitalize { text-transform: capitalize !important; } 67 | 68 | /* Weight and italics */ 69 | 70 | .font-weight-normal { font-weight: ${fontWeightNormal}; } 71 | .font-weight-bold { font-weight: ${fontWeightBold}; } 72 | .font-italic { font-style: italic; } 73 | 74 | /* Contextual colors */ 75 | 76 | .text-white { 77 | color: #fff !important; 78 | } 79 | 80 | ${textEmphasisVariant(enableHoverMediaQuery, '.text-muted', textMuted)} 81 | 82 | ${textEmphasisVariant(enableHoverMediaQuery, '.text-primary', brandPrimary)} 83 | 84 | ${textEmphasisVariant(enableHoverMediaQuery, '.text-success', brandSuccess)} 85 | 86 | ${textEmphasisVariant(enableHoverMediaQuery, '.text-info', brandInfo)} 87 | 88 | ${textEmphasisVariant(enableHoverMediaQuery, '.text-warning', brandWarning)} 89 | 90 | ${textEmphasisVariant(enableHoverMediaQuery, '.text-danger', brandDanger)} 91 | 92 | /* Font color */ 93 | 94 | ${textEmphasisVariant(enableHoverMediaQuery, '.text-gray-dark', grayDark)} 95 | 96 | /* Misc */ 97 | 98 | .text-hide { 99 | ${textHide()} 100 | } 101 | 102 | `; 103 | } 104 | 105 | export default { 106 | defaultProps, 107 | getTextUtilities, 108 | }; 109 | -------------------------------------------------------------------------------- /src/flex.js: -------------------------------------------------------------------------------- 1 | import { mediaBreakpointUp, breakpointInfix } from '@bootstrap-styled/css-mixins/lib/breakpoints'; 2 | 3 | export const defaultProps = { 4 | '$grid-breakpoints': { 5 | xs: '0', 6 | sm: '576px', 7 | md: '768px', 8 | lg: '992px', 9 | xl: '1200px', 10 | }, 11 | }; 12 | 13 | export function getFlexUtilities(gridBreakpoints = defaultProps['$grid-breakpoints']) { 14 | const flexUtilityList = []; 15 | Object.keys(gridBreakpoints).forEach((breakpoint) => { 16 | const infix = breakpointInfix(breakpoint, gridBreakpoints); 17 | flexUtilityList.push(` 18 | /* Flex column reordering */ 19 | ${mediaBreakpointUp(breakpoint, gridBreakpoints, ` 20 | .flex${infix}-first { order: -1; } 21 | .flex${infix}-last { order: 1; } 22 | .flex${infix}-unordered { order: 0; } 23 | `)} 24 | 25 | /* Flex direction */ 26 | ${mediaBreakpointUp(breakpoint, gridBreakpoints, ` 27 | .flex${infix}-row { flex-direction: row !important; } 28 | .flex${infix}-column { flex-direction: column !important; } 29 | .flex${infix}-row-reverse { flex-direction: row-reverse !important; } 30 | .flex${infix}-column-reverse { flex-direction: column-reverse !important; } 31 | `)} 32 | 33 | /* Flex wrap */ 34 | ${mediaBreakpointUp(breakpoint, gridBreakpoints, ` 35 | .flex${infix}-wrap { flex-wrap: wrap !important; } 36 | .flex${infix}-nowrap { flex-wrap: nowrap !important; } 37 | .flex${infix}-wrap-reverse { flex-wrap: wrap-reverse !important; } 38 | `)} 39 | /* Flex justify-content */ 40 | ${mediaBreakpointUp(breakpoint, gridBreakpoints, ` 41 | .justify-content${infix}-start { justify-content: flex-start !important; } 42 | .justify-content${infix}-end { justify-content: flex-end !important; } 43 | .justify-content${infix}-center { justify-content: center !important; } 44 | .justify-content${infix}-between { justify-content: space-between !important; } 45 | .justify-content${infix}-around { justify-content: space-around !important; } 46 | .justify-content${infix}-evenly { justify-content: space-evenly !important; } 47 | `)} 48 | /* Flex align-items */ 49 | ${mediaBreakpointUp(breakpoint, gridBreakpoints, ` 50 | .align-items${infix}-start { align-items: flex-start !important; } 51 | .align-items${infix}-end { align-items: flex-end !important; } 52 | .align-items${infix}-center { align-items: center !important; } 53 | .align-items${infix}-baseline { align-items: baseline !important; } 54 | .align-items${infix}-stretch { align-items: stretch !important; } 55 | `)} 56 | /* Flex align-content */ 57 | ${mediaBreakpointUp(breakpoint, gridBreakpoints, ` 58 | .align-content${infix}-start { align-content: flex-start !important; } 59 | .align-content${infix}-end { align-content: flex-end !important; } 60 | .align-content${infix}-center { align-content: center !important; } 61 | .align-content${infix}-between { align-content: space-between !important; } 62 | .align-content${infix}-around { align-content: space-around !important; } 63 | .align-content${infix}-stretch { align-content: stretch !important; } 64 | `)} 65 | /* Flex align-self */ 66 | ${mediaBreakpointUp(breakpoint, gridBreakpoints, ` 67 | .align-self${infix}-auto { align-self: auto !important; } 68 | .align-self${infix}-start { align-self: flex-start !important; } 69 | .align-self${infix}-end { align-self: flex-end !important; } 70 | .align-self${infix}-center { align-self: center !important; } 71 | .align-self${infix}-baseline { align-self: baseline !important; } 72 | .align-self${infix}-stretch { align-self: stretch !important; } 73 | `)} 74 | `); 75 | }); 76 | return flexUtilityList.join('\n'); 77 | } 78 | 79 | export default { 80 | defaultProps, 81 | getFlexUtilities, 82 | }; 83 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # css-utils 2 | 3 | [![Build Status](https://travis-ci.org/bootstrap-styled/css-utils.svg?branch=master)](https://travis-ci.org/bootstrap-styled/css-utils) [![npm Version](https://img.shields.io/npm/v/@bootstrap-styled/css-utils.svg?style=flat)](https://www.npmjs.com/package/@bootstrap-styled/css-utils) [![License](https://img.shields.io/npm/l/@bootstrap-styled/css-utils.svg?style=flat)](https://www.npmjs.com/package/@bootstrap-styled/css-utils) [![NPM monthly downloads](https://img.shields.io/npm/dm/@bootstrap-styled/css-utils.svg?style=flat)](https://npmjs.org/package/@bootstrap-styled/css-utils) [![NPM total downloads](https://img.shields.io/npm/dt/@bootstrap-styled/css-utils.svg?style=flat)](https://npmjs.org/package/@bootstrap-styled/css-utils) [![npm Version](https://img.shields.io/node/v/@bootstrap-styled/css-utils.svg?style=flat)](https://www.npmjs.com/package/@bootstrap-styled/css-utils) [![Module formats](https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-green.svg?style=flat)](https://www.npmjs.com/package/@bootstrap-styled/css-utils) 4 | [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=com.github.bootstrap-styled.css-utils&metric=coverage)](https://sonarcloud.io/dashboard?id=com.github.bootstrap-styled.css-utils) [![Quality gate status](https://sonarcloud.io/api/project_badges/measure?project=com.github.bootstrap-styled.css-utils&metric=alert_status)](https://sonarcloud.io/dashboard?id=com.github.bootstrap-styled.css-utils) 5 | [![gitter](https://badges.gitter.im/bootstrap-styled/bootstrap-styled.svg)](https://gitter.im/bootstrap-styled) 6 | [![Greenkeeper badge](https://badges.greenkeeper.io/bootstrap-styled/css-utils.svg)](https://greenkeeper.io/) 7 | [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fbootstrap-styled%2Fcss-utils.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fbootstrap-styled%2Fcss-utils?ref=badge_shield) 8 | 9 | Bootstrap mixins and utilities in javascript for bootstrap-styled. 10 | 11 | 12 | ## Table of Contents 13 | 14 | - [Documentation](#documentation) 15 | - [Contributing](#contributing) 16 | - [License MIT](#license-mit) 17 | 18 | --- 19 | 20 | 21 | [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fbootstrap-styled%2Fcss-utils.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fbootstrap-styled%2Fcss-utils?ref=badge_large) 22 | 23 | ## Documentation 24 | 25 | Read [css-utils documentation](https://bootstrap-styled.github.io/css-utils). 26 | 27 | 28 | ## Contributing 29 | 30 | If you want to contribute to css-utils please see our [contributing and community guidelines](https://github.com/bootstrap-styled/css-utils/blob/master/CONTRIBUTING.md), they\'ll help you get set up locally and explain the whole process. 31 | 32 | Please also note that all repositories under the bootstrap-styled organization follow our [Code of Conduct](https://github.com/bootstrap-styled/css-utils/blob/master/CODE_OF_CONDUCT.md), make sure to review and follow it. 33 | 34 | ## License MIT 35 | 36 | The MIT License 37 | 38 | Copyright (c) 2017-2018 Yeutech Company Limited. https://bootstrap-styled.github.io 39 | 40 | Permission is hereby granted, free of charge, to any person obtaining a copy 41 | of this software and associated documentation files (the "Software"), to deal 42 | in the Software without restriction, including without limitation the rights 43 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 44 | copies of the Software, and to permit persons to whom the Software is 45 | furnished to do so, subject to the following conditions: 46 | 47 | The above copyright notice and this permission notice shall be included in 48 | all copies or substantial portions of the Software. 49 | 50 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 51 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 52 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 53 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 54 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 55 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 56 | THE SOFTWARE. -------------------------------------------------------------------------------- /src/borders.js: -------------------------------------------------------------------------------- 1 | import { borderRadius, borderTopRadius, borderRightRadius, borderBottomRadius, borderLeftRadius } from '@bootstrap-styled/css-mixins/lib/border-radius'; 2 | 3 | export const defaultProps = { 4 | '$border-radius': '.25rem', 5 | '$enable-rounded': true, 6 | }; 7 | 8 | export function getBordersUtilities(enableRounded = defaultProps['$enable-rounded'], radius = defaultProps['$border-radius']) { 9 | return ` 10 | ${rounded(enableRounded, radius)} 11 | ${roundedTop(enableRounded, radius)} 12 | ${roundedRight(enableRounded, radius)} 13 | ${roundedBottom(enableRounded, radius)} 14 | ${roundedLeft(enableRounded, radius)} 15 | ${roundedCircle()} 16 | ${resetRounded()} 17 | ${resetRoundedTop()} 18 | ${resetRoundedRight()} 19 | ${resetRoundedLeft()} 20 | ${resetRoundedBottom()} 21 | ${resetBorder()} 22 | ${resetBorderTop()} 23 | ${resetBorderRight()} 24 | ${resetBorderLeft()} 25 | ${resetBorderBottom()} 26 | `; 27 | } 28 | 29 | export function rounded(enableRounded = defaultProps['$enable-rounded'], radius = defaultProps['$border-radius']) { 30 | return ` 31 | .rounded { 32 | ${borderRadius(enableRounded, radius)} 33 | } 34 | `; 35 | } 36 | 37 | export function roundedTop(enableRounded = defaultProps['$enable-rounded'], radius = defaultProps['$border-radius']) { 38 | return ` 39 | .rounded-top { 40 | ${borderTopRadius(enableRounded, radius)} 41 | } 42 | `; 43 | } 44 | 45 | export function roundedRight(enableRounded = defaultProps['$enable-rounded'], radius = defaultProps['$border-radius']) { 46 | return ` 47 | .rounded-right { 48 | ${borderRightRadius(enableRounded, radius)} 49 | } 50 | `; 51 | } 52 | 53 | export function roundedBottom(enableRounded = defaultProps['$enable-rounded'], radius = defaultProps['$border-radius']) { 54 | return ` 55 | .rounded-bottom { 56 | ${borderBottomRadius(enableRounded, radius)} 57 | } 58 | `; 59 | } 60 | 61 | export function roundedLeft(enableRounded = defaultProps['$enable-rounded'], radius = defaultProps['$border-radius']) { 62 | return ` 63 | .rounded-left { 64 | ${borderLeftRadius(enableRounded, radius)} 65 | } 66 | `; 67 | } 68 | 69 | export function roundedCircle() { 70 | return ` 71 | .rounded-circle { 72 | border-radius: 50%; 73 | } 74 | `; 75 | } 76 | 77 | export function resetBorder() { 78 | return ` 79 | .border-0 { 80 | border: 0 !important; 81 | } 82 | `; 83 | } 84 | 85 | export function resetBorderTop() { 86 | return ` 87 | .border-top-0 { 88 | border-top: 0 !important; 89 | } 90 | `; 91 | } 92 | 93 | export function resetBorderRight() { 94 | return ` 95 | .border-right-0 { 96 | border-right: 0 !important; 97 | } 98 | `; 99 | } 100 | 101 | 102 | export function resetBorderBottom() { 103 | return ` 104 | .border-bottom-0 { 105 | border-bottom: 0 !important; 106 | } 107 | `; 108 | } 109 | 110 | export function resetBorderLeft() { 111 | return ` 112 | .border-left-0 { 113 | border-left: 0 !important; 114 | } 115 | `; 116 | } 117 | 118 | export function resetRounded() { 119 | return ` 120 | .rounded-0 { 121 | border-radius: 0 !important; 122 | } 123 | `; 124 | } 125 | 126 | export function resetRoundedTop() { 127 | return ` 128 | .rounded-top-0 { 129 | border-top-left-radius: 0 !important; 130 | border-top-right-radius: 0 !important; 131 | } 132 | `; 133 | } 134 | 135 | export function resetRoundedBottom() { 136 | return ` 137 | .rounded-bottom-0 { 138 | border-bottom-left-radius: 0 !important; 139 | border-bottom-right-radius: 0 !important; 140 | } 141 | `; 142 | } 143 | 144 | export function resetRoundedLeft() { 145 | return ` 146 | .rounded-left-0 { 147 | border-bottom-left-radius: 0 !important; 148 | border-top-left-radius: 0 !important; 149 | } 150 | `; 151 | } 152 | 153 | export function resetRoundedRight() { 154 | return ` 155 | .rounded-right-0 { 156 | border-bottom-right-radius: 0 !important; 157 | border-top-right-radius: 0 !important; 158 | } 159 | `; 160 | } 161 | export default { 162 | defaultProps, 163 | getBordersUtilities, 164 | rounded, 165 | roundedTop, 166 | roundedRight, 167 | roundedBottom, 168 | roundedLeft, 169 | roundedCircle, 170 | }; 171 | -------------------------------------------------------------------------------- /src/reboot.js: -------------------------------------------------------------------------------- 1 | export const defaultProps = { 2 | '$font-family-base': '-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif', 3 | '$font-size-base': '1rem', 4 | '$font-weight-base': '1.5', 5 | '$line-height-base': '1.5', 6 | '$body-color': '#292b2c', 7 | '$body-bg': '#fff', 8 | }; 9 | 10 | /** 11 | * getRebootUtility 12 | * 13 | * This utility MUST return only things that can ONLY be injected in global styles 14 | */ 15 | 16 | export function getGlobalStyles() { 17 | return ` 18 | html { 19 | ${html()} 20 | } 21 | *, 22 | *::before, 23 | *::after { 24 | ${boxSizing()} 25 | } 26 | @-ms-viewport { 27 | ${ie10FixViewport()} 28 | } 29 | body { 30 | ${bodyUtils()} 31 | } 32 | `; 33 | } 34 | 35 | export function getGlobalStyleNoBootstrapProvider( 36 | fontFamilyBase = defaultProps['$font-family-base'], 37 | fontSizeBase = defaultProps['$font-size-base'], 38 | fontWeightBase = defaultProps['$font-weight-base'], 39 | lineHeightBase = defaultProps['$line-height-base'], 40 | bodyColor = defaultProps['$body-color'], 41 | bodyBg = defaultProps['$body-bg'], 42 | ) { 43 | return ` 44 | ${getGlobalStyles()} 45 | body { 46 | ${body( 47 | fontFamilyBase, 48 | fontSizeBase, 49 | fontWeightBase, 50 | lineHeightBase, 51 | bodyColor, 52 | bodyBg, 53 | )} 54 | }`; 55 | } 56 | 57 | // Document 58 | // 59 | // 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`. 60 | // 2. Change the default font family in all browsers. 61 | // 3. Correct the line height in all browsers. 62 | // 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. 63 | // 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so 64 | // we force a non-overlapping, non-auto-hiding scrollbar to counteract. 65 | // 6. Change the default tap highlight to be completely transparent in iOS. 66 | export function html() { 67 | return ` 68 | box-sizing: border-box; 69 | font-family: sans-serif; 70 | line-height: 1.15; 71 | -ms-text-size-adjust: 100%; 72 | -webkit-text-size-adjust: 100%; 73 | -ms-overflow-style: scrollbar; 74 | -webkit-tap-highlight-color: rgba(0,0,0,0); 75 | `; 76 | } 77 | 78 | export function boxSizing() { 79 | return ` 80 | box-sizing: inherit; 81 | `; 82 | } 83 | 84 | // IE10+ doesn't honor `` in some cases. 85 | export function ie10FixViewport() { 86 | return ` 87 | width: device-width; 88 | `; 89 | } 90 | 91 | // Body 92 | // 93 | // 1. Remove the margin in all browsers. 94 | // 2. As a best practice, apply a default `background-color`. 95 | export function body( 96 | fontFamilyBase = defaultProps['$font-family-base'], 97 | fontSizeBase = defaultProps['$font-size-base'], 98 | fontWeightBase = defaultProps['$font-weight-base'], 99 | lineHeightBase = defaultProps['$line-height-base'], 100 | bodyColor = defaultProps['$body-color'], 101 | bodyBg = defaultProps['$body-bg'], 102 | ) { 103 | return ` 104 | margin: 0; 105 | font-family: ${fontFamilyBase}; 106 | font-size: ${fontSizeBase}; 107 | font-weight: ${fontWeightBase}; 108 | line-height: ${lineHeightBase}; 109 | color: ${bodyColor}; 110 | background-color: ${bodyBg}; 111 | 112 | ${bodyUtils()} 113 | 114 | [tabindex="-1"]:focus { 115 | ${tabIndex()} 116 | } 117 | svg:not(:root) { 118 | ${svg()} 119 | } 120 | [hidden] { 121 | ${ie10FixHidden()} 122 | } 123 | ::-webkit-file-upload-button { 124 | ${webkitFileUploadButton()} 125 | } 126 | `; 127 | } 128 | 129 | export function bodyUtils() { 130 | return ` 131 | &.overflow { 132 | overflow: hidden; 133 | } 134 | `; 135 | } 136 | 137 | // Suppress the focus outline on elements that cannot be accessed via keyboard. 138 | // This prevents an unwanted focus outline from appearing around elements that 139 | // might still respond to pointer events. 140 | // 141 | // Credit: https://github.com/suitcss/base 142 | export function tabIndex() { 143 | return ` 144 | outline: none !important; 145 | `; 146 | } 147 | 148 | // Hide the overflow in IE 149 | export function svg() { 150 | return ` 151 | overflow: hidden; 152 | `; 153 | } 154 | 155 | // Always hide an element with the `hidden` HTML attribute (from PureCSS). 156 | // Needed for proper display in IE 10-. 157 | export function ie10FixHidden() { 158 | return ` 159 | display: none !important; 160 | `; 161 | } 162 | 163 | export function webkitFileUploadButton() { 164 | return ` 165 | font: inherit; 166 | -webkit-appearance: button; 167 | `; 168 | } 169 | 170 | export default { 171 | html, 172 | boxSizing, 173 | ie10FixViewport, 174 | body, 175 | bodyUtils, 176 | tabIndex, 177 | svg, 178 | ie10FixHidden, 179 | getGlobalStyles, 180 | getGlobalStyleNoBootstrapProvider, 181 | webkitFileUploadButton, 182 | }; 183 | -------------------------------------------------------------------------------- /src/tests/borders.test.js: -------------------------------------------------------------------------------- 1 | import { fromJS } from 'immutable'; 2 | import { 3 | defaultProps, 4 | getBordersUtilities, 5 | rounded, 6 | roundedBottom, 7 | roundedCircle, 8 | roundedLeft, 9 | roundedRight, 10 | roundedTop, 11 | resetBorder, 12 | resetBorderTop, 13 | resetBorderRight, 14 | resetBorderBottom, 15 | resetBorderLeft, 16 | resetRounded, 17 | resetRoundedTop, 18 | resetRoundedRight, 19 | resetRoundedBottom, 20 | resetRoundedLeft, 21 | } from '../borders'; 22 | 23 | describe('bootstrap borders utility', () => { 24 | it('getBordersUtilities should return a list of css utilities with rounded', () => { 25 | const css = getBordersUtilities(defaultProps['$enable-rounded'], defaultProps['$border-radius']); 26 | expect(css).not.toContain('undefined'); 27 | expect(css).not.toContain('null'); 28 | expect(fromJS({ css }).hashCode()).toEqual(381084790); 29 | }); 30 | it('getBordersUtilities should return a list of css utilities without rounded', () => { 31 | const css = getBordersUtilities(!defaultProps['$enable-rounded'], defaultProps['$border-radius']); 32 | expect(css).not.toContain('undefined'); 33 | expect(css).not.toContain('null'); 34 | expect(fromJS({ css }).hashCode()).toEqual(521233947); 35 | }); 36 | it('getBordersUtilities should have arguments', () => { 37 | const css = getBordersUtilities(); 38 | expect(fromJS({ css }).hashCode()).toEqual(381084790); 39 | }); 40 | it('rounded should return a css with rounded', () => { 41 | const css = rounded(defaultProps['$enable-rounded'], defaultProps['$border-radius']); 42 | expect(css).not.toContain('undefined'); 43 | expect(css).not.toContain('null'); 44 | expect(fromJS({ css }).hashCode()).toEqual(-919223289); 45 | }); 46 | it('rounded should return a css without rounded', () => { 47 | const css = rounded(!defaultProps['$enable-rounded'], defaultProps['$border-radius']); 48 | expect(css).not.toContain('undefined'); 49 | expect(css).not.toContain('null'); 50 | expect(fromJS({ css }).hashCode()).toEqual(101513786); 51 | }); 52 | it('rounded should have arguments', () => { 53 | const css = rounded(); 54 | expect(fromJS({ css }).hashCode()).toEqual(-919223289); 55 | }); 56 | it('roundedBottom should return a css with rounded', () => { 57 | const css = roundedBottom(defaultProps['$enable-rounded'], defaultProps['$border-radius']); 58 | expect(css).not.toContain('undefined'); 59 | expect(css).not.toContain('null'); 60 | expect(fromJS({ css }).hashCode()).toEqual(822841448); 61 | }); 62 | it('roundedBottom should return a css without rounded', () => { 63 | const css = roundedBottom(!defaultProps['$enable-rounded'], defaultProps['$border-radius']); 64 | expect(css).not.toContain('undefined'); 65 | expect(css).not.toContain('null'); 66 | expect(fromJS({ css }).hashCode()).toEqual(-770947480); 67 | }); 68 | it('roundedBottom should have arguments', () => { 69 | const css = roundedBottom(); 70 | expect(fromJS({ css }).hashCode()).toEqual(822841448); 71 | }); 72 | it('roundedCircle should have arguments', () => { 73 | const css = roundedCircle(); 74 | expect(fromJS({ css }).hashCode()).toEqual(-532555416); 75 | }); 76 | it('roundedLeft should return a css with rounded', () => { 77 | const css = roundedLeft(defaultProps['$enable-rounded'], defaultProps['$border-radius']); 78 | expect(css).not.toContain('undefined'); 79 | expect(css).not.toContain('null'); 80 | expect(fromJS({ css }).hashCode()).toEqual(9903745); 81 | }); 82 | it('roundedLeft should return a css without rounded', () => { 83 | const css = roundedLeft(!defaultProps['$enable-rounded'], defaultProps['$border-radius']); 84 | expect(css).not.toContain('undefined'); 85 | expect(css).not.toContain('null'); 86 | expect(fromJS({ css }).hashCode()).toEqual(389482313); 87 | }); 88 | it('roundedLeft should have arguments', () => { 89 | const css = roundedLeft(); 90 | expect(fromJS({ css }).hashCode()).toEqual(9903745); 91 | }); 92 | it('roundedRight should return a css with rounded', () => { 93 | const css = roundedRight(defaultProps['$enable-rounded'], defaultProps['$border-radius']); 94 | expect(css).not.toContain('undefined'); 95 | expect(css).not.toContain('null'); 96 | expect(fromJS({ css }).hashCode()).toEqual(1051039386); 97 | }); 98 | it('roundedRight should return a css without rounded', () => { 99 | const css = roundedRight(!defaultProps['$enable-rounded'], defaultProps['$border-radius']); 100 | expect(css).not.toContain('undefined'); 101 | expect(css).not.toContain('null'); 102 | expect(fromJS({ css }).hashCode()).toEqual(-1062625927); 103 | }); 104 | it('roundedRight should have arguments', () => { 105 | const css = roundedRight(); 106 | expect(fromJS({ css }).hashCode()).toEqual(1051039386); 107 | }); 108 | it('roundedTop should return a css with rounded', () => { 109 | const css = roundedTop(defaultProps['$enable-rounded'], defaultProps['$border-radius']); 110 | expect(css).not.toContain('undefined'); 111 | expect(css).not.toContain('null'); 112 | expect(fromJS({ css }).hashCode()).toEqual(562932405); 113 | }); 114 | it('roundedTop should return a css without rounded', () => { 115 | const css = roundedTop(!defaultProps['$enable-rounded'], defaultProps['$border-radius']); 116 | expect(css).not.toContain('undefined'); 117 | expect(css).not.toContain('null'); 118 | expect(fromJS({ css }).hashCode()).toEqual(-791518777); 119 | }); 120 | it('roundedTop should have arguments', () => { 121 | const css = roundedTop(); 122 | expect(fromJS({ css }).hashCode()).toEqual(562932405); 123 | }); 124 | it('roundedCircle should return an utility', () => { 125 | const css = roundedCircle(); 126 | expect(fromJS({ css }).hashCode()).toEqual(-532555416); 127 | }); 128 | it('resetBorder should return an utility', () => { 129 | const css = resetBorder(); 130 | expect(fromJS({ css }).hashCode()).toEqual(-362746140); 131 | }); 132 | it('resetBorderTop should return an utility', () => { 133 | const css = resetBorderTop(); 134 | expect(fromJS({ css }).hashCode()).toEqual(-397720654); 135 | }); 136 | it('resetBorderRight should return an utility', () => { 137 | const css = resetBorderRight(); 138 | expect(fromJS({ css }).hashCode()).toEqual(-1042110320); 139 | }); 140 | it('resetBorderBottom should return an utility', () => { 141 | const css = resetBorderBottom(); 142 | expect(fromJS({ css }).hashCode()).toEqual(712395519); 143 | }); 144 | it('resetBorderLeft should return an utility', () => { 145 | const css = resetBorderLeft(); 146 | expect(fromJS({ css }).hashCode()).toEqual(514409208); 147 | }); 148 | it('resetRounded should return an utility', () => { 149 | const css = resetRounded(); 150 | expect(fromJS({ css }).hashCode()).toEqual(-204501487); 151 | }); 152 | it('resetRoundedTop should return an utility', () => { 153 | const css = resetRoundedTop(); 154 | expect(fromJS({ css }).hashCode()).toEqual(47750857); 155 | }); 156 | it('resetRoundedRight should return an utility', () => { 157 | const css = resetRoundedRight(); 158 | expect(fromJS({ css }).hashCode()).toEqual(-166463815); 159 | }); 160 | it('resetRoundedBottom should return an utility', () => { 161 | const css = resetRoundedBottom(); 162 | expect(fromJS({ css }).hashCode()).toEqual(-626233766); 163 | }); 164 | it('resetRoundedLeft should return an utility', () => { 165 | const css = resetRoundedLeft(); 166 | expect(fromJS({ css }).hashCode()).toEqual(713920736); 167 | }); 168 | }); 169 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@bootstrap-styled/css-utils", 3 | "version": "1.4.1", 4 | "description": "Bootstrap mixins and utilities in javascript for bootstrap-styled.", 5 | "main": "lib/index.js", 6 | "jsnext:main": "dist/@bootstrap-styled/css-utils.es.js", 7 | "module": "dist/@bootstrap-styled/css-utils.es.js", 8 | "homepage": "https://bootstrap-styled.github.io/css-utils", 9 | "browserslist": [ 10 | "IE >= 9", 11 | "last 2 versions" 12 | ], 13 | "scripts": { 14 | "prebuild": "npm run build:clean", 15 | "build": "npm run build:lib && npm run build:dist", 16 | "prebuild:lib": "rimraf lib/*", 17 | "build:lib": "BABEL_ENV=production babel --out-dir lib src --copy-files", 18 | "prebuild:dist": "rimraf dist/*", 19 | "build:clean": "rimraf lib/* dist/*", 20 | "build:dist:dev": "rollup -c", 21 | "build:dist": "rollup -c --environment PRODUCTION", 22 | "build:readme": "toctoc README.md -w", 23 | "build:dist:watch": "rollup -c --watch", 24 | "build:lib:watch": "npm run build:lib -- --watch", 25 | "test": "npm run lint && npm run test:web", 26 | "test:web": "NODE_ENV=test jest --coverage", 27 | "test:clean": "rimraf ./coverage", 28 | "test:watch": "npm run test -- --watch", 29 | "lint": "eslint src", 30 | "prepublish": "npm run build", 31 | "lint-staged": "lint-staged", 32 | "jsdoc-documentation": "jsdoc-documentation", 33 | "jsdoc": "jsdoc-documentation --file", 34 | "prestyleguide": "npm run jsdoc", 35 | "styleguide": "styleguidist server", 36 | "prestyleguide:build": "npm run jsdoc", 37 | "styleguide:build": "styleguidist build" 38 | }, 39 | "repository": { 40 | "type": "git", 41 | "url": "https://github.com/bootstrap-styled/css-utils.git" 42 | }, 43 | "bugs": { 44 | "url": "https://github.com/bootstrap-styled/css-utils/issues" 45 | }, 46 | "files": [ 47 | "LICENSE.md", 48 | "dist", 49 | "lib", 50 | "src" 51 | ], 52 | "keywords": [ 53 | "bootstrap", 54 | "bootstrap-styled", 55 | "styled", 56 | "styled-components", 57 | "react" 58 | ], 59 | "author": "Dimitri Kopriwa (https://github.com/kopax)", 60 | "contributor": [ 61 | "Alexander Janet ", 62 | "Adrien Gadaud " 63 | ], 64 | "license": "MIT", 65 | "eslintConfig": { 66 | "parser": "babel-eslint", 67 | "extends": "airbnb-base", 68 | "env": { 69 | "browser": true, 70 | "node": true, 71 | "jest": true, 72 | "es6": true 73 | }, 74 | "parserOptions": { 75 | "ecmaVersion": 6, 76 | "sourceType": "module" 77 | }, 78 | "rules": { 79 | "arrow-parens": [ 80 | "error", 81 | "always" 82 | ], 83 | "arrow-body-style": [ 84 | 2, 85 | "as-needed" 86 | ], 87 | "comma-dangle": [ 88 | 2, 89 | "always-multiline" 90 | ], 91 | "import/imports-first": 0, 92 | "import/newline-after-import": 0, 93 | "import/no-dynamic-require": 0, 94 | "import/no-extraneous-dependencies": 0, 95 | "import/no-named-as-default": 0, 96 | "import/no-unresolved": 2, 97 | "import/prefer-default-export": 0, 98 | "indent": [ 99 | 2, 100 | 2, 101 | { 102 | "SwitchCase": 1 103 | } 104 | ], 105 | "max-len": 0, 106 | "newline-per-chained-call": 0, 107 | "no-confusing-arrow": 0, 108 | "no-console": 1, 109 | "no-else-return": 0, 110 | "no-use-before-define": 0, 111 | "object-curly-newline": 0, 112 | "prefer-template": 2, 113 | "class-methods-use-this": 0, 114 | "require-yield": 0 115 | } 116 | }, 117 | "devDependencies": { 118 | "@babel/cli": "^7.8.4", 119 | "@babel/core": "^7.9.6", 120 | "@babel/plugin-external-helpers": "^7.8.3", 121 | "@babel/plugin-proposal-class-properties": "^7.8.3", 122 | "@babel/plugin-proposal-decorators": "^7.8.3", 123 | "@babel/plugin-proposal-json-strings": "^7.8.3", 124 | "@babel/plugin-proposal-object-rest-spread": "^7.9.6", 125 | "@babel/plugin-syntax-dynamic-import": "^7.8.3", 126 | "@babel/plugin-syntax-import-meta": "^7.8.3", 127 | "@babel/plugin-transform-modules-commonjs": "^7.9.6", 128 | "@babel/preset-env": "^7.9.6", 129 | "@bootstrap-styled/documentation": "^2.0.0", 130 | "@rollup-umd/documentation": "^2.1.1", 131 | "@rollup-umd/ncu": "^1.0.9", 132 | "@rollup-umd/rollup": "^1.1.1", 133 | "@semantic-release/changelog": "^5.0.1", 134 | "@semantic-release/git": "^9.0.0", 135 | "@semantic-release/github": "^7.0.5", 136 | "@semantic-release/npm": "^7.0.5", 137 | "babel-eslint": "^10.1.0", 138 | "babel-jest": "^25.5.1", 139 | "babel-loader": "^8.1.0", 140 | "babel-plugin-add-module-exports": "^1.0.2", 141 | "babel-plugin-array-includes": "^2.0.3", 142 | "babel-plugin-dynamic-import-node": "^2.3.3", 143 | "bootstrap-styled": "^2.7.2", 144 | "cz-conventional-changelog": "^3.1.0", 145 | "enzyme": "^3.11.0", 146 | "enzyme-adapter-react-16": "^1.15.2", 147 | "eslint": "^6.8.0", 148 | "eslint-config-airbnb": "^18.1.0", 149 | "eslint-config-airbnb-base": "^14.1.0", 150 | "eslint-plugin-import": "^2.20.2", 151 | "eslint-plugin-jsx-a11y": "^6.2.3", 152 | "eslint-plugin-react": "^7.19.0", 153 | "immutable": "^4.0.0-rc.12", 154 | "jest-cli": "^25.5.4", 155 | "jest-sonar-reporter": "^2.0.0", 156 | "lint-staged": "^10.2.2", 157 | "pre-commit": "^1.2.2", 158 | "react": "^16.13.1", 159 | "react-dom": "^16.13.1", 160 | "rimraf": "^3.0.2", 161 | "semantic-release": "^17.0.7", 162 | "toctoc": "^0.3.2", 163 | "webpack": "^4.43.0" 164 | }, 165 | "jest": { 166 | "roots": [ 167 | "/src/" 168 | ], 169 | "setupFiles": [ 170 | "raf/polyfill" 171 | ], 172 | "testURL": "http://localhost/", 173 | "setupFilesAfterEnv": [ 174 | "/internals/testing/test-bundler.js" 175 | ], 176 | "transformIgnorePatterns": [ 177 | "/node_modules", 178 | "/internals" 179 | ], 180 | "testPathIgnorePatterns": [ 181 | "/dist/", 182 | "/lib/" 183 | ], 184 | "collectCoverageFrom": [ 185 | "src/**/*.{js,jsx}", 186 | "!src/**/*.test.{js,jsx}" 187 | ], 188 | "coverageThreshold": { 189 | "global": { 190 | "statements": 99, 191 | "branches": 91, 192 | "functions": 99, 193 | "lines": 99 194 | } 195 | }, 196 | "moduleDirectories": [ 197 | "node_modules", 198 | "src" 199 | ], 200 | "testRegex": "tests/.*\\.test\\.js$", 201 | "testResultsProcessor": "jest-sonar-reporter" 202 | }, 203 | "jestSonar": { 204 | "reportPath": "reports", 205 | "reportFile": "test-report.xml", 206 | "indent": 2 207 | }, 208 | "lint-staged": { 209 | "*.js": [ 210 | "eslint --fix", 211 | "git add" 212 | ] 213 | }, 214 | "pre-commit": [ 215 | "build:readme" 216 | ], 217 | "dependencies": { 218 | "@bootstrap-styled/css-mixins": "^2.1.2", 219 | "@bootstrap-styled/utils": "^1.8.1" 220 | }, 221 | "publishConfig": { 222 | "registry": "https://registry.npmjs.org", 223 | "tag": "latest", 224 | "access": "public" 225 | }, 226 | "release": { 227 | "branch": "master", 228 | "npmPublish": true, 229 | "verifyConditions": [ 230 | "@semantic-release/changelog", 231 | "@semantic-release/npm", 232 | "@semantic-release/git", 233 | "@semantic-release/github" 234 | ], 235 | "prepare": [ 236 | "@semantic-release/changelog", 237 | "@semantic-release/npm", 238 | { 239 | "path": "@semantic-release/git", 240 | "assets": [ 241 | "package.json", 242 | "src/**", 243 | "CHANGELOG.md", 244 | "README.md", 245 | "LICENSE.md" 246 | ] 247 | } 248 | ], 249 | "publish": [ 250 | "@semantic-release/npm", 251 | { 252 | "path": "@semantic-release/github", 253 | "assets": [ 254 | { 255 | "path": "package.json" 256 | }, 257 | { 258 | "path": "LICENSE.md" 259 | }, 260 | { 261 | "path": "CHANGELOG.md" 262 | }, 263 | { 264 | "path": "README.md" 265 | }, 266 | { 267 | "path": "dist/*.esm.js", 268 | "label": "ES module" 269 | }, 270 | { 271 | "path": "dist/*.esm.js.map", 272 | "label": "ES module source map" 273 | }, 274 | { 275 | "path": "dist/*.min.js", 276 | "label": "UMD compressed" 277 | }, 278 | { 279 | "path": "dist/*.min.js.map", 280 | "label": "UMD compressed source map" 281 | }, 282 | { 283 | "path": "dist/*.cjs.min.js", 284 | "label": "CJS compressed" 285 | }, 286 | { 287 | "path": "dist/*.cjs.min.js.map", 288 | "label": "CJS compressed source map" 289 | }, 290 | { 291 | "path": "lib/*.js", 292 | "label": "CJS folder" 293 | } 294 | ] 295 | } 296 | ] 297 | }, 298 | "config": { 299 | "commitizen": { 300 | "path": "./node_modules/cz-conventional-changelog" 301 | } 302 | } 303 | } 304 | -------------------------------------------------------------------------------- /index.d.ts: -------------------------------------------------------------------------------- 1 | declare module '@bootstrap-styled/css-utils' { 2 | import { unitUtils as unit } from '@bootstrap-styled/utils'; 3 | export { unit }; 4 | 5 | export const alignUtils: { 6 | getAlignUtilities: () => string; 7 | alignBaseline: () => string; 8 | alignTop: () => string; 9 | alignMiddle: () => string; 10 | alignBottom: () => string; 11 | alignTextBottom: () => string; 12 | alignTextTop: () => string; 13 | }; 14 | 15 | export const backgroundUtils: { 16 | defaultProps: { 17 | '$enable-hover-media-query': boolean; 18 | '$brand-primary': string; 19 | '$brand-success': string; 20 | '$brand-info': string; 21 | '$brand-warning': string; 22 | '$brand-danger': string; 23 | '$brand-inverse': string; 24 | '$gray-lightest': string; 25 | }; 26 | getBackgroundUtilities: ( 27 | $enableHoverMediaQuery?: boolean, 28 | $brandPrimary?: string, 29 | $brandSuccess?: string, 30 | $brandInfo?: string, 31 | $brandWarning?: string, 32 | $brandDanger?: string, 33 | $brandInverse?: string, 34 | $grayLightest?: string 35 | ) => string; 36 | bgFaded: (enableHoverMediaQuery: boolean, bgColor?: string) => string; 37 | bgPrimary: (enableHoverMediaQuery: boolean, bgColor?: string) => string; 38 | bgSuccess: (enableHoverMediaQuery: boolean, bgColor?: string) => string; 39 | bgInfo: (enableHoverMediaQuery: boolean, bgColor?: string) => string; 40 | bgWarning: (enableHoverMediaQuery: boolean, bgColor?: string) => string; 41 | bgDanger: (enableHoverMediaQuery: boolean, bgColor?: string) => string; 42 | bgInverse: (enableHoverMediaQuery: boolean, bgColor?: string) => string; 43 | }; 44 | 45 | export const bordersUtils: { 46 | defaultProps: { 47 | '$border-radius': string; 48 | '$enable-rounded': boolean; 49 | }; 50 | getBordersUtilities: (enableRounded?: boolean, radius?: string) => string; 51 | rounded: (enableRounded?: boolean, radius?: string) => string; 52 | roundedTop: (enableRounded?: boolean, radius?: string) => string; 53 | roundedRight: (enableRounded?: boolean, radius?: string) => string; 54 | roundedBottom: (enableRounded?: boolean, radius?: string) => string; 55 | roundedLeft: (enableRounded?: boolean, radius?: string) => string; 56 | roundedCircle: () => string; 57 | }; 58 | 59 | export const clearfixUtils: { 60 | getClearfixUtilities: () => string; 61 | getClearfix: () => string; 62 | }; 63 | 64 | export const cursorUtils: { 65 | getCursorUtilities: () => string; 66 | }; 67 | 68 | export const displayUtils: { 69 | defaultProps: { 70 | '$grid-breakpoints': { 71 | xs: string; 72 | sm: string; 73 | md: string; 74 | lg: string; 75 | xl: string; 76 | }; 77 | }; 78 | getDisplayUtilities: (gridBreakpoints?: { 79 | xs?: string; 80 | sm?: string; 81 | md?: string; 82 | lg?: string; 83 | xl?: string; 84 | }) => string; 85 | }; 86 | 87 | export const flexUtils: { 88 | defaultProps: { 89 | '$grid-breakpoints': { 90 | xs: string; 91 | sm: string; 92 | md: string; 93 | lg: string; 94 | xl: string; 95 | }; 96 | }; 97 | getFlexUtilities: (gridBreakpoints?: { 98 | xs?: string; 99 | sm?: string; 100 | md?: string; 101 | lg?: string; 102 | xl?: string; 103 | }) => string; 104 | }; 105 | 106 | export const floatUtils: { 107 | defaultProps: { 108 | '$grid-breakpoints': { 109 | xs: string; 110 | sm: string; 111 | md: string; 112 | lg: string; 113 | xl: string; 114 | }; 115 | }; 116 | getFloatUtilities: (gridBreakpoints?: { 117 | xs?: string; 118 | sm?: string; 119 | md?: string; 120 | lg?: string; 121 | xl?: string; 122 | }) => string; 123 | }; 124 | 125 | export const positionUtils: { 126 | defaultProps: { 127 | '$zindex-fixed': string; 128 | '$zindex-sticky': string; 129 | }; 130 | getPositionUtilities: ( 131 | zindexFixed?: string, 132 | zindexSticky?: string 133 | ) => string; 134 | fixedTop: (zindexFixed?: string) => string; 135 | fixedBottom: (zindexFixed?: string) => string; 136 | stickTop: (zindexSticky?: string) => string; 137 | }; 138 | 139 | export const rebootUtils: { 140 | html: () => string; 141 | boxSizing: () => string; 142 | ie10FixViewport: () => string; 143 | body: ( 144 | fontFamilyBase?: string, 145 | fontSizeBase?: string, 146 | fontWeightBase?: string, 147 | lineHeightBase?: string, 148 | bodyColor?: string, 149 | bodyBg?: string 150 | ) => string; 151 | bodyUtils: () => string; 152 | tabIndex: () => string; 153 | svg: () => string; 154 | ie10FixHidden: () => string; 155 | getGlobalStyles: () => string; 156 | getGlobalStyleNoBootstrapProvider: ( 157 | fontFamilyBase?: string, 158 | fontSizeBase?: string, 159 | fontWeightBase?: string, 160 | lineHeightBase?: string, 161 | bodyColor?: string, 162 | bodyBg?: string 163 | ) => string; 164 | webkitFileUploadButton: () => string; 165 | }; 166 | 167 | export const getGlobalStyleNoBootstrapProvider: (typeof rebootUtils)['getGlobalStyleNoBootstrapProvider']; 168 | export const getGlobalStyles: (typeof rebootUtils)['getGlobalStyles']; 169 | 170 | export const screenreadersUtils: { 171 | getScreenReadersUtilities: () => string; 172 | }; 173 | 174 | export const sizingUtils: { 175 | defaultProps: { 176 | $sizes: { 177 | 25: string; 178 | 50: string; 179 | 75: string; 180 | 100: string; 181 | }; 182 | }; 183 | getSizingUtilities: (sizes?: { 184 | 25?: string; 185 | 50?: string; 186 | 75?: string; 187 | 100?: string; 188 | }) => string; 189 | }; 190 | 191 | export const spacingUtils: { 192 | defaultProps: { 193 | '$grid-breakpoints': { 194 | xs: string; 195 | sm: string; 196 | md: string; 197 | lg: string; 198 | xl: string; 199 | }; 200 | $spacers: { 201 | 0: { 202 | x: string; 203 | y: string; 204 | }; 205 | 1: { 206 | x: string; 207 | y: string; 208 | }; 209 | 2: { 210 | x: string; 211 | y: string; 212 | }; 213 | 3: { 214 | x: string; 215 | y: string; 216 | }; 217 | 4: { 218 | x: string; 219 | y: string; 220 | }; 221 | 5: { 222 | x: string; 223 | y: string; 224 | }; 225 | }; 226 | }; 227 | getSpacingUtilities: ( 228 | gridBreakpoints?: { 229 | xs?: string; 230 | sm?: string; 231 | md?: string; 232 | lg?: string; 233 | xl?: string; 234 | }, 235 | spacers?: { 236 | 0?: { 237 | x: string; 238 | y: string; 239 | }; 240 | 1?: { 241 | x: string; 242 | y: string; 243 | }; 244 | 2?: { 245 | x: string; 246 | y: string; 247 | }; 248 | 3?: { 249 | x: string; 250 | y: string; 251 | }; 252 | 4?: { 253 | x: string; 254 | y: string; 255 | }; 256 | 5?: { 257 | x: string; 258 | y: string; 259 | }; 260 | } 261 | ) => string; 262 | }; 263 | 264 | export const textUtils: { 265 | defaultProps: { 266 | '$grid-breakpoints': { 267 | xs: string; 268 | sm: string; 269 | md: string; 270 | lg: string; 271 | xl: string; 272 | }; 273 | '$enable-hover-media-query': boolean; 274 | '$font-weight-normal': string; 275 | '$font-weight-bold': string; 276 | '$text-muted': string; 277 | '$brand-primary': string; 278 | '$brand-success': string; 279 | '$brand-info': string; 280 | '$brand-warning': string; 281 | '$brand-danger': string; 282 | '$gray-dark': string; 283 | }; 284 | getTextUtilities: ( 285 | enableHoverMediaQuery?: boolean, 286 | gridBreakpoints?: { 287 | xs?: string; 288 | sm?: string; 289 | md?: string; 290 | lg?: string; 291 | xl?: string; 292 | }, 293 | fontWeightNormal?: string, 294 | fontWeightBold?: string, 295 | textMuted?: string, 296 | brandPrimary?: string, 297 | brandSuccess?: string, 298 | brandInfo?: string, 299 | brandWarning?: string, 300 | brandDanger?: string, 301 | grayDark?: string 302 | ) => string; 303 | }; 304 | 305 | export const transitionUtils: { 306 | defaultProps: { 307 | '$enable-transitions': boolean; 308 | '$transition-fade': string; 309 | '$transition-collapse': string; 310 | }; 311 | getTransitionUtilities: ( 312 | enableTransitions?: boolean, 313 | transitionFade?: string, 314 | transitionCollapse?: string 315 | ) => string; 316 | getReactTransition: ( 317 | enableTransitions: boolean, 318 | transition: string 319 | ) => string; 320 | fade: (enableTransitions?: boolean, transitionFade?: string) => string; 321 | collapse: ( 322 | enableTransitions?: boolean, 323 | transitionCollapse?: string 324 | ) => string; 325 | }; 326 | 327 | export const visibilityUtils: { 328 | getVisibilityUtilities: () => string; 329 | }; 330 | } 331 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## [1.4.1](https://github.com/bootstrap-styled/css-utils/compare/v1.4.0...v1.4.1) (2020-05-04) 2 | 3 | 4 | ### Bug Fixes 5 | 6 | * **dependencies:** upgrade all dependencies ([58460eb](https://github.com/bootstrap-styled/css-utils/commit/58460ebf44c4d50d22d94abad6c0de343477ef1c)) 7 | * **dependencies:** upgrade all dependencies ([524910f](https://github.com/bootstrap-styled/css-utils/commit/524910f9b4159b68df25565519a2298cf0af988e)) 8 | * **dependencies:** upgrade all dependencies ([557f5a0](https://github.com/bootstrap-styled/css-utils/commit/557f5a0501fbc54a241033f783c16c0d91900516)) 9 | * **dependencies:** upgrade all dependencies ([707ee49](https://github.com/bootstrap-styled/css-utils/commit/707ee4901ccc47129922671de3754d0c514b82cc)) 10 | 11 | # [1.4.0](https://github.com/bootstrap-styled/css-utils/compare/v1.3.3...v1.4.0) (2019-12-02) 12 | 13 | 14 | ### Features 15 | 16 | * **utilities:** added utilities api (next version will be breaking change due to removed old utilities) ([52a4c03](https://github.com/bootstrap-styled/css-utils/commit/52a4c0328f40693867e11675921b1fcb48516584)) 17 | 18 | ## [1.3.3](https://github.com/bootstrap-styled/css-utils/compare/v1.3.2...v1.3.3) (2019-09-26) 19 | 20 | 21 | ### Bug Fixes 22 | 23 | * **typescripts:** disable typescript due to https://github.com/bootstrap-styled/bootstrap-styled/issues/83#issuecomment-535666014 ([2a2f200](https://github.com/bootstrap-styled/css-utils/commit/2a2f200)), closes [/github.com/bootstrap-styled/bootstrap-styled/issues/83#issuecomment-535666014](https://github.com//github.com/bootstrap-styled/bootstrap-styled/issues/83/issues/issuecomment-535666014) 24 | 25 | ## [1.3.2](https://github.com/bootstrap-styled/css-utils/compare/v1.3.1...v1.3.2) (2019-09-11) 26 | 27 | 28 | ### Bug Fixes 29 | 30 | * **typescript:** Moved typescript definition at the root of the project ([cff76e2](https://github.com/bootstrap-styled/css-utils/commit/cff76e2)) 31 | 32 | ## [1.3.1](https://github.com/bootstrap-styled/css-utils/compare/v1.3.0...v1.3.1) (2019-09-10) 33 | 34 | 35 | ### Bug Fixes 36 | 37 | * **transition:** collapse can be used as a mixin ([1351a4b](https://github.com/bootstrap-styled/css-utils/commit/1351a4b)) 38 | 39 | # [1.3.0](https://github.com/bootstrap-styled/css-utils/compare/v1.2.7...v1.3.0) (2019-08-04) 40 | 41 | 42 | ### Features 43 | 44 | * **typescript:** added typescript definition ([cae228f](https://github.com/bootstrap-styled/css-utils/commit/cae228f)) 45 | 46 | ## [1.2.7](https://github.com/bootstrap-styled/css-utils/compare/v1.2.6...v1.2.7) (2019-06-17) 47 | 48 | 49 | ### Bug Fixes 50 | 51 | * **dependencies:** upgrade all dependencies ([3ca3600](https://github.com/bootstrap-styled/css-utils/commit/3ca3600)) 52 | 53 | ## [1.2.6](https://github.com/bootstrap-styled/css-utils/compare/v1.2.5...v1.2.6) (2018-12-21) 54 | 55 | 56 | ### Bug Fixes 57 | 58 | * **dependencies:** update all dependencies and fix tests ([1866c99](https://github.com/bootstrap-styled/css-utils/commit/1866c99)) 59 | 60 | ## [1.2.5](https://github.com/bootstrap-styled/css-utils/compare/v1.2.4...v1.2.5) (2018-12-20) 61 | 62 | 63 | ### Bug Fixes 64 | 65 | * **dependencies:** Update [@bootstrap-styled](https://github.com/bootstrap-styled)/css-mixins to v2.0.1 ([ebdecbc](https://github.com/bootstrap-styled/css-utils/commit/ebdecbc)) 66 | 67 | ## [1.2.4](https://github.com/bootstrap-styled/css-utils/compare/v1.2.3...v1.2.4) (2018-12-20) 68 | 69 | 70 | ### Bug Fixes 71 | 72 | * **dependencies:** Update css-mixins to 2.0.0, and all over dependencies to latest ([3964869](https://github.com/bootstrap-styled/css-utils/commit/3964869)) 73 | 74 | ## [1.2.3](https://github.com/bootstrap-styled/css-utils/compare/v1.2.2...v1.2.3) (2018-12-18) 75 | 76 | 77 | ### Bug Fixes 78 | 79 | * **package:** update [@bootstrap-styled](https://github.com/bootstrap-styled)/css-mixins to version 1.3.3 ([edb1884](https://github.com/bootstrap-styled/css-utils/commit/edb1884)) 80 | 81 | ## [1.2.2](https://github.com/bootstrap-styled/css-utils/compare/v1.2.1...v1.2.2) (2018-12-18) 82 | 83 | 84 | ### Bug Fixes 85 | 86 | * **package:** update [@bootstrap-styled](https://github.com/bootstrap-styled)/css-mixins to version 1.3.1 ([b275d6e](https://github.com/bootstrap-styled/css-utils/commit/b275d6e)) 87 | 88 | ## [1.2.1](https://github.com/bootstrap-styled/css-utils/compare/v1.2.0...v1.2.1) (2018-12-16) 89 | 90 | 91 | ### Bug Fixes 92 | 93 | * **greenkeeper:** fix sonar running on greenkeeper test ([6259b08](https://github.com/bootstrap-styled/css-utils/commit/6259b08)) 94 | 95 | # [1.2.0](https://github.com/bootstrap-styled/css-utils/compare/v1.1.4...v1.2.0) (2018-12-16) 96 | 97 | 98 | ### Bug Fixes 99 | 100 | * **rollup:** fix configuration rollup ([0b58d0f](https://github.com/bootstrap-styled/css-utils/commit/0b58d0f)) 101 | 102 | 103 | ### Features 104 | 105 | * **greenkeeper:** added greenkeeper and updated all deps ([67f6e3a](https://github.com/bootstrap-styled/css-utils/commit/67f6e3a)) 106 | 107 | ## [1.1.4](https://github.com/bootstrap-styled/css-utils/compare/v1.1.3...v1.1.4) (2018-12-07) 108 | 109 | 110 | ### Bug Fixes 111 | 112 | * **dependencies:** Update css-mixins to v1.2.0 ([40ac818](https://github.com/bootstrap-styled/css-utils/commit/40ac818)) 113 | * **dependencies:** Upgrade many deps, semantic-release, babel 7, remove useless dependencies utils ([4ed2058](https://github.com/bootstrap-styled/css-utils/commit/4ed2058)) 114 | 115 | ## [1.1.3](https://github.com/bootstrap-styled/css-utils/compare/v1.1.2...v1.1.3) (2018-12-05) 116 | 117 | 118 | ### Bug Fixes 119 | 120 | * **documentation:** added new doc dependencies. ([07a3ebf](https://github.com/bootstrap-styled/css-utils/commit/07a3ebf)) 121 | 122 | ## [1.1.2](https://github.com/bootstrap-styled/css-utils/compare/v1.1.1...v1.1.2) (2018-12-01) 123 | 124 | 125 | ### Bug Fixes 126 | 127 | * **CI:** modified the travis.yml acordingly. ([5c690dd](https://github.com/bootstrap-styled/css-utils/commit/5c690dd)) 128 | 129 | ## [1.1.1](https://github.com/bootstrap-styled/css-utils/compare/v1.1.0...v1.1.1) (2018-11-30) 130 | 131 | 132 | ### Bug Fixes 133 | 134 | * **dependencies:** updated some [@bs](https://github.com/bs)/.. packages. ([d6fdd41](https://github.com/bootstrap-styled/css-utils/commit/d6fdd41)) 135 | * **documentation:** added documentation for all utils. ([67cee21](https://github.com/bootstrap-styled/css-utils/commit/67cee21)) 136 | 137 | # [1.1.0](https://github.com/bootstrap-styled/css-utils/compare/v1.0.2...v1.1.0) (2018-11-14) 138 | 139 | 140 | ### Features 141 | 142 | * **doc:** added documentation and updated some dependencies ([68f5271](https://github.com/bootstrap-styled/css-utils/commit/68f5271)) 143 | * **doc:** merge ([7f1191b](https://github.com/bootstrap-styled/css-utils/commit/7f1191b)) 144 | 145 | ## [1.0.2](https://github.com/bootstrap-styled/css-utils/compare/v1.0.1...v1.0.2) (2018-11-10) 146 | 147 | 148 | ### Bug Fixes 149 | 150 | * **release:** GitHub release https://github.com/bootstrap-styled/css-utils ([c833ec9](https://github.com/bootstrap-styled/css-utils/commit/c833ec9)) 151 | 152 | ## [1.0.1](https://module.kopaxgroup.com/bootstrap-styled/css-utils/compare/v1.0.0...v1.0.1) (2018-11-05) 153 | 154 | 155 | ### Bug Fixes 156 | 157 | * **publish:** set to public ([755e9f0](https://module.kopaxgroup.com/bootstrap-styled/css-utils/commit/755e9f0)) 158 | 159 | # 1.0.0 (2018-10-03) 160 | 161 | 162 | ### Bug Fixes 163 | 164 | * **CI:** fixing ci ([67529ab](https://module.kopaxgroup.com/bootstrap-styled/css-utils/commit/67529ab)) 165 | * **CI:** trying to fix CI ([8f34df2](https://module.kopaxgroup.com/bootstrap-styled/css-utils/commit/8f34df2)) 166 | * **gitlab-ci.yml:** added GIT vaariable ([a3faae6](https://module.kopaxgroup.com/bootstrap-styled/css-utils/commit/a3faae6)) 167 | * **gitlab-ci.yml:** Updated image link. ([4fb39f2](https://module.kopaxgroup.com/bootstrap-styled/css-utils/commit/4fb39f2)) 168 | * **package.json:** adde right utils apockage ([e4bdfea](https://module.kopaxgroup.com/bootstrap-styled/css-utils/commit/e4bdfea)) 169 | * **package.json:** added scope [@bootstrap-styled](https://module.kopaxgroup.com/bootstrap-styled) and renamed [@bootstrap-styled](https://module.kopaxgroup.com/bootstrap-styled)/mixins ([68b4d68](https://module.kopaxgroup.com/bootstrap-styled/css-utils/commit/68b4d68)) 170 | * **package.json:** added scope [@bootstrap-styled](https://module.kopaxgroup.com/bootstrap-styled) and renamed [@bootstrap-styled](https://module.kopaxgroup.com/bootstrap-styled)/mixins ([3d2cd7b](https://module.kopaxgroup.com/bootstrap-styled/css-utils/commit/3d2cd7b)) 171 | * **package.json:** added the right assets to prepare release ([f87d479](https://module.kopaxgroup.com/bootstrap-styled/css-utils/commit/f87d479)) 172 | * **package.json:** removed lintstaged from precommit ([9d9d448](https://module.kopaxgroup.com/bootstrap-styled/css-utils/commit/9d9d448)) 173 | * **README:** typo ([b7a795c](https://module.kopaxgroup.com/bootstrap-styled/css-utils/commit/b7a795c)) 174 | * fixed CI ([ecf8ef0](https://module.kopaxgroup.com/bootstrap-styled/css-utils/commit/ecf8ef0)) 175 | 176 | 177 | ### Features 178 | 179 | * **commitizen:** initialized project as commitizen and added badge in README ([61507c5](https://module.kopaxgroup.com/bootstrap-styled/css-utils/commit/61507c5)) 180 | * **flex:** added justify-content-evenly ([c382535](https://module.kopaxgroup.com/bootstrap-styled/css-utils/commit/c382535)) 181 | 182 | # Changelog 183 | 184 | All notable changes to this project will be documented in this file. 185 | 186 | ## [?NEXT?] - ????-??-?? 187 | 188 | - TODO: write changelog before preparing next tag 189 | 190 | ## [v1.0.4] - 2018-04-16 191 | 192 | - Automatic changelog. 193 | 194 | ## [1.0.2] - 2018-04-12 195 | 196 | - Removed wrong attributed argument to function `getSpacingUtilities` in `utilities/spacing`. 197 | 198 | ## [1.0.1] - 2018-02-19 199 | 200 | - Corrected mistaked in `defaultProps` of mixin `a`. 201 | - Added the `.overflow` class to `body` tag in `globalStyles`. 202 | 203 | ## [1.0.0] - 2017-09-26 204 | 205 | - Downgrade `color` to 1.0.3. 206 | 207 | ## [0.0.5] - 2017-09-25 208 | 209 | - Upgraded `bootstrap-styled-utils` from 0.0.4 to 0.0.6. 210 | 211 | ## [0.0.4] - 2017-09-25 212 | 213 | - Upgraded `bootstrap-styled-utils` from 0.0.2 to 0.0.4. 214 | 215 | ## [0.0.3] - 2017-09-25 216 | 217 | - Removed `math-utils` dependency. 218 | - Upgraded to `bootstrap-styled-utils` from 0.0.1 to 0.0.2. 219 | 220 | ## [0.0.2] - 2017-09-25 221 | 222 | - Added `getTransitionUtilities` to default exports in transition utility. 223 | 224 | ## [0.0.1] - 2017-09-25 225 | 226 | - First release. 227 | -------------------------------------------------------------------------------- /docs/globalUtils/flexbox.md: -------------------------------------------------------------------------------- 1 | ## Usage 2 | 3 | Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. 4 | 5 | 6 | ```js 7 | 8 |
9 |
I’m a flexbox container!
10 |
11 |
12 |
I’m an inline flexbox container!
13 |
14 | 15 | 16 | ``` 17 | 18 | Responsive variations also exist for `.d-flex` and `.d-inline-flex`. 19 | 20 | ```js 21 | 22 |
.d-flex
23 |
.d-inline-flex
24 |
.d-sm-flex
25 |
.d-sm-inline-flex
26 |
.d-md-flex
27 |
.d-md-inline-flex
28 |
.d-lg-flex
29 |
.d-lg-inline-flex
30 |
.d-xl-flex
31 |
.d-xl-inline-flex
32 | 33 | ``` 34 | 35 | ## Direction 36 | 37 | ### Horizontal 38 | 39 | ```js 40 | 41 |
42 | .flex-row 43 |
44 |
45 | .flex-row-reverse 46 |
47 | 48 | ``` 49 | 50 | ### Vertical 51 | 52 | ```js 53 | 54 |
55 | .flex-column 56 |
57 |
58 | .flex-column-reverse 59 |
60 | 61 | ``` 62 | 63 | ### Responsive 64 | 65 | Use like described in Usage. 66 | 67 | ```js static 68 | .flex-row 69 | .flex-row-reverse 70 | .flex-column 71 | .flex-column-reverse 72 | .flex-sm-row 73 | .flex-sm-row-reverse 74 | .flex-sm-column 75 | .flex-sm-column-reverse 76 | .flex-md-row 77 | .flex-md-row-reverse 78 | .flex-md-column 79 | .flex-md-column-reverse 80 | .flex-lg-row 81 | .flex-lg-row-reverse 82 | .flex-lg-column 83 | .flex-lg-column-reverse 84 | .flex-xl-row 85 | .flex-xl-row-reverse 86 | .flex-xl-column 87 | .flex-xl-column-reverse 88 | ``` 89 | 90 | ## Justify-content 91 | 92 | ```js 93 | const styleExample = { border: "1px solid #3F007B"}; 94 | 95 | 96 |
97 |
.justify
98 |
content
99 |
start
100 |
101 |
102 |
.justify
103 |
content
104 |
end
105 |
106 |
107 |
.justify
108 |
content
109 |
center
110 |
111 |
112 |
.justify
113 |
content
114 |
between
115 |
116 |
117 |
.justify
118 |
content
119 |
around
120 |
121 |
122 |
.justify
123 |
content
124 |
evenly
125 |
126 | 127 | ``` 128 | >>> And, like all other flexbox options, you also have access to responsive variations. 129 | 130 | ## Align-items 131 | 132 | ```js 133 | const styleExample = { border: "1px solid #3F007B", height: "50px"}; 134 | const exampleContainer = { height: "150px"}; 135 | 136 | 137 |
138 |
.align
139 |
items
140 |
start
141 |
142 |
143 |
.align
144 |
items
145 |
end
146 |
147 |
148 |
.align
149 |
items
150 |
center
151 |
152 |
153 |
.align
154 |
items
155 |
baseline
156 |
157 |
158 |
.align
159 |
items
160 |
stretch
161 |
162 | 163 | ``` 164 | 165 | >>> And, like all other flexbox options, you also have access to responsive variations. 166 | 167 | ## Align-content 168 | 169 | ```js 170 | const styleExample = { border: "1px solid #3F007B"}; 171 | 172 | 173 |
174 |
.align
175 |
content
176 |
start
177 |
178 |
179 |
.align
180 |
content
181 |
end
182 |
183 |
184 |
.align
185 |
content
186 |
center
187 |
188 |
189 |
.align
190 |
content
191 |
between
192 |
193 |
194 |
.align
195 |
content
196 |
around
197 |
198 |
199 |
.align
200 |
content
201 |
stretch
202 |
203 | 204 | ``` 205 | >>> And, like all other flexbox options, you also have access to responsive variations. 206 | 207 | ## Align-self 208 | 209 | ```js 210 | const styleExample = { border: "1px solid #3F007B", width: "150px"}; 211 | const exampleContainer = { height: "100px"}; 212 | 213 | 214 |
215 |
Flex item
216 |
.align-self-start
217 |
Flex item
218 |
219 |
220 |
Flex item
221 |
.align-self-end
222 |
Flex item
223 |
224 |
225 |
Flex item
226 |
.align-self-center
227 |
Flex item
228 |
229 |
230 |
Flex item
231 |
.align-self-baselinem
232 |
Flex item
233 |
234 |
235 |
Flex item
236 |
.align-self-stretch
237 |
Flex item
238 |
239 |
240 |
Flex item
241 |
.align-self-auto
242 |
Flex item
243 |
244 | 245 | ``` 246 | >>> And, like all other flexbox options, you also have access to responsive variations. 247 | 248 | ## Auto-margins 249 | Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. 250 | 251 | ### With justify-content 252 | 253 | ```js 254 | const styleExample = { border: "1px solid #3F007B", width: "150px"}; 255 | 256 | 257 |
258 |
.mr-auto
259 |
Flex item
260 |
Flex item
261 |
262 | 263 |
264 |
Flex item
265 |
Flex item
266 |
.ml-auto
267 |
268 | 269 | ``` 270 | 271 | ### With align-items 272 | ```js 273 | const styleExample = { border: "1px solid #3F007B", width: "150px"}; 274 | const exampleContainer = { height: "150px"}; 275 | 276 | 277 |
278 |
.mb-auto
279 |
Flex item
280 |
Flex item
281 |
282 | 283 |
284 |
Flex item
285 |
Flex item
286 |
.mt-auto
287 |
288 | 289 | ``` 290 | 291 | ## Wrap 292 | 293 | ```js 294 | const styleExample = { border: "1px solid #3F007B", width: "150px"}; 295 | 296 | 297 |
298 |
Flex item
299 |
Flex item
300 |
Flex item
301 |
Flex item
302 |
Flex item
303 |
Flex item
304 |
Flex item
305 |
Flex item
306 |
Flex item
307 |
Flex item
308 |
309 | 310 | ``` 311 | 312 | ## Nowrap 313 | 314 | ```js 315 | const styleExample = { border: "1px solid #3F007B", width: "150px"}; 316 | 317 | 318 |
319 |
Flex item
320 |
Flex item
321 |
Flex item
322 |
Flex item
323 |
Flex item
324 |
Flex item
325 |
Flex item
326 |
Flex item
327 |
Flex item
328 |
Flex item
329 |
330 | 331 | ``` 332 | 333 | ## Wrap reverse 334 | 335 | ```js 336 | const styleExample = { border: "1px solid #3F007B", width: "150px"}; 337 | 338 | 339 |
340 |
Flex item
341 |
Flex item
342 |
Flex item
343 |
Flex item
344 |
Flex item
345 |
Flex item
346 |
Flex item
347 |
Flex item
348 |
Flex item
349 |
Flex item
350 |
351 | 352 | ``` 353 | >>> And, like all other flexbox options, you also have access to responsive variations. 354 | 355 | ## Order 356 | 357 | ```js 358 | const styleExample = { border: "1px solid #3F007B"}; 359 | 360 | 361 |
362 |
.flex-last
363 |
.flex-unordered
364 |
.flex-first
365 |
366 | 367 | ``` 368 | >>> And, like all other flexbox options, you also have access to responsive variations. 369 | -------------------------------------------------------------------------------- /src/tests/background.test.js: -------------------------------------------------------------------------------- 1 | import { defaultProps, getBackgroundUtilities, bgFaded, bgPrimary, bgSuccess, bgInfo, bgWarning, bgDanger, bgInverse } from '../background'; 2 | 3 | describe('bootstrap background utility', () => { 4 | it('getBackgroundUtilities should return a list of css utilities', () => { 5 | const css = getBackgroundUtilities( 6 | defaultProps['$enable-hover-media-query'], 7 | defaultProps['$brand-primary'], 8 | defaultProps['$brand-success'], 9 | defaultProps['$brand-info'], 10 | defaultProps['$brand-warning'], 11 | defaultProps['$brand-danger'], 12 | defaultProps['$brand-inverse'], 13 | defaultProps['$gray-lightest'], 14 | ); 15 | expect(css).not.toContain('undefined'); 16 | expect(css).not.toContain('null'); 17 | expect(css).toContain('.bg-primary {'); 18 | expect(css).toContain('background-color: #0275d8 !important;'); 19 | expect(css).toContain('a.bg-primary {'); 20 | expect(css).toContain('&:focus,'); 21 | expect(css).toContain('&.focus,'); 22 | expect(css).toContain('&:hover,'); 23 | expect(css).toContain('&.hover {'); 24 | expect(css).toContain('background-color: rgb(2, 94, 173) !important;'); 25 | expect(css).toContain('.bg-success {'); 26 | expect(css).toContain('background-color: #5cb85c !important;'); 27 | expect(css).toContain('a.bg-success {'); 28 | expect(css).toContain('&:focus,'); 29 | expect(css).toContain('&.focus,'); 30 | expect(css).toContain('&:hover,'); 31 | expect(css).toContain('&.hover {'); 32 | expect(css).toContain('background-color: rgb(67, 154, 67) !important;'); 33 | expect(css).toContain('.bg-info {'); 34 | expect(css).toContain('background-color: #5bc0de !important;'); 35 | expect(css).toContain('a.bg-info {'); 36 | expect(css).toContain('&:focus,'); 37 | expect(css).toContain('&.focus,'); 38 | expect(css).toContain('&:hover,'); 39 | expect(css).toContain('&.hover {'); 40 | expect(css).toContain('background-color: rgb(42, 170, 209) !important;'); 41 | expect(css).toContain('.bg-warning {'); 42 | expect(css).toContain('background-color: #f0ad4e !important;'); 43 | expect(css).toContain('a.bg-warning {'); 44 | expect(css).toContain('&:focus,'); 45 | expect(css).toContain('&.focus,'); 46 | expect(css).toContain('&:hover,'); 47 | expect(css).toContain('&.hover {'); 48 | expect(css).toContain('background-color: rgb(235, 146, 20) !important;'); 49 | expect(css).toContain('.bg-danger {'); 50 | expect(css).toContain('background-color: #d9543f !important;'); 51 | expect(css).toContain('a.bg-danger {'); 52 | expect(css).toContain('&:focus,'); 53 | expect(css).toContain('&.focus,'); 54 | expect(css).toContain('&:hover,'); 55 | expect(css).toContain('&.hover {'); 56 | expect(css).toContain('background-color: rgb(187, 58, 37) !important;'); 57 | expect(css).toContain('.bg-inverse {'); 58 | expect(css).toContain('background-color: #373a3c !important;'); 59 | expect(css).toContain('a.bg-inverse {'); 60 | expect(css).toContain('&:focus,'); 61 | expect(css).toContain('&.focus,'); 62 | expect(css).toContain('&:hover,'); 63 | expect(css).toContain('&.hover {'); 64 | expect(css).toContain('background-color: rgb(44, 46, 48) !important;'); 65 | expect(css).toContain('.bg-faded {'); 66 | expect(css).toContain('background-color: #f7f7f9 !important;'); 67 | expect(css).toContain('a.bg-faded {'); 68 | expect(css).toContain('&:focus,'); 69 | expect(css).toContain('&.focus,'); 70 | expect(css).toContain('&:hover,'); 71 | expect(css).toContain('&.hover {'); 72 | expect(css).toContain('background-color: rgb(190, 190, 207) !important;'); 73 | }); 74 | it('getBackgroundUtilities should have arguments', () => { 75 | const css = getBackgroundUtilities(); 76 | expect(css).not.toContain('undefined'); 77 | expect(css).not.toContain('null'); 78 | expect(css).toContain('.bg-primary {'); 79 | expect(css).toContain('background-color: #0275d8 !important;'); 80 | expect(css).toContain('a.bg-primary {'); 81 | expect(css).toContain('&:focus,'); 82 | expect(css).toContain('&.focus,'); 83 | expect(css).toContain('&:hover,'); 84 | expect(css).toContain('&.hover {'); 85 | expect(css).toContain('background-color: rgb(2, 94, 173) !important;'); 86 | expect(css).toContain('.bg-success {'); 87 | expect(css).toContain('background-color: #5cb85c !important;'); 88 | expect(css).toContain('a.bg-success {'); 89 | expect(css).toContain('&:focus,'); 90 | expect(css).toContain('&.focus,'); 91 | expect(css).toContain('&:hover,'); 92 | expect(css).toContain('&.hover {'); 93 | expect(css).toContain('background-color: rgb(67, 154, 67) !important;'); 94 | expect(css).toContain('.bg-info {'); 95 | expect(css).toContain('background-color: #5bc0de !important;'); 96 | expect(css).toContain('a.bg-info {'); 97 | expect(css).toContain('&:focus,'); 98 | expect(css).toContain('&.focus,'); 99 | expect(css).toContain('&:hover,'); 100 | expect(css).toContain('&.hover {'); 101 | expect(css).toContain('background-color: rgb(42, 170, 209) !important;'); 102 | expect(css).toContain('.bg-warning {'); 103 | expect(css).toContain('background-color: #f0ad4e !important;'); 104 | expect(css).toContain('a.bg-warning {'); 105 | expect(css).toContain('&:focus,'); 106 | expect(css).toContain('&.focus,'); 107 | expect(css).toContain('&:hover,'); 108 | expect(css).toContain('&.hover {'); 109 | expect(css).toContain('background-color: rgb(235, 146, 20) !important;'); 110 | expect(css).toContain('.bg-danger {'); 111 | expect(css).toContain('background-color: #d9543f !important;'); 112 | expect(css).toContain('a.bg-danger {'); 113 | expect(css).toContain('&:focus,'); 114 | expect(css).toContain('&.focus,'); 115 | expect(css).toContain('&:hover,'); 116 | expect(css).toContain('&.hover {'); 117 | expect(css).toContain('background-color: rgb(187, 58, 37) !important;'); 118 | expect(css).toContain('.bg-inverse {'); 119 | expect(css).toContain('background-color: #373a3c !important;'); 120 | expect(css).toContain('a.bg-inverse {'); 121 | expect(css).toContain('&:focus,'); 122 | expect(css).toContain('&.focus,'); 123 | expect(css).toContain('&:hover,'); 124 | expect(css).toContain('&.hover {'); 125 | expect(css).toContain('background-color: rgb(44, 46, 48) !important;'); 126 | expect(css).toContain('.bg-faded {'); 127 | expect(css).toContain('background-color: #f7f7f9 !important;'); 128 | expect(css).toContain('a.bg-faded {'); 129 | expect(css).toContain('&:focus,'); 130 | expect(css).toContain('&.focus,'); 131 | expect(css).toContain('&:hover,'); 132 | expect(css).toContain('&.hover {'); 133 | expect(css).toContain('background-color: rgb(190, 190, 207) !important;'); 134 | }); 135 | it('bgFaded should return a css', () => { 136 | const css = bgFaded(defaultProps['$enable-hover-media-query'], defaultProps['$body-bg']); 137 | expect(css).not.toContain('undefined'); 138 | expect(css).not.toContain('null'); 139 | expect(css).toContain('.bg-faded {'); 140 | expect(css).toContain('background-color: #f7f7f9 !important;'); 141 | expect(css).toContain('a.bg-faded {'); 142 | expect(css).toContain('&:focus,'); 143 | expect(css).toContain('&.focus,'); 144 | expect(css).toContain('&:hover,'); 145 | expect(css).toContain('&.hover {'); 146 | expect(css).toContain('background-color: rgb(190, 190, 207) !important;'); 147 | }); 148 | it('bgPrimary should return a css', () => { 149 | const css = bgPrimary(defaultProps['$enable-hover-media-query'], defaultProps['$brand-primary']); 150 | expect(css).not.toContain('undefined'); 151 | expect(css).not.toContain('null'); 152 | expect(css).toContain('.bg-primary {'); 153 | expect(css).toContain('background-color: #0275d8 !important;'); 154 | expect(css).toContain('}'); 155 | expect(css).toContain('a.bg-primary {'); 156 | expect(css).toContain(''); 157 | expect(css).toContain('&:focus,'); 158 | expect(css).toContain('&.focus,'); 159 | expect(css).toContain('&:hover,'); 160 | expect(css).toContain('&.hover {'); 161 | expect(css).toContain('background-color: rgb(2, 94, 173) !important;'); 162 | expect(css).toContain('}'); 163 | }); 164 | it('bgSuccess should return a css', () => { 165 | const css = bgSuccess(defaultProps['$enable-hover-media-query'], defaultProps['$brand-success']); 166 | expect(css).not.toContain('undefined'); 167 | expect(css).not.toContain('null'); 168 | expect(css).toContain('.bg-success {'); 169 | expect(css).toContain('background-color: #5cb85c !important;'); 170 | expect(css).toContain('}'); 171 | expect(css).toContain('a.bg-success {'); 172 | expect(css).toContain(''); 173 | expect(css).toContain('&:focus,'); 174 | expect(css).toContain('&.focus,'); 175 | expect(css).toContain('&:hover,'); 176 | expect(css).toContain('&.hover {'); 177 | expect(css).toContain('background-color: rgb(67, 154, 67) !important;'); 178 | expect(css).toContain('}'); 179 | }); 180 | it('bgInfo should return a css', () => { 181 | const css = bgInfo(defaultProps['$enable-hover-media-query'], defaultProps['$brand-info']); 182 | expect(css).not.toContain('undefined'); 183 | expect(css).not.toContain('null'); 184 | expect(css).toContain('.bg-info {'); 185 | expect(css).toContain('background-color: #5bc0de !important;'); 186 | expect(css).toContain('}'); 187 | expect(css).toContain('a.bg-info {'); 188 | expect(css).toContain(''); 189 | expect(css).toContain('&:focus,'); 190 | expect(css).toContain('&.focus,'); 191 | expect(css).toContain('&:hover,'); 192 | expect(css).toContain('&.hover {'); 193 | expect(css).toContain('background-color: rgb(42, 170, 209) !important;'); 194 | expect(css).toContain('}'); 195 | }); 196 | it('bgWarning should return a css', () => { 197 | const css = bgWarning(defaultProps['$enable-hover-media-query'], defaultProps['$brand-warning']); 198 | expect(css).not.toContain('undefined'); 199 | expect(css).not.toContain('null'); 200 | expect(css).toContain('.bg-warning {'); 201 | expect(css).toContain('background-color: #f0ad4e !important;'); 202 | expect(css).toContain('}'); 203 | expect(css).toContain('a.bg-warning {'); 204 | expect(css).toContain(''); 205 | expect(css).toContain('&:focus,'); 206 | expect(css).toContain('&.focus,'); 207 | expect(css).toContain('&:hover,'); 208 | expect(css).toContain('&.hover {'); 209 | expect(css).toContain('background-color: rgb(235, 146, 20) !important;'); 210 | expect(css).toContain('}'); 211 | }); 212 | it('bgDanger should return a css', () => { 213 | const css = bgDanger(defaultProps['$enable-hover-media-query'], defaultProps['$brand-danger']); 214 | expect(css).not.toContain('undefined'); 215 | expect(css).not.toContain('null'); 216 | expect(css).toContain('.bg-danger {'); 217 | expect(css).toContain('background-color: #d9543f !important;'); 218 | expect(css).toContain('}'); 219 | expect(css).toContain('a.bg-danger {'); 220 | expect(css).toContain(''); 221 | expect(css).toContain('&:focus,'); 222 | expect(css).toContain('&.focus,'); 223 | expect(css).toContain('&:hover,'); 224 | expect(css).toContain('&.hover {'); 225 | expect(css).toContain('background-color: rgb(187, 58, 37) !important;'); 226 | expect(css).toContain('}'); 227 | }); 228 | it('bgInverse should return a css', () => { 229 | const css = bgInverse(defaultProps['$enable-hover-media-query'], defaultProps['$brand-inverse']); 230 | expect(css).not.toContain('undefined'); 231 | expect(css).not.toContain('null'); 232 | expect(css).toContain('.bg-inverse {'); 233 | expect(css).toContain('background-color: #373a3c !important;'); 234 | expect(css).toContain('a.bg-inverse {'); 235 | expect(css).toContain('&:focus,'); 236 | expect(css).toContain('&.focus,'); 237 | expect(css).toContain('&:hover,'); 238 | expect(css).toContain('&.hover {'); 239 | expect(css).toContain('background-color: rgb(44, 46, 48) !important;'); 240 | }); 241 | it('bgFaded should have a parameter', () => { 242 | const css = bgFaded(); 243 | expect(css).not.toContain('undefined'); 244 | expect(css).not.toContain('null'); 245 | expect(css).toContain('.bg-faded {'); 246 | expect(css).toContain('background-color: #f7f7f9 !important;'); 247 | expect(css).toContain('a.bg-faded {'); 248 | expect(css).toContain('&:focus,'); 249 | expect(css).toContain('&.focus,'); 250 | expect(css).toContain('&:hover,'); 251 | expect(css).toContain('&.hover {'); 252 | expect(css).toContain('background-color: rgb(190, 190, 207) !important;'); 253 | }); 254 | it('bgFaded should have a parameter', () => { 255 | const css = bgPrimary(); 256 | expect(css).not.toContain('undefined'); 257 | expect(css).not.toContain('null'); 258 | expect(css).toContain('.bg-primary {'); 259 | expect(css).toContain('background-color: #0275d8 !important;'); 260 | expect(css).toContain('a.bg-primary {'); 261 | expect(css).toContain('&:focus,'); 262 | expect(css).toContain('&.focus,'); 263 | expect(css).toContain('&:hover,'); 264 | expect(css).toContain('&.hover {'); 265 | expect(css).toContain('background-color: rgb(2, 94, 173) !important;'); 266 | }); 267 | it('bgFaded should have a parameter', () => { 268 | const css = bgSuccess(); 269 | expect(css).not.toContain('undefined'); 270 | expect(css).not.toContain('null'); 271 | expect(css).toContain('.bg-success {'); 272 | expect(css).toContain('background-color: #5cb85c !important;'); 273 | expect(css).toContain('a.bg-success {'); 274 | expect(css).toContain('&:focus,'); 275 | expect(css).toContain('&.focus,'); 276 | expect(css).toContain('&:hover,'); 277 | expect(css).toContain('&.hover {'); 278 | expect(css).toContain('background-color: rgb(67, 154, 67) !important;'); 279 | }); 280 | it('bgFaded should have a parameter', () => { 281 | const css = bgInfo(); 282 | expect(css).not.toContain('undefined'); 283 | expect(css).not.toContain('null'); 284 | expect(css).toContain('.bg-info {'); 285 | expect(css).toContain('background-color: #5bc0de !important;'); 286 | expect(css).toContain('a.bg-info {'); 287 | expect(css).toContain('&:focus,'); 288 | expect(css).toContain('&.focus,'); 289 | expect(css).toContain('&:hover,'); 290 | expect(css).toContain('&.hover {'); 291 | expect(css).toContain('background-color: rgb(42, 170, 209) !important;'); 292 | }); 293 | it('bgFaded should have a parameter', () => { 294 | const css = bgWarning(); 295 | expect(css).not.toContain('undefined'); 296 | expect(css).not.toContain('null'); 297 | expect(css).toContain('.bg-warning {'); 298 | expect(css).toContain('background-color: #f0ad4e !important;'); 299 | expect(css).toContain('a.bg-warning {'); 300 | expect(css).toContain('&:focus,'); 301 | expect(css).toContain('&.focus,'); 302 | expect(css).toContain('&:hover,'); 303 | expect(css).toContain('&.hover {'); 304 | expect(css).toContain('background-color: rgb(235, 146, 20) !important;'); 305 | }); 306 | it('bgFaded should have a parameter', () => { 307 | const css = bgDanger(); 308 | expect(css).not.toContain('undefined'); 309 | expect(css).not.toContain('null'); 310 | expect(css).toContain('.bg-danger {'); 311 | expect(css).toContain('background-color: #d9543f !important;'); 312 | expect(css).toContain('a.bg-danger {'); 313 | expect(css).toContain('&:focus,'); 314 | expect(css).toContain('&.focus,'); 315 | expect(css).toContain('&:hover,'); 316 | expect(css).toContain('&.hover {'); 317 | expect(css).toContain('background-color: rgb(187, 58, 37) !important;'); 318 | expect(css).toContain('}'); 319 | }); 320 | it('bgFaded should have a parameter', () => { 321 | const css = bgInverse(); 322 | expect(css).not.toContain('undefined'); 323 | expect(css).not.toContain('null'); 324 | expect(css).toContain('.bg-inverse {'); 325 | expect(css).toContain('background-color: #373a3c !important;'); 326 | expect(css).toContain('a.bg-inverse {'); 327 | expect(css).toContain('&:focus,'); 328 | expect(css).toContain('&.focus,'); 329 | expect(css).toContain('&:hover,'); 330 | expect(css).toContain('&.hover {'); 331 | expect(css).toContain('background-color: rgb(44, 46, 48) !important;'); 332 | }); 333 | }); 334 | -------------------------------------------------------------------------------- /src/utilities.js: -------------------------------------------------------------------------------- 1 | export function getUtilities(theme, utilities = new Map()) { 2 | if (!theme) { 3 | throw new Error('getUtilities expect theme and should be called at the end of your makeTheme.'); 4 | } 5 | const v = theme; 6 | 7 | // we convert object stores in our conf in object into map for sake of generating utilities 8 | const spacersMap = new Map(); 9 | Object.keys(v.$spacers).forEach((key) => spacersMap.set(key, v.$spacers[key])); 10 | const negativeSpacersMap = new Map(); 11 | Object.keys(v['$negative-spacers']).forEach((key) => negativeSpacersMap.set(key, v['$negative-spacers'][key])); 12 | const themeColorsMap = new Map(); 13 | Object.keys(v['$theme-colors']).forEach((key) => themeColorsMap.set(key, v['$theme-colors'][key])); 14 | 15 | return new Map([ 16 | ...new Map([ 17 | ['align', { 18 | property: 'vertical-align', 19 | class: 'align', 20 | values: [ 21 | 'baseline', 22 | 'top', 23 | 'middle', 24 | 'bottom', 25 | 'text-bottom', 26 | 'text-top', 27 | ], 28 | }], 29 | ['float', { 30 | responsive: true, 31 | property: 'float', 32 | values: [ 33 | 'left', 34 | 'right', 35 | 'none', 36 | ], 37 | }], 38 | ['overflow', { 39 | property: 'overflow', 40 | values: ['auto', 'hidden'], 41 | }], 42 | ['display', { 43 | responsive: true, 44 | print: true, 45 | property: 'display', 46 | class: 'd', 47 | values: [ 48 | 'none', 49 | 'inline', 50 | 'inline-block', 51 | 'block', 52 | 'table', 53 | 'table-row', 54 | 'table-cell', 55 | 'flex', 56 | 'inline-flex', 57 | ], 58 | }], 59 | ['shadow', { 60 | property: 'box-shadow', 61 | class: 'shadow', 62 | values: new Map([ 63 | ['sm', v['$box-shadow-sm']], 64 | [null, v['$box-shadow']], 65 | ['lg', v['$box-shadow-lg']], 66 | ['none', 'none'], 67 | ]), 68 | }], 69 | ['position', { 70 | property: 'position', 71 | values: ['static', 'relative', 'absolute', 'fixed', 'sticky'], 72 | }], 73 | ['border', { 74 | property: 'border', 75 | values: new Map([ 76 | [null, `${v['$border-width']} solid ${v['$border-color']}`], 77 | [0, 0], 78 | ]), 79 | }], 80 | ['border-top', { 81 | property: 'border-top', 82 | values: new Map([ 83 | [null, `${v['$border-width']} solid ${v['$border-color']}`], 84 | [0, 0], 85 | ]), 86 | }], 87 | ['border-right', { 88 | property: 'border-right', 89 | values: new Map([ 90 | [null, `${v['$border-width']} solid ${v['$border-color']}`], 91 | [0, 0], 92 | ]), 93 | }], 94 | ['border-bottom', { 95 | property: 'border-bottom', 96 | values: new Map([ 97 | [null, `${v['$border-width']} solid ${v['$border-color']}`], 98 | [0, 0], 99 | ]), 100 | }], 101 | ['border-left', { 102 | property: 'border-left', 103 | values: new Map([ 104 | [null, `${v['$border-width']} solid ${v['$border-color']}`], 105 | [0, 0], 106 | ]), 107 | }], 108 | ['border-color', { 109 | property: 'border-color', 110 | class: 'border', 111 | values: new Map([ 112 | ...themeColorsMap, 113 | ...new Map([['white', v.$white]])]), 114 | }], 115 | // Sizing utilities 116 | ['width', { 117 | property: 'width', 118 | class: 'w', 119 | values: new Map([ 120 | ['25', '25%'], 121 | ['50', '50%'], 122 | ['75', '75%'], 123 | ['100', '100%'], 124 | ['auto', 'auto'], 125 | ]), 126 | }], 127 | ['max-width', { 128 | property: 'max-width', 129 | class: 'mw', 130 | values: new Map([['100', '100%']]), 131 | }], 132 | ['viewport-width', { 133 | property: 'width', 134 | class: 'vw', 135 | values: new Map([['100', '100vw']]), 136 | }], 137 | ['min-viewport-width', { 138 | property: 'min-width', 139 | class: 'min-vw', 140 | values: new Map([['100', '100vw']]), 141 | }], 142 | ['height', { 143 | property: 'height', 144 | class: 'h', 145 | values: new Map([ 146 | ['25', '25%'], 147 | ['50', '50%'], 148 | ['75', '75%'], 149 | ['100', '100%'], 150 | ['auto', 'auto'], 151 | ]), 152 | }], 153 | ['max-height', { 154 | property: 'max-height', 155 | class: 'mh', 156 | values: new Map([['100', '100%']]), 157 | }], 158 | ['viewport-height', { 159 | property: 'height', 160 | class: 'vh', 161 | values: new Map([['100', '100vh']]), 162 | }], 163 | ['min-viewport-height', { 164 | property: 'min-height', 165 | class: 'min-vh', 166 | values: new Map([['100', '100vh']]), 167 | }], 168 | // Flex utilities 169 | ['flex', { 170 | responsive: true, 171 | property: 'flex', 172 | values: new Map([['fill', '1 1 auto']]), 173 | }], 174 | ['flex-direction', { 175 | responsive: true, 176 | property: 'flex-direction', 177 | class: 'flex', 178 | values: [ 179 | 'row', 180 | 'column', 181 | 'row-reverse', 182 | 'column-reverse', 183 | ], 184 | }], 185 | ['flex-grow', { 186 | responsive: true, 187 | property: 'flex-grow', 188 | class: 'flex', 189 | values: new Map([ 190 | ['grow-0', '0'], 191 | ['grow-1', '1'], 192 | ]), 193 | }], 194 | ['flex-shrink', { 195 | responsive: true, 196 | property: 'flex-shrink', 197 | class: 'flex', 198 | values: new Map([ 199 | ['shrink-0', '0'], 200 | ['shrink-1', '1'], 201 | ]), 202 | }], 203 | ['flex-wrap', { 204 | responsive: true, 205 | property: 'flex-wrap', 206 | class: 'flex', 207 | values: [ 208 | 'wrap', 209 | 'nowrap', 210 | 'wrap-reverse', 211 | ], 212 | }], 213 | ['justify-content', { 214 | responsive: true, 215 | property: 'justify-content', 216 | values: new Map([ 217 | ['start', 'flex-start'], 218 | ['end', 'flex-end'], 219 | ['center', 'center'], 220 | ['between', 'space-between'], 221 | ['around', 'space-around'], 222 | ]), 223 | }], 224 | ['align-items', { 225 | responsive: true, 226 | property: 'align-items', 227 | values: new Map([ 228 | ['start', 'flex-start'], 229 | ['end', 'flex-end'], 230 | ['center', 'center'], 231 | ['baseline', 'baseline'], 232 | ['stretch', 'stretch'], 233 | ]), 234 | }], 235 | ['align-content', { 236 | responsive: true, 237 | property: 'align-content', 238 | values: new Map([ 239 | ['start', 'flex-start'], 240 | ['end', 'flex-end'], 241 | ['center', 'center'], 242 | ['between', 'space-between'], 243 | ['around', 'space-around'], 244 | ['stretch', 'stretch'], 245 | ]), 246 | }], 247 | ['align-self', { 248 | responsive: true, 249 | property: 'align-self', 250 | values: new Map([ 251 | ['auto', 'auto'], 252 | ['start', 'flex-start'], 253 | ['end', 'flex-end'], 254 | ['center', 'center'], 255 | ['baseline', 'baseline'], 256 | ['stretch', 'stretch'], 257 | ]), 258 | }], 259 | ['order', { 260 | responsive: true, 261 | property: 'order', 262 | values: new Map([ 263 | ['first', '-1'], 264 | ['0', '0'], 265 | ['1', '1'], 266 | ['2', '2'], 267 | ['3', '3'], 268 | ['4', '4'], 269 | ['5', '5'], 270 | ['last', '6'], 271 | ]), 272 | }], 273 | // Margin utilities 274 | ['margin', { 275 | responsive: true, 276 | property: 'margin', 277 | class: 'm', 278 | values: new Map([ 279 | ...spacersMap, 280 | ...new Map([['auto', 'auto']]), 281 | ]), 282 | }], 283 | ['margin-x', { 284 | responsive: true, 285 | property: ['margin-right', 'margin-left'], 286 | class: 'mx', 287 | values: new Map([ 288 | ...spacersMap, 289 | ...new Map([['auto', 'auto']]), 290 | ]), 291 | }], 292 | ['margin-y', { 293 | responsive: true, 294 | property: ['margin-top', 'margin-bottom'], 295 | class: 'my', 296 | values: new Map([ 297 | ...spacersMap, 298 | ...new Map([['auto', 'auto']]), 299 | ]), 300 | }], 301 | ['margin-top', { 302 | responsive: true, 303 | property: 'margin-top', 304 | class: 'mt', 305 | values: new Map([ 306 | ...spacersMap, 307 | ...new Map([['auto', 'auto']]), 308 | ]), 309 | }], 310 | ['margin-right', { 311 | responsive: true, 312 | property: 'margin-right', 313 | class: 'mr', 314 | values: new Map([ 315 | ...spacersMap, 316 | ...new Map([['auto', 'auto']]), 317 | ]), 318 | }], 319 | ['margin-bottom', { 320 | responsive: true, 321 | property: 'margin-bottom', 322 | class: 'mb', 323 | values: new Map([ 324 | ...spacersMap, 325 | ...new Map([['auto', 'auto']]), 326 | ]), 327 | }], 328 | ['margin-left', { 329 | responsive: true, 330 | property: 'margin-left', 331 | class: 'ml', 332 | values: new Map([ 333 | ...spacersMap, 334 | ...new Map([['auto', 'auto']]), 335 | ]), 336 | }], 337 | // Negative margin utilities 338 | ['negative-margin', { 339 | responsive: true, 340 | property: 'margin', 341 | class: 'm', 342 | values: negativeSpacersMap, 343 | }], 344 | ['negative-margin-x', { 345 | responsive: true, 346 | property: ['margin-right', 'margin-left'], 347 | class: 'mx', 348 | values: negativeSpacersMap, 349 | }], 350 | ['negative-margin-y', { 351 | responsive: true, 352 | property: ['margin-top', 'margin-bottom'], 353 | class: 'my', 354 | values: negativeSpacersMap, 355 | }], 356 | ['negative-margin-top', { 357 | responsive: true, 358 | property: ['margin-top'], 359 | class: 'mt', 360 | values: negativeSpacersMap, 361 | }], 362 | ['negative-margin-right', { 363 | responsive: true, 364 | property: 'margin-right', 365 | class: 'mr', 366 | values: negativeSpacersMap, 367 | }], 368 | ['negative-margin-bottom', { 369 | responsive: true, 370 | property: 'margin-bottom', 371 | class: 'mb', 372 | values: negativeSpacersMap, 373 | }], 374 | ['negative-margin-left', { 375 | responsive: true, 376 | property: 'margin-left', 377 | class: 'ml', 378 | values: negativeSpacersMap, 379 | }], 380 | // Padding utilities 381 | ['padding', { 382 | responsive: true, 383 | property: 'padding', 384 | class: 'p', 385 | values: spacersMap, 386 | }], 387 | ['padding-x', { 388 | responsive: true, 389 | property: ['padding-right', 'padding-left'], 390 | class: 'px', 391 | values: spacersMap, 392 | }], 393 | ['padding-y', { 394 | responsive: true, 395 | property: ['padding-top', 'padding-bottom'], 396 | class: 'py', 397 | values: spacersMap, 398 | }], 399 | ['padding-top', { 400 | responsive: true, 401 | property: 'padding-top', 402 | class: 'pt', 403 | values: spacersMap, 404 | }], 405 | ['padding-right', { 406 | responsive: true, 407 | property: 'padding-right', 408 | class: 'pr', 409 | values: spacersMap, 410 | }], 411 | ['padding-bottom', { 412 | responsive: true, 413 | property: 'padding-bottom', 414 | class: 'pb', 415 | values: spacersMap, 416 | }], 417 | ['padding-left', { 418 | responsive: true, 419 | property: 'padding-left', 420 | class: 'pl', 421 | values: spacersMap, 422 | }], 423 | // Text 424 | ['font-weight', { 425 | property: 'font-weight', 426 | values: new Map([ 427 | ['light', v['$font-weight-light']], 428 | ['lighter', v['$font-weight-lighter']], 429 | ['normal', v['$font-weight-normal']], 430 | ['bold', v['$font-weight-bold']], 431 | ['bolder', v['$font-weight-bolder']], 432 | ]), 433 | }], 434 | ['text-transform', { 435 | property: 'text-transform', 436 | class: 'text', 437 | values: ['lowercase', 'uppercase', 'capitalize'], 438 | }], 439 | ['text-align', { 440 | responsive: true, 441 | property: 'text-align', 442 | class: 'text', 443 | values: ['left', 'right', 'center', 'justify'], 444 | }], 445 | ['color', { 446 | property: 'color', 447 | class: 'text', 448 | values: new Map([ 449 | ...themeColorsMap, 450 | ...new Map([ 451 | ['white', v.$white], 452 | ['body', v['$body-color']], 453 | ['muted', v['$text-muted']], 454 | ['black-50', `rgba(${v.$black}, .5)`], 455 | ['white-50', `rgba(${v.$white}, .5)`], 456 | ['reset', 'inherit'], 457 | ]), 458 | ]), 459 | }], 460 | ['line-height', { 461 | property: 'line-height', 462 | class: 'lh', 463 | values: new Map([ 464 | ['1', '1'], 465 | ['sm', v['$line-height-sm']], 466 | ['base', v['$line-height-base']], 467 | ['lg', v['$line-height-lg']], 468 | ]), 469 | }], 470 | ['background-color', { 471 | property: 'background-color', 472 | class: 'bg', 473 | values: new Map([ 474 | ...themeColorsMap, 475 | ...new Map([ 476 | ['body', v['$body-bg']], 477 | ['white', v.$white], 478 | ['transparent', 'transparent'], 479 | ]), 480 | ]), 481 | }], 482 | ['white-space', { 483 | property: 'white-space', 484 | class: 'text', 485 | values: new Map([ 486 | ['wrap', 'normal'], 487 | ['nowrap', 'nowrap'], 488 | ]), 489 | }], 490 | ['text-decoration', { 491 | property: 'text-decoration', 492 | values: ['none', 'underline', 'line-through'], 493 | }], 494 | ['font-style', { 495 | property: 'font-style', 496 | class: 'font', 497 | values: ['italic'], 498 | }], 499 | ['overflow-wrap', { 500 | property: ['overflow-wrap', 'word-break'], // word-break for IE & < Edge 18 501 | class: 'text', 502 | values: new Map([['break', 'break-word']]), 503 | }], 504 | ['font-family', { 505 | property: 'font-family', 506 | class: 'font', 507 | values: new Map([ 508 | ['monospace', v['$font-family-monospace']], 509 | ]), 510 | }], 511 | ['rounded', { 512 | property: 'border-radius', 513 | class: 'rounded', 514 | values: new Map([ 515 | [null, v['$border-radius']], 516 | ['sm', v['$border-radius-sm']], 517 | ['lg', v['$border-radius-lg']], 518 | ['circle', '50%'], 519 | ['pill', v['$rounded-pill']], 520 | ['0', '0'], 521 | ]), 522 | }], 523 | ['rounded-top', { 524 | property: ['border-top-left-radius', 'border-top-right-radius'], 525 | class: 'rounded-top', 526 | values: new Map([[null, v['$border-radius']]]), 527 | }], 528 | ['rounded-right', { 529 | property: ['border-top-right-radius', 'border-bottom-right-radius'], 530 | class: 'rounded-right', 531 | values: new Map([[null, v['$border-radius']]]), 532 | }], 533 | ['rounded-bottom', { 534 | property: ['border-bottom-right-radius', 'border-bottom-left-radius'], 535 | class: 'rounded-bottom', 536 | values: new Map([[null, v['$border-radius']]]), 537 | }], 538 | ['rounded-left', { 539 | property: ['border-bottom-left-radius', 'border-top-left-radius'], 540 | class: 'rounded-left', 541 | values: new Map([[null, v['$border-radius']]]), 542 | }], 543 | ['visibility', { 544 | property: 'visibility', 545 | class: null, 546 | values: new Map([ 547 | ['visible', 'visible'], 548 | ['invisible', 'hidden'], 549 | ]), 550 | }], 551 | ]), 552 | ...utilities, 553 | ]); 554 | } 555 | --------------------------------------------------------------------------------