rename sass to scss
This commit is contained in:
geekifan
258
assets/scss/layout/_sidebar.scss
Normal file
258
assets/scss/layout/_sidebar.scss
Normal file
@ -0,0 +1,258 @@
|
||||
@use '../abstracts/variables' as v;
|
||||
@use '../abstracts/mixins' as mx;
|
||||
@use '../abstracts/breakpoints' as bp;
|
||||
@use '../abstracts/placeholders';
|
||||
|
||||
$btn-border-width: 3px;
|
||||
$btn-mb: 0.5rem;
|
||||
$sidebar-display: 'sidebar-display'; /* the attribute for sidebar display */
|
||||
|
||||
#sidebar {
|
||||
@include mx.pl-pr(0);
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
width: v.$sidebar-width;
|
||||
background: var(--sidebar-bg);
|
||||
border-right: 1px solid var(--sidebar-border-color);
|
||||
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include bp.lt(bp.get(lg)) {
|
||||
@include mx.slide;
|
||||
|
||||
transform: translateX(-#{v.$sidebar-width}); /* hide */
|
||||
-webkit-transform: translateX(-#{v.$sidebar-width});
|
||||
|
||||
[#{$sidebar-display}] & {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@include bp.xxxl {
|
||||
width: v.$sidebar-width-large;
|
||||
}
|
||||
|
||||
%sidebar-link-hover {
|
||||
&:hover {
|
||||
color: var(--sidebar-active-color);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@extend %sidebar-links;
|
||||
}
|
||||
|
||||
#avatar {
|
||||
display: block;
|
||||
width: 6.5rem;
|
||||
height: 6.5rem;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--avatar-border-color) 0 0 0 2px;
|
||||
transform: translateZ(0); /* fixed the zoom in Safari */
|
||||
|
||||
@include bp.sm {
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
}
|
||||
|
||||
img {
|
||||
transition: transform 0.5s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile-wrapper {
|
||||
@include mx.mt-mb(2.5rem);
|
||||
@extend %clickable-transition;
|
||||
|
||||
padding-left: 2.5rem;
|
||||
padding-right: 1.25rem;
|
||||
width: 100%;
|
||||
|
||||
@include bp.lg {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
@include bp.xxxl {
|
||||
margin-top: 3.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
padding-left: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.site-title {
|
||||
@extend %clickable-transition;
|
||||
@extend %sidebar-link-hover;
|
||||
|
||||
font-family: inherit;
|
||||
font-weight: 900;
|
||||
font-size: 1.75rem;
|
||||
line-height: 1.2;
|
||||
letter-spacing: 0.25px;
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 0.5rem;
|
||||
width: fit-content;
|
||||
color: var(--site-title-color);
|
||||
}
|
||||
|
||||
.site-subtitle {
|
||||
font-size: 95%;
|
||||
color: var(--site-subtitle-color);
|
||||
margin-top: 0.25rem;
|
||||
word-spacing: 1px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-bottom: 2rem;
|
||||
|
||||
li.nav-item {
|
||||
opacity: 0.9;
|
||||
width: 100%;
|
||||
|
||||
@include mx.pl-pr(1.5rem);
|
||||
|
||||
@include bp.xxxl {
|
||||
@include mx.pl-pr(2.75rem);
|
||||
}
|
||||
|
||||
a.nav-link {
|
||||
@include mx.pt-pb(0.6rem);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 0.75rem;
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--sidebar-hover-bg);
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 95%;
|
||||
opacity: 0.8;
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 90%;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.nav-link {
|
||||
color: var(--sidebar-active-color);
|
||||
background-color: var(--sidebar-hover-bg);
|
||||
|
||||
span {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-bottom {
|
||||
padding-left: 2rem;
|
||||
padding-right: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
|
||||
@include bp.xxxl {
|
||||
padding-left: 2.75rem;
|
||||
margin-bottom: 1.75rem;
|
||||
}
|
||||
|
||||
$btn-size: 1.75rem;
|
||||
|
||||
%button {
|
||||
width: $btn-size;
|
||||
height: $btn-size;
|
||||
margin-bottom: $btn-mb; // multi line gap
|
||||
border-radius: 50%;
|
||||
color: var(--sidebar-btn-color);
|
||||
background-color: var(--sidebar-btn-bg);
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:not(:focus-visible) {
|
||||
box-shadow: var(--sidebar-border-color) 0 0 0 1px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--sidebar-hover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@extend %button;
|
||||
@extend %sidebar-link-hover;
|
||||
@extend %clickable-transition;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: v.$sb-btn-gap;
|
||||
|
||||
@include bp.xxxl {
|
||||
margin-right: v.$sb-btn-gap-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
line-height: $btn-size;
|
||||
}
|
||||
|
||||
#mode-toggle {
|
||||
@extend %button;
|
||||
@extend %sidebar-links;
|
||||
@extend %sidebar-link-hover;
|
||||
}
|
||||
|
||||
.icon-border {
|
||||
@extend %no-cursor;
|
||||
@include mx.ml-mr(calc((v.$sb-btn-gap - $btn-border-width) / 2));
|
||||
|
||||
background-color: var(--sidebar-btn-color);
|
||||
content: '';
|
||||
width: $btn-border-width;
|
||||
height: $btn-border-width;
|
||||
border-radius: 50%;
|
||||
margin-bottom: $btn-mb;
|
||||
|
||||
@include bp.xxxl {
|
||||
@include mx.ml-mr(calc((v.$sb-btn-gap-lg - $btn-border-width) / 2));
|
||||
}
|
||||
}
|
||||
} /* .sidebar-bottom */
|
||||
} /* #sidebar */
|
||||
|
||||
[#{$sidebar-display}] {
|
||||
#main-wrapper {
|
||||
@include bp.lt(bp.get(lg)) {
|
||||
transform: translateX(v.$sidebar-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user