gova/rootxwire
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Dhanraj
2024-07-07 14:31:05 +05:30
commit 1d502a2cf1
1089 changed files with 161249 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
static/assets/scss/elements/_side_menu.scss Normal file
View File

@ -0,0 +1,198 @@
// ------------------ side_menu style1 ------------------
.side_menu.style-7 {
position: fixed;
top: 0;
left: 0;
z-index: 10;
background-color: var(--color-gray2);
height: 100vh;
width: 40%;
min-width: max-content;
opacity: 0;
transform: translateX(-100%);
transition: all 0.5s ease-in-out;
pointer-events: none;
border-top-right-radius: 100%;
border-bottom-right-radius: 100%;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
z-index: 99999;
display: flex;
align-items: center;
.content{
width: 100%;
.logo{
padding: 30px 7vw;
border-bottom: 1px solid #9993;
img{
width: 300px;
max-width: 50%;
}
}
.side_foot{
padding: 30px 7vw;
border-top: 1px solid #9993;
h5{
text-transform: uppercase;
margin-bottom: 20px;
}
}
}
.pages_links {
padding: 15px 7vw;
height: calc(100vh - 240px);
overflow: auto;
&::-webkit-scrollbar {
height: 5px;
width: 3px;
background: #8169f122;
border-radius: 10px;
}
&::-webkit-scrollbar-thumb {
background: var(--color-blue7);
-webkit-border-radius: 0;
border-radius: 10px;
}
&::-webkit-scrollbar-corner {
background: #8169f122;
border-radius: 10px;
}
li {
opacity: 0;
// transform: translateY(-50px);
clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
a {
color: #222;
font-size: calc(14px + 1.5vw);
font-weight: bold;
margin: 10px 0;
position: relative;
transition: all 0.3s linear;
text-transform: capitalize;
&::after {
position: absolute;
content: "";
left: 110%;
top: 60%;
width: 0;
height: 2px;
background-color: var(--color-blue7);
transition: all 0.3s ease-in-out;
}
&:hover,
&.active {
color: var(--color-blue7);
&::after {
width: 50px;
}
}
}
}
ul {
li {
transition: all 1s ease;
&:nth-of-type(1) {
transition-delay: 0.3s;
}
&:nth-of-type(2) {
transition-delay: 0.4s;
}
&:nth-of-type(3) {
transition-delay: 0.5s;
}
&:nth-of-type(4) {
transition-delay: 0.6s;
}
&:nth-of-type(5) {
transition-delay: 0.7s;
}
&:nth-of-type(6) {
transition-delay: 0.8s;
}
&:nth-of-type(7) {
transition-delay: 0.9s;
}
&:nth-of-type(8) {
transition-delay: 1s;
}
}
}
}
.side_menu_cls{
position: absolute;
top: 40px;
right: 30px;
&:hover{
transform: rotate(45deg);
}
}
&.show {
opacity: 1;
transform: translateX(0);
pointer-events: all;
border-radius: 0;
li {
opacity: 1;
// transform: translateY(0);
clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
}
}
&.dark_theme{
background-color: #000;
color: #fff;
.pages_links li a{
color: #999;
&::after{
background: #999;
}
&:hover{
color: #fff;
&::after{
background: #999;
}
}
}
&::-webkit-scrollbar {
background: #fff3;
}
&::-webkit-scrollbar-thumb {
background: #fff3;
}
&::-webkit-scrollbar-corner {
background: #fff3;
}
}
}
.side_overlay{
position: fixed;
z-index: 99998;
width: 100vw;
height: 100vh;
background-color: #0009;
opacity: 0;
visibility: hidden;
top: 0;
left: 0;
transition: all 0.5s ease-in-out;
&.show{
opacity: 1;
visibility: visible;
}
}
@media screen and (max-width: 480px) {
.side_menu.style-7{
width: 100%;
.pages_links{
height: calc(100vh - 273px);
}
}
}