josh/dashy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 Adds configurable CSS variables to the Minimal view

Browse Source
This commit is contained in:
Alicia Sykes
2021-08-14 19:12:00 +01:00
parent 166bc3965d
commit a18b723484
6 changed files with 115 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/MinimalView/MinimalHeading.vue
View File

@@ -30,19 +30,19 @@ export default {
div.minimal-section-heading {
cursor: pointer;
padding: 0.5rem 0.25rem;
border-radius: var(--curve-factor);
border: 1px solid var(--primary);
margin-bottom: 0;
background: var(--minimal-view-section-heading-background);
border: 1px solid var(--minimal-view-section-heading-color);
border-bottom: none;
border-radius: var(--curve-factor) var(--curve-factor) 0 0;
margin-bottom: 0;
h3 {
margin: 0;
color: var(--primary);
color: var(--minimal-view-section-heading-color);
}
&.selected {
background: var(--primary);
background: var(--minimal-view-section-heading-color);
h3 {
color: var(--item-group-heading-text-color);
color: var(--minimal-view-section-heading-background);
}
}
}

22
src/components/MinimalView/MinimalSearch.vue
View File

@@ -4,6 +4,7 @@
id="filter-tiles"
v-model="input"
ref="filter"
class="minimal-search"
:placeholder="$t('search.search-placeholder')"
v-on:input="userIsTypingSomething"
@keydown.esc="clearFilterInput" />
@@ -84,12 +85,6 @@ export default {
form {
display: flex;
align-items: center;
label {
display: inline;
color: var(--search-label-color);
margin: 0.5rem;
display: inline;
}
input {
display: inline-block;
width: 80%;
@@ -100,17 +95,17 @@ export default {
outline: none;
border: 1px solid var(--outline-color);
border-radius: var(--curve-factor);
background: var(--background-darker);
color: var(--settings-text-color);
background: var(--minimal-view-search-background);
color: var(--minimal-view-search-color);
&:focus {
border-color: var(--settings-text-color);
border-color: var(--minimal-view-search-color);
opacity: var(--dimming-factor);
}
}
.clear-search {
//position: absolute;
color: var(--settings-text-color);
padding: 0 0.4rem;
color: var(--minimal-view-search-color);
padding: 0.15rem 0.5rem 0.2rem 0.5rem;
font-style: normal;
font-size: 1rem;
opacity: var(--dimming-factor);
@@ -118,12 +113,13 @@ export default {
cursor: pointer;
right: 0.5rem;
top: 1rem;
border: 1px solid var(--settings-text-color);
border: 1px solid var(--minimal-view-search-color);
font-size: 1rem;
margin: 0.5rem;
&:hover {
opacity: 1;
background: var(--background-darker);
color: var(--minimal-view-search-background);
background: var(--minimal-view-search-color);
}
}
}

4
src/components/MinimalView/MinimalSection.vue
View File

@@ -93,7 +93,7 @@ export default {
display: flex;
flex-wrap: wrap;
flex-direction: column;
background: var(--item-group-background);
background: var(--minimal-view-group-background);
border-radius: 0 0 var(--curve-factor) var(--curve-factor);
.section-items {
display: grid;
@@ -105,7 +105,7 @@ export default {
@include big-screen-up { grid-template-columns: repeat(6, 1fr); }
}
&.selected {
border: 1px solid var(--primary);
border: 1px solid var(--minimal-view-group-color);
grid-column-start: span var(--col-count, 3);
}
&.show-all {