diff --git a/README.md b/README.md
index 78fb05b..79ef389 100644
--- a/README.md
+++ b/README.md
@@ -2,15 +2,15 @@
Select.js
[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Select.js%2C%20a%20free%20JavaScript%select%builder&url=https://github.com/williamtroup/Select.js&hashtags=javascript,html,select)
-[![npm](https://img.shields.io/badge/npmjs-v0.3.0-blue)](https://www.npmjs.com/package/jselect.js)
-[![nuget](https://img.shields.io/badge/nuget-v0.3.0-purple)](https://www.nuget.org/packages/jSelect.js/)
+[![npm](https://img.shields.io/badge/npmjs-v0.4.0-blue)](https://www.npmjs.com/package/jselect.js)
+[![nuget](https://img.shields.io/badge/nuget-v0.4.0-purple)](https://www.nuget.org/packages/jSelect.js/)
[![license](https://img.shields.io/badge/license-MIT-green)](https://github.com/williamtroup/Select.js/blob/main/LICENSE.txt)
[![discussions Welcome](https://img.shields.io/badge/discussions-Welcome-red)](https://github.com/williamtroup/Select.js/discussions)
[![coded by William Troup](https://img.shields.io/badge/coded_by-William_Troup-yellow)](https://github.com/williamtroup)
>
A lightweight, and easy-to-use, JavaScript library for creating multi-select drop-down lists!
-> v0.3.0
+> v0.4.0
![Select.js](docs/images/main.png)
diff --git a/README_NUGET.md b/README_NUGET.md
index 3a03a7e..20f34d1 100644
--- a/README_NUGET.md
+++ b/README_NUGET.md
@@ -1,8 +1,8 @@
-# Select.js v0.3.0
+# Select.js v0.4.0
[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Select.js%2C%20a%20free%20JavaScript%select%builder&url=https://github.com/williamtroup/Select.js&hashtags=javascript,html,select)
-[![npm](https://img.shields.io/badge/npmjs-v0.3.0-blue)](https://www.npmjs.com/package/jselect.js)
-[![nuget](https://img.shields.io/badge/nuget-v0.3.0-purple)](https://www.nuget.org/packages/jSelect.js/)
+[![npm](https://img.shields.io/badge/npmjs-v0.4.0-blue)](https://www.npmjs.com/package/jselect.js)
+[![nuget](https://img.shields.io/badge/nuget-v0.4.0-purple)](https://www.nuget.org/packages/jSelect.js/)
[![license](https://img.shields.io/badge/license-MIT-green)](https://github.com/williamtroup/Select.js/blob/main/LICENSE.txt)
[![discussions Welcome](https://img.shields.io/badge/discussions-Welcome-red)](https://github.com/williamtroup/Select.js/discussions)
[![coded by William Troup](https://img.shields.io/badge/coded_by-William_Troup-yellow)](https://github.com/williamtroup)
diff --git a/dist/select.js b/dist/select.js
index c676a14..6d8d20e 100644
--- a/dist/select.js
+++ b/dist/select.js
@@ -1,4 +1,4 @@
-/*! Select.js v0.3.0 | (c) Bunoon | MIT License */
+/*! Select.js v0.4.0 | (c) Bunoon | MIT License */
(function() {
function render() {
var tagTypes = _configuration.domElementTypes;
@@ -376,7 +376,7 @@
return this;
};
this.getVersion = function() {
- return "0.3.0";
+ return "0.4.0";
};
(function(documentObject, windowObject) {
_parameter_Document = documentObject;
diff --git a/dist/select.js.css b/dist/select.js.css
index 90e54c5..6636842 100644
--- a/dist/select.js.css
+++ b/dist/select.js.css
@@ -1,5 +1,5 @@
/*
- * Select.js Library v0.3.0
+ * Select.js Library v0.4.0
*
* Copyright 2023 Bunoon
* Released under the MIT License
@@ -10,20 +10,20 @@
-------------------------------------------------------------------------
*/
:root {
- --color-black: #3b3a3a;
- --color-white: #F5F5F5;
- --color-gray: #AAAAAA;
- --color-light-gray: #CCCCCC;
- --container-background-color: #e8e6e6;
- --container-border-color: #3b3a3a;
- --container-background-color-drop-down: #e8e6e6;
- --container-border-color-drop-down: #3b3a3a;
- --border-radius: 0.5rem;
- --border-style-scrollbar: inset 0 0 6px --color-dark-gray;
- --border-size: 0.5px;
- --transition: all .3s;
- --spacing-shadow-size: 4px;
- --spacing: 8px;
+ --select-js-color-black: #3b3a3a;
+ --select-js-color-white: #F5F5F5;
+ --select-js-color-gray: #AAAAAA;
+ --select-js-color-light-gray: #CCCCCC;
+ --select-js-container-background-color: #e8e6e6;
+ --select-js-container-border-color: #3b3a3a;
+ --select-js-container-background-color-drop-down: #e8e6e6;
+ --select-js-container-border-color-drop-down: #3b3a3a;
+ --select-js-border-radius: 0.5rem;
+ --select-js-border-style-scrollbar: inset 0 0 6px --color-dark-gray;
+ --select-js-border-size: 0.5px;
+ --select-js-transition: all .3s;
+ --select-js-spacing-shadow-size: 4px;
+ --select-js-spacing: 8px;
}
/*
@@ -34,7 +34,7 @@
div.select-js {
font-family: "Montserrat", sans-serif;
font-size: 0.8rem;
- margin-bottom: var(--spacing);
+ margin-bottom: var(--select-js-spacing);
position: relative;
}
div.select-js * {
@@ -49,10 +49,10 @@ div.select-js select {
display: none !important;
}
div.select-js div.control {
- background-color: var(--container-background-color);
- border: var(--border-size) solid var(--container-border-color);
- border-radius: var(--border-radius);
- padding: calc(var(--spacing) - 2px);
+ background-color: var(--select-js-container-background-color);
+ border: var(--select-js-border-size) solid var(--select-js-container-border-color);
+ border-radius: var(--select-js-border-radius);
+ padding: calc(var(--select-js-spacing) - 2px);
padding-right: 32px;
overflow: hidden;
}
@@ -63,9 +63,9 @@ div.select-js div.control {
-------------------------------------------------------------------------
*/
div.select-js div.drop-down {
- background-color: var(--container-background-color-drop-down);
- border: var(--border-size) solid var(--container-border-color-drop-down);
- border-radius: var(--border-radius);
+ background-color: var(--select-js-container-background-color-drop-down);
+ border: var(--select-js-border-size) solid var(--select-js-container-border-color-drop-down);
+ border-radius: var(--select-js-border-radius);
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
@@ -74,24 +74,24 @@ div.select-js div.drop-down {
z-index: 10;
max-height: 400px;
margin-top: 2px;
- box-shadow: var(--spacing-shadow-size) var(--spacing-shadow-size) var(--spacing-shadow-size) var(--color-gray);
+ box-shadow: var(--select-js-spacing-shadow-size) var(--select-js-spacing-shadow-size) var(--select-js-spacing-shadow-size) var(--select-js-color-gray);
overflow-y: auto;
overflow-x: hidden;
}
div.select-js div.drop-down div.item {
- padding: var(--spacing);
- border-bottom: var(--border-size) var(--color-black) dotted;
+ padding: var(--select-js-spacing);
+ border-bottom: var(--select-js-border-size) var(--select-js-color-black) dotted;
}
div.select-js div.drop-down div.item:last-child {
border-bottom: none;
}
div.select-js div.drop-down div.item:hover {
cursor: pointer;
- background-color: var(--color-light-gray);
- transition: var(--transition);
+ background-color: var(--select-js-color-light-gray);
+ transition: var(--select-js-transition);
}
div.select-js div.drop-down div.selected {
- color: var(--color-gray);
+ color: var(--select-js-color-gray);
font-style: italic;
}
@@ -108,8 +108,8 @@ div.select-js div.control {
}
div.select-js div.control div.button {
position: absolute;
- border-right: 5px solid var(--color-black);
- border-bottom: 5px solid var(--color-black);
+ border-right: 5px solid var(--select-js-color-black);
+ border-bottom: 5px solid var(--select-js-color-black);
height: 8px;
width: 8px;
right: 14px;
@@ -119,46 +119,46 @@ div.select-js div.control div.button {
div.select-js div.control div.button:hover {
cursor: pointer;
opacity: 0.7;
- transition: var(--transition);
+ transition: var(--select-js-transition);
}
div.select-js div.control div.button:active {
cursor: pointer;
opacity: 0.5;
- transition: var(--transition);
+ transition: var(--select-js-transition);
}
div.select-js div.control div.button-open {
transform: rotate(-135deg);
top: 18px;
}
div.select-js div.control div.selected-item {
- padding: var(--spacing);
- background-color: var(--color-gray);
- border-radius: var(--border-radius);
+ padding: var(--select-js-spacing);
+ background-color: var(--select-js-color-gray);
+ border-radius: var(--select-js-border-radius);
display: inline-block;
margin: 2px;
- margin-right: var(--spacing);
+ margin-right: var(--select-js-spacing);
}
div.select-js div.control div.selected-item:last-child {
margin-right: 0;
}
div.select-js div.control div.selected-item span.text {
- color: var(--color-black);
+ color: var(--select-js-color-black);
}
div.select-js div.control div.selected-item div.remove {
- margin-left: var(--spacing);
+ margin-left: var(--select-js-spacing);
display: inline-block;
font-weight: bold;
}
div.select-js div.control div.selected-item div.remove:hover {
cursor: pointer;
opacity: 0.7;
- transition: var(--transition);
+ transition: var(--select-js-transition);
}
div.select-js div.control div.no-items-selected {
- background-color: var(--color-light-gray);
- border-radius: var(--border-radius);
+ background-color: var(--select-js-color-light-gray);
+ border-radius: var(--select-js-border-radius);
font-style: italic;
- color: var(--color-black);
- padding: var(--spacing);
+ color: var(--select-js-color-black);
+ padding: var(--select-js-spacing);
display: inline-block;
}/*# sourceMappingURL=select.js.css.map */
\ No newline at end of file
diff --git a/dist/select.js.min.css b/dist/select.js.min.css
index 25cc9e8..8f27a08 100644
--- a/dist/select.js.min.css
+++ b/dist/select.js.min.css
@@ -1,2 +1,2 @@
-/* Select.js v0.3.0 | (c) Bunoon | MIT License */
-:root{--color-black:#3b3a3a;--color-white:#F5F5F5;--color-gray:#AAA;--color-light-gray:#CCC;--container-background-color:#e8e6e6;--container-border-color:#3b3a3a;--container-background-color-drop-down:#e8e6e6;--container-border-color-drop-down:#3b3a3a;--border-radius:.5rem;--border-style-scrollbar:inset 0 0 6px --color-dark-gray;--border-size:.5px;--transition:all .3s;--spacing-shadow-size:4px;--spacing:8px}div.select-js{font-family:"Montserrat",sans-serif;font-size:.8rem;margin-bottom:var(--spacing);position:relative}div.select-js *{box-sizing:content-box;line-height:normal}div.select-js *::before,div.select-js *::after{box-sizing:content-box;line-height:normal}div.select-js select{display:none!important}div.select-js div.control{background-color:var(--container-background-color);border:var(--border-size) solid var(--container-border-color);border-radius:var(--border-radius);padding:calc(var(--spacing) - 2px);padding-right:32px;overflow:hidden}div.select-js div.drop-down{background-color:var(--container-background-color-drop-down);border:var(--border-size) solid var(--container-border-color-drop-down);border-radius:var(--border-radius);-webkit-user-select:none;-ms-user-select:none;user-select:none;position:absolute;width:100%;z-index:10;max-height:400px;margin-top:2px;box-shadow:var(--spacing-shadow-size) var(--spacing-shadow-size) var(--spacing-shadow-size) var(--color-gray);overflow-y:auto;overflow-x:hidden}div.select-js div.drop-down div.item{padding:var(--spacing);border-bottom:var(--border-size) var(--color-black) dotted}div.select-js div.drop-down div.item:last-child{border-bottom:none}div.select-js div.drop-down div.item:hover{cursor:pointer;background-color:var(--color-light-gray);transition:var(--transition)}div.select-js div.drop-down div.selected{color:var(--color-gray);font-style:italic}div.select-js div.control{-webkit-user-select:none;-ms-user-select:none;user-select:none;position:relative}div.select-js div.control div.button{position:absolute;border-right:5px solid var(--color-black);border-bottom:5px solid var(--color-black);height:8px;width:8px;right:14px;top:14px;transform:rotate(45deg)}div.select-js div.control div.button:hover{cursor:pointer;opacity:.7;transition:var(--transition)}div.select-js div.control div.button:active{cursor:pointer;opacity:.5;transition:var(--transition)}div.select-js div.control div.button-open{transform:rotate(-135deg);top:18px}div.select-js div.control div.selected-item{padding:var(--spacing);background-color:var(--color-gray);border-radius:var(--border-radius);display:inline-block;margin:2px;margin-right:var(--spacing)}div.select-js div.control div.selected-item:last-child{margin-right:0}div.select-js div.control div.selected-item span.text{color:var(--color-black)}div.select-js div.control div.selected-item div.remove{margin-left:var(--spacing);display:inline-block;font-weight:700}div.select-js div.control div.selected-item div.remove:hover{cursor:pointer;opacity:.7;transition:var(--transition)}div.select-js div.control div.no-items-selected{background-color:var(--color-light-gray);border-radius:var(--border-radius);font-style:italic;color:var(--color-black);padding:var(--spacing);display:inline-block}
\ No newline at end of file
+/* Select.js v0.4.0 | (c) Bunoon | MIT License */
+:root{--select-js-color-black:#3b3a3a;--select-js-color-white:#F5F5F5;--select-js-color-gray:#AAA;--select-js-color-light-gray:#CCC;--select-js-container-background-color:#e8e6e6;--select-js-container-border-color:#3b3a3a;--select-js-container-background-color-drop-down:#e8e6e6;--select-js-container-border-color-drop-down:#3b3a3a;--select-js-border-radius:.5rem;--select-js-border-style-scrollbar:inset 0 0 6px --color-dark-gray;--select-js-border-size:.5px;--select-js-transition:all .3s;--select-js-spacing-shadow-size:4px;--select-js-spacing:8px}div.select-js{font-family:"Montserrat",sans-serif;font-size:.8rem;margin-bottom:var(--select-js-spacing);position:relative}div.select-js *{box-sizing:content-box;line-height:normal}div.select-js *::before,div.select-js *::after{box-sizing:content-box;line-height:normal}div.select-js select{display:none!important}div.select-js div.control{background-color:var(--select-js-container-background-color);border:var(--select-js-border-size) solid var(--select-js-container-border-color);border-radius:var(--select-js-border-radius);padding:calc(var(--select-js-spacing) - 2px);padding-right:32px;overflow:hidden}div.select-js div.drop-down{background-color:var(--select-js-container-background-color-drop-down);border:var(--select-js-border-size) solid var(--select-js-container-border-color-drop-down);border-radius:var(--select-js-border-radius);-webkit-user-select:none;-ms-user-select:none;user-select:none;position:absolute;width:100%;z-index:10;max-height:400px;margin-top:2px;box-shadow:var(--select-js-spacing-shadow-size) var(--select-js-spacing-shadow-size) var(--select-js-spacing-shadow-size) var(--select-js-color-gray);overflow-y:auto;overflow-x:hidden}div.select-js div.drop-down div.item{padding:var(--select-js-spacing);border-bottom:var(--select-js-border-size) var(--select-js-color-black) dotted}div.select-js div.drop-down div.item:last-child{border-bottom:none}div.select-js div.drop-down div.item:hover{cursor:pointer;background-color:var(--select-js-color-light-gray);transition:var(--select-js-transition)}div.select-js div.drop-down div.selected{color:var(--select-js-color-gray);font-style:italic}div.select-js div.control{-webkit-user-select:none;-ms-user-select:none;user-select:none;position:relative}div.select-js div.control div.button{position:absolute;border-right:5px solid var(--select-js-color-black);border-bottom:5px solid var(--select-js-color-black);height:8px;width:8px;right:14px;top:14px;transform:rotate(45deg)}div.select-js div.control div.button:hover{cursor:pointer;opacity:.7;transition:var(--select-js-transition)}div.select-js div.control div.button:active{cursor:pointer;opacity:.5;transition:var(--select-js-transition)}div.select-js div.control div.button-open{transform:rotate(-135deg);top:18px}div.select-js div.control div.selected-item{padding:var(--select-js-spacing);background-color:var(--select-js-color-gray);border-radius:var(--select-js-border-radius);display:inline-block;margin:2px;margin-right:var(--select-js-spacing)}div.select-js div.control div.selected-item:last-child{margin-right:0}div.select-js div.control div.selected-item span.text{color:var(--select-js-color-black)}div.select-js div.control div.selected-item div.remove{margin-left:var(--select-js-spacing);display:inline-block;font-weight:700}div.select-js div.control div.selected-item div.remove:hover{cursor:pointer;opacity:.7;transition:var(--select-js-transition)}div.select-js div.control div.no-items-selected{background-color:var(--select-js-color-light-gray);border-radius:var(--select-js-border-radius);font-style:italic;color:var(--select-js-color-black);padding:var(--select-js-spacing);display:inline-block}
\ No newline at end of file
diff --git a/dist/select.min.js b/dist/select.min.js
index 1210252..11ab10f 100644
--- a/dist/select.min.js
+++ b/dist/select.min.js
@@ -1,4 +1,4 @@
-/*! Select.js v0.3.0 | (c) Bunoon | MIT License */
+/*! Select.js v0.4.0 | (c) Bunoon | MIT License */
(function(){function P(a,b,c){var f=m("div","control");a.appendChild(f);var e=m("div","drop-down");e.style.display="none";a.appendChild(e);c.showDropDownButton||(f.onclick=function(){J(f,e,b,c)});a={control:f,dropDown:e,select:b,bindingOptions:c,multiSelectEnabled:b.hasAttribute("multiple")};D.push(a);return a}function Q(a){if(a.bindingOptions.showDropDownButton){var b=m("div","button");a.control.appendChild(b);null!==a.dropDown&&"block"===a.dropDown.style.display&&(b.className+=u.space+"button-open");
b.onclick=function(){J(a)}}}function K(a){var b=a.select.options.length;a.dropDown.innerHTML=u.empty;for(var c=0;c
+
+
## Version 0.3.0:
#### **Binding Options - Custom Triggers:**
diff --git a/package.json b/package.json
index f7bf22c..6f05ca6 100644
--- a/package.json
+++ b/package.json
@@ -2,8 +2,9 @@
"name": "jselect.js",
"title": "Select.js",
"description": "A lightweight, and easy-to-use, JavaScript library for creating multi-select drop-down lists!",
- "version": "0.3.0",
+ "version": "0.4.0",
"main": "dist/select.js",
+ "homepage": "https://www.william-troup.com/select-js/",
"author": {
"name": "Bunoon"
},
diff --git a/select.js.nuspec b/select.js.nuspec
index ff8fe44..3b984ce 100644
--- a/select.js.nuspec
+++ b/select.js.nuspec
@@ -2,11 +2,11 @@
jSelect.js
- 0.3.0
+ 0.4.0
Select.js
A lightweight, and easy-to-use, JavaScript library for creating multi-select drop-down lists!
William Troup
- https://github.com/williamtroup/Select.js
+ https://www.william-troup.com/select-js/
README_NUGET.md
MIT
diff --git a/src/select.js b/src/select.js
index 03c9453..4bd80fe 100644
--- a/src/select.js
+++ b/src/select.js
@@ -4,7 +4,7 @@
* A lightweight, and easy-to-use, JavaScript library for creating multi-select drop-down lists!
*
* @file select.js
- * @version v0.3.0
+ * @version v0.4.0
* @author Bunoon
* @license MIT License
* @copyright Bunoon 2023
@@ -613,7 +613,7 @@
* @returns {string} The version number.
*/
this.getVersion = function() {
- return "0.3.0";
+ return "0.4.0";
};
diff --git a/src/select.js.scss b/src/select.js.scss
index 1f5135f..ff3a867 100644
--- a/src/select.js.scss
+++ b/src/select.js.scss
@@ -1,5 +1,5 @@
/*
- * Select.js Library v0.3.0
+ * Select.js Library v0.4.0
*
* Copyright 2023 Bunoon
* Released under the MIT License
@@ -14,28 +14,28 @@
:root {
// Colors
- --color-black: #3b3a3a;
- --color-white: #F5F5F5;
- --color-gray: #AAAAAA;
- --color-light-gray: #CCCCCC;
+ --select-js-color-black: #3b3a3a;
+ --select-js-color-white: #F5F5F5;
+ --select-js-color-gray: #AAAAAA;
+ --select-js-color-light-gray: #CCCCCC;
// Containers
- --container-background-color: #e8e6e6;
- --container-border-color: #3b3a3a;
- --container-background-color-drop-down: #e8e6e6;
- --container-border-color-drop-down: #3b3a3a;
+ --select-js-container-background-color: #e8e6e6;
+ --select-js-container-border-color: #3b3a3a;
+ --select-js-container-background-color-drop-down: #e8e6e6;
+ --select-js-container-border-color-drop-down: #3b3a3a;
// Borders
- --border-radius: 0.5rem;
- --border-style-scrollbar: inset 0 0 6px --color-dark-gray;
- --border-size: 0.5px;
+ --select-js-border-radius: 0.5rem;
+ --select-js-border-style-scrollbar: inset 0 0 6px --color-dark-gray;
+ --select-js-border-size: 0.5px;
// Transitions
- --transition: all .3s;
+ --select-js-transition: all .3s;
// Spacing/Sizing
- --spacing-shadow-size: 4px;
- --spacing: 8px;
+ --select-js-spacing-shadow-size: 4px;
+ --select-js-spacing: 8px;
}
@@ -48,7 +48,7 @@
div.select-js {
font-family: 'Montserrat', sans-serif;
font-size: 0.8rem;
- margin-bottom: var(--spacing);
+ margin-bottom: var(--select-js-spacing);
position: relative;
* {
@@ -67,10 +67,10 @@ div.select-js {
}
div.control {
- background-color: var(--container-background-color);
- border: var(--border-size) solid var(--container-border-color);
- border-radius: var(--border-radius);
- padding: calc( var(--spacing) - 2px );
+ background-color: var(--select-js-container-background-color);
+ border: var(--select-js-border-size) solid var(--select-js-container-border-color);
+ border-radius: var(--select-js-border-radius);
+ padding: calc( var(--select-js-spacing) - 2px );
padding-right: 32px;
overflow: hidden;
}
@@ -85,9 +85,9 @@ div.select-js {
div.select-js {
div.drop-down {
- background-color: var(--container-background-color-drop-down);
- border: var(--border-size) solid var(--container-border-color-drop-down);
- border-radius: var(--border-radius);
+ background-color: var(--select-js-container-background-color-drop-down);
+ border: var(--select-js-border-size) solid var(--select-js-container-border-color-drop-down);
+ border-radius: var(--select-js-border-radius);
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
@@ -96,13 +96,13 @@ div.select-js {
z-index: 10;
max-height: 400px;
margin-top: 2px;
- box-shadow: var(--spacing-shadow-size) var(--spacing-shadow-size) var(--spacing-shadow-size) var(--color-gray);
+ box-shadow: var(--select-js-spacing-shadow-size) var(--select-js-spacing-shadow-size) var(--select-js-spacing-shadow-size) var(--select-js-color-gray);
overflow-y: auto;
overflow-x: hidden;
div.item {
- padding: var(--spacing);
- border-bottom: var(--border-size) var(--color-black) dotted;
+ padding: var(--select-js-spacing);
+ border-bottom: var(--select-js-border-size) var(--select-js-color-black) dotted;
&:last-child {
border-bottom: none;
@@ -110,13 +110,13 @@ div.select-js {
&:hover {
cursor: pointer;
- background-color: var(--color-light-gray);
- transition: var( --transition );
+ background-color: var(--select-js-color-light-gray);
+ transition: var( --select-js-transition );
}
}
div.selected {
- color: var(--color-gray);
+ color: var(--select-js-color-gray);
font-style: italic;
}
}
@@ -138,8 +138,8 @@ div.select-js {
div.button {
position: absolute;
- border-right: 5px solid var(--color-black);
- border-bottom: 5px solid var(--color-black);
+ border-right: 5px solid var(--select-js-color-black);
+ border-bottom: 5px solid var(--select-js-color-black);
height: 8px;
width: 8px;
right: 14px;
@@ -149,13 +149,13 @@ div.select-js {
&:hover {
cursor: pointer;
opacity: 0.7;
- transition: var(--transition);
+ transition: var(--select-js-transition);
}
&:active {
cursor: pointer;
opacity: 0.5;
- transition: var(--transition);
+ transition: var(--select-js-transition);
}
}
@@ -165,40 +165,40 @@ div.select-js {
}
div.selected-item {
- padding: var(--spacing);
- background-color: var(--color-gray);
- border-radius: var(--border-radius);
+ padding: var(--select-js-spacing);
+ background-color: var(--select-js-color-gray);
+ border-radius: var(--select-js-border-radius);
display: inline-block;
margin: 2px;
- margin-right: var(--spacing);
+ margin-right: var(--select-js-spacing);
&:last-child {
margin-right: 0;
}
span.text {
- color: var(--color-black);
+ color: var(--select-js-color-black);
}
div.remove {
- margin-left: var(--spacing);
+ margin-left: var(--select-js-spacing);
display: inline-block;
font-weight: bold;
&:hover {
cursor: pointer;
opacity: 0.7;
- transition: var(--transition);
+ transition: var(--select-js-transition);
}
}
}
div.no-items-selected {
- background-color: var(--color-light-gray);
- border-radius: var(--border-radius);
+ background-color: var(--select-js-color-light-gray);
+ border-radius: var(--select-js-border-radius);
font-style: italic;
- color: var(--color-black);
- padding: var(--spacing);
+ color: var(--select-js-color-black);
+ padding: var(--select-js-spacing);
display: inline-block;
}
}