style: removed grayscale filters on sidebar; style: refactored sidebar; style: now the sidebar is fixed
This commit is contained in:
Roberto Tonino
parent
2f42f965d2
commit
09f3b2138d
File diff suppressed because one or more lines are too long
@ -1,8 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<TheSidebar />
|
||||
|
||||
<div class="app-container">
|
||||
<TheSidebar />
|
||||
<div class="content-container">
|
||||
<TheSearchBar />
|
||||
<TheContent />
|
||||
@ -20,7 +19,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
<style>
|
||||
.app-container {
|
||||
display: flex;
|
||||
}
|
||||
@ -29,7 +28,7 @@
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 48px;
|
||||
/* margin-left: 48px; */
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -3,8 +3,10 @@
|
||||
<div class="search__icon">
|
||||
<i class="material-icons">search</i>
|
||||
</div>
|
||||
|
||||
<input
|
||||
id="searchbar"
|
||||
class="w-full"
|
||||
autocomplete="off"
|
||||
type="search"
|
||||
name="searchbar"
|
||||
|
||||
@ -1,18 +1,29 @@
|
||||
<template>
|
||||
<aside id="sidebar" role="navigation" aria-label="sidebar">
|
||||
<aside
|
||||
id="sidebar"
|
||||
class="top-0 left-0 flex flex-col w-12 h-full absoluteZ bg-panels-bg text-panels-text"
|
||||
role="navigation"
|
||||
aria-label="sidebar"
|
||||
>
|
||||
<router-link
|
||||
tag="a"
|
||||
v-for="link in links"
|
||||
:key="link.id"
|
||||
tag="a"
|
||||
class="main_tablinks"
|
||||
class="relative flex items-center h-16 no-underline main_tablinks"
|
||||
:id="link.id"
|
||||
:class="{ active: activeTablink === link.name }"
|
||||
:aria-label="link.ariaLabel"
|
||||
:to="{ name: link.routerName }"
|
||||
@click.native="activeTablink = link.name"
|
||||
style="transition: all 500ms; color: inherit"
|
||||
>
|
||||
<i class="material-icons side_icon">{{ link.icon }}</i>
|
||||
<span class="main_tablinks_text">{{ $t(link.label) }}</span>
|
||||
<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"
|
||||
>
|
||||
{{ $t(link.label) }}
|
||||
</span>
|
||||
<span
|
||||
v-if="link.name === 'about' && updateAvailable"
|
||||
id="update-notification"
|
||||
@ -20,13 +31,15 @@
|
||||
></span>
|
||||
</router-link>
|
||||
|
||||
<span id="theme_selector" class="main_tablinks" role="link" aria-label="theme selector">
|
||||
<i class="material-icons side_icon side_icon--theme">palette</i>
|
||||
<div id="theme_togglers">
|
||||
<span class="flex h-12 mt-5" role="link" aria-label="theme selector">
|
||||
<i class="p-2 text-3xl transition-all duration-500 cursor-default material-icons side_icon side_icon--theme">
|
||||
palette
|
||||
</i>
|
||||
<div id="theme_togglers" class="relative flex items-center w-full justify-evenly">
|
||||
<div
|
||||
v-for="theme of themes"
|
||||
:key="theme"
|
||||
class="theme_toggler"
|
||||
class="w-6 h-6 border rounded-full cursor-pointer theme_toggler border-grayscale-500"
|
||||
:class="[{ 'theme_toggler--active': activeTheme === theme }, `theme_toggler--${theme}`]"
|
||||
@click="changeTheme(theme)"
|
||||
></div>
|
||||
|
||||
@ -2,130 +2,53 @@ $sidebar-timing: 125ms;
|
||||
$sidebar-delay: 75ms;
|
||||
|
||||
#sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: $sidebar-width;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: var(--panels-background);
|
||||
color: var(--panels-text);
|
||||
transition: width $sidebar-timing ease-in-out $sidebar-delay;
|
||||
z-index: 999;
|
||||
// transition: width $sidebar-timing ease-in-out $sidebar-delay;
|
||||
// z-index: 999;
|
||||
width: 15.625rem;
|
||||
height: 100vh;
|
||||
|
||||
&:hover {
|
||||
width: 200px;
|
||||
}
|
||||
// &:hover {
|
||||
// width: 12.5rem;
|
||||
// }
|
||||
|
||||
.main_tablinks {
|
||||
transition: all 500ms;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
// &.active {
|
||||
// @apply bg-primary;
|
||||
// }
|
||||
|
||||
&.active {
|
||||
background-color: var(--primary-color);
|
||||
&:hover {
|
||||
// background-color: var(--sidebar-link-bg);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(#theme_selector) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 55px;
|
||||
cursor: pointer;
|
||||
// &:hover {
|
||||
.main_tablinks {
|
||||
&.active,
|
||||
&:hover {
|
||||
background: var(--sidebar-link-bg);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--sidebar-link-bg);
|
||||
|
||||
.side_icon {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
.side_icon {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main_tablinks_text {
|
||||
margin-left: 20px;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
text-transform: capitalize;
|
||||
letter-spacing: 1.3px;
|
||||
white-space: nowrap;
|
||||
transition: all 50ms ease-in-out 200ms;
|
||||
}
|
||||
|
||||
.side_icon {
|
||||
font-size: 30px;
|
||||
padding: 9px;
|
||||
transition: all 500ms;
|
||||
|
||||
&--theme {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@include remove-selection-background;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.main_tablinks {
|
||||
&:hover {
|
||||
background: var(--sidebar-link-bg-20);
|
||||
filter: grayscale(0) opacity(1);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: var(--sidebar-link-bg);
|
||||
filter: grayscale(1);
|
||||
|
||||
// Fix for purple theme in which grayscale shows incoherent color
|
||||
html[data-theme='purple'] & {
|
||||
background: var(--sidebar-link-bg-20);
|
||||
filter: grayscale(0);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--sidebar-link-bg-20);
|
||||
filter: grayscale(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main_tablinks_text {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#theme_togglers {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Update Notification */
|
||||
#main_about_tablink {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Theme selector */
|
||||
#theme_selector {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
height: 50px;
|
||||
@apply opacity-100;
|
||||
}
|
||||
|
||||
#theme_togglers {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
@apply opacity-100;
|
||||
}
|
||||
// }
|
||||
|
||||
#theme_togglers {
|
||||
// opacity: 0;
|
||||
transition: all $sidebar-timing ease-in-out $sidebar-delay;
|
||||
}
|
||||
|
||||
.theme_toggler {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 1000px;
|
||||
border: 1px solid theme('colors.grayscale.500');
|
||||
cursor: pointer;
|
||||
// @apply w-6 h-6 rounded-full border border-grayscale-500 cursor-pointer;
|
||||
transition: border 200ms ease-in-out;
|
||||
|
||||
&--active {
|
||||
@ -133,7 +56,7 @@ $sidebar-delay: 75ms;
|
||||
}
|
||||
|
||||
&--light {
|
||||
background: white;
|
||||
@apply bg-white;
|
||||
}
|
||||
|
||||
&--dark {
|
||||
|
||||
@ -21,7 +21,6 @@
|
||||
--panels-text: theme('colors.white');
|
||||
|
||||
--sidebar-link-bg: theme('colors.grayscale.240');
|
||||
--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);
|
||||
|
||||
--icon-hover: var(--primary-color);
|
||||
|
||||
@ -39,7 +38,6 @@
|
||||
--panels-text: theme('colors.white'); // icons + text colors in panels
|
||||
|
||||
--sidebar-link-bg: hsl(240, 10%, 22%); // hover bg color icons left panel
|
||||
--sidebar-link-bg-20: hsla(240, 10%, 22%, 1); // same value but with opacity at 20% when tab selected bg
|
||||
|
||||
--icon-hover: hsl(210, 100%, 52%); // e.g. hover color on icons like download-button
|
||||
|
||||
@ -57,7 +55,6 @@
|
||||
--panels-text: theme('colors.white');
|
||||
|
||||
--sidebar-link-bg: hsl(257, 70%, 17%);
|
||||
--sidebar-link-bg-20: hsla(257, 70%, 17%, 0.2);
|
||||
|
||||
--icon-hover: hsl(186, 44%, 54%);
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
input[type='text'],
|
||||
input[type='password'],
|
||||
input[type='number'],
|
||||
input[type='search'] {
|
||||
input[type='number']/* ,
|
||||
input[type='search'] */ {
|
||||
// -webkit-appearance: none;
|
||||
// appearance: none;
|
||||
width: calc(100% - 16px);
|
||||
@ -292,6 +292,7 @@ a {
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
@apply select-none;
|
||||
$sizes: 18, 24, 36, 48;
|
||||
|
||||
@each $size in $sizes {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user