Jaybe
461 lines
18 KiB
SCSS
461 lines
18 KiB
SCSS
.ui-autocomplete{z-index: 10000000; max-height: 300px;overflow-y: auto;overflow-x: hidden;}
|
|
.target-btn{background-color: rgb(var(--bs-red-primary));color:rgb(var(--bs-white));border-radius: 5px;padding:5px;box-sizing: border-box;}
|
|
// .log-search-wrap{margin-bottom:0;}
|
|
|
|
// .logTable{margin-top: 0 !important;}
|
|
|
|
.search{
|
|
button.btn-primary{ width: 90px; font-weight: 700; font-size: 100%;color:rgb(var(--bs-white)); border-radius: 7px; background:rgb(var(--bs-red-primary));}
|
|
.term{margin-bottom: 15px;}
|
|
.input{
|
|
.btn-primary{margin-left:5px;}
|
|
.btn-special{margin-left:5px;}
|
|
}
|
|
}
|
|
|
|
.num-line{display:flex; align-items:center; margin:0 0 12px; font-size:15px;
|
|
span{display:inline-block; margin:0 0 0 4px; padding:2px 12px; border:1px dashed rgb(var(--bs-silver-chalice)); border-radius:4px; background:rgb(var(--bs-white));}
|
|
}
|
|
|
|
.ui-toggle{position:relative; width:42px; overflow:hidden; margin:0 auto;
|
|
input[type="checkbox"]{position:absolute; top:0; left:0; opacity:0;}
|
|
label{position:relative; display:block; width:100%; height:24px; overflow:hidden; text-indent:-9999px; border-radius:12px; background:rgb(var(--bs-gray-ashPink)); transition:all .2s;
|
|
&:before{position:absolute; top:2px; left:2px; width:20px; height:20px; content:''; border-radius:50%; background:rgb(var(--bs-white)); transition:all .2s;}
|
|
}
|
|
input[type="checkbox"]:checked{
|
|
& + label{background:rgb(var(--bs-blue-science));
|
|
&:before{left:auto; left:20px;}
|
|
}
|
|
}
|
|
}
|
|
.tbl-dark{
|
|
th{text-align:center;
|
|
&:not(:first-child){border-left:1px dashed rgb(var(--bs-gray-border));}
|
|
}
|
|
td{font-size:14px; vertical-align:middle;
|
|
&:not(:first-child){border-left:1px dashed rgb(var(--bs-gray-border));}
|
|
}
|
|
}
|
|
.td-inner{position:relative;
|
|
.more-action{position:absolute; top:0; right:0;
|
|
button{position:relative; width:12px; height:22px;
|
|
&:before{position:absolute; top:0; left:50%; width:4px; height:4px; content:''; border-radius:50%; background:rgb(var(--bs-gray-ashPink)); transform:translateX(-50%);}
|
|
span{display:block; overflow:hidden; text-indent:-9999px;
|
|
&:before{position:absolute; top:50%; left:50%; width:4px; height:4px; content:''; border-radius:50%; background:rgb(var(--bs-gray-ashPink)); transform:translate(-50%, -50%);}
|
|
&:after{position:absolute; bottom:0; left:50%; width:4px; height:4px; content:''; border-radius:50%; background:rgb(var(--bs-gray-ashPink)); transform:translateX(-50%);}
|
|
}
|
|
}
|
|
ul{position:absolute; top:0; right:12px; display:none; width:76px; padding:10px 0; border:1px solid rgb(var(--bs-silver)); border-radius:5px; background:rgb(var(--bs-white));
|
|
li:not(:first-child){margin-top:8px;}
|
|
}
|
|
}
|
|
}
|
|
.paging{display:flex; justify-content:center; margin:50px 0 0;
|
|
a{min-width:38px; height:22px; box-sizing:border-box; padding:0 10px; font-size:15px; text-align:center; line-height:22px; border-radius:3px;
|
|
&[class^="btn"]{color:rgb(var(--bs-silver-aluminium));}
|
|
&.current{color:rgb(var(--bs-white)); background:rgb(var(--bs-red-origin));}
|
|
}
|
|
}
|
|
|
|
.regi-content{display:flex; padding:35px 0 20px;
|
|
.btn-close{position:absolute; top:20px; right:20px;}
|
|
.step{width:270px; height:580px; margin:0 12px 0 10px;
|
|
ol{position:relative; display:flex; flex-direction:column;align-items:flex-start;justify-content:space-between;height:100%;
|
|
&:before{position:absolute; top:5%; left:17px; width:0; height:90%; content:''; border-left:2px dashed rgb(var(--bs-gray-pearl));}
|
|
}
|
|
li {
|
|
position: relative;
|
|
min-height: 15%;
|
|
max-height: 10rem;
|
|
overflow-y: scroll;
|
|
-ms-overflow-style: none; /* 익스플로러, 엣지 */
|
|
scrollbar-width: none; /* 파이어폭스 */
|
|
&::-webkit-scrollbar {
|
|
display: none; /* 크롬, 사파리, 오페라 */
|
|
}
|
|
&:last-child {
|
|
flex: none;
|
|
}
|
|
strong {
|
|
display: block;
|
|
height: 32px;
|
|
padding: 0 0 0 40px;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
line-height: 32px;
|
|
position: sticky;
|
|
top: 0;
|
|
background-color: rgb(var(--bs-white));
|
|
&:after {
|
|
display: block;
|
|
content: '';
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
}
|
|
}
|
|
p {
|
|
margin: 15px 0 15px 30px;
|
|
font-size: 13px;
|
|
line-height: 1.4;
|
|
}
|
|
&:nth-child(1) strong::after {
|
|
@include bg('ico_regi01.png', 0, center);//var.scss
|
|
}
|
|
&:nth-child(2) strong::after {
|
|
@include bg('ico_regi02.png', 0, center);//var.scss
|
|
}
|
|
&:nth-child(3) strong::after {
|
|
@include bg('ico_regi03.png', 0, center);//var.scss
|
|
}
|
|
&:nth-child(4) strong::after {
|
|
@include bg('ico_regi04.png', 0, center);//var.scss
|
|
}
|
|
&:nth-child(5) strong::after {
|
|
@include bg('ico_regi05.png', 0, center);//var.scss
|
|
}
|
|
&.active {
|
|
strong {
|
|
color: rgb(var(--bs-blue));
|
|
}
|
|
&:nth-child(1) strong::after {
|
|
@include bg('ico_regi01_on.png', 0, center);//var.scss
|
|
}
|
|
&:nth-child(2) strong::after {
|
|
@include bg('ico_regi02_on.png', 0, center);//var.scss
|
|
}
|
|
&:nth-child(3) strong::after {
|
|
@include bg('ico_regi03_on.png', 0, center);//var.scss
|
|
}
|
|
&:nth-child(4) strong::after {
|
|
@include bg('ico_regi04_on.png', 0, center);//var.scss
|
|
}
|
|
&:nth-child(5) strong::after {
|
|
@include bg('ico_regi05_on.png', 0, center);//var.scss
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.detail-wrap{
|
|
width: calc(100% - 180px);
|
|
overflow:hidden;
|
|
.sche-info-txt{
|
|
text-align:center;
|
|
margin:0 0 3%;
|
|
}
|
|
.detail{display:none;width:100%;padding:5px;overflow-x:auto;scroll-behavior:smooth;box-sizing:border-box;
|
|
&.active{display:block;}
|
|
.form-check-input{margin-top:0; transition: all .2s;
|
|
& + label{margin-left:5px !important; margin-right: 1rem;}
|
|
&:checked + label{color:rgb(var(--bs-blue)); font-weight: 900;}
|
|
}
|
|
.form-control + .btn-special{flex:unset; float: unset; height: auto; padding: 12px 15px; line-height: 1.4; }
|
|
}
|
|
.tbl-side{font-size:15px; border-radius:5px; box-shadow:0 0 0 1px rgb(var(--bs-gray-border));
|
|
tr:first-child{
|
|
th{border-radius:5px 0 0 0;}
|
|
}
|
|
tr:last-child{
|
|
th{border-radius:0 0 0 5px;}
|
|
}
|
|
tr:not(:last-child){
|
|
th,
|
|
td{border-bottom:1px solid rgb(var(--bs-gray-border));}
|
|
}
|
|
th{padding:18px; text-align:right; border-right:1px solid rgb(var(--bs-gray-border)); background:rgb(var(--bs-white-spring));}
|
|
input[type="text"].bg{background:rgb(var(--bs-white-spring));}
|
|
>:not(caption)>*>*{border-bottom-width:0;}
|
|
}
|
|
.tbl-header{font-size:15px; text-align:center; box-shadow:0 0 0 1px rgb(var(--bs-gray-border));
|
|
thead{
|
|
th{padding:.8rem .5rem; border-bottom:1px solid rgb(var(--bs-gray-border)); background:rgb(var(--bs-white-spring)); text-align: center;
|
|
&:not(:first-child){border-left:1px dashed rgb(var(--bs-gray-border));}
|
|
&:first-child{border-radius:5px 0 0 0;}
|
|
&:last-child{border-radius:0 5px 0 0;}
|
|
}
|
|
}
|
|
tr:not(:last-child){
|
|
td{border-bottom:1px solid rgb(var(--bs-gray-border));}
|
|
}
|
|
tr.selected{
|
|
>* {box-shadow: inset 0 0 0 9999px rgba(var(--bs-pink-light-rose), 0.369); color:rgb(var(--bs-black)); font-weight: 600;}
|
|
}
|
|
td{min-height:42px; vertical-align: middle; word-break: break-word;
|
|
&:not(:first-child){border-left:1px dashed rgb(var(--bs-gray-border));}
|
|
.em{color:rgb(var(--bs-blue));}
|
|
}
|
|
>:not(caption)>*>*{border-bottom-width:0;}
|
|
.btn-add{position:relative; width:19px; height:19px; overflow:hidden; text-indent:-9999px; border-radius:5px; background:rgb(var(--bs-dark-metal));
|
|
&:before{position:absolute; top:50%; left:50%; width:3px; height:10px; content:''; background:rgb(var(--bs-white-spring)); transform:translate(-50%, -50%);}
|
|
&:after{position:absolute; top:50%; left:50%; width:10px; height:3px; content:''; background:rgb(var(--bs-white-spring)); transform:translate(-50%, -50%);}
|
|
}
|
|
.form-flex{gap:5px;
|
|
.form-select{margin:0; font-size:15px;}
|
|
.no-flex{flex:none; width:120px;}
|
|
}
|
|
}
|
|
.short{display:inline-block; width:25%;}
|
|
.middle{width:50%;}
|
|
.form-select + .form-select{margin-top:6px;}
|
|
.form-flex{display:flex; align-items:center;
|
|
*{flex:1;}
|
|
span{flex:none; width:25px; text-align:center;}
|
|
}
|
|
.tab{display:flex; margin:0 0 42px;overflow-x:auto;scroll-behavior:smooth;
|
|
li{margin:0 8px 0 0;}
|
|
a{display:block; width:135px; height:42px; font-size:18px; color:rgb(var(--bs-dark-metal)); text-align:center; line-height:40px; border:1px solid rgb(var(--bs-dark-metal)); border-radius:21px; background:rgb(var(--bs-white));}
|
|
.active{
|
|
a{color:rgb(var(--bs-white)); background:rgb(var(--bs-dark-metal));}
|
|
}
|
|
}
|
|
.search{margin:0 0 18px;
|
|
input[type="text"]{
|
|
height:44px;
|
|
padding:0 0 0 42px;
|
|
border:1px solid rgb(var(--bs-gray-600));
|
|
border-radius:22px;
|
|
@include bg('search.svg', 24px, center);//var.scss
|
|
}
|
|
}
|
|
.input{flex:1; display:flex;
|
|
input[type="text"]{
|
|
flex:1;
|
|
width:100%;
|
|
height:50px;
|
|
box-sizing:border-box;
|
|
margin:0 10px 0 0;
|
|
padding:0 15px 0 45px;
|
|
border:1px solid rgb(var(--bs-gray-600));
|
|
border-radius:25px;
|
|
@include bg('search.svg', 24px, center);//var.scss
|
|
&:focus{border-color:transparent; box-shadow: 0 0 0 0.25rem rgba(var(--bs-red-rose-madder), 0.271); caret-color:rgb(var(--bs-red-origin));
|
|
&::placeholder{color:rgb(var(--bs-red-origin)); text-indent:0.75rem; transition:text-indent 0.3s;}
|
|
}
|
|
}
|
|
.btn-primary{width:115px; height:52px; font-weight:700; color:rgb(var(--bs-white)); border-radius:7px; background:rgb(var(--bs-red-primary));}
|
|
.btn-special{width:115px; height:52px; font-weight:700; color:rgb(var(--bs-white)); border-radius:7px; background:rgb(var(--bs-blue));}
|
|
}
|
|
* + .input{margin:0 0 0 20px;}
|
|
.btn-special{float:right; width:115px; height:52px; font-weight:700; color:rgb(var(--bs-white)); border-radius:7px; background:rgb(var(--bs-blue));}
|
|
}
|
|
|
|
.dataTables_paginate{float:unset; text-align: center !important; padding-top:1.755em; padding-bottom:1.755em;
|
|
.paginate_button{border:none; padding:0.25rem 0.5rem;
|
|
&.disabled,
|
|
&.disabled:hover{color:rgb(var(--bs-silver-aluminium)) !important;}
|
|
|
|
&:hover{color:rgb(var(--bs-red-origin)) !important; border:none; background:none; transition:0.2s;}
|
|
&:not(.previous,.next,.current){ /*@include dot-effect;*/
|
|
/* @include underline-effect;*/
|
|
}
|
|
&.current{
|
|
color:rgb(var(--bs-white)) !important; background-color:rgb(var(--bs-red-origin)); border:none; padding:0.2rem 1rem; border-radius:4px;
|
|
&:hover{color:rgb(var(--bs-white)) !important; background-color:rgb(var(--bs-red-origin)); border:none;}
|
|
}
|
|
&:active{background:none; border:none;}
|
|
}
|
|
}
|
|
}
|
|
|
|
//자동화등록 팝업 detail스크롤제거
|
|
.automationModal {
|
|
.regi-content {
|
|
.detail-wrap{
|
|
.detail{overflow-x:unset;}
|
|
}
|
|
}
|
|
}
|
|
|
|
.week-radio{display:inline-flex; overflow:hidden; border:1px solid rgb(var(--bs-gray-ghost)); border-radius:5px;
|
|
.day{position:relative;
|
|
&:not(:first-child){border-left:1px solid rgb(var(--bs-gray-ghost));}
|
|
input[type="radio"]{position:absolute; top:0; left:0; opacity:0;}
|
|
label{display:block; width:45px; height:37px; box-sizing:border-box; font-size:15px; color:rgb(var(--bs-gray-600)); text-align:center; line-height:37px; background:rgb(var(--bs-white-spring));}
|
|
input[type="radio"]:checked{
|
|
& + label{color:rgb(var(--bs-white)); background:rgb(var(--bs-blue));}
|
|
}
|
|
}
|
|
}
|
|
|
|
.modal{
|
|
.modal-xl{--bs-modal-width:1100px;}
|
|
.tbl-dark{border:1px solid rgb(var(--bs-gray-border));
|
|
td{
|
|
.num{color:rgb(var(--bs-gray-dawn));}
|
|
}
|
|
.em{color:rgb(var(--bs-blue));}
|
|
.fail{color:rgb(var(--bs-red));}
|
|
}
|
|
.dataTables_paginate{float:unset; text-align: center !important; padding-top:1.755em; padding-bottom:1.755em;
|
|
.paginate_button{border:none; padding:0.25rem 0.5rem;
|
|
&.disabled,
|
|
&.disabled:hover{color:rgb(var(--bs-silver-aluminium)) !important;}
|
|
|
|
&:hover{color:rgb(var(--bs-red-origin)) !important; border:none; background:none; transition:0.2s;}
|
|
&:not(.previous,.next,.current){ /*@include dot-effect;*/
|
|
/* @include underline-effect;*/
|
|
}
|
|
&.current{
|
|
color:rgb(var(--bs-white)) !important; background-color:rgb(var(--bs-red-origin)); border:none; padding:0.2rem 1rem; border-radius:4px;
|
|
&:hover{color:rgb(var(--bs-white)) !important; background-color:rgb(var(--bs-red-origin)); border:none;}
|
|
}
|
|
&:active{background:none; border:none;}
|
|
}
|
|
}
|
|
}
|
|
//감사 로그 (전체 로그 보기)
|
|
.logModal{
|
|
.modal-header{
|
|
.modal-title{font-size:20px; font-weight:700; border:0;
|
|
.ico-log{display:inline-block; width:25px; height:25px; margin:0 12px 0 0; vertical-align:middle; background:url(/images/ico_log.png) no-repeat 0 center;}
|
|
}
|
|
}
|
|
.logTable{
|
|
.detail-log-wrap {
|
|
display:flex;
|
|
align-items:center;
|
|
padding:10px 0;
|
|
border:1px solid rgb(var(--bs-gray-border));
|
|
h2{
|
|
padding:0 3%;
|
|
font-size:18px;
|
|
text-align:left;
|
|
}
|
|
.detail-log{
|
|
text-align:left;
|
|
.log-item{
|
|
display:flex;
|
|
text-align:left;
|
|
font-size:13px;
|
|
dt{
|
|
padding:0 10px;
|
|
&:before{
|
|
content:'·';
|
|
display:inline-block;
|
|
width:10px;
|
|
height:10px;
|
|
|
|
}
|
|
}
|
|
dd{
|
|
position:relative;
|
|
padding:0 10px;
|
|
&:before{
|
|
content:':';
|
|
position:absolute;
|
|
top:0;
|
|
left:0;
|
|
display:inline-block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-close{transition:all 0.5s;
|
|
&:active{transform: rotate(360deg);}
|
|
}
|
|
|
|
.targetTable tbody tr:hover, .execTable tbody tr:hover{
|
|
cursor: pointer;
|
|
}
|
|
|
|
@include x-large{//1400px
|
|
}
|
|
@include large{//1200px
|
|
.regi-content{
|
|
.step{
|
|
width:180px;
|
|
margin:0;
|
|
min-height:400px;
|
|
height:auto;
|
|
overflow:hidden;
|
|
ol{
|
|
li{
|
|
strong{
|
|
font-size:16px;
|
|
&::after {
|
|
width:30px;
|
|
background-size:30px auto !important;
|
|
}
|
|
}
|
|
p{
|
|
margin:15px 0 15px 25px;
|
|
font-size:11px;
|
|
}
|
|
}
|
|
&:before{
|
|
left:13px;
|
|
}
|
|
}
|
|
}
|
|
.detail-wrap{
|
|
.tab{
|
|
margin:0 0 30px;
|
|
li{
|
|
height:37px;
|
|
a{
|
|
width:100px;
|
|
height:35px;
|
|
line-height:35px;
|
|
font-size:15px;
|
|
}
|
|
}
|
|
}
|
|
.input input[type=text] {
|
|
height:40px;
|
|
}
|
|
.input{
|
|
.btn-primary{
|
|
height:40px;
|
|
}
|
|
}
|
|
.tbl-header {
|
|
td{
|
|
font-size:.8rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.logModal {
|
|
.logTable {
|
|
.detail-log-wrap{
|
|
h2{
|
|
font-size:16px;
|
|
}
|
|
.detail-log {
|
|
flex:1;
|
|
.log-item {
|
|
dt{
|
|
min-width:15%;
|
|
}
|
|
dd {
|
|
flex:1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
@include medium{//1024px
|
|
//자동화목록 상단버튼 크기 변경
|
|
// .automationContent {
|
|
// .search-wrap {
|
|
// .search {
|
|
// .input {
|
|
// .btn-primary{width:100px;}
|
|
// .btn-special{width:100px;}
|
|
// }
|
|
|
|
// }
|
|
// }
|
|
// }
|
|
}
|
|
@include small{//768px
|
|
} |