gitadmin/sk_fems_ui
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix bugs css menu

Browse Source
This commit is contained in:
Tran Van Dung/(Tran Van Dung)/현장대리인/SK
2025-08-13 11:43:43 +07:00
parent 68f3f0f381
commit de99b30485
3 changed files with 446 additions and 564 deletions
Download Patch File Download Diff File Expand all files Collapse all files

403
assets/scss/common.scss
View File

@ -128,220 +128,6 @@ a {
background: #383f5d;
}
// router-tab header
.router-tab {
height: 100%;
&__header {
align-items: flex-end;
height: 52px;
margin: -5px -5px 0;
padding: 0 20px;
box-sizing: border-box;
border-bottom: none !important;
}
&-page {
height: 100%;
}
& .router-tab__container {
overflow-y: auto;
height: calc(100vh - 105px);
max-height: calc(100vh - 105px);
padding: 20px;
}
.router-tab__slot-end {
align-self: center;
display: flex;
align-items: center;
>* {
flex: none;
margin-right: 6px;
&:last-child {
margin-right: 0;
}
}
.v-menu+.v-btn {
padding: 0 3px;
}
.v-btn {
border-radius: 4px;
}
}
.router-tab__nav {
padding-left: 0;
}
.router-tab__scroll {
height: 46px;
}
.router-tab__item {
height: 46px;
padding: 0 !important;
&:first-child {
border-left: none
}
&>span {
font-size: 14px;
}
&.is-active {
border-bottom: 2px solid;
&>span {
font-weight: 400;
}
}
&+.router-tab__item {
margin-left: 16px;
}
border:none;
}
}
// v-navigation-drawer (sidebar)
.v-navigation-drawer {
box-shadow: none; // 0 0 10px 0 rgba(0, 0, 0, 0.15);
&--fixed {
z-index: 20;
}
.home {
display: block;
line-height: 0;
}
&__border {
display: none;
}
&__append {
padding: 0 17px;
margin: 0 0 26px;
>p {
margin-bottom: 0;
}
}
.v-treeview {
padding: 0 10px;
box-sizing: border-box;
.v-treeview-node__level {
width: 9px;
}
>.v-treeview-node {
margin-top: 10px;
&:first-child {
margin-top: 0;
}
>.v-treeview-node__root {
min-height: 44px !important;
}
}
.v-treeview-node {
.v-treeview-node__toggle {
display: none !important;
}
&>.v-treeview-node__root:before {
border-radius: 6px;
z-index: -1;
}
&>.v-treeview-node__root:hover:before {
opacity: 0 !important;
}
.v-treeview-node__children {
.v-treeview-node__label {
>button>span {
font-size: 0.875rem;
}
}
}
}
.v-treeview-node--click[aria-expanded="true"] {
&>.v-treeview-node__root:before {
opacity: 0 !important;
}
}
.v-treeview-node[aria-expanded="true"] {
&>.v-treeview-node__root>.v-treeview-node__content
>.v-treeview-node__label>button {
>.anticon,
>.v-icon.mdi-chevron-down {
transform: rotate(-180deg);
}
}
}
.v-treeview-node__label {
&>button {
width: 100%;
display: flex;
align-items: center;
// justify-content: center;
}
& .anticon,
& .v-icon.mdi-chevron-down {
margin-left: auto;
animation-duration: 0.5s;
font-size: 12px;
}
}
}
.v-treeview-node--active {
&:before {
opacity: 0 !important;
}
}
&.v-navigation-drawer--mini-variant {
.home {
display: none;
}
.v-treeview-node__content {
margin-left: 0;
}
.v-treeview-node__content span:not(.v-icon),
.v-treeview-node__root>button,
.v-treeview-node__level,
.v-treeview-node__content .v-icon.mdi-chevron-down,
.v-treeview-node__content .anticon {
display: none;
}
.v-navigation-drawer__append {
display: none;
}
}
}
.chart {
height: 100%;
@ -453,10 +239,6 @@ a {
gap: 8px;
}
.v-navigation-drawer {
background: map-deep-get($config, #{$theme}, "menu-bg-color");
}
.v-window__container {
background: map-deep-get($config, #{$theme}, "card-default-backgroundColor");
}
@ -467,51 +249,19 @@ a {
}
}
::-webkit-scrollbar {
width: 4px;
border-radius: 3px;
}
::-webkit-scrollbar-track {
background-color: map-deep-get($config, #{$theme}, "scrollbar-track");
}
::-webkit-scrollbar-thumb {
width: 4px;
border-radius: 3px;
background-color: map-deep-get($config, #{$theme}, "scrollbar-thumb");
background-clip: content-box;
}
.search-box-label {
color: map-deep-get($config, #{$theme}, "v-select-label-color");
}
.header {
background-color: map-deep-get($config, #{$theme}, "header-backgroud");
border-bottom: 1px solid map-deep-get($config, #{$theme}, "v-header-border");
}
// .header {
// background-color: map-deep-get($config, #{$theme}, "header-backgroud");
// border-bottom: 1px solid map-deep-get($config, #{$theme}, "v-header-border");
// }
.custom-chart{
border: 1px solid map-deep-get($config, #{$theme}, "v-chart-border");
}
.btn-header {
background-color: map-deep-get($config, #{$theme}, "v-btn-header-background");
border:1px solid map-deep-get($config, #{$theme}, "v-btn-header-border");
color: map-deep-get($config, #{$theme}, "v-btn-header-text");
}
.container--fluid {
background-color: map-deep-get($config, #{$theme}, "container-fluid");
.menu-container {
height:calc(100vh - 60px);
overflow-y: auto;
border-right: 1px solid map-deep-get($config, #{$theme}, "v-sidebar-border") ;
}
}
.v-icon {
&.icon-orange {
svg {
@ -533,7 +283,6 @@ a {
}
&.custom-chevron-down {
fill:map-deep-get($config,
@ -623,12 +372,6 @@ a {
}
}
.v-navigation-drawer__append {
>p {
color: map-deep-get($config, #{$theme}, "v-banner-border-color" ) !important;
}
}
.border-bottom-1 {
border-bottom: 1px solid map-deep-get($config, #{$theme}, "border-color");
}
@ -665,144 +408,6 @@ a {
height: 282px;
}
.v-treeview {
.v-treeview-node+.v-treeview-node {
margin-top: 2px;
}
.v-treeview-node__root+.v-treeview-node__children {
margin-top: 2px;
}
&>.v-treeview-node {
.v-treeview-node__root {
border-radius: 8px;
&:hover {
background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color" );
}
.v-treeview-node__content {
.v-icon,
.v-treeview-node__label {
color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
}
.anticon.anticon-down {
color: map-deep-get($config, #{$theme}, "icon-datepicker-color");
}
}
}
&[aria-expanded="true"]{
// Level 1
&>.v-treeview-node__root {
background-color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-bg" );
border: 1px solid map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border");
&:before {
background-color: map-deep-get($config, #{$theme}, "v-treeview-node-subroot-backgroundColor");
}
.v-treeview-node__content {
.v-treeview-node__label {
color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border");
}
.v-icon:first-child,
.v-icon:first-child::before,
.anticon.anticon-down {
color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
}
}
}
&>.v-treeview-node__children {
// Level 2
.v-treeview-node__root {
color: map-deep-get($config, #{$theme}, "v-treeview-node-root-label-color");
&:hover {
background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-backgroundColor");
}
.v-treeview-node__content {
.v-icon,
.v-icon::before {
color: map-deep-get($config, #{$theme}, "icon-datepicker-color");
}
}
}
&>[aria-expanded="true"] >.v-treeview-node__root,
.v-treeview-node__root.v-treeview-node--active {
background-color: map-deep-get($config, #{$theme}, "v-calendar-day-in-not-month-color" );
.v-treeview-node__content {
.v-treeview-node__label {
color: map-deep-get($config, #{$theme}, "card-title-color");
}
.v-icon,
.v-icon::before,
.anticon.anticon-down {
color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
}
}
}
// Level 3
.v-treeview-node__children {
.v-treeview-node {
>.v-treeview-node__root {
.v-treeview-node__content {
.v-treeview-node__label {
color: map-deep-get($config, #{$theme}, "card-default-color");
}
}
*:hover,
:hover {
border-width: 0;
}
&:hover {
border: 1px solid map-deep-get($config, #{$theme}, "v-input-textarea-border");
border-radius: 8px;
background-color: rgba(0, 0, 0, 0);
.v-treeview-node__content {
.v-treeview-node__label {
color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
}
}
}
&.v-treeview-node--active {
// color: map-deep-get($config, #{$theme}, "card-title-color");
background-color: rgba(0, 0, 0, 0);
.v-treeview-node__content {
.v-treeview-node__label {
color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
}
.v-icon,
.v-icon::before,
.anticon {
color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
}
}
}
}
}
}
}
}
}
}
.vc-weeks {
>.vc-weekday {
background-color: map-deep-get($config,

433
assets/scss/layout.scss Normal file
View File

@ -0,0 +1,433 @@
.loading {
z-index: 99;
position: fixed;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.4);
//box-shadow: rgba(68, 67, 67, 0.9) 0 0 0 9999px;
}
.v-spinner {
top: 50%;
left: 50%;
}
::v-deep {
.container--fluid {
.menu-container {
height:calc(100vh - 60px);
overflow-y: auto;
min-width: 200px;
// v-navigation-drawer (sidebar)
.v-navigation-drawer {
box-shadow: none; // 0 0 10px 0 rgba(0, 0, 0, 0.15);
min-width: 200px !important;
// transform: none !important;
// visibility: visible !important;
&--fixed {
z-index: 20;
}
.home {
display: block;
line-height: 0;
}
&__border {
display: none;
}
&__append {
padding: 0 17px;
margin: 0 0 26px;
>p {
margin-bottom: 0;
}
}
.v-treeview {
padding: 0 10px;
box-sizing: border-box;
.v-treeview-node__level {
width: 9px;
}
>.v-treeview-node {
margin-top: 10px;
&:first-child {
margin-top: 0;
}
>.v-treeview-node__root {
min-height: 44px !important;
}
}
.v-treeview-node {
.v-treeview-node__toggle {
display: none !important;
}
&>.v-treeview-node__root:before {
border-radius: 6px;
z-index: -1;
}
&>.v-treeview-node__root:hover:before {
opacity: 0 !important;
}
.v-treeview-node__children {
.v-treeview-node__label {
>button>span {
font-size: 0.875rem;
}
}
}
}
.v-treeview-node--click[aria-expanded="true"] {
&>.v-treeview-node__root:before {
opacity: 0 !important;
}
}
.v-treeview-node[aria-expanded="true"] {
&>.v-treeview-node__root>.v-treeview-node__content
>.v-treeview-node__label>button {
>.anticon,
>.v-icon.mdi-chevron-down {
transform: rotate(-180deg);
}
}
}
.v-treeview-node__label {
&>button {
width: 100%;
display: flex;
align-items: center;
// justify-content: center;
}
& .anticon,
& .v-icon.mdi-chevron-down {
margin-left: auto;
animation-duration: 0.5s;
font-size: 12px;
}
}
}
.v-treeview-node--active {
&:before {
opacity: 0 !important;
}
}
&.v-navigation-drawer--mini-variant {
.home {
display: none;
}
.v-treeview-node__content {
margin-left: 0;
}
.v-treeview-node__content span:not(.v-icon),
.v-treeview-node__root>button,
.v-treeview-node__level,
.v-treeview-node__content .v-icon.mdi-chevron-down,
.v-treeview-node__content .anticon {
display: none;
}
.v-navigation-drawer__append {
display: none;
}
}
}
}
}
// router-tab header
.router-tab {
height: 100%;
&__header {
align-items: flex-end;
height: 52px;
margin: -5px -5px 0;
padding: 0 20px;
box-sizing: border-box;
border-bottom: none !important;
}
&-page {
height: 100%;
}
& .router-tab__container {
overflow-y: auto;
height: calc(100vh - 110px);
max-height: calc(100vh - 115px);
padding: 20px;
}
.router-tab__slot-end {
align-self: center;
display: flex;
align-items: center;
>* {
flex: none;
margin-right: 6px;
&:last-child {
margin-right: 0;
}
}
.v-menu+.v-btn {
padding: 0 3px;
}
.v-btn {
border-radius: 4px;
}
}
.router-tab__nav {
padding-left: 0;
}
.router-tab__scroll {
height: 46px;
}
.router-tab__item {
height: 46px;
padding: 0 !important;
&:first-child {
border-left: none
}
&>span {
font-size: 14px;
}
&.is-active {
border-bottom: 2px solid;
&>span {
font-weight: 400;
}
}
&+.router-tab__item {
margin-left: 16px;
}
border:none;
}
}
}
@each $theme in dark, light {
@include theme($theme);
.v-application.#{$theme}-mode {
::v-deep {
::-webkit-scrollbar {
width: 4px;
border-radius: 3px;
}
::-webkit-scrollbar-track {
background-color: map-deep-get($config, #{$theme}, "scrollbar-track");
}
::-webkit-scrollbar-thumb {
width: 4px;
border-radius: 3px;
background-color: map-deep-get($config, #{$theme}, "scrollbar-thumb");
background-clip: content-box;
}
.header {
background-color: map-deep-get($config, #{$theme}, "header-backgroud");
border-bottom: 1px solid map-deep-get($config, #{$theme}, "v-header-border");
}
.btn-header {
background-color: map-deep-get($config, #{$theme}, "v-btn-header-background");
border:1px solid map-deep-get($config, #{$theme}, "v-btn-header-border");
color: map-deep-get($config, #{$theme}, "v-btn-header-text");
}
.container--fluid {
background-color: map-deep-get($config, #{$theme}, "container-fluid");
.menu-container {
border-right: 1px solid map-deep-get($config, #{$theme}, "v-sidebar-border") ;
.v-navigation-drawer__append {
>p {
color: map-deep-get($config, #{$theme}, "v-banner-border-color" ) !important;
}
}
}
}
.v-navigation-drawer {
background: map-deep-get($config, #{$theme}, "menu-bg-color");
}
.v-treeview {
.v-treeview-node+.v-treeview-node {
margin-top: 2px;
}
.v-treeview-node__root+.v-treeview-node__children {
margin-top: 2px;
}
&>.v-treeview-node {
.v-treeview-node__root {
border-radius: 8px;
&:hover {
background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color" );
}
.v-treeview-node__content {
.v-icon,
.v-treeview-node__label {
color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
}
.anticon.anticon-down {
color: map-deep-get($config, #{$theme}, "icon-datepicker-color");
}
}
}
&[aria-expanded="true"]{
// Level 1
&>.v-treeview-node__root {
background-color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-bg" );
border: 1px solid map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border");
&:before {
background-color: map-deep-get($config, #{$theme}, "v-treeview-node-subroot-backgroundColor");
}
.v-treeview-node__content {
.v-treeview-node__label {
color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border");
}
.v-icon:first-child,
.v-icon:first-child::before,
.anticon.anticon-down {
color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
}
}
}
&>.v-treeview-node__children {
// Level 2
.v-treeview-node__root {
color: map-deep-get($config, #{$theme}, "v-treeview-node-root-label-color");
&:hover {
background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-backgroundColor");
}
.v-treeview-node__content {
.v-icon,
.v-icon::before {
color: map-deep-get($config, #{$theme}, "icon-datepicker-color");
}
}
}
&>[aria-expanded="true"] >.v-treeview-node__root,
.v-treeview-node__root.v-treeview-node--active {
background-color: map-deep-get($config, #{$theme}, "v-calendar-day-in-not-month-color" );
.v-treeview-node__content {
.v-treeview-node__label {
color: map-deep-get($config, #{$theme}, "card-title-color");
}
.v-icon,
.v-icon::before,
.anticon.anticon-down {
color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
}
}
}
// Level 3
.v-treeview-node__children {
.v-treeview-node {
>.v-treeview-node__root {
.v-treeview-node__content {
.v-treeview-node__label {
color: map-deep-get($config, #{$theme}, "card-default-color");
}
}
*:hover,
:hover {
border-width: 0;
}
&:hover {
border: 1px solid map-deep-get($config, #{$theme}, "v-input-textarea-border");
border-radius: 8px;
background-color: rgba(0, 0, 0, 0);
.v-treeview-node__content {
.v-treeview-node__label {
color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
}
}
}
&.v-treeview-node--active {
// color: map-deep-get($config, #{$theme}, "card-title-color");
background-color: rgba(0, 0, 0, 0);
.v-treeview-node__content {
.v-treeview-node__label {
color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
}
.v-icon,
.v-icon::before,
.anticon {
color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
}
}
}
}
}
}
}
}
}
}
}
}
}

174
layouts/default.vue
View File

@ -90,8 +90,14 @@
<v-container fluid>
<v-row class="flex-nowrap">
<div class="menu-container">
<v-navigation-drawer ref="navigationdrawer" :value="drawer" :mini-variant="miniVariant" :clipped="clipped"
:absolute="false" mini-variant-width="60">
<v-navigation-drawer ref="navigationdrawer"
class="pt-2"
:clipped="clipped"
:absolute="false"
:mini-variant="miniVariant"
:value="drawer"
mini-variant-width="260"
>
<component ref="changePswdPop" :is="'ChangePswdPop'" v-show="false" :comId="this.userInfo.comId" />
<v-treeview ref="treeview" :active.sync="activeTree" active-class="v-treeview-node--active"
@ -839,168 +845,6 @@ export default {
</script>
<style lang="scss" scoped>
// @import '@/assets/scss/common.scss';
.loading {
z-index: 99;
position: fixed;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.4);
//box-shadow: rgba(68, 67, 67, 0.9) 0 0 0 9999px;
}
@import '@/assets/scss/layout.scss';
.v-spinner {
top: 50%;
left: 50%;
}
// @each $theme in dark, light {
// @include theme($theme);
// .v-application.#{$theme}-mode {
// ::v-deep {
// .v-treeview {
// .v-treeview-node+.v-treeview-node {
// margin-top: 2px;
// }
// .v-treeview-node__root+.v-treeview-node__children {
// margin-top: 2px;
// }
// &>.v-treeview-node {
// .v-treeview-node__root {
// border-radius: 8px;
// &:hover {
// background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color" );
// }
// .v-treeview-node__content {
// .v-icon,
// .v-treeview-node__label {
// color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
// }
// .anticon.anticon-down {
// color: map-deep-get($config, #{$theme}, "icon-datepicker-color");
// }
// }
// }
// &[aria-expanded="true"]{
// // Level 1
// &>.v-treeview-node__root {
// background-color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-bg" );
// border: 1px solid map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
// color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border");
// &:before {
// background-color: map-deep-get($config, #{$theme}, "v-treeview-node-subroot-backgroundColor");
// }
// .v-treeview-node__content {
// .v-treeview-node__label {
// color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border");
// }
// .v-icon:first-child,
// .v-icon:first-child::before,
// .anticon.anticon-down {
// color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
// }
// }
// }
// &>.v-treeview-node__children {
// // Level 2
// .v-treeview-node__root {
// color: map-deep-get($config, #{$theme}, "v-treeview-node-root-label-color");
// &:hover {
// background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-backgroundColor");
// }
// .v-treeview-node__content {
// .v-icon,
// .v-icon::before {
// color: map-deep-get($config, #{$theme}, "icon-datepicker-color");
// }
// }
// }
// &>[aria-expanded="true"] >.v-treeview-node__root,
// .v-treeview-node__root.v-treeview-node--active {
// background-color: map-deep-get($config, #{$theme}, "v-calendar-day-in-not-month-color" );
// .v-treeview-node__content {
// .v-treeview-node__label {
// color: map-deep-get($config, #{$theme}, "card-title-color");
// }
// .v-icon,
// .v-icon::before,
// .anticon.anticon-down {
// color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
// }
// }
// }
// // Level 3
// .v-treeview-node__children {
// .v-treeview-node {
// >.v-treeview-node__root {
// .v-treeview-node__content {
// .v-treeview-node__label {
// color: map-deep-get($config, #{$theme}, "card-default-color");
// }
// }
// *:hover,
// :hover {
// border-width: 0;
// }
// &:hover {
// border: 1px solid map-deep-get($config, #{$theme}, "v-input-textarea-border");
// border-radius: 8px;
// background-color: rgba(0, 0, 0, 0);
// .v-treeview-node__content {
// .v-treeview-node__label {
// color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
// }
// }
// }
// &.v-treeview-node--active {
// // color: map-deep-get($config, #{$theme}, "card-title-color");
// background-color: rgba(0, 0, 0, 0);
// .v-treeview-node__content {
// .v-treeview-node__label {
// color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
// }
// .v-icon,
// .v-icon::before,
// .anticon {
// color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
// }
// }
// }
// }
// }
// }
// }
// }
// }
// }
// }
// }
// }
</style>