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; } }