evan/deemixer
1
0
Fork 0
Code Issues Pull Requests 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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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;
}
}
}