diff --git a/README.md b/README.md index 2768401..7fb0677 100644 --- a/README.md +++ b/README.md @@ -24,7 +24,7 @@ Several quick start options are available: -- [Download the latest release](https://github.com/const-se/selectize-bootstrap4-theme/archive/v2.0.1.zip) +- [Download the latest release](https://github.com/const-se/selectize-bootstrap4-theme/archive/v2.0.2.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` @@ -35,8 +35,8 @@ Read the [Documentation](docs/en/index.md) for more information. ## TODO - Attribute `readonly` support +- Pseudo-classes `:valid`, `:invalid` support - Bootstrap class `custom-select` support -- Bootstrap form validation support - Selectize plugin styles support ## Creators diff --git a/composer.json b/composer.json index 6ee7272..9174db9 100644 --- a/composer.json +++ b/composer.json @@ -1,7 +1,7 @@ { "name": "const-se/selectize-bootstrap4-theme", "type": "library", - "version": "2.0.1", + "version": "2.0.2", "license": "Apache-2.0", "description": "Selectize Theme for Bootstrap 4", "keywords": [ diff --git a/dist/css/selectize.bootstrap4.css b/dist/css/selectize.bootstrap4.css index 4b9401b..975f204 100644 --- a/dist/css/selectize.bootstrap4.css +++ b/dist/css/selectize.bootstrap4.css @@ -1,5 +1,5 @@ /*! - * Selectize Theme for Bootstrap 4 v2.0.1 + * Selectize Theme for Bootstrap 4 v2.0.2 * * Copyright 2018 Constantine Seleznyoff * @@ -275,6 +275,24 @@ margin: 0 0 0 3px; } +.form-control.selectize-control.is-valid .selectize-input { + border-color: #28a745; +} + +.form-control.selectize-control.is-valid .selectize-input:focus { + border-color: #28a745; + box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); +} + +.form-control.selectize-control.is-invalid .selectize-input { + border-color: #dc3545; +} + +.form-control.selectize-control.is-invalid .selectize-input:focus { + border-color: #dc3545; + box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); +} + .form-control-lg.selectize-control { height: calc(2.875rem + 2px); padding: 0; diff --git a/dist/examples.html b/dist/examples.html index 4cb6387..978b98b 100644 --- a/dist/examples.html +++ b/dist/examples.html @@ -96,6 +96,20 @@

Single Select

+
+ + +
Looks good!
+
+
+ + +
Please provide valid color.
+
@@ -177,6 +191,20 @@

Multiple Select

+
+ + +
Looks good!
+
+
+ + +
Please provide valid color.
+
diff --git a/docs/en/index.md b/docs/en/index.md index 1c3149e..a2ae7d0 100644 --- a/docs/en/index.md +++ b/docs/en/index.md @@ -18,7 +18,7 @@ Selectize Theme (SCSS) based on the Bootstrap 4 components. ## Install -- [Download the latest release](https://github.com/const-se/selectize-bootstrap4-theme/archive/v2.0.1.zip) +- [Download the latest release](https://github.com/const-se/selectize-bootstrap4-theme/archive/v2.0.2.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` diff --git a/package-lock.json b/package-lock.json index f5a98db..10798c1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "selectize-bootstrap4-theme", - "version": "2.0.1", + "version": "2.0.2", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 9e29cfb..0be676f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "selectize-bootstrap4-theme", - "version": "2.0.1", + "version": "2.0.2", "license": "Apache-2.0", "main": "index.js", "description": "Selectize Theme for Bootstrap 4", diff --git a/scss/_mixins.scss b/scss/_mixins.scss new file mode 100644 index 0000000..5f9c673 --- /dev/null +++ b/scss/_mixins.scss @@ -0,0 +1,42 @@ +@mixin selectize-control-size($height, $border-radius, $font-size, $padding-x, $padding-y) { + height: $height; + padding: 0; + + .selectize-input { + font-size: $font-size; + padding: $padding-y $padding-x; + @include border-radius($border-radius); + } + + &.single { + $arrow-padding: calc(#{$padding-x} + #{$selectize-input-arrow-width} + #{$padding-y}); + + .selectize-input { + padding-right: $arrow-padding; + } + + &.rtl { + .selectize-input { + padding-left: $arrow-padding; + padding-right: $padding-x; + } + } + } + + &.multi { + min-height: $height; + } +} + +@mixin selectize-control-validation-state($state, $color, $spread) { + &.is-#{$state} { + .selectize-input { + border-color: $color; + + &:focus { + border-color: $color; + box-shadow: 0 0 0 $spread rgba($color, .25); + } + } + } +} diff --git a/scss/_variables.scss b/scss/_variables.scss index 4c57dbc..84eda82 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -5,10 +5,14 @@ $selectize-input-bg-disabled: $input-disabled-bg !default; $selectize-input-bg-focus: $input-focus-bg !default; $selectize-input-border-color: $input-border-color !default; $selectize-input-border-color-focus: $input-focus-border-color !default; +$selectize-input-border-color-invalid: $form-feedback-invalid-color !default; +$selectize-input-border-color-valid: $form-feedback-valid-color !default; $selectize-input-border-radius: $input-border-radius !default; $selectize-input-border-width: $input-border-width !default; $selectize-input-box-shadow: $input-box-shadow !default; $selectize-input-box-shadow-focus: $input-focus-box-shadow !default; +$selectize-input-box-shadow-spread-invalid: $input-focus-width !default; +$selectize-input-box-shadow-spread-valid: $input-focus-width !default; $selectize-input-color: $input-color !default; $selectize-input-color-disabled: $selectize-input-color !default; $selectize-input-color-focus: $input-focus-color !default; diff --git a/scss/selectize.bootstrap4.scss b/scss/selectize.bootstrap4.scss index 8dfcda9..0a07934 100644 --- a/scss/selectize.bootstrap4.scss +++ b/scss/selectize.bootstrap4.scss @@ -1,5 +1,5 @@ /*! - * Selectize Theme for Bootstrap 4 v2.0.1 + * Selectize Theme for Bootstrap 4 v2.0.2 * * Copyright 2018 Constantine Seleznyoff * @@ -20,6 +20,7 @@ @import "node_modules/bootstrap/scss/variables"; @import "node_modules/bootstrap/scss/mixins"; @import "variables"; +@import "mixins"; .form-control { &.selectize-control { @@ -302,66 +303,21 @@ } } } + + @include selectize-control-validation-state('valid', $selectize-input-border-color-valid, $selectize-input-box-shadow-spread-valid); + @include selectize-control-validation-state('invalid', $selectize-input-border-color-invalid, $selectize-input-box-shadow-spread-invalid); } } .form-control-lg { &.selectize-control { - height: $selectize-input-height-lg; - padding: 0; - - .selectize-input { - font-size: $selectize-input-font-size-lg; - padding: $selectize-input-padding-y-lg $selectize-input-padding-x-lg; - @include border-radius($selectize-input-border-radius-lg); - } - - &.single { - .selectize-input { - padding-right: calc(#{$selectize-input-padding-x-lg} + #{$selectize-input-arrow-width} + #{$selectize-input-padding-y-lg}); - } - - &.rtl { - .selectize-input { - padding-left: calc(#{$selectize-input-padding-x-lg} + #{$selectize-input-arrow-width} + #{$selectize-input-padding-y-lg}); - padding-right: $selectize-input-padding-x-lg; - } - } - } - - &.multi { - min-height: $selectize-input-height-lg; - } + @include selectize-control-size($selectize-input-height-lg, $selectize-input-border-radius-lg, $selectize-input-font-size-lg, $selectize-input-padding-x-lg, $selectize-input-padding-y-lg); } } .form-control-sm { &.selectize-control { - height: $selectize-input-height-sm; - padding: 0; - - .selectize-input { - font-size: $selectize-input-font-size-sm; - padding: $selectize-input-padding-y-sm $selectize-input-padding-x-sm; - @include border-radius($selectize-input-border-radius-sm); - } - - &.single { - .selectize-input { - padding-right: calc(#{$selectize-input-padding-x-sm} + #{$selectize-input-arrow-width} + #{$selectize-input-padding-y-sm}); - } - - &.rtl { - .selectize-input { - padding-left: calc(#{$selectize-input-padding-x-sm} + #{$selectize-input-arrow-width} + #{$selectize-input-padding-y-sm}); - padding-right: $selectize-input-padding-x-sm; - } - } - } - - &.multi { - min-height: $selectize-input-height-sm; - } + @include selectize-control-size($selectize-input-height-sm, $selectize-input-border-radius-sm, $selectize-input-font-size-sm, $selectize-input-padding-x-sm, $selectize-input-padding-y-sm); } } diff --git a/template/examples.pug b/template/examples.pug index 9ad050b..c0ab4e1 100644 --- a/template/examples.pug +++ b/template/examples.pug @@ -46,6 +46,16 @@ html optgroup(label='Skiing') each option, index in ['Poles', 'Skins', 'Skis'] option(value='skiing' + index)= option + div(class='form-group') + label(for='select-15') Valid Select Value + select(id='select-15' class='form-control is-valid selectize-single') + option(value='green' selected) Green + div(class='valid-feedback') Looks good! + div(class='form-group') + label(for='select-16') Invalid Select Value + select(id='select-16' class='form-control is-invalid selectize-single') + option(value='red' selected) Red + div(class='invalid-feedback') Please provide valid color. form(class='form-inline my-2') label(for='select-6' class='mr-2') Inline select(id='select-6' class='form-control w-50 selectize-single') @@ -89,6 +99,16 @@ html div(class='form-group') label(for='select-11') Custom Options select(id='select-11' class='form-control selectize-custom' multiple) + div(class='form-group') + label(for='select-17') Valid Select Value + select(id='select-17' class='form-control is-valid selectize-multiple' multiple) + option(value='green' selected) Green + div(class='valid-feedback') Looks good! + div(class='form-group') + label(for='select-18') Invalid Select Value + select(id='select-18' class='form-control is-invalid selectize-multiple' multiple) + option(value='red' selected) Red + div(class='invalid-feedback') Please provide valid color. form(class='form-inline my-2') label(for='select-12' class='mr-2') Inline select(id='select-12' class='form-control w-50 selectize-multiple' multiple)