Skip to content

D
dashboard
Commit d664687b by Anoop
Options

changes

parent 83802baa
Showing with 35 additions and 15 deletions
css/main.css
:root{--primary: #375471;--dark-color: #333;--light-color: #fff;--text-color: #333;--text-color-light: rgba(255, 255, 255, 0.9);--border-radius: 0;--font-weight: 400;--font-weight-light: 300;--font-weight-bold: 600;--sidebar-bg: #2d323d;--submenu-bg:#242831}.scr-text{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal !important}.app-header{padding:15px;background:var(--primary);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#fff}.app-header>a{color:#fff}.app-header .action{display:-webkit-box;display:-ms-flexbox;display:flex}.app-header .action a{display:block;padding:5px 15px;margin-bottom:5px;opacity:0.8;-webkit-transition:all ease-in-out 0.3s;-o-transition:all ease-in-out 0.3s;transition:all ease-in-out 0.3s}.app-header .action a:hover,.app-header .action a:focus{opacity:1}.app-header .action>a,.app-header .action .action_text{color:#fff;font-size:1.5rem;text-decoration:none}.app-header .action>a .badge,.app-header .action .action_text .badge{font-size:.75rem}.user{display:-webkit-box;display:-ms-flexbox;display:flex;margin-right:auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-inline:15px auto}.user p{line-height:1.5;margin-bottom:0}.user_designation{color:var(--text-color-light);margin-bottom:5px !important}.user_name{margin-bottom:0 !important;font-weight:var(--font-weight-bold);color:var(--light-color);font-size:1.25rem}.user_avatar{margin-right:15px}.user_avatar img{width:65px;-o-object-fit:contain;object-fit:contain;height:65px;border-radius:50%;border:2px solid var(--light-color);padding:9px}.toggle{height:35px;width:35px;-webkit-box-flex:0;-ms-flex:0 0 35px;flex:0 0 35px;border:0;margin-right:15px;padding:7px 5px;position:relative;outline:0 !important;background:transparent;cursor:pointer}.toggle span{height:2px;width:80%;background:var(--light-color);display:block;position:absolute;right:0;left:0;margin:auto;-webkit-transition:all ease 0.3s;-o-transition:all ease 0.3s;transition:all ease 0.3s}.toggle span:nth-child(1){top:5px}.toggle span:nth-child(2){top:15px}.toggle span:nth-child(3){top:25px}.toggle:not(.active) span:nth-child(2){width:calc(100% - 15px);left:-8px}.toggle:not(.active) span:nth-child(3){width:calc(100% - 20px);left:-11px}.toggle.active span{-webkit-transition:all ease 0.3s;-o-transition:all ease 0.3s;transition:all ease 0.3s}.toggle.active span:first-child{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);top:15px}.toggle.active span:nth-child(2){opacity:0}.toggle.active span:nth-child(3){-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);top:15px}.toggle.dot-toggle{-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}.toggle.dot-toggle span{width:5px;height:5px;border-radius:5px;background:#333}.app-sidebar{width:100%;max-width:300px;color:var(--light-color);background:var(--sidebar-bg);height:calc(100vh - 95px);-webkit-transition:all ease-in-out .3s;-o-transition:all ease-in-out .3s;transition:all ease-in-out .3s}.app-sidebar a{color:var(--light-color)}.app-sidebar .page-links{list-style:none;padding:0;margin:0}.app-sidebar .page-links li{border-top:1px solid rgba(255,255,255,0.15);border-bottom:1px solid rgba(0,0,0,0.6)}.app-sidebar .page-links li:first-of-type{border-top:0}.app-sidebar .page-links li:last-of-type{border-bottom:0}.app-sidebar .page-links a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:15px;text-decoration:none;font-size:1rem}.app-sidebar .page-links a .bi{margin-right:15px;display:inline-block;font-size:1.25rem}.app-sidebar .sub-menu{display:none;list-style:none;padding:0 30px;margin:0;background:var(--submenu-bg)}.app-sidebar .sub-menu li{border:0;padding-inline:10px}.app-sidebar .sub-menu a{padding-block:10px}.app-sidebar .dropdown-toggle{display:-webkit-box !important;display:-ms-flexbox !important;display:flex !important;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.app-sidebar .dropdown-toggle::after{margin-left:auto}.app-sidebar:not(.expanded){max-width:50px}.app-sidebar:not(.expanded) .sub-menu{padding-inline:0;display:none !important;height:0;overflow:hidden;-webkit-transition:0s ease-in-out all;-o-transition:0s ease-in-out all;transition:0s ease-in-out all}.content-wrap{display:-webkit-box;display:-ms-flexbox;display:flex}.content-wrap .app-body{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:15px 30px} :root{--primary: #375471;--dark-color: #333;--light-color: #fff;--text-color: #333;--text-color-light: rgba(255, 255, 255, 0.9);--border-radius: 0;--font-weight: 400;--font-weight-light: 300;--font-weight-bold: 600;--sidebar-bg: #2d323d;--submenu-bg: #242831}.scr-text{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal !important}.app-header{padding:15px;background:var(--primary);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#fff}.app-header>a{color:#fff}.app-header .action{display:-webkit-box;display:-ms-flexbox;display:flex}.app-header .action a{display:block;padding:5px 15px;margin-bottom:5px;opacity:0.8;-webkit-transition:all ease-in-out 0.3s;-o-transition:all ease-in-out 0.3s;transition:all ease-in-out 0.3s}.app-header .action a:hover,.app-header .action a:focus{opacity:1}.app-header .action>a,.app-header .action .action_text{color:#fff;font-size:1.5rem;text-decoration:none}.app-header .action>a .badge,.app-header .action .action_text .badge{font-size:0.75rem}.user{display:-webkit-box;display:-ms-flexbox;display:flex;margin-right:auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-inline:15px auto}.user p{line-height:1.5;margin-bottom:0}.user_designation{color:var(--text-color-light);margin-bottom:5px !important}.user_name{margin-bottom:0 !important;font-weight:var(--font-weight-bold);color:var(--light-color);font-size:1.25rem}.user_avatar{margin-right:15px}.user_avatar img{width:65px;-o-object-fit:contain;object-fit:contain;height:65px;border-radius:50%;border:2px solid var(--light-color);padding:9px}.toggle{height:35px;width:35px;-webkit-box-flex:0;-ms-flex:0 0 35px;flex:0 0 35px;border:0;margin-right:15px;padding:7px 5px;position:relative;outline:0 !important;background:transparent;cursor:pointer}.toggle span{height:2px;width:80%;background:var(--light-color);display:block;position:absolute;right:0;left:0;margin:auto;-webkit-transition:all ease 0.3s;-o-transition:all ease 0.3s;transition:all ease 0.3s}.toggle span:nth-child(1){top:5px}.toggle span:nth-child(2){top:15px}.toggle span:nth-child(3){top:25px}.toggle:not(.active) span:nth-child(2){width:calc(100% - 15px);left:-8px}.toggle:not(.active) span:nth-child(3){width:calc(100% - 20px);left:-11px}.toggle.active span{-webkit-transition:all ease 0.3s;-o-transition:all ease 0.3s;transition:all ease 0.3s}.toggle.active span:first-child{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);top:15px}.toggle.active span:nth-child(2){opacity:0}.toggle.active span:nth-child(3){-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);top:15px}.toggle.dot-toggle{-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}.toggle.dot-toggle span{width:5px;height:5px;border-radius:5px;background:#333}.app-sidebar{width:100%;max-width:300px;color:var(--light-color);background:var(--sidebar-bg);height:calc(100vh - 95px);-webkit-transition:all ease-in-out 0.3s;-o-transition:all ease-in-out 0.3s;transition:all ease-in-out 0.3s}.app-sidebar a{color:var(--light-color)}.app-sidebar .page-links{list-style:none;padding:0;margin:0}.app-sidebar .page-links li{border-top:1px solid rgba(255,255,255,0.15);border-bottom:1px solid rgba(0,0,0,0.6)}.app-sidebar .page-links li:first-of-type{border-top:0}.app-sidebar .page-links li:last-of-type{border-bottom:0}.app-sidebar .page-links a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:15px;text-decoration:none;font-size:1rem}.app-sidebar .page-links a .bi{margin-right:15px;display:inline-block;font-size:1.25rem}.app-sidebar .sub-menu{display:none;list-style:none;padding:0 30px;margin:0;background:var(--submenu-bg)}.app-sidebar .sub-menu li{border:0;padding-inline:10px}.app-sidebar .sub-menu a{padding-block:10px}.app-sidebar .dropdown-toggle{display:-webkit-box !important;display:-ms-flexbox !important;display:flex !important;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.app-sidebar .dropdown-toggle::after{margin-left:auto}.app-sidebar:not(.expanded){max-width:50px}.app-sidebar:not(.expanded) .sub-menu{padding-inline:0;display:none !important;height:0;overflow:hidden;-webkit-transition:0s ease-in-out all;-o-transition:0s ease-in-out all;transition:0s ease-in-out all}.app-sidebar:not(.expanded) .page-links li{position:relative}.app-sidebar:not(.expanded) .page-links li:hover a{background:var(--submenu-bg)}.app-sidebar:not(.expanded) .page-links li:hover .sub-menu{display:block !important;height:initial !important;overflow:auto;max-height:400px;position:absolute;left:100%;top:0;white-space:nowrap;z-index:999}.content-wrap{display:-webkit-box;display:-ms-flexbox;display:flex}.content-wrap .app-body{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:15px 30px}
/*# sourceMappingURL=main.css.map */ /*# sourceMappingURL=main.css.map */
\ No newline at end of file
scss/main.scss
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
--font-weight-light: 300; --font-weight-light: 300;
--font-weight-bold: 600; --font-weight-bold: 600;
--sidebar-bg: #2d323d; --sidebar-bg: #2d323d;
--submenu-bg:#242831; --submenu-bg: #242831;
} }
.scr-text { .scr-text {
...@@ -54,8 +54,8 @@ ...@@ -54,8 +54,8 @@
color: #fff; color: #fff;
font-size: 1.5rem; font-size: 1.5rem;
text-decoration: none; text-decoration: none;
.badge{ .badge {
font-size: .75rem; font-size: 0.75rem;
} }
} }
} }
...@@ -172,7 +172,7 @@ ...@@ -172,7 +172,7 @@
color: var(--light-color); color: var(--light-color);
background: var(--sidebar-bg); background: var(--sidebar-bg);
height: calc(100vh - 95px); height: calc(100vh - 95px);
transition: all ease-in-out .3s; transition: all ease-in-out 0.3s;
a { a {
color: var(--light-color); color: var(--light-color);
} }
...@@ -205,48 +205,67 @@ ...@@ -205,48 +205,67 @@
} }
} }
.sub-menu{ .sub-menu {
display: none; display: none;
list-style: none; list-style: none;
padding: 0 30px; padding: 0 30px;
margin: 0; margin: 0;
background: var(--submenu-bg); background: var(--submenu-bg);
li{ li {
border: 0; border: 0;
padding-inline: 10px; padding-inline: 10px;
} }
a{ a {
padding-block: 10px; padding-block: 10px;
} }
} }
// a:focus-within + .sub-menu{ // a:focus-within + .sub-menu{
// display: block; // display: block;
// } // }
.dropdown-toggle{ .dropdown-toggle {
display: flex !important; display: flex !important;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
&::after{ &::after {
margin-left: auto; margin-left: auto;
} }
} }
&:not(.expanded){ &:not(.expanded) {
max-width: 50px; max-width: 50px;
.sub-menu{ .sub-menu {
padding-inline: 0; padding-inline: 0;
display: none !important; display: none !important;
height: 0; height: 0;
overflow: hidden; overflow: hidden;
transition: 0s ease-in-out all; transition: 0s ease-in-out all;
} }
.page-links li {
position: relative;
&:hover {
a{
background: var(--submenu-bg);
}
.sub-menu {
display: block !important;
height: initial !important;
overflow: auto;
max-height: 400px;
position: absolute;
left: 100%;
top: 0;
white-space: nowrap;
z-index: 999;
}
}
}
} }
} }
.content-wrap {
.content-wrap{
display: flex; display: flex;
.app-body{ .app-body {
flex-grow: 1; flex-grow: 1;
padding: 15px 30px; padding: 15px 30px;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment