Styling: add hover behaviour to dropdowns
This commit is contained in:
parent
bc8b42d49e
commit
3c338696bc
3 changed files with 155 additions and 82 deletions
|
|
@ -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>
|
||||
|
|
|
|||
65
index.css
65
index.css
|
|
@ -117,7 +117,7 @@ input {
|
|||
color: var(--foreground-color);
|
||||
}
|
||||
|
||||
input[type=text]{
|
||||
input[type=text] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -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 .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;
|
||||
|
|
@ -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
|
||||
|
|
@ -320,7 +332,7 @@ label.checked {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.links-as-button a{
|
||||
.links-as-button a {
|
||||
/*
|
||||
* Let a 'link' mimick a button, but not entirely
|
||||
*/
|
||||
|
|
@ -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 ********************************/
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -1956,7 +1964,7 @@ input {
|
|||
color: var(--foreground-color);
|
||||
}
|
||||
|
||||
input[type=text]{
|
||||
input[type=text] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -2146,7 +2169,7 @@ label.checked {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.links-as-button a{
|
||||
.links-as-button a {
|
||||
/*
|
||||
* Let a 'link' mimick a button, but not entirely
|
||||
*/
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue