kritzl/hvvstuhl.de
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity

v0.6.4: update filter styles

Browse source
This commit is contained in:
kritzl 2024-06-10 14:47:31 +02:00
parent 2a0b6dbfe6
commit 16175c2d17
6 changed files with 127 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

127
style.scss
View file

@ -301,11 +301,7 @@ div#filters {
display: flex;
flex-wrap: wrap;
gap: var(--space-m);
justify-content: stretch;
button, input {
font-size: 1.5rem;
}
justify-content: center;
> * {
width: 100%;
@ -313,6 +309,72 @@ div#filters {
text-align: center;
@media screen and (min-width: $mobileBreakpoint) {
width: auto;
min-width: 0;
}
}
input#searchStation {
flex-grow: 1;
font-size: 1.5rem;
min-width: 10ch;
}
button#stationsNearMe {
font-size: 1.5rem;
}
div#typeFilter {
font-size: 1.5rem;
display: flex;
justify-content: center;
flex-shrink: 0;
min-height: var(--space-2xl);
gap: var(--space-m);
button.typeChip {
flex-shrink: 0;
padding: 0;
height: var(--space-2xl);
aspect-ratio: 1/1;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
border-radius: 9999px;
&[data-type="U"], &[data-type="S"], &[data-type="A"], &[data-type="R"] {
border: solid 2px var(--text);
&[data-pressed="false"] {
background-color: var(--color-gray-500);
color: var(--color-type-disabled);
&[data-type="U"] {
background-color: var(--bg-type-u-disabled);
}
&[data-type="S"] {
background-color: var(--bg-type-s-disabled);
}
&[data-type="A"] {
background-color: var(--bg-type-a-disabled);
}
&[data-type="R"] {
background-color: var(--bg-type-r-disabled);
}
&::after {
position: absolute;
content: '';
width: 144%;
height: 0.4rem;
background-color: var(--color-gray-700);
transform: rotate(-45deg);
}
}
}
}
}
}
@ -777,61 +839,6 @@ span.lineChip, span.typeChip, button.typeChip {
}
div#typeFilter {
display: flex;
flex-grow: 1;
flex-wrap: nowrap;
flex-shrink: 0;
min-height: var(--space-2xl);
gap: var(--space-m);
button.typeChip {
padding: 0;
height: 100%;
aspect-ratio: 1/1;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
&[data-type="U"], &[data-type="S"], &[data-type="A"], &[data-type="R"] {
border: solid 2px var(--station-border);
&[data-pressed="false"] {
background-color: var(--color-gray-500);
color: var(--color-type-disabled);
&[data-type="U"] {
background-color: var(--bg-type-u-disabled);
}
&[data-type="S"] {
background-color: var(--bg-type-s-disabled);
}
&[data-type="A"] {
background-color: var(--bg-type-a-disabled);
}
&[data-type="R"] {
background-color: var(--bg-type-r-disabled);
}
&::after {
position: absolute;
content: '';
width: 144%;
height: 0.4rem;
background-color: var(--color-gray-500);
opacity: 80%;
transform: rotate(-45deg);
}
}
}
}
}
span.lineChip {
padding: 0.3em 0.6em;
min-width: 4ch;