Lissy93/dashy
1
1
Fork 0
mirror of https://github.com/Lissy93/dashy.git synced 2024-11-23 04:34:44 +03:00
Code Issues 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
package.json
View File

@ -16,7 +16,8 @@
"vue": "^2.6.10",
"vue-cli-plugin-yaml": "^1.0.2",
"vue-js-modal": "^2.0.0-rc.6",
"vue-router": "^3.0.3"
"vue-router": "^3.0.3",
"vue-select": "^3.11.2"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.10.0",
@ -44,7 +45,8 @@
"airbnb-base"
],
"rules": {
"import/no-unresolved": "off"
"import/no-unresolved": "off",
"arrow-parens": 0
},
"parserOptions": {
"parser": "babel-eslint"
@ -59,4 +61,4 @@
"> 1%",
"last 2 versions"
]
}
}

6
src/App.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="dashy">
<div id="dashy" data-theme="dark">
<Header :pageInfo="getPageInfo(pageInfo)" />
<router-view />
<Footer />
@ -38,10 +38,10 @@ export default {
<style lang="scss">
@import '../src/styles/global-styles.scss';
@import '../src/styles/color-pallet.scss';
@import '../src/styles/color-palette.scss';
body {
background: $background;
background: var(--background);
margin: 0;
padding: 0;
}

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 {

2
src/data/conf.yml
View File

@ -2,6 +2,8 @@
pageInfo:
title: Hello World
description: 'This is a demo'
appConfig:
externalStyleSheet: 'https://bootswatch.com/4/solar/bootstrap.min.css'
sections:
- name: Firewall
items:

6
src/main.js
View File

@ -1,6 +1,8 @@
import Vue from 'vue';
import VTooltip from 'v-tooltip'; // A Vue directive for Popper.js
import VTooltip from 'v-tooltip'; // A Vue directive for Popper.js, tooltip component
import VModal from 'vue-js-modal'; // Modal component
import VSelect from 'vue-select'; // Select dropdown component
import App from './App.vue';
import router from './router';
@ -8,6 +10,8 @@ import './registerServiceWorker';
Vue.use(VTooltip);
Vue.use(VModal);
Vue.component('v-select', VSelect);
Vue.config.productionTip = false;
new Vue({

1
src/router.js
View File

@ -13,6 +13,7 @@ const router = new Router({
component: Home,
props: {
sections: conf.sections || [],
appConfig: conf.appConfig || {},
},
meta: {
title: 'Home Page',

17
src/styles/color-palette.scss Normal file
View File

@ -0,0 +1,17 @@
:root {
/* Basic*/
--background: #0b1021;
--background-darker: #05070e;
--primary: #5cabca;
/* Modified Colors */
--primary-transparent: #5cabcab3;
--background-transparent: #0b1021cc;
/* Semi-Transparent Black*/
--transparent-70: #000000b3;
--transparent-50: #00000080;
--transparent-30: #0000004d;
}

19
src/styles/color-pallet.scss
View File

@ -1,19 +0,0 @@
// [data-theme="dark"] {
// I will put the variables here.
// }
/* Core Pallet */
$background: #0b1021;
$ascent: #5cabca;
/* Action Colors */
$transparent-black: #0000008a;
$overflow-ellipse: #283e51;
/* Modified Colors */
$bg-with-opacity: rgba($background, 0.8);
$header-color: darken($background, 5%);
$dark-ascent: darken($ascent, 50%);
$ascent-with-opacity: rgba($ascent, 0.7);

10
src/styles/global-styles.scss
View File

@ -1,5 +1,4 @@
@font-face {
font-family: 'Inconsolata';
src: url('./assets/Inconsolata-Light.ttf');
@ -8,16 +7,17 @@
html {
margin: 0;
padding: 0;
transition: all 1s;
}
body {
/* Default app font face */
body, div, p, a, span, label, input {
font-family: 'Inconsolata', sans-serif;
}
/* Headings font face */
h1, h2, h3, h4, h5 {
font-family: 'Inconsolata', sans-serif;
}
p, a, span, div, input {
font-family: 'Inconsolata', sans-serif;
}

4
src/styles/themes/DemoTheme.scss Normal file
View File

@ -0,0 +1,4 @@
body {
background: red !important;
border: 2px dashed yellow;
}

4
src/views/Home.vue
View File

@ -101,7 +101,6 @@ export default {
if (this.appConfig) {
if (this.appConfig.externalStyleSheet) {
const externals = this.appConfig.externalStyleSheet;
console.log(externals);
if (Array.isArray(externals)) {
externals.forEach((ext, i) => {
availibleThemes[`External Stylesheet ${i + 1}`] = ext;
@ -141,7 +140,6 @@ export default {
</script>
<style lang="scss" scoped>
@import '../../src/styles/color-pallet.scss';
@import '../../src/styles/media-queries.scss';
.home {
@ -185,7 +183,7 @@ export default {
.no-data {
font-size: 2rem;
color: $background;
color: var(--background);
background: #ffffffeb;
width: fit-content;
margin: 2rem auto;

2
vue.config.js
View File

@ -1,6 +1,6 @@
module.exports = {
chainWebpack: config => {
config.module.rules.delete("svg");
config.module.rules.delete('svg');
},
configureWebpack: {
module: {

5
yarn.lock
View File

@ -8572,6 +8572,11 @@ vue-router@^3.0.3:
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.5.1.tgz#edf3cf4907952d1e0583e079237220c5ff6eb6c9"
integrity sha512-RRQNLT8Mzr8z7eL4p7BtKvRaTSGdCbTy2+Mm5HTJvLGYSSeG9gDzNasJPP/yOYKLy+/cLG/ftrqq5fvkFwBJEw==
vue-select@^3.11.2:
version "3.11.2"
resolved "https://registry.yarnpkg.com/vue-select/-/vue-select-3.11.2.tgz#3ef93e3f2707e133c2df0b2920a05eea78764d18"
integrity sha512-pIOcY8ajWNSwg8Ns4eHVr5ZWwqKCSZeQRymTnlUI8i+3QiQXF6JIM4lylK6mVfbccs4S6vOyxB7zmJBpp7tDUg==
vue-style-loader@^4.1.0:
version "4.1.3"
resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz#6d55863a51fa757ab24e89d9371465072aa7bc35"