Styling: add hover behaviour to dropdowns

UI/StylesheetTestGui.svelte

@@ -53,7 +53,7 @@
         <input type="text">
 
         <div>
-            <label for="html" class="checked">
+            <label class="checked" for="html">
                 <input id="html" name="fav_language" type="radio" value="HTML">
                 HTML (mimicks a <span class="literal-code">checked</span>-element)</label>
             <label for="css">
@@ -115,6 +115,13 @@
                 JavaScript
             </label>
         </div>
+
+        <select>
+            <option value="A">A</option>
+            <option value="B">B</option>
+            <option value="C">C</option>
+        </select>
+
     </div>
 
 </div>

index.css

@@ -162,7 +162,7 @@ input[type=text]{
  */
 
 
-button {
+button, .button {
     display: inline-flex;
     line-height: 1.25rem;
     margin: 0.2rem;
@@ -181,67 +181,80 @@ button {
     color: var(--low-interaction-foreground);
 }
 
-
+.button-shadow {
-button .button-shadow {
     box-shadow: 0 5px 10px #88888888;
 }
 
-button.selected {
+button.small, .button.small {
+    line-height: 1rem;
+    margin: 0;
+    padding: 0.1rem;
+    font-size: unset;
+    /*-- invisible border: rendered on hover*/
+    border: 2px solid var(--low-interaction-background);
+    border-radius: 0.1rem;
+    transition: all 250ms;
+    --tw-text-opacity: 1;
+    --tw-bg-opacity: 1;
+    background: var(--low-interaction-background);
+    color: var(--low-interaction-foreground);
+}
+
+button.selected, .button.selected {
     background-color: var(--catch-detail-color);
     border-color: var(--catch-detail-color);
 
     color: var(--catch-detail-foregroundcolor);
 }
 
-button.selected svg path {
+button.selected svg path, .button.selected svg path {
     fill: var(--catch-detail-foregroundcolor) !important;
 }
 
-button:not(.no-image-background) svg path {
+button:not(.no-image-background) svg path, .button:not(.no-image-background) svg path {
     fill: var(--interactive-foreground) !important;;
     transition: all 250ms;
 }
 
-.interactive button {
+.interactive button, .interactive .button {
     background: var(--interactive-background);
     color: var(--interactive-foreground);
 }
 
-button:hover {
+button:hover, .button:hover {
     background-color: var(--catch-detail-color);
     color: var(--catch-detail-foregroundcolor);
     border: 2px solid var(--catch-detail-color-contrast);
 }
 
 
-button:hover:not(.no-image-background) img {
+button:hover:not(.no-image-background) img, .button:hover:not(.no-image-background) img {
     background: var(--low-interaction-background);
     border-radius: 100rem;
 }
 
 
-button:hover:not(.no-image-background) svg path {
+button:hover:not(.no-image-background) svg path, .button:hover:not(.no-image-background) svg path {
     fill: var(--catch-detail-foregroundcolor) !important;;
 }
 
-button.disabled:hover:not(.no-image-background) svg path {
+button.disabled:hover:not(.no-image-background) svg path, .button.disabled:hover:not(.no-image-background) svg path {
     fill: var(--low-interaction-foreground) !important;;
 }
 
 
-
+button.primary, .button.primary {
-button.primary {
     color: var(--button-foreground);
     background: var(--button-background);
 }
 
-button.primary:not(.no-image-background) svg path {
+button.primary:not(.no-image-background) svg path, .button.primary:not(.no-image-background) svg path {
     fill: var(--button-foreground) !important;;
     transition: all 250ms;
 }
 
 
-button.disabled {
+button.disabled, .button.disabled {
     cursor: default;
     border: 2px dashed var(--button-background);
     background: unset;
@@ -250,28 +263,27 @@ button.disabled {
 }
 
 
-button.disabled:hover {
+button.disabled:hover, .button.disabled:hover {
     cursor: default;
     border: 2px dashed var(--button-background);
     background: unset;
     color: unset;
 }
 
-.interactive button.disabled svg path {
+.interactive button.disabled svg path, .interactive .button.disabled svg path {
     fill: var(--interactive-foreground) !important;;
 }
 
 
-.low-interaction button.disabled svg path {
+.low-interaction button.disabled svg path, .low-interaction .button.disabled svg path {
     fill: var(--low-interaction-foreground) !important;;
 }
 
-.normal-background button.disabled svg path {
+.normal-background button.disabled svg path, .normal-background .button.disabled svg path {
     fill: var(--foreground-color) !important;
 }
 
 
-
 label {
     /**
      * Label should _contain_ the input element
@@ -332,7 +344,6 @@ label.checked {
     border-radius: 0.5rem;
 }
 
-
 .links-as-button a:hover {
     background-color: var(--interactive-background);
     color: var(--catch-detail-foregroundcolor);
@@ -343,6 +354,14 @@ label.checked {
     fill: var(--catch-detail-foregroundcolor) !important;
 }
 
+select {
+    border: 2px solid #00000000;
+}
+
+select:hover {
+    border-color: var(--catch-detail-color-contrast);
+}
+
 /************************* OTHER CATEGORIES ********************************/
 
 /**

public/css/index-tailwind-output.css

@@ -1031,10 +1031,6 @@ video {
   height: 2.75rem;
 }
 
-.h-64 {
-  height: 16rem;
-}
-
 .h-48 {
   height: 12rem;
 }
@@ -1051,6 +1047,14 @@ video {
   height: 20rem;
 }
 
+.h-64 {
+  height: 16rem;
+}
+
+.h-96 {
+  height: 24rem;
+}
+
 .max-h-12 {
   max-height: 3rem;
 }
@@ -1063,6 +1067,10 @@ video {
   max-height: 6rem;
 }
 
+.max-h-screen {
+  max-height: 100vh;
+}
+
 .w-full {
   width: 100%;
 }
@@ -1117,6 +1125,10 @@ video {
   width: 2.75rem;
 }
 
+.w-64 {
+  width: 16rem;
+}
+
 .w-1\/2 {
   width: 50%;
 }
@@ -1285,11 +1297,6 @@ video {
   gap: 1rem;
 }
 
-.gap-x-2 {
-  -webkit-column-gap: 0.5rem;
-          column-gap: 0.5rem;
-}
-
 .gap-y-1 {
   row-gap: 0.25rem;
 }
@@ -1308,6 +1315,11 @@ video {
   row-gap: 0.5rem;
 }
 
+.gap-x-2 {
+  -webkit-column-gap: 0.5rem;
+          column-gap: 0.5rem;
+}
+
 .gap-x-1 {
   -webkit-column-gap: 0.25rem;
           column-gap: 0.25rem;
@@ -1368,10 +1380,6 @@ video {
   border-radius: 0.25rem;
 }
 
-.rounded-3xl {
-  border-radius: 1.5rem;
-}
-
 .rounded-full {
   border-radius: 9999px;
 }
@@ -1444,11 +1452,6 @@ video {
   border-color: rgb(219 234 254 / var(--tw-border-opacity));
 }
 
-.border-gray-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(156 163 175 / var(--tw-border-opacity));
-}
-
 .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
@@ -1459,6 +1462,11 @@ video {
   border-color: rgb(252 165 165 / var(--tw-border-opacity));
 }
 
+.border-gray-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+}
+
 .border-gray-600 {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
@@ -1468,11 +1476,6 @@ video {
   --tw-border-opacity: 0.5;
 }
 
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
 .bg-red-400 {
   --tw-bg-opacity: 1;
   background-color: rgb(248 113 113 / var(--tw-bg-opacity));
@@ -1483,6 +1486,11 @@ video {
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
 }
 
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -1517,14 +1525,14 @@ video {
   padding: 0.25rem;
 }
 
-.p-4 {
-  padding: 1rem;
-}
-
 .p-2 {
   padding: 0.5rem;
 }
 
+.p-4 {
+  padding: 1rem;
+}
+
 .p-0\.5 {
   padding: 0.125rem;
 }
@@ -1574,10 +1582,6 @@ video {
   padding-left: 1rem;
 }
 
-.pt-2 {
-  padding-top: 0.5rem;
-}
-
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -1594,6 +1598,10 @@ video {
   padding-top: 0px;
 }
 
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
 .pl-5 {
   padding-left: 1.25rem;
 }
@@ -1822,14 +1830,6 @@ video {
           filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
 }
 
-.transition {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
 .transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1848,6 +1848,14 @@ video {
   transition-duration: 150ms;
 }
 
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -1998,7 +2006,7 @@ input[type=text]{
  * This very important section defines what the various input elements look like within the 'low-interaction' and 'interactive'-blocks
  */
 
-button {
+button, .button {
   display: inline-flex;
   line-height: 1.25rem;
   margin: 0.2rem;
@@ -2017,60 +2025,75 @@ button {
   color: var(--low-interaction-foreground);
 }
 
-button .button-shadow {
+.button-shadow {
   box-shadow: 0 5px 10px #88888888;
 }
 
-button.selected {
+button.small, .button.small {
+  line-height: 1rem;
+  margin: 0;
+  padding: 0.1rem;
+  font-size: unset;
+  /*-- invisible border: rendered on hover*/
+  border: 2px solid var(--low-interaction-background);
+  border-radius: 0.1rem;
+  transition: all 250ms;
+  --tw-text-opacity: 1;
+  --tw-bg-opacity: 1;
+  background: var(--low-interaction-background);
+  color: var(--low-interaction-foreground);
+}
+
+button.selected, .button.selected {
   background-color: var(--catch-detail-color);
   border-color: var(--catch-detail-color);
   color: var(--catch-detail-foregroundcolor);
 }
 
-button.selected svg path {
+button.selected svg path, .button.selected svg path {
   fill: var(--catch-detail-foregroundcolor) !important;
 }
 
-button:not(.no-image-background) svg path {
+button:not(.no-image-background) svg path, .button:not(.no-image-background) svg path {
   fill: var(--interactive-foreground) !important;
   transition: all 250ms;
 }
 
-.interactive button {
+.interactive button, .interactive .button {
   background: var(--interactive-background);
   color: var(--interactive-foreground);
 }
 
-button:hover {
+button:hover, .button:hover {
   background-color: var(--catch-detail-color);
   color: var(--catch-detail-foregroundcolor);
   border: 2px solid var(--catch-detail-color-contrast);
 }
 
-button:hover:not(.no-image-background) img {
+button:hover:not(.no-image-background) img, .button:hover:not(.no-image-background) img {
   background: var(--low-interaction-background);
   border-radius: 100rem;
 }
 
-button:hover:not(.no-image-background) svg path {
+button:hover:not(.no-image-background) svg path, .button:hover:not(.no-image-background) svg path {
   fill: var(--catch-detail-foregroundcolor) !important;
 }
 
-button.disabled:hover:not(.no-image-background) svg path {
+button.disabled:hover:not(.no-image-background) svg path, .button.disabled:hover:not(.no-image-background) svg path {
   fill: var(--low-interaction-foreground) !important;
 }
 
-button.primary {
+button.primary, .button.primary {
   color: var(--button-foreground);
   background: var(--button-background);
 }
 
-button.primary:not(.no-image-background) svg path {
+button.primary:not(.no-image-background) svg path, .button.primary:not(.no-image-background) svg path {
   fill: var(--button-foreground) !important;
   transition: all 250ms;
 }
 
-button.disabled {
+button.disabled, .button.disabled {
   cursor: default;
   border: 2px dashed var(--button-background);
   background: unset;
@@ -2078,22 +2101,22 @@ button.disabled {
   box-shadow: none;
 }
 
-button.disabled:hover {
+button.disabled:hover, .button.disabled:hover {
   cursor: default;
   border: 2px dashed var(--button-background);
   background: unset;
   color: unset;
 }
 
-.interactive button.disabled svg path {
+.interactive button.disabled svg path, .interactive .button.disabled svg path {
   fill: var(--interactive-foreground) !important;
 }
 
-.low-interaction button.disabled svg path {
+.low-interaction button.disabled svg path, .low-interaction .button.disabled svg path {
   fill: var(--low-interaction-foreground) !important;
 }
 
-.normal-background button.disabled svg path {
+.normal-background button.disabled svg path, .normal-background .button.disabled svg path {
   fill: var(--foreground-color) !important;
 }
 
@@ -2168,6 +2191,14 @@ label.checked {
   fill: var(--catch-detail-foregroundcolor) !important;
 }
 
+select {
+  border: 2px solid #00000000;
+}
+
+select:hover {
+  border-color: var(--catch-detail-color-contrast);
+}
+
 /************************* OTHER CATEGORIES ********************************/
 
 /**
@@ -2396,6 +2427,10 @@ a.link-underline {
   color: rgb(30 64 175 / var(--tw-text-opacity));
 }
 
+.hover\:opacity-100:hover {
+  opacity: 1;
+}
+
 .hover\:shadow-xl:hover {
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
@@ -2536,6 +2571,10 @@ a.link-underline {
     height: 2rem;
   }
 
+  .md\:h-16 {
+    height: 4rem;
+  }
+
   .md\:h-12 {
     height: 3rem;
   }
@@ -2552,6 +2591,10 @@ a.link-underline {
     width: 50%;
   }
 
+  .md\:w-16 {
+    width: 4rem;
+  }
+
   .md\:grid-flow-row {
     grid-auto-flow: row;
   }
@@ -2560,6 +2603,10 @@ a.link-underline {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .md\:flex-row {
+    flex-direction: row;
+  }
+
   .md\:flex-nowrap {
     flex-wrap: nowrap;
   }