11/*
2- * Select.js Library v0.4 .0
2+ * Select.js Library v0.5 .0
33 *
44 * Copyright 2023 Bunoon
55 * Released under the MIT License
66 */
7- /*
8- -------------------------------------------------------------------------
9- Select.js - Variables
10- -------------------------------------------------------------------------
11- */
127: root {
8+ --select-js-default-font : system-ui, -apple-system, "Segoe UI" , Roboto, "Helvetica Neue" , "Noto Sans" , "Liberation Sans" , Arial, sans-serif, "Apple Color Emoji" , "Segoe UI Emoji" , "Segoe UI Symbol" , "Noto Color Emoji" ;
139 --select-js-color-black : # 3b3a3a ;
1410 --select-js-color-white : # F5F5F5 ;
1511 --select-js-color-gray : # AAAAAA ;
3228 -------------------------------------------------------------------------
3329*/
3430div .select-js {
35- font-family : "Montserrat" , sans-serif;
31+ -moz-user-select : none;
32+ -webkit-user-select : none;
33+ -ms-user-select : none;
34+ -o-user-select : none;
35+ user-select : none;
36+ cursor : default;
37+ box-sizing : border-box;
38+ line-height : normal;
39+ font-family : var (--select-js-default-font );
3640 font-size : 0.8rem ;
3741 margin-bottom : var (--select-js-spacing );
3842 position : relative;
3943}
4044div .select-js * {
41- box-sizing : content -box;
45+ box-sizing : border -box;
4246 line-height : normal;
4347}
4448div .select-js * ::before , div .select-js * ::after {
45- box-sizing : content -box;
49+ box-sizing : border -box;
4650 line-height : normal;
4751}
4852div .select-js select {
@@ -66,9 +70,6 @@ div.select-js div.drop-down {
6670 background-color : var (--select-js-container-background-color-drop-down );
6771 border : var (--select-js-border-size ) solid var (--select-js-container-border-color-drop-down );
6872 border-radius : var (--select-js-border-radius );
69- -webkit-user-select : none;
70- -ms-user-select : none;
71- user-select : none;
7273 position : absolute;
7374 width : 100% ;
7475 z-index : 10 ;
@@ -81,14 +82,14 @@ div.select-js div.drop-down {
8182div .select-js div .drop-down div .item {
8283 padding : var (--select-js-spacing );
8384 border-bottom : var (--select-js-border-size ) var (--select-js-color-black ) dotted;
85+ transition : var (--select-js-transition );
8486}
8587div .select-js div .drop-down div .item : last-child {
8688 border-bottom : none;
8789}
8890div .select-js div .drop-down div .item : hover {
8991 cursor : pointer;
9092 background-color : var (--select-js-color-light-gray );
91- transition : var (--select-js-transition );
9293}
9394div .select-js div .drop-down div .selected {
9495 color : var (--select-js-color-gray );
@@ -101,30 +102,26 @@ div.select-js div.drop-down div.selected {
101102 -------------------------------------------------------------------------
102103*/
103104div .select-js div .control {
104- -webkit-user-select : none;
105- -ms-user-select : none;
106- user-select : none;
107105 position : relative;
108106}
109107div .select-js div .control div .button {
110108 position : absolute;
111109 border-right : 5px solid var (--select-js-color-black );
112110 border-bottom : 5px solid var (--select-js-color-black );
113- height : 8 px ;
114- width : 8 px ;
111+ height : 14 px ;
112+ width : 14 px ;
115113 right : 14px ;
116114 top : 14px ;
117115 transform : rotate (45deg );
116+ transition : var (--select-js-transition );
118117}
119118div .select-js div .control div .button : hover {
120119 cursor : pointer;
121120 opacity : 0.7 ;
122- transition : var (--select-js-transition );
123121}
124122div .select-js div .control div .button : active {
125123 cursor : pointer;
126124 opacity : 0.5 ;
127- transition : var (--select-js-transition );
128125}
129126div .select-js div .control div .button-open {
130127 transform : rotate (-135deg );
@@ -148,11 +145,11 @@ div.select-js div.control div.selected-item div.remove {
148145 margin-left : var (--select-js-spacing );
149146 display : inline-block;
150147 font-weight : bold;
148+ transition : var (--select-js-transition );
151149}
152150div .select-js div .control div .selected-item div .remove : hover {
153151 cursor : pointer;
154152 opacity : 0.7 ;
155- transition : var (--select-js-transition );
156153}
157154div .select-js div .control div .no-items-selected {
158155 background-color : var (--select-js-color-light-gray );
0 commit comments