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

Merge branch 'dev' of http://218.237.212.51:30003/gitadmin/sk_fems_ui into dev-trungvq7-0729

Browse Source
This commit is contained in:
dev
2025-08-13 17:14:44 +09:00
parent 287c68252b 59ec2eda59
commit d5c59286ad
54 changed files with 1483 additions and 1300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

391
assets/scss/common.scss
View File

@ -128,219 +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;
}
}
}
.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%;
@ -444,12 +231,12 @@ a {
.v-application.#{$theme}-mode {
min-width: 1000px;
.head-logo {
gap: 8px;
.icon-datepicker-color {
color: map-deep-get($config, #{$theme}, "icon-datepicker-color");
}
.v-navigation-drawer {
background: map-deep-get($config, #{$theme}, "menu-bg-color");
.head-logo {
gap: 8px;
}
.v-window__container {
@ -462,52 +249,16 @@ 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");
}
.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 {
color: currentColor;
&.icon-orange {
svg {
fill:map-deep-get($config,
@ -528,7 +279,6 @@ a {
}
&.custom-chevron-down {
fill:map-deep-get($config,
@ -618,12 +368,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");
}
@ -660,130 +404,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-treeview-node__label {
color: map-deep-get($config, #{$theme}, "tui-grid-title-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 {
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");
}
}
&>[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 {
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,
@ -950,6 +570,7 @@ a {
& th,
& td {
height: 48px;
color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color");
}
}

7
assets/scss/common/button.scss
View File

@ -144,10 +144,11 @@
}
&.ant-btn-danger {
&.ant-btn-background-ghost {
color:map-deep-get($config, #{$theme}, "ant-btn-danger-color");
border-color:map-deep-get($config, #{$theme}, "ant-btn-danger-border");
background: map-deep-get($config, #{$theme}, "ant-btn-danger-bg") !important;
color: map-deep-get($config, #{$theme}, "ant-btn-danger-color");
border-color: map-deep-get($config, #{$theme}, "ant-btn-danger-color");
// background: map-deep-get($config, #{$theme}, "ant-btn-danger-color") !important;
}
}

6
assets/scss/common/pagination.scss
View File

@ -10,7 +10,7 @@
// box-shadow: none !important;
background-color: map-deep-get($config, #{$theme}, "paging-background") !important;
color: map-deep-get($config, #{$theme}, "paging-text") !important;
border: 0.5px solid #424242;
border: none;
.ant-pagination-item-link {
border: none;
@ -19,13 +19,13 @@
}
.ant-pagination-item-active {
border-color: #1890ff !important;
border: 1px solid #1890ff !important;
color: #1890ff !important
}
.ant-pagination-options-size-changer {
.ant-select-selection {
border: 0.5px solid #424242;
border: 0.5px solid map-deep-get($config, #{$theme}, "v-input-fieldset-color") !important;
background: map-deep-get($config, #{$theme}, "paging-background") !important;
color: map-deep-get($config, #{$theme}, "paging-text") !important;
}

4
assets/scss/datepicker.scss
View File

@ -66,6 +66,10 @@
}
}
}
.v-icon {
color: map-deep-get($config, #{$theme}, "v-icon-chevron-down") !important;
}
}
.v-input__custom {

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

@ -0,0 +1,441 @@
.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;
background-color: rgba(0, 0, 0, 0);
transition-duration: 0s;
}
&>.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 {
*:hover,
:hover {
border-width: 0;
}
&:hover {
background-color: rgba(0, 0, 0, 0);
&:before {
opacity: 1 !important;
border: 1px solid map-deep-get($config, #{$theme}, "v-input-textarea-border");
border-radius: 8px;
}
.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" );
}
}
}
.v-treeview-node__content {
.v-treeview-node__label {
color: map-deep-get($config, #{$theme}, "card-default-color");
}
}
}
}
}
}
}
}
}
}
}
}

8
assets/scss/var.scss
View File

@ -166,7 +166,7 @@ $config: (
ant-btn-primary-color: #212224,
ant-btn-danger-bg:#D32029,
ant-btn-danger-border:#D32029,
ant-btn-danger-color:#212224,
ant-btn-danger-color:#D32029,
ant-btn-default-border:#FFFFFF2E,
ant-btn-default-bg:#FFFFFF2E,
ant-btn-default-color:#FFFFFFD9,
@ -183,7 +183,8 @@ $config: (
ant-btn-popup-color: #FFFFFFD9,
ant-btn-popup-border: #424242,
paging-background: #212224,
paging-text: #FFFFFFD9
paging-text: #FFFFFFD9,
icon-datepicker-color: #FFFFFF73,
),
light: (w-g5: $--color-gray_555,
g5-w: $--color-white,
@ -330,6 +331,7 @@ $config: (
ant-btn-popup-color: #000000E0,
ant-btn-popup-border: #D9D9D9,
paging-background: #FFFFFF,
paging-text: #000000E0
paging-text: #000000E0,
icon-datepicker-color: #00000073,
),
);