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

Removed SCSS variables, and replaced with CSS --vars

Browse Source
This commit is contained in:
Alicia Sykes
2021-04-08 20:12:35 +01:00
parent 0cb6cc7d62
commit 0c12cdb0f6
22 changed files with 96 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Collapsable.vue
View File

@@ -87,7 +87,6 @@ export default {
<style scoped lang="scss">
@import '../../src/styles/color-pallet.scss';
@import '../../src/styles/constants.scss';
@import '../../src/styles/media-queries.scss';
@@ -95,7 +94,7 @@ export default {
padding: 5px;
margin: 10px;
border-radius: $curve-factor;
background: $ascent;
background: var(--primary);
// background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
// background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
box-shadow: 1px 1px 2px #130f23;
@@ -144,7 +143,7 @@ export default {
border-radius: $curve-factor;
transition: all 0.25s ease-out;
text-align: left;
color:$bg-with-opacity;
color: var(--background-transparent);
h3 {
margin: 0;
@@ -154,7 +153,7 @@ export default {
}
.lbl-toggle:hover {
color: $background;
color: var(--background);
}
.lbl-toggle::before {
@@ -178,7 +177,7 @@ export default {
max-height: 0px;
overflow: hidden;
transition: max-height .25s ease-in-out;
background: $bg-with-opacity;
background: var(--background-transparent);
border-radius: 0 0 $inner-radius $inner-radius;
}

18
src/components/FilterTile.vue
View File

@@ -94,18 +94,16 @@ export default {
<style scoped lang="scss">
@import '../../src/styles/color-pallet.scss';
section {
display: flex;
align-items: center;
align-items: stretch;
background: linear-gradient(0deg, var(--background) 0%, $header-color 100%);
background: linear-gradient(0deg, var(--background) 0%, var(--background-darker) 100%);
}
form {
border-radius: 0 0 20px 0;
padding: 0 0.2rem 0.2rem 0;
background: $header-color;
background: var(--background-darker);
label {
display: inline;
color: var(--primary);
@@ -123,7 +121,7 @@ export default {
background: var(--background);
color: var(--primary);
&:focus {
background: $bg-with-opacity;
background: var(--background-transparent);
}
}
.clear-search {
@@ -135,7 +133,7 @@ export default {
cursor: pointer;
&:hover {
opacity: 1;
background: $header-color;
background: var(--background-darker);
}
}
}
@@ -151,7 +149,7 @@ export default {
span.options-label {
font-size: 0.8rem;
color: $ascent-with-opacity;
color: var(--primary-transparent);
width: 5.5rem;
text-align: left;
}
@@ -164,10 +162,10 @@ export default {
}
.display-options {
color: $ascent-with-opacity;
color: var(--primary-transparent);
svg {
path {
fill: $ascent-with-opacity;
fill: var(--primary-transparent);
}
width: 1rem;
height: 1rem;
@@ -180,7 +178,7 @@ export default {
opacity: 0.8;
cursor: pointer;
&:hover, &.selected {
background: $ascent-with-opacity;
background: var(--primary-transparent);
path { fill: var(--background); }
}
}

3
src/components/Header.vue
View File

@@ -22,14 +22,13 @@ export default {
</script>
<style scoped lang="scss">
@import '../../src/styles/color-pallet.scss';
header {
margin: 0;
padding: 0.5rem;
display: flex;
justify-content: space-between;
background: $header-color;
background: var(--background-darker);
align-items: center;
align-content: flex-start;
@media screen and (max-width: 600px) {

16
src/components/Item.vue
View File

@@ -100,7 +100,6 @@ export default {
</script>
<style scoped lang="scss">
@import '../../src/styles/color-pallet.scss';
@import '../../src/styles/constants.scss';
/* Item wrapper */
@@ -108,7 +107,7 @@ export default {
flex-grow: 1;
height: 100px;
position: relative;
color: $ascent;
color: var(--primary);
vertical-align: middle;
margin: 0.5rem;
background: #607d8b33;
@@ -123,7 +122,7 @@ export default {
background: #607d8b4d;
}
&:focus {
border: 2px solid $ascent;
border: 2px solid var(--primary);
outline: none;
}
&.short {
@@ -161,7 +160,8 @@ export default {
.overflow-dots {
display: block;
opacity: 1;
background: $overflow-ellipse;
background: black;
// background: $overflow-ellipse;
position: absolute;
z-index: 5;
right: 0;
@@ -189,18 +189,18 @@ export default {
/* Colourize icons on hover */
.tile-svg {
filter: drop-shadow(4px 8px 3px $transparent-black);
filter: drop-shadow(4px 8px 3px var(--transparent-50));
}
.tile-icon {
filter:
drop-shadow(4px 8px 3px $transparent-black)
drop-shadow(4px 8px 3px var(--transparent-50))
saturate(2);
}
}
.tile-icon {
width: 60px;
filter: drop-shadow(2px 4px 6px $transparent-black) saturate(0.65);
filter: drop-shadow(2px 4px 6px var(--transparent-50)) saturate(0.65);
}
.tile-svg {
@@ -217,7 +217,7 @@ export default {
right: 0;
top: 0;
path {
fill: $ascent-with-opacity;
fill: var(--primary-transparent);
}
}
&.short svg {

3
src/components/ItemGroup.vue
View File

@@ -53,7 +53,6 @@ export default {
</script>
<style scoped lang="scss">
@import '../../src/styles/color-pallet.scss';
@import '../../src/styles/constants.scss';
.no-items {
@@ -64,7 +63,7 @@ export default {
cursor: default;
border-radius: $curve-factor;
background: #607d8b33;
color: $ascent;
color: var(--primary);
box-shadow: 1px 1px 2px #373737;
}

3
src/components/ItemIcon.vue
View File

@@ -82,10 +82,9 @@ export default {
</script>
<style scoped lang="scss">
@import '../../src/styles/color-pallet.scss';
.tile-icon {
width: 60px;
filter: drop-shadow(2px 4px 6px $transparent-black) saturate(0.65);
filter: drop-shadow(2px 4px 6px var(--transparent-50)) saturate(0.65);
}
</style>

20
src/components/KeyboardShortcutInfo.vue
View File

@@ -62,8 +62,6 @@ export default {
<style scoped lang="scss">
@import '../../src/styles/color-pallet.scss';
.kb-sc-info {
position: fixed;
width: 30em;
@@ -73,12 +71,12 @@ export default {
padding: 0.1em 0.3em;
z-index: 10;
border-radius: 12px;
border: 1px solid $header-color;
border: 1px solid var(--background-darker);
-webkit-box-shadow: 2px 1px 5px #130f23;
box-shadow: 2px 1px 5px #130f23;
border: 1px solid $ascent;
color: $ascent;
background: $header-color;
border: 1px solid var(--primary);
color: var(--primary);
background: var(--background-darker);
cursor: default;
opacity: 0.94;
@media screen and (max-width: 600px) {
@@ -88,9 +86,9 @@ export default {
position: absolute;
top: -35px;
left: 20px;
border: 1px solid $ascent;
color: $ascent;
background: $header-color;
border: 1px solid var(--primary);
color: var(--primary);
background: var(--background-darker);
padding: 4px;
border-radius: 5px;
}
@@ -100,12 +98,12 @@ export default {
width: 1em;
padding: 0 0 6px 6px;
height: 1em;
background: $transparent-black;
background: var(--transparent-50);
margin-top: 3px;
border: 1px solid transparent;
cursor: pointer;
&:hover {
border: 1px solid $ascent;
border: 1px solid var(--primary);
opacity: 0.6;
}
}

6
src/components/Nav.vue
View File

@@ -14,8 +14,6 @@ export default {
<style scoped lang="scss">
@import '../../src/styles/color-pallet.scss';
nav {
display: flex;
align-items: center;
@@ -29,7 +27,7 @@ nav {
background: #607d8b33;
-webkit-box-shadow: 1px 1px 2px #232323;
box-shadow: 1px 1px 2px #232323;
color: $ascent;
color: var(--primary);
text-decoration: none;
&:hover {
background: #607d8b1c;
@@ -37,7 +35,7 @@ nav {
}
}
.router-link-active {
border: 1px solid $ascent;
border: 1px solid var(--primary);
}
}
</style>

5
src/components/PageTitle.vue
View File

@@ -16,13 +16,12 @@ export default {
</script>
<style scoped lang="scss">
@import '../../src/styles/color-pallet.scss';
.page-titles {
display: flex;
flex-direction: column;
h1 {
color: $ascent;
color: var(--primary);
// background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
// background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
// -webkit-background-clip: text;
@@ -31,7 +30,7 @@ export default {
margin: 0;
}
span.subtitle {
color: $ascent-with-opacity;
color: var(--primary-transparent);
font-style: italic;
text-shadow: 1px 1px 2px #130f23;
}

16
src/components/ThemeSelector.vue
View File

@@ -1,7 +1,12 @@
<template>
<div class="theme-selector-section" v-if="themes" >
<span class="theme-label">Themes</span>
<v-select :options="themeNames" v-model="selectedTheme" label="Theme" class="theme-dropdown" />
<v-select
:options="themeNames"
v-model="selectedTheme"
class="theme-dropdown"
:tabindex="100"
/>
</div>
</template>
@@ -33,8 +38,7 @@ export default {
const added = Object.keys(this.themes).map(
name => this.themeHelper.add(name, this.themes[name]),
);
Promise.all(added).then(sheets => {
console.log(`${sheets.length} themes loaded`);
Promise.all(added).then(() => {
this.loading = false;
this.themeHelper.theme = 'Deafault';
});
@@ -44,7 +48,6 @@ export default {
<style lang="scss">
@import '../../src/styles/color-pallet.scss';
@import 'vue-select/src/scss/vue-select.scss';
.theme-dropdown {
@@ -56,7 +59,7 @@ export default {
span.vs__selected, li.vs__dropdown-option {
color: var(--primary);
}
button.vs__clear, svg.vs__open-indicator {
svg.vs__open-indicator {
fill: var(--primary);
}
ul.vs__dropdown-menu {
@@ -67,6 +70,9 @@ export default {
background: var(--primary);
color: var(--background);
}
button.vs__clear {
display: none;
}
}
.theme-selector-section {