diff --git a/app/assets/styles/page.css b/app/assets/styles/page.css index 60579c0..e8695d1 100644 --- a/app/assets/styles/page.css +++ b/app/assets/styles/page.css @@ -14,11 +14,27 @@ } .filter-bar { - background: var(--color-lightest); display: flex; - justify-content: flex-end; - gap: 1rem; + justify-content: space-between; padding: var(--padding-default); + + & .box { + display: flex; + flex-direction: column; + gap: .5rem; + + & strong { + color: var(--color-darkest); + font-size: .8rem; + } + + & > div { + background: var(--color-lightest); + display: flex; + justify-content: flex-end; + gap: .5rem; + } + } } .search-bar { diff --git a/app/pages/index.vue b/app/pages/index.vue index d03f84e..52fdddf 100755 --- a/app/pages/index.vue +++ b/app/pages/index.vue @@ -13,20 +13,32 @@ @update="updateCard()" />
-
-

Mit ProPapier Preise vergleichen und sparen

-