diff --git a/.gitignore b/.gitignore index e8f682b..670e512 100644 --- a/.gitignore +++ b/.gitignore @@ -88,3 +88,4 @@ sw.* # Vim swap files *.swp +.history diff --git a/assets/css/Oxanium.css b/assets/css/Oxanium.css new file mode 100644 index 0000000..288d225 --- /dev/null +++ b/assets/css/Oxanium.css @@ -0,0 +1,20 @@ +@font-face { + font-family: 'Oxanium'; + font-weight: 700; + src: local('Oxanium Bold'), + url('../font/Oxanium/Oxanium-Bold.ttf') format('truetype'); +} + +@font-face { + font-family: 'Oxanium'; + font-weight: 500; + src: local('Oxanium Medium'), + url('../font/Oxanium/Oxanium-Medium.ttf') format('truetype'); +} + +@font-face { + font-family: 'Oxanium'; + font-weight: 300; + src: local('Oxanium Light'), + url('../font/Oxanium/Oxanium-Light.ttf') format('truetype'); +} \ No newline at end of file diff --git a/assets/font/Oxanium/Oxanium-Bold.ttf b/assets/font/Oxanium/Oxanium-Bold.ttf new file mode 100644 index 0000000..348b9a8 Binary files /dev/null and b/assets/font/Oxanium/Oxanium-Bold.ttf differ diff --git a/assets/font/Oxanium/Oxanium-ExtraBold.ttf b/assets/font/Oxanium/Oxanium-ExtraBold.ttf new file mode 100644 index 0000000..5fb21ff Binary files /dev/null and b/assets/font/Oxanium/Oxanium-ExtraBold.ttf differ diff --git a/assets/font/Oxanium/Oxanium-ExtraLight.ttf b/assets/font/Oxanium/Oxanium-ExtraLight.ttf new file mode 100644 index 0000000..1739591 Binary files /dev/null and b/assets/font/Oxanium/Oxanium-ExtraLight.ttf differ diff --git a/assets/font/Oxanium/Oxanium-Light.ttf b/assets/font/Oxanium/Oxanium-Light.ttf new file mode 100644 index 0000000..077a580 Binary files /dev/null and b/assets/font/Oxanium/Oxanium-Light.ttf differ diff --git a/assets/font/Oxanium/Oxanium-Medium.ttf b/assets/font/Oxanium/Oxanium-Medium.ttf new file mode 100644 index 0000000..e8ec223 Binary files /dev/null and b/assets/font/Oxanium/Oxanium-Medium.ttf differ diff --git a/assets/font/Oxanium/Oxanium-Regular.ttf b/assets/font/Oxanium/Oxanium-Regular.ttf new file mode 100644 index 0000000..0c015dd Binary files /dev/null and b/assets/font/Oxanium/Oxanium-Regular.ttf differ diff --git a/assets/font/Oxanium/Oxanium-SemiBold.ttf b/assets/font/Oxanium/Oxanium-SemiBold.ttf new file mode 100644 index 0000000..a622892 Binary files /dev/null and b/assets/font/Oxanium/Oxanium-SemiBold.ttf differ diff --git a/assets/images/arrow_datepicker.png b/assets/images/arrow_datepicker.png new file mode 100644 index 0000000..1edba43 Binary files /dev/null and b/assets/images/arrow_datepicker.png differ diff --git a/assets/images/arrow_datepicker_dm.png b/assets/images/arrow_datepicker_dm.png new file mode 100644 index 0000000..bf940c9 Binary files /dev/null and b/assets/images/arrow_datepicker_dm.png differ diff --git a/assets/images/logo_dm.png b/assets/images/logo_dm.png index 7d0d00f..927223a 100644 Binary files a/assets/images/logo_dm.png and b/assets/images/logo_dm.png differ diff --git a/assets/images/logo_dm_rm.png b/assets/images/logo_dm_rm.png new file mode 100644 index 0000000..7d0d00f Binary files /dev/null and b/assets/images/logo_dm_rm.png differ diff --git a/assets/images/logo_lm.png b/assets/images/logo_lm.png index d81f260..87fb64d 100644 Binary files a/assets/images/logo_lm.png and b/assets/images/logo_lm.png differ diff --git a/assets/images/logo_lm.svg b/assets/images/logo_lm.svg new file mode 100644 index 0000000..3351450 --- /dev/null +++ b/assets/images/logo_lm.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/images/logo_lm_rm.png b/assets/images/logo_lm_rm.png new file mode 100644 index 0000000..d81f260 Binary files /dev/null and b/assets/images/logo_lm_rm.png differ diff --git a/assets/scss/common.scss b/assets/scss/common.scss index 58349d8..33adc3d 100644 --- a/assets/scss/common.scss +++ b/assets/scss/common.scss @@ -13,6 +13,7 @@ html, body { overflow: auto; + } a { @@ -23,30 +24,39 @@ a { .w100 { width: 100%; } + .w35p { width: 35px; } + .h30 { height: 30%; } + .h35 { height: 35%; } + .h50 { height: 50%; } + .h60 { height: 60%; } + .h65 { height: 65%; } + .h100 { height: 100%; } + .bd { &-b1 { border-bottom: 1px #39383d solid; + &:last-child { border-bottom: 0; } @@ -54,32 +64,54 @@ a { } .col-grp { - > .col { + >.col { padding: 7px 0 !important; } } .searchFilter { &.v-card { - padding: 17px (20px - ($column-spacer / 2)) !important; + padding: 16px (16px - ($column-spacer / 2)) !important; - & > .row { - & > [class*="col-"] { + &>.row { + &>[class*="col-"] { padding: 0 ($column-spacer / 2); box-sizing: border-box; } } - .row + .row { + .row+.row { margin-top: $row-spacer; } } + + // .fixed-width { + // fieldset { + // max-width: 345px; + // } + // } +} + + +.v-application { + font-family: var(--desktop-normal-font-family, "Inter-Regular", sans-serif); + font-size: var(--desktop-normal-font-size, 14px); + + .v-sheet { + &.v-card { + border-radius: 8px; + + &:not(.v-sheet--outlined) { + box-shadow: none !important; + } + } + } } .v-application--wrap { - height: 100vh; + min-height: 100vh; - & > div { + &>div { height: 100%; } } @@ -89,19 +121,22 @@ a { .container { height: 100%; } -.v-main__wrap > .container { + +.v-main__wrap>.container { background: #383f5d; } // router-tab header .router-tab { height: 100%; + &__header { align-items: flex-end; - height: 72px; + height: 52px; margin: -5px -5px 0; padding: 0 20px; box-sizing: border-box; + border-bottom: none !important; } &-page { @@ -109,23 +144,25 @@ a { } & .router-tab__container { - height: calc(100% - 72px); - padding: 15px 10px; + min-height: calc(100% - 72px); + 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 { + .v-menu+.v-btn { padding: 0 3px; } @@ -133,42 +170,47 @@ a { border-radius: 4px; } } + .router-tab__nav { padding-left: 0; } .router-tab__scroll { - height: auto; + height: 46px; } .router-tab__item { - height: 48px; - padding: 0 12px !important; - border-radius: 6px 6px 0 0; + height: 46px; + padding: 0 !important; - & > span { - font-size: 1rem; + &:first-child { + border-left: none + } + + &>span { + font-size: 14px; } &.is-active { - & > span { - font-weight: 700; + border-bottom: 2px solid; + + &>span { + font-weight: 400; } } - & + .router-tab__item { - margin-left: 4px; + &+.router-tab__item { + margin-left: 16px; } + + border:none; } - .router-tab__item.is-active.is-closable, - .router-tab__item:hover.is-closable { - padding: 0 20px; - } } + // v-navigation-drawer (sidebar) .v-navigation-drawer { - box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15); + box-shadow: none; // 0 0 10px 0 rgba(0, 0, 0, 0.15); &--fixed { z-index: 20; @@ -187,7 +229,7 @@ a { padding: 0 17px; margin: 0 0 26px; - > p { + >p { margin-bottom: 0; } } @@ -200,34 +242,35 @@ a { width: 9px; } - > .v-treeview-node { + >.v-treeview-node { margin-top: 10px; &:first-child { margin-top: 0; } - > .v-treeview-node__root { + >.v-treeview-node__root { min-height: 44px !important; } } + .v-treeview-node { .v-treeview-node__toggle { display: none !important; } - & > .v-treeview-node__root:before { + &>.v-treeview-node__root:before { border-radius: 6px; z-index: -1; } - & > .v-treeview-node__root:hover:before { + &>.v-treeview-node__root:hover:before { opacity: 1 !important; } .v-treeview-node__children { .v-treeview-node__label { - > button > span { + >button>span { font-size: 0.875rem; } } @@ -235,24 +278,19 @@ a { } .v-treeview-node--click[aria-expanded="true"] { - & > .v-treeview-node__root:before { + &>.v-treeview-node__root:before { opacity: 1 !important; } } .v-treeview-node[aria-expanded="true"] { - & - > .v-treeview-node__root - > .v-treeview-node__content - > .v-treeview-node__label - > button - > .v-icon.mdi-chevron-down { + &>.v-treeview-node__root>.v-treeview-node__content>.v-treeview-node__label>button>.v-icon.mdi-chevron-down { transform: rotate(-180deg); } } .v-treeview-node__label { - & > button { + &>button { width: 100%; display: flex; align-items: center; @@ -281,7 +319,7 @@ a { } .v-treeview-node__content span:not(.v-icon), - .v-treeview-node__root > button, + .v-treeview-node__root>button, .v-treeview-node__level, .v-treeview-node__content .v-icon.mdi-chevron-down { display: none; @@ -295,10 +333,12 @@ a { .chart { height: 100%; + &-title { display: block; width: 100%; } + &-info { display: block; width: 100%; @@ -313,6 +353,7 @@ a { .search-box { display: flex; align-items: center; + &-label { display: flex; align-items: center; @@ -320,20 +361,29 @@ a { line-height: 1.25rem; letter-spacing: 0.0178571429em; white-space: nowrap; + color: rgba(0, 0, 0, 0.88); } } -.tui-grid-container, -.tui-grid-content-area { - height: 100%; +.form-row { + + .pt-0 { + .col { + padding-top: 0 + } + } } .v-window__container, -.v-window__container > div { +.v-window__container>div { height: 100%; } .v-banner { + .v-banner__wrapper { + border-bottom: none !important; + } + &--last { .v-banner__wrapper { border-bottom: none !important; @@ -377,33 +427,26 @@ a { font-size: 0.875rem !important; } -.datepicker-container { - display: flex; - align-items: center; - justify-content: space-between; - position: relative; - - .v-input { - .v-input__append-outer { - margin-top: 0; - margin-left: 0; - - #startpicker-container, - #endpicker-container { - width: 100%; - position: absolute; - top: 36px; - left: 0; - } - } - } -} - @each $theme in dark, light { @include theme($theme); .v-application.#{$theme}-mode { min-width: 1000px; + + .v-navigation-drawer { + background: map-deep-get($config, #{$theme}, "menu-bg-color"); + } + + .v-window__container { + background: map-deep-get($config, #{$theme}, "card-default-backgroundColor"); + } + + .search-box { + &-label { + color: map-deep-get($config, #{$theme}, "v-select-label-color"); + } + } + ::-webkit-scrollbar { width: 4px; border-radius: 3px; @@ -420,14 +463,81 @@ a { 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-color: #D3D6EA; + } + + .btn-header { + background-color: map-deep-get($config, #{$theme}, "v-btn-header-background"); + border: 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"); + } + + .v-icon { + &.icon-orange { + svg { + fill:map-deep-get($config, + #{$theme}, + "v-icon-orange" + ); + } + + } + + &.icon-blue { + svg { + fill:map-deep-get($config, + #{$theme}, + "v-icon-blue" + ); + } + + } + + + &.custom-chevron-down { + + fill:map-deep-get($config, + #{$theme}, + "v-icon-chevron-down" + ); + width: 14px; + height: 14px; + } + + &.custom-search-icon { + + fill:map-deep-get($config, + #{$theme}, + "v-icon-search" + ); + width: 14px; + height: 14px; + } + } + + + .router-tab { .router-tab__header { background-color: map-deep-get($config, #{$theme}, "router-header"); border-color: map-deep-get($config, #{$theme}, "router-header"); + height: 46px; + z-index: 7; + max-width: calc(100vw - 290px); } .router-tab__container { - background: transparent; + background-color: map-deep-get($config, #{$theme}, "router-container"); } .router-tab__item { @@ -437,9 +547,8 @@ a { &:not(.is-active) { &:hover { - & > span { - color: map-deep-get( - $config, + &>span { + color: map-deep-get($config, #{$theme}, "router-tab-item-hover-color" ); @@ -452,36 +561,32 @@ a { } &.is-active { - background-color: map-deep-get( - $config, + background-color: map-deep-get($config, #{$theme}, "router-tab-item-active" ); - border-color: map-deep-get( - $config, + border-color: map-deep-get($config, #{$theme}, - "router-tab-item-active" - ); - color: map-deep-get( - $config, + "router-tab-item-active-color" + ) !important; + color: map-deep-get($config, #{$theme}, "router-tab-item-active-color" ); .v-icon { - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "router-tab-item-icon-active-color" ); } + } } .router-tab__slot-end { .v-btn { - background-color: map-deep-get( - $config, + background-color: map-deep-get($config, #{$theme}, "router-tab-slot-end-button-backgroundColor" ); @@ -490,38 +595,42 @@ a { } } - .v-banner { - &__wrapper { - border-bottom-color: map-deep-get( - $config, - #{$theme}, - "v-banner-border-color" - ) !important; - } - } + // .v-banner { + // &__wrapper { + // border-bottom-color: map-deep-get($config, + // #{$theme}, + // "v-banner-border-color" + // ) !important; + // } + // } .v-navigation-drawer__append { - > p { - @if $theme == dark { + >p { + @if $theme ==dark { color: rgba(255, 255, 255, 0.6); - } @else { + } + + @else { color: #999; } } } .v-footer { - @if $theme == light { + @if $theme ==light { background-color: #dfdfe5; color: #767d83; } } + .bd { - @if $theme == dark { + @if $theme ==dark { &-r-1 { border-right: 1px #373f45 solid; } - } @else { + } + + @else { &-r-1 { border-right: 1px #efefef solid; } @@ -541,7 +650,7 @@ a { border-radius: 8px; background-color: map-deep-get($config, #{$theme}, "v-box"); - + .v-box { + +.v-box { margin-top: 10px; } } @@ -555,45 +664,43 @@ a { border-radius: 8px; background-color: map-deep-get($config, #{$theme}, "v-box"); - + .v-box { + +.v-box { margin-top: 10px; } } - .widget-card{ + .widget-card { height: 282px; } .v-treeview { - .v-treeview-node + .v-treeview-node { + .v-treeview-node+.v-treeview-node { margin-top: 2px; } - .v-treeview-node__root + .v-treeview-node__children { + .v-treeview-node__root+.v-treeview-node__children { margin-top: 2px; } - & > .v-treeview-node { - & > .v-treeview-node__root { + &>.v-treeview-node { + &>.v-treeview-node__root { &:before { - background-color: map-deep-get( - $config, + background-color: map-deep-get($config, #{$theme}, "v-treeview-node-root-backgroundColor" ); } - & > .v-treeview-node__content { + &>.v-treeview-node__content { .v-treeview-node__label { - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "v-treeview-node-root-label-color" ); } + .v-icon { - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "v-treeview-node-root-icon-color" ); @@ -601,17 +708,16 @@ a { } &:hover { - & > .v-treeview-node__content { + &>.v-treeview-node__content { .v-treeview-node__label { - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "v-treeview-node-root-label-active-color" ); } + .v-icon { - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "v-treeview-node-root-icon-active-color" ); @@ -620,28 +726,26 @@ a { } } - & > .v-treeview-node__children { - & > .v-treeview-node { - & > .v-treeview-node__root { + &>.v-treeview-node__children { + &>.v-treeview-node { + &>.v-treeview-node__root { &:before { - background-color: map-deep-get( - $config, + background-color: map-deep-get($config, #{$theme}, "v-treeview-node-subroot-backgroundColor" ); } - & > .v-treeview-node__content { + &>.v-treeview-node__content { .v-treeview-node__label { - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "v-treeview-node-label-color" ); } + .v-icon { - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "v-treeview-icon-color" ); @@ -650,24 +754,22 @@ a { &:not(.v-treeview-node--active):hover { &:before { - background-color: map-deep-get( - $config, + background-color: map-deep-get($config, #{$theme}, "v-treeview-leaf-active-backgroundColor" ); } - & > .v-treeview-node__content { + &>.v-treeview-node__content { .v-treeview-node__label { - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "v-treeview-leaf-active-color" ); } + .v-icon { - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "v-treeview-leaf-active-color" ); @@ -676,26 +778,31 @@ a { } } - & > .v-treeview-node--active { + &>.v-treeview-node__children { + background-color: map-deep-get($config, + #{$theme}, + "v-treeview-leaf-subchildren-backgroundColor" + ); + } + + &>.v-treeview-node--active { &:before { - background-color: map-deep-get( - $config, + background-color: map-deep-get($config, #{$theme}, "v-treeview-node-subroot-backgroundColor" ); } - & > .v-treeview-node__content { + &>.v-treeview-node__content { .v-treeview-node__label { - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-color" ); } + .v-icon { - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "v-treeview-icon-active-color" ); @@ -703,28 +810,26 @@ a { } } - & > .v-treeview-node__children { + &>.v-treeview-node__children { & .v-treeview-node { - & > .v-treeview-node__root { + &>.v-treeview-node__root { &:before { - background-color: map-deep-get( - $config, + background-color: map-deep-get($config, #{$theme}, "v-treeview-node-subroot-backgroundColor" ); } - & > .v-treeview-node__content { + &>.v-treeview-node__content { .v-treeview-node__label { - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "v-treeview-node-label-color" ); } + .v-icon { - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "v-treeview-icon-color" ); @@ -733,24 +838,22 @@ a { &:not(.v-treeview-node--active):hover { &:before { - background-color: map-deep-get( - $config, + background-color: map-deep-get($config, #{$theme}, "v-treeview-leaf-active-backgroundColor" ); } - & > .v-treeview-node__content { + &>.v-treeview-node__content { .v-treeview-node__label { - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "v-treeview-leaf-active-color" ); } + .v-icon { - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "v-treeview-leaf-active-color" ); @@ -759,22 +862,31 @@ a { } } - & > .v-treeview-node--active { + &>.v-treeview-node--active { + 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" + ); + border-radius: 8px; + &:before { opacity: 0 !important; } - & > .v-treeview-node__content { + &>.v-treeview-node__content { .v-treeview-node__label { - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-color" ); } + .v-icon { - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-color" ); @@ -785,17 +897,16 @@ a { } &[aria-expanded="true"] { - & .v-treeview-node__root > .v-treeview-node__content { + & .v-treeview-node__root>.v-treeview-node__content { .v-treeview-node__label { - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, - "v-treeview-node-label-active-color" + "v-treeview-node-label-children-color" ); } + .v-icon { - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "v-treeview-icon-active-color" ); @@ -806,17 +917,16 @@ a { } &[aria-expanded="true"] { - & .v-treeview-node__root > .v-treeview-node__content { + & .v-treeview-node__root>.v-treeview-node__content { .v-treeview-node__label { - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "v-treeview-node-root-label-active-color" ); } + .v-icon { - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "v-treeview-node-root-icon-active-color" ); @@ -827,15 +937,12 @@ a { } .vc-weeks { - > .vc-weekday { - background-color: map-deep-get( - $config, + >.vc-weekday { + background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-backgroundColor" ); - border-right: 1px - solid - map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color"); + border-right: 1px solid map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color"); color: map-deep-get($config, #{$theme}, "v-calendar-weekday-color"); &:nth-of-type(1) { @@ -847,13 +954,9 @@ a { } } - > .vc-day { - border-right: 1px - solid - map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color"); - border-bottom: 1px - solid - map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color"); + >.vc-day { + border-right: 1px solid map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color"); + border-bottom: 1px solid map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color"); .day-hldyNm, .day-label.is-holiday { @@ -861,12 +964,15 @@ a { } &.weekday-1 { + .day-label, .day-hldyNm { color: map-deep-get($color, "week", "sun"); } } + &.weekday-7 { + .day-label, .day-hldyNm { color: map-deep-get($color, "week", "sat"); @@ -874,9 +980,8 @@ a { } &.is-today { - > div { - background-color: map-deep-get( - $config, + >div { + background-color: map-deep-get($config, #{$theme}, "v-calendar-is-today-background-color" ); @@ -888,8 +993,7 @@ a { } &.is-not-in-month { - background-color: map-deep-get( - $config, + background-color: map-deep-get($config, #{$theme}, "v-calendar-day-in-not-month-color" ); @@ -907,6 +1011,7 @@ a { color: map-deep-get($color, "white", "0"); } } + .v-card.theme--#{$theme} { .v-card__text { color: map-deep-get($config, #{$theme}, "v-dialog-card-text-color"); @@ -914,18 +1019,9 @@ a { } } - #startpicker-container - .tui-datepicker-footer - .tui-timepicker - .tui-timepicker-row - .tui-timepicker-column.tui-timepicker-colon, - #endpicker-container - .tui-datepicker-footer - .tui-timepicker - .tui-timepicker-row - .tui-timepicker-column.tui-timepicker-colon { - color: map-deep-get( - $config, + #startpicker-container .tui-datepicker-footer .tui-timepicker .tui-timepicker-row .tui-timepicker-column.tui-timepicker-colon, + #endpicker-container .tui-datepicker-footer .tui-timepicker .tui-timepicker-row .tui-timepicker-column.tui-timepicker-colon { + color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color" ) !important; @@ -933,25 +1029,22 @@ a { .tui-datepicker .tui-is-selectable.tui-is-selected, .tui-datepicker.tui-rangepicker .tui-is-selectable.tui-is-selected { - background-color: map-deep-get( - $config, + background-color: map-deep-get($config, #{$theme}, "tui-datepicker-selected-color" ); - @if $theme == light { + @if $theme ==light { color: #fff; } } .tui-datepicker { - background-color: map-deep-get( - $config, + background-color: map-deep-get($config, #{$theme}, "tui-datepicker-backgroundColor" ); - border-color: map-deep-get( - $config, + border-color: map-deep-get($config, #{$theme}, "tui-datepicker-border-color" ); @@ -960,8 +1053,7 @@ a { z-index: 100; .tui-is-selectable:hover { - background-color: map-deep-get( - $config, + background-color: map-deep-get($config, #{$theme}, "tui-datepicker-selectable-hover-color" ); @@ -970,8 +1062,7 @@ a { .tui-calendar, .tui-calendar-btn { - background-color: map-deep-get( - $config, + background-color: map-deep-get($config, #{$theme}, "tui-datepicker-backgroundColor" ); @@ -984,8 +1075,10 @@ a { } .tui-calendar { + &.tui-calendar-year, &.tui-calendar-month { + & th, & td { height: 48px; @@ -999,8 +1092,7 @@ a { &-title { font-size: 0.875rem; - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color" ); @@ -1008,13 +1100,10 @@ a { } &-header { - border-bottom: 1px - solid - map-deep-get( - $config, - #{$theme}, - "tui-datepicker-border-color" - ) !important; + border-bottom: 1px solid map-deep-get($config, + #{$theme}, + "tui-datepicker-border-color" + ) !important; } &-header-inner { @@ -1041,9 +1130,11 @@ a { left: 0; background-position: 0 0; - @if $theme == dark { + @if $theme ==dark { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23fff; opacity: 0; %7D .cls-2 %7B fill: none; stroke: %23fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; %7D %3C/style%3E%3C/defs%3E%3Cg id='arrow_left' transform='translate(-216 -147)'%3E%3Crect id='bg' class='cls-1' width='24' height='24' transform='translate(216 147)'/%3E%3Cpath id='chevron-left' class='cls-2' d='M923.742,118.668l6,6,6-6' transform='translate(349.668 -770.742) rotate(90)'/%3E%3C/g%3E%3C/svg%3E"); - } @else { + } + + @else { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='m923.742 118.668 6 6 6-6' transform='rotate(90 525.705 -392.037)' style='fill:none;stroke:%23555;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'/%3E%3C/svg%3E"); } } @@ -1057,17 +1148,21 @@ a { right: 0; background-position: 0 0; - @if $theme == dark { + @if $theme ==dark { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23fff; opacity: 0; %7D .cls-2 %7B fill: none; stroke: %23fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; %7D %3C/style%3E%3C/defs%3E%3Cg id='arrow_right' transform='translate(-216 -147)'%3E%3Crect id='bg' class='cls-1' width='24' height='24' transform='translate(216 147)'/%3E%3Cpath id='chevron-right' class='cls-2' d='M0,6,6,0l6,6' transform='translate(230.999 153) rotate(90)'/%3E%3C/g%3E%3C/svg%3E%0A"); - } @else { + } + + @else { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='m0 6 6-6 6 6' transform='rotate(90 4.5 10.5)' style='fill:none;stroke:%23555;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'/%3E%3C/svg%3E%0A"); } } .tui-calendar-week { - @if $theme == dark { + @if $theme ==dark { border-bottom: 1px solid rgba(255, 255, 255, 0.5); - } @else { + } + + @else { border-bottom: 1px solid #e6e6e6; } } @@ -1075,8 +1170,7 @@ a { &-body-header { th { font-size: 0.875rem; - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color" ); @@ -1096,8 +1190,7 @@ a { td { font-size: 0.875rem; - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color" ); @@ -1114,13 +1207,10 @@ a { } .tui-datepicker-footer { - border-top: 1px - solid - map-deep-get( - $config, - #{$theme}, - "tui-datepicker-border-color" - ) !important; + border-top: 1px solid map-deep-get($config, + #{$theme}, + "tui-datepicker-border-color" + ) !important; text-align: center; } @@ -1133,22 +1223,18 @@ a { &-row { padding: 10px; box-sizing: border-box; - border: 1px - solid - map-deep-get($config, #{$theme}, "tui-datepicker-border-color"); + border: 1px solid map-deep-get($config, #{$theme}, "tui-datepicker-border-color"); border-radius: 4px; background-color: transparent !important; } &-select { - background-color: map-deep-get( - $config, + background-color: map-deep-get($config, #{$theme}, "tui-datepicker-backgroundColor" ); font-size: 0.875rem; - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color" ); @@ -1157,14 +1243,11 @@ a { } .v-list { - background-color: map-deep-get( - $config, + background-color: map-deep-get($config, #{$theme}, "tui-datepicker-backgroundColor" ); - border: 1px - solid - map-deep-get($config, #{$theme}, "tui-datepicker-border-color"); + border: 1px solid map-deep-get($config, #{$theme}, "tui-datepicker-border-color"); border-radius: 4px; &-item--active { @@ -1177,13 +1260,12 @@ a { } .v-list-item__title { - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color" ); - @if $theme == light { + @if $theme ==light { color: #fff !important; } } @@ -1200,32 +1282,24 @@ a { .toastui-editor-contents { * { - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "tui-editor-contents-color" ) !important; } } - .tui-grid-summary-area { - .tui-grid-cell { - &.tui-grid-cell-summary { - @if $theme == dark { - color: #fff !important; - } @else { - color: #3f4d7d !important; - } - } - } - } - .lnb-logo { color: map-deep-get($config, #{$theme}, "v-dialog-card-text-color"); font-size: 2rem; font-weight: bold; padding-left: 8px; + + img { + width: 139px; + } } + .login-logo { color: map-deep-get($config, #{$theme}, "v-dialog-card-text-color"); font-size: 1.5rem; @@ -1255,10 +1329,10 @@ a { $caret-width: 6px; $distance: -12px; $tooltip-bg-color: rgba(39, 39, 39, 0.8); - + position: relative; cursor: default; - + &:hover { &::before { content: attr(hover-tooltip); @@ -1278,7 +1352,7 @@ a { color: #ffffff; z-index: 1; } - + &::after { content: ''; position: absolute; @@ -1296,19 +1370,25 @@ a { } } } - + @keyframes fade-in { from { opacity: 0; } + to { opacity: 0.8; } } - - + + } + + +.ant-card .ant-card-body { + padding: 0; +} \ No newline at end of file diff --git a/assets/scss/common.zip b/assets/scss/common.zip new file mode 100644 index 0000000..1c5a6ae Binary files /dev/null and b/assets/scss/common.zip differ diff --git a/assets/scss/common/button.scss b/assets/scss/common/button.scss index 7771c7e..b2b8a18 100644 --- a/assets/scss/common/button.scss +++ b/assets/scss/common/button.scss @@ -1,40 +1,54 @@ .v-btn { - background-color: #144985; + background-color: #1677ff; + + &:not(.v-btn--round) { + border-radius: 6px; + } + &-radius { &__20 { border-radius: 20px !important; } + &__50per { border-radius: 50% !important; } } + &__full { width: 100%; } + &__round { min-width: 100px !important; padding: 8px 25px !important; border-radius: 20px !important; } + &__excel { background-color: #47535c !important; } + &-bg { &__transparent { background-color: transparent !important; } + &__blue { background-color: $--color-primary__blue; } + &__white-blue { background-color: $--color-white; color: $--color-primary__blue; } } + &__transparent { border: 0; background-color: transparent !important; } + &.v-btn--icon.v-btn--tile { border-radius: 4px; } @@ -42,16 +56,18 @@ @each $theme in dark, light { @include theme($theme); + .v-application.#{$theme}-mode { .v-btn-bg__w-g5 { background-color: $--theme-color-w-g5; + i { color: $--theme-color-g5-w; } } + .v-btn { - background-color: map-deep-get( - $config, + background-color: map-deep-get($config, #{$theme}, "v-btn-backgroundColor" ); @@ -59,8 +75,7 @@ &.v-btn--disabled { opacity: 0.4; - background-color: map-deep-get( - $config, + background-color: map-deep-get($config, #{$theme}, "v-btn-backgroundColor" ) !important; @@ -71,5 +86,69 @@ } } } + + .basic-button { + color: map-deep-get($config, #{$theme}, "basic-button-color"); + background: map-deep-get($config, #{$theme}, "basic-button-background"); + } + + .search-button { + color: map-deep-get($config, #{$theme}, "search-btn-color"); + } + + .v-dialog { + .ant-btn-icon-only { + color: map-deep-get( + $config, + #{$theme}, + "icon-color" + ); + } + } + + .ant-btn { + &.ant-btn-primary { + background: map-deep-get($config, #{$theme}, "ant-btn-primary-bg"); + border-color:map-deep-get($config, #{$theme}, "ant-btn-primary-bg"); + color:map-deep-get($config, #{$theme}, "ant-btn-primary-color"); + } + + &.ant-btn-default { + background:map-deep-get($config, #{$theme}, "ant-btn-default-bg"); + color:map-deep-get($config, #{$theme}, "ant-btn-default-color"); + } + + &.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; + } + } + } } } + +.v-application { + .ant-btn { + border-radius: 6px; + &.ant-btn-lg { + border-radius: 8px; + } + &.ant-btn-default { + border:none !important + } + + } +} + + + +.v-dialog { + .ant-btn-icon-only { + border: none; + width: 16px; + height: 16px; + background:none; + } +} \ No newline at end of file diff --git a/assets/scss/common/card.scss b/assets/scss/common/card.scss index 2c369e3..4170b5e 100644 --- a/assets/scss/common/card.scss +++ b/assets/scss/common/card.scss @@ -3,13 +3,43 @@ } @each $theme in dark, light { + // @include theme($theme); .v-application.#{$theme}-mode { .v-card { color: map-deep-get($config, #{$theme}, "card-default-color"); + background-color: map-deep-get($config, #{$theme}, "cardBackground"); + .v-card__subtitle { + font-size: 14px; + font-weight: 400; color: map-deep-get($config, #{$theme}, "card-subtitle"); } + + .v-card__title { + font-size: 20px; + font-weight: 600; + line-height: 28px; + color: map-deep-get($config, #{$theme}, "card-title-color") !important; + } + + .card-text-info { + font-family: "Oxanium", sans-serif; + font-weight: 500; + font-size: 24px; + line-height: 24px; + letter-spacing: 0; + color: map-deep-get($config, #{$theme}, "card-text-info-color"); + } + + .card-text-title { + font-weight: 400; + font-size: 14px; + line-height: 22px; + letter-spacing: 0; + color: map-deep-get($config, #{$theme}, "card-text-title-color"); + } + } } -} +} \ No newline at end of file diff --git a/assets/scss/common/grid.scss b/assets/scss/common/grid.scss index 8ebb753..e20897c 100644 --- a/assets/scss/common/grid.scss +++ b/assets/scss/common/grid.scss @@ -11,9 +11,10 @@ width: 100%; border-radius: 10px; } + &-content-area { width: 100%; - border: 0; + border: 0 !important; } // &-body-container { @@ -33,6 +34,7 @@ } &-rside-area { + .tui-grid-header-area, .tui-grid-summary-area { margin-right: $scrollbar-width; @@ -40,27 +42,41 @@ } &-border-line-top, - &-border-line-bottom, - &-border-line-right { + &-border-line-bottom { border: 0 !important; } + &-cell { border-width: 1px !important; } + &-cell-header { border-top: 0; + font-weight: 400; } &-cell-header, &-cell-content, &-cell.tui-grid-cell-summary { - font-family: "Spoqa Han Sans Neo"; + // font-family: "Spoqa Han Sans Neo"; font-size: 0.875rem; - font-weight: 400; line-height: 1.25rem; letter-spacing: 0.0178571429em; } + + &-cell-content { + font-weight: 400; + } + } + +.tui-grid-table{ + .tui-grid-cell-header, + .tui-grid-cell-has-input .tui-grid-cell-content { + padding: 8px; + } +} + .treeGrid { .tui-grid { &-header-area { @@ -73,22 +89,58 @@ } } } -.tui-grid-scrollbar-right-top{ - z-index:5; + +.tui-grid-scrollbar-right-top { + z-index: 5; } @each $theme in dark, light { @include theme($theme); + .v-application.#{$theme}-mode { .tui-grid { + &-table { + border: 1px solid; + border-color: map-deep-get($config, + #{$theme}, + "scrollbar-track" + ); + + .tui-grid-cell { + border-color: map-deep-get($config, + #{$theme}, + "tui-grid-cell-borderColor-darkmode" + ); + border-style: map-deep-get($config, + #{$theme}, + "tui-grid-cell-borderStyle-darkmode" + ); + } + } + + &-border-line-right{ + opacity: 0; + } + + &-body-container{ + border-right: 1px solid; + border-right-color: map-deep-get($config, + #{$theme}, + "tui-grid-cell-borderColor" + ); + width: auto !important; + } + &-container, &-summary-area { + font-family: Inter; + // color: #000000E0; + & ::-webkit-scrollbar { width: $scrollbar-width !important; height: $scrollbar-width !important; -webkit-appearance: initial; - background-color: map-deep-get( - $config, + background-color: map-deep-get($config, #{$theme}, "scrollbar-track" ) !important; @@ -96,8 +148,7 @@ } & ::-webkit-scrollbar-track { - background-color: map-deep-get( - $config, + background-color: map-deep-get($config, #{$theme}, "scrollbar-track" ) !important; @@ -109,6 +160,16 @@ background-color: map-deep-get($config, #{$theme}, "scrollbar-thumb"); border-radius: 3px; } + + .tui-grid-cell { + + &.tui-grid-cell-summary { + color: map-deep-get($config, + #{$theme}, + "tui-grid-cell-color" + ); + } + } } &-rside-area { @@ -121,26 +182,28 @@ } &-scrollbar-right-top { - background-color: map-deep-get( - $config, - #{$theme}, - "tui-grid-header-backgroundColor" - ); - border-left-color: map-deep-get( - $config, - #{$theme}, - "tui-grid-border-horziontal-color" - ); - border-right-color: map-deep-get( - $config, - #{$theme}, - "tui-grid-border-horziontal-color" - ); - border-bottom-color: map-deep-get( - $config, - #{$theme}, - "tui-grid-border-vertical-color" - ); + background-color: rgba(0, 0, 0, 0); + border: none; + // background-color: map-deep-get( + // $config, + // #{$theme}, + // "tui-grid-header-backgroundColor" + // ); + // border-left-color: map-deep-get( + // $config, + // #{$theme}, + // "tui-grid-border-horziontal-color" + // ); + // border-right-color: map-deep-get( + // $config, + // #{$theme}, + // "tui-grid-border-horziontal-color" + // ); + // border-bottom-color: map-deep-get( + // $config, + // #{$theme}, + // "tui-grid-border-vertical-color" + // ); } &-scrollbar-right-bottom { @@ -162,25 +225,63 @@ border-color: transparent !important; } - &-body-area { - overflow: auto !important; - } + // &-body-area { + // overflow: auto !important; + // } &-container, &-layer-state, &-body-area, &-summary-area, &-cell { - background-color: map-deep-get( - $config, + background-color: map-deep-get($config, #{$theme}, "tui-grid-cell-backgroundColor" ); - border-color: map-deep-get( - $config, + border-color: map-deep-get($config, #{$theme}, "tui-grid-border-vertical-color" ); + + &-current-row{ + td { + .custom-radio { + .radio-mark{ + border-color: #1677ff; + background-color: #fff; + &::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + height: 11px; + width: 11px; + border-radius: 50%; + background-color: #1677ff; + } + } + } + } + } + } + + &-cell { + &:last-child { + padding-right: 1px; + border-right: 1px solid ; + border-right-color: map-deep-get($config, + #{$theme}, + "tui-grid-cell-borderColor" + ); + .tui-grid-cell-content { + border-right: 1px solid ; + border-right-color: map-deep-get($config, + #{$theme}, + "tui-grid-cell-borderColor" + ); + } + } } &-cell-summary { @@ -189,17 +290,27 @@ &-header-area, &-cell-header { - background-color: map-deep-get( - $config, + // font-family: inherit; + font-weight: 600; + font-style: Semi Bold; + background-color: map-deep-get($config, #{$theme}, "tui-grid-header-backgroundColor" ); - border-color: map-deep-get( - $config, + border-color: map-deep-get($config, #{$theme}, "tui-grid-border-vertical-color" ); - color: map-deep-get($config, #{$theme}, "activate"); + color: map-deep-get($config, + #{$theme}, + "tui-grid-header-color" + ); + + } + + &-header-area { + background-color: none; + border: none; } &-row-odd, @@ -209,9 +320,8 @@ } &:hover { - > .tui-grid-cell { - background-color: map-deep-get( - $config, + >.tui-grid-cell { + background-color: map-deep-get($config, #{$theme}, "tui-grid-cell-hover-backgroundColor" ); @@ -221,33 +331,33 @@ } } } + } &-cell { &.row-insert { - background-color: map-deep-get( - $config, + background-color: map-deep-get($config, #{$theme}, "tui-grid-cell-insert-color" ); } + &.row-modify { - background-color: map-deep-get( - $config, + background-color: map-deep-get($config, #{$theme}, "tui-grid-cell-modify-color" ); } + &.row-removed { - background-color: map-deep-get( - $config, + background-color: map-deep-get($config, #{$theme}, "tui-grid-cell-removed-color" ); } + &.row-disabled { - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "tui-grid-cell-disabled-color" ); @@ -256,9 +366,9 @@ color: map-deep-get($config, #{$theme}, "tui-grid-cell-disabled-color"); } } + &.row-selected { - background-color: map-deep-get( - $config, + background-color: map-deep-get($config, #{$theme}, "tui-grid-cell-selected-color" ); @@ -284,15 +394,14 @@ align-items: center; position: relative; - .tui-grid-tree-depth - { + .tui-grid-tree-depth { width: 16px; height: 16px; position: relative; left: 0 !important; margin-right: 6px; } - + } &-btn-tree { @@ -303,6 +412,7 @@ margin-right: 6px; top: 0; left: 0 !important; + i { margin-top: 0; } @@ -311,15 +421,19 @@ &-tree-icon { margin-top: 0; top: 0; + i { width: 16px; height: 16px; margin-left: 0; background-repeat: no-repeat; background-position: 0 0; - @if $theme == dark { + + @if $theme ==dark { background-image: url("data:image/svg+xml,%3Csvg id='ico_tree_item' xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cstyle%3E .cls-1, .cls-4 %7B fill: none; %7D .cls-1 %7B stroke: %23fff; opacity: 0.3; %7D .cls-2 %7B fill: %23fff; %7D .cls-3 %7B stroke: none; %7D %3C/style%3E%3C/defs%3E%3Cg id='사각형_703' data-name='사각형 703' class='cls-1'%3E%3Crect class='cls-3' width='16' height='16' rx='3'/%3E%3Crect class='cls-4' x='0.5' y='0.5' width='15' height='15' rx='2.5'/%3E%3C/g%3E%3Crect id='사각형_1384' data-name='사각형 1384' class='cls-2' width='8' height='1' rx='0.5' transform='translate(4 4.5)'/%3E%3Crect id='사각형_1386' data-name='사각형 1386' class='cls-2' width='8' height='1' rx='0.5' transform='translate(4 7.5)'/%3E%3Crect id='사각형_1387' data-name='사각형 1387' class='cls-2' width='8' height='1' rx='0.5' transform='translate(4 10.5)'/%3E%3C/svg%3E%0A"); - } @else { + } + + @else { background-image: url("data:image/svg+xml,%3Csvg id='ico_tree_item' xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cdefs%3E%3Cstyle%3E .cls-2%7Bfill:%23a4aac3%7D %3C/style%3E%3C/defs%3E%3Cg id='사각형_703' data-name='사각형 703' style='stroke:%23a4aac3;fill:none'%3E%3Crect width='16' height='16' rx='3' style='stroke:none'/%3E%3Crect x='.5' y='.5' width='15' height='15' rx='2.5' style='fill:none'/%3E%3C/g%3E%3Crect id='사각형_1384' data-name='사각형 1384' class='cls-2' width='8' height='1' rx='.5' transform='translate(4 4.5)'/%3E%3Crect id='사각형_1386' data-name='사각형 1386' class='cls-2' width='8' height='1' rx='.5' transform='translate(4 7.5)'/%3E%3Crect id='사각형_1387' data-name='사각형 1387' class='cls-2' width='8' height='1' rx='.5' transform='translate(4 10.5)'/%3E%3C/svg%3E%0A"); } } @@ -331,10 +445,13 @@ width: 16px; height: 16px; background-position: 0 0; - @if $theme == dark { - background-image: url("data:image/svg+xml,%3Csvg id='btn_tree_item_close' xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %230d0f17; stroke: %23fff; opacity: 0.3; %7D .cls-2 %7B fill: %23fff; %7D .cls-3 %7B stroke: none; %7D .cls-4 %7B fill: none; %7D %3C/style%3E%3C/defs%3E%3Cg id='사각형_703' data-name='사각형 703' class='cls-1'%3E%3Crect class='cls-3' width='16' height='16' rx='3'/%3E%3Crect class='cls-4' x='0.5' y='0.5' width='15' height='15' rx='2.5'/%3E%3C/g%3E%3Crect id='사각형_1384' data-name='사각형 1384' class='cls-2' width='8' height='2' rx='1' transform='translate(4 7)'/%3E%3C/svg%3E%0A"); - } @else { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cg data-name='사각형 703' style='fill:%23f1f3f9;stroke:%23a4aac3'%3E%3Crect width='16' height='16' rx='3' style='stroke:none'/%3E%3Crect x='.5' y='.5' width='15' height='15' rx='2.5' style='fill:none'/%3E%3C/g%3E%3Crect data-name='사각형 1384' width='8' height='2' rx='1' transform='translate(4 7)' style='fill:%23a4aac3'/%3E%3C/svg%3E "); + + @if $theme ==dark { + background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%224%22%20fill%3D%22%23212224%22/%3E%3Crect%20x%3D%220.5%22%20y%3D%220.5%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%223.5%22%20stroke%3D%22white%22%20stroke-opacity%3D%220.06%22/%3E%3Cpath%20d%3D%22M12.5998%208H2.99979%22%20stroke%3D%22white%22%20stroke-opacity%3D%220.85%22/%3E%3C/svg%3E"); + } + + @else { + background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%224%22%20fill%3D%22white%22/%3E%3Crect%20x%3D%220.5%22%20y%3D%220.5%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%223.5%22%20stroke%3D%22black%22%20stroke-opacity%3D%220.06%22/%3E%3Cpath%20d%3D%22M12.5997%208H2.99973%22%20stroke%3D%22black%22%20stroke-opacity%3D%220.88%22/%3E%3C/svg%3E"); } } } @@ -346,10 +463,13 @@ width: 16px; height: 16px; background-position: 0 0; - @if $theme == dark { - background-image: url("data:image/svg+xml,%3Csvg id='btn_tree_item_open' xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cdefs%3E%3Cstyle%3E .cls-2%7Bfill:%23fff%7D %3C/style%3E%3C/defs%3E%3Cg id='사각형_703' data-name='사각형 703' style='fill:%230d0f17;stroke:%23fff;opacity:.3'%3E%3Crect width='16' height='16' rx='3' style='stroke:none'/%3E%3Crect x='.5' y='.5' width='15' height='15' rx='2.5' style='fill:none'/%3E%3C/g%3E%3Crect id='사각형_1384' data-name='사각형 1384' class='cls-2' width='8' height='2' rx='1' transform='translate(4 7)'/%3E%3Crect id='사각형_1385' data-name='사각형 1385' class='cls-2' width='2' height='8' rx='1' transform='translate(7 4)'/%3E%3C/svg%3E%0A"); - } @else { - background-image: url("data:image/svg+xml,%3Csvg id='btn_tree_item_open' xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cdefs%3E%3Cstyle%3E .cls-2%7Bfill:%23a4aac3%7D %3C/style%3E%3C/defs%3E%3Cg id='사각형_703' data-name='사각형 703' style='fill:%23f1f3f9;stroke:%23a4aac3'%3E%3Crect width='16' height='16' rx='3' style='stroke:none'/%3E%3Crect x='.5' y='.5' width='15' height='15' rx='2.5' style='fill:none'/%3E%3C/g%3E%3Crect id='사각형_1384' data-name='사각형 1384' class='cls-2' width='8' height='2' rx='1' transform='translate(4 7)'/%3E%3Crect id='사각형_1385' data-name='사각형 1385' class='cls-2' width='2' height='8' rx='1' transform='translate(7 4)'/%3E%3C/svg%3E "); + + @if $theme ==dark { + background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%224%22%20fill%3D%22%23212224%22/%3E%3Crect%20x%3D%220.5%22%20y%3D%220.5%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%223.5%22%20stroke%3D%22white%22%20stroke-opacity%3D%220.06%22/%3E%3Cpath%20d%3D%22M7.7998%203.00073V12.6007%22%20stroke%3D%22white%22%20stroke-opacity%3D%220.85%22/%3E%3Cpath%20d%3D%22M12.5999%207.80078L2.99985%207.80078%22%20stroke%3D%22white%22%20stroke-opacity%3D%220.85%22/%3E%3C/svg%3E"); + } + + @else { + background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%224%22%20fill%3D%22white%22/%3E%3Crect%20x%3D%220.5%22%20y%3D%220.5%22%20width%3D%2215%22%20height%3D%2215%22%20rx%3D%223.5%22%20stroke%3D%22black%22%20stroke-opacity%3D%220.06%22/%3E%3Cpath%20d%3D%22M7.7998%203.00073V12.6007%22%20stroke%3D%22black%22%20stroke-opacity%3D%220.88%22/%3E%3Cpath%20d%3D%22M12.5997%207.80078L2.99973%207.80078%22%20stroke%3D%22black%22%20stroke-opacity%3D%220.88%22/%3E%3C/svg%3E"); } } } @@ -373,4 +493,4 @@ padding-left: 0 !important; } } -} +} \ No newline at end of file diff --git a/assets/scss/common/input.scss b/assets/scss/common/input.scss index cffe773..e4de7be 100644 --- a/assets/scss/common/input.scss +++ b/assets/scss/common/input.scss @@ -1,40 +1,82 @@ .v-select__custom { - &.v-text-field.v-text-field--solo:not(.v-text-field--solo-flat) - > .v-input__control - > .v-input__slot { + &.v-text-field.v-text-field--solo:not(.v-text-field--solo-flat)>.v-input__control>.v-input__slot { box-shadow: none; } + &.v-text-field.v-text-field--solo .v-input__control { - min-height: 36px; - height: 36px; + min-height: 32px; + height: 32px; } + &.v-input input { - min-height: 36px; - height: 36px; + min-height: 32px; + height: 32px; } .v-input--selection-controls { margin-top: 0; padding-top: 0; } + .v-input__slot { overflow: hidden; position: relative; - height: 36px; + height: 32px; + } + + &.v-text-field .v-input__control { + border-color: #d9d9d9; + } + + &.select-large { + + .v-input__slot, + .v-input__control { + height: 40px !important; + // border: solid 1px #D9D9D9; + border-radius: 8px !important; + } + + } + + legend { + width: 0; } } .v-input__custom { .v-input__slot { + &:before, &:after { display: none; } } + .v-input__slot { overflow: hidden; position: relative; } + + &.input-large { + border-radius: 8px !important; + + input { + max-height: 40px; + height: 40px; + + } + } + + &.v-text-field .v-input__control { + border-color: #d9d9d9; + } + + &.surface-name { + fieldset { + max-width: 345px; + } + } } .v-text-field .v-input__append-inner, @@ -45,20 +87,21 @@ .v-select__widget { - &.v-text-field.v-text-field--solo:not(.v-text-field--solo-flat) - > .v-input__control - > .v-input__slot { + &.v-text-field.v-text-field--solo:not(.v-text-field--solo-flat)>.v-input__control>.v-input__slot { box-shadow: none; } + &.v-text-field.v-text-field--solo .v-input__control { min-height: 30px !important; height: 30px !important; } + &.v-input input { min-height: 30px !important; height: 30px !important; } - &.v-text-field--outlined > .v-input__control > .v-input__slot { + + &.v-text-field--outlined>.v-input__control>.v-input__slot { align-items: stretch; min-height: 30px; } @@ -67,6 +110,7 @@ margin-top: 0; padding-top: 0; } + .v-input__slot { overflow: hidden; position: relative; @@ -79,20 +123,23 @@ width: 110px; height: 30px; flex: 0 0 auto; + &.v-text-field.v-text-field--solo .v-input__control { min-height: 30px; height: 30px; } } } -.v-text-field > .v-input__control > .v-input__slot:after, -.v-text-field > .v-input__control > .v-input__slot:before { + +.v-text-field>.v-input__control>.v-input__slot:after, +.v-text-field>.v-input__control>.v-input__slot:before { display: none; } .v-input__slot { margin-bottom: 0 !important; } + .v-input { margin-top: 0 !important; padding-top: 0 !important; @@ -104,25 +151,117 @@ } } +.v-main { + + .ant-input, + .ant-input-affix-wrapper>input, + .ant-select-selection { + border-radius: 6px; + } +} + +.custom-radio { + display: inline-flex; + align-items: center; + cursor: pointer; + position: relative; + padding-left: 28px; + margin: 10px; + font-size: 16px; +} +.custom-radio input[type="radio"] { + position: absolute; + opacity: 0; + cursor: pointer; +} +/* Custom radio appearance */ +.radio-mark { + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + height: 18px; + width: 18px; + background-color: white; + border: 2px solid #ccc; + border-radius: 50%; + transition: all 0.2s ease; +} + +/* Show selected state */ +.custom-radio input[type="radio"]:checked~.radio-mark { + border-color: #1677ff; + background-color: #fff; +} + +.custom-radio input[type="radio"]:checked~.radio-mark::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + height: 11px; + width: 11px; + border-radius: 50%; + background-color: #1677ff; +} + +/* Light mode: use Vuetify default */ +.checkbox-light .v-icon { + color: #D9D9D9 !important; +} + +/* Dark mode: override tick color to black */ +.checkbox-dark .v-icon { + color: #424242 !important; +} + @each $theme in dark, light { @include theme($theme); + .v-application.#{$theme}-mode { + + + .v-textarea { + .v-input__slot{ + border: map-deep-get($config, + #{$theme}, + "v-input-textarea-border" + ); + fieldset { + background-color: map-deep-get($config, + #{$theme}, + "v-input-textarea-bg" + ); + + } + } + } + .v-input { border-radius: 4px; + border-radius: 6px; + border-color: #d9d9d9; + color: map-deep-get($config, + #{$theme}, + "v-input-backgroundColor" + ); + + + &:not(.v-input--radio-group, .v-input--checkbox) { .v-input__slot { - background-color: map-deep-get( - $config, + background-color: map-deep-get($config, #{$theme}, "v-input-backgroundColor" ); } } + .v-input__slot { fieldset { - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "v-input-fieldset-color" ) !important; @@ -130,8 +269,7 @@ &:hover { fieldset { - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "v-input-fieldset-hover-color" ) !important; @@ -144,15 +282,14 @@ } &--is-readonly { - border-color: map-deep-get( - $config, + border-color: map-deep-get($config, #{$theme}, "v-input-readonly-border-color" ); + &:not(.v-input--radio-group, .v-input--checkbox) { .v-input__slot { - background-color: map-deep-get( - $config, + background-color: map-deep-get($config, #{$theme}, "v-input-readonly-backgroundColor" ) !important; @@ -161,20 +298,20 @@ } &--is-disabled { - border-color: map-deep-get( - $config, + border-color: map-deep-get($config, #{$theme}, "v-input-readonly-border-color" ); + &:not(.v-input--radio-group, .v-input--checkbox) { .v-input__slot { - background-color: map-deep-get( - $config, + background-color: map-deep-get($config, #{$theme}, "v-input-disabled-backgroundColor" ) !important; } } + input { color: map-deep-get($config, #{$theme}, "v-input-disabled-color"); } @@ -184,22 +321,23 @@ .v-select { .v-label { color: map-deep-get($config, #{$theme}, "v-select-label-color"); + position: static !important; } &.v-input--is-disabled { .v-label { color: map-deep-get($config, #{$theme}, "v-input-disabled-color"); } + .v-icon.v-icon--disabled { - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "v-input-disabled-color" ) !important; } + .v-select__selection--disabled { - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "v-input-disabled-color" ) !important; @@ -211,6 +349,7 @@ .v-label { color: map-deep-get($config, #{$theme}, "non-activate"); } + &.v-item--active { .v-label { color: map-deep-get($config, #{$theme}, "activate"); @@ -241,17 +380,19 @@ .v-input--checkbox { .v-icon { - @if $theme == dark { + @if $theme ==dark { color: rgba(255, 255, 255, 0.6); - } @else { + } + + @else { color: #aaaaaa; } } } - .v-textarea{ - textarea{ + .v-textarea { + textarea { padding: 10px; } } -} +} \ No newline at end of file diff --git a/assets/scss/common/tabs.scss b/assets/scss/common/tabs.scss index e48cea4..2242602 100644 --- a/assets/scss/common/tabs.scss +++ b/assets/scss/common/tabs.scss @@ -1,20 +1,20 @@ -// .v-tabs { -// height: 38px; -// flex: 0; -// & + .v-tabs-items { -// height: calc(100% - 38px) !important; -// width: 100%; -// background-color: transparent !important; -// } -// &-bar { -// height: 38px; -// background-color: transparent !important; -// border-bottom: 1px solid $--color-hover_d; -// } -// .v-tab { -// margin: 0 !important; -// } -// } +.v-tabs { + + .v-tab { + padding: 16px 0; + font-size: 14px; + position: relative; + z-index: 2; + transform: translateY(1px); + letter-spacing: 0; + + +.v-tab { + margin-left: 32px; + } + + min-width:auto; + } +} @each $theme in dark, light { .v-application.#{$theme}-mode { @@ -22,67 +22,112 @@ position: relative; z-index: 2; + .v-tabs-bar{ + background-color: rgba(0, 0, 0, 0) + } + + .v-slide-group__content { + border-bottom: 1px solid map-deep-get($config, + #{$theme}, + "v-tabs-items-border-color" + ); + } + .v-slide-group__wrapper { + background-color: map-deep-get($config, + #{$theme}, + "card-default-backgroundColor" + ); overflow: visible !important; contain: initial !important; } .v-tab { - border: 1px solid transparent; - border-radius: 6px 6px 0 0; - border-bottom-color: map-deep-get( - $config, - #{$theme}, - "v-tabs-active-border-color" - ); - background-color: map-deep-get( - $config, - #{$theme}, - "v-tabs-backgroundColor" - ); + padding: 16px 0; + font-size: 14px; + // border-radius: 6px 6px 0 0; + // border-bottom-color: map-deep-get( + // $config, + // #{$theme}, + // "v-tabs-active-border-color" + // ); + // background-color: map-deep-get( + // $config, + // #{$theme}, + // "v-tabs-backgroundColor" + // ); position: relative; z-index: 2; transform: translateY(1px); letter-spacing: 0; + .v-tab { - margin-left: 4px; + margin-left: 32px; + } + &::before { + background-color: transparent; } - } + &:hover { + color: map-deep-get( + $config, + #{$theme}, + "v-tabs-hover-color" + ) !important + } + + &:not(.v-tab--active){ + color: map-deep-get($config, #{$theme}, "router-tab-item-color") !important; + } + + } + .v-tab--active { - border-top-color: map-deep-get( - $config, - #{$theme}, - "v-tabs-active-border-color" - ); - border-right-color: map-deep-get( - $config, - #{$theme}, - "v-tabs-active-border-color" - ); - border-left-color: map-deep-get( - $config, - #{$theme}, - "v-tabs-active-border-color" - ); - border-bottom-color: map-deep-get( - $config, - #{$theme}, - "v-tabs-active-backgroundColor" - ); + // border-top-color: map-deep-get( + // $config, + // #{$theme}, + // "v-tabs-active-border-color" + // ); + // border-right-color: map-deep-get( + // $config, + // #{$theme}, + // "v-tabs-active-border-color" + // ); + // border-left-color: map-deep-get( + // $config, + // #{$theme}, + // "v-tabs-active-border-color" + // ); + // border-bottom-color: map-deep-get( + // $config, + // #{$theme}, + // "v-tabs-active-backgroundColor" + // ); background-color: map-deep-get( $config, #{$theme}, "v-tabs-active-backgroundColor" ); } + + .v-tabs-slider { + border-bottom: 1px solid; + border-bottom-color: map-deep-get($config, + #{$theme}, + "v-tabs-active-border-color" + ); + } } + .v-tabs-items { position: relative; z-index: 1; - border-top: 1px - solid - map-deep-get($config, #{$theme}, "v-tabs-active-border-color"); + background-color: map-deep-get($config, + #{$theme}, + "card-default-backgroundColor" + ); + // border-top: 1px + // solid + // map-deep-get($config, #{$theme}, "v-tabs-active-border-color"); } } } diff --git a/assets/scss/common/text.scss b/assets/scss/common/text.scss index 68c3a09..448ec11 100644 --- a/assets/scss/common/text.scss +++ b/assets/scss/common/text.scss @@ -1,6 +1,7 @@ .txt { &__bar { display: flex; + &:before { content: ""; display: inline-block; @@ -11,6 +12,7 @@ position: relative; top: 3px; } + &.log { &:before { background-color: $--color-primary__green; @@ -44,15 +46,23 @@ } .custom-title-4 { - font-size: 1.125rem !important; + font-size: 1.25rem !important; font-weight: 700 !important; line-height: 1.25 !important; } + +.custom-title-4-new { + font-size: 1.25rem !important; + font-weight: 600 !important; + line-height: 1.25 !important; +} + .custom-title-6 { font-size: 1.0rem !important; font-weight: 700 !important; line-height: 1.25 !important; } + .custom-title-8 { font-size: 0.75rem !important; font-weight: 700 !important; @@ -94,5 +104,24 @@ .text-color--sub { color: map-deep-get($config, #{$theme}, "text-subcolor"); } + + .h1-title { + font-weight: 600; + font-size: 24px; + line-height: 32px; + letter-spacing: 0; + color: map-deep-get($config, #{$theme}, "h1-title"); + } + + .v-dialog { + .custom-title-4 { + font-size: 16px !important; + font-weight: 600 !important; + color: map-deep-get($config, #{$theme}, "card-title-color"); + line-height: 24px !important; + } + } } } + + diff --git a/assets/scss/datepicker.scss b/assets/scss/datepicker.scss new file mode 100644 index 0000000..f8963b1 --- /dev/null +++ b/assets/scss/datepicker.scss @@ -0,0 +1,77 @@ +@each $theme in dark, light { + + // @include theme($theme); + .v-application.#{$theme}-mode { + + .search-box-label { + margin-bottom: 8px; + } + + .datepicker-container { + display: flex; + align-items: center; + justify-content: space-between; + position: relative; + border-radius: 6px; + border: solid 1px; + height: 40px; + // border-color: #424242; + border-color: map-deep-get($config, #{$theme}, "tui-datepicker-border-color"); + + + .v-input { + + // ---------------------- + &.v-input--is-readonly { + border-color: rgba(0, 0, 0, 0); + flex-grow: 1; + + &:not(.v-input--radio-group) { + &:not(.v-input--checkbox) { + ::v-deep { + .v-input__slot { + background-color: rgba(0, 0, 0, 0) !important; + + fieldset { + border: none; + } + } + } + } + } + } + + // ------------------- + .v-input__append-outer { + margin-top: 0; + margin-left: 0; + + #startpicker-container, + #endpicker-container { + width: 100%; + position: absolute; + top: 36px; + left: 0; + } + } + } + } + + .v-input__custom { + flex: 0 0 auto; + + &.half { + width: calc(50% - 20px); + } + + &.large { + height: 40px; + } + + &.datepicker-timeselect { + border: solid 1px map-deep-get($config, #{$theme}, "tui-datepicker-border-color") !important; + } + + } + } +} \ No newline at end of file diff --git a/assets/scss/var.scss b/assets/scss/var.scss index ec8fd14..da9a557 100644 --- a/assets/scss/var.scss +++ b/assets/scss/var.scss @@ -8,7 +8,7 @@ $--color-gray_C: #cccccc !important; $--color-gray_9: #95a0a9 !important; $--color-gray_7: #767d83 !important; $--color-gray_999: #999 !important; -$--color-gray_555: #555 !important; +$--color-gray_555: #555; $--color-gray_aaa: #aaa !important; $--color-hover_d: #47535c !important; $--color-hover_l: #f0f5fc !important; @@ -25,108 +25,149 @@ $--theme-color-g7-g9: ""; $--theme-color-g9-g7: ""; $scrollbar-width: 11px; // 스크롤 바 -$column-spacer: 20px; // 검색 영역 열 간격 +$column-spacer: 16px; // 검색 영역 열 간격 $row-spacer: 14px; // 검색 영역 행 간격 $color: ( - "black": ( - "0": #000, - "1": #111 - ), - "white": ( - "0": #fff - ), - "week": ( - "sun": #fb5a83, - "sat": #2d8cf6 - ) + "black": ("0": #000, + "1": #111), + "white": ("0": #fff), + "week": ("sun": #fb5a83, + "sat": #2d8cf6) ); $config: ( - dark: ( - w-g5: $--color-white, + dark: (w-g5: $--color-white, g5-w: $--color-gray_555, gc-g9: $--color-gray_C, g5-gc: $--color-gray_555, g7-g9: $--color-gray_7, g9-g7: $--color-gray_9, pageBackground: #23272b, - cardBackground: #242940, + cardBackground: #212224, hover: #47535c, btnClose: #24282c, scrollbar-track: #2f334a, scrollbar-thumb: #575b72, - card-default-color: #fff, + card-default-color: #FFFFFFA6, + card-title-color: #FFFFFFD9, // #111, card-subtitle: rgba(255, 255, 255, 0.6), + card-text-info-color: #1668DC, + card-text-title-color: #FFFFFFA6, activate: #fff, non-activate: rgba(255, 255, 255, 0.6), text-subcolor: rgba(255, 255, 255, 0.6), border-color: rgba(255, 255, 255, 0.1), - router-header: #1d2133, - router-tab-item: #2d3355, - router-tab-item-active: #18579e, - router-tab-item-color: #fff, - router-tab-item-active-color: #fff, - router-tab-item-icon-color: rgba(255, 255, 255, 0.5), - router-tab-item-icon-active-color: #fff, - router-tab-item-hover-color: #3896ff, + router-header: #212224, + router-container: #141415, + container-fluid: #141415, + router-tab-item: transparent, + router-tab-item-active: transparent, + router-tab-item-color: #FFFFFFD9, + router-tab-item-active-color: #1668DC, + router-tab-item-icon-color: #FFFFFFD9, + router-tab-item-icon-active-color: #1668DC, + router-tab-item-hover-color: #1668DC, router-tab-slot-end-button-backgroundColor: #144985, v-btn-backgroundColor: #144985, - v-box: #383f5d, + v-box: #212224, v-banner-border-color: rgba(255, 255, 255, 0.1), v-treeview-node-root-backgroundColor: #18579e, v-treeview-node-root-label-color: #fff, v-treeview-node-root-label-active-color: #fff, v-treeview-node-root-icon-color: #fff, v-treeview-node-root-icon-active-color: #fff, - v-treeview-node-subroot-backgroundColor: #2d3355, + // v-treeview-node-subroot-backgroundColor: #FFFFFF0A, + v-treeview-node-subroot-backgroundColor: transparent, v-treeview-node-label-color: rgba(255, 255, 255, 0.6), - v-treeview-node-label-active-color: #fff, + v-treeview-node-label-active-color: #1668DC, v-treeview-leaf-active-backgroundColor: rgba(45, 51, 85, 0.5), v-treeview-leaf-active-color: #3896ff, v-treeview-icon-color: rgba(255, 255, 255, 0.6), v-treeview-icon-active-color: #fff, - v-input-backgroundColor: rgba(13, 15, 23, 0.3), - v-input-fieldset-color: rgba(255, 255, 255, 0.32), + v-treeview-node-label-children-color: #fff, + v-input-backgroundColor: transparent, + v-input-color: rgba(255, 255, 255, 0.25), + v-input-fieldset-color: #424242, v-input-fieldset-hover-color: rgba(255, 255, 255, 1), v-input-icon-color: #fff, - v-input-readonly-border-color: rgba(255, 255, 255, 0.3), - v-input-readonly-backgroundColor: rgba(57, 64, 94, 0.3), - v-input-disabled-backgroundColor: rgba(57, 64, 94, 0.3), - v-input-disabled-color: rgba(255, 255, 255, 0.2), - v-select-label-color: #fff, + v-input-readonly-border-color:#424242, + v-input-readonly-backgroundColor: rgba(255, 255, 255, 0.08), + v-input-disabled-backgroundColor:rgba(255, 255, 255, 0.08), + v-input-disabled-color: rgba(255, 255, 255, 0.5), + v-select-label-color: rgba(255, 255, 255, 0.85), v-calendar-weekday-backgroundColor: #383f5d, v-calendar-weekday-color: #fff, v-calendar-weekday-border-color: rgba(255, 255, 255, 0.1), v-calendar-day-color: #fff, v-calendar-day-in-not-month-color: rgba(255, 255, 255, 0.05), v-calendar-is-today-background-color: #2d4571, - tui-grid-header-backgroundColor: #383f5d, - tui-grid-border-horziontal-color: #383f5d, - tui-grid-border-vertical-color: rgba(255, 255, 255, 0.1), - tui-grid-cell-backgroundColor: #242940, + tui-grid-header-backgroundColor: #2a2b2d, + tui-grid-header-color: #FFFFFFD9, + tui-grid-border-horziontal-color: #212224, + tui-grid-border-vertical-color: #212224, + tui-grid-cell-backgroundColor: #212224, tui-grid-cell-color: #fff, tui-grid-cell-insert-color: #13636c, - tui-grid-cell-selected-color: #1a4e87, + tui-grid-cell-selected-color: #0A224F, tui-grid-cell-modify-color: #13636c, tui-grid-cell-removed-color: #f6637b, tui-grid-cell-disabled-color: rgb(170, 170, 170), - tui-grid-cell-hover-backgroundColor: #31375b, - v-tabs-items-border-color: rgba(255, 255, 255, 0.7), + tui-grid-cell-hover-backgroundColor: #2d4571, + v-tabs-items-border-color: #FFFFFF0F, v-tabs-backgroundColor: rgba(57, 64, 94, 0.5), - v-tabs-active-backgroundColor: #242940, + v-tabs-active-backgroundColor: transparent, v-tabs-active-border-color: rgba(255, 255, 255, 0.7), v-dialog-card-text-color: #fff, tui-datepicker-backgroundColor: #0d0f17, - tui-datepicker-border-color: rgba(255, 255, 255, 0.3), + tui-datepicker-border-color: rgb(66, 66, 66), tui-datepicker-selectable-hover-color: #2d3355, tui-datepicker-selected-color: #1a4e87, tui-datepicker-calendar-color: #fff, - tui-editor-contents-color: #111, - admin-menu-expanded-list-backgroundColor: #144985 + tui-editor-contents-color: rgba(0, 0, 0, 0.88), + tui-grid-cell-borderStyle: solid, + tui-grid-cell-borderColor: #FFFFFF0f, + admin-menu-expanded-list-backgroundColor: #144985, + h1-title: #1668DC, + v-btn-save: transparent, + v-btn-add-text: #212224, + header-backgroud: #131629, + v-btn-header-background: #212224, + v-btn-header-border: #424242, + v-btn-header-text: #fff, + v-icon-orange:#D87A16, + v-icon-blue:#1668DC, + v-btn-excel-dowload-title: #FFFFFFD9, + v-btn-excel-dowload-bg: #00000026, + basic-button-color: #FFFFFFD9, + basic-button-background: #212224, + search-btn-color: #212224, + card-default-backgroundColor: rgba(155, 155, 155, 0), + v-icon-chevron-down: rgba(255, 255, 255, 0.45), + v-icon-search: rgba(255, 255, 255, 0.45), + icon-color: rgba(255, 255, 255, 0.45), + menu-bg-color:rgba(33, 34, 36, 1), + arow-line-btn-bg-color: #111A2C, + arow-line-color: #1668DC, + search-btn-background: #1668DC, + v-btn-color-default: #FFFFFFD9, + v-btn-bg-default: #FFFFFF2E, + v-input-textarea-border: #424242, + v-input-textarea-bg: #212224, + v-input-textarea-color: #FFFFFFD9, + v-treeview-node-label-active-bg: #111A2C, + v-treeview-node-label-active-border: #1668DC, + v-treeview-leaf-subchildren-backgroundColor: #2a2b2d, + ant-btn-primary-bg: #1668DC, + ant-btn-primary-color: #212224, + ant-btn-danger-bg:#D32029, + ant-btn-danger-border:#D32029, + ant-btn-danger-color:#212224, + ant-btn-default-border:#FFFFFF2E, + ant-btn-default-bg:#FFFFFF2E, + ant-btn-default-color:#FFFFFFD9, ), - light: ( - w-g5: $--color-gray_555, + light: (w-g5: $--color-gray_555, g5-w: $--color-white, gc-g9: $--color-gray_999, g5-gc: $--color-gray_C, @@ -137,74 +178,123 @@ $config: ( cardBackground: #fefefe, hover: #f0f5fc, btnClose: #f1f0f8, - scrollbar-track: #e9e9e9, + scrollbar-track: rgba(0, 0, 0, 0), // #e9e9e9, scrollbar-thumb: #bbbbbb, - card-default-color: #111, - card-subtitle: #555, + card-default-color: #00000073, // #111, + card-subtitle: #1677ff, + card-text-info-color: #1677FF, + card-text-title-color: #00000073, + card-title-color: #000000E0, // #111, activate: #111, non-activate: #555, text-subcolor: #999, border-color: #ddd, router-header: #fff, - router-tab-item: #e1e7f3, - router-tab-item-active: #4777d9, - router-tab-item-color: #111, - router-tab-item-active-color: #fff, - router-tab-item-icon-color: #838aa6, - router-tab-item-icon-active-color: #fff, - router-tab-item-hover-color: #366dbe, + router-container: #f8f8f8, + container-fluid: #f8f8f8, + router-tab-item: #fff, + router-tab-item-active: #fff, + router-tab-item-color: #000000E0, + router-tab-item-active-color: #1677ff, + router-tab-item-icon-color: #000000E0, + router-tab-item-icon-active-color: #1677ff, + router-tab-item-hover-color: #1677ff, router-tab-slot-end-button-backgroundColor: #3f4d7d, - v-btn-backgroundColor: #4777d9, - v-box: #f0f3fa, + v-btn-backgroundColor: #1677ff, + // v-btn-backgroundColor: #fff, + v-box: #FFFFFF, v-banner-border-color: #ddd, v-treeview-node-root-backgroundColor: #4777d9, v-treeview-node-root-label-color: #111, v-treeview-node-root-label-active-color: #fff, v-treeview-node-root-icon-color: #555, v-treeview-node-root-icon-active-color: #fff, - v-treeview-node-subroot-backgroundColor: #e1e7f3, + // v-treeview-node-subroot-backgroundColor: #00000005, + v-treeview-node-subroot-backgroundColor: transparent, v-treeview-node-label-color: #555, - v-treeview-node-label-active-color: #111, + v-treeview-node-label-active-color: #002C8C, + v-treeview-node-label-children-color: #616885, v-treeview-leaf-active-backgroundColor: #edf1f7, v-treeview-leaf-active-color: #366dbe, v-treeview-icon-color: #a4aac3, v-treeview-icon-active-color: #616885, v-input-backgroundColor: #ffffff, - v-input-fieldset-color: #b4b8c9, - v-input-fieldset-hover-color: #b4b8c9, - v-input-icon-color: #555, - v-input-readonly-border-color: #b4b8c9, - v-input-readonly-backgroundColor: #f5f5f5, - v-input-disabled-backgroundColor: #eee, - v-input-disabled-color: #bbb, - v-select-label-color: #111, + v-input-color: rgba(0, 0, 0, 0.25), + v-input-fieldset-color: #d9d9d9, + v-input-fieldset-hover-color: #1890ff, + v-input-icon-color: #d9d9d9, + v-input-readonly-border-color: #424242, + v-input-readonly-backgroundColor: rgba(0, 0, 0, 0.04), + v-input-disabled-backgroundColor: rgba(0, 0, 0, 0.04), + v-input-disabled-color: rgba(0, 0, 0, 0.25), + v-select-label-color: rgba(0, 0, 0, 0.88), v-calendar-weekday-backgroundColor: #e0e0e0, v-calendar-weekday-color: #111, v-calendar-weekday-border-color: #d4d4d4, v-calendar-day-color: #111, v-calendar-day-in-not-month-color: #f8f8f8, v-calendar-is-today-background-color: #e3eaf3, - tui-grid-header-backgroundColor: #e0e0e0, + tui-grid-header-backgroundColor: #fafafa, //#e0e0e0, + tui-grid-header-color: rgba(0, 0, 0, 0.88), tui-grid-border-horziontal-color: #e0e0e0, - tui-grid-border-vertical-color: #d4d4d4, + tui-grid-border-vertical-color: rgba(0, 0, 0, 0.06), //#d4d4d4, tui-grid-cell-backgroundColor: #fff, - tui-grid-cell-color: #555, + tui-grid-cell-color: #000000E0, tui-grid-cell-insert-color: #13636c, - tui-grid-cell-selected-color: #ecf2fa, + tui-grid-cell-selected-color: #E6F4FF, tui-grid-cell-modify-color: #e6f5f7, tui-grid-cell-removed-color: #fddde1, tui-grid-cell-hover-backgroundColor: #f5f5f5, - v-tabs-items-border-color: #989db1, + v-tabs-items-border-color: #0000000F, v-tabs-backgroundColor: #ddd, - v-tabs-active-backgroundColor: #fff, - v-tabs-active-border-color: #989db1, + v-tabs-active-backgroundColor: rgba(0, 0, 0, 0), // #fff, + v-tabs-active-border-color: #1677FF, + v-tabs-hover-color: #1677FF, v-dialog-card-text-color: #111, tui-datepicker-backgroundColor: #fff, - tui-datepicker-border-color: #b4b8c9, + tui-datepicker-border-color: #D9D9D9, tui-datepicker-selectable-hover-color: #e1e7f3, tui-datepicker-selected-color: #4777d9, tui-datepicker-calendar-color: #111, tui-editor-contents-color: #111, - admin-menu-expanded-list-backgroundColor: #3f4d7d - ) -); + tui-grid-cell-borderStyle: solid, + tui-grid-cell-borderColor: #0000000F, + admin-menu-expanded-list-backgroundColor: #3f4d7d, + h1-title: #002C8C, + header-backgroud: #F0F5FF, + v-btn-header-background: #FFF, + v-btn-header-border: #D9D9D9, + v-btn-header-text: #000000, + v-icon-orange:#FA8C16, + v-icon-blue:#1677FF, + v-btn-excel-dowload-title: #000000E0, + v-btn-excel-dowload-bg: #00000026, + basic-button-color: #000000E0, + basic-button-background: #FFFFFF, + search-btn-color: #ffffff, + card-default-backgroundColor: rgba(155, 155, 155, 0), + v-icon-chevron-down:rgba(0, 0, 0, 0.45), + v-icon-search:rgba(0, 0, 0, 0.45), + icon-color: rgba(0, 0, 0, 0.45), + menu-bg-color: #fff, + arow-line-btn-bg-color: #E6F4FF, + arow-line-color: #1677FF, + search-btn-background: #1677FF, + v-btn-bg-default: #00000026, + v-btn-color-default: #000000E0, + v-input-textarea-border: #D9D9D9, + v-input-textarea-bg: #FFFFFF, + v-input-textarea-color: #000000E0, + v-treeview-node-label-active-bg: #E6F4FF, + v-treeview-node-label-active-border: #1677FF, + v-treeview-leaf-subchildren-backgroundColor: #fafafa, + ant-btn-primary-bg: #1677FF, + ant-btn-primary-color: #FFF, + ant-btn-danger-bg:#FFF, + ant-btn-danger-border:#F5222D, + ant-btn-danger-color:#F5222D, + ant-btn-default-border:#00000026, + ant-btn-default-bg:#00000026, + ant-btn-default-color:#000000E0, + ), +); \ No newline at end of file diff --git a/assets/scss/var.zip b/assets/scss/var.zip new file mode 100644 index 0000000..68eaa0c Binary files /dev/null and b/assets/scss/var.zip differ diff --git a/assets/variables.scss b/assets/variables.scss index 8b78537..d61a3e0 100644 --- a/assets/variables.scss +++ b/assets/variables.scss @@ -21,8 +21,8 @@ $material-light: ( $treeview-node-padding: 10px; $treeview-node-height: 40px; -$banner-start-padding: 10px; -$banner-end-padding: 10px; +$banner-start-padding: 0px; +$banner-end-padding: 0px; $banner-y-padding: 12px; $card-border-radius: 10px; @@ -33,12 +33,12 @@ $card-subtitle-padding: 20px; $timeline-dot-small-size: 10px; -$data-table-regular-row-height: 36px; +$data-table-regular-row-height: 32px; $input-font-size: 14px; -$input-max-height: 36px; -$text-field-filled-full-width-outlined-slot-min-height: 36px; -$text-field-solo-control-min-height: 36px; +$input-max-height: 32px; +$text-field-filled-full-width-outlined-slot-min-height: 32px; +$text-field-solo-control-min-height: 32px; $text-field-line-height: 1.285; $text-field-enclosed-prepend-append-margin-top: 0; $text-field-enclosed-details-padding: 0 8px; @@ -50,7 +50,7 @@ $tabs-item-padding: 12px; $list-border-radius: 4px; $list-padding: 0; -$list-item-min-height: 36px; +$list-item-min-height: 32px; $list-item-padding: 0; $list-item-title-font-size: 0.875rem; // 14px; -$list-item-content-padding: 10px 7px; +$list-item-content-padding: 10px 7px; \ No newline at end of file diff --git a/components/Pagination.vue b/components/Pagination.vue index e79aa00..eaa5cf4 100644 --- a/components/Pagination.vue +++ b/components/Pagination.vue @@ -170,7 +170,7 @@ export default { }; - diff --git a/components/common/Datepicker.vue b/components/common/Datepicker.vue index 16278bf..a17ec0b 100644 --- a/components/common/Datepicker.vue +++ b/components/common/Datepicker.vue @@ -2,14 +2,14 @@ -
+
- @@ -70,18 +75,23 @@ export default { labelCols: { type: Number, require: false, - default: 4, + default: 12, }, textCols: { type: Number, require: false, - default: 8, + default: 12, }, required: { type: Boolean, require: false, default: false, }, + iconShow: { + type: Boolean, + require: false, + default: true, + }, isRangeOption:{ type:Boolean, require:false, @@ -103,6 +113,7 @@ export default { searchParam(state) { return state.pageData[this.parentPrgmId]; }, + isDarkMode: "isDarkMode", }), myCmCycle() { return this.searchParam.cmCycle; @@ -194,6 +205,12 @@ export default { this.defaultRange === 'no limite' ); }, + arrowIcon() { + if(this.isDarkMode){ + return require('@/assets/images/arrow_datepicker_dm.png'); + } + return require('@/assets/images/arrow_datepicker.png'); + } }, watch: { myCmCycle() { @@ -259,8 +276,10 @@ export default { }, mounted() { const startContainer = document.getElementById('startpicker-container'); + // const startContainer = document.getElementById('datepicker-container'); const startTarget = document.getElementById('startpicker'); const endContainer = document.getElementById('endpicker-container'); + // const endContainer = document.getElementById('datepicker-container'); const endTarget = document.getElementById('endpicker'); // datepicker 생성 @@ -304,6 +323,10 @@ export default { }, methods: { ...mapMutations({ setPageData: 'setPageData' }), + onOpenDatepicker() { + this.startDatepickerInstance.open(); + this.endDatepickerInstance.open(); + }, getStartDt() { const dt = this.startDatepickerInstance.getDate(); this.setPageData({ @@ -401,34 +424,8 @@ export default { }; diff --git a/components/common/DatepickerTopView.vue b/components/common/DatepickerTopView.vue index 2148d2f..ff05ba1 100644 --- a/components/common/DatepickerTopView.vue +++ b/components/common/DatepickerTopView.vue @@ -2,9 +2,15 @@ @@ -19,14 +25,17 @@ readonly outlined > -