danolo
/
deemix-webui
mirror of https://gitlab.com/RemixDev/deemix-webui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

wip: fixed sidebar style; style: removed foreground inverted variable; style: removed icon hover variable; style: removed panels text variable; wip: sidebar link active style

This commit is contained in:
Roberto Tonino 2020-10-16 23:56:53 +02:00
parent 09f3b2138d
commit 301c6f0ebe
9 changed files with 23 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

2
src/App.vue
View File

@ -2,10 +2,12 @@
<div>
<div class="app-container">
<TheSidebar />
<div class="content-container">
<TheSearchBar />
<TheContent />
</div>
<TheDownloadBar />
</div>

11
src/components/TheSidebar.vue
View File

@ -1,7 +1,7 @@
<template>
<aside
id="sidebar"
class="top-0 left-0 flex flex-col w-12 h-full absoluteZ bg-panels-bg text-panels-text"
class="top-0 left-0 flex flex-col w-12 h-full absoluteZ bg-panels-bg text-foreground"
role="navigation"
aria-label="sidebar"
>
@ -15,13 +15,10 @@
:aria-label="link.ariaLabel"
:to="{ name: link.routerName }"
@click.native="activeTablink = link.name"
style="transition: all 500ms; color: inherit"
>
<i class="p-2 text-3xl transition-all duration-500 material-icons side_icon">{{ link.icon }}</i>
<span
class="ml-5 overflow-hidden capitalize whitespace-no-wrap transition-all duration-75 ease-in-out delay-200 opacity-0 main_tablinks_text"
style="letter-spacing: 1.3px"
>
<!-- style="color: inherit" -->
<i class="p-2 text-3xl material-icons side_icon">{{ link.icon }}</i>
<span class="ml-5 overflow-hidden capitalize whitespace-no-wrap main_tablinks_text" style="letter-spacing: 1.3px">
{{ $t(link.label) }}
</span>
<span

2
src/components/downloads/TheDownloadBar.vue
View File

@ -1,7 +1,7 @@
<template>
<div
id="download_tab_container"
class="block tab_hidden bg-panels-bg text-panels-text"
class="block tab_hidden bg-panels-bg text-foreground"
@transitionend="$refs.container.style.transition = ''"
ref="container"
:data-label="$t('downloads')"

2
src/components/globals/TheContextMenu.vue
View File

