tieptk/admin_hura_8
2
1
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

menu

Browse Source
This commit is contained in:
Tieptk
2024-05-16 11:38:34 +07:00
parent 48c9cba704
commit dccf38d6d3
3 changed files with 148 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
assets/script/pc_style.css
View File

@@ -322,9 +322,12 @@ a {
align-items: center; align-items: center;
transition: 0.3s all; transition: 0.3s all;
position: relative; position: relative;
margin: 5px;
background: #004e99;
border-radius: 4px;
} }
.admin-menu .item:hover, .admin-menu .item.current { .admin-menu .item:hover, .admin-menu .item.current {
background: #81b5e4; background: #22a2ff;
} }
.admin-menu .item:hover .icons, .admin-menu .item.current .icons { .admin-menu .item:hover .icons, .admin-menu .item.current .icons {
filter: brightness(100); filter: brightness(100);
@@ -423,78 +426,79 @@ a {
background: transparent; background: transparent;
} }
.admin-menu .icons { .admin-menu .icons {
width: 50px; width: 42px;
height: 40px; height: 31px;
} }
.admin-menu .icon-home { .admin-menu .icon-home {
background-position: 7px 3px; background-position: 4px -1px;
} }
.admin-menu .icon-sell { .admin-menu .icon-sell {
background-position: -29px 3px; background-position: -32px -1px;
} }
.admin-menu .icon-product { .admin-menu .icon-product {
background-position: -66px 3px; background-position: -68px -1px;
} }
.admin-menu .icon-user { .admin-menu .icon-user {
background-position: -103px 3px; background-position: -105px -1px;
} }
.admin-menu .icon-marketing { .admin-menu .icon-marketing {
background-position: -139px 3px; background-position: -142px -1px;
} }
.admin-menu .icon-content { .admin-menu .icon-content {
background-position: -172px 3px; background-position: -175px -1px;
} }
.admin-menu .icon-stats { .admin-menu .icon-stats {
background-position: -208px 3px; background-position: -210px -1px;
} }
.admin-menu .icon-system { .admin-menu .icon-system {
background-position: -247px 3px; background-position: -249px -1px;
} }
.admin-menu .icon-settings { .admin-menu .icon-settings {
background-position: -282px 2px; background-position: -285px -1px;
margin-left: -1px; margin-left: -1px;
} }
.admin-menu .icon-support { .admin-menu .icon-support {
background-position: -318px 3px; background-position: -320px -1px;
} }
.admin-menu .icon-account { .admin-menu .icon-account {
background-position: -354px 2px; background-position: -356px -1px;
} }
.admin-menu .icon-logout { .admin-menu .icon-logout {
background-position: 6px -34px; background-position: 4px -37px;
} }
.admin-menu .icon-investor_relation { .admin-menu .icon-investor_relation {
background-position: 6px -115px; background-position: 6px -115px;
} }
.admin-menu .icon-job { .admin-menu .icon-job {
background-position: -37px -114px; background-position: -41px -118px;
} }
.admin-menu .icon-pcbuilder { .admin-menu .icon-pcbuilder {
background-position: -83px -114px; background-position: -87px -118px;
} }
.admin-menu .icon-payinstall { .admin-menu .icon-payinstall {
background-position: -128px -114px; background-position: -130px -118px;
} }
.admin-menu .icon-distributor { .admin-menu .icon-distributor {
background-position: -173px -114px; background-position: -175px -114px;
} }
.admin-menu .logo { .admin-menu .logo {
position: relative; position: relative;
background: transparent;
border: 0;
} }
.admin-menu .icon-close { .admin-menu .icon-close {
position: absolute; width: 42px;
top: 12px;
right: -40px;
width: 40px;
display: block; display: block;
background-color: rgb(0 78 153/var(--tw-bg-opacity)); background-color: #22a2ff;
height: 36px; height: 31px;
margin: 0 auto;
border-radius: 4px;
} }
.admin-menu .icon-close i { .admin-menu .icon-close i {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
line-height: 40px; line-height: 33px;
} }
.admin-content-container { .admin-content-container {

57
assets/script/pc_style.scss
View File

@@ -80,6 +80,7 @@ a {
width: 8px; width: 8px;
height: 10px; height: 10px;
} }
.clearfix { .clearfix {
&::after { &::after {
content: ""; content: "";
@@ -303,9 +304,12 @@ a {
align-items: center; align-items: center;
transition: 0.3s all; transition: 0.3s all;
position: relative; position: relative;
margin: 5px;
background: #004e99;
border-radius: 4px;
&:hover, &:hover,
&.current { &.current {
background: #81b5e4; background: #22a2ff;
.icons { .icons {
filter: brightness(100); filter: brightness(100);
} }
@@ -413,77 +417,78 @@ a {
} }
} }
.icons { .icons {
width: 50px; width: 42px;
height: 40px; height: 31px;
} }
.icon-home { .icon-home {
background-position: 7px 3px; background-position: 4px -1px;
} }
.icon-sell { .icon-sell {
background-position: -29px 3px; background-position: -32px -1px;
} }
.icon-product { .icon-product {
background-position: -66px 3px; background-position: -68px -1px;
} }
.icon-user { .icon-user {
background-position: -103px 3px; background-position: -105px -1px;
} }
.icon-marketing { .icon-marketing {
background-position: -139px 3px; background-position: -142px -1px;
} }
.icon-content { .icon-content {
background-position: -172px 3px; background-position: -175px -1px;
} }
.icon-stats { .icon-stats {
background-position: -208px 3px; background-position: -210px -1px;
} }
.icon-system { .icon-system {
background-position: -247px 3px; background-position: -249px -1px;
} }
.icon-settings { .icon-settings {
background-position: -282px 2px; background-position: -285px -1px;
margin-left: -1px; margin-left: -1px;
} }
.icon-support { .icon-support {
background-position: -318px 3px; background-position: -320px -1px;
} }
.icon-account { .icon-account {
background-position: -354px 2px; background-position: -356px -1px;
} }
.icon-logout { .icon-logout {
background-position: 6px -34px; background-position: 4px -37px;
} }
.icon-investor_relation { .icon-investor_relation {
background-position: 6px -115px; background-position: 6px -115px;
} }
.icon-job { .icon-job {
background-position: -37px -114px; background-position: -41px -118px;
} }
.icon-pcbuilder { .icon-pcbuilder {
background-position: -83px -114px; background-position: -87px -118px;
} }
.icon-payinstall { .icon-payinstall {
background-position: -128px -114px; background-position: -130px -118px;
} }
.icon-distributor { .icon-distributor {
background-position: -173px -114px; background-position: -175px -114px;
} }
.logo { .logo {
position: relative; position: relative;
background: transparent;
border: 0;
} }
.icon-close { .icon-close {
position: absolute; width: 42px;
top: 12px;
right: -40px;
width: 40px;
display: block; display: block;
background-color: rgb(0 78 153 / var(--tw-bg-opacity)); background-color: #22a2ff;
height: 36px; height: 31px;
margin: 0 auto;
border-radius: 4px;
i { i {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
line-height: 40px; line-height: 33px;
} }
} }
} }

10
template/theme.html
View File

@@ -110,19 +110,18 @@
</div> </div>
<!-- Menu collapse --> <!-- Menu collapse -->
<div class="admin-menu box-menu fixed top-0 bg-[#004E99] flex flex-col justify-between pb-[20px] min-h-[100vh] hidden" <div class="admin-menu box-menu fixed top-0 bg-[#004180] pb-[20px] h-[100vh] hidden" id="js-menu-small">
id="js-menu-small"> <div class="flex flex-col justify-between">
<div> <div>
<div <div
class="logo item items-center justify-center border-[rgba(255,255,255,0.15)] border-b p-[20px_0_!important]"> class="logo item items-center justify-center border-[rgba(255,255,255,0.15)] border-b p-[20px_0_!important]">
<a href="/" class=""> <a href="/" class="">
<img src="{{ 'logo_small.png' | asset_url }}" alt=""> <img src="{{ 'logo_small.png' | asset_url }}" alt="">
</a> </a>
</div>
<a href="javascript:void(0)" title="Mở menu" class="icon-close" id="js-show-menu"> <a href="javascript:void(0)" title="Mở menu" class="icon-close" id="js-show-menu">
<i class="fa-solid fa-indent"></i> <i class="fa-solid fa-indent"></i>
</a> </a>
</div>
<div class="item"> <div class="item">
<a href="/" class="icons icon-home"> </a> <a href="/" class="icons icon-home"> </a>
@@ -208,7 +207,6 @@
</div> </div>
</div> </div>
</div> </div>
<div class="item"> <div class="item">
<a href="" class="icons icon-logout"> </a> <a href="" class="icons icon-logout"> </a>
@@ -218,6 +216,8 @@
</div> </div>
</div> </div>
</div>
<div class="admin-content-container ml-[50px]" id="js-admin-content-container"> <div class="admin-content-container ml-[50px]" id="js-admin-content-container">
<!-- Header --> <!-- Header -->
<div class="admin-header-container flex items-center justify-between bg-white px-4 py-3"> <div class="admin-header-container flex items-center justify-between bg-white px-4 py-3">