Merge pull request #1 from const-se/v2.0.0

Version 2.0.0
const-se · Sep 11, 2018 · de4171b · de4171b
2 parents df572e1 + 99f0ef4
commit de4171b
Show file tree

Hide file tree

Showing 14 changed files with 754 additions and 434 deletions.
diff --git a/LICENSE b/LICENSE
@@ -174,28 +174,3 @@
       of your accepting any such warranty or additional liability.
 
    END OF TERMS AND CONDITIONS
-
-   APPENDIX: How to apply the Apache License to your work.
-
-      To apply the Apache License to your work, attach the following
-      boilerplate notice, with the fields enclosed by brackets "[]"
-      replaced with your own identifying information. (Don't include
-      the brackets!)  The text should be enclosed in the appropriate
-      comment syntax for the file format. We also recommend that a
-      file or class name and description of purpose be included on the
-      same "printed page" as the copyright notice for easier
-      identification within third-party archives.
-
-   Copyright 2018 Constantine Seleznyoff <const.seoff@gmail.com>
-
-   Licensed under the Apache License, Version 2.0 (the "License");
-   you may not use this file except in compliance with the License.
-   You may obtain a copy of the License at
-
-       http://www.apache.org/licenses/LICENSE-2.0
-
-   Unless required by applicable law or agreed to in writing, software
-   distributed under the License is distributed on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   See the License for the specific language governing permissions and
-   limitations under the License.
diff --git a/README.md b/README.md
@@ -1,46 +1,50 @@
 # Selectize Theme for Bootstrap 4
 