@ -224,7 +224,7 @@ export default {
left: 0;
min-width: 100px;
border-radius: 7px;
background: var(--foreground-inverted);
background: var(--secondary-background);
box-shadow: 4px 10px 18px 0px hsla(0, 0%, 0%, 0.15);
overflow: hidden;
z-index: 10000;

36
src/styles/scss/_sidebar.scss
View File

@ -2,53 +2,23 @@ $sidebar-timing: 125ms;
$sidebar-delay: 75ms;
#sidebar {
// transition: width $sidebar-timing ease-in-out $sidebar-delay;
// z-index: 999;
width: 15.625rem;
height: 100vh;
// &:hover {
// width: 12.5rem;
// }
.main_tablinks {
// &.active {
// @apply bg-primary;
// }
@apply text-foreground;
&:hover {
// background-color: var(--sidebar-link-bg);
}
}
// &:hover {
.main_tablinks {
&.active,
&:hover {
background: var(--sidebar-link-bg);
.side_icon {
color: var(--primary-color);
@apply text-primary;
}
}
}
.main_tablinks_text {
@apply opacity-100;
}
#theme_togglers {
@apply opacity-100;
}
// }
#theme_togglers {
// opacity: 0;
transition: all $sidebar-timing ease-in-out $sidebar-delay;
}
.theme_toggler {
// @apply w-6 h-6 rounded-full border border-grayscale-500 cursor-pointer;
transition: border 200ms ease-in-out;
&--active {
@ -60,7 +30,7 @@ $sidebar-delay: 75ms;
}
&--dark {
background: hsl(0, 0%, 8%);
@apply bg-grayscale-80;
}
&--purple {

26
src/styles/scss/base/_base.scss
View File

@ -16,13 +16,9 @@
--main-background: theme('colors.white');
--secondary-background: theme('colors.grayscale.930');
--foreground: theme('colors.grayscale.200');
--foreground-inverted: theme('colors.grayscale.930');
--panels-background: hsl(210, 3%, 14%);
--panels-text: theme('colors.white');
--sidebar-link-bg: theme('colors.grayscale.240');
--icon-hover: var(--primary-color);
--panels-background: hsl(216, 4%, 78%);
// --sidebar-link-bg: theme('colors.grayscale.600');
--sidebar-link-bg: var(--main-background); // hover bg color icons left panel
--table-bg: theme('colors.white');
--table-zebra: theme('colors.grayscale.900');
@ -33,13 +29,9 @@
--main-background: hsl(240, 10%, 8%);
--secondary-background: hsl(240, 12%, 16%); // e.g. search bar bg
--foreground: theme('colors.grayscale.930'); // primary text + icons in main + search
--foreground-inverted: hsl(240, 12%, 16%); // copy link when inactive
--panels-background: hsl(240, 15%, 12%); // panel left + right bg
--panels-text: theme('colors.white'); // icons + text colors in panels
--sidebar-link-bg: hsl(240, 10%, 22%); // hover bg color icons left panel
--icon-hover: hsl(210, 100%, 52%); // e.g. hover color on icons like download-button
// --sidebar-link-bg: hsl(240, 10%, 22%); // hover bg color icons left panel
--sidebar-link-bg: var(--main-background); // hover bg color icons left panel
--table-bg: hsl(240, 10%, 8%); // e.g. results table bg 1st row
--table-zebra: hsl(240, 15%, 11%); // e.g. results table bg 2nd alternate
@ -50,13 +42,9 @@
--main-background: hsl(261, 74%, 6%);
--secondary-background: hsl(257, 61%, 10%);
--foreground: theme('colors.grayscale.930');
--foreground-inverted: hsl(258, 62%, 8%);
--panels-background: hsl(257, 70%, 9%);
--panels-text: theme('colors.white');
--sidebar-link-bg: hsl(257, 70%, 17%);
--icon-hover: hsl(186, 44%, 54%);
// --sidebar-link-bg: hsl(257, 70%, 17%);
--sidebar-link-bg: var(--main-background); // hover bg color icons left panel
--table-bg: hsl(261, 74%, 6%);
--table-zebra: hsl(257, 61%, 10%);

2
src/styles/scss/globals/_tables.scss
View File

@ -200,7 +200,7 @@ $table-border-radius: 3px;
&:hover {
i.material-icons {
color: var(--icon-hover);
@apply text-primary;
}
}
}

11
tailwind.config.js
View File

@ -23,9 +23,7 @@ module.exports = {
grayscale: {
80: 'hsl(0, 0%, 8%)', // Remove maybe
100: 'hsl(0, 0%, 10%)',
140: 'hsl(0, 0%, 14%)', // Remove maybe
200: 'hsl(0, 0%, 20%)',
240: 'hsl(0, 0%, 24%)', // Remove maybe
300: 'hsl(0, 0%, 30%)',
400: 'hsl(0, 0%, 40%)',
500: 'hsl(0, 0%, 50%)',
@ -37,19 +35,14 @@ module.exports = {
900: 'hsl(0, 0%, 90%)',
930: 'hsl(0, 0%, 93%)' // Remove maybe
},
// primary: 'var(--primary-color)',
primary: 'hsl(210, 100%, 52%)',
background: {
main: 'var(--main-background)',
secondary: 'var(--secondary-background)'
},
foreground: {
default: 'var(--foreground)',
inverted: 'var(--foreground-inverted)'
},
foreground: 'var(--foreground)',
panels: {
bg: 'var(--panels-background)',
text: 'var(--panels-text)'
bg: 'var(--panels-background)'
}
}
}