diff --git a/.npmignore b/.npmignore new file mode 100644 index 0000000..b512c09 --- /dev/null +++ b/.npmignore @@ -0,0 +1 @@ +node_modules \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..3ed0659 --- /dev/null +++ b/README.md @@ -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 \ No newline at end of file diff --git a/_variables.scss b/_variables.scss new file mode 100644 index 0000000..8ecce43 --- /dev/null +++ b/_variables.scss @@ -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; diff --git a/bootstrap4-chosen.css b/bootstrap4-chosen.css new file mode 100644 index 0000000..11ed2d7 --- /dev/null +++ b/bootstrap4-chosen.css @@ -0,0 +1 @@ +.chosen-select,.chosen-select-deselect{width:100%}.chosen-container{display:inline-block;font-size:1rem;position:relative;vertical-align:middle}.chosen-container .chosen-drop{background:#fff;border:1px solid rgba(0,0,0,.15);border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem;margin-top:-1px;position:absolute;top:100%;left:-9000px;z-index:1060}.chosen-container.chosen-with-drop .chosen-drop{left:0;right:0}.chosen-container .chosen-results{color:#495057;margin:0 4px 4px 0;max-height:240px;padding:0 0 0 4px;position:relative;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.chosen-container .chosen-results li{display:none;line-height:1.5;list-style:none;margin:0;padding:5px 6px}.chosen-container .chosen-results li em{background:#feffde;font-style:normal}.chosen-container .chosen-results li.group-result{display:list-item;cursor:default;color:#999;font-weight:700}.chosen-container .chosen-results li.group-option{padding-left:15px}.chosen-container .chosen-results li.active-result{cursor:pointer;display:list-item}.chosen-container .chosen-results li.highlighted{background-color:#007bff;background-image:none;color:#fff}.chosen-container .chosen-results li.highlighted em{background:transparent}.chosen-container .chosen-results li.disabled-result{display:list-item;color:#ced4da}.chosen-container .chosen-results .no-results{background:#e9ecef;display:list-item}.chosen-container .chosen-results-scroll{background:#fff;margin:0 4px;position:absolute;text-align:center;width:321px;z-index:1}.chosen-container .chosen-results-scroll span{display:inline-block;height:1.5;text-indent:-5000px;width:9px}.chosen-container .chosen-results-scroll-down{bottom:0}.chosen-container .chosen-results-scroll-down span{background:url("chosen-sprite.png") no-repeat -4px -3px}.chosen-container .chosen-results-scroll-up span{background:url("chosen-sprite.png") no-repeat -22px -3px}.chosen-container-single .chosen-single{background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem;color:#495057;display:block;height:calc(2.25rem + 2px);overflow:hidden;line-height:calc(2.25rem + 2px);padding:0 0 0 8px;position:relative;text-decoration:none;white-space:nowrap}.chosen-container-single .chosen-single span{display:block;margin-right:26px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chosen-container-single .chosen-single abbr{background:url("chosen-sprite.png") 100% 0 no-repeat;display:block;font-size:1px;height:10px;position:absolute;right:26px;top:calc(2.25rem + 2px)-10px/2;width:12px}.chosen-container-single .chosen-single abbr:hover{background-position:right -11px}.chosen-container-single .chosen-single.chosen-disabled .chosen-single abbr:hover{background-position:right 2px}.chosen-container-single .chosen-single div{display:block;height:100%;position:absolute;top:0;right:0;width:18px}.chosen-container-single .chosen-single div b{background:url("chosen-sprite.png") no-repeat 0 7px;display:block;height:100%;width:100%}.chosen-container-single .chosen-default{color:#ced4da}.chosen-container-single .chosen-search{margin:0;padding:3px 4px;position:relative;white-space:nowrap;z-index:1000}.chosen-container-single .chosen-search input[type=text]{background:url("chosen-sprite.png") no-repeat 100% -20px,#fff;border:1px solid rgba(0,0,0,.15);border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem;margin:1px 0;padding:4px 20px 4px 4px;width:100%}.chosen-container-single .chosen-drop{margin-top:-1px;border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem;background-clip:padding-box}.chosen-container-single-nosearch .chosen-search input[type=text]{position:absolute;left:-9000px}.chosen-container-multi .chosen-choices{background-color:#fff;border:1px solid rgba(0,0,0,.15);border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem;cursor:text;height:auto!important;height:1%;margin:0;overflow:hidden;padding:0;position:relative}.chosen-container-multi .chosen-choices li{float:left;list-style:none}.chosen-container-multi .chosen-choices .search-field{margin:0;padding:0;white-space:nowrap}.chosen-container-multi .chosen-choices .search-field input[type=text]{background:transparent!important;border:0!important;color:#495057;height:calc(2.25rem + 2px)6px-8px;margin:0;padding:4px;outline:0}.chosen-container-multi .chosen-choices .search-field .default{color:#999}.chosen-container-multi .chosen-choices .search-choice{background-clip:padding-box;background-color:#e9ecef;border:1px solid rgba(0,0,0,.15);border-top-left-radius:.25rem;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem;background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#e9ecef));background-image:linear-gradient(180deg,#fff 0,#e9ecef);background-repeat:repeat-x;color:#212529;cursor:default;line-height:13px;margin:6px 0 3px 5px;padding:3px 20px 3px 5px;position:relative}.chosen-container-multi .chosen-choices .search-choice .search-choice-close{background:url("chosen-sprite.png") 100% 0 no-repeat;display:block;font-size:1px;height:10px;position:absolute;right:4px;top:5px;width:12px;cursor:pointer}.chosen-container-multi .chosen-choices .search-choice .search-choice-close:hover{background-position:right -11px}.chosen-container-multi .chosen-choices .search-choice-focus{background:#d4d4d4}.chosen-container-multi .chosen-choices .search-choice-focus .search-choice-close{background-position:right -11px}.chosen-container-multi .chosen-results{margin:0;padding:0}.chosen-container-multi .chosen-drop .result-selected{display:none}.chosen-container-active .chosen-single,.chosen-container-active.chosen-with-drop .chosen-single{border:1px solid #80bdff;-webkit-transition:border .2s linear,-webkit-box-shadow .2s linear;transition:border .2s linear,-webkit-box-shadow .2s linear;transition:border .2s linear,box-shadow .2s linear;transition:border .2s linear,box-shadow .2s linear,-webkit-box-shadow .2s linear}.chosen-container-active.chosen-with-drop .chosen-single{background-color:#fff;border-bottom-right-radius:0;border-bottom-left-radius:0}.chosen-container-active.chosen-with-drop .chosen-single div{background:transparent;border-left:none}.chosen-container-active.chosen-with-drop .chosen-single div b{background-position:-18px 7px}.chosen-container-active .chosen-choices{border:1px solid #80bdff;border-bottom-right-radius:0;border-bottom-left-radius:0;-webkit-transition:border .2s linear,-webkit-box-shadow .2s linear;transition:border .2s linear,-webkit-box-shadow .2s linear;transition:border .2s linear,box-shadow .2s linear;transition:border .2s linear,box-shadow .2s linear,-webkit-box-shadow .2s linear}.chosen-container-active .chosen-choices .search-field input[type=text]{color:#111!important}.chosen-container-active.chosen-with-drop .chosen-choices{border-bottom-right-radius:0;border-bottom-left-radius:0}.chosen-disabled{cursor:default;opacity:.5!important}.chosen-disabled .chosen-choices .search-choice .search-choice-close,.chosen-disabled .chosen-single{cursor:default}.chosen-rtl{text-align:right}.chosen-rtl .chosen-single{padding:0 8px 0 0;overflow:visible}.chosen-rtl .chosen-single span{margin-left:26px;margin-right:0;direction:rtl}.chosen-rtl .chosen-single div{left:7px;right:auto}.chosen-rtl .chosen-single abbr{left:26px;right:auto}.chosen-rtl .chosen-choices .search-field input[type=text]{direction:rtl}.chosen-rtl .chosen-choices li{float:right}.chosen-rtl .chosen-choices .search-choice{margin:6px 5px 3px 0;padding:3px 5px 3px 19px}.chosen-rtl .chosen-choices .search-choice .search-choice-close{background-position:100% 0;left:4px;right:auto}.chosen-rtl.chosen-container-single .chosen-results{margin:0 0 4px 4px;padding:0 4px 0 0}.chosen-rtl .chosen-results .group-option{padding-left:0;padding-right:15px}.chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div{border-right:none}.chosen-rtl .chosen-search input[type=text]{background:url("chosen-sprite.png") no-repeat -28px -20px,#fff;direction:rtl;padding:4px 5px 4px 20px}@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min-resolution:2dppx){.chosen-container-multi .chosen-choices .search-choice .search-choice-close,.chosen-container-single .chosen-search input[type=text],.chosen-container-single .chosen-single abbr,.chosen-container-single .chosen-single div b,.chosen-container .chosen-results-scroll-down span,.chosen-container .chosen-results-scroll-up span,.chosen-rtl .chosen-search input[type=text]{background-image:url("chosen-sprite@2x.png")!important;background-size:52px 37px!important;background-repeat:no-repeat!important}} \ No newline at end of file diff --git a/bootstrap4-chosen.scss b/bootstrap4-chosen.scss new file mode 100644 index 0000000..fad8ea7 --- /dev/null +++ b/bootstrap4-chosen.scss @@ -0,0 +1,454 @@ +@import "variables"; + +.chosen-select, +.chosen-select-deselect { + width: 100%; +} + +.chosen-container { + display: inline-block; + font-size: $font-size-base; + position: relative; + vertical-align: middle; + + .chosen-drop { + background: $chosen-background; + border: 1px solid $chosen-drop-border; + @include border-bottom-radius($chosen-border-radius); + @include box-shadow($chosen-drop-box-shadow); + margin-top: -1px; + position: absolute; + top: 100%; + left: -9000px; + z-index: $chosen-drop-zindex; + } + + &.chosen-with-drop .chosen-drop { + left: 0; + right: 0; + } + + .chosen-results { + color: $gray-700; + margin: 0 4px 4px 0; + max-height: 240px; + padding: 0 0 0 4px; + position: relative; + overflow-x: hidden; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + + li { + display: none; + line-height: $line-height-base; // 15px; + list-style: none; + margin: 0; + padding: 5px 6px; + + em { + background: #feffde; + font-style: normal; + } + + &.group-result { + display: list-item; + cursor: default; + color: #999; + font-weight: bold; + } + + &.group-option { + padding-left: 15px; + } + + &.active-result { + cursor: pointer; + display: list-item; + } + + &.highlighted { + background-color: $link-color; + background-image: none; + color: white; + + em { + background: transparent; + } + } + + &.disabled-result { + display: list-item; + color: $gray-400; + } + } + + .no-results { + background: $gray-200; + display: list-item; + } + } + + .chosen-results-scroll { + background: white; + margin: 0 4px; + position: absolute; + text-align: center; + width: 321px; + z-index: 1; + + span { + display: inline-block; + height: $line-height-base; // 17px; + text-indent: -5000px; + width: 9px; + } + } + + .chosen-results-scroll-down { + bottom: 0; + + span { + background: url($chosen-sprite-path) no-repeat -4px -3px; + } + } + + .chosen-results-scroll-up { + span { + background: url($chosen-sprite-path) no-repeat -22px -3px; + } + } +} + +.chosen-container-single { + .chosen-single { + background-color: $chosen-background; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + border: $chosen-border; + @include border-top-radius($chosen-border-radius); + @include border-bottom-radius($chosen-border-radius); + @include box-shadow($chosen-box-shadow); + color: $gray-700; + display: block; + height: $chosen-height; + overflow: hidden; + line-height: $chosen-height; + padding: 0 0 0 8px; + position: relative; + text-decoration: none; + white-space: nowrap; + + span { + display: block; + margin-right: 26px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + abbr { + background: url($chosen-sprite-path) right top no-repeat; + display: block; + font-size: 1px; + height: 10px; + position: absolute; + right: 26px; + top: ($chosen-height - 10px) / 2; + width: 12px; + + &:hover { + background-position: right -11px; + } + } + + &.chosen-disabled .chosen-single abbr:hover { + background-position: right 2px; + } + + div { + display: block; + height: 100%; + position: absolute; + top: 0; + right: 0; + width: 18px; + + b { + background: url($chosen-sprite-path) no-repeat 0 7px; + display: block; + height: 100%; + width: 100%; + } + } + } + + .chosen-default { + color: $gray-400; + } + + .chosen-search { + margin: 0; + padding: 3px 4px; + position: relative; + white-space: nowrap; + z-index: $zindex-dropdown; + + input[type="text"] { + background: url($chosen-sprite-path) no-repeat 100% -20px, $chosen-background; + border: $chosen-border; + @include border-top-radius($chosen-border-radius); + @include border-bottom-radius($chosen-border-radius); + @include box-shadow($chosen-box-shadow); + margin: 1px 0; + padding: 4px 20px 4px 4px; + width: 100%; + } + } + + .chosen-drop { + margin-top: -1px; + @include border-bottom-radius($chosen-border-radius); + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + } +} + +.chosen-container-single-nosearch { + .chosen-search { + input[type="text"] { + position: absolute; + left: -9000px; + } + } +} + +.chosen-container-multi { + .chosen-choices { + background-color: $chosen-background; + border: $chosen-border; + @include border-top-radius($chosen-multi-border-radius); + @include border-bottom-radius($chosen-multi-border-radius); + @include box-shadow($chosen-box-shadow); + cursor: text; + height: auto !important; + height: 1%; + margin: 0; + overflow: hidden; + padding: 0; + position: relative; + + li { + float: left; + list-style: none; + } + + .search-field { + margin: 0; + padding: 0; + white-space: nowrap; + + input[type="text"] { + background: transparent !important; + border: 0 !important; + @include box-shadow(none); + color: $gray-700; + height: $chosen-multi-height - 8px; + margin: 0; + padding: 4px; + outline: 0; + } + + .default { + color: #999; + } + } + + .search-choice { + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + background-color: $gray-200; + border: $chosen-border; + @include border-top-radius($chosen-border-radius); + @include border-bottom-radius($chosen-border-radius); + @include gradient-y(white, $gray-200); + @include box-shadow($chosen-box-shadow); + color: $gray-900; + cursor: default; + line-height: 13px; + margin: 6px 0 3px 5px; + padding: 3px 20px 3px 5px; + position: relative; + + .search-choice-close { + background: url($chosen-sprite-path) right top no-repeat; + display: block; + font-size: 1px; + height: 10px; + position: absolute; + right: 4px; + top: 5px; + width: 12px; + cursor: pointer; + + &:hover { + background-position: right -11px; + } + } + } + + .search-choice-focus { + background: #d4d4d4; + + .search-choice-close { + background-position: right -11px; + } + } + } + + .chosen-results { + margin: 0 0 0 0; + padding: 0; + } + + .chosen-drop { + .result-selected { + display: none; + } + } +} + +.chosen-container-active { + .chosen-single { + border: $chosen-focus-border; + @include box-shadow($chosen-focus-box-shadow); + @include transition($chosen-focus-transition); + } + + &.chosen-with-drop .chosen-single { + background-color: $input-bg; + border: $chosen-focus-border; + @include border-bottom-radius(0); + @include box-shadow($chosen-focus-box-shadow); + @include transition($chosen-focus-transition); + + div { + background: transparent; + border-left: none; + + b { + background-position: -18px 7px; + } + } + } + + .chosen-choices { + border: $chosen-focus-border; + @include border-bottom-radius(0); + @include box-shadow($chosen-focus-box-shadow); + @include transition($chosen-focus-transition); + + .search-field input[type="text"] { + color: #111 !important; + } + } + + &.chosen-with-drop .chosen-choices { + @include border-bottom-radius(0); + } +} + +.chosen-disabled { + cursor: default; + opacity: 0.5 !important; + + .chosen-single { + cursor: default; + } + + .chosen-choices .search-choice .search-choice-close { + cursor: default; + } +} + +.chosen-rtl { + text-align: right; + + .chosen-single { + padding: 0 8px 0 0; + overflow: visible; + + span { + margin-left: 26px; + margin-right: 0; + direction: rtl; + } + + div { + left: 7px; + right: auto; + } + + abbr { + left: 26px; + right: auto; + } + } + + .chosen-choices { + .search-field input[type="text"] { + direction: rtl; + } + + li { + float: right; + } + + .search-choice { + margin: 6px 5px 3px 0; + padding: 3px 5px 3px 19px; + + .search-choice-close { + background-position: right top; + left: 4px; + right: auto; + } + } + } + + &.chosen-container-single .chosen-results { + margin: 0 0 4px 4px; + padding: 0 4px 0 0; + } + + .chosen-results .group-option { + padding-left: 0; + padding-right: 15px; + } + + &.chosen-container-active.chosen-with-drop .chosen-single div { + border-right: none; + } + + .chosen-search input[type="text"] { + background: url($chosen-sprite-path) no-repeat -28px -20px, $chosen-background; + direction: rtl; + padding: 4px 5px 4px 20px; + } +} + +@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { + .chosen-rtl .chosen-search input[type="text"], + .chosen-container-single .chosen-single abbr, + .chosen-container-single .chosen-single div b, + .chosen-container-single .chosen-search input[type="text"], + .chosen-container-multi .chosen-choices .search-choice .search-choice-close, + .chosen-container .chosen-results-scroll-down span, + .chosen-container .chosen-results-scroll-up span { + background-image: url($chosen-sprite-retina-path) !important; + background-size: 52px 37px !important; + background-repeat: no-repeat !important; + } +} diff --git a/chosen-sprite.png b/chosen-sprite.png new file mode 100644 index 0000000..3611ae4 Binary files /dev/null and b/chosen-sprite.png differ diff --git a/chosen-sprite@2x.png b/chosen-sprite@2x.png new file mode 100644 index 0000000..ffe4d7d Binary files /dev/null and b/chosen-sprite@2x.png differ diff --git a/demo.PNG b/demo.PNG new file mode 100644 index 0000000..c3f7157 Binary files /dev/null and b/demo.PNG differ diff --git a/example.html b/example.html new file mode 100644 index 0000000..0f9c500 --- /dev/null +++ b/example.html @@ -0,0 +1,774 @@ + + + + + Bootstrap + Chosen + + + + + + + + +
+
+

Bootstrap + Chosen

+
+ +
+

Standard Select

+
+ +
+
+ +
+
+ +
+
+ +
+

Multiple Select

+
+ +
+
+
+ +
+
+
+ +
+
+ +
+

<optgroup> Support

+
+ +
+
+

Single Select with Groups

+ +
+ +
+

Multiple Select with Groups

+ +
+
+ +
+

Selected and Disabled Support

+
+ +
+
+

Single Select

+ +
+ +
+

Multiple Select

+ +
+
+ +
+

Allow Deselect on Single Selects

+
+ +
+
+ +
+
+ +
+

Right to Left

+
+ +
+
+

Single Select

+ +
+ +
+

Multiple Select

+ +
+
+
+ + diff --git a/mix-manifest.json b/mix-manifest.json new file mode 100644 index 0000000..edc6895 --- /dev/null +++ b/mix-manifest.json @@ -0,0 +1,3 @@ +{ + "/bootstrap4-chosen.css": "/bootstrap4-chosen.css" +} \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..3d05186 --- /dev/null +++ b/package.json @@ -0,0 +1,29 @@ +{ + "name": "bootstrap4-chosen", + "version": "v1.0.0-alpha.1", + "description": "An alternate stylesheet for Chosen that integrates with Bootstrap 4.", + "repository": { + "type": "git", + "url": "pascalebeier/bootstrap4-chosen" + }, + "scripts": { + "dev": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", + "watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", + "watch-poll": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", + "hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", + "production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" + }, + "homepage": "https://github.com/pascalebeier/bootstrap4-chosen", + "license": "MIT", + "keywords": [ + "bootstrap", + "bootstrap4", + "chosen", + "bootstrap4-chosen" + ], + "devDependencies": { + "bootstrap": "^4.0.0-beta", + "cross-env": "^5.1.0", + "laravel-mix": "^1.5.1" + } +} diff --git a/webpack.mix.js b/webpack.mix.js new file mode 100644 index 0000000..06cd87b --- /dev/null +++ b/webpack.mix.js @@ -0,0 +1,55 @@ +let mix = require('laravel-mix'); + +/* + |-------------------------------------------------------------------------- + | Mix Asset Management + |-------------------------------------------------------------------------- + | + | Mix provides a clean, fluent API for defining some Webpack build steps + | for your Laravel application. By default, we are compiling the Sass + | file for your application, as well as bundling up your JS files. + | + */ + +mix.options({ +// extractVueStyles: false, // Extract .vue component styling to file, rather than inline. +processCssUrls: false // Process/optimize relative stylesheet url()'s. Set to false, if you don't want them touched. +// purifyCss: false, // Remove unused CSS selectors. +// uglify: {}, // Uglify-specific options. https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin +// postCss: [] // Post-CSS options: https://github.com/postcss/postcss/blob/master/docs/plugins.md +}); + +mix.sass('bootstrap4-chosen.scss', 'bootstrap4-chosen.css'); + +// Full API +// mix.js(src, output); +// mix.react(src, output); <-- Identical to mix.js(), but registers React Babel compilation. +// mix.ts(src, output); <-- Requires tsconfig.json to exist in the same folder as webpack.mix.js +// mix.extract(vendorLibs); +// mix.sass(src, output); +// mix.standaloneSass('src', output); <-- Faster, but isolated from Webpack. +// mix.fastSass('src', output); <-- Alias for mix.standaloneSass(). +// mix.less(src, output); +// mix.stylus(src, output); +// mix.postCss(src, output, [require('postcss-some-plugin')()]); +// mix.browserSync('my-site.dev'); +// mix.combine(files, destination); +// mix.babel(files, destination); <-- Identical to mix.combine(), but also includes Babel compilation. +// mix.copy(from, to); +// mix.copyDirectory(fromDir, toDir); +// mix.minify(file); +// mix.sourceMaps(); // Enable sourcemaps +// mix.version(); // Enable versioning. +// mix.disableNotifications(); +// mix.setPublicPath('path/to/public'); +// mix.setResourceRoot('prefix/for/resource/locators'); +// mix.autoload({}); <-- Will be passed to Webpack's ProvidePlugin. +// mix.webpackConfig({}); <-- Override webpack.config.js, without editing the file directly. +// mix.then(function () {}) <-- Will be triggered each time Webpack finishes building. +// mix.options({ +// extractVueStyles: false, // Extract .vue component styling to file, rather than inline. +// processCssUrls: true, // Process/optimize relative stylesheet url()'s. Set to false, if you don't want them touched. +// purifyCss: false, // Remove unused CSS selectors. +// uglify: {}, // Uglify-specific options. https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin +// postCss: [] // Post-CSS options: https://github.com/postcss/postcss/blob/master/docs/plugins.md +// });