1294 lines
29 KiB
SCSS
1294 lines
29 KiB
SCSS
// 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";
|
|
@import "./common/pagination.scss";
|
|
@import "./common/editor.scss";
|
|
|
|
|
|
html,
|
|
body {
|
|
// overflow: auto;
|
|
}
|
|
|
|
a {
|
|
color: inherit !important;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.col-grp {
|
|
>.col {
|
|
padding: 7px 0 !important;
|
|
}
|
|
}
|
|
|
|
.searchFilter {
|
|
&.v-card {
|
|
padding: 16px (16px - ($column-spacer / 2)) !important;
|
|
|
|
&>.row {
|
|
&>[class*="col-"] {
|
|
padding: 0 ($column-spacer / 2);
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
min-height: 100vh;
|
|
|
|
&>div {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.v-main,
|
|
.v-main__wrap,
|
|
.container {
|
|
// height: 100%;
|
|
}
|
|
|
|
.v-main__wrap>.container {
|
|
background: #383f5d;
|
|
}
|
|
|
|
// router-tab header
|
|
.router-tab {
|
|
height: 100%;
|
|
|
|
&__header {
|
|
align-items: flex-end;
|
|
height: 52px;
|
|
margin: -5px -5px 0;
|
|
padding: 0 20px;
|
|
box-sizing: border-box;
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
&-page {
|
|
height: 100%;
|
|
}
|
|
|
|
& .router-tab__container {
|
|
overflow-y: auto;
|
|
height: calc(100vh - 105px);
|
|
max-height: calc(100vh - 105px);
|
|
padding: 20px;
|
|
}
|
|
|
|
.router-tab__slot-end {
|
|
align-self: center;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
>* {
|
|
flex: none;
|
|
margin-right: 6px;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.v-menu+.v-btn {
|
|
padding: 0 3px;
|
|
}
|
|
|
|
.v-btn {
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
|
|
.router-tab__nav {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.router-tab__scroll {
|
|
height: 46px;
|
|
}
|
|
|
|
.router-tab__item {
|
|
height: 46px;
|
|
padding: 0 !important;
|
|
|
|
&:first-child {
|
|
border-left: none
|
|
}
|
|
|
|
&>span {
|
|
font-size: 14px;
|
|
}
|
|
|
|
&.is-active {
|
|
border-bottom: 2px solid;
|
|
|
|
&>span {
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
&+.router-tab__item {
|
|
margin-left: 16px;
|
|
}
|
|
|
|
border:none;
|
|
}
|
|
|
|
}
|
|
|
|
// v-navigation-drawer (sidebar)
|
|
.v-navigation-drawer {
|
|
box-shadow: none; // 0 0 10px 0 rgba(0, 0, 0, 0.15);
|
|
|
|
&--fixed {
|
|
z-index: 20;
|
|
}
|
|
|
|
.home {
|
|
display: block;
|
|
line-height: 0;
|
|
}
|
|
|
|
&__border {
|
|
display: none;
|
|
}
|
|
|
|
&__append {
|
|
padding: 0 17px;
|
|
margin: 0 0 26px;
|
|
|
|
>p {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.v-treeview {
|
|
padding: 0 10px;
|
|
box-sizing: border-box;
|
|
|
|
.v-treeview-node__level {
|
|
width: 9px;
|
|
}
|
|
|
|
>.v-treeview-node {
|
|
margin-top: 10px;
|
|
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
>.v-treeview-node__root {
|
|
min-height: 44px !important;
|
|
}
|
|
}
|
|
|
|
.v-treeview-node {
|
|
.v-treeview-node__toggle {
|
|
display: none !important;
|
|
}
|
|
|
|
&>.v-treeview-node__root:before {
|
|
border-radius: 6px;
|
|
z-index: -1;
|
|
}
|
|
|
|
&>.v-treeview-node__root:hover:before {
|
|
opacity: 0 !important;
|
|
}
|
|
|
|
.v-treeview-node__children {
|
|
.v-treeview-node__label {
|
|
>button>span {
|
|
font-size: 0.875rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.v-treeview-node--click[aria-expanded="true"] {
|
|
&>.v-treeview-node__root:before {
|
|
opacity: 0 !important;
|
|
}
|
|
}
|
|
|
|
.v-treeview-node[aria-expanded="true"] {
|
|
&>.v-treeview-node__root>.v-treeview-node__content
|
|
>.v-treeview-node__label>button {
|
|
>.anticon,
|
|
>.v-icon.mdi-chevron-down {
|
|
transform: rotate(-180deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.v-treeview-node__label {
|
|
&>button {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
// justify-content: center;
|
|
}
|
|
|
|
& .anticon,
|
|
& .v-icon.mdi-chevron-down {
|
|
margin-left: auto;
|
|
animation-duration: 0.5s;
|
|
}
|
|
}
|
|
}
|
|
|
|
.v-treeview-node--active {
|
|
&:before {
|
|
opacity: 0 !important;
|
|
}
|
|
}
|
|
|
|
&.v-navigation-drawer--mini-variant {
|
|
.home {
|
|
display: none;
|
|
}
|
|
|
|
.v-treeview-node__content {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.v-treeview-node__content span:not(.v-icon),
|
|
.v-treeview-node__root>button,
|
|
.v-treeview-node__level,
|
|
.v-treeview-node__content .v-icon.mdi-chevron-down,
|
|
.v-treeview-node__content .anticon {
|
|
display: none;
|
|
}
|
|
|
|
.v-navigation-drawer__append {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.chart {
|
|
height: 100%;
|
|
|
|
&-title {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
&-info {
|
|
display: block;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.v-application--is-ltr .v-messages {
|
|
display: none;
|
|
}
|
|
|
|
.search-box {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&-label {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 0.875rem;
|
|
line-height: 1.25rem;
|
|
letter-spacing: 0.0178571429em;
|
|
white-space: nowrap;
|
|
color: rgba(0, 0, 0, 0.88);
|
|
}
|
|
}
|
|
|
|
.form-row {
|
|
|
|
.pt-0 {
|
|
.col {
|
|
padding-top: 0
|
|
}
|
|
}
|
|
}
|
|
|
|
.v-window__container,
|
|
.v-window__container>div {
|
|
height: 100%;
|
|
}
|
|
|
|
.v-banner {
|
|
.v-banner__wrapper {
|
|
border-bottom: none !important;
|
|
}
|
|
|
|
&--last {
|
|
.v-banner__wrapper {
|
|
border-bottom: none !important;
|
|
}
|
|
}
|
|
|
|
.v-chip {
|
|
padding: 0 5px;
|
|
}
|
|
}
|
|
|
|
.v-timeline {
|
|
.v-timeline-item {
|
|
line-height: 1;
|
|
}
|
|
|
|
.v-timeline-item__divider {
|
|
min-width: auto;
|
|
align-self: center;
|
|
}
|
|
|
|
.v-timeline-item__dot--small {
|
|
width: 6px;
|
|
height: 6px;
|
|
left: calc(50% - 3px);
|
|
}
|
|
|
|
.v-timeline-item__body {
|
|
max-width: none !important;
|
|
}
|
|
}
|
|
|
|
.v-application--is-ltr .v-timeline--dense:not(.v-timeline--reverse):before {
|
|
height: calc(100% - 30px);
|
|
top: 10px;
|
|
left: 22px !important;
|
|
line-height: 0;
|
|
}
|
|
|
|
.v-label {
|
|
font-size: 0.875rem !important;
|
|
}
|
|
|
|
@each $theme in dark, light {
|
|
@include theme($theme);
|
|
|
|
.v-application.#{$theme}-mode {
|
|
min-width: 1000px;
|
|
|
|
.icon-datepicker-color {
|
|
color: map-deep-get($config, #{$theme}, "icon-datepicker-color");
|
|
}
|
|
|
|
.head-logo {
|
|
gap: 8px;
|
|
}
|
|
|
|
.v-navigation-drawer {
|
|
background: map-deep-get($config, #{$theme}, "menu-bg-color");
|
|
}
|
|
|
|
.v-window__container {
|
|
background: map-deep-get($config, #{$theme}, "card-default-backgroundColor");
|
|
}
|
|
|
|
.search-box {
|
|
&-label {
|
|
color: map-deep-get($config, #{$theme}, "v-select-label-color");
|
|
}
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 4px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background-color: map-deep-get($config, #{$theme}, "scrollbar-track");
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
width: 4px;
|
|
border-radius: 3px;
|
|
background-color: map-deep-get($config, #{$theme}, "scrollbar-thumb");
|
|
background-clip: content-box;
|
|
}
|
|
|
|
.search-box-label {
|
|
color: map-deep-get($config, #{$theme}, "v-select-label-color");
|
|
}
|
|
|
|
.header {
|
|
background-color: map-deep-get($config, #{$theme}, "header-backgroud");
|
|
border-bottom: 1px solid map-deep-get($config, #{$theme}, "v-header-border");
|
|
}
|
|
|
|
.custom-chart{
|
|
border: 1px solid map-deep-get($config, #{$theme}, "v-chart-border");
|
|
}
|
|
|
|
.btn-header {
|
|
background-color: map-deep-get($config, #{$theme}, "v-btn-header-background");
|
|
border:1px solid map-deep-get($config, #{$theme}, "v-btn-header-border");
|
|
color: map-deep-get($config, #{$theme}, "v-btn-header-text");
|
|
}
|
|
|
|
.container--fluid {
|
|
background-color: map-deep-get($config, #{$theme}, "container-fluid");
|
|
|
|
.menu-container {
|
|
height:calc(100vh - 60px);
|
|
overflow-y: auto;
|
|
border-right: 1px solid map-deep-get($config, #{$theme}, "v-sidebar-border") ;
|
|
}
|
|
}
|
|
|
|
.v-icon {
|
|
&.icon-orange {
|
|
svg {
|
|
fill:map-deep-get($config,
|
|
#{$theme},
|
|
"v-icon-orange"
|
|
);
|
|
}
|
|
|
|
}
|
|
|
|
&.icon-blue {
|
|
svg {
|
|
fill:map-deep-get($config,
|
|
#{$theme},
|
|
"v-icon-blue"
|
|
);
|
|
}
|
|
|
|
}
|
|
|
|
|
|
&.custom-chevron-down {
|
|
|
|
fill:map-deep-get($config,
|
|
#{$theme},
|
|
"v-icon-chevron-down"
|
|
);
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
&.custom-search-icon {
|
|
|
|
fill:map-deep-get($config,
|
|
#{$theme},
|
|
"v-icon-search"
|
|
);
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
}
|
|
|
|
.router-tab {
|
|
.router-tab__header {
|
|
background-color: map-deep-get($config, #{$theme}, "router-header");
|
|
border-color: map-deep-get($config, #{$theme}, "router-header");
|
|
height: 46px;
|
|
z-index: 7;
|
|
max-width: calc(100vw - 290px);
|
|
}
|
|
|
|
.router-tab__container {
|
|
background-color: map-deep-get($config, #{$theme}, "router-container");
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.v-navigation-drawer__append {
|
|
>p {
|
|
color: map-deep-get($config, #{$theme}, "v-banner-border-color" ) !important;
|
|
}
|
|
}
|
|
|
|
.border-bottom-1 {
|
|
border-bottom: 1px solid map-deep-get($config, #{$theme}, "border-color");
|
|
}
|
|
|
|
.v-box {
|
|
min-width: 230px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 16px;
|
|
border-radius: 8px;
|
|
background-color: map-deep-get($config, #{$theme}, "v-box");
|
|
|
|
+.v-box {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
.v-box-widget {
|
|
min-height: 80px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 10px 8px;
|
|
border-radius: 8px;
|
|
background-color: map-deep-get($config, #{$theme}, "v-box");
|
|
|
|
+.v-box {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
.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 {
|
|
border-radius: 8px;
|
|
&:hover {
|
|
background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-border-color" );
|
|
}
|
|
.v-treeview-node__content {
|
|
.v-treeview-node__label {
|
|
color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
&[aria-expanded="true"]{
|
|
|
|
// Level 1
|
|
&>.v-treeview-node__root {
|
|
background-color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-bg" );
|
|
border: 1px solid map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
|
|
color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border");
|
|
|
|
&:before {
|
|
background-color: map-deep-get($config, #{$theme}, "v-treeview-node-subroot-backgroundColor");
|
|
}
|
|
|
|
.v-treeview-node__content {
|
|
.v-treeview-node__label {
|
|
color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border");
|
|
}
|
|
|
|
.v-icon:first-child,
|
|
.v-icon:first-child::before {
|
|
color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
|
|
}
|
|
}
|
|
}
|
|
|
|
&>.v-treeview-node__children {
|
|
// Level 2
|
|
.v-treeview-node__root {
|
|
color: map-deep-get($config, #{$theme}, "v-treeview-node-root-label-color");
|
|
&:hover {
|
|
background-color: map-deep-get($config, #{$theme}, "v-calendar-weekday-backgroundColor");
|
|
}
|
|
}
|
|
&>[aria-expanded="true"] >.v-treeview-node__root,
|
|
.v-treeview-node__root.v-treeview-node--active {
|
|
background-color: map-deep-get($config, #{$theme}, "v-calendar-day-in-not-month-color" );
|
|
.v-treeview-node__content {
|
|
.v-treeview-node__label {
|
|
color: map-deep-get($config, #{$theme}, "card-title-color");
|
|
}
|
|
|
|
.v-icon,
|
|
.v-icon::before,
|
|
.anticon {
|
|
color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
|
|
}
|
|
}
|
|
}
|
|
|
|
// Level 3
|
|
.v-treeview-node__children {
|
|
.v-treeview-node {
|
|
>.v-treeview-node__root {
|
|
.v-treeview-node__content {
|
|
.v-treeview-node__label {
|
|
color: map-deep-get($config, #{$theme}, "card-default-color");
|
|
}
|
|
}
|
|
|
|
*:hover,
|
|
:hover {
|
|
border-width: 0;
|
|
}
|
|
|
|
&:hover {
|
|
border: 1px solid map-deep-get($config, #{$theme}, "v-input-textarea-border");
|
|
border-radius: 8px;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
.v-treeview-node__content {
|
|
.v-treeview-node__label {
|
|
color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
&.v-treeview-node--active {
|
|
// color: map-deep-get($config, #{$theme}, "card-title-color");
|
|
background-color: rgba(0, 0, 0, 0);
|
|
.v-treeview-node__content {
|
|
.v-treeview-node__label {
|
|
color: map-deep-get($config, #{$theme}, "tui-grid-title-color");
|
|
}
|
|
|
|
.v-icon,
|
|
.v-icon::before,
|
|
.anticon {
|
|
color: map-deep-get($config, #{$theme}, "v-treeview-node-label-active-border" );
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.vc-weeks {
|
|
>.vc-weekday {
|
|
background-color: map-deep-get($config,
|
|
#{$theme},
|
|
"v-calendar-weekday-backgroundColor"
|
|
);
|
|
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($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($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");
|
|
|
|
.day-hldyNm,
|
|
.day-label.is-holiday {
|
|
color: map-deep-get($config,
|
|
#{$theme},
|
|
"v-calendar-is-sun"
|
|
);
|
|
}
|
|
|
|
&.weekday-1 {
|
|
|
|
.day-label,
|
|
.day-hldyNm {
|
|
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($config,
|
|
#{$theme},
|
|
"v-calendar-is-sat"
|
|
);
|
|
}
|
|
}
|
|
|
|
&.is-today {
|
|
>div {
|
|
background-color: map-deep-get($config,
|
|
#{$theme},
|
|
"v-calendar-is-today-background-color"
|
|
);
|
|
}
|
|
}
|
|
|
|
.day-label {
|
|
color: map-deep-get($config, #{$theme}, "v-calendar-day-color");
|
|
}
|
|
|
|
&.is-not-in-month {
|
|
background-color: map-deep-get($config,
|
|
#{$theme},
|
|
"v-calendar-day-in-not-month-color"
|
|
);
|
|
|
|
.day-label {
|
|
color: map-deep-get($config, #{$theme}, "card-text-title-color");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.v-dialog {
|
|
.v-toolbar {
|
|
.v-toolbar__title {
|
|
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");
|
|
}
|
|
}
|
|
}
|
|
|
|
#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;
|
|
}
|
|
|
|
.tui-datepicker .tui-is-selectable.tui-is-selected,
|
|
.tui-datepicker.tui-rangepicker .tui-is-selectable.tui-is-selected {
|
|
background-color: map-deep-get($config,
|
|
#{$theme},
|
|
"tui-datepicker-selected-color"
|
|
);
|
|
|
|
@if $theme ==light {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.tui-datepicker {
|
|
background-color: map-deep-get($config,
|
|
#{$theme},
|
|
"tui-datepicker-backgroundColor"
|
|
);
|
|
border-color: map-deep-get($config,
|
|
#{$theme},
|
|
"tui-datepicker-border-color"
|
|
);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
z-index: 100;
|
|
|
|
.tui-is-selectable:hover {
|
|
background-color: map-deep-get($config,
|
|
#{$theme},
|
|
"tui-datepicker-selectable-hover-color"
|
|
);
|
|
}
|
|
}
|
|
|
|
.tui-calendar,
|
|
.tui-calendar-btn {
|
|
background-color: map-deep-get($config,
|
|
#{$theme},
|
|
"tui-datepicker-backgroundColor"
|
|
);
|
|
}
|
|
|
|
.tui-datepicker-type-date,
|
|
.tui-calendar {
|
|
min-width: 180px !important;
|
|
max-width: 210px !important;
|
|
}
|
|
|
|
.tui-calendar {
|
|
|
|
&.tui-calendar-year,
|
|
&.tui-calendar-month {
|
|
|
|
& th,
|
|
& td {
|
|
height: 48px;
|
|
color: map-deep-get($config, #{$theme}, "tui-datepicker-calendar-color");
|
|
}
|
|
}
|
|
|
|
& th,
|
|
& td {
|
|
height: 32px;
|
|
}
|
|
|
|
&-title {
|
|
font-size: 0.875rem;
|
|
color: map-deep-get($config,
|
|
#{$theme},
|
|
"tui-datepicker-calendar-color"
|
|
);
|
|
line-height: 1.28;
|
|
}
|
|
|
|
&-header {
|
|
border-bottom: 1px solid map-deep-get($config,
|
|
#{$theme},
|
|
"tui-datepicker-border-color"
|
|
) !important;
|
|
}
|
|
|
|
&-header-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 32px;
|
|
padding: 4px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
&-btn {
|
|
width: 24px;
|
|
height: 24px;
|
|
position: relative;
|
|
}
|
|
|
|
.tui-calendar-btn-prev-month:after,
|
|
.tui-calendar-btn-prev-year:after {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
top: 0;
|
|
left: 0;
|
|
background-position: 0 0;
|
|
|
|
@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 {
|
|
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");
|
|
}
|
|
}
|
|
|
|
.tui-calendar-btn-next-month:after,
|
|
.tui-calendar-btn-next-year:after {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
top: 0;
|
|
right: 0;
|
|
background-position: 0 0;
|
|
|
|
@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 {
|
|
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 {
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
@else {
|
|
border-bottom: 1px solid #e6e6e6;
|
|
}
|
|
}
|
|
|
|
&-body-header {
|
|
th {
|
|
font-size: 0.875rem;
|
|
color: map-deep-get($config,
|
|
#{$theme},
|
|
"tui-datepicker-calendar-color"
|
|
);
|
|
}
|
|
|
|
th.tui-sun {
|
|
color: map-deep-get($config,
|
|
#{$theme},
|
|
"v-calendar-is-sun"
|
|
);
|
|
}
|
|
|
|
th.tui-sat {
|
|
color: map-deep-get($config,
|
|
#{$theme},
|
|
"v-calendar-is-sat"
|
|
);
|
|
}
|
|
}
|
|
|
|
&-week {
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
|
|
td {
|
|
font-size: 0.875rem;
|
|
color: map-deep-get($config,
|
|
#{$theme},
|
|
"tui-datepicker-calendar-color"
|
|
);
|
|
}
|
|
|
|
td.tui-calendar-sun {
|
|
color: map-deep-get($config,
|
|
#{$theme},
|
|
"v-calendar-is-sun"
|
|
);
|
|
}
|
|
|
|
td.tui-calendar-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;
|
|
text-align: center;
|
|
}
|
|
|
|
.tui-datepicker-footer .tui-timepicker {
|
|
width: 107px;
|
|
padding: 10px 0;
|
|
margin: 0 auto;
|
|
border-top: none;
|
|
|
|
&-row {
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
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,
|
|
#{$theme},
|
|
"tui-datepicker-backgroundColor"
|
|
);
|
|
font-size: 0.875rem;
|
|
color: map-deep-get($config,
|
|
#{$theme},
|
|
"tui-datepicker-calendar-color"
|
|
);
|
|
line-height: 1.285;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
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");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.theme--white {
|
|
.toastui-editor-contents {
|
|
* {
|
|
color: #fff !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;
|
|
|
|
img {
|
|
width: 139px;
|
|
}
|
|
}
|
|
|
|
.login-logo {
|
|
color: map-deep-get($config, #{$theme}, "v-dialog-card-text-color");
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.v-list-item__title {
|
|
color: map-deep-get($config, #{$theme}, "btn-header-select-color");
|
|
|
|
&:hover {
|
|
color: #46c0ff;
|
|
}
|
|
}
|
|
|
|
.v-btn {
|
|
background-color: transparent !important;
|
|
color: map-deep-get($config, #{$theme}, "btn-header-select-color") !important;
|
|
}
|
|
|
|
}
|
|
|
|
[hover-tooltip] {
|
|
$caret-height: 4px;
|
|
$caret-width: 6px;
|
|
$distance: -12px;
|
|
$tooltip-bg-color: rgba(39, 39, 39, 0.8);
|
|
|
|
position: relative;
|
|
cursor: default;
|
|
|
|
&:hover {
|
|
&::before {
|
|
content: attr(hover-tooltip);
|
|
font-size: 14px;
|
|
text-align: center;
|
|
position: absolute;
|
|
display: block;
|
|
left: 50%;
|
|
min-width: 150px;
|
|
max-width: 200px;
|
|
bottom: calc(100% + #{$distance});
|
|
transform: translate(-50%);
|
|
animation: fade-in 300ms ease;
|
|
background: $tooltip-bg-color;
|
|
border-radius: 4px;
|
|
padding: 10px;
|
|
color: #ffffff;
|
|
z-index: 1;
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
bottom: calc(100% + #{$distance - $caret-height});
|
|
margin-left: - $caret-width/2;
|
|
border: 1px solid black;
|
|
border-color: $tooltip-bg-color transparent transparent transparent;
|
|
border-width: $caret-height $caret-width 0;
|
|
animation: fade-in 300ms ease;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
.ant-card .ant-card-body {
|
|
padding: 0;
|
|
} |