nologcz/headline
2
1
Fork 0
mirror of https://git.nolog.cz/NoLog.cz/headline.git synced 2025-01-31 11:53:35 +01:00
Code Issues Projects Releases Packages Wiki Activity

Style checkboxes & switch

Browse source
This commit is contained in:
Ondřej Nývlt 2023-09-08 02:03:51 +02:00
parent 91b224465c
commit 57dfbca4b9
4 changed files with 161 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
view/static/main.css
View file

@ -228,13 +228,7 @@
color: var(--color-gray-11); color: var(--color-gray-11);
} }
.text-input:focus { .checkbox-label {
border-color: var(--color-accent-9);
box-shadow: 0 0 0 2px var(--color-accent-9);
outline: none;
}
.checkbox {
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.25rem; line-height: 1.25rem;
display: flex; display: flex;
@ -244,10 +238,79 @@
cursor: pointer; cursor: pointer;
} }
.checkbox input { .checkbox-label input {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
.checkbox {
appearance: none;
background-color: var(--color-gray-1);
font: inherit;
color: currentColor;
width: 1.25em;
height: 1.25em;
border: 0.15em solid var(--color-gray-8);
border-radius: 0.15em;
display: grid;
place-content: center;
cursor: pointer;
transition: background-color 120ms, border-color 120ms;
}
.checkbox:checked {
background-color: var(--color-accent-9);
border-color: var(--color-accent-9);
}
.checkbox::before {
content: "";
width: 0.65em;
height: 0.65em;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
transform: scale(0);
transition: 120ms transform ease-in-out;
box-shadow: inset 1em 1em white;
}
.checkbox:checked::before {
transform: scale(1);
}
.switch {
appearance: none;
background-color: var(--color-gray-3);
font: inherit;
color: currentColor;
width: 3em;
height: 1.5em;
border-radius: 100px;
border: 1px solid var(--color-gray-7);
display: grid;
place-content: center;
cursor: pointer;
transition: background-color 120ms, border-color 120ms;
}
.switch:checked {
background-color: var(--color-accent-9);
border-color: var(--color-accent-9);
}
.switch::before {
content: "";
width: 1.3em;
height: 1.3em;
clip-path: circle(30%);
transform: translateX(-50%);
transition: 120ms transform ease-in-out;
background-color: var(--color-gray-11);
}
.switch:checked::before {
transform: translateX(50%);
background-color: white;
}
.button, .button,
.button-outline { .button-outline {
display: inline-flex; display: inline-flex;
@ -291,6 +354,12 @@
cursor: pointer; cursor: pointer;
} }
:is(button, input):focus-visible {
border-color: var(--color-accent-7);
box-shadow: 0 0 0 2px var(--color-accent-7);
outline: none;
}
/* Pagination */ /* Pagination */
.pagination { .pagination {
@ -407,7 +476,6 @@
.py-4{padding-top:1rem;padding-bottom:1rem;} .py-4{padding-top:1rem;padding-bottom:1rem;}
.py-8{padding-top:2rem;padding-bottom:2rem;} .py-8{padding-top:2rem;padding-bottom:2rem;}
.pr-2{padding-right:0.5rem;} .pr-2{padding-right:0.5rem;}
.mx-2{margin-left:0.5rem;margin-right:0.5rem;}
.my-6{margin-top:1.5rem;margin-bottom:1.5rem;} .my-6{margin-top:1.5rem;margin-bottom:1.5rem;}
.mb-2{margin-bottom:0.5rem;} .mb-2{margin-bottom:0.5rem;}
.mb-3{margin-bottom:0.75rem;} .mb-3{margin-bottom:0.75rem;}
@ -445,9 +513,9 @@
.flex-col{flex-direction:column;} .flex-col{flex-direction:column;}
.flex-wrap{flex-wrap:wrap;} .flex-wrap{flex-wrap:wrap;}
.gap-2{gap:0.5rem;} .gap-2{gap:0.5rem;}
.gap-3{gap:0.75rem;}
.gap-x-2{column-gap:0.5rem;} .gap-x-2{column-gap:0.5rem;}
.gap-x-4{column-gap:1rem;} .gap-x-4{column-gap:1rem;}
.gap-x-6{column-gap:1.5rem;}
.gap-x-8{column-gap:2rem;} .gap-x-8{column-gap:2rem;}
.gap-y-2{row-gap:0.5rem;} .gap-y-2{row-gap:0.5rem;}
.sticky{position:sticky;} .sticky{position:sticky;}

4
view/templates/parts/feeds_filter_dialog.html
View file

@ -9,9 +9,9 @@
<div class="columns-2 mb-6"> <div class="columns-2 mb-6">
{% for feed in feeds %} {% for feed in feeds %}
<label <label
class="flex items-center gap-3 px-2 py-1.5 hover:bg-gray-3 rounded" class="checkbox-label px-2 py-1.5 hover:bg-gray-3 rounded"
> >
<input type="checkbox" name="feeds[]" value="{{ feed['feed_name'] }}" <input class="checkbox" type="checkbox" name="feeds[]" value="{{ feed['feed_name'] }}"
{{ 'checked' if feed['feed_name'] in selected_feeds }} > {{ {{ 'checked' if feed['feed_name'] in selected_feeds }} > {{
feed['feed_name'] }} feed['feed_name'] }}
</label> </label>

7
view/templates/parts/filters.html
View file

@ -1,5 +1,5 @@
<div class="container"> <div class="container">
<div class="flex items-center flex-wrap shrink-0 gap-x-2 gap-y-2"> <div class="flex items-center flex-wrap shrink-0 gap-x-6 gap-y-2">
<form method="get" action="/" class="flex gap-x-2"> <form method="get" action="/" class="flex gap-x-2">
<input <input
class="text-input w-full max-w-20rem" class="text-input w-full max-w-20rem"
@ -26,8 +26,9 @@
{% include "parts/feeds_filter_dialog.html" %} {% include "parts/feeds_filter_dialog.html" %}
</form> </form>
<label class="checkbox mx-2"> <label class="checkbox-label">
<input <input
class="switch"
type="checkbox" type="checkbox"
x-model="expandDiffs" x-model="expandDiffs"
x-bind:checked="expandDiffs" x-bind:checked="expandDiffs"
@ -38,7 +39,7 @@
{% if selected_feeds|length > 0 %} {% if selected_feeds|length > 0 %}
<div class="text-xs font-medium text-muted flex items-center mt-3"> <div class="text-xs font-medium text-muted flex items-center mt-3">
<svg class="w-3 fill-current mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 14L4 5V3H20V5L14 14V20L10 22V14Z"></path></svg> <svg class="w-3 shrink-0 fill-current mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 14L4 5V3H20V5L14 14V20L10 22V14Z"></path></svg>
<div> <div>
Feeds: <span>{{ ", ".join(selected_feeds) }}</span> Feeds: <span>{{ ", ".join(selected_feeds) }}</span>
<a href="/" class="ml-2">✕ Clear</a> <a href="/" class="ml-2">✕ Clear</a>

85
view/uno.config.ts
View file

@ -240,13 +240,7 @@ const globalCss = (theme: Required<Theme>) => css`
color: var(--color-gray-11); color: var(--color-gray-11);
} }
.text-input:focus { .checkbox-label {
border-color: var(--color-accent-9);
box-shadow: 0 0 0 2px var(--color-accent-9);
outline: none;
}
.checkbox {
font-size: ${theme.fontSize.sm[0]}; font-size: ${theme.fontSize.sm[0]};
line-height: ${theme.fontSize.sm[1]}; line-height: ${theme.fontSize.sm[1]};
display: flex; display: flex;
@ -256,10 +250,79 @@ const globalCss = (theme: Required<Theme>) => css`
cursor: pointer; cursor: pointer;
} }
.checkbox input { .checkbox-label input {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
.checkbox {
appearance: none;
background-color: var(--color-gray-1);
font: inherit;
color: currentColor;
width: 1.25em;
height: 1.25em;
border: 0.15em solid var(--color-gray-8);
border-radius: 0.15em;
display: grid;
place-content: center;
cursor: pointer;
transition: background-color 120ms, border-color 120ms;
}
.checkbox:checked {
background-color: var(--color-accent-9);
border-color: var(--color-accent-9);
}
.checkbox::before {
content: "";
width: 0.65em;
height: 0.65em;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
transform: scale(0);
transition: 120ms transform ease-in-out;
box-shadow: inset 1em 1em white;
}
.checkbox:checked::before {
transform: scale(1);
}
.switch {
appearance: none;
background-color: var(--color-gray-3);
font: inherit;
color: currentColor;
width: 3em;
height: 1.5em;
border-radius: 100px;
border: 1px solid var(--color-gray-7);
display: grid;
place-content: center;
cursor: pointer;
transition: background-color 120ms, border-color 120ms;
}
.switch:checked {
background-color: var(--color-accent-9);
border-color: var(--color-accent-9);
}
.switch::before {
content: "";
width: 1.3em;
height: 1.3em;
clip-path: circle(30%);
transform: translateX(-50%);
transition: 120ms transform ease-in-out;
background-color: var(--color-gray-11);
}
.switch:checked::before {
transform: translateX(50%);
background-color: white;
}
.button, .button,
.button-outline { .button-outline {
display: inline-flex; display: inline-flex;
@ -303,6 +366,12 @@ const globalCss = (theme: Required<Theme>) => css`
cursor: pointer; cursor: pointer;
} }
:is(button, input):focus-visible {
border-color: var(--color-accent-7);
box-shadow: 0 0 0 2px var(--color-accent-7);
outline: none;
}
/* Pagination */ /* Pagination */
.pagination { .pagination {