improved sidebar smoothness and status feddback
This commit is contained in:
Roberto Tonino
@@ -1,14 +1,17 @@
|
||||
$sidebar-timing: 125ms;
|
||||
$sidebar-delay: 75ms;
|
||||
|
||||
#sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 48px;
|
||||
width: $sidebar-width;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: var(--panels-background);
|
||||
color: var(--panels-text);
|
||||
transition: width 125ms ease-in-out 75ms;
|
||||
transition: width $sidebar-timing ease-in-out $sidebar-delay;
|
||||
z-index: 999;
|
||||
|
||||
&:hover {
|
||||
@@ -16,97 +19,120 @@
|
||||
}
|
||||
|
||||
.main_tablinks {
|
||||
&.active .side_icon {
|
||||
color: var(--accent-color);
|
||||
transition: all 500ms;
|
||||
|
||||
&.active {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
&:not(#theme_selector) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 5px;
|
||||
height: 55px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #3e3e3e;
|
||||
background-color: var(--sidebar-link-bg);
|
||||
|
||||
.side_icon {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main_tablinks_text {
|
||||
display: none;
|
||||
display: inline-block;
|
||||
margin-left: 20px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
transition: all 50ms ease-in-out 200ms;
|
||||
}
|
||||
|
||||
.side_icon {
|
||||
font-size: 30px;
|
||||
padding: 9px;
|
||||
transition: all 500ms;
|
||||
|
||||
&.side_icon--theme {
|
||||
&--theme {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&::selection {
|
||||
background: none;
|
||||
}
|
||||
@include removeSelectionBackground;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
#theme_togglers {
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
transition-delay: 200ms;
|
||||
.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);
|
||||
filter: grayscale(0);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--sidebar-link-bg-20);
|
||||
filter: grayscale(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main_tablinks_text {
|
||||
display: inline-block;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#theme_togglers {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Theme selector */
|
||||
#theme_selector {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#theme_togglers {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transition: all $sidebar-timing ease-in-out $sidebar-delay;
|
||||
}
|
||||
|
||||
.theme_toggler {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 1000px;
|
||||
border: 1px solid var(--separator);
|
||||
cursor: pointer;
|
||||
transition: border 200ms ease-in-out;
|
||||
|
||||
&--active {
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
&[data-theme-variant='light'] {
|
||||
background: white;
|
||||
}
|
||||
|
||||
&[data-theme-variant='dark'] {
|
||||
background: hsl(0, 0%, 8%);
|
||||
}
|
||||
|
||||
&[data-theme-variant='purple'] {
|
||||
background: hsl(261, 85%, 37%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Theme selector */
|
||||
|
||||
#theme_selector {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#theme_togglers {
|
||||
display: flex;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
transition: all 50ms ease 0s;
|
||||
}
|
||||
|
||||
.theme_toggler {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 1000px;
|
||||
border: 1px solid var(--separator);
|
||||
cursor: pointer;
|
||||
transition: border 200ms ease-in-out;
|
||||
|
||||
&--active {
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
&[data-theme-variant='light'] {
|
||||
background: white;
|
||||
}
|
||||
|
||||
&[data-theme-variant='dark'] {
|
||||
background: #141414;
|
||||
}
|
||||
|
||||
&[data-theme-variant='purple'] {
|
||||
background: #460ead;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -49,3 +49,14 @@
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
// You can find a better name, I have no ideas
|
||||
@keyframes grayscalize {
|
||||
from {
|
||||
filter: grayscale(0);
|
||||
}
|
||||
|
||||
to {
|
||||
filter: grayscale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,6 @@ html {
|
||||
|
||||
--main-scroll: hsl(0, 0%, 33%);
|
||||
--panels-scroll: hsl(180, 2%, 17%);
|
||||
--accent-color: hsl(210, 100%, 52%);
|
||||
--tag-background: hsl(210, 100%, 38%);
|
||||
--tag-text: hsl(0, 0%, 100%);
|
||||
--toast-background: hsla(0, 0%, 0%, 0.867);
|
||||
@@ -19,10 +18,14 @@ html[data-theme='light'] {
|
||||
--secondary-background: hsl(0, 0%, 93%);
|
||||
--foreground: hsl(0, 0%, 20%);
|
||||
--foreground-inverted: hsl(0, 0%, 93%);
|
||||
--accent-color: hsl(210, 100%, 52%);
|
||||
--panels-background: hsl(210, 3%, 14%);
|
||||
--panels-text: hsl(0, 0%, 100%);
|
||||
--accent-text: hsl(0, 0%, 0%);
|
||||
|
||||
--sidebar-link-bg: hsl(0, 0%, 24%);
|
||||
--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);
|
||||
|
||||
--table-bg: hsl(0, 0%, 100%);
|
||||
--table-zebra: hsl(0, 0%, 79%);
|
||||
--table-highlight: hsl(0, 0%, 56%);
|
||||
@@ -33,10 +36,14 @@ html[data-theme='dark'] {
|
||||
--secondary-background: hsl(0, 0%, 14%);
|
||||
--foreground: hsl(0, 0%, 93%);
|
||||
--foreground-inverted: hsl(0, 0%, 20%);
|
||||
--accent-color: hsl(210, 100%, 52%);
|
||||
--panels-background: hsl(0, 0%, 10%);
|
||||
--panels-text: hsl(0, 0%, 100%);
|
||||
--accent-text: hsl(0, 0%, 87%);
|
||||
|
||||
--sidebar-link-bg: hsl(0, 0%, 24%);
|
||||
--sidebar-link-bg-20: hsla(0, 0%, 24%, 0.2);
|
||||
|
||||
--table-bg: hsl(0, 0%, 8%);
|
||||
--table-zebra: hsl(0, 0%, 14%);
|
||||
--table-highlight: hsl(0, 0%, 20%);
|
||||
@@ -52,6 +59,9 @@ html[data-theme='purple'] {
|
||||
--panels-text: hsl(0, 0%, 100%);
|
||||
--accent-text: hsl(0, 0%, 87%);
|
||||
|
||||
--sidebar-link-bg: hsl(257, 70%, 17%);
|
||||
--sidebar-link-bg-20: hsla(257, 70%, 17%, 0.2);
|
||||
|
||||
--table-bg: hsl(261, 74%, 6%);
|
||||
--table-zebra: hsl(257, 61%, 10%);
|
||||
--table-highlight: hsl(257, 66%, 27%);
|
||||
|
||||
1
src/styles/scss/base/_variables.scss
Normal file
1
src/styles/scss/base/_variables.scss
Normal file
@@ -0,0 +1 @@
|
||||
$sidebar-width: 48px;
|
||||
@@ -84,21 +84,21 @@ button {
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
transition: transform 50ms ease-in-out, background-color 200ms ease;
|
||||
}
|
||||
|
||||
button:active {
|
||||
background-color: var(--accent-color);
|
||||
transform: scale(0.95);
|
||||
}
|
||||
&:active {
|
||||
background-color: var(--accent-color);
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: none;
|
||||
border: 1px solid var(--accent-color);
|
||||
&:hover {
|
||||
background: none;
|
||||
border: 1px solid var(--accent-color);
|
||||
}
|
||||
}
|
||||
|
||||
#main_content {
|
||||
margin-left: 48px;
|
||||
width: calc(100% - 48px);
|
||||
margin-left: $sidebar-width;
|
||||
width: calc(100% - $sidebar-width);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
// SASS only
|
||||
@import './base/variables';
|
||||
|
||||
@import './base/base';
|
||||
@import './base/normalize';
|
||||
@import './base/mixins';
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
#about_tab p {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
#about_tab h3 {
|
||||
margin: 8px 0px;
|
||||
}
|
||||
#about_tab hr {
|
||||
margin: 12px 0px;
|
||||
#about_tab {
|
||||
p {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 8px 0px;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 12px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -28,11 +28,6 @@
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.main_tablinks_text {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.section-tabs {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
@@ -42,7 +37,7 @@
|
||||
&__tab {
|
||||
flex: 1;
|
||||
font-size: 1.2rem;
|
||||
padding: .8em;
|
||||
padding: 0.8em;
|
||||
border-top: 3px solid var(--foreground);
|
||||
text-align: center;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user