Cleaning up some CSS.

jachin · Mar 26, 2024 · 43a4083 · 43a4083
1 parent 3ff8e98
commit 43a4083
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 24 deletions.
diff --git a/dist/much-select-debug.js b/dist/much-select-debug.js
@@ -1739,7 +1739,7 @@ class MuchSelect extends HTMLElement {
       }
 
       #value-casing.output-style-custom-html.multi .value {
-        border: 2px solid var(--black);
+        border: 2px solid black;
         border-radius:40px;
         padding:3px 10px;
         flex-grow: 0;
@@ -1768,8 +1768,8 @@ class MuchSelect extends HTMLElement {
         max-height: 300px;
         overflow-y: auto;
         cursor: default;
-        background-color: var(--white);
-        border: 1px solid var(--black);
+        background-color: white;
+        border: 1px solid black;
       }
 
       #dropdown.showing {
@@ -1788,8 +1788,8 @@ class MuchSelect extends HTMLElement {
       }
 
       .option.highlighted {
-        background-color: var(--black);
-        color: var(--white);
+        background-color: black;
+        color: white;
       }
 
       .option.disabled {
@@ -1826,7 +1826,7 @@ class MuchSelect extends HTMLElement {
         100% { transform: rotate(360deg); }
       }
       #wrapper .error-message ul li{
-        color:var(--red);
+        color: red;
         list-style:none;
         padding:0px;
       }
@@ -1838,7 +1838,7 @@ class MuchSelect extends HTMLElement {
         padding-left: 5px;
         margin-left:6px;
         padding-bottom:3px;
-        border-left: 1px dotted var(--border-left);
+        border-left: 1px dotted black;
       }
       #search-keyboard-events #search-keyboard-events-log {
         width:100px;

diff --git a/dist/much-select-elm-debug.js b/dist/much-select-elm-debug.js
@@ -20543,7 +20543,17 @@ var $author$project$MuchSelect$customHtmlDropdown = F4(
 					'showing ' + ($elm$core$String$fromInt(
 						$author$project$DropdownOptions$length(optionsForTheDropdown)) + (' of ' + ($elm$core$String$fromInt(
 						$author$project$OptionList$length(options)) + ' options'))))
-				])) : $elm$html$Html$text('');
+				])) : (($author$project$SelectionMode$showDropdownFooter(selectionMode) && (!$author$project$DropdownOptions$length(optionsForTheDropdown))) ? A2(
+			$elm$html$Html$div,
+			_List_fromArray(
+				[
+					$elm$html$Html$Attributes$id('dropdown-footer'),
+					A2($elm$html$Html$Attributes$attribute, 'part', 'dropdown-footer')
+				]),
+			_List_fromArray(
+				[
+					$elm$html$Html$text('options to select')
+				])) : $elm$html$Html$text(''));
 		return $author$project$SelectionMode$isDisabled(selectionMode) ? $elm$html$Html$text('') : A2(
 			$elm$html$Html$div,
 			_List_fromArray(

diff --git a/dist/much-select-elm.js b/dist/much-select-elm.js
@@ -15278,7 +15278,17 @@ var $author$project$MuchSelect$customHtmlDropdown = F4(
 					'showing ' + ($elm$core$String$fromInt(
 						$author$project$DropdownOptions$length(optionsForTheDropdown)) + (' of ' + ($elm$core$String$fromInt(
 						$author$project$OptionList$length(options)) + ' options'))))
-				])) : $elm$html$Html$text('');
+				])) : (($author$project$SelectionMode$showDropdownFooter(selectionMode) && (!$author$project$DropdownOptions$length(optionsForTheDropdown))) ? A2(
+			$elm$html$Html$div,
+			_List_fromArray(
+				[
+					$elm$html$Html$Attributes$id('dropdown-footer'),
+					A2($elm$html$Html$Attributes$attribute, 'part', 'dropdown-footer')
+				]),
+			_List_fromArray(
+				[
+					$elm$html$Html$text('options to select')
+				])) : $elm$html$Html$text(''));
 		return $author$project$SelectionMode$isDisabled(selectionMode) ? $elm$html$Html$text('') : A2(
 			$elm$html$Html$div,
 			_List_fromArray(

diff --git a/dist/much-select.js b/dist/much-select.js
@@ -1739,7 +1739,7 @@ class MuchSelect extends HTMLElement {
       }
 
       #value-casing.output-style-custom-html.multi .value {
-        border: 2px solid var(--black);
+        border: 2px solid black;
         border-radius:40px;
         padding:3px 10px;
         flex-grow: 0;
@@ -1768,8 +1768,8 @@ class MuchSelect extends HTMLElement {
         max-height: 300px;
         overflow-y: auto;
         cursor: default;
-        background-color: var(--white);
-        border: 1px solid var(--black);
+        background-color: white;
+        border: 1px solid black;
       }
 
       #dropdown.showing {
@@ -1788,8 +1788,8 @@ class MuchSelect extends HTMLElement {
       }
 
       .option.highlighted {
-        background-color: var(--black);
-        color: var(--white);
+        background-color: black;
+        color: white;
       }
 
       .option.disabled {
@@ -1826,7 +1826,7 @@ class MuchSelect extends HTMLElement {
         100% { transform: rotate(360deg); }
       }
       #wrapper .error-message ul li{
-        color:var(--red);
+        color: red;
         list-style:none;
         padding:0px;
       }
@@ -1838,7 +1838,7 @@ class MuchSelect extends HTMLElement {
         padding-left: 5px;
         margin-left:6px;
         padding-bottom:3px;
-        border-left: 1px dotted var(--border-left);
+        border-left: 1px dotted black;
       }
       #search-keyboard-events #search-keyboard-events-log {
         width:100px;

diff --git a/examples/show-dropdown-footer.html b/examples/show-dropdown-footer.html
@@ -2,7 +2,7 @@
   <h3>Show the dropdown footer</h3>
   <p>
     If the <code>show-dropdown-footer</code> attribute is present the <code>much-select</code> will render a footer
-    in the dropdown with additional infomration.
+    in the dropdown with additional information.
   </p>
   <p>
     The default behavior is to hide the footer.

diff --git a/src/MuchSelect.elm b/src/MuchSelect.elm
@@ -2879,6 +2879,15 @@ customHtmlDropdown selectionMode options searchString (ValueCasing valueCasingWi
                         )
                     ]
 
+            else if showDropdownFooter selectionMode && DropdownOptions.length optionsForTheDropdown == 0 then
+                div
+                    [ id "dropdown-footer"
+                    , Html.Attributes.attribute "part" "dropdown-footer"
+                    ]
+                    [ text
+                        "options to select"
+                    ]
+
             else
                 text ""
     in

diff --git a/src/much-select.js b/src/much-select.js
@@ -1739,7 +1739,7 @@ class MuchSelect extends HTMLElement {
       }
 
       #value-casing.output-style-custom-html.multi .value {
-        border: 2px solid var(--black);
+        border: 2px solid black;
         border-radius:40px;
         padding:3px 10px;
         flex-grow: 0;
@@ -1768,8 +1768,8 @@ class MuchSelect extends HTMLElement {
         max-height: 300px;
         overflow-y: auto;
         cursor: default;
-        background-color: var(--white);
-        border: 1px solid var(--black);
+        background-color: white;
+        border: 1px solid black;
       }
 
       #dropdown.showing {
@@ -1788,8 +1788,8 @@ class MuchSelect extends HTMLElement {
       }
 
       .option.highlighted {
-        background-color: var(--black);
-        color: var(--white);
+        background-color: black;
+        color: white;
       }
 
       .option.disabled {
@@ -1826,7 +1826,7 @@ class MuchSelect extends HTMLElement {
         100% { transform: rotate(360deg); }
       }
       #wrapper .error-message ul li{
-        color:var(--red);
+        color: red;
         list-style:none;
         padding:0px;
       }
@@ -1838,7 +1838,7 @@ class MuchSelect extends HTMLElement {
         padding-left: 5px;
         margin-left:6px;
         padding-bottom:3px;
-        border-left: 1px dotted var(--border-left);
+        border-left: 1px dotted black;
       }
       #search-keyboard-events #search-keyboard-events-log {
         width:100px;