Bastian-Greshake-Tzovaras/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Styling: add hover behaviour to dropdowns

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-05-17 13:12:00 +02:00
parent bc8b42d49e
commit 3c338696bc
3 changed files with 155 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

65
index.css
View file

@ -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 ********************************/
/**