-## Dependencies
+[Selectize](https://selectize.github.io/selectize.js/) Theme (SCSS) based on the [Bootstrap 4](https://getbootstrap.com/) components.
 
-* [Selectize](https://selectize.github.io/selectize.js/) 0.12.6 or later
-* [Bootstrap](https://getbootstrap.com/) 4.1.3 or later
+## Table of Contents
+
+- [Status](#status)
+- [Quick Start](#quick-start)
+- [TODO](#todo)
+- [Creators](#creators)
+- [Copyrights and License](#copyrights-and-license)
 
 ## Status
 
 [![GitHub release](https://img.shields.io/github/release/const-se/selectize-bootstrap4-theme.svg)](https://github.com/const-se/selectize-bootstrap4-theme/releases)
 [![npm version](https://img.shields.io/npm/v/selectize-bootstrap4-theme.svg)](https://www.npmjs.com/package/selectize-bootstrap4-theme)
 [![Packagist](https://img.shields.io/packagist/v/const-se/selectize-bootstrap4-theme.svg)](https://packagist.org/packages/const-se/selectize-bootstrap4-theme)
-[![Github file size](https://img.shields.io/github/size/const-se/selectize-bootstrap4-theme/scss/selectize.bootstrap4.scss.svg)](https://github.com/const-se/selectize-bootstrap4-theme/blob/master/scss/selectize.bootstrap4.scss)
+[![Github file size](https://img.shields.io/github/size/const-se/selectize-bootstrap4-theme/dist/css/selectize.bootstrap4.css.svg)](https://github.com/const-se/selectize-bootstrap4-theme/blob/master/dist/css/selectize.bootstrap4.css)
 [![Github Releases](https://img.shields.io/github/downloads/const-se/selectize-bootstrap4-theme/latest/total.svg)](https://github.com/const-se/selectize-bootstrap4-theme)
 [![npm](https://img.shields.io/npm/dt/selectize-bootstrap4-theme.svg)](https://www.npmjs.com/package/selectize-bootstrap4-theme)
 [![Packagist](https://img.shields.io/packagist/dt/const-se/selectize-bootstrap4-theme.svg)](https://packagist.org/packages/const-se/selectize-bootstrap4-theme)
 
-## Install
-
-* Clone the repo: `git clone git@github.com:const-se/selectize-bootstrap4-theme.git`
-* Install with [npm](https://www.npmjs.com/): `npm install selectize-bootstrap4-theme`
-* Install with [yarn](https://yarnpkg.com/): `yarn add selectize-bootstrap4-theme`
-* Install with [composer](https://getcomposer.org/): `composer require const-se/selectize-bootstrap4-theme`
-
-## Usage
+## Quick Start
 
-Import the theme into your SCSS:
+Several quick start options are available:
 
-```scss
-@import "node_modules/selectize-bootstrap4-theme/scss/selectise.bootstrap4.scss";
-```
+- [Download the latest release](https://github.com/const-se/selectize-bootstrap4-theme/archive/v2.0.0.zip)
+- Clone the repo: `git clone git@github.com:const-se/selectize-bootstrap4-theme.git`
+- Install with [npm](https://www.npmjs.com/): `npm install selectize-bootstrap4-theme`
+- Install with [yarn](https://yarnpkg.com/): `yarn add selectize-bootstrap4-theme`
+- Install with [composer](https://getcomposer.org/): `composer require const-se/selectize-bootstrap4-theme`
 
-Check selectize variables in `scss/_variables.scss`. Override the variables in your SCSS for fine-tuning of selectize inputs.
+Read the [Documentation](docs/en/index.md) for more information.
 
-## Examples
+## TODO
 
-Clone the repo and open `dist/index.html`.
+- RTL direction support
+- Attribute `readonly` support
+- Bootstrap class `custom-select` support
+- Bootstrap form validation support
+- Selectize plugin styles support
 
 ## Creators
 
 **Constantine Seleznyoff**
 
-* const.seoff@gmail.com
+- const.seoff@gmail.com
 
 ## Copyrights and License
 

diff --git a/composer.json b/composer.json
@@ -1,7 +1,7 @@
 {
   "name": "const-se/selectize-bootstrap4-theme",
   "type": "library",
-  "version": "1.2.1",
+  "version": "2.0.0",
   "license": "Apache-2.0",
   "description": "Selectize Theme for Bootstrap 4",
   "keywords": [
@@ -24,7 +24,7 @@
   "homepage": "https://github.com/const-se/selectize-bootstrap4-theme",
   "extra": {
     "branch-alias": {
-      "dev-master": "1.2.x-dev"
+      "dev-master": "2.0.x-dev"
     }
   },
   "support": {

diff --git a/dist/css/selectize.bootstrap4.css b/dist/css/selectize.bootstrap4.css
@@ -1,14 +1,26 @@
 /*!
- * Selectize Theme for Bootstrap 4
- * Version 1.2.1
+ * Selectize Theme for Bootstrap 4 v2.0.0
+ *
  * Copyright 2018 Constantine Seleznyoff <const.seoff@gmail.com>
- * Licensed under the Apache License, Version 2.0 (https://github.com/const-se/selectize-bootstrap4-theme/blob/master/LICENSE)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
  */
 .form-control.selectize-control {
   background-color: transparent;
   border: none;
   border-radius: 0;
   box-shadow: none;
+  height: calc(2.25rem + 2px);
   padding: 0;
   position: relative;
   transition: none;
@@ -18,8 +30,10 @@
   background-clip: padding-box;
   background-color: #fff;
   border: 1px solid #ced4da;
+  color: #495057;
   cursor: text;
   display: inline-block;
+  font-size: 1rem;
   height: 100%;
   overflow: hidden;
   padding: 0.375rem 0.75rem;
@@ -29,14 +43,6 @@
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
 
-.form-control.selectize-control .selectize-input:focus {
-  color: #495057;
-  background-color: #fff;
-  border-color: #80bdff;
-  outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
-}
-
 @media screen and (prefers-reduced-motion: reduce) {
   .form-control.selectize-control .selectize-input {
     transition: none;
@@ -55,7 +61,9 @@
   background: none !important;
   border: none !important;
   box-shadow: none !important;
+  color: inherit;
   display: inline-block !important;
+  font-size: inherit;
   line-height: inherit !important;
   margin: 0 2px 0 0 !important;
   max-height: none !important;
@@ -79,6 +87,20 @@
   opacity: 1;
 }
 
+.form-control.selectize-control .selectize-input.focus {
+  color: #495057;
+  background-color: #fff;
+  border-color: #80bdff;
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+.form-control.selectize-control .selectize-input.disabled {
+  background-color: #e9ecef;
+  color: #495057;
+  opacity: 1;
+}
+
 .form-control.selectize-control .selectize-input.dropdown-active {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
@@ -92,6 +114,7 @@
   display: none;
   height: auto;
   left: 0;
+  margin: 0 !important;
   padding: 0;
   position: absolute;
   top: 100%;
@@ -174,11 +197,6 @@
   white-space: nowrap;
 }
 
-.form-control.selectize-control:disabled .selectize-input, .form-control.selectize-control[readonly] .selectize-input {
-  background-color: #e9ecef;
-  opacity: 1;
-}
-
 .form-control.selectize-control.single:after {
   border-color: #212529 transparent transparent transparent;
   border-style: solid;
@@ -208,14 +226,18 @@
   overflow: auto;
 }
 
+.form-control.selectize-control.multi .selectize-input .item {
+  margin: 0 3px 0 0;
+}
+
+.form-control.selectize-control .selectize-dropdown-content .create strong,
 .form-control.selectize-control.multi .selectize-input .item {
   background-color: #007bff;
   color: #fff;
   display: inline-block;
   font-size: 75%;
-  height: 100%;
+  font-weight: 400;
   line-height: 1;
-  margin: 0 3px 0 0;
   padding: 0.25em 0.4em;
   text-align: center;
   vertical-align: middle;
@@ -224,19 +246,39 @@
 }
 
 .form-control-lg.selectize-control {
+  height: calc(2.875rem + 2px);
   padding: 0;
 }
 
 .form-control-lg.selectize-control .selectize-input {
+  font-size: 1.25rem;
   padding: 0.5rem 1rem;
   border-radius: 0.3rem;
 }
 
+.form-control-lg.selectize-control.single .selectize-input {
+  padding-right: calc(1rem + 0.625rem);
+}
+
+.form-control-lg.selectize-control.multi {
+  min-height: calc(2.875rem + 2px);
+}
+
 .form-control-sm.selectize-control {
+  height: calc(1.8125rem + 2px);
   padding: 0;
 }
 
 .form-control-sm.selectize-control .selectize-input {
+  font-size: 0.875rem;
   padding: 0.25rem 0.5rem;
   border-radius: 0.2rem;
 }
+
+.form-control-sm.selectize-control.single .selectize-input {
+  padding-right: calc(0.5rem + 0.625rem);
+}
+
+.form-control-sm.selectize-control.multi {
+  min-height: calc(1.8125rem + 2px);
+}