Skip to content

Commit

Permalink
Merge pull request #2 from const-se/v2.0.1
Browse files Browse the repository at this point in the history 
Version 2.0.1
  • Loading branch information
@const-se
const-se authored Sep 12, 2018
2 parents de4171b + f404da8 commit 60acae1
Show file tree
Hide file tree
Showing 11 changed files with 358 additions and 140 deletions.
5 changes: 2 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,15 @@
[![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/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)
[![Github All Releases](https://img.shields.io/github/downloads/const-se/selectize-bootstrap4-theme/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)

## Quick Start

Several quick start options are available:

- [Download the latest release](https://github.com/const-se/selectize-bootstrap4-theme/archive/v2.0.0.zip)
- [Download the latest release](https://github.com/const-se/selectize-bootstrap4-theme/archive/v2.0.1.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`
Expand All @@ -34,7 +34,6 @@ Read the [Documentation](docs/en/index.md) for more information.

## TODO

- RTL direction support
- Attribute `readonly` support
- Bootstrap class `custom-select` support
- Bootstrap form validation support
Expand Down
2 changes: 1 addition & 1 deletion composer.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "const-se/selectize-bootstrap4-theme",
"type": "library",
"version": "2.0.0",
"version": "2.0.1",
"license": "Apache-2.0",
"description": "Selectize Theme for Bootstrap 4",
"keywords": [
Expand Down
64 changes: 59 additions & 5 deletions dist/css/selectize.bootstrap4.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*!
* Selectize Theme for Bootstrap 4 v2.0.0
* Selectize Theme for Bootstrap 4 v2.0.1
*
* Copyright 2018 Constantine Seleznyoff <const.seoff@gmail.com>
*
Expand Down Expand Up @@ -102,8 +102,8 @@
}

.form-control.selectize-control .selectize-input.dropdown-active {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}

.form-control.selectize-control .selectize-dropdown {
Expand Down Expand Up @@ -212,7 +212,7 @@
}

.form-control.selectize-control.single .selectize-input {
padding-right: calc(0.75rem + 0.625rem);
padding-right: calc(0.75rem + 0.625rem + 0.375rem);
}

.form-control.selectize-control.multi {
Expand Down Expand Up @@ -245,6 +245,36 @@
border-radius: 0.25rem;
}

.form-control.selectize-control.rtl {
direction: rtl;
}

.form-control.selectize-control.rtl .selectize-input {
text-align: right;
}

.form-control.selectize-control.rtl .selectize-input input {
margin: 0 0 0 2px !important;
}

.form-control.selectize-control.rtl .selectize-dropdown .selectize-dropdown-content {
text-align: right !important;
}

.form-control.selectize-control.rtl.single:after {
left: 0.75rem;
right: auto;
}

.form-control.selectize-control.rtl.single .selectize-input {
padding-left: calc(0.75rem + 0.625rem + 0.375rem);
padding-right: 0.75rem;
}

.form-control.selectize-control.rtl.multi .selectize-input .item {
margin: 0 0 0 3px;
}

.form-control-lg.selectize-control {
height: calc(2.875rem + 2px);
padding: 0;
Expand All @@ -257,7 +287,12 @@
}

.form-control-lg.selectize-control.single .selectize-input {
padding-right: calc(1rem + 0.625rem);
padding-right: calc(1rem + 0.625rem + 0.5rem);
}

.form-control-lg.selectize-control.single.rtl .selectize-input {
padding-left: calc(1rem + 0.625rem + 0.5rem);
padding-right: 1rem;
}

.form-control-lg.selectize-control.multi {
Expand All @@ -276,9 +311,28 @@
}

.form-control-sm.selectize-control.single .selectize-input {
padding-right: calc(0.5rem + 0.625rem);
padding-right: calc(0.5rem + 0.625rem + 0.25rem);
}

.form-control-sm.selectize-control.single.rtl .selectize-input {
padding-left: calc(0.5rem + 0.625rem + 0.25rem);
padding-right: 0.5rem;
}

.form-control-sm.selectize-control.multi {
min-height: calc(1.8125rem + 2px);
}

.input-group > .form-control.selectize-control.multi {
height: calc(2.25rem + 2px);
}

.input-group > .form-control:not(:first-child).selectize-control .selectize-input {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}

.input-group > .form-control:not(:last-child).selectize-control .selectize-input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
209 changes: 135 additions & 74 deletions dist/examples.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ <h1 class="text-center">Selectize Theme for Bootstrap 4</h1>
<h2>Single Select</h2>
<form>
<div class="form-group">
<select class="form-control selectize-single">
<label for="select-1">Regular</label>
<select class="form-control selectize-single" id="select-1">
<option value selected>Choose...</option>
<option value="Red">Red</option>
<option value="Yellow">Yellow</option>
Expand All @@ -28,64 +29,57 @@ <h2>Single Select</h2>
<option value="Gray">Gray</option>
</select>
</div>
</form>
</div>
<div class="col-6">
<h2>Multiple Select</h2>
<form>
<div class="form-group">
<select class="form-control selectize-multiple" multiple>
<option value="Red" selected>Red</option>
<option value="Green" selected>Green</option>
<option value="Blue" selected>Blue</option>
<label for="select-2">Large</label>
<select class="form-control form-control-lg selectize-single" id="select-2">
<option value selected>Choose...</option>
<option value="Red">Red</option>
<option value="Yellow">Yellow</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
<option value="Purple">Purple</option>
<option value="Magenta">Magenta</option>
<option value="Pink">Pink</option>
<option value="Black">Black</option>
<option value="White">White</option>
<option value="Gray">Gray</option>
</select>
</div>
</form>
</div>
</div>
<div class="row my-5">
<div class="col-6">
<h2>Inline Form</h2>
<form class="form-inline">
<select class="form-control w-50 selectize-single">
<option value selected>Choose...</option>
<option value="Red">Red</option>
<option value="Yellow">Yellow</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
<option value="Purple">Purple</option>
<option value="Magenta">Magenta</option>
<option value="Pink">Pink</option>
<option value="Black">Black</option>
<option value="White">White</option>
<option value="Gray">Gray</option>
</select>
<input class="form-control mx-2" type="text" placeholder="Some text input">
</form>
</div>
<div class="col-6">
<h2>Disabled Select</h2>
<form>
<select class="form-control selectize-single" disabled>
<option value selected>Choose...</option>
</select>
</form>
</div>
</div>
<div class="row my-5">
<div class="col-6">
<h2>Custom Options</h2>
<form>
<div class="form-group">
<select class="form-control selectize-custom" multiple></select>
<label for="select-3">Small</label>
<select class="form-control form-control-sm selectize-single" id="select-3">
<option value selected>Choose...</option>
<option value="Red">Red</option>
<option value="Yellow">Yellow</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
<option value="Purple">Purple</option>
<option value="Magenta">Magenta</option>
<option value="Pink">Pink</option>
<option value="Black">Black</option>
<option value="White">White</option>
<option value="Gray">Gray</option>
</select>
</div>
<div class="form-group">
<label for="select-4">RTL</label>
<select class="form-control selectize-single" id="select-4" dir="rtl">
<option value selected>Choose...</option>
<option value="Red">Red</option>
<option value="Yellow">Yellow</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
<option value="Purple">Purple</option>
<option value="Magenta">Magenta</option>
<option value="Pink">Pink</option>
<option value="Black">Black</option>
<option value="White">White</option>
<option value="Gray">Gray</option>
</select>
</div>
</form>
</div>
<div class="col-6">
<h2>Option Groups</h2>
<form>
<div class="form-group">
<select class="form-control selectize-single">
<label for="select-5">Option Groups</label>
<select class="form-control selectize-single" id="select-5">
<option value selected>Choose...</option>
<optgroup label="Climbing">
<option value="climbing0">Bolts</option>
Expand All @@ -103,43 +97,110 @@ <h2>Option Groups</h2>
</select>
</div>
</form>
</div>
</div>
<div class="row my-5">
<div class="col-6">
<h2>Input Groups</h2>
<form>
<form class="form-inline my-2">
<label class="mr-2" for="select-6">Inline</label>
<select class="form-control w-50 selectize-single" id="select-6">
<option value selected>Choose...</option>
<option value="Red">Red</option>
<option value="Yellow">Yellow</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
<option value="Purple">Purple</option>
<option value="Magenta">Magenta</option>
<option value="Pink">Pink</option>
<option value="Black">Black</option>
<option value="White">White</option>
<option value="Gray">Gray</option>
</select>
</form>
<form class="form-inline my-2">
<label class="mr-2" for="select-13">Input Group</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
<div class="input-group-text">Color</div>
</div>
<select class="form-control selectize-single">
<select class="form-control selectize-single" id="select-13">
<option value selected>Choose...</option>
<option value="0">john@example.com</option>
<option value="1">johndoe@example.com</option>
<option value="Red">Red</option>
<option value="Yellow">Yellow</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
<option value="Purple">Purple</option>
<option value="Magenta">Magenta</option>
<option value="Pink">Pink</option>
<option value="Black">Black</option>
<option value="White">White</option>
<option value="Gray">Gray</option>
</select>
<div class="input-group-append">
<div class="input-group-text">!</div>
</div>
</div>
</form>
</div>
<div class="col-6">
<h2>Sizing</h2>
<h2>Multiple Select</h2>
<form>
<div class="form-group">
<select class="form-control form-control-lg selectize-single">
<option value selected>Choose...</option>
<option>Red</option>
<option>Green</option>
<option>Blue</option>
<label for="select-7">Regular</label>
<select class="form-control selectize-multiple" id="select-7" multiple>
<option value="Red" selected>Red</option>
<option value="Green" selected>Green</option>
<option value="Blue" selected>Blue</option>
</select>
</div>
<div class="form-group">
<select class="form-control form-control-sm selectize-single">
<option value selected>Choose...</option>
<option>Red</option>
<option>Green</option>
<option>Blue</option>
<label for="select-8">Large</label>
<select class="form-control form-control-lg selectize-multiple" id="select-8" multiple>
<option value="Red" selected>Red</option>
<option value="Green" selected>Green</option>
<option value="Blue" selected>Blue</option>
</select>
</div>
<div class="form-group">
<label for="select-9">Small</label>
<select class="form-control form-control-sm selectize-multiple" id="select-9" multiple>
<option value="Red" selected>Red</option>
<option value="Green" selected>Green</option>
<option value="Blue" selected>Blue</option>
</select>
</div>
<div class="form-group">
<label for="select-10">RTL</label>
<select class="form-control selectize-multiple" id="select-10" multiple dir="rtl">
<option value="Red" selected>Red</option>
<option value="Green" selected>Green</option>
<option value="Blue" selected>Blue</option>
</select>
</div>
<div class="form-group">
<label for="select-11">Custom Options</label>
<select class="form-control selectize-custom" id="select-11" multiple></select>
</div>
</form>
<form class="form-inline my-2">
<label class="mr-2" for="select-12">Inline</label>
<select class="form-control w-50 selectize-multiple" id="select-12" multiple>
<option value="Red" selected>Red</option>
<option value="Green" selected>Green</option>
<option value="Blue" selected>Blue</option>
</select>
</form>
<form class="form-inline my-2">
<label class="mr-2" for="select-14">Input Group</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">Color</div>
</div>
<select class="form-control selectize-multiple" id="select-14" multiple>
<option value="Red" selected>Red</option>
<option value="Green" selected>Green</option>
<option value="Blue" selected>Blue</option>
</select>
<div class="input-group-append">
<div class="input-group-text">!</div>
</div>
</div>
</form>
</div>
</div>
Expand Down
Loading

0 comments on commit 60acae1

Please sign in to comment.