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/SwapRight.svg b/assets/images/SwapRight.svg new file mode 100644 index 0000000..529a231 --- /dev/null +++ b/assets/images/SwapRight.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/SwapRight_Dark.svg b/assets/images/SwapRight_Dark.svg new file mode 100644 index 0000000..5ff8291 --- /dev/null +++ b/assets/images/SwapRight_Dark.svg @@ -0,0 +1,3 @@ + + + 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/loading.png b/assets/images/loading.png new file mode 100644 index 0000000..b430ae7 Binary files /dev/null and b/assets/images/loading.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..45df3e4 100644 --- a/assets/scss/common.scss +++ b/assets/scss/common.scss @@ -1,18 +1,9 @@ // router-tab (header) -@import "./var.scss"; @import "./mixin.scss"; -@import "./common/fonts.scss"; -@import "./common/text.scss"; -@import "./common/input.scss"; -@import "./common/button.scss"; -@import "./common/grid.scss"; -@import "./common/card.scss"; -@import "./common/tabs.scss"; -@import "./common/numericInput.scss"; html, body { - overflow: auto; + // overflow: auto; } a { @@ -23,30 +14,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 +54,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%; } } @@ -87,218 +109,22 @@ a { .v-main, .v-main__wrap, .container { - height: 100%; + // 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; - margin: -5px -5px 0; - padding: 0 20px; - box-sizing: border-box; - } - - &-page { - height: 100%; - } - - & .router-tab__container { - height: calc(100% - 72px); - padding: 15px 10px; - } - - .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: auto; - } - - .router-tab__item { - height: 48px; - padding: 0 12px !important; - border-radius: 6px 6px 0 0; - - & > span { - font-size: 1rem; - } - - &.is-active { - & > span { - font-weight: 700; - } - } - - & + .router-tab__item { - margin-left: 4px; - } - } - - .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); - - &--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: 1 !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: 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 { - transform: rotate(-180deg); - } - } - - .v-treeview-node__label { - & > button { - width: 100%; - display: flex; - align-items: center; - // justify-content: center; - } - - & .v-icon.mdi-chevron-down { - margin-left: auto; - } - } - } - - .v-treeview-node--active { - &:before { - opacity: 1 !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 { - display: none; - } - - .v-navigation-drawer__append { - display: none; - } - } -} .chart { height: 100%; + &-title { display: block; width: 100%; } + &-info { display: block; width: 100%; @@ -313,6 +139,7 @@ a { .search-box { display: flex; align-items: center; + &-label { display: flex; align-items: center; @@ -320,20 +147,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,154 +213,113 @@ 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; - ::-webkit-scrollbar { - width: 4px; - border-radius: 3px; + + .ant-checkbox-wrapper.ant-checkbox-wraBapper-disabled, + .ant-checkbox-disabled .ant-checkbox-input + { + cursor: default !important; } - ::-webkit-scrollbar-track { - background-color: map-deep-get($config, #{$theme}, "scrollbar-track"); + .ant-checkbox-disabled .ant-checkbox-inner + { + background-color: map-deep-get($config, #{$theme}, "ant-checkbox-disabled-bg") !important; + border: map-deep-get($config, #{$theme}, "ant-checkbox-disabled-border") !important; } - ::-webkit-scrollbar-thumb { - width: 4px; - border-radius: 3px; - background-color: map-deep-get($config, #{$theme}, "scrollbar-thumb"); - background-clip: content-box; + .v-list-item__title { + font-family: var(--desktop-normal-font-family, "Inter-Regular", sans-serif) !important; } - .router-tab { - .router-tab__header { - background-color: map-deep-get($config, #{$theme}, "router-header"); - border-color: map-deep-get($config, #{$theme}, "router-header"); + .btn-close-menu-list { + min-width: 100px; + border-color: transparent; + background-color: map-deep-get($config, #{$theme}, "btn-header-select-bg") !important; + + .v-list-item { + min-height: 30px; } - - .router-tab__container { - background: transparent; - } - - .router-tab__item { - background-color: map-deep-get($config, #{$theme}, "router-tab-item"); - border-color: map-deep-get($config, #{$theme}, "router-tab-item"); - color: map-deep-get($config, #{$theme}, "router-tab-item-color"); - - &:not(.is-active) { - &:hover { - & > span { - color: map-deep-get( - $config, - #{$theme}, - "router-tab-item-hover-color" - ); - } - } - } - - .v-icon { - color: map-deep-get($config, #{$theme}, "router-tab-item-icon-color"); - } - - &.is-active { - background-color: map-deep-get( - $config, - #{$theme}, - "router-tab-item-active" - ); - border-color: map-deep-get( - $config, - #{$theme}, - "router-tab-item-active" - ); - color: map-deep-get( - $config, - #{$theme}, - "router-tab-item-active-color" - ); - - .v-icon { - color: map-deep-get( - $config, - #{$theme}, - "router-tab-item-icon-active-color" - ); - } - } - } - - .router-tab__slot-end { - .v-btn { - background-color: map-deep-get( - $config, - #{$theme}, - "router-tab-slot-end-button-backgroundColor" - ); - box-shadow: none; + + .v-list-item__title { + color: map-deep-get($config, #{$theme}, "btn-header-select-color") !important; + + &:hover { + color: #46c0ff !important; + cursor: pointer; } } } - .v-banner { - &__wrapper { - border-bottom-color: map-deep-get( - $config, + .icon-datepicker-color { + color: map-deep-get($config, #{$theme}, "icon-datepicker-color"); + } + + .head-logo { + gap: 8px; + } + + .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"); + } + } + + .search-box-label { + color: map-deep-get($config, #{$theme}, "v-select-label-color"); + } + + .custom-chart{ + border: 1px solid map-deep-get($config, #{$theme}, "v-chart-border"); + } + + .v-icon { + color: currentColor; + &.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-banner-border-color" - ) !important; + "v-icon-chevron-down" + ); + width: 14px; + height: 14px; } - } - .v-navigation-drawer__append { - > p { - @if $theme == dark { - color: rgba(255, 255, 255, 0.6); - } @else { - color: #999; - } - } - } + &.custom-search-icon { - .v-footer { - @if $theme == light { - background-color: #dfdfe5; - color: #767d83; - } - } - .bd { - @if $theme == dark { - &-r-1 { - border-right: 1px #373f45 solid; - } - } @else { - &-r-1 { - border-right: 1px #efefef solid; - } + fill:map-deep-get($config, + #{$theme}, + "v-icon-search" + ); + width: 14px; + height: 14px; } } @@ -541,7 +336,7 @@ a { border-radius: 8px; background-color: map-deep-get($config, #{$theme}, "v-box"); - + .v-box { + +.v-box { margin-top: 10px; } } @@ -555,328 +350,81 @@ 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 { - margin-top: 2px; - } - - .v-treeview-node__root + .v-treeview-node__children { - margin-top: 2px; - } - - & > .v-treeview-node { - & > .v-treeview-node__root { - &:before { - background-color: map-deep-get( - $config, - #{$theme}, - "v-treeview-node-root-backgroundColor" - ); - } - - & > .v-treeview-node__content { - .v-treeview-node__label { - color: map-deep-get( - $config, - #{$theme}, - "v-treeview-node-root-label-color" - ); - } - .v-icon { - color: map-deep-get( - $config, - #{$theme}, - "v-treeview-node-root-icon-color" - ); - } - } - - &:hover { - & > .v-treeview-node__content { - .v-treeview-node__label { - color: map-deep-get( - $config, - #{$theme}, - "v-treeview-node-root-label-active-color" - ); - } - .v-icon { - color: map-deep-get( - $config, - #{$theme}, - "v-treeview-node-root-icon-active-color" - ); - } - } - } - } - - & > .v-treeview-node__children { - & > .v-treeview-node { - & > .v-treeview-node__root { - &: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-color" - ); - } - .v-icon { - color: map-deep-get( - $config, - #{$theme}, - "v-treeview-icon-color" - ); - } - } - - &:not(.v-treeview-node--active):hover { - &:before { - background-color: map-deep-get( - $config, - #{$theme}, - "v-treeview-leaf-active-backgroundColor" - ); - } - - & > .v-treeview-node__content { - .v-treeview-node__label { - color: map-deep-get( - $config, - #{$theme}, - "v-treeview-leaf-active-color" - ); - } - .v-icon { - color: map-deep-get( - $config, - #{$theme}, - "v-treeview-leaf-active-color" - ); - } - } - } - } - - & > .v-treeview-node--active { - &: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-color" - ); - } - .v-icon { - color: map-deep-get( - $config, - #{$theme}, - "v-treeview-icon-active-color" - ); - } - } - } - - & > .v-treeview-node__children { - & .v-treeview-node { - & > .v-treeview-node__root { - &: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-color" - ); - } - .v-icon { - color: map-deep-get( - $config, - #{$theme}, - "v-treeview-icon-color" - ); - } - } - - &:not(.v-treeview-node--active):hover { - &:before { - background-color: map-deep-get( - $config, - #{$theme}, - "v-treeview-leaf-active-backgroundColor" - ); - } - - & > .v-treeview-node__content { - .v-treeview-node__label { - color: map-deep-get( - $config, - #{$theme}, - "v-treeview-leaf-active-color" - ); - } - .v-icon { - color: map-deep-get( - $config, - #{$theme}, - "v-treeview-leaf-active-color" - ); - } - } - } - } - - & > .v-treeview-node--active { - &:before { - opacity: 0 !important; - } - - & > .v-treeview-node__content { - .v-treeview-node__label { - color: map-deep-get( - $config, - #{$theme}, - "v-treeview-node-label-active-color" - ); - } - .v-icon { - color: map-deep-get( - $config, - #{$theme}, - "v-treeview-node-label-active-color" - ); - } - } - } - } - } - - &[aria-expanded="true"] { - & .v-treeview-node__root > .v-treeview-node__content { - .v-treeview-node__label { - color: map-deep-get( - $config, - #{$theme}, - "v-treeview-node-label-active-color" - ); - } - .v-icon { - color: map-deep-get( - $config, - #{$theme}, - "v-treeview-icon-active-color" - ); - } - } - } - } - } - - &[aria-expanded="true"] { - & .v-treeview-node__root > .v-treeview-node__content { - .v-treeview-node__label { - color: map-deep-get( - $config, - #{$theme}, - "v-treeview-node-root-label-active-color" - ); - } - .v-icon { - color: map-deep-get( - $config, - #{$theme}, - "v-treeview-node-root-icon-active-color" - ); - } - } - } - } - } - .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"); + border-bottom: 1px solid map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color"); + border-top: 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) { - color: map-deep-get($color, "week", "sun"); + // color: map-deep-get($config, + // #{$theme}, + // "v-calendar-is-sun" + // ); + border-left: 1px solid map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color"); } - &:nth-of-type(7) { - color: map-deep-get($color, "week", "sat"); - } + // &:nth-of-type(7) { + // color: map-deep-get($config, + // #{$theme}, + // "v-calendar-is-sat" + // ); + // } } - > .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 { - color: map-deep-get($color, "week", "sun"); + color: map-deep-get($config, + #{$theme}, + "v-calendar-is-sun" + ); } &.weekday-1 { + .day-label, .day-hldyNm { - color: map-deep-get($color, "week", "sun"); + color: map-deep-get($config, + #{$theme}, + "v-calendar-is-sun" + ); } + + border-left: 1px solid map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color"); } + &.weekday-7 { + .day-label, .day-hldyNm { - color: map-deep-get($color, "week", "sat"); + color: map-deep-get($config, + #{$theme}, + "v-calendar-is-sat" + ); } } &.is-today { - > div { - background-color: map-deep-get( - $config, + >div { + background-color: map-deep-get($config, #{$theme}, "v-calendar-is-today-background-color" ); @@ -888,14 +436,13 @@ 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" ); .day-label { - color: map-deep-get($config, #{$theme}, "non-activate"); + color: map-deep-get($config, #{$theme}, "card-text-title-color"); } } } @@ -907,6 +454,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 +462,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 +472,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 +496,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 +505,7 @@ a { .tui-calendar, .tui-calendar-btn { - background-color: map-deep-get( - $config, + background-color: map-deep-get($config, #{$theme}, "tui-datepicker-backgroundColor" ); @@ -984,11 +518,14 @@ a { } .tui-calendar { + &.tui-calendar-year, &.tui-calendar-month { + & th, & td { height: 48px; + color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color"); } } @@ -999,8 +536,7 @@ a { &-title { font-size: 0.875rem; - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color" ); @@ -1008,13 +544,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 +574,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 +592,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,19 +614,24 @@ a { &-body-header { th { font-size: 0.875rem; - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color" ); } th.tui-sun { - color: map-deep-get($color, "week", "sun"); + color: map-deep-get($config, + #{$theme}, + "v-calendar-is-sun" + ); } th.tui-sat { - color: map-deep-get($color, "week", "sat"); + color: map-deep-get($config, + #{$theme}, + "v-calendar-is-sat" + ); } } @@ -1096,31 +640,33 @@ a { td { font-size: 0.875rem; - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color" ); } td.tui-calendar-sun { - color: map-deep-get($color, "week", "sun"); + color: map-deep-get($config, + #{$theme}, + "v-calendar-is-sun" + ); } td.tui-calendar-sat { - color: map-deep-get($color, "week", "sat"); + color: map-deep-get($config, + #{$theme}, + "v-calendar-is-sat" + ); } } } .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 +679,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,38 +699,47 @@ a { } .v-list { - background-color: map-deep-get( - $config, - #{$theme}, - "tui-datepicker-backgroundColor" - ); - border: 1px - solid - map-deep-get($config, #{$theme}, "tui-datepicker-border-color"); - border-radius: 4px; - - &-item--active { - &:before { - opacity: 0; + background-color: map-deep-get($config, + #{$theme}, + "tui-datepicker-backgroundColor" + ); + border: 1px solid map-deep-get($config, #{$theme}, "tui-datepicker-border-color"); + border-radius: 4px; + padding: 4px; + + &-item--active { + border-radius: 4px; + &:before { + opacity: 0; + } + + .v-list-item__title { + color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color"); } + } + + &.v-select-list{ + >.v-list-item { + margin-bottom: 4px; + .anticon { + &.anticon-check { + display: none; + } + } + &[aria-selected="true"] { + border-radius: 8px; + background-color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-bg"); + .anticon { + &.anticon-check { + display: block; + color: map-deep-get($config, #{$theme}, "v-icon-blue"); + } + } + } + } + } - .v-list-item__content { - background-color: currentColor; - } - - .v-list-item__title { - color: map-deep-get( - $config, - #{$theme}, - "tui-datepicker-calendar-color" - ); - - @if $theme == light { - color: #fff !important; - } - } - } - } + } .theme--white { .toastui-editor-contents { @@ -1198,34 +749,27 @@ a { } } - .toastui-editor-contents { - * { - 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; - } - } - } - } + // .toastui-editor-contents { + // * { + // color: map-deep-get($config, + // #{$theme}, + // "tui-editor-contents-color" + // ) !important; + // } + // } .lnb-logo { color: map-deep-get($config, #{$theme}, "v-dialog-card-text-color"); font-size: 2rem; font-weight: bold; padding-left: 8px; + margin-top: 2px; + + img { + width: 139px; + } } + .login-logo { color: map-deep-get($config, #{$theme}, "v-dialog-card-text-color"); font-size: 1.5rem; @@ -1241,13 +785,11 @@ a { min-height: 30px; } - .v-list-item__title { - color: #fff; - - &:hover { - color: #46c0ff; - } + .v-btn { + background-color: transparent !important; + color: map-deep-get($config, #{$theme}, "btn-header-select-color") !important; } + } [hover-tooltip] { @@ -1255,10 +797,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 +820,7 @@ a { color: #ffffff; z-index: 1; } - + &::after { content: ''; position: absolute; @@ -1296,19 +838,20 @@ 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..0466fdc 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,24 @@ @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; } } + + .custom-action-btn{ + height: 24px; + width: 24px; + font-size: 12px; + } + .v-btn { - background-color: map-deep-get( - $config, + background-color: map-deep-get($config, #{$theme}, "v-btn-backgroundColor" ); @@ -59,8 +81,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 +92,110 @@ } } } + + .basic-button { + color: map-deep-get($config, #{$theme}, "basic-button-color"); + background: map-deep-get($config, #{$theme}, "basic-button-background"); + } + + .searchFilter { + .search-button { + height: 40px; + 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-outlined { + color:map-deep-get($config, #{$theme}, "ant-btn-default-color"); + border:1px solid map-deep-get($config, #{$theme}, "ant-btn-default-border-outlined"); + background-color: transparent; + } + + &.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-background-ghost { + color:map-deep-get($config, #{$theme}, "ant-btn-primary-bg"); + } + } + + &.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-popup-default { + background:map-deep-get($config, #{$theme}, "ant-btn-popup-bg"); + color:map-deep-get($config, #{$theme}, "ant-btn-popup-color"); + border: 1px solid map-deep-get($config, #{$theme}, "ant-btn-popup-border"); + } + + &.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; + } + } + + &.expand-btn { + .v-icon { + color: map-deep-get($config, #{$theme}, "basic-button-color"); + + svg { + fill: map-deep-get($config, #{$theme}, "basic-button-color"); + } + } + } + } } } + +.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; + } +} + +.ant-btn { + &.expand-btn { + span { + &.v-icon { + margin-right: 8px; + } + } + } +} \ 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/editor.scss b/assets/scss/common/editor.scss new file mode 100644 index 0000000..a12aba6 --- /dev/null +++ b/assets/scss/common/editor.scss @@ -0,0 +1,474 @@ +@charset "utf-8"; +.toastui-editor-dark .toastui-editor-defaultUI { + border-color: #424242; + color: #eee; +} + +.toastui-editor-dark .toastui-editor-md-container, +.toastui-editor-dark .toastui-editor-ww-container { + background-color: #212224; +} + +.toastui-editor-dark .toastui-editor-defaultUI-toolbar { + background-color: #212224; + border-bottom-color: #303238; +} + +.toastui-editor-dark .toastui-editor-toolbar-icons { + background-position-y: -49px; + border-color: #232428; +} + +.toastui-editor-dark .toastui-editor-toolbar-icons:not(:disabled):hover { + background-color: #36383f; + border-color: #36383f; +} + +.toastui-editor-dark .toastui-editor-toolbar-divider { + background-color: #303238; +} + +.toastui-editor-dark .toastui-editor-tooltip { + background-color: #535662; +} + +.toastui-editor-dark .toastui-editor-tooltip .arrow { + background-color: #535662; +} + +.toastui-editor-dark .toastui-editor-defaultUI-toolbar .scroll-sync::before { + color: #8f939f; +} + +.toastui-editor-dark .toastui-editor-defaultUI-toolbar .scroll-sync.active::before { + color: #67ccff; +} + +.toastui-editor-dark .toastui-editor-defaultUI-toolbar .switch { + background-color: #2b4455; +} + +.toastui-editor-dark .toastui-editor-defaultUI-toolbar input:checked + .switch { + background-color: #2b4455; +} + +.toastui-editor-dark .toastui-editor-defaultUI-toolbar .switch::before { + background-color: #8f939f; +} + +.toastui-editor-dark .toastui-editor-defaultUI-toolbar input:checked + .switch::before { + background-color: #67ccff; +} + +.toastui-editor-dark .toastui-editor-main .toastui-editor-md-splitter { + background-color: #303238; +} + +.toastui-editor-dark .toastui-editor-mode-switch { + border-top-color: #424242; + background-color: #212224; +} + +.toastui-editor-dark .toastui-editor-mode-switch .tab-item { + border-color: #424242; + background-color: #212224; + color: #eee; +} + +.toastui-editor-dark .toastui-editor-mode-switch .tab-item.active { + border-top-color: #424242; + background-color: #212224; + color: #1677FF; +} + +.toastui-editor-dark .toastui-editor-popup, +.toastui-editor-dark .toastui-editor-context-menu { + background-color: #121212; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); + border-color: #494c56; +} + +.toastui-editor-dark .toastui-editor-popup-add-heading ul li:hover { + background-color: #36383f; +} + +.toastui-editor-dark .toastui-editor-popup-body label { + color: #9a9da3; +} + +.toastui-editor-dark .toastui-editor-popup-body input[type='text'] { + background-color: transparent; + color: #eee; + border-color: #303238; +} + +.toastui-editor-dark .toastui-editor-popup-body input[type='text']:focus { + outline-color: #67ccff; +} + +.toastui-editor-dark .toastui-editor-popup-body input[type='text'].disabled { + color: #969aa5; + border-color: #303238; + background-color: rgba(48, 50, 56, 0.4); +} + +.toastui-editor-dark .toastui-editor-popup-add-image .toastui-editor-tabs .tab-item { + border-bottom-color: #292e37; + color: #eee; +} + +.toastui-editor-dark .toastui-editor-popup-add-image .toastui-editor-tabs .tab-item:hover { + border-bottom-color: #3c424d; +} + +.toastui-editor-dark .toastui-editor-popup-add-image .toastui-editor-tabs .tab-item.active { + color: #67ccff; + border-bottom-color: #67ccff; +} + +.toastui-editor-dark .toastui-editor-popup-body .toastui-editor-file-name { + border-color: #303238; + color: #eee; +} + +.toastui-editor-dark .toastui-editor-popup-body .toastui-editor-file-select-button { + border-color: #303238; + background-color: #232428; + color: #eee; +} + +.toastui-editor-dark .toastui-editor-popup-body .toastui-editor-file-select-button:hover { + border-color: #494c56; +} + +.toastui-editor-dark.toastui-editor-defaultUI .toastui-editor-close-button { + color: #eee; + border-color: #303238; + background-color: #232428; +} + +.toastui-editor-dark.toastui-editor-defaultUI .toastui-editor-close-button:hover { + border-color: #494c56; +} + +.toastui-editor-dark.toastui-editor-defaultUI .toastui-editor-ok-button { + color: #121212; + background-color: #67ccff; +} + +.toastui-editor-dark.toastui-editor-defaultUI .toastui-editor-ok-button:hover { + color: #121212; + background-color: #32baff; +} + +.toastui-editor-dark .toastui-editor-popup-add-table .toastui-editor-table-cell { + border-color: #303238; + background-color: #121212; +} + +.toastui-editor-dark .toastui-editor-popup-add-table .toastui-editor-table-cell.header { + border-color: #303238; + background-color: #232428; +} + +.toastui-editor-dark .toastui-editor-popup-add-table .toastui-editor-table-selection-layer { + border-color: rgba(103, 204, 255, 0.4); + background-color: rgba(103, 204, 255, 0.1); +} + +.toastui-editor-dark .toastui-editor-popup-add-table .toastui-editor-table-description { + color: #eee +} + +.toastui-editor-dark .toastui-editor-md-tab-container { + background-color: #232428; + border-bottom-color: #303238; +} + +.toastui-editor-dark .toastui-editor-md-tab-container .tab-item { + border-color: #393b42; + background-color: #2d2f34; + color: #757a86; +} + +.toastui-editor-dark .toastui-editor-md-tab-container .tab-item.active { + border-bottom-color: #121212; + background-color: #121212; + color: #eee; +} + + +.toastui-editor-dark .toastui-editor-context-menu .menu-group { + border-bottom-color: #303238; + color: #eee; +} + +.toastui-editor-dark .toastui-editor-context-menu .menu-item span::before { + background-position-y: -126px; +} + +.toastui-editor-dark .toastui-editor-context-menu li:not(.disabled):hover { + background-color: #36383f; +} + +.toastui-editor-dark .toastui-editor-context-menu li.disabled { + color: #969aa5; +} + +.toastui-editor-dark .toastui-editor-dropdown-toolbar { + border-color: #494c56; + background-color: #232428; +} + +.toastui-editor-dark .ProseMirror, +.toastui-editor-dark .toastui-editor-contents p, +.toastui-editor-dark .toastui-editor-contents h1, +.toastui-editor-dark .toastui-editor-contents h2, +.toastui-editor-dark .toastui-editor-contents h3, +.toastui-editor-dark .toastui-editor-contents h4, +.toastui-editor-dark .toastui-editor-contents h5, +.toastui-editor-dark .toastui-editor-contents h6 { + color: #fff; +} + +.toastui-editor-dark .toastui-editor-contents h1, +.toastui-editor-dark .toastui-editor-contents h2 { + border-color: #fff; +} + +.toastui-editor-dark .toastui-editor-contents del { + color: #777980; +} + +.toastui-editor-dark .toastui-editor-contents blockquote { + border-color: #303135; +} + +.toastui-editor-dark .toastui-editor-contents blockquote p, +.toastui-editor-dark .toastui-editor-contents blockquote ul, +.toastui-editor-dark .toastui-editor-contents blockquote ol { + color: #777980; +} + +.toastui-editor-dark .toastui-editor-contents pre { + background-color: #232428; +} + +.toastui-editor-dark .toastui-editor-contents pre code { + background-color: transparent; + color: #fff; +} + +.toastui-editor-dark .toastui-editor-contents code { + color: #c1798b; + background-color: #35262a; +} + +.toastui-editor-dark .toastui-editor-contents div { + color: #fff; +} + +.toastui-editor-dark .toastui-editor-ww-code-block-language { + border-color: #303238; + background-color: #121212; +} + +.toastui-editor-dark .toastui-editor-ww-code-block-language input { + color: #fff; +} + +.toastui-editor-dark .toastui-editor-contents .toastui-editor-ww-code-block:after { + background-color: #232428; + border: 1px solid #393b42; + color: #eee; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuugiOydtOyWtF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzAgMzAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwIDMwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I2ZmZjt9Cjwvc3R5bGU+CjxnPgoJPGc+CgkJPGc+CgkJCTxnPgoJCQkJPGc+CgkJCQkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTE1LjUsMTIuNWwyLDJMMTIsMjBoLTJ2LTJMMTUuNSwxMi41eiBNMTgsMTBsMiwybC0xLjUsMS41bC0yLTJMMTgsMTB6Ii8+CgkJCQk8L2c+CgkJCTwvZz4KCQk8L2c+Cgk8L2c+CjwvZz4KPC9zdmc+Cg=='); +} + +.toastui-editor-dark .toastui-editor-contents .toastui-editor-custom-block-editor { + background: #392d31; + color: #fff; + border-color: #327491; +} + +.toastui-editor-dark .toastui-editor-custom-block.ProseMirror-selectednode .toastui-editor-custom-block-view { + color: #fff; + border-color: #327491; +} + +.toastui-editor-dark .toastui-editor-custom-block-view button { + background-color: #232428; + border-color: #393b42; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuugiOydtOyWtF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzAgMzAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwIDMwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I2ZmZjt9Cjwvc3R5bGU+CjxnPgoJPGc+CgkJPGc+CgkJCTxnPgoJCQkJPGc+CgkJCQkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTE1LjUsMTIuNWwyLDJMMTIsMjBoLTJ2LTJMMTUuNSwxMi41eiBNMTgsMTBsMiwybC0xLjUsMS41bC0yLTJMMTgsMTB6Ii8+CgkJCQk8L2c+CgkJCTwvZz4KCQk8L2c+Cgk8L2c+CjwvZz4KPC9zdmc+Cg=='); +} + +.toastui-editor-dark .toastui-editor-custom-block-view button:hover { + background-color: #232428; + border-color: #595c68; +} + +.toastui-editor-dark .toastui-editor-custom-block-view .info { + color: #65acca; +} + +.toastui-editor-dark .toastui-editor-contents table { + border-color: #303238; +} + +.toastui-editor-dark .toastui-editor-contents table th, +.toastui-editor-dark .toastui-editor-contents table td { + border-color: #303238; +} + +.toastui-editor-dark .toastui-editor-contents table th { + background-color: #3a3c42; +} + +.toastui-editor-dark .toastui-editor-contents table td, +.toastui-editor-dark .toastui-editor-contents table td p { + color: #fff; +} + +.toastui-editor-dark .toastui-editor-contents td.toastui-editor-cell-selected { + background-color: rgba(103, 204, 255, 0.5); +} + +.toastui-editor-dark .toastui-editor-contents th.toastui-editor-cell-selected { + background-color: rgba(103, 204, 255, 0.3); +} + +.toastui-editor-dark table.ProseMirror-selectednode { + outline-color: #67ccff; +} + +.toastui-editor-dark .html-block.ProseMirror-selectednode { + outline-color: #67ccff; +} + +.toastui-editor-dark .toastui-editor-contents ul, +.toastui-editor-dark .toastui-editor-contents menu, +.toastui-editor-dark .toastui-editor-contents ol, +.toastui-editor-dark .toastui-editor-contents dir { + color: #55575f; +} + +.toastui-editor-dark .toastui-editor-contents ul > li::before { + background-color: #55575f; +} + +.toastui-editor-dark .toastui-editor-contents hr { + border-color: #55575f; +} + +.toastui-editor-dark .toastui-editor-contents a { + color: #4b96e6; +} + +.toastui-editor-dark .toastui-editor-contents a:hover { + color: #1f70de; +} + +.toastui-editor-dark .toastui-editor-contents .image-link:hover::before { + border-color: #393b42; + background-color: #232428; + background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj4KICAgICAgICA8ZyBzdHJva2U9IiNFRUUiIHN0cm9rZS13aWR0aD0iMS41Ij4KICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICA8Zz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNy42NjUgMTUuMDdsLTEuODE5LS4wMDJjLTEuNDg2IDAtMi42OTItMS4yMjgtMi42OTItMi43NDR2LS4xOTJjMC0xLjUxNSAxLjIwNi0yLjc0NCAyLjY5Mi0yLjc0NGgzLjg0NmMxLjQ4NyAwIDIuNjkyIDEuMjI5IDIuNjkyIDIuNzQ0di4xOTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDQ1IC0xNzQzKSB0cmFuc2xhdGUoMTA0MCAxNzM4KSB0cmFuc2xhdGUoNSA1KSBzY2FsZSgxIC0xKSByb3RhdGUoNDUgMzcuMjkzIDApIi8+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEyLjMyNiA0LjkzNGwxLjgyMi4wMDJjMS40ODcgMCAyLjY5MyAxLjIyOCAyLjY5MyAyLjc0NHYuMTkyYzAgMS41MTUtMS4yMDYgMi43NDQtMi42OTMgMi43NDRoLTMuODQ1Yy0xLjQ4NyAwLTIuNjkyLTEuMjI5LTIuNjkyLTIuNzQ0VjcuNjgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDQ1IC0xNzQzKSB0cmFuc2xhdGUoMTA0MCAxNzM4KSB0cmFuc2xhdGUoNSA1KSBzY2FsZSgxIC0xKSByb3RhdGUoNDUgMzAuOTk2IDApIi8+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo='); + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08); +} + +.toastui-editor-dark .toastui-editor-contents .task-list-item::before { + background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgc3Ryb2tlPSIjNTU1NzVGIj4KICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAzMCAtMzE2KSB0cmFuc2xhdGUoNzg4IDE5MikgdHJhbnNsYXRlKDI0MiAxMjQpIj4KICAgICAgICAgICAgICAgICAgICA8cmVjdCB3aWR0aD0iMTciIGhlaWdodD0iMTciIHg9Ii41IiB5PSIuNSIgcng9IjIiLz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg=='); + background-color: transparent; +} + +.toastui-editor-dark .toastui-editor-contents .task-list-item.checked::before { + background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgZmlsbD0iIzRCOTZFNiI+CiAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE2IDBjMS4xMDUgMCAyIC44OTUgMiAydjE0YzAgMS4xMDUtLjg5NSAyLTIgMkgyYy0xLjEwNSAwLTItLjg5NS0yLTJWMkMwIC44OTUuODk1IDAgMiAwaDE0em0tMS43OTMgNS4yOTNjLS4zOS0uMzktMS4wMjQtLjM5LTEuNDE0IDBMNy41IDEwLjU4NSA1LjIwNyA4LjI5M2wtLjA5NC0uMDgzYy0uMzkyLS4zMDUtLjk2LS4yNzgtMS4zMi4wODMtLjM5LjM5LS4zOSAxLjAyNCAwIDEuNDE0bDMgMyAuMDk0LjA4M2MuMzkyLjMwNS45Ni4yNzggMS4zMi0uMDgzbDYtNiAuMDgzLS4wOTRjLjMwNS0uMzkyLjI3OC0uOTYtLjA4My0xLjMyeiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEwNTAgLTI5NikgdHJhbnNsYXRlKDc4OCAxOTIpIHRyYW5zbGF0ZSgyNjIgMTA0KSIvPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K'); +} + +.toastui-editor-dark .toastui-editor-md-delimiter, +.toastui-editor-dark .toastui-editor-md-code.toastui-editor-md-delimiter, +.toastui-editor-dark .toastui-editor-md-thematic-break, +.toastui-editor-dark .toastui-editor-md-link, +.toastui-editor-dark .toastui-editor-md-table, +.toastui-editor-dark .toastui-editor-md-block-quote { + color: #55575f; +} + +.toastui-editor-dark .toastui-editor-md-meta, +.toastui-editor-dark .toastui-editor-md-html { + color: #55575f; +} + +.toastui-editor-dark .toastui-editor-md-link.toastui-editor-md-link-url.toastui-editor-md-marked-text { + color: #777980; +} + +.toastui-editor-dark .toastui-editor-md-block-quote .toastui-editor-md-marked-text, +.toastui-editor-dark .toastui-editor-md-list-item .toastui-editor-md-meta { + color: #b3b5bc; +} + +.toastui-editor-dark .toastui-editor-md-link.toastui-editor-md-link-desc.toastui-editor-md-marked-text, +.toastui-editor-dark .toastui-editor-md-list-item-style.toastui-editor-md-list-item-odd { + color: #4b96e6; +} + +.toastui-editor-dark .toastui-editor-md-list-item-style.toastui-editor-md-list-item-even { + color: #ef6767; +} + +.toastui-editor-dark .toastui-editor-md-table .toastui-editor-md-table-cell { + color: #fff; +} + +.toastui-editor-dark .toastui-editor-md-code.toastui-editor-md-marked-text { + color: #c1798b; +} + +.toastui-editor-dark .toastui-editor-md-code { + background-color: #35262a; +} + +.toastui-editor-dark .toastui-editor-md-code-block-line-background { + background-color: #232428; +} + +.toastui-editor-dark .toastui-editor-md-code-block .toastui-editor-md-meta { + color: #aaa; +} + +.toastui-editor-dark .toastui-editor-md-custom-block { + color: #fff; +} + +.toastui-editor-dark .toastui-editor-md-custom-block-line-background { + background-color: #392d31; +} + +.toastui-editor-dark .toastui-editor-md-custom-block .toastui-editor-md-delimiter { + color: #327491; +} + +.toastui-editor-dark .toastui-editor-md-custom-block .toastui-editor-md-meta { + color: #65acca; +} + +.toastui-editor-dark .toastui-editor-contents .toastui-editor-md-preview-highlight::after { + background-color: rgba(255, 250, 193, 0.5); +} + +.toastui-editor-dark .toastui-editor-contents th.toastui-editor-md-preview-highlight, +.toastui-editor-dark .toastui-editor-contents td.toastui-editor-md-preview-highlight { + background-color: rgba(255, 250, 193, 0.5); +} + +.toastui-editor-dark .toastui-editor-contents th.toastui-editor-md-preview-highlight { + color: #fff; +} + +.toastui-editor-dark .toastui-editor-contents th.toastui-editor-md-preview-highlight, +.toastui-editor-dark .toastui-editor-contents td.toastui-editor-md-preview-highlight { + background-color: rgba(255, 250, 193, 0.25); +} + +.toastui-editor-dark .toastui-editor-contents .toastui-editor-md-preview-highlight::after { + background-color: rgba(255, 250, 193, 0.25); +} \ No newline at end of file diff --git a/assets/scss/common/grid.scss b/assets/scss/common/grid.scss index 8ebb753..3bb317a 100644 --- a/assets/scss/common/grid.scss +++ b/assets/scss/common/grid.scss @@ -10,57 +10,199 @@ &-container { width: 100%; border-radius: 10px; + + .tui-select-box-input { + p { + font-size: 14px; + font-family: inherit + } + } + } + &-content-area { width: 100%; - border: 0; + border: 0 !important; } - // &-body-container { - // width: 100% !important; - // } - - // &-table { - // width: 100% !important; - // } - - // &-lside-area .tui-grid-body-area { - // margin-right: -11px; - // } - &-lside-area .tui-grid-scrollbar-left-bottom { display: none; } + &-no-scroll-y { + .tui-grid-rside-area { + + .tui-grid-header-area, + .tui-grid-summary-area { + margin-right: 0 !important; + } + } + } + &-rside-area { + .tui-grid-header-area, .tui-grid-summary-area { - margin-right: $scrollbar-width; + margin-right: $scrollbar-width !important; } } &-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; + } + + + th[data-column-name="_checked"] { + padding-left: 0; + } + + + } + +.tui-grid-table { + + .tui-grid-cell-header, + .tui-grid-cell-has-input .tui-grid-cell-content { + padding: 8px; + } + + th[data-column-name="_checked"] { + &.tui-grid-cell-header { + padding-left: 0; + } + + } + + .tui-grid-cell { + input[type=checkbox] { + margin-top: 8px; + appearance: none; + -webkit-appearance: none; + width: 16px; + height: 16px; + border: 1px solid; + border-radius: 2px; + cursor: pointer; + position: relative; + + &:checked { + &::after { + content: ""; + position: absolute; + left: 5px; + top: 1px; + width: 5px; + height: 9px; + border: solid; + border-width: 0 2px 2px 0; + transform: rotate(45deg); + } + } + } + } +} + +.tui-grid-layer-editing { + input[type=checkbox] { + margin-top: 8px; + appearance: none; + -webkit-appearance: none; + width: 16px; + height: 16px; + border: 1px solid; + border-radius: 2px; + cursor: pointer; + position: relative; + + &:checked { + &::after { + content: ""; + position: absolute; + left: 5px; + top: 1px; + width: 5px; + height: 9px; + border: solid; + border-width: 0 2px 2px 0; + transform: rotate(45deg); + } + } + } +} + +.tui-grid-editor-select-box-layer { + min-width: 116px !important; + + .tui-select-box-input { + border-radius: 6px; + + .tui-select-box-icon { + width: 14px; + height: 14px; + + background-repeat: no-repeat; + background-size: contain; + margin-top: -20px; + } + } + + .tui-select-box-dropdown { + margin-top: 1px; + border-radius: 4px; + padding: 4px; + box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); + + + .tui-select-box-item { + font-size: 14px; + margin-bottom: 4px; + position: relative; + + &:before { + bottom: 0; + content: ''; + left: 0; + opacity: 0; + pointer-events: none; + position: absolute; + right: 0; + top: 0 + } + + &:hover { + &::before { + opacity: 0.04 + } + } + + } + } +} + .treeGrid { .tui-grid { &-header-area { @@ -73,41 +215,158 @@ } } } -.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-content-area { + .tui-grid-header-area { + height: auto !important; + } + } + + .grid-title { + font-weight: 600; + font-size: 16px; + line-height: 24px; + letter-spacing: 0; + color: map-deep-get($config, + #{$theme}, + "tui-grid-title-color" + ); + } + + .grid-toggle-section { + .tui-grid-rside-area { + .tui-grid-body-area { + height: auto !important; + + } + } + } + .tui-grid { - &-container, - &-summary-area { - & ::-webkit-scrollbar { + &-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" + ); + + input[type=checkbox] { + border-color: map-deep-get($config, + #{$theme}, + "ant-checkbox-border" + ); + background: map-deep-get($config, + #{$theme}, + "ant-checkbox-bg" + ); + + &:checked { + background-color: map-deep-get($config, + #{$theme}, + "ant-btn-primary-bg" + ); + border-color: map-deep-get($config, + #{$theme}, + "ant-btn-primary-bg" + ); + + &::after { + border-color: map-deep-get($config, + #{$theme}, + "ant-checkbox-bg" + ); + } + } + } + } + } + + &-border-line-right { + opacity: 0; + } + + &-body-container { + border-right: 0; + // position: relative; + width: auto !important; + + .tui-grid-table-container { + + // width: 100% !important; + .tui-grid-table { + // width: 100% !important; + // table-layout: fixed; + // th, td { + // &:last-child{ + // width: auto !important; + // } + // } + } + } + + .tui-grid-layer-editing { + border-color: map-deep-get($config, + #{$theme}, + "tui-grid-border-vertical-color" + ); + } + } + + &-summary-area, + &-container { + font-family: Inter; + + .tui-grid-cell { + &.tui-grid-cell-summary { + color: map-deep-get($config, + #{$theme}, + "tui-grid-cell-color" + ); + } + } + } + + &-body-area { + overflow: auto; + + &::-webkit-scrollbar { width: $scrollbar-width !important; height: $scrollbar-width !important; -webkit-appearance: initial; - background-color: map-deep-get( - $config, - #{$theme}, - "scrollbar-track" - ) !important; + background-color: rgba(0, 0, 0, 0) !important; border-radius: 3px !important; + // border-right: 1px solid; + // border-right-color: map-deep-get($config, #{$theme}, "tui-grid-cell-borderColor"); } - & ::-webkit-scrollbar-track { - background-color: map-deep-get( - $config, - #{$theme}, - "scrollbar-track" - ) !important; + &::-webkit-scrollbar-track { + background-color: rgba(0, 0, 0, 0) !important; } - & ::-webkit-scrollbar-thumb { - width: 50px !important; + &::-webkit-scrollbar-thumb { height: 50px !important; background-color: map-deep-get($config, #{$theme}, "scrollbar-thumb"); border-radius: 3px; + // width: 50px !important; + // background-color: rgba(0, 0, 0, 0); } } @@ -121,38 +380,42 @@ } &-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; + display: 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 { width: $scrollbar-width !important; height: $scrollbar-width !important; + border-color: map-deep-get($config, #{$theme}, "cardBackground"); + background-color: map-deep-get($config, #{$theme}, "cardBackground"); + box-sizing: border-box; // display: none !important; - border-color: map-deep-get($config, #{$theme}, "scrollbar-track"); - background-color: map-deep-get($config, #{$theme}, "scrollbar-track"); // border: none !important; // bottom: -1px; // right: -2px; - box-sizing: border-box; + // display: none; } &-scrollbar-frozen-border, @@ -162,25 +425,111 @@ border-color: transparent !important; } - &-body-area { - overflow: auto !important; - } - + &-body-area, &-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.row-selected { + .custom-radio { + background-color: map-deep-get($config, + #{$theme}, + "ant-btn-primary-color" + ); + + .radio-mark { + border-color: map-deep-get($config, + #{$theme}, + "arow-line-color" + ); + background-color: map-deep-get($config, + #{$theme}, + "arow-line-btn-bg-color" + ); + + &::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + height: 8px; + width: 8px; + border-radius: 50%; + background-color: map-deep-get($config, + #{$theme}, + "arow-line-color" + ); + } + } + } + } + + .tui-grid-cell-content { + + input[type='text'], + input[type='password'] { + border-color: map-deep-get($config, + #{$theme}, + "v-input-fieldset-color" + ); + background: map-deep-get($config, + #{$theme}, + "v-input-backgroundColor" + ); + border-radius: 4px; + color: map-deep-get($config, + #{$theme}, + "tui-grid-cell-color" + ); + } + + &.tui-grid-layer-editing { + background: transparent; + // background:map-deep-get($config, + // #{$theme}, + // "tui-grid-cell-insert-color" + // ); + } + + span { + &.custom-link { + color: map-deep-get($config, + #{$theme}, + "router-tab-item-active-color" + ); + } + } + } + } + + &-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 +538,36 @@ &-header-area, &-cell-header { - background-color: map-deep-get( - $config, + // font-family: inherit; + // font-style: Semi Bold; + font-weight: 600; + 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; + // margin-right: 0 !important; + background-color: map-deep-get($config, + #{$theme}, + "tui-grid-cell-backgroundColor" + ); + // width: 100% !important; + // .tui-grid-table { + // width: 100% !important; + // } } &-row-odd, @@ -209,9 +577,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 +588,33 @@ } } } + } &-cell { &.row-insert { - background-color: map-deep-get( - $config, + background-color: map-deep-get($config, #{$theme}, "tui-grid-cell-insert-color" - ); + ) !important; } + &.row-modify { - background-color: map-deep-get( - $config, + background-color: map-deep-get($config, #{$theme}, "tui-grid-cell-modify-color" - ); + ) !important; } + &.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 +623,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 +651,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 +669,7 @@ margin-right: 6px; top: 0; left: 0 !important; + i { margin-top: 0; } @@ -311,45 +678,59 @@ &-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"); } } } &-tree-button-expand { + z-index: 7; + .tui-grid-btn-tree { i { 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"); } } } } &-tree-button-collapse { + z-index: 7; + .tui-grid-btn-tree { i { 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"); } } } @@ -365,6 +746,185 @@ &-frozen-border { background-color: transparent; } + + &-layer-editing { + input[type=checkbox] { + border-color: map-deep-get($config, + #{$theme}, + "ant-checkbox-border" + ); + background: map-deep-get($config, + #{$theme}, + "ant-checkbox-bg" + ); + + &:checked { + background-color: map-deep-get($config, + #{$theme}, + "ant-btn-primary-bg" + ); + border-color: map-deep-get($config, + #{$theme}, + "ant-btn-primary-bg" + ); + + &::after { + border-color: map-deep-get($config, + #{$theme}, + "ant-checkbox-bg" + ); + } + } + } + + select { + &.selectbox { + background: map-deep-get($config, + #{$theme}, + "tui-grid-cell-backgroundColor" + ); + border-color:map-deep-get($config, + #{$theme}, + "v-input-fieldset-color" + ); + color: map-deep-get($config, + #{$theme}, + "tui-grid-cell-color" + ); + + .calendarOption { + background: map-deep-get($config, + #{$theme}, + "tui-grid-cell-backgroundColor" + ); + border-color:map-deep-get($config, + #{$theme}, + "v-input-fieldset-color" + ); + color: map-deep-get($config, + #{$theme}, + "tui-grid-cell-color" + ); + + &:hover { + background: #d9d9d9; + color: map-deep-get($config, + #{$theme}, + "tui-grid-cell-color" + ); + } + + &:checked { + background: #E6F4FF; + color: map-deep-get($config, + #{$theme}, + "tui-grid-cell-color" + ); + } + } + } + } + + } + } + + .tui-grid-editor-select-box-layer { + + .tui-select-box-input { + background: map-deep-get($config, + #{$theme}, + "tui-grid-cell-backgroundColor" + ); + border-color:map-deep-get($config, + #{$theme}, + "v-input-fieldset-color" + ); + color: map-deep-get($config, + #{$theme}, + "tui-grid-cell-color" + ); + + .tui-select-box-icon { + + @if $theme ==dark { + background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%2216%22%20viewBox%3D%220%200%2017%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22rgba(255%2C%20255%2C%20255%2C%200.45)%22%20d%3D%22M1.90728%203.65546L8.20371%2012.3358C8.43228%2012.6501%208.90014%2012.6501%209.12692%2012.3358L15.4251%203.65546C15.4406%203.63411%2015.4499%203.60889%2015.452%203.58259C15.454%203.55628%2015.4487%203.52993%2015.4367%203.50644C15.4247%203.48296%2015.4064%203.46326%2015.3839%203.44954C15.3613%203.43581%2015.3354%203.42859%2015.3091%203.42868H13.9698C13.8787%203.42868%2013.793%203.47332%2013.7394%203.54653L8.66621%2010.5394L3.593%203.54653C3.53942%203.47332%203.45371%203.42868%203.36264%203.42868H2.02335C1.90728%203.42868%201.83943%203.56082%201.90728%203.65546Z%22/%3E%3C/svg%3E"); + } + + @else { + background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%2216%22%20viewBox%3D%220%200%2017%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20fill%3D%22rgba(0%2C%200%2C%200%2C%200.45)%22%20d%3D%22M1.90728%203.65546L8.20371%2012.3358C8.43228%2012.6501%208.90014%2012.6501%209.12692%2012.3358L15.4251%203.65546C15.4406%203.63411%2015.4499%203.60889%2015.452%203.58259C15.454%203.55628%2015.4487%203.52993%2015.4367%203.50644C15.4247%203.48296%2015.4064%203.46326%2015.3839%203.44954C15.3613%203.43581%2015.3354%203.42859%2015.3091%203.42868H13.9698C13.8787%203.42868%2013.793%203.47332%2013.7394%203.54653L8.66621%2010.5394L3.593%203.54653C3.53942%203.47332%203.45371%203.42868%203.36264%203.42868H2.02335C1.90728%203.42868%201.83943%203.56082%201.90728%203.65546Z%22/%3E%3C/svg%3E"); + } + } + + } + + .tui-select-box-dropdown { + background-color: map-deep-get($config, + #{$theme}, + "tui-datepicker-backgroundColor" + ); + border: 1px solid map-deep-get($config, #{$theme}, "tui-datepicker-border-color"); + color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color"); + + .tui-select-box-item { + + color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color"); + + &:before { + opacity: map-deep-get($config, + #{$theme}, + "selected-bg-opacity" + ); + } + } + + + .tui-select-box-highlight { + background: none !important; + + &:before { + background: map-deep-get($config, + #{$theme}, + "tui-grid-cell-color" + ); + opacity: map-deep-get($config, + #{$theme}, + "highlighted-bg-opacity" + ); + } + + } + + .tui-select-box-selected { + background: map-deep-get($config, + #{$theme}, + "v-treeview-node-label-active-bg" + ); + color: map-deep-get($config, + #{$theme}, + "tui-grid-cell-color" + ); + + &:before { + // opacity: map-deep-get($config, + // #{$theme}, + // "selected-bg-opacity" + // ); + background: map-deep-get($config, + #{$theme}, + "ant-btn-primary-bg" + ) !important; + + + opacity: map-deep-get($config, + #{$theme}, + "selected-bg-opacity" + ) !important; + + } + + } + + } } [class*="tui-grid-tree-wrapper"] { @@ -373,4 +933,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..8e7bf76 100644 --- a/assets/scss/common/input.scss +++ b/assets/scss/common/input.scss @@ -1,40 +1,89 @@ .v-select__custom { - &.v-text-field.v-text-field--solo:not(.v-text-field--solo-flat) - > .v-input__control - > .v-input__slot { + padding: 0.125rem; + + &.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-select-list { + padding: 0 1rem; } } + .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 +94,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 +117,7 @@ margin-top: 0; padding-top: 0; } + .v-input__slot { overflow: hidden; position: relative; @@ -79,23 +130,31 @@ 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; + &.v-text-field--outlined { + fieldset { + top: -4px + } + } } .v-input__append-inner { @@ -104,25 +163,166 @@ } } +.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: 0; + margin: 5px; + font-size: 16px; +} + +.custom-radio input[type="radio"] { + position: absolute; + opacity: 0; + cursor: pointer; +} + +/* Custom radio appearance */ +.radio-mark { + position: absolute; + left: -8px; + top: 50%; + transform: translateY(-50%); + height: 14px; + width: 14px; + // background-color: white; + border: 1px 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; +} + +.ant-checkbox { + .ant-checkbox-inner { + border-radius: 4px + } +} + +input[type="checkbox"] { + width: 16px; + height: 16px +} + @each $theme in dark, light { @include theme($theme); + .v-application.#{$theme}-mode { + + .ant-checkbox-wrapper { + .ant-checkbox { + .ant-checkbox-inner { + background-color: map-deep-get($config, #{$theme}, "ant-checkbox-bg"); // background for unchecked checkbox + border-color: map-deep-get($config, #{$theme}, "ant-checkbox-border"); + } + } + + .ant-checkbox-checked { + .ant-checkbox-inner { + background: map-deep-get($config, #{$theme}, "ant-btn-primary-bg"); // background for checked checkbox + border-color:map-deep-get($config, #{$theme}, "ant-btn-primary-bg"); + color:map-deep-get($config, #{$theme}, "ant-btn-primary-color"); + + &.ant-checkbox-inner::after { + border-color: map-deep-get($config, #{$theme}, "ant-btn-primary-color"); + } + } + } + } + .ant-checkbox-wrapper-disabled { + .ant-checkbox-inner { + &.ant-checkbox-inner::after { + border-color: map-deep-get($config, #{$theme}, "ant-checkbox-disabled-color") !important; + } + } + } + + .v-input-popup__custom { + .v-input__slot { + padding-left: 12px; + padding-right: 12px; + border: 1px solid map-deep-get($config, + #{$theme}, + "v-input-popup-password-border" + ); + } + } + + .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 +330,7 @@ &:hover { fieldset { - color: map-deep-get( - $config, + color: map-deep-get($config, #{$theme}, "v-input-fieldset-hover-color" ) !important; @@ -144,15 +343,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 +359,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 +382,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,12 +410,31 @@ .v-label { color: map-deep-get($config, #{$theme}, "non-activate"); } + &.v-item--active { .v-label { color: map-deep-get($config, #{$theme}, "activate"); } } } + + .radio-mark { + background-color: map-deep-get($config, + #{$theme}, + "ant-btn-primary-color" + ); + border-color: map-deep-get($config, + #{$theme}, + "v-input-textarea-border" + ); + } + + input[type="checkbox"] { + accent-color: map-deep-get($config, + #{$theme}, + "ant-btn-primary-bg" + ); + } } .v-radio { @@ -241,17 +459,28 @@ .v-input--checkbox { .v-icon { - @if $theme == dark { + transform: none; + + &.mdi:before { + font-size: 20px; + } + + @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/pagination.scss b/assets/scss/common/pagination.scss new file mode 100644 index 0000000..423503a --- /dev/null +++ b/assets/scss/common/pagination.scss @@ -0,0 +1,62 @@ +@each $theme in dark, light { + + // @include theme($theme); + .v-application.#{$theme}-mode { + .pagination-wrapper { + display: flex; + justify-content: center; + align-items: center; + padding: 12px 0; + margin-top: 10px; + } + + .ant-pagination-disabled { + color: map-deep-get($config, #{$theme}, "paging-disable") !important;; + cursor: not-allowed !important; + pointer-events: none; /* disables hover and click */ + background-color: transparent; + } + + .ant-pagination-disabled:hover { + color: map-deep-get($config, #{$theme}, "paging-disable") !important;; + background-color: transparent !important; + } + + .ant-pagination-item, + .ant-pagination-prev, + .ant-pagination-next { + // border: none !important; + // box-shadow: none !important; + background-color: map-deep-get($config, #{$theme}, "paging-background") !important; + color: map-deep-get($config, #{$theme}, "paging-text"); + border: none; + + .ant-pagination-item-link { + border: none; + background-color: map-deep-get($config, #{$theme}, "paging-background") !important; + } + } + + .ant-pagination-item-active { + border: 1px solid #1890ff !important; + color: #1890ff !important + } + + .ant-pagination-options-size-changer { + .ant-select-selection { + 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; + } + + .ant-select-arrow { + color: map-deep-get($config, #{$theme}, "paging-text") !important; + } + + .ant-select-selection__rendered { + margin-right: 30px; + } + } + + } +} \ No newline at end of file diff --git a/assets/scss/common/tabs.scss b/assets/scss/common/tabs.scss index e48cea4..69eb549 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..535a3be 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,29 @@ } .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-7 { + font-size: 0.875rem !important; + font-weight: 400 !important; + line-height: 22px !important; +} + .custom-title-8 { font-size: 0.75rem !important; font-weight: 700 !important; @@ -66,15 +82,15 @@ .custom-text-2 { opacity: 0.6; - font-family: SpoqaHanSansNeo; font-size: 14px; - font-weight: normal; - font-stretch: normal; - font-style: normal; line-height: 2.17; - letter-spacing: normal; - text-align: right; - color: #fff; + // font-weight: normal; + // font-stretch: normal; + // font-style: normal; + // letter-spacing: normal; + // text-align: right; + // color: #fff; + // font-family: SpoqaHanSansNeo; } .text-color--white-0 { @@ -94,5 +110,32 @@ .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"); + } + + + .custom-subtitle-tab { + font-size: 1.25rem !important; + font-weight: 600 !important; + line-height: 1.25 !important; + color: map-deep-get($config, #{$theme}, "subtitle-tab"); + } + + .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..651ceaa --- /dev/null +++ b/assets/scss/datepicker.scss @@ -0,0 +1,92 @@ +@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: 32px; + color: map-deep-get($config, #{$theme}, "v-input-fieldset-color") !important; + border-color: currentColor; + // border-color: map-deep-get($config, #{$theme}, "tui-datepicker-border-color"); + + &:hover { + border-color: map-deep-get($config, #{$theme}, "v-input-fieldset-hover-color" ) !important; + } + &:has(.v-input--is-focused){ + border-width: 2px; + } + + &.datepicker-large { + height: 40px; + } + + .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-icon { + color: map-deep-get($config, #{$theme}, "v-icon-chevron-down") !important; + } + } + + .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/layout.scss b/assets/scss/layout.scss new file mode 100644 index 0000000..a008ef5 --- /dev/null +++ b/assets/scss/layout.scss @@ -0,0 +1,515 @@ +.loading-container { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + z-index: 9999; + background-color: rgba(0, 0, 0, 0.4); + //box-shadow: rgba(68, 67, 67, 0.9) 0 0 0 9999px; +} + +.loading-img { + width: 64px; + height: 64px; + animation: spin 3s linear infinite; +} + +@keyframes spin { + 100% { + transform: rotate(360deg); + } +} + +::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; + background-color: transparent !important; + } + + .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"); + } + } + + } + } + + } + + } + } + } + } + + .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__item { + background-color: map-deep-get($config, #{$theme}, "router-tab-item"); + border-color: map-deep-get($config, #{$theme}, "router-tab-item"); + color: map-deep-get($config, #{$theme}, "router-tab-item-color"); + + &:not(.is-active) { + &:hover { + &>span { + color: map-deep-get($config, + #{$theme}, + "router-tab-item-hover-color" + ); + } + } + } + + .v-icon { + color: map-deep-get($config, #{$theme}, "router-tab-item-icon-color"); + } + + &.is-active { + background-color: map-deep-get($config, + #{$theme}, + "router-tab-item-active" + ); + border-color: map-deep-get($config, + #{$theme}, + "router-tab-item-active-color" + ) !important; + color: map-deep-get($config, + #{$theme}, + "router-tab-item-active-color" + ); + + .v-icon { + color: map-deep-get($config, + #{$theme}, + "router-tab-item-icon-active-color" + ); + } + + } + } + + .router-tab__slot-end { + .v-btn { + background-color: map-deep-get($config, + #{$theme}, + "router-tab-slot-end-button-backgroundColor" + ); + box-shadow: none; + } + } + } + + } + } +} diff --git a/assets/scss/theme.scss b/assets/scss/theme.scss index 51fcc95..062990b 100644 --- a/assets/scss/theme.scss +++ b/assets/scss/theme.scss @@ -1,10 +1,3 @@ -// @import './var.scss'; -// @import './functions.scss'; -// @import './mixin.scss'; - - - - // @each $theme in dark, light{ // @include theme($theme); // .v-application.#{$theme}-mode{ diff --git a/assets/scss/var.scss b/assets/scss/var.scss index ec8fd14..af27344 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,96 +25,101 @@ $--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": #FF4D4F, + "sat": #597EF7) ); $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-root-backgroundColor: #212224, + v-treeview-node-root-label-color: #FFFFFFD9, + v-treeview-node-root-label-active-color: #FFFFFFD9, + v-treeview-node-root-icon-color: #FFFFFFD9, + v-treeview-node-root-icon-active-color: #FFFFFFD9, + // 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-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-cell-color: #fff, - tui-grid-cell-insert-color: #13636c, - tui-grid-cell-selected-color: #1a4e87, - tui-grid-cell-modify-color: #13636c, - tui-grid-cell-removed-color: #f6637b, + 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: #FFFFFF0A, + v-calendar-weekday-color: #FFFFFFD9, + v-calendar-weekday-border-color: #FFFFFF0F, + v-calendar-day-color: #FFFFFFD9, + v-calendar-day-in-not-month-color: #FFFFFF14, + v-calendar-is-today-background-color: #0A224F, + v-calendar-is-sat: #263EA0, + v-calendar-is-sun:#A61D24, + tui-grid-title-color: #FFFFFFD9, + tui-grid-header-backgroundColor: #2a2b2d, + tui-grid-header-color: #FFFFFFD9, + tui-grid-border-horziontal-color: #212224, + tui-grid-border-vertical-color: #FFFFFF0F, + tui-grid-cell-backgroundColor: #212224, + tui-grid-cell-color: #FFFFFFD9, + tui-grid-cell-insert-color: #2B2111, + tui-grid-cell-selected-color: #0A224F, + tui-grid-cell-modify-color: #2B2111, + tui-grid-cell-removed-color: #2A1215, 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, @@ -122,11 +127,72 @@ $config: ( 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-popup-password-border: #424242, + 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, + ant-btn-default-border-outlined:#424242, + btn-header-select-bg: #1F1F1F, + btn-header-select-color:#FFFFFFD9, + subtitle-tab: #FFFFFFA6, + v-header-border: #424242, + v-chart-border: #424242, + v-sidebar-border: #303030, + ant-checkbox-bg: #212224, + ant-checkbox-border: #424242, + ant-btn-popup-bg: #212224, + ant-btn-popup-color: #FFFFFFD9, + ant-btn-popup-border: #424242, + paging-background: #212224, + paging-text: #FFFFFFD9, + paging-disable: #FFFFFF40, + icon-datepicker-color: #FFFFFF73, + selected-bg-opacity: 0.32, + highlighted-bg-opacity: 0.08, + ant-checkbox-disabled-bg: #FFFFFF14, + ant-checkbox-disabled-border: #424242, + ant-checkbox-disabled-color: #FFFFFF40, ), - 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,67 +203,80 @@ $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-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-root-backgroundColor: #FFFFFF, + v-treeview-node-root-label-color: #000000E0, + v-treeview-node-root-label-active-color: #000000E0, + v-treeview-node-root-icon-color: #000000E0, + v-treeview-node-root-icon-active-color: #000000E0, + // 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-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, + 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: #00000005, + v-calendar-weekday-color: #000000E0, + v-calendar-weekday-border-color: #0000000F, + v-calendar-day-color: #000000E0, + v-calendar-day-in-not-month-color: #0000000A, + v-calendar-is-today-background-color: #E6F4FF, + v-calendar-is-sat: #597EF7, + v-calendar-is-sun:#FF4D4F, + tui-grid-title-color: #000000E0, + 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-insert-color: #13636c, - tui-grid-cell-selected-color: #ecf2fa, - tui-grid-cell-modify-color: #e6f5f7, - tui-grid-cell-removed-color: #fddde1, + tui-grid-cell-color: #000000E0, + tui-grid-cell-insert-color: #FFFBE6, + tui-grid-cell-selected-color: #E6F4FF, + tui-grid-cell-modify-color: #FFFBE6, + tui-grid-cell-removed-color: #FFF1F0, 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, @@ -205,6 +284,66 @@ $config: ( 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-popup-password-border: #D9D9D9, + 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, + ant-btn-default-border-outlined:#D9D9D9, + btn-header-select-color:#1F1F1F, + btn-header-select-bg:#FFFFFF, + subtitle-tab: #000000A6, + v-header-border: #D9D9D9, + v-chart-border: #D9D9D9, + v-sidebar-border: #F0F0F0, + ant-checkbox-bg: #FFFFFF, + ant-checkbox-border: #D9D9D9, + ant-btn-popup-bg: #FFFFFF, + ant-btn-popup-color: #000000E0, + ant-btn-popup-border: #D9D9D9, + paging-background: #FFFFFF, + paging-text: #000000E0, + paging-disable: #00000040, + icon-datepicker-color: #00000073, + selected-bg-opacity: 0.16, + highlighted-bg-opacity: 0.04, + ant-checkbox-disabled-bg: #0000000A, + ant-checkbox-disabled-border: #D9D9D9, + ant-checkbox-disabled-color: #00000040, + ), +); \ 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..1ce93e6 100644 --- a/components/common/Datepicker.vue +++ b/components/common/Datepicker.vue @@ -2,14 +2,14 @@ -
+
-