diff --git a/src/components/MinimalView/MinimalHeading.vue b/src/components/MinimalView/MinimalHeading.vue index f658e7de..8a3f36c9 100644 --- a/src/components/MinimalView/MinimalHeading.vue +++ b/src/components/MinimalView/MinimalHeading.vue @@ -31,6 +31,10 @@ div.minimal-section-heading { cursor: pointer; padding: 0.5rem 0.25rem; border-radius: var(--curve-factor); + border: 1px solid var(--primary); + border-bottom: none; + border-radius: var(--curve-factor) var(--curve-factor) 0 0; + margin-bottom: 0; h3 { margin: 0; color: var(--primary); @@ -38,7 +42,7 @@ div.minimal-section-heading { &.selected { background: var(--primary); h3 { - color: var(--background); + color: var(--item-group-heading-text-color); } } } diff --git a/src/components/MinimalView/MinimalSection.vue b/src/components/MinimalView/MinimalSection.vue index 4f8a5b33..9fd816cf 100644 --- a/src/components/MinimalView/MinimalSection.vue +++ b/src/components/MinimalView/MinimalSection.vue @@ -92,9 +92,16 @@ export default { display: flex; flex-wrap: wrap; flex-direction: column; + background: var(--item-group-background); + border-radius: 0 0 var(--curve-factor) var(--curve-factor); .section-items { - display: flex; - flex-direction: column; + display: grid; + @include phone { grid-template-columns: repeat(1, 1fr); } + @include tablet { grid-template-columns: repeat(2, 1fr); } + @include laptop { grid-template-columns: repeat(3, 1fr); } + @include monitor { grid-template-columns: repeat(4, 1fr); } + @include big-screen { grid-template-columns: repeat(5, 1fr); } + @include big-screen-up { grid-template-columns: repeat(6, 1fr); } } &.selected { border: 1px solid var(--primary); diff --git a/src/views/Minimal.vue b/src/views/Minimal.vue index 714009d9..734ee51e 100644 --- a/src/views/Minimal.vue +++ b/src/views/Minimal.vue @@ -1,8 +1,13 @@