Skip to content

Commit

Permalink
Import for cache
Browse files Browse the repository at this point in the history
  • Loading branch information
SamAsEnd committed Oct 21, 2021
0 parents commit 6acedb8
Show file tree
Hide file tree
Showing 12 changed files with 1,377 additions and 0 deletions.
1 change: 1 addition & 0 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules
44 changes: 44 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
# bootstrap4-chosen

Based on the wonderful [bootstrap-chosen](https://github.com/alxlit/bootstrap-chosen) by alxlit, this aims
matching your [Chosen 1.0](http://harvesthq.github.com/chosen/) elements with bootstrap 4 styling.

[![Demo](demo.PNG)](#)

### Installation

Get it with your favourite package manager:

`npm i bootstrap4-chosen`, `yarn add bootstrap4-chosen` or what ever floats your boat.

### Usage

You can use `bootstrap4-chosen` by importing its source files after importing
the bootstrap 4 variables.

```scss
// Bootstrap 4 Sources
@import "~bootstrap/scss/bootstrap";
@import "~bootstrap4-chosen/bootstrap4-chosen";
```

#### Prebuilt CSS

You can find a plain css version (using default variables) as bootstrap4-chosen.css.

### Examples

You can browse some examples in the attached example.html file.

### Pitfalls

- bootstrap4-chosen, unlike bootstrap-chosen, does not include Less sources.
- bootstrap4-chosen will not work with bootstrap 3.
- bootstrap4-chosen works at least with bootstrap 4 beta

- Always make sure to include bootstrap 4 scss variables, mixins and functions or your scss won't compile.
This way, styling is really dependant on your variable setup.

### License

The MIT License
16 changes: 16 additions & 0 deletions _variables.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
$chosen-background: $input-bg !default;
$chosen-border: 1px solid $input-border-color !default;
$chosen-border-color: $input-focus-border-color !default;
$chosen-border-radius: $input-border-radius !default;
$chosen-multi-border-radius: $chosen-border-radius !default;
$chosen-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075) !default;
$chosen-drop-border: $input-border-color !default;
$chosen-drop-box-shadow: 0 8px 8px rgba(0, 0, 0, .25) !default;
$chosen-drop-zindex: 1060 !default;
$chosen-focus-border: 1px solid $input-focus-border-color !default
$chosen-focus-box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px $chosen-border-color !default;
$chosen-focus-transition: border linear .2s, box-shadow linear .2s !default;
$chosen-height: $input-height!default;
$chosen-multi-height: $input-height+ 6px !default;
$chosen-sprite-path: 'chosen-sprite.png' !default;
$chosen-sprite-retina-path: 'chosen-sprite@2x.png' !default;
1 change: 1 addition & 0 deletions bootstrap4-chosen.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 6acedb8

Please sign in to comment.