{"_id":"@aybolit/bootstrap","_rev":"1-31782db39de4942fff13e4c84de88004","name":"@aybolit/bootstrap","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@aybolit/bootstrap","version":"0.1.0","author":{"name":"Serhii Kulykov","email":"serguey.kulikov@gmail.com"},"license":"MIT","main":"src/index.js","publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/web-padawan/aybolit.git","directory":"packages/bootstrap"},"dependencies":{"@aybolit/core":"^0.1.0","lit-element":"^2.0.1"},"devDependencies":{"@pika/pack":"^0.3.0","@pika/plugin-build-web":"^0.3.0","@pika/plugin-bundle-web":"^0.3.0","@pika/plugin-standard-pkg":"^0.3.0"},"@pika/pack":{"pipeline":[["@pika/plugin-standard-pkg"],["@pika/plugin-build-web"],["@pika/plugin-bundle-web"]]},"scripts":{"dist":"pack build"},"gitHead":"991361f6365fce4319f736521597067d3714b28e","description":"Aybolit Bootstrap is a set of the web components inspired by [Bootstrap](https://getbootstrap.com) framework.","bugs":{"url":"https://github.com/web-padawan/aybolit/issues"},"homepage":"https://github.com/web-padawan/aybolit#readme","_id":"@aybolit/bootstrap@0.1.0","_nodeVersion":"10.14.0","_npmVersion":"lerna/3.13.1/node@v10.14.0+x64 (darwin)","dist":{"integrity":"sha512-8f11F9jBbdkeD1Qml2/Mw8FuMvtzBD5hXZb6DsUZDP4Pxt5b3WsMO9zZCS85vtzJmCuxaIjtRsxqxfV66i4t5w==","shasum":"e9379fd2bb629d984c599b1104bf0693e21ade47","tarball":"https://registry.npmjs.org/@aybolit/bootstrap/-/bootstrap-0.1.0.tgz","fileCount":16,"unpackedSize":169353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJciBkACRA9TVsSAnZWagAAAUwP/AgKIwINcME2chuTxn4o\n2QHPvKWawj6D++uNvaDQExX/LqL4e81vMAKx+pQr3+E++2IcJfJTntAWLIf6\n2PvZqxMSq0hI3pCJ1jGB53bprnJVNlgIAxeyPTot/C/KJL94KmrcfNcSPT5r\ntQK1vuocGHi+nBWDE2ji30svGvaY7iA/dpIF9smy35vdv/LcTfv6B50En91w\nY+vNkYhi6vff5nwHlaVG2wCSXcvRUcTVvzdkyJ7iegONypRNY9Ezk5uMZUP/\n9r77TDwaXYKmJQQ+4Q/8CuxFYcIwSo+IYZKxlDLVBr2272pGuUp3v5ifUdCs\nZiYkglHT3v33QIHzC/4hZZfxN0Z9BuzwlAOKTaYuDU1LBeJUuil7dwi6aGMk\nARFI7/opU/lQgU31cjQy45QhlQJHnxovH4wBsaFHQLZ+yBr0TX3Ff/SMF/lR\nwHu4LMyMjDBDHGGFE8IIn4DpBht1Ya83RdGSWqCiKkEsfWgwgNOyhkIl/6x9\nY8l0wIy66HRo323RTAUSLG29kshqkpdLLcUnD3OpUVbysGGPt4c5zeUy6aXB\ntW2e2V2/vDlffKr8q+psEMt+SQCF99VkzEcaxsnnl2esyIJMzCcxqBUcotK8\naotD0WXZEKPFFU0UlQK08t7rQuHZTlALHNQMTHPb5fuQ1fSL0QpS2lb8Gd/c\nuGGk\r\n=M/Oj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYg8ANLZM6f0rCZtWNwFb2IC9H12tP3sVr1g9R6kqfwQIhAMA7w8Uvn5fdN3SlEV0SEzNmctqSyAer7yISmD2Nw7Tc"}]},"maintainers":[{"name":"web-padawan","email":"serguey.kulikov@gmail.com"}],"_npmUser":{"name":"web-padawan","email":"serguey.kulikov@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/bootstrap_0.1.0_1552423168051_0.9891336729477049"},"_hasShrinkwrap":false}},"time":{"created":"2019-03-12T20:39:27.763Z","0.1.0":"2019-03-12T20:39:28.160Z","modified":"2022-04-04T17:14:18.528Z"},"maintainers":[{"name":"web-padawan","email":"serguey.kulikov@gmail.com"}],"description":"Aybolit Bootstrap is a set of the web components inspired by [Bootstrap](https://getbootstrap.com) framework.","homepage":"https://github.com/web-padawan/aybolit#readme","repository":{"type":"git","url":"git+https://github.com/web-padawan/aybolit.git","directory":"packages/bootstrap"},"author":{"name":"Serhii Kulykov","email":"serguey.kulikov@gmail.com"},"bugs":{"url":"https://github.com/web-padawan/aybolit/issues"},"license":"MIT","readme":"# Aybolit Bootstrap\n\nAybolit Bootstrap is a set of the web components inspired by [Bootstrap](https://getbootstrap.com) framework.\n\n## Overview\n\nBootstrap 4 is used as a base, but Aybolit does not preserve the original CSS, cuts some corners and makes adjustments here and there. The main idea behind these changes is flexible theming support, with reasonable bundle size.\n\nThe upcoming Bootstrap 5, expected to land this year, will likely introduce a lot of changes to be adapted by Aybolit. The first-class Web Components support for Bootstrap was requested, and is considered by maintainers as [possible for v6](https://github.com/twbs/bootstrap/issues/28131#issuecomment-458453934).\n\n## Installation\n\nAybolit Bootstrap is available as [npm package](https://www.npmjs.com/package/@aybolit/bootstrap):\n\n```sh\n# with npm\nnpm i @aybolit/bootstrap --save\n\n# with yarn\nyarn add @aybolit/bootstrap\n```\n\nImport either all or individual components:\n\n```js\n// all components\nimport '@aybolit/bootstrap';\n\n// button only\nimport { AbsButton } from '@aybolit/bootstrap';\n```\n\nYou can also use get Aybolit Bootstrap from the CDN:\n\n```html\n<script src=\"https://unpkg.com/@aybolit/bootstrap@latest?module\" type=\"module\"></script>\n```\n\n## Components\n\n- [x] [Button](https://getbootstrap.com/docs/4.3/components/buttons/)\n  - [x] [Outline](https://getbootstrap.com/docs/4.3/components/buttons/#outline-buttons)\n  - [x] [Sizes](https://getbootstrap.com/docs/4.3/components/buttons/#sizes)\n  - [x] [Disabled state](https://getbootstrap.com/docs/4.3/components/buttons/#disabled-state)\n  - [ ] [Active state](https://getbootstrap.com/docs/4.3/components/buttons/#active-state) - setting programmatically not planned.\n  - [ ] [Toggle state](https://getbootstrap.com/docs/4.3/components/buttons/#toggle-states) - not currently supported.\n- [x] [Checkbox](https://getbootstrap.com/docs/4.3/components/forms/#checkboxes)\n- [x] [Progress](https://getbootstrap.com/docs/4.3/components/progress/)\n  - [x] [Backgrounds](https://getbootstrap.com/docs/4.3/components/progress/#backgrounds)\n  - [x] [Sizes](https://getbootstrap.com/docs/4.3/components/progress/#height)\n  - [ ] [Animated stripes](https://getbootstrap.com/docs/4.3/components/progress/#animated-stripes) - not currently supported.\n  - [ ] [Labels](https://getbootstrap.com/docs/4.3/components/progress/#labels) - not currently supported.\n  - [ ] [Multiple bars](https://getbootstrap.com/docs/4.3/components/progress/#multiple-bars) - not planned.\n- [x] [Range](https://getbootstrap.com/docs/4.3/components/forms/#range)\n- [x] [Switch](https://getbootstrap.com/docs/4.3/components/forms/#switches)\n\n## Examples\n\n```html\n<!-- Button -->\n<abs-button>Button</abs-button>\n<abs-button theme=\"primary\">Primary theme</abs-button>\n<abs-button size=\"small\">Small size</abs-button>\n<abs-button link=\"https://example.com\">Link</abs-button>\n\n<!-- Checkbox -->\n<abs-checkbox>Unchecked</abs-checkbox>\n<abs-checkbox checked>Checked</abs-checkbox>\n<abs-checkbox indeterminate>Indeterminate</abs-checkbox>\n\n<!-- Progress -->\n<abs-progress value=\"50\" max=\"100\"></abs-progress>\n\n<!-- Range -->\n<abs-range min=\"0\" max=\"10\" value=\"5\"></abs-range>\n\n<!-- Switch -->\n<abs-switch>Unchecked</abs-switch>\n<abs-switch checked>Checked</abs-switch>\n```\n\n## Theme Variants\n\nAll the components can be themed using `theme` attribute with one of the following values:\n\n- `primary`\n- `info`\n- `success`\n- `warning`\n- `danger`\n\nThe colors for each theme variant can be adjusted using custom CSS properties listed below.\n\n## Custom CSS Properties\n\nThe following custom CSS properties are available for styling.\n\n### General Theme\n\nChanging these properties affect all the components at the level of cascade where they are specified. Keep in mind that lightness level is used as base for automatic contrast adjustment, so changing it might affect e.g. buttons text color.\n\n| Property | Description | Fallback |\n|----------|-------------|----------|\n| `--abs-primary-h` | Primary color hue | 211 |\n| `--abs-primary-s` | Primary color saturation | 100 |\n| `--abs-primary-l` | Primary color lightness | 48 |\n| `--abs-info-h` | Info color hue | 188 |\n| `--abs-info-s` | Info color saturation | 78 |\n| `--abs-info-l` | Info color lightness | 41 |\n| `--abs-success-h` | Success color hue | 134 |\n| `--abs-success-s` | Success color saturation | 61 |\n| `--abs-success-l` | Success color lightness | 41 |\n| `--abs-warning-h` | Warning color hue | 45 |\n| `--abs-warning-s` | Warning color saturation | 100 |\n| `--abs-warning-l` | Warning color lightness | 60 |\n| `--abs-danger-h` | Danger color hue | 354 |\n| `--abs-danger-s` | Danger color saturation | 70 |\n| `--abs-danger-l` | Danger color lightness | 48 |\n\n### Individual Components\n\nThese properties expose certain colors not covered by general theme settings.\n\n| Component | Property | Description | Fallback |\n|-----------|----------|-------------|----------|\n| Button    | `--abs-button-bg-color` | Un-themed button background | #fff |\n| Button    | `--abs-button-border-color` | Un-themed button border color | transparent |\n| Button    | `--abs-button-color` | Un-themed button color | #212529 |\n| Checkbox  | `--abs-checkbox-border-color` | Unchecked state border color | #adb5bd |\n| Checkbox  | `--abs-checkbox-disabled-bg` | Disabled unchecked state background | #e9ecef |\n| Checkbox  | `--abs-checkbox-disabled-text` | Disabled state text color | #6c757d |\n| Progress  | `--abs-progress-bar-color` | Progress bar color | #e9ecef |\n| Range     | `--abs-range-track-bg` | Track background | #dee2e6 |\n| Range     | `--abs-range-disabled-bg` | Disabled state thumb background | #adb5bd |\n| Switch    | `--abs-switch-disabled-bg` | Disabled off state background | #e9ecef |\n| Switch    | `--abs-switch-disabled-text` | Disabled off state text color | #6c757d |\n| Switch    | `--abs-switch-off-thumb-bg` | Off state thumb background | #adb5bd |\n| Switch    | `--abs-switch-off-track-bg` | Off state track background | #fff |\n| Switch    | `--abs-switch-off-track-border` | Off state track border color | #adb5bd |\n| Switch    | `--abs-switch-on-thumb-bg` | On state thumb background | #fff |\n","readmeFilename":"README.md"}