kglt/fensir
1
0
Fork 0
Code Activity

Layout card items (#5)

Browse source 
Reviewed-on: ofs/fensir#5
Co-authored-by: kogeletey <kg@re128.org>
Co-committed-by: kogeletey <kg@re128.org>
This commit is contained in:
Konrad Geletey 2024-12-08 12:37:20 +03:00 • committed by Konrad Geletey
parent fa8b158954
commit 8420434edb
Signed by: git
GPG key ID: 0CB1190D5D313992
8 changed files with 179 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/Button.vue
View file

@ -11,7 +11,7 @@
button.primary {
display: grid;
color: var(--primary);
padding: 3px 15px;
padding: 0.45rem 15px;
font-size: 16px;
border: 1px solid var(--accent);
background: var(--darken);

16
src/components/Card.vue Normal file
View file

@ -0,0 +1,16 @@
<template>
<div class="card">
<slot />
</div>
</template>
<style>
.card {
display: grid;
width: 220px;
height: 150px;
padding: 15px;
background: var(--darken);
border: 0.5px solid var(--green);
}
</style>

13
src/components/Search.vue
View file

@ -19,10 +19,13 @@
<style scoped>
fieldset.search {
--size: 10px;
border: 1px solid var(--accent);
background: var(--darken);
min-width: 50%;
display: grid;
justify-content: space-between;
font-size: 16px;
grid-template-columns: 0.2fr 0.5fr 0.3fr;
align-items: center;
outline: none;
@ -31,7 +34,7 @@ fieldset.search {
fieldset.search input {
border: 0;
outline: 0;
padding: 10px 10px;
padding: calc( 1.3rem / 2) calc( 1.3rem / 2);
color: var(--primary);
background: none;
}
@ -42,8 +45,8 @@ fieldset.search .search__context {
grid-auto-flow: column;
justify-self: start;
background: var(--black);
margin: 10px;
padding: 10px 0;
margin: var(--size);
padding: var(--size) 0;
padding-left: 0.625rem;
& .search__context-title {
color: var(--accent);
@ -64,8 +67,8 @@ fieldset.search .search__buttons {
gap: 15px;
margin-right: 15px;
& svg.icon {
width: 1.3rem;
height: 1.3rem;
width: 1.3em;
height: 1.3em;
justify-self: end;
color: var(--primary);
}