init
This commit is contained in:
Jaybe
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,101 @@
|
||||
$input-pd:1.25rem; //20px
|
||||
$icon-pd:3.75rem; //60px
|
||||
|
||||
@mixin effect($second:0.3s) {
|
||||
transform: translateY(150%); visibility:hidden; transition: all linear $second;
|
||||
&.effect{transform: translateY(0%); visibility:visible;}
|
||||
}
|
||||
|
||||
|
||||
//로그인,가입하기
|
||||
.account-container{
|
||||
margin:0 auto;
|
||||
.card{
|
||||
margin:7% auto 0;
|
||||
--bs-card-border-color:transparent;
|
||||
--bs-card-bg:inherit; max-width: 500px;
|
||||
}
|
||||
.card-title{
|
||||
font-size:1.5rem;
|
||||
margin:2.5rem 0;
|
||||
}
|
||||
.card-body{
|
||||
padding:0;
|
||||
}
|
||||
.btn-outline-primary{
|
||||
display: block;
|
||||
width:100%;
|
||||
margin-top:1.5rem;
|
||||
border-radius:14px;
|
||||
height:4.375rem;
|
||||
text-align: center;
|
||||
font-size:1.25rem;
|
||||
--bs-btn-color:rgb(var(--bs-red-primary));
|
||||
--bs-btn-border-color:rgb(var(--bs-red-primary));
|
||||
&:hover{
|
||||
--bs-btn-hover-bg:rgb(var(--bs-red-primary));
|
||||
--bs-btn-hover-border-color:rgb(var(--bs-red-primary));
|
||||
}
|
||||
&:active{
|
||||
background-color:var(--bs-btn-hover-bg);
|
||||
border-color:var(--bs-btn-hover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
form{
|
||||
> div{transition:all linear 0.5s; @include effect;
|
||||
i{position: absolute; top:52%; transform: translateY(-50%); left:$input-pd; font-size: 1.5rem; width: 1.5rem; color:rgb(var(--bs-gray-boulder));}
|
||||
}
|
||||
.form-control{width:100%;height:4.375rem;padding:0 3.4rem;text-align:left;border-radius:14px;border: 1px solid rgb(var(--bs-gray-border));background-color: rgb(var(--bs-gray-softPeach));
|
||||
&:-webkit-autofill,
|
||||
&:-internal-autofill-selected {transition:background-color 5000s ease-in-out 0s;}
|
||||
}
|
||||
.form-check{
|
||||
.form-check-input{margin-top:0;}
|
||||
}
|
||||
.icon a{
|
||||
color:rgb(var(--bs-gray-boulder));
|
||||
span.material-symbols-outlined{font-size:130%; vertical-align: middle; padding-right:0.25rem;}
|
||||
&:hover{font-weight: 900; transition:0.2s;
|
||||
span.material-symbols-outlined{transform: scale(1.4);}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//마이페이지
|
||||
.myPage-container{
|
||||
h1{font-size:180%; font-weight:bold;}
|
||||
.container{
|
||||
padding:0;margin:0;
|
||||
}
|
||||
.card{
|
||||
.card-body{
|
||||
dl{
|
||||
display: flex; justify-content: flex-start; margin:1rem 0; align-items:center;
|
||||
dt{
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
width:110px;
|
||||
padding-right:10px;
|
||||
position:relative;
|
||||
margin-right:0.5rem;
|
||||
&:after{
|
||||
content:':';
|
||||
position:absolute;
|
||||
right:0;
|
||||
top:0;
|
||||
}
|
||||
}
|
||||
dd{
|
||||
flex:1;
|
||||
}
|
||||
}
|
||||
&::after{content: ''; display: block; clear: both;}
|
||||
}
|
||||
}
|
||||
button{float:right;}
|
||||
}
|
||||
|
||||
.user-nav p{display: none;}
|
||||
@@ -0,0 +1,128 @@
|
||||
|
||||
@mixin chk_input { //chckbox input style
|
||||
width:1px;
|
||||
height:1px;
|
||||
position:absolute;
|
||||
right:0;
|
||||
text-indent: -999px;
|
||||
&:checked + label{
|
||||
border-color: rgb(var(--bs-red-origin));
|
||||
}
|
||||
&:checked + label i.bi-check2::before {
|
||||
content:"\f26f";
|
||||
color:rgb(var(--bs-red-origin));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin chk_label($wd:20px,$h:20px){//chckbox label style
|
||||
width:$wd;
|
||||
height:$h;
|
||||
border-radius:50%;
|
||||
border:1px solid rgb(var(--bs-black));
|
||||
position:relative;
|
||||
cursor:pointer;
|
||||
&:hover{
|
||||
animation:flash 2s infinite;
|
||||
}
|
||||
i{
|
||||
display: block;
|
||||
line-height: 1.2;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.agree-container{
|
||||
margin:0 auto;
|
||||
.card{
|
||||
max-width: 500px;
|
||||
margin:0 auto;
|
||||
--bs-card-border-color:transparent;
|
||||
--bs-card-bg:inherit;
|
||||
}
|
||||
.card-title{
|
||||
font-size:1.5rem;
|
||||
margin:2.5rem 0;
|
||||
}
|
||||
.card-body{
|
||||
padding:0;
|
||||
}
|
||||
button:has(input[name="chk_all"]){
|
||||
width:100%;
|
||||
height:4.375rem;
|
||||
position:relative;
|
||||
padding:5px;
|
||||
margin-bottom:3.12rem;
|
||||
background-color:rgb(var(--bs-gray-softPeach));
|
||||
border-radius:14px;
|
||||
font-size:1.1rem;
|
||||
transition:all 0.2s ease-out;
|
||||
&:hover{
|
||||
box-shadow: 5px 5px 15px rgb(var(--bs-gray-border));
|
||||
transition:all 0.2s ease-out;
|
||||
}
|
||||
input{
|
||||
@include chk_input;
|
||||
}
|
||||
label{
|
||||
@include chk_label;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
.agree-box{
|
||||
margin: 0 auto;
|
||||
position:relative;
|
||||
h2{
|
||||
padding-left:0.5rem;
|
||||
font-size:1.1rem;
|
||||
span{
|
||||
color:rgb(var(--bs-red-primary));
|
||||
}
|
||||
}
|
||||
input{
|
||||
@include chk_input;
|
||||
}
|
||||
label{
|
||||
@include chk_label;
|
||||
}
|
||||
}
|
||||
textarea{
|
||||
overflow-y:auto;
|
||||
width:100%;
|
||||
height:9.37rem;
|
||||
margin:1.5rem auto;
|
||||
background-color:inherit;
|
||||
border-radius:8px;
|
||||
border:1px solid rgb(var(--bs-gray-border));
|
||||
line-height: 1.4;
|
||||
font-size:90%;
|
||||
color:rgb(var(--bs-gray-600));
|
||||
}
|
||||
.row:has(a.confirm_agree){
|
||||
margin:0;
|
||||
a.confirm_agree{
|
||||
display:block;
|
||||
width:100%;
|
||||
height:4.375rem;
|
||||
margin-top:1.5rem;
|
||||
border-radius:14px;
|
||||
line-height:4.375rem;
|
||||
text-align:center;
|
||||
background-color:rgb(var(--bs-red-primary));
|
||||
font-size:1.25rem;
|
||||
color:rgb(var(--bs-white));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 반응형 사용
|
||||
@include mobile-500{
|
||||
.agree-container{
|
||||
.agree-box{
|
||||
label{
|
||||
i{
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
.siteMap-container{
|
||||
.sitemap-wrap{display: flex; flex-wrap:wrap; position: relative;
|
||||
&::after{display: block; content: ''; position: absolute; top:4%; left: 50%; width: 2px; height: 92%; background-color: rgb(var(--bs-red-primary));}
|
||||
}
|
||||
|
||||
.section + .section{margin:0;}
|
||||
.section{width:48%; padding:5px;
|
||||
&:nth-child(odd){margin:3rem 2% 3rem 0;}
|
||||
&:nth-child(even){margin:3rem 0 3rem 2%;}
|
||||
|
||||
.content-title::after{display: none;}
|
||||
}
|
||||
|
||||
|
||||
.client-list .row .col{width:25%;
|
||||
button{ transition:all linear 0.2s;
|
||||
&:hover{background-color: rgb(var(--bs-red-primary)); color: rgb(var(--bs-white)); border-color: transparent; transition:all linear 0.2s;
|
||||
a{color:inherit;}
|
||||
}
|
||||
a{display: block;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile-500{
|
||||
.siteMap-container{
|
||||
.client-list .row .col{width:50%;}
|
||||
.client-list .row .col button{padding:0.6rem 0.7rem; font-size:90%;}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
// D:\SourceData\zenith\zenith-project\public\static\css\zenith\_layout.scss 백업파일(현재삭제됨)
|
||||
//제니스 안의 layout.scss 파일이 아님.
|
||||
|
||||
body{background:#f7f7f7;}
|
||||
|
||||
.left-side{display:flex; flex-direction:column; width:240px; height:100vh; box-sizing:border-box; padding:42px 0; border-radius:0 0 40px 0; background:$color-dark;
|
||||
.btn-menu{display:none;}
|
||||
.logo{margin:0 auto 40px;}
|
||||
}
|
||||
|
||||
.nav-wrap{flex:1; overflow:auto;
|
||||
&::-webkit-scrollbar{width:6px; background:transparent;}
|
||||
&::-webkit-scrollbar-thumb{border-radius:3px; background:#aaa;}
|
||||
.nav{
|
||||
> li{position:relative; padding:15px 0 0 10px; font-size:1.063rem; transition:all .2s;
|
||||
&:not(:last-child){margin:0 0 30px;}
|
||||
&:has([aria-expanded="true"]){background:#fff;
|
||||
&:before{position:absolute; top:0; left:0; width:6px; height:100%; content:''; background:$color-primary;}
|
||||
button{color:$color-dark;
|
||||
&[aria-expanded="true"]{@include bold;}
|
||||
}
|
||||
}
|
||||
}
|
||||
button{
|
||||
display:block; padding:0 0 0 33px; color:#fff;
|
||||
> i.bi {margin:0 10px 0 -37px; font-size:180%; vertical-align:middle;}
|
||||
}
|
||||
.btn-toggle-nav{padding:18px 0 0;
|
||||
li{margin:0 0 12px 32px;}
|
||||
a{position:relative; display:inline-block; padding:0 0 2px 10px; font-size:0.875rem; color:#929292;}
|
||||
.active{color:$color-primary; border-bottom:2px solid #e58489;}
|
||||
.active:before{position:absolute; top:6px; left:0; width:3px; height:3px; content:''; border-radius:50%; background:$color-primary;}
|
||||
}
|
||||
}
|
||||
}
|
||||
.util-nav{display:flex; justify-content:space-between; margin:0 38px; padding:20px 0 0;
|
||||
a{font-size:0.813rem; color:#aaa;}
|
||||
}
|
||||
|
||||
.main-contents-wrap{flex:1; padding:80px 6.7708vw; margin-left: 200px;}
|
||||
.ad-list{
|
||||
.row{text-align:left;}
|
||||
.row:not(:first-child){margin-top:24px;}
|
||||
.type{flex:1; margin-right:12px; padding:1.8229vw 2.5vw; border:1px solid #d1d1d1; border-radius:$radius; background:#fff;}
|
||||
.btn-more{display:flex; align-items:center; justify-content:center; width:143px; color:#fff; border-radius:$radius; background:$color-dark;
|
||||
span{padding:30px 0 0; @include bg('ico_arrow.png', center, 0);}
|
||||
}
|
||||
.btn-primary{background:$color-primary;}
|
||||
.summary{display:flex; margin:0 0 24px;
|
||||
strong{min-width:210px; margin:0 45px 0 0; font-size:1.750rem; @include bold;}
|
||||
i{display:inline-block; width:28px; height:28px; margin:0 6px 0 0; vertical-align:top;}
|
||||
.facebook{@include bg('ico_facebook.png', center, 0);}
|
||||
.kakao{@include bg('ico_kakao.png', center, 0);}
|
||||
.google{@include bg('ico_google.png', center, 0);}
|
||||
dl{display:flex; align-items:center; margin:0 45px 0 0;}
|
||||
dt{margin:0 6px 0 0; font-size:1rem;}
|
||||
dd{font-size:1.750rem; @include bold;}
|
||||
.percentage{
|
||||
dd{color:$color-primary;}
|
||||
}
|
||||
}
|
||||
.detail{
|
||||
dl{box-sizing:border-box; margin:0 22px 0 0; padding:7px 10px; text-align:left; background:#f2f2f2;}
|
||||
dd{margin:8px 0 0; color:#929292;}
|
||||
}
|
||||
}
|
||||
|
||||
@include x-large{
|
||||
.main-contents-wrap{padding:30px;}
|
||||
.ad-list{
|
||||
.type{padding:20px;}
|
||||
}
|
||||
.ad-detail-info{flex-wrap:wrap;
|
||||
.col{flex:0 0 auto; width:25%;
|
||||
&:nth-child(n+5){margin-top:15px;}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include large{
|
||||
.ad-list{
|
||||
.row{position:relative;}
|
||||
.summary{flex-wrap:wrap;
|
||||
strong{width:100%; margin:0 0 10px;}
|
||||
}
|
||||
.btn-more{position:absolute; top:15px; right:20px; width:auto; color:$color-dark; background:none;
|
||||
span{padding:0; background:none;}
|
||||
}
|
||||
}
|
||||
.left-side{overflow:hidden;}
|
||||
}
|
||||
@include medium{
|
||||
.wrap{min-width:580px;}
|
||||
.main-contents-wrap{padding:30px 30px 30px 70px;}
|
||||
.left-side{position:fixed; z-index:1; max-width:40px; height:100%; overflow:hidden; padding:20px 0; border-radius:0; transition:all .2s;
|
||||
.logo{margin:0 0 20px 45px;}
|
||||
&.open{max-width:240px; width:240px;}
|
||||
.btn-menu{position:absolute; top:20px; left:10px; display:block; width:20px; height:20px; overflow:hidden; text-indent:-9999px; border-top:2px solid #fff;
|
||||
&:before{position:absolute; top:7px; left:0; width:100%; height:2px; content:''; background:#fff;}
|
||||
&:after{position:absolute; bottom:0; left:0; width:100%; height:2px; content:''; background:#fff;}
|
||||
}
|
||||
}
|
||||
.nav-wrap{width:240px;
|
||||
.nav{
|
||||
> li:not(:last-child){margin:0 0 10px;}
|
||||
button{display:block; padding:0 0 0 33px; color:#fff;}
|
||||
}
|
||||
}
|
||||
.util-nav{width:156px;}
|
||||
.ad-list{
|
||||
.type{margin:0;}
|
||||
}
|
||||
}
|
||||
@include small{
|
||||
|
||||
}
|
||||
@@ -0,0 +1,155 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Lepcha&display=swap');
|
||||
|
||||
$input-pd:1.25rem; //20px
|
||||
$icon-pd:3.75rem; //60px
|
||||
$boder-radius:1.875rem; //30px
|
||||
$theme-color: rgba(var(--bs-brown-quicksand), 0.8);
|
||||
$theme-color02:rgb(var(--bs-blue-soft));
|
||||
|
||||
@mixin effect($second:0.3s) {
|
||||
transform: translateY(150%); visibility:hidden; transition: all linear $second;
|
||||
&.effect{transform: translateY(0%); visibility:visible;}
|
||||
}
|
||||
// 로그인 시안 A
|
||||
.exam-container{height: 100vh; text-align: center; color:rgb(var(--bs-white)); background: linear-gradient(339deg, rgba(var(--bs-dark-green),0.8) 0%, rgb(var(--bs-orange-sand)) 100%, rgb(var(--bs-brown-taupe)) 50%); font-family: 'Noto Sans Lepcha', sans-serif;
|
||||
|
||||
.card{--bs-card-bg:inherit; width:100%; max-width:505px; border:none; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);
|
||||
.card-body{--bs-card-bg: inherit;
|
||||
.card-title{font-size:3rem; font-weight:900; margin-bottom:3rem;}
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
input.form-control{color:rgb(var(--bs-white)); background-color:rgba(var(--bs-brown-taupe), 0.3) !important; border-color:transparent; border-radius: $boder-radius; padding:$input-pd $input-pd $input-pd $icon-pd; margin-bottom:24px;
|
||||
&::placeholder{color:rgb(var(--bs-white));}
|
||||
&:focus{box-shadow:0 0 0 0.25rem $theme-color;}
|
||||
&:-webkit-autofill,
|
||||
&:-internal-autofill-selected {transition: background-color 5000s ease-in-out 0s; color: rgb(var(--bs-white)); -webkit-text-fill-color: rgb(var(--bs-white));}
|
||||
}
|
||||
|
||||
|
||||
> div{transition:all linear 0.5s; @include effect;
|
||||
i{position: absolute; top:52%; transform: translateY(-50%); left:$input-pd; font-size: 1.5rem; width: 1.5rem;}
|
||||
}
|
||||
|
||||
.form-check{text-align:left; padding-left: 2rem;
|
||||
span{display: inline-block; vertical-align: sub;}
|
||||
}
|
||||
.forgot{position: absolute; top:50%; transform: translateY(-50%); right:5%;
|
||||
&:hover{animation: flash 2s infinite;}
|
||||
}
|
||||
|
||||
a:hover,a:active{color:$theme-color;}
|
||||
}
|
||||
|
||||
.btn-primary{background-color:transparent; border-color:rgb(var(--bs-brown-quicksand)); border-radius: $boder-radius; padding:$input-pd; width:100%;
|
||||
&:active{--bs-btn-active-bg:rgb(var(--bs-white)); --bs-btn-active-color: rgb(var(--bs-brown-taupe)); border-color:transparent;}
|
||||
}
|
||||
.text-start{position: relative; @include effect;}
|
||||
|
||||
}
|
||||
|
||||
// 로그인 시안 B
|
||||
.exam02-container{height:100%; background-color:rgb(var(--bs-gray-100)); padding-bottom:5%;
|
||||
.btn{border-radius: 30px; font-size:0.8rem; margin:2rem auto; cursor: pointer;
|
||||
&:hover{background-color:inherit; color:var(--bs-btn-color);}
|
||||
|
||||
button{padding:0.9vw 2.2vw; position:relative;
|
||||
.item{position: absolute; top:3%; left: 0; width:3rem; height:3rem; background-color: $theme-color02; border-radius: 50%;}
|
||||
}
|
||||
}
|
||||
.card{width:80%; max-width:550px; border:none; padding:8% 5% 5%; box-shadow: 5px 5px 10px rgb(var(--bs-gray-pastel)); border-radius: 0 30px 30px 0; background: url('/img/login_bg.png') no-repeat 50%; background-size:cover;
|
||||
.card-body{--bs-card-bg: inherit;
|
||||
.card-title{font-size:1.8rem; font-weight:900; margin-bottom:3rem; text-align: center; color:$theme-color02; letter-spacing: 4px;}
|
||||
}
|
||||
}
|
||||
input:-internal-autofill-selected{background-color: transparent;}
|
||||
|
||||
|
||||
form {
|
||||
.form-control{
|
||||
background-color: transparent; border-width:0px 0px 1px 0px; border-color:rgb(var(--bs-black)); border-radius:0px; padding:0.93rem 0.75rem;
|
||||
}
|
||||
> div p {font-size:0.9rem; padding:0.75rem; font-weight:800; color:rgb(var(--bs-gray-cottonSeed));}
|
||||
|
||||
.btn-primary{width:100%; margin:4rem 0 2rem; padding:15px 0; border-radius: 30px; background-color:$theme-color02;}
|
||||
|
||||
.forgot{color:$theme-color02;}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
// 가입하기 시안 B
|
||||
.exam02-container.toggle{
|
||||
&::after{display:block; content: ''; clear: both;}
|
||||
.btn{float:right;}
|
||||
.card{float:right; clear:both; box-shadow:0px 1px 15px rgb(var(--bs-gray-pastel)); border-radius:30px 0 0 30px;}
|
||||
}
|
||||
|
||||
//drag event
|
||||
.drag-over {border: dashed 3px rgb(var(--bs-white));}
|
||||
.hide {display: none;}
|
||||
|
||||
@keyframes flash { //text 깜빡임
|
||||
0%, 20%, 40%, to { opacity: 1; } 10%, 30% { opacity: 0; }
|
||||
}
|
||||
|
||||
// 반응형 사용
|
||||
@include mobile-500{
|
||||
.exam-container {
|
||||
.card {
|
||||
.card-body {
|
||||
.card-title{margin-bottom:2rem;}
|
||||
}
|
||||
}
|
||||
|
||||
form {padding:0 5%;
|
||||
> div {
|
||||
i{top:54%; font-size:1.2rem;}
|
||||
}
|
||||
.forgot {font-size:0.95rem;}
|
||||
}
|
||||
}
|
||||
|
||||
// login 시안 B
|
||||
.wrap:has(.exam02-container){min-width:unset;}
|
||||
.exam02-container{
|
||||
.btn{
|
||||
button{
|
||||
.item{width:2rem; height:2rem; left:-3%;}
|
||||
}
|
||||
}
|
||||
.card{width:85%;
|
||||
.card-body{
|
||||
.card-title{margin-bottom:2rem;}
|
||||
}
|
||||
}
|
||||
form{
|
||||
.btn-primary{margin:3vw 0 2rem;}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include mobile-415{
|
||||
$input-pd:0.93rem;
|
||||
$icon-pd:3.125rem;
|
||||
|
||||
.exam-container {
|
||||
form {
|
||||
.form-control {
|
||||
padding:$input-pd $input-pd $input-pd $icon-pd;
|
||||
}
|
||||
.btn-primary{
|
||||
padding:$input-pd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.exam02-container{
|
||||
.btn{
|
||||
button{
|
||||
.item{width:1.8rem; height:1.8rem;}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
.scheduler {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.scheduler,
|
||||
.scheduler tr,
|
||||
.scheduler th,
|
||||
.scheduler td {
|
||||
border: 1px solid rgb(var(--bs-black));
|
||||
height:6vh;
|
||||
line-height:6vh;
|
||||
/* height: 25px;
|
||||
line-height: 25px; */
|
||||
}
|
||||
|
||||
.scheduler td,
|
||||
.scheduler th {
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.scheduler .scheduler-hour-toggle,
|
||||
.scheduler .scheduler-hour {
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
.scheduler-time-title,
|
||||
.scheduler-week-title {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.scheduler-time-title {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.scheduler-week-title {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.scheduler .slash {
|
||||
width: 80px;
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
.scheduler-day-toggle,
|
||||
.scheduler-half-toggle,
|
||||
.scheduler-hour-toggle {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.scheduler>tfoot>tr>td {
|
||||
text-align: left;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.scheduler-control-wrap {
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
align-items:center;
|
||||
width:100%;
|
||||
padding:5px 0;
|
||||
}
|
||||
.scheduler-tips {
|
||||
font-size:15px;
|
||||
margin:0 0 0 15px;
|
||||
}
|
||||
.scheduler-reset {
|
||||
display:block;
|
||||
background:rgb(var(--bs-black));
|
||||
border-radius:10px;
|
||||
width:70px;
|
||||
height:35px;
|
||||
line-height:35px;
|
||||
text-align:center;
|
||||
color:rgb(var(--bs-white));
|
||||
}
|
||||
|
||||
.scheduler-active {
|
||||
background-color: rgb(var(--bs-blue-dodger-blue))
|
||||
}
|
||||
|
||||
.scheduler-disabled .scheduler-day-toggle,
|
||||
.scheduler-disabled .scheduler-half-toggle,
|
||||
.scheduler-disabled .scheduler-hour-toggle {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.scheduler-disabled .scheduler-active {
|
||||
background-color: rgb(var(--bs-green-olive))
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,10 @@
|
||||
@import 'zenith/_var',// 변수 정의 파일
|
||||
'zenith/_reset', // 기본 스타일 초기화
|
||||
'zenith/_layout', //leftMenu, login, join,my page, main
|
||||
'zenith/_sub', //서브 페이지 style
|
||||
'zenith/_table',// 테이블 관련 스타일
|
||||
'zenith/_modal', //모달창관련 style
|
||||
"zenith/_animation", //animation
|
||||
"zenith/_auto"; //자동화목록
|
||||
@import "../node_modules/bootstrap-icons/font/bootstrap-icons"; //icon
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
// animation 효과
|
||||
@keyframes moreBtn {//main 더보기 버튼
|
||||
0% {background-position-x:40%;}
|
||||
40% {background-position-x:70%;}
|
||||
60% {background-position-x:right;}
|
||||
80% {background-position-x:70%;}
|
||||
100% {background-position-x:right;}
|
||||
}
|
||||
|
||||
@keyframes moreBtn_mo {//main 더보기 버튼
|
||||
0% {bottom:0;}
|
||||
100% {bottom:-100%;}
|
||||
}
|
||||
|
||||
|
||||
@keyframes letterSpacing { //팝업 modal title
|
||||
0% {letter-spacing:0.5rem;}
|
||||
100% {letter-spacing: 0px;}
|
||||
}
|
||||
|
||||
@keyframes hover-line { //pagenation.scss
|
||||
from {width: 0%;}
|
||||
to {width: 100%;}
|
||||
}
|
||||
|
||||
|
||||
@keyframes sidebarShake { //navbar icon hover
|
||||
0% {transform: rotate(-10deg);}
|
||||
100% {transform: rotate(20deg);}
|
||||
}
|
||||
|
||||
@keyframes updown { //navbar icon active
|
||||
0% {transform: translateY(0px);}
|
||||
100% {transform: translateY(10px);}
|
||||
}
|
||||
|
||||
@keyframes rotate-turn { //dt-buttons hover
|
||||
0% {transform: rotateX(0deg);}
|
||||
100% {transform: rotateX(45deg);}
|
||||
}
|
||||
|
||||
@keyframes shadow { //dt-buttons hover
|
||||
0% {box-shadow: inset 3px 0px 7px rgb(var(--bs-red-origin));}
|
||||
100% {box-shadow: inset 200px 0px 7px rgb(var(--bs-red-origin));}
|
||||
}
|
||||
|
||||
@mixin effect($second:0.3s) {
|
||||
transform: translateY(6.25rem); visibility:hidden; transition: all linear $second;
|
||||
&.up{transform: translateY(0); visibility:visible;}
|
||||
}
|
||||
|
||||
@keyframes zenith-loading-reveal {
|
||||
80%{letter-spacing: 8px;}
|
||||
100% {background-size: 300% 300%;}
|
||||
}
|
||||
@keyframes zenith-loading-glow {
|
||||
40% {text-shadow: 0 0 8px rgb(var(--bs-red-origin));}
|
||||
}
|
||||
@@ -0,0 +1,461 @@
|
||||
.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
|
||||
}
|
||||
@@ -0,0 +1,617 @@
|
||||
body{background:rgb(var(--bs-white-spring));}
|
||||
|
||||
|
||||
//왼쪽메뉴
|
||||
.left-side{
|
||||
overflow:hidden;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
position:fixed;
|
||||
width:40px;
|
||||
height:100vh;
|
||||
padding:42px 0;
|
||||
box-sizing:border-box;
|
||||
border-radius:0;
|
||||
background:rgb(var(--bs-dark-metal));
|
||||
transition:all .5s;
|
||||
z-index: 99;
|
||||
&.active{
|
||||
width:240px;
|
||||
border-radius:0 0 40px 0;
|
||||
.nav-wrap {
|
||||
width: 240px;
|
||||
}
|
||||
}
|
||||
.btn-menu{
|
||||
display:block;
|
||||
width:40px;
|
||||
height:35px;
|
||||
position:absolute;
|
||||
top:40px;
|
||||
left:-1px;
|
||||
padding:0;
|
||||
font-size:0;
|
||||
&:before{
|
||||
content:'\F479';
|
||||
display:block;
|
||||
font-family:bootstrap-icons !important;
|
||||
font-size:2rem;
|
||||
color:rgb(var(--bs-white));
|
||||
}
|
||||
}
|
||||
.logo{
|
||||
color:rgb(var(--bs-white));
|
||||
min-height:35px;
|
||||
margin:0 0 0 45px;
|
||||
line-height:35px;
|
||||
}
|
||||
.btn-top{
|
||||
position:fixed;
|
||||
right:2px;
|
||||
bottom:4px;
|
||||
a{
|
||||
display:block;
|
||||
margin:3px 0;
|
||||
background-color:rgb(var(--bs-dark));
|
||||
border-radius:5px;
|
||||
text-align:center;
|
||||
color:rgb(var(--bs-gray-100));
|
||||
font-size:200%;
|
||||
i.bi{
|
||||
vertical-align:bottom;
|
||||
&:before{
|
||||
vertical-align:-.225em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 왼쪽메뉴리스트(통합광고관리/통합DB관리/회계관리/시차관리/이벤트/회원관리)
|
||||
.nav-wrap{
|
||||
width: 40px;
|
||||
margin-top:30px;
|
||||
overflow-y:auto;
|
||||
overflow-x:hidden;
|
||||
transition:all .5s;
|
||||
flex:1;
|
||||
&::-webkit-scrollbar{
|
||||
width:6px;
|
||||
background:transparent
|
||||
;}
|
||||
&::-webkit-scrollbar-thumb{
|
||||
border-radius:3px;
|
||||
background:rgb(var(--bs-silver-aluminium));
|
||||
}
|
||||
.nav{
|
||||
width: 240px;
|
||||
// overflow-y: auto;
|
||||
> li{
|
||||
position:relative;
|
||||
padding:15px 0 0 10px;
|
||||
font-size:1.063rem;
|
||||
transition:all .2s;
|
||||
&:not(:last-child){
|
||||
margin:0 0 30px;
|
||||
}
|
||||
&:has(div){
|
||||
&:after{
|
||||
content:'';
|
||||
position:absolute;
|
||||
top:23px;
|
||||
right:30px;
|
||||
width:10px;
|
||||
height:10px;
|
||||
border-right:2px solid rgb(var(--bs-white));
|
||||
border-bottom:2px solid rgb(var(--bs-white));
|
||||
transform:rotate(45deg);
|
||||
transition:all .2s;
|
||||
}
|
||||
}
|
||||
&:has([aria-expanded="true"]){
|
||||
background:rgb(var(--bs-white));
|
||||
&:before{
|
||||
content:'';
|
||||
position:absolute;
|
||||
width:6px;
|
||||
height:100%;
|
||||
top:0;
|
||||
left:0;
|
||||
background:rgb(var(--bs-red-primary));
|
||||
}
|
||||
&:after{
|
||||
top:26px;
|
||||
border-color:rgb(var(--bs-dark-metal));
|
||||
transform:rotate(225deg);
|
||||
}
|
||||
button{
|
||||
color:rgb(var(--bs-dark-metal));
|
||||
&[aria-expanded="true"]{@include bold;}//common.scss mixin사용
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
button{
|
||||
display:block;
|
||||
padding:0 0 0 35px;
|
||||
color:rgb(var(--bs-white));
|
||||
transition: 0.2s;
|
||||
&:hover{
|
||||
color:rgb(var(--bs-red-lava));
|
||||
}
|
||||
> i.bi {
|
||||
display:inline-block;
|
||||
margin:5px 12px 0 -36px;
|
||||
vertical-align:middle;
|
||||
font-size:110%;
|
||||
}
|
||||
}
|
||||
.btn-toggle-nav{
|
||||
padding:18px 0 0;
|
||||
li{
|
||||
margin:0 0 12px 32px;
|
||||
}
|
||||
a{
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
padding:0 0 2px 10px;
|
||||
font-size:0.875rem;
|
||||
color:rgb(var(--bs-gray-600));
|
||||
transition: 0.3s;
|
||||
&:hover{
|
||||
color:rgb(var(--bs-red-lava));
|
||||
text-indent: 0.4rem;
|
||||
}
|
||||
}
|
||||
.active{
|
||||
border-bottom:2px solid rgb(var(--bs-coral-light));
|
||||
color:rgb(var(--bs-red-primary));
|
||||
}
|
||||
.active:before{
|
||||
content:'';
|
||||
position:absolute;
|
||||
top:6px;
|
||||
left:0;
|
||||
width:3px;
|
||||
height:3px;
|
||||
border-radius:50%;
|
||||
background:rgb(var(--bs-red-primary));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*이벤트 > 상세 페이지 버튼*/
|
||||
.btn-wrap a {
|
||||
button.btn-outline-danger{
|
||||
padding:var(--bs-btn-padding-y) 15px;
|
||||
// color:rgb(var(--bs-black));
|
||||
border-radius: 14px;
|
||||
&:hover{
|
||||
color:var(--bs-btn-hover-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section.position-relative{
|
||||
.btn-wrap{
|
||||
display:flex;
|
||||
justify-content:flex-end;
|
||||
a {
|
||||
margin:0 0 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-contents-wrap{
|
||||
flex:1;
|
||||
padding:70px 5.7708vw;
|
||||
margin-left:40px;
|
||||
}
|
||||
|
||||
.ad-list{
|
||||
.row{
|
||||
text-align:left;
|
||||
margin-right: 0;
|
||||
}
|
||||
.row:not(:first-child){
|
||||
margin-top:24px;
|
||||
}
|
||||
.type{
|
||||
flex:1;
|
||||
margin-right:12px;
|
||||
padding:2vw 2vw;
|
||||
border:1px solid rgb(var(--bs-gray-dust));
|
||||
border-radius:10px;
|
||||
background:rgb(var(--bs-white));
|
||||
}
|
||||
.btn-more{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
width:143px;
|
||||
color:rgb(var(--bs-white));
|
||||
border-radius:10px;
|
||||
background:rgb(var(--bs-dark-metal));
|
||||
span{
|
||||
padding:30px 0 0;
|
||||
@include bg('ico_arrow.png', center, 0);//var.scss
|
||||
}
|
||||
}
|
||||
.btn-primary{
|
||||
background:rgb(var(--bs-red-primary));
|
||||
}
|
||||
.summary{
|
||||
display:flex;
|
||||
margin:0 0 28px;
|
||||
strong{
|
||||
min-width:210px;
|
||||
margin:0 45px 0 0;
|
||||
font-size:1.750rem;
|
||||
@include bold;//var.scss
|
||||
}
|
||||
i{
|
||||
display:inline-block;
|
||||
width:28px;
|
||||
height:28px;
|
||||
margin:0 6px 0 0;
|
||||
vertical-align:top;
|
||||
}
|
||||
.facebook{
|
||||
@include bg('ico_facebook.png', center, 0);//var.scss
|
||||
}
|
||||
.kakao{
|
||||
@include bg('ico_kakao.png', center, 0);//var.scss
|
||||
}
|
||||
.google{
|
||||
@include bg('ico_google.png', center, 0);//var.scss
|
||||
}
|
||||
dl{
|
||||
display:flex;
|
||||
align-items:center;
|
||||
margin:0 45px 0 0;
|
||||
}
|
||||
dt{
|
||||
margin:0 6px 0 0;
|
||||
font-size:1rem;
|
||||
}
|
||||
dd{
|
||||
font-size:1.750rem;
|
||||
@include bold;//var.scss
|
||||
}
|
||||
.percentage{
|
||||
dd{
|
||||
color:rgb(var(--bs-red-primary));
|
||||
}
|
||||
}
|
||||
}
|
||||
.ad-detail-info{
|
||||
.col{
|
||||
dt{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
dd{
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.detail{
|
||||
dl{
|
||||
box-sizing:border-box;
|
||||
margin:0 22px 0 0;
|
||||
padding:7px 10px;
|
||||
text-align:left;
|
||||
background:rgb(var(--bs-white-porcelain));
|
||||
}
|
||||
dd{
|
||||
margin:8px 0 0;
|
||||
color:rgb(var(--bs-gray-600));
|
||||
}
|
||||
}
|
||||
}
|
||||
.dayOff-contanier{
|
||||
.form-select{font-size: 0.9rem;}
|
||||
}
|
||||
|
||||
|
||||
|
||||
$input-pd:1.25rem; //20px
|
||||
$icon-pd:3.75rem; //60px
|
||||
|
||||
@mixin effect($second:0.3s) {
|
||||
transform: translateY(150%); visibility:hidden; transition: all linear $second;
|
||||
&.effect{transform: translateY(0%); visibility:visible;}
|
||||
}
|
||||
|
||||
|
||||
//로그인,가입하기
|
||||
.account-container{
|
||||
margin:0 auto;
|
||||
.card{
|
||||
margin:7% auto 0;
|
||||
--bs-card-border-color:transparent;
|
||||
--bs-card-bg:inherit; max-width: 500px;
|
||||
}
|
||||
.card-title{
|
||||
font-size:1.5rem;
|
||||
margin:2.5rem 0;
|
||||
}
|
||||
.card-body{
|
||||
padding:0;
|
||||
}
|
||||
.btn-outline-primary{
|
||||
display: block;
|
||||
width:100%;
|
||||
margin-top:1.5rem;
|
||||
border-radius:14px;
|
||||
height:4.375rem;
|
||||
text-align: center;
|
||||
font-size:1.25rem;
|
||||
--bs-btn-color:rgb(var(--bs-red-primary));
|
||||
--bs-btn-border-color:rgb(var(--bs-red-primary));
|
||||
&:hover{
|
||||
--bs-btn-hover-bg:rgb(var(--bs-red-primary));
|
||||
--bs-btn-hover-border-color:rgb(var(--bs-red-primary));
|
||||
}
|
||||
&:active{
|
||||
background-color:var(--bs-btn-hover-bg);
|
||||
border-color:var(--bs-btn-hover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
form{
|
||||
> div{transition:all linear 0.5s; @include effect;
|
||||
&.effect {justify-content:flex-start;}
|
||||
i{position: absolute; top:52%; transform: translateY(-50%); left:$input-pd; font-size: 1.5rem; width: 1.5rem; color:rgb(var(--bs-gray-boulder));}
|
||||
}
|
||||
.form-control{width:100%;height:4.375rem;padding:0 3.4rem;text-align:left;border-radius:14px;border: 1px solid rgb(var(--bs-gray-border));background-color: rgb(var(--bs-gray-softPeach));
|
||||
&:-webkit-autofill,
|
||||
&:-internal-autofill-selected {transition:background-color 5000s ease-in-out 0s;}
|
||||
}
|
||||
.form-check{
|
||||
.form-check-input{margin-top:0;}
|
||||
}
|
||||
.icon a{
|
||||
color:rgb(var(--bs-gray-boulder));
|
||||
span.material-symbols-outlined{font-size:130%; vertical-align: middle; padding-right:0.25rem;}
|
||||
&:hover{font-weight: 900; transition:0.2s;
|
||||
span.material-symbols-outlined{transform: scale(1.4);}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//마이페이지
|
||||
.myPage-container{
|
||||
h1{
|
||||
font-size:180%;
|
||||
font-weight:bold;
|
||||
}
|
||||
.container{
|
||||
padding:0;
|
||||
margin:0;
|
||||
}
|
||||
.card{
|
||||
.card-body{
|
||||
dl{
|
||||
display:flex;
|
||||
justify-content:flex-start;
|
||||
margin:1rem 0;
|
||||
align-items:center;
|
||||
dt{
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
width:110px;
|
||||
padding-right:10px;
|
||||
position:relative;
|
||||
margin-right:0.5rem;
|
||||
&:after{
|
||||
content:':';
|
||||
position:absolute;
|
||||
right:0;
|
||||
top:0;
|
||||
}
|
||||
}
|
||||
dd{
|
||||
flex:1;
|
||||
}
|
||||
}
|
||||
&::after{content: ''; display: block; clear: both;}
|
||||
}
|
||||
}
|
||||
button{float:right;}
|
||||
}
|
||||
.user-nav p{display: none;}
|
||||
|
||||
// 마이페이지&로그아웃 아이콘 변환
|
||||
.util-nav{
|
||||
display:block;
|
||||
width:auto;
|
||||
margin:0;
|
||||
padding:0;
|
||||
a {
|
||||
display:block;
|
||||
margin:25px 0;
|
||||
width:40px;
|
||||
height:20px;
|
||||
transition:all .5s;
|
||||
&::before {
|
||||
content:'';
|
||||
display:block;
|
||||
width:40px;
|
||||
height:20px;
|
||||
margin:0 auto;
|
||||
background-size:20px auto;
|
||||
}
|
||||
&:first-of-type, &:last-of-type {
|
||||
&::before{
|
||||
background-repeat:no-repeat;
|
||||
background-position:50%, 0;
|
||||
}
|
||||
}
|
||||
&:first-of-type {
|
||||
&::before{
|
||||
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-circle' viewBox='0 0 16 16'%3E%3Cpath d='M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0'/%3E%3Cpath fill-rule='evenodd' d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
}
|
||||
&:last-of-type {
|
||||
&::before{
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-power' viewBox='0 0 16 16'%3E%3Cpath d='M7.5 1v7h1V1z'/%3E%3Cpath d='M3 8.812a5 5 0 0 1 2.578-4.375l-.485-.874A6 6 0 1 0 11 3.616l-.501.865A5 5 0 1 1 3 8.812'/%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
span{
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
width:240px;
|
||||
padding:10px 40px 10px;
|
||||
a{
|
||||
display:inilne;
|
||||
width:auto;
|
||||
margin:0;
|
||||
&::before {
|
||||
content:none;
|
||||
}
|
||||
span {
|
||||
display:block;
|
||||
font-size:0.813rem;
|
||||
color:rgb(var(--bs-silver-aluminium));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//메인페이지
|
||||
.main-contents-wrap{
|
||||
.ad-list{
|
||||
.type{
|
||||
transition: 0.4s;
|
||||
&:hover{box-shadow:2px 2px 15px rgb(var(--bs-gray-pastel));}
|
||||
}
|
||||
.btn-more{transition:0.4s;
|
||||
&:hover{
|
||||
span{transition:0.2s; animation:moreBtn 1.3s infinite linear alternate;}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//footer
|
||||
.footer-info{
|
||||
padding:1% 0;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
flex-wrap:wrap;
|
||||
flex-direction:column;
|
||||
font-size:0.75rem;
|
||||
color:rgb(var(--bs-gray-boulder));
|
||||
border-top:1px solid rgb(var(--bs-gray-soft));
|
||||
background-color:rgb(var(--bs-gray-softPeach));
|
||||
& > .footer-info-business {
|
||||
margin:0 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@include x-large{//1400px
|
||||
.main-contents-wrap{padding:30px;}
|
||||
.ad-list{
|
||||
.type{padding:20px;}
|
||||
}
|
||||
.ad-detail-info{flex-wrap:wrap;
|
||||
.col{flex:0 0 auto; width:25%;
|
||||
&:nth-child(n+5){margin-top:15px;}
|
||||
}
|
||||
}
|
||||
.btn-top{
|
||||
span{display:none;}
|
||||
}
|
||||
}
|
||||
@include large{//1200px
|
||||
.ad-list{
|
||||
.row{position:relative;}
|
||||
.summary{flex-wrap:wrap;
|
||||
strong{width:100%; margin:0 0 10px;}
|
||||
}
|
||||
.btn-more{position:absolute; top:15px; right:20px; width:auto; color:rgb(var(--bs-dark-metal)); background:none;
|
||||
span{padding:0; background:none;}
|
||||
}
|
||||
}
|
||||
//메인페이지
|
||||
.main-contents-wrap{
|
||||
.ad-list{
|
||||
.type:hover+.btn-more, .type:focus+.btn-more, .type:target+.btn-more{
|
||||
span{animation:none;}
|
||||
&::after{display:block; content:'더 보기'; position: absolute; bottom:-100%; left:5px; animation:moreBtn_mo .3s linear alternate; font-size:0.8rem; color:rgb(var(--bs-dark-metal));font-weight: bold;}
|
||||
}
|
||||
.btn-more{
|
||||
width:auto;
|
||||
background:rgb(var(--bs-dark-metal));
|
||||
padding:5px 14px;
|
||||
border-radius:4px;
|
||||
span{
|
||||
padding:0;
|
||||
// background:url("/img/ico_arrow.png") no-repeat center 0;
|
||||
color:transparent;
|
||||
@include bg('ico_arrow.png', center, 0);
|
||||
width:1.3rem;
|
||||
height:0.85rem;
|
||||
background-size:contain;
|
||||
}
|
||||
}
|
||||
.btn-primary{background:rgb(var(--bs-red-primary));}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include medium{//1024px
|
||||
.wrap{min-width:580px;}
|
||||
.main-contents-wrap{padding:30px 30px 30px 70px;margin-left:1em;}
|
||||
.left-side{
|
||||
height:100%;
|
||||
padding:13px 0 10px;
|
||||
.btn-menu{
|
||||
top:13px;
|
||||
}
|
||||
}
|
||||
.nav-wrap{
|
||||
margin-top:20px;
|
||||
overflow-y:auto;
|
||||
overflow-x:hidden;
|
||||
scroll-behavior:smooth;
|
||||
.nav{width:240px;
|
||||
> li {
|
||||
padding:15px 0 0 12px;
|
||||
}
|
||||
> li:not(:last-child){
|
||||
margin:0 0 10px;
|
||||
padding:15px 0 0 13px;
|
||||
}
|
||||
> li:last-child{
|
||||
margin:0 0 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.util-nav{
|
||||
a {
|
||||
margin:40% 0 0;
|
||||
}
|
||||
&.active {
|
||||
a{
|
||||
&::before {
|
||||
content:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.ad-list{
|
||||
.type{margin:0;}
|
||||
}
|
||||
}
|
||||
@include small{//768px
|
||||
.section.position-relative {
|
||||
.btn-wrap{justify-content:flex-start;}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,427 @@
|
||||
.modal{
|
||||
--bs-modal-header-padding:30px 30px 15px;
|
||||
--bs-modal-padding:15px 30px 30px;
|
||||
.modal-dialog{--bs-modal-width:620px;
|
||||
&.max-520{--bs-modal-width:520px; word-break: keep-all; line-height: 1.6;
|
||||
.modal-body p {color:rgb(var(--bs-gray-wenge));
|
||||
b{color:rgb(var(--bs-red-origin)); font-weight: 900;}
|
||||
span{border-bottom: 2px solid rgb(var(--bs-gray-pastel)); color:rgb(var(--bs-black)); font-weight: 600; text-shadow: 0px 1px 10px rgb(var(--bs-gray-pastel));}
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-lg{--bs-modal-width:895px;}
|
||||
&.fade{
|
||||
.modal-dialog{transform:translate(50px,0);}
|
||||
}
|
||||
&.show{
|
||||
.modal-dialog{transform:none;}
|
||||
}
|
||||
.modal-header{border-bottom:0;
|
||||
.modal-title{
|
||||
font-size:1.425rem;
|
||||
border-bottom:2px solid rgb(var(--bs-red-primary));
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
&:not(.taxModalLabel) {//#disbursementModalLabel
|
||||
animation:letterSpacing 0.7s linear alternate;
|
||||
.bi-arrow-counterclockwise {
|
||||
&:active {
|
||||
&::before {
|
||||
transform: rotate(360deg);
|
||||
transition:all 0.5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.title{
|
||||
&::before{content:"-"; padding:0 5px;}
|
||||
}
|
||||
.bi{font-size:22px;}
|
||||
}
|
||||
}
|
||||
.modal-body{
|
||||
.body-title{margin:0 0 15px; font-size:20px;}
|
||||
textarea{width:100%; height:95px; padding:10px; border:1px solid rgb(var(--bs-silver)); border-radius:5px; background:rgb(var(--bs-white-spring));}
|
||||
> .d-flex{
|
||||
&:has(button){margin:0 0 15px;}//통합광고관리 - 데이터비교 팝업 버튼
|
||||
.body-title{margin:0;}
|
||||
form{min-width:300px;}
|
||||
}
|
||||
.btn-area {
|
||||
display:flex;
|
||||
justify-content:flex-end;
|
||||
.btn-special{
|
||||
width:115px; height:52px; font-weight:700; color:rgb(var(--bs-white)); border-radius:7px; background:rgb(var(--bs-blue));
|
||||
}
|
||||
}
|
||||
.accountStatMediabtn {
|
||||
button {
|
||||
width:120px;
|
||||
height:35px;
|
||||
font-size: 15px;
|
||||
margin:0 5px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.modal-footer{padding:0 30px 30px; border:0;
|
||||
|
||||
}
|
||||
.sm-txt{
|
||||
.modal-header{border-bottom:0;
|
||||
.modal-title{font-size:18px; border-bottom:2px solid rgb(var(--bs-red-primary));
|
||||
.bi{font-size:15px;}
|
||||
}
|
||||
}
|
||||
}
|
||||
.search-wrap{
|
||||
margin:0 0 30px;
|
||||
.search{
|
||||
padding:35px 20px;
|
||||
}
|
||||
&.log-search-wrap{
|
||||
.search {
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
.input {
|
||||
flex:0 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//모달에서는 1400px 넓이 사용하지 않음.
|
||||
.table-default{width:100%;min-width:auto;}
|
||||
//통합광고관리 목표수량 설정 모달 리스트
|
||||
.dbCountTable_wrapper {
|
||||
.dt-scroll-headInner{width:100% !important;}
|
||||
.table-modal{width:100% !important;}
|
||||
table{
|
||||
table-layout: auto;
|
||||
th:nth-child(1){width: 5%;}
|
||||
th:nth-child(2){width: 75%;}
|
||||
th:nth-child(3){width: 20%;}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sorting{
|
||||
margin:0 0 20px;
|
||||
button{
|
||||
width:135px;
|
||||
height:40px;
|
||||
margin:0 8px 0 0;
|
||||
font-size:20px;
|
||||
text-align:center;
|
||||
border:1px solid rgb(var(--bs-dark-metal));
|
||||
border-radius:20px;
|
||||
&.active{
|
||||
color:rgb(var(--bs-white));
|
||||
background:rgb(var(--bs-dark-metal));
|
||||
}
|
||||
}
|
||||
.term{
|
||||
color:rgb(var(--bs-gray));
|
||||
}
|
||||
}
|
||||
.regi-form{
|
||||
fieldset{
|
||||
display:flex;
|
||||
textarea {
|
||||
width:60%;
|
||||
}
|
||||
.btn-regi{
|
||||
width:90px;
|
||||
margin:0 0 0 5px;
|
||||
text-align:center;
|
||||
border-radius:5px;
|
||||
background:rgb(var(--bs-dark-metal));
|
||||
color:rgb(var(--bs-white));
|
||||
}
|
||||
}
|
||||
}
|
||||
//메모확인
|
||||
.memo-list, .change-list{
|
||||
font-size:13px;
|
||||
max-height:60vh;
|
||||
overflow-y:auto;
|
||||
li{
|
||||
position:relative;
|
||||
padding:10px 0;
|
||||
flex-flow:wrap row;
|
||||
&::before{
|
||||
content:"";
|
||||
position:absolute;
|
||||
top:17px;
|
||||
left:-6px;
|
||||
width:2px;
|
||||
height:2px;
|
||||
border-radius:100%;
|
||||
background-color:rgb(var(--bs-red-primary));
|
||||
}
|
||||
&:not(:last-child){
|
||||
border-bottom:2px dashed rgb(var(--bs-gray-pearl));
|
||||
}
|
||||
.info{
|
||||
min-width:200px;
|
||||
text-align:right;
|
||||
}
|
||||
}
|
||||
.memo-item {
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
padding:10px 0;
|
||||
&:not(:last-child){
|
||||
border-bottom:2px dashed rgb(var(--bs-gray-pearl));
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.ad-status{margin:0 0 15px; padding:6px 0; text-align:center; background:rgb(var(--bs-white-spring));}
|
||||
.status-type{padding:0 0.7813vw; font-size:15px;
|
||||
li{position:relative; padding:0 0 0 12px;
|
||||
&:not(first-child){margin:10px 0 0;}
|
||||
&:before{position:absolute; top:5px; left:0; width:4px; height:4px; content:''; border-radius:50%; background:rgb(var(--bs-red-primary));}
|
||||
.info{font-size:13px;
|
||||
span{margin:0 0 0 5px;}
|
||||
}
|
||||
}
|
||||
}
|
||||
.approval{display:flex; justify-content:flex-end; margin:0 0 10px;
|
||||
li{width:100px; margin:0 0 0 -1px; font-size:13px; text-align:center; border:1px solid rgb(var(--bs-gray-300));}
|
||||
span{display:block; padding:5px 0; border-bottom:1px solid rgb(var(--bs-gray-300)); background:rgb(var(--bs-white-spring));}
|
||||
div{height:100px;}
|
||||
}
|
||||
.dtsr-confirmation{
|
||||
> *:not(.dtsr-rename-modal) {padding:.5rem .5rem;}
|
||||
.dtsr-confirmation-title-row{font-size:18px; border-bottom:2px solid rgb(var(--bs-red-primary)); overflow:hidden; text-overflow:ellipsis; display: inline-block; padding-bottom:1%;}
|
||||
.dtsr-confirmation-text{border:1px solid var(--bs-border-color);
|
||||
> * {padding:.5rem .5rem;}
|
||||
.dtsr-confirmation-message{display:block !important; background-color:rgb(var(--bs-white-spring)); text-align:left !important;}
|
||||
input.dtsr-input{margin:.5rem .5rem; width:96%;}
|
||||
}
|
||||
.dtsr-popover-close{width:auto; height:auto; font-size:1.7rem; background-color:unset; border:none;}
|
||||
.dtsr-confirmation-button{background: rgb(var(--bs-blue)); color: rgb(var(--bs-white)); padding: 0.75rem 0.375rem; border-radius:0.375rem;}
|
||||
}
|
||||
|
||||
|
||||
//통합광고관리 - 자동화등록팝업 - 대상 - 합산적용/개별적용
|
||||
.automationModal .targetCreateType{
|
||||
display: flex;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
//통합광고관리 - 자동화등록팝업 - 대상 - 적용항목
|
||||
.targetSelectTable {
|
||||
tbody {
|
||||
tr {
|
||||
td{
|
||||
position: relative;
|
||||
.set_target_except_btn{
|
||||
padding:0;
|
||||
i{
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
&:last-of-type{
|
||||
padding:0 10px 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//조건 탭
|
||||
.conditionTable{
|
||||
tr{
|
||||
position: relative;
|
||||
input[type=text], select{
|
||||
height:40px;
|
||||
}
|
||||
.deleteBtn{
|
||||
i{
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//실행 탭 - 적용항목
|
||||
.execSelectTable{
|
||||
thead tr th{
|
||||
position: relative;
|
||||
.callTargetBtnBox{
|
||||
position: absolute;
|
||||
right:10px;
|
||||
top:50%;
|
||||
transform:translateY(-50%);
|
||||
padding:0;
|
||||
.callTargetBtn{
|
||||
padding:7px 10px;
|
||||
background-color:rgb(var(--bs-red-primary));
|
||||
border-radius: 5px;
|
||||
font-size: 12px;
|
||||
color:rgb(var(--bs-white));
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
tr td{
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
input, select{
|
||||
font-size: 0.8rem;
|
||||
padding: 0.275rem 0.25rem 0.375rem 0.35rem;
|
||||
height:34px;
|
||||
}
|
||||
input{
|
||||
text-align:center;
|
||||
}
|
||||
.exec_condition_except_btn{
|
||||
padding:0;
|
||||
i{font-size: 18px;}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
tfoot{
|
||||
border-top: 1px solid rgb(var(--bs-dark-dune));background-color:rgb(var(--bs-white-spring));
|
||||
tr td{
|
||||
border-left: none;
|
||||
border-bottom: none;
|
||||
background-color:rgb(var(--bs-white-snow));
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 대상 적용 항목
|
||||
.form-data-box {
|
||||
ul{
|
||||
li{
|
||||
position:relative;
|
||||
margin-bottom: 10px;
|
||||
padding-left:10px;
|
||||
text-align:left;
|
||||
&::after {
|
||||
content:"·";
|
||||
position:absolute;
|
||||
left:0;
|
||||
top:0;
|
||||
}
|
||||
&:last-of-type{
|
||||
margin-bottom:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*회원관리 > 광고주 관리 팝업*/
|
||||
.company-contaniner{
|
||||
.modal{
|
||||
form[name='adv-show-form'],form[name='adaccount-form'], form[name='belong-user-form']{
|
||||
max-width: var(--bs-modal-width);
|
||||
overflow-x:scroll;
|
||||
}
|
||||
.dataTables_wrapper{overflow:scroll;}
|
||||
form[name='adv-show-form'],form[name='belong-user-form']{
|
||||
// .form-control{text-align: center;}
|
||||
.form-control{
|
||||
width:100%;
|
||||
// height:100%;
|
||||
padding:14px 15px;
|
||||
text-align: center;
|
||||
line-height:1.4;
|
||||
border:1px solid rgb(var(--bs-gray-border));
|
||||
border-radius:5px;
|
||||
background:rgb(var(--bs-white));
|
||||
&.active{
|
||||
color:rgb(var(--bs-red-primary));
|
||||
border-color:rgb(var(--bs-red-primary));
|
||||
}
|
||||
&.alert{
|
||||
margin:0;
|
||||
&::before{
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:3px;
|
||||
content:'';
|
||||
background:rgb(var(--bs-red-primary));
|
||||
}
|
||||
}
|
||||
}
|
||||
span{text-align: center; display: block; font-size:1rem;}
|
||||
}
|
||||
form[name='adv-show-form'].adv-show-form {
|
||||
overflow-x:hidden;
|
||||
.table-data,
|
||||
.table-modal{
|
||||
min-width:auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.modal[aria-labelledby="totalModalLabel"] {
|
||||
.modal-body {
|
||||
.d-flex {
|
||||
form{
|
||||
label{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.bi-calendar2-week {
|
||||
padding:0 5%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
&.dayOffModal{//시간차관리
|
||||
.table-modal{
|
||||
min-width:auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include x-large{//1400px
|
||||
|
||||
}
|
||||
@include large{//1200px
|
||||
|
||||
}
|
||||
@include medium{//1024px
|
||||
.modal{
|
||||
--bs-modal-header-padding:20px 20px 10px;
|
||||
--bs-modal-padding:20px;
|
||||
.modal-body{
|
||||
.table-responsive{overflow-x:auto;scroll-behavior:smooth;}
|
||||
.accountStatMediabtn{
|
||||
position:static;
|
||||
button{
|
||||
width:90px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.accountStatModal {
|
||||
.dt-search{
|
||||
// text-align:right !important;
|
||||
}
|
||||
}
|
||||
.sorting{margin:0 0 20px;
|
||||
button{width:auto; height:32px; margin:0 4px 0 0; padding:0 10px; font-size:15px; border-radius:16px;}
|
||||
.term{font-size:12px;}
|
||||
}
|
||||
.table-data,
|
||||
.table-modal{min-width:800px;}
|
||||
.company-contaniner{
|
||||
.modal{
|
||||
.table.adAccountListTable{min-width:600px}
|
||||
.table-modal:not(form[name='adv-show-form'] .table-modal){min-width: unset;}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include small{//768px
|
||||
|
||||
}
|
||||
@include mobile-500{//500px
|
||||
.sorting button{font-size:0.8rem; padding:0 0.5rem;}
|
||||
}
|
||||
@@ -0,0 +1,199 @@
|
||||
@mixin font-face-woff($font-family, $font-path, $weight:normal, $style:normal) {
|
||||
@font-face {
|
||||
font-family: $font-family;
|
||||
src: url('#{$font-path}.woff') format('woff');
|
||||
font-weight: $weight;
|
||||
font-style: $style;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin font-face-woff2($font-family, $font-path, $weight:normal, $style:normal) {
|
||||
@font-face {
|
||||
font-family: $font-family;
|
||||
src: url('#{$font-path}.woff2') format('woff2');
|
||||
font-weight: $weight;
|
||||
font-style: $style;
|
||||
}
|
||||
}
|
||||
@include font-face-woff('NanumSquareNeo', '/fonts/NanumSquareNeo-Variable');
|
||||
@include font-face-woff('NanumSquareNeo', '/fonts/NanumSquareNeo-bRg');
|
||||
@include font-face-woff('NanumSquareNeo', '/fonts/NanumSquareNeo-cBd');
|
||||
@include font-face-woff2('D2Coding', '/fonts/D2Coding');
|
||||
@include font-face-woff2('bootstrap-icons', '/fonts/bootstrap-icons');
|
||||
|
||||
|
||||
//변수선언
|
||||
$font:'NanumSquareNeo', 'Noto Sans', dotum, Gulim, sans-serif;
|
||||
|
||||
//default layout
|
||||
html, body{height:100%;}
|
||||
body{margin:0; padding:0; font-family:$font; font-size:16px; font-weight:400; font-variation-settings:"wght" 400; line-height:1.2; color:rgb(var(--bs-dark-metal));}
|
||||
a{color:inherit; text-decoration:none;}
|
||||
hr, legend{display:none;}
|
||||
h1, h2, h3, h4, h5, h6{font-size:100%; font-weight:300; line-height:1.2;}
|
||||
h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, form, fieldset, figure, figcaption, img{margin:0; padding:0; border:0;}
|
||||
ul, ol, li{list-style:none;}
|
||||
p, div, th, td{font-size:100%;}
|
||||
dfn, address{font-style:normal;}
|
||||
img, input, select, textarea{vertical-align:middle;}
|
||||
input, select, button{font-family:$font; font-size:100%;}
|
||||
textarea{font-family:$font; font-size:100%; resize:none; border-radius:0; appearance:none;}
|
||||
input[type="submit"], button{cursor:pointer;}
|
||||
button{color: inherit; border:0; background:none;}
|
||||
button::-moz-focus-inner{padding:0; border:0;}
|
||||
input::-ms-clear, input::-ms-reveal{display:none;}
|
||||
input{outline:none;}
|
||||
textarea{box-sizing:border-box; padding:20px; color:rgb(var(--bs-dark-mirage)); border:1px solid rgb(var(--bs-gray-moon-mist));}
|
||||
textarea:focus{border:1px solid rgb(var(--bs-dark-mirage)); outline: none;}
|
||||
textarea[name*="script"]{font-family:"D2Coding";}
|
||||
// select{appearance:none;} 셀렉트박스화살표 가리는 css
|
||||
select:focus{outline:none;}
|
||||
select::-ms-expand{display:none;}
|
||||
::-moz-selection {color:rgb(var(--bs-white)); background:rgb(var(--bs-blue-azure));}
|
||||
::selection {color:rgb(var(--bs-white)); background:rgb(var(--bs-blue-azure));}
|
||||
.masking{font-style:normal; font-family:Gulim; letter-spacing:0px;}
|
||||
.masking:last-child{padding-right:1.5px;}
|
||||
@include medium{//var.scss
|
||||
html, body{font-size:14px;}
|
||||
}
|
||||
|
||||
.tooltipped{position:relative}
|
||||
.tooltipped:after{position:absolute;z-index:1000000;display:none;padding:5px 8px;font:normal normal 11px/1.5 Helvetica,arial,nimbussansl,liberationsans,freesans,clean,sans-serif,"Segoe UI Emoji","Segoe UI Symbol";color:rgb(var(--bs-white));text-align:center;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-wrap:break-word;white-space:pre;pointer-events:none;content:attr(aria-label);background:rgba(var(--bs-black), 0.8);border-radius:3px;-webkit-font-smoothing:subpixel-antialiased}
|
||||
.tooltipped:before{position:absolute;z-index:1000001;display:none;width:0;height:0;color:rgba(var(--bs-black), 0.8);pointer-events:none;content:"";border:5px solid transparent}
|
||||
.tooltipped:hover:before,.tooltipped:hover:after,.tooltipped:active:before,.tooltipped:active:after,.tooltipped:focus:before,.tooltipped:focus:after{display:inline-block;text-decoration:none}
|
||||
.tooltipped-multiline:hover:after,.tooltipped-multiline:active:after,.tooltipped-multiline:focus:after{display:table-cell}
|
||||
.tooltipped-s:after,.tooltipped-se:after,.tooltipped-sw:after{top:100%;right:50%;margin-top:5px}
|
||||
.tooltipped-s:before,.tooltipped-se:before,.tooltipped-sw:before{top:auto;right:50%;bottom:-5px;margin-right:-5px;border-bottom-color:rgba(var(--bs-black), 0.8)}
|
||||
.tooltipped-se:after{right:auto;left:50%;margin-left:-15px}
|
||||
.tooltipped-sw:after{margin-right:-15px}
|
||||
.tooltipped-n:after,.tooltipped-ne:after,.tooltipped-nw:after{right:50%;bottom:100%;margin-bottom:5px}
|
||||
.tooltipped-n:before,.tooltipped-ne:before,.tooltipped-nw:before{top:-5px;right:50%;bottom:auto;margin-right:-5px;border-top-color:rgba(var(--bs-black), 0.8)}
|
||||
.tooltipped-ne:after{right:auto;left:50%;margin-left:-15px}
|
||||
.tooltipped-nw:after{margin-right:-15px}
|
||||
.tooltipped-s:after,.tooltipped-n:after{transform:translateX(50%)}
|
||||
.tooltipped-w:after{right:100%;bottom:50%;margin-right:5px;transform:translateY(50%)}
|
||||
.tooltipped-w:before{top:50%;bottom:50%;left:-5px;margin-top:-5px;border-left-color:rgba(var(--bs-black), 0.8)}
|
||||
.tooltipped-e:after{bottom:50%;left:100%;margin-left:5px;transform:translateY(50%)}
|
||||
.tooltipped-e:before{top:50%;right:-5px;bottom:50%;margin-top:-5px;border-right-color:rgba(var(--bs-black), 0.8)}
|
||||
.tooltipped-multiline:after{width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:250px;word-break:break-word;word-wrap:normal;white-space:pre-line;border-collapse:separate}
|
||||
.tooltipped-multiline.tooltipped-s:after,.tooltipped-multiline.tooltipped-n:after{right:auto;left:50%;transform:translateX(-50%)}
|
||||
.tooltipped-multiline.tooltipped-w:after,.tooltipped-multiline.tooltipped-e:after{right:100%}
|
||||
@media screen and (min-width: 0\0){.tooltipped-multiline:after{width:250px}}
|
||||
.tooltipped-sticky:before,.tooltipped-sticky:after{display:inline-block}
|
||||
.tooltipped-sticky.tooltipped-multiline:after{display:table-cell}
|
||||
.fullscreen-overlay-enabled.dark-theme .tooltipped:after{color:rgb(var(--bs-black));background:rgba(var(--bs-white), 0.8);}
|
||||
.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-s:before,.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-se:before,.fullscreen-overlay-enabled.dark-theme .tooltipped .tooltipped-sw:before{border-bottom-color:rgba(var(--bs-white), 0.8);}
|
||||
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-n:before,.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-ne:before,.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-nw:before{border-top-color:rgba(var(--bs-white), 0.8);}
|
||||
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-e:before{border-right-color:rgba(var(--bs-white), 0.8);}
|
||||
.fullscreen-overlay-enabled.dark-theme .tooltipped.tooltipped-w:before{border-left-color:rgba(var(--bs-white), 0.8);}
|
||||
|
||||
.zenith-loading {width:auto;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background: 50% 100% / 50% 50% no-repeat radial-gradient(ellipse at bottom, rgb(var(--bs-red-chili)), transparent, transparent); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 10vw; font-family: sans-serif; animation: zenith-loading-reveal 1500ms ease-in-out forwards 200ms, zenith-loading-glow 2500ms linear infinite 2000ms;z-index:9;}
|
||||
*:has(>.zenith-loading){position:relative; min-height:50px;}
|
||||
.zenith-loading::after{display:block; text-align:center; font-size:30px; font-weight:bold; content:"ZENITH";}
|
||||
|
||||
/* margin */
|
||||
.m0 {margin:0 !important}
|
||||
.m5 {margin:5px !important}
|
||||
.m10 {margin:10px !important}
|
||||
.mw10 {margin:0 10px !important}
|
||||
.mt0{margin-top:0 !important}
|
||||
.mt5{margin-top:5px !important}
|
||||
.mt10{margin-top:10px !important}
|
||||
.mt15{margin-top:15px !important}
|
||||
.mt20{margin-top:20px !important}
|
||||
.mt25{margin-top:25px !important}
|
||||
.mt30{margin-top:30px !important}
|
||||
.mt35{margin-top:35px !important}
|
||||
.mt40{margin-top:40px !important}
|
||||
.mt45{margin-top:45px !important}
|
||||
.mt50{margin-top:50px !important}
|
||||
.mt60{margin-top:60px !important}
|
||||
.mt70{margin-top:70px !important}
|
||||
.mt80{margin-top:80px !important}
|
||||
.mt90{margin-top:90px !important}
|
||||
.mt100{margin-top:100px !important}
|
||||
.mt-5{margin-top:-5px !important}
|
||||
|
||||
.mb0{margin-bottom:0px !important}
|
||||
.mb5{margin-bottom:5px !important}
|
||||
.mb10{margin-bottom:10px !important}
|
||||
.mb15{margin-bottom:15px !important}
|
||||
.mb20{margin-bottom:20px !important}
|
||||
.mb25{margin-bottom:25px !important}
|
||||
.mb30{margin-bottom:30px !important}
|
||||
.mb35{margin-bottom:35px !important}
|
||||
.mb40{margin-bottom:40px !important}
|
||||
.mb45{margin-bottom:45px !important}
|
||||
.mb50{margin-bottom:50px !important}
|
||||
.mb55{margin-bottom:55px !important}
|
||||
.mb60{margin-bottom:60px !important}
|
||||
.mb70{margin-bottom:70px !important}
|
||||
.mb80{margin-bottom:80px !important}
|
||||
.mb85{margin-bottom:85px !important}
|
||||
.mb90{margin-bottom:90px !important}
|
||||
.mb100{margin-bottom:100px !important}
|
||||
|
||||
.mr0{margin-right:0 !important}
|
||||
.mr5{margin-right:5px !important}
|
||||
.mr10{margin-right:10px !important}
|
||||
.mr15{margin-right:15px !important}
|
||||
|
||||
.ml0{margin-left:0 !important}
|
||||
.ml5{margin-left:5px !important}
|
||||
.ml10{margin-left:10px !important}
|
||||
.ml15{margin-left:15px !important}
|
||||
.ml20{margin-left:20px !important}
|
||||
.ml22{margin-left:22px !important}
|
||||
.ml30{margin-left:30px !important}
|
||||
.ml40{margin-left:40px !important}
|
||||
.ml50{margin-left:50px !important}
|
||||
.ml55{margin-left:55px !important}
|
||||
|
||||
.ml-10{margin-left:-10px !important;}
|
||||
.ml-20{margin-left:-20px !important;}
|
||||
.ml-30{margin-left:-30px !important;}
|
||||
.ml-40{margin-left:-40px !important;}
|
||||
|
||||
/* padding */
|
||||
.p0 {padding:0 !important}
|
||||
.pd10 {padding:10px !important}
|
||||
.pd15 {padding:15px !important}
|
||||
.pd30 {padding:30px !important}
|
||||
.pt0 {padding-top:0 !important}
|
||||
.pt2 {padding-top:2px !important}
|
||||
.pt5 {padding-top:5px !important}
|
||||
.pt10 {padding-top:10px !important}
|
||||
.pt15 {padding-top:15px !important}
|
||||
.pt20 {padding-top:20px !important}
|
||||
.pt25 {padding-top:25px !important}
|
||||
.pt30 {padding-top:30px !important}
|
||||
.pt35 {padding-top:35px !important}
|
||||
.pt40 {padding-top:40px !important}
|
||||
.pb0 {padding-bottom:0 !important}
|
||||
.pb10 {padding-bottom:10px !important}
|
||||
.pb15 {padding-bottom:15px !important}
|
||||
.pb20 {padding-bottom:20px !important}
|
||||
.pb30 {padding-bottom:30px !important}
|
||||
.pl0 {padding-left:0px !important}
|
||||
.pl10 {padding-left:10px !important}
|
||||
.pl15 {padding-left:15px !important}
|
||||
.pl20 {padding-left:20px !important}
|
||||
.pl30 {padding-left:30px !important}
|
||||
.pr0 {padding-right:0px !important}
|
||||
.pr10 {padding-right:10px !important}
|
||||
.pr15 {padding-right:15px !important}
|
||||
.pr20 {padding-right:20px !important}
|
||||
.pr30 {padding-right:30px !important}
|
||||
|
||||
// width
|
||||
.wid10 {width:10% !important;}
|
||||
.wid20 {width:20% !important;}
|
||||
.wid30 {width:30% !important;}
|
||||
.wid40 {width:40% !important;}
|
||||
.wid50 {width:50% !important;}
|
||||
.wid60 {width:60% !important;}
|
||||
.wid70 {width:70% !important;}
|
||||
.wid80 {width:80% !important;}
|
||||
.wid90 {width:90% !important;}
|
||||
.wid100 {width:100% !important;}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,676 @@
|
||||
@mixin underline-effect($bg:rgb(var(--bs-red-origin))){
|
||||
&:hover::after{
|
||||
content: '';
|
||||
width:100%;
|
||||
height:2px;
|
||||
position:absolute;
|
||||
bottom:-5px;
|
||||
left:0%;
|
||||
background-color:$bg;
|
||||
transition:0.2s;
|
||||
animation: hover-line 0.2s linear;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin dot-effect {
|
||||
position: relative;
|
||||
&:hover::before {
|
||||
content: '';
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: 47%;
|
||||
background-color: rgb(var(--bs-red-origin));
|
||||
transition: 0.2s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
div.dt-processing {
|
||||
&> div:last-child {
|
||||
&> div {
|
||||
background-color: rgb(var(--bs-red)) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btns-memo-style{
|
||||
display:inline;
|
||||
width:auto;
|
||||
position:absolute;
|
||||
right:0;
|
||||
top:0;
|
||||
z-index:1;
|
||||
button{
|
||||
&:hover{
|
||||
i.bi::before{animation:sidebarShake 0.3s infinite linear alternate;}
|
||||
}
|
||||
&.active{
|
||||
color:rgb(var(--bs-red));
|
||||
}
|
||||
}
|
||||
}
|
||||
.dt-buttons .dt-button-down-arrow {display:none;}
|
||||
.table{table-layout:fixed; width:100%;
|
||||
.none{padding:50px 0; text-align:center;}
|
||||
.ico{display:inline-block; width:8px; height:8px; border-radius:50%;
|
||||
&.green{background:rgb(var(--bs-green));}
|
||||
&.red{background:rgb(var(--bs-red-danger));}
|
||||
}
|
||||
.nowrap{
|
||||
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
|
||||
}
|
||||
|
||||
.badge-0{
|
||||
display:none;
|
||||
}
|
||||
td{
|
||||
.regi-form {
|
||||
width:100%;
|
||||
textarea {
|
||||
width: calc(100% - 90px);
|
||||
}
|
||||
}
|
||||
.memo-item {
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
padding:10px 0;
|
||||
&:not(:last-child){
|
||||
border-bottom:2px dashed rgb(var(--bs-gray-pearl));
|
||||
}
|
||||
}
|
||||
.memo-list{float:left; width:75%;}
|
||||
.btn-budget{margin:1rem auto 0; display: flex; justify-content: space-between; width:80%; max-width:100px;
|
||||
button:hover{color: rgb(var(--bs-blue));}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-default{
|
||||
min-width:1400px;
|
||||
--bs-table-hover-bg:rgb(var(--bs-pink-pearl));
|
||||
--bs-table-striped-bg:rgba(var(--bs-black), 0.031);
|
||||
font-size:0.813rem;
|
||||
thead{
|
||||
th{font-size:0.875rem; text-align:center; vertical-align:middle; line-height:1.4; background-color: var(--bs-table-bg) !important;
|
||||
&:not(:last-child){border-right:1px dashed rgb(var(--bs-gray-pearl));}
|
||||
}
|
||||
tr.sum-row {
|
||||
th {background-color: rgb(var(--bs-gray-100)) !important;border-right:1px dashed rgb(var(--bs-dark));color:rgb(var(--bs-dark));}
|
||||
}
|
||||
}
|
||||
.data-total {
|
||||
th{
|
||||
background-color:rgb(var(--bs-white)) !important;
|
||||
color:rgb(var(--bs-black));
|
||||
font-size:100%;
|
||||
&:not(:last-child){border-right:1px dashed rgb(var(--bs-gray-pearl));}
|
||||
}
|
||||
}
|
||||
tfoot{
|
||||
td{background-color: rgb(var(--bs-gray-400)) !important;}
|
||||
}
|
||||
tbody{
|
||||
th{position:relative; font-weight:400; border-right:1px dashed rgb(var(--bs-gray-pearl));}
|
||||
td{position:relative; text-align:center; vertical-align:middle; word-break:break-word;
|
||||
&:not(:last-child){border-right:1px dashed rgb(var(--bs-gray-pearl));}
|
||||
}
|
||||
}
|
||||
.btn-area{position:absolute; bottom:4px; left:0; width:100%; box-sizing:border-box; padding:0 0.4rem;
|
||||
.btn{
|
||||
&.btn-outline-secondary{background:rgb(var(--bs-white));}
|
||||
&:hover,
|
||||
&:focus{background:var(--bs-btn-hover-bg);}
|
||||
}
|
||||
.btn-reflesh,
|
||||
.btn-paper{width:20px; height:20px; overflow:hidden; padding:0; font-size:0.750rem; line-height:20px;}
|
||||
.btn-arrow{width:20px; height:20px; overflow:hidden; padding:0; font-size:1.125rem; line-height:20px; border-radius:50%;}
|
||||
}
|
||||
}
|
||||
.table-event{ min-width:1400px;
|
||||
thead{
|
||||
th{font-size:13px; text-align:center; vertical-align:middle; line-height:1.4;
|
||||
&:not(:last-child){border-right:1px dashed rgb(var(--bs-gray-pearl));}
|
||||
}
|
||||
}
|
||||
td{padding:5px; font-size:13px; vertical-align:middle;}
|
||||
input[type="text"]{padding:5px; font-size:13px;}
|
||||
.r-border{border-right:1px dashed rgb(var(--bs-gray-pearl));}
|
||||
}
|
||||
.table-data{text-align:center;
|
||||
th,
|
||||
td{padding:20px 10px;}
|
||||
thead{
|
||||
th{background:rgb(var(--bs-white-spring));}
|
||||
}
|
||||
}
|
||||
.table-modal{font-size:13px; vertical-align:middle;
|
||||
thead{
|
||||
th{text-align:center; background:rgb(var(--bs-white-spring));}
|
||||
}
|
||||
.btn{margin:0 0 0 10px; font-size:13px;}
|
||||
td{
|
||||
input[type="text"]{height:25px;}
|
||||
}
|
||||
}
|
||||
.table-left-header{font-size:13px; vertical-align:middle;
|
||||
th{text-align:center; background:rgb(var(--bs-white-spring));}
|
||||
td{
|
||||
input,
|
||||
select{font-size:13px;}
|
||||
}
|
||||
.btn{min-width:80px;}
|
||||
* + .btn{margin-left:10px;}
|
||||
}
|
||||
.table-sm{min-width:1000px;}
|
||||
|
||||
table.dataTable{
|
||||
border-right: 1px dashed var(--bs-border-color);
|
||||
tr:not(:first-child) {
|
||||
th{
|
||||
&:last-of-type {border-right:1px dashed rgb(var(--bs-gray-pearl));}
|
||||
}
|
||||
}
|
||||
th, td{
|
||||
&.dt-type-center{
|
||||
text-align:center !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
div.dataTables_scrollBody{
|
||||
&>table{padding-bottom:3rem;}
|
||||
}
|
||||
//통합광고관리 - 캼페인 - 제목 아래 테이블 (~~건 결과) id="total" -> .data-total 변경
|
||||
// 현재 td 말고 th로 레이아웃 되어 있음 확인필요
|
||||
table thead .data-total td{color:rgb(var(--bs-black)); text-align:center;}
|
||||
.dt-buttons .btn-group .btn > span {font-size:.825em;}
|
||||
|
||||
|
||||
/* 2024024 이벤트 관리 페이지 css 추가 */
|
||||
.dtfh-floatingparent thead{
|
||||
&> tr > th,
|
||||
&> tr > td {text-align:center !important;}
|
||||
}
|
||||
|
||||
.sub-contents-wrap {
|
||||
.dt-container {
|
||||
table.dataTable {
|
||||
thead {
|
||||
tr {
|
||||
th, td {//통합광고관리
|
||||
text-align: center;
|
||||
}
|
||||
.sorting_asc:before,
|
||||
.sorting_desc:after {
|
||||
color: rgb(var(--bs-white));
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
tr{
|
||||
td {
|
||||
position:relative;
|
||||
padding:12px 0;
|
||||
&.drfc-fixed-left:last-child {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
&.abnormal {
|
||||
td {
|
||||
background-color: rgb(var(--bs-white-baja));
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
td {
|
||||
border-top: 5px solid rgb(var(--bs-gray-400));
|
||||
&:first-of-type {
|
||||
border-left: 5px solid rgb(var(--bs-gray-400));
|
||||
}
|
||||
&:last-of-type {
|
||||
border-right: 5px solid rgb(var(--bs-gray-400));
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active + tr.active {
|
||||
td {
|
||||
border-top:0;
|
||||
border-bottom: 5px solid rgb(var(--bs-gray-400));
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
&> * {
|
||||
box-shadow: inset 0 0 0 9999px rgba(var(--bs-black), 0.075);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tfoot {
|
||||
tr {
|
||||
th, td {
|
||||
text-align:center;
|
||||
}
|
||||
}
|
||||
}
|
||||
textarea{
|
||||
&.consultation {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
select{
|
||||
&.data-del {
|
||||
padding: 3px;
|
||||
border-radius: 4px;
|
||||
font-size: 98%;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
}
|
||||
button {
|
||||
&.save {
|
||||
background-color: rgb(var(--bs-blue-azure));
|
||||
color: rgb(var(--bs-white));
|
||||
margin-top: 0.25rem;
|
||||
padding: 0.4rem 1rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
&.delete {
|
||||
background-color: rgb(var(--bs-black));
|
||||
color: rgb(var(--bs-white));
|
||||
margin-top: 0.25rem;
|
||||
padding: 0.4rem 1rem;
|
||||
border-radius: 4px;
|
||||
transition: 0.5s;
|
||||
&:hover {
|
||||
box-shadow: inset 0 -3em 0 0 rgb(var(--bs-red-origin));
|
||||
}
|
||||
}
|
||||
}
|
||||
.media_box{//통합광고관리
|
||||
i{display:inline-block; width:28px; height:28px;}
|
||||
.facebook{
|
||||
@include bg('ico_facebook.png', center, 0);//var.scss
|
||||
background-size:100% auto;
|
||||
}
|
||||
.kakao{
|
||||
@include bg('ico_kakao.png', center, 0);//var.scss
|
||||
background-size:100% auto;
|
||||
}
|
||||
.google{
|
||||
@include bg('ico_google.png', center, 0);//var.scss
|
||||
background-size:100% auto;
|
||||
}
|
||||
}
|
||||
.codeBox{
|
||||
.codeBtn{
|
||||
padding:0;
|
||||
.bi-c-circle{
|
||||
font-size: 1.15rem;
|
||||
&:hover{cursor: pointer;}
|
||||
}
|
||||
}
|
||||
span{
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
.mediaName{
|
||||
p{margin-bottom:0.5rem; text-align: left;}
|
||||
button{position: absolute !important; bottom: 0; right: 0;
|
||||
i{font-size: 1.25rem;}
|
||||
}
|
||||
|
||||
}
|
||||
.landing-box{
|
||||
> button{display: block; margin: 0 auto;}
|
||||
}
|
||||
//select 통합광고관리
|
||||
select.form-select{font-size:0.75rem; background-position:right .25rem center; padding: .375rem 0.25rem .375rem .35rem; background-size:10px 10px; position: absolute; top:44%; left:50%; transform: translate(-50%, -50%); width:88%;}
|
||||
button.btn-history{position: absolute; bottom: 0; right: 0;}
|
||||
.is_stop{color:rgb(var(--bs-red-origin));}
|
||||
}
|
||||
}
|
||||
//자동화 목록 사용중
|
||||
.dt-container{
|
||||
.dt-button-collection{
|
||||
.dt-button-split{display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; align-items: stretch;
|
||||
button.dt-button{margin: 0; display: inline-block; width: 0; flex-grow: 1; flex-shrink: 0; flex-basis: 50px;
|
||||
&:first-child{padding-right: 3em;}
|
||||
&:last-child{margin-left: -1px; padding-left: 0.75em; padding-right: 0.75em; z-index: 2;}
|
||||
}
|
||||
button.dt-button-split-drop{min-width: 33px; flex: 0;}
|
||||
}
|
||||
}
|
||||
.dt-buttons{z-index:1; text-align: left; margin-bottom:1rem;
|
||||
i.bi-list{color:rgb(var(--bs-dark-metal)); transition:all 0.3s; font-size:150%;
|
||||
&:hover::before{animation:rotate-turn 0.3s infinite linear alternate;}
|
||||
}
|
||||
}
|
||||
.paging{
|
||||
padding-top:1.755em;
|
||||
position:sticky;
|
||||
bottom:0;
|
||||
background-color:rgb(var(--bs-white-spring));
|
||||
}
|
||||
.dataTables_length{
|
||||
margin-bottom:2rem;
|
||||
select{
|
||||
padding:0.2rem 1rem;
|
||||
background-color:rgb(var(--bs-white));
|
||||
border-radius:4px;
|
||||
border:1px dashed rgb(var(--bs-dark-metal));}
|
||||
}
|
||||
.dt-info{
|
||||
text-align:left;
|
||||
i.bi{
|
||||
display:inline-block;
|
||||
vertical-align:top;
|
||||
padding-right:6px;
|
||||
font-size:110%;
|
||||
color:rgb(var(--bs-red-origin));
|
||||
}
|
||||
> span{position:relative;
|
||||
&:hover{
|
||||
font-weight:900;
|
||||
}
|
||||
@include underline-effect($bg:rgb(var(--bs-gray-gunsmoke)));
|
||||
}
|
||||
}
|
||||
}
|
||||
.ads_status.enabled, .ads_status.disabled {position:absolute;left:12px;top:50%;transform:translate(0,-50%);}
|
||||
// .event_seq {padding:0 0 0 18px;}
|
||||
.btn_search {position:absolute;right:0;bottom:0;z-index:1;padding:5px;}
|
||||
.another_url{position:absolute; right:-10px;top:-7px; font-size:470%;opacity:.3;}
|
||||
a[target=event_pop] {
|
||||
display:block;position:relative;z-index:1;
|
||||
}
|
||||
}
|
||||
|
||||
//통합광고관리
|
||||
.table.advLogTable.dataTable{
|
||||
&>thead.table-dark {
|
||||
tr {
|
||||
th {
|
||||
background:rgb(var(--bs-black));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//계정별통계 팝업 table
|
||||
.sub-contents-wrap {
|
||||
table.dataTable.accountStatTable {
|
||||
border-bottom:1px solid var(--bs-border-color);
|
||||
thead {
|
||||
tr {
|
||||
th {
|
||||
padding:10px;
|
||||
background: rgb(var(--bs-white-spring));
|
||||
border-left-width: 1px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
tr {
|
||||
td {
|
||||
font-size: 13px;
|
||||
border-left-width: 1px;
|
||||
padding:10px;
|
||||
word-break:break-all;
|
||||
.media_box i{
|
||||
width:20px;
|
||||
height:20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tfoot {
|
||||
tr {
|
||||
th {
|
||||
font-size: 13px;
|
||||
padding:10px 5px;
|
||||
border-top-width:1px;
|
||||
border-left-width:1px;
|
||||
border-bottom:1px solid rgb(var(--bs-red-primary));
|
||||
background-color:rgb(var(--bs-white-spring));
|
||||
word-break:break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//20240724 통합DB 테스트 시 테이블 표기 추가
|
||||
.db-manage-contaniner {
|
||||
.deviceTable {
|
||||
tbody {
|
||||
tr {
|
||||
&.on {
|
||||
td {
|
||||
background-color:rgb(var(--bs-gray-soft-peach));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 20240516 테이블 너비 조절
|
||||
div.dt-scroll-head {
|
||||
table.dataTable {
|
||||
width:100% !important;
|
||||
}
|
||||
}
|
||||
div.dt-scroll-body {
|
||||
table.table.dataTable{
|
||||
width:100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//통합DB관리 페이징 & 모달 자동화등록 팝업 검색 후 페이지네이션
|
||||
.dt-paging{
|
||||
float:unset; text-align: center; padding-top:1.755em; padding-bottom:1.755em;
|
||||
.dt-paging-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.db-table-responsive {position:relative;}
|
||||
|
||||
//회원관리 - 광고주/광고대행사 팝업
|
||||
.company-contaniner{
|
||||
table.dataTable.adAccountListTable {
|
||||
text-align: center;
|
||||
border-bottom: 1px solid rgb(var(--bs-gray-300));
|
||||
thead {
|
||||
tr{
|
||||
&:first-child {
|
||||
th{
|
||||
border-bottom: 1px solid rgb(var(--bs-gray-300));
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
padding:.5rem .5rem;
|
||||
background-color:rgb(var(--bs-white-spring));
|
||||
color:rgb(var(--bs-black));
|
||||
border-left: 1px solid rgb(var(--bs-gray-300));
|
||||
border-top: 1px solid rgb(var(--bs-gray-300));
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody tr{
|
||||
th{
|
||||
&:nth-child(2){width:20%;}
|
||||
&:nth-child(3){width:15%;}
|
||||
&:nth-child(4){width:25%;}
|
||||
}
|
||||
td{
|
||||
border-left: 1px solid rgb(var(--bs-gray-300));
|
||||
padding:.3rem 0 !important;
|
||||
&:nth-child(2){width:20%;}
|
||||
&:nth-child(3){width:15%;}
|
||||
&:nth-child(4){width:25%;}
|
||||
&.dt-empty {
|
||||
padding:1rem 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
table.dataTable.userTable {
|
||||
text-align: center;
|
||||
border-bottom: 1px solid rgb(var(--bs-gray-300));
|
||||
thead {
|
||||
tr{
|
||||
&:first-child {
|
||||
th{
|
||||
border-bottom: 1px solid rgb(var(--bs-gray-300));
|
||||
}
|
||||
}
|
||||
th {
|
||||
padding:.5rem .5rem;
|
||||
background-color:rgb(var(--bs-white-spring));
|
||||
color:rgb(var(--bs-black));
|
||||
border-left: 1px solid rgb(var(--bs-gray-300));
|
||||
border-top: 1px solid rgb(var(--bs-gray-300));
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody tr{
|
||||
td{
|
||||
border-left: 1px solid rgb(var(--bs-gray-300));
|
||||
padding:.3rem 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//시간차관리 datatable
|
||||
.dayOffModal {
|
||||
.dataTable.table-modal {
|
||||
border-bottom-width:1px;
|
||||
width:100%;
|
||||
thead{
|
||||
tr{
|
||||
th{
|
||||
background:rgb(var(--bs-white-spring));
|
||||
border-left-width:1px;
|
||||
text-align:center;
|
||||
}
|
||||
&:last-child{
|
||||
th{
|
||||
border-bottom-width:1px;
|
||||
}
|
||||
}
|
||||
&:not(first-child) {
|
||||
th {
|
||||
&:last-of-type{
|
||||
border-right:1px solid rgb(var(--bs-gray-pearl));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody{
|
||||
tr{
|
||||
td{
|
||||
border-left-width:1px;
|
||||
}
|
||||
&:last-child{
|
||||
td {
|
||||
border-bottom-width:1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.issueDetail {
|
||||
table.dataTable.table-bordered {
|
||||
thead {
|
||||
tr{
|
||||
&:first-child {
|
||||
th{
|
||||
border-bottom: 1px solid rgb(var(--bs-gray-300));
|
||||
}
|
||||
}
|
||||
th {
|
||||
padding:.5rem .5rem;
|
||||
background-color:rgb(var(--bs-white-spring));
|
||||
color:rgb(var(--bs-black));
|
||||
border-left: 1px solid rgb(var(--bs-gray-300));
|
||||
border-top: 1px solid rgb(var(--bs-gray-300));
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody{
|
||||
tr{
|
||||
&:last-child {
|
||||
td{
|
||||
border-bottom-width:1px;
|
||||
}
|
||||
}
|
||||
td{
|
||||
|
||||
border-left-width:1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.dt-container{
|
||||
.col-md-7{width:100%;}
|
||||
.col-md-5{width:auto;}
|
||||
}
|
||||
}
|
||||
|
||||
@include x-large{//1400px
|
||||
|
||||
}
|
||||
|
||||
@include large{//1200px
|
||||
}
|
||||
@include medium{//1024px
|
||||
.table-data{text-align:center;
|
||||
th,
|
||||
td{padding:10px;}
|
||||
}
|
||||
}
|
||||
@include small{//768px
|
||||
|
||||
}
|
||||
@@ -0,0 +1,205 @@
|
||||
//bootstrap color
|
||||
:root{
|
||||
// red & pink
|
||||
--bs-red:220, 53, 69; //#dc3545
|
||||
--bs-red-primary:206, 25, 34; //#ce1922
|
||||
--bs-red-danger:220, 53, 69; //#dc3545
|
||||
--bs-red-lava:233, 27, 37; //#e91b25
|
||||
--bs-red-chili:205, 22, 38; //#cd1626
|
||||
--bs-red-origin:255, 0, 0; //#ff0000
|
||||
--bs-red-bright:253, 13, 13; //#FD0D0D
|
||||
--bs-red-rose-madder:223, 23, 43; //#DF172B
|
||||
--bs-red-cornell:177, 31, 31; //#B11F1F
|
||||
--bs-pink:214, 51, 132; //#d63384
|
||||
--bs-pink-peach:255, 147, 147; //#ff9393
|
||||
--bs-pink-pearl:255, 235, 235; //#ffebeb
|
||||
--bs-pink-salmon:248, 126, 126; //#f87e7e
|
||||
--bs-pink-magenta:255, 0, 255; //#FF00FF
|
||||
--bs-pink-limited:243, 108, 214; //#f36cd6
|
||||
--bs-pink-light-rose:255, 199, 209; //#FFC7D1
|
||||
// orange & yellow
|
||||
--bs-coral-light:229, 132, 137; //#E58489
|
||||
--bs-orange:253, 126, 20; //#fd7e14
|
||||
--bs-orange-mango:255, 139, 51; //#FF8B33
|
||||
--bs-orange-tahiti:255, 128, 0;//#FF8000
|
||||
--bs-orange-sand:226, 148, 117;//#E29475
|
||||
--bs-yellow:255, 193, 7; //#ffc107
|
||||
--bs-yellow-orange:255, 165, 0; //#FFA500
|
||||
--bs-yellow-beer:255, 179, 16; //#FFB310
|
||||
// green & blue & purple
|
||||
--bs-green:25, 135, 84; //#198754
|
||||
--bs-green-teal:32, 201, 151; //#20c997
|
||||
--bs-green-clover:40, 167, 69; //#28A745
|
||||
--bs-green-mid:60, 166, 91; //#3CA65B
|
||||
--bs-green-olive:172, 221, 109;//#acdd6d
|
||||
--bs-blue:13, 110, 253; //#0d6efd
|
||||
--bs-blue-powder:192, 219, 234; //#C0DBEA
|
||||
--bs-blue-biloba-flower:153, 170, 238; //#99AAEE
|
||||
--bs-blue-light-steel:114, 134, 211; //#7286D3
|
||||
--bs-blue-cyan:13, 202, 240; //#0dcaf0
|
||||
--bs-blue-info:13, 202, 240; //#0dcaf0
|
||||
--bs-blue-azure:0, 157, 255; //#009dff
|
||||
--bs-blue-kashmir:78, 108, 163; //#4E6CA3
|
||||
--bs-blue-science:2, 98, 205; //#0262cd
|
||||
--bs-blue-crystal:110, 168, 254; //#6EA8FE
|
||||
--bs-blue-origin:0, 0, 255; //#0000ff
|
||||
--bs-blue-cobalt:28, 28, 205; //#1c1ccd
|
||||
--bs-blue-deep-sky:0, 123, 255;//#007BFF
|
||||
--bs-blue-royal-azure:1, 67, 163;//0143a3
|
||||
--bs-blue-dodger-blue:61, 136, 250;//#3D88FA
|
||||
--bs-blue-soft:95, 145, 251;//#5f91fb
|
||||
--bs-purple:111, 66, 193; //#6f42c1
|
||||
--bs-purple-indigo:102, 16, 242; //#6610f2
|
||||
//brown
|
||||
--bs-brown-quicksand:177, 155, 143;//#B19B8F
|
||||
--bs-brown-taupe:107, 82, 69;//#6B5245
|
||||
// white
|
||||
--bs-white:255, 255, 255; //#ffffff
|
||||
--bs-white-smoke:245, 245, 245; //#F5F5F5
|
||||
--bs-white-spring:247, 247, 247; //#f7f7f7
|
||||
--bs-white-snow:249, 249, 249; //#f9f9f9
|
||||
--bs-white-porcelain:242, 242, 242; //#f2f2f2
|
||||
--bs-white-baja:255, 250, 209; //#fffad1
|
||||
--bs-white-seaShell:240, 240, 240;//##F0F0F0
|
||||
--bs-white-smoke:245, 245, 247;//#F5F5F7
|
||||
--bs-white-green:223, 240, 216;//#DFF0D8
|
||||
// silver & gray
|
||||
--bs-silver:199, 199, 199; //#c7c7c7
|
||||
--bs-silver-chalice:172, 174, 175; //#ACAEAF
|
||||
--bs-silver-aluminium:170, 170, 170; //#AAAAAA
|
||||
--bs-gray:108, 117, 125; //#6c757d
|
||||
--bs-gray-100:248, 249, 250; //#f8f9fa
|
||||
--bs-gray-200:233, 236, 239; //#e9ecef
|
||||
--bs-gray-250:233, 233, 233; //#e9e9e9
|
||||
--bs-gray-300:222, 226, 230; //#dee2e6
|
||||
--bs-gray-400:206, 212, 218; //#ced4da
|
||||
--bs-gray-500:173, 181, 189; //#adb5bd
|
||||
--bs-gray-600:146, 146, 146; //#929292
|
||||
--bs-gray-700:73, 80, 87; //#495057
|
||||
--bs-gray-800:52, 58, 64; //#343a40
|
||||
--bs-gray-dust:209, 209, 209; //#D1D1D1
|
||||
--bs-gray-cloud:181, 181, 181; //#B5B5B5
|
||||
--bs-gray-pastel:204, 204, 204; //#CCCCCC
|
||||
--bs-gray-ghost:203, 203, 203; //#CBCBCB
|
||||
--bs-gray-pastel-lavender:206, 206, 206; //#CECECE
|
||||
--bs-gray-dust-storm:207, 207, 207;//#cfcfcf
|
||||
--bs-gray-iron-sky:203, 211, 218;//#CBD3DA
|
||||
--bs-gray-cottonSeed:193, 185, 185;//#C1B9B9
|
||||
--bs-gray-dawn:162, 162, 162; //#A2A2A2
|
||||
--bs-gray-ash:187, 187, 187; //#bbbbbb
|
||||
--bs-gray-ashPink:186, 186, 186; //#bababa
|
||||
--bs-gray-softPeach:237, 237, 237; //#ededed
|
||||
--bs-gray-platinum:226, 226, 226; //#E2E2E2
|
||||
--bs-gray-soft:235, 235, 235; //#EBEBEB
|
||||
--bs-gray-soft-peach:239, 239, 239;//#efefef
|
||||
--bs-gray-gainsBoro:219, 219, 219; //#DBDBDB
|
||||
--bs-gray-moon-mist:221, 221, 221; //#DDDDDD
|
||||
--bs-gray-pearl:223, 223, 223; //#dfdfdf
|
||||
--bs-gray-gunsmoke:135, 135, 135; //#878787
|
||||
--bs-gray-border:195, 195, 195; //#c3c3c3
|
||||
--bs-gray-wenge:85, 85, 85; //#555555
|
||||
--bs-gray-charcoal:64, 69, 73; //#404549
|
||||
--bs-gray-gravel:64, 67, 70; //#404346
|
||||
--bs-gray-boulder:119, 119, 119; //#787676
|
||||
--bs-gray-quill:213, 213, 213;//#D5D5D5
|
||||
--bs-gray-granite:124, 124, 124;//#C7C7C7C
|
||||
--bs-gray-medium:127, 127, 127;//#7F7F7F
|
||||
--bs-gray-monsoon:136, 136, 136;//#888888
|
||||
//dark & black
|
||||
--bs-dark:33, 37, 41; //#212529
|
||||
--bs-dark-dune:51, 51, 51; //#333333
|
||||
--bs-dark-mirage:34, 34, 34; //#222222
|
||||
--bs-dark-metal:45, 46, 52; //#2d2e34
|
||||
--bs-dark-charcoal:47, 52, 56; //#2F3438
|
||||
--bs-dark-onyx: 14, 14, 14; //#0E0E0E
|
||||
--bs-dark-night: 9, 10, 11; //#090A0B
|
||||
--bs-dark-sea:40, 40, 40; //#282828
|
||||
--bs-dark-deep:33, 33, 33; //#212121
|
||||
--bs-dark-green:24, 22, 19;//#181613
|
||||
--bs-black:0, 0, 0; //#000000
|
||||
--bs-black-eel:68, 68, 68; //#444444
|
||||
--bs-black-cement:45, 46, 52; //#2D2E34
|
||||
}
|
||||
|
||||
|
||||
|
||||
//mixin
|
||||
@mixin bold{
|
||||
font-weight:600;
|
||||
font-variation-settings:"wght" 600;
|
||||
}
|
||||
@mixin clear{
|
||||
&:after{clear:both; display:block; content:'';}
|
||||
}
|
||||
// $pos는 배경 이미지의 반복 방향을 지정. $x와 $y는 배경 이미지의 위치를 지정.
|
||||
@mixin repeat-bg($imgpath, $pos, $x, $y){
|
||||
background:url('/img/'+$imgpath) repeat-#{$pos} $x $y;
|
||||
}
|
||||
@mixin color-bg($bg-color, $imgpath, $x, $y){
|
||||
background:$bg-color url('/img/'+$imgpath) no-repeat $x $y;
|
||||
}
|
||||
@mixin bg($imgpath, $x, $y){
|
||||
background:url('/img/'+$imgpath) no-repeat $x $y;
|
||||
}
|
||||
@mixin ellipsis($line-cnt){
|
||||
display:-webkit-box; overflow:hidden; text-overflow: ellipsis; -webkit-line-clamp: $line-cnt; -webkit-box-orient:vertical;
|
||||
}
|
||||
|
||||
|
||||
//reponsive
|
||||
$breakpoint-sm-mobile:300px;
|
||||
$breakpoint-md-mobile:415px;
|
||||
$breakpoint-lg-mobile:500px;
|
||||
|
||||
$small: 768px;
|
||||
$medium: 1024px;
|
||||
$breakpoint-tablet:1024px;
|
||||
$large: 1200px;
|
||||
$x-large: 1400px;
|
||||
//$breakpoint-desktop:1920px;
|
||||
|
||||
|
||||
@mixin mobile-375{
|
||||
@media screen and (max-width : #{$breakpoint-sm-mobile}){
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin mobile-415{
|
||||
@media screen and (max-width : #{$breakpoint-md-mobile}){
|
||||
$input-pd:0.93rem !global; //먹히지 않음
|
||||
$icon-pd:3.43rem !global; //먹히지 않음
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin mobile-500{
|
||||
@media screen and (max-width : #{$breakpoint-lg-mobile}){
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin small{
|
||||
@media screen and (max-width:$small){
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin medium{
|
||||
@media screen and (max-width: $medium){
|
||||
@content;
|
||||
}
|
||||
}
|
||||
//medium과 동일함
|
||||
@mixin tablet-1024{
|
||||
@media screen and (max-width : #{$breakpoint-tablet}){
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin large{
|
||||
@media screen and (max-width: $large){
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin x-large{
|
||||
@media screen and (max-width: $x-large){
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Vendored
+33
File diff suppressed because one or more lines are too long
@@ -0,0 +1,86 @@
|
||||
{
|
||||
"emptyTable": "데이터가 없습니다",
|
||||
"info": "_START_ - _END_ / _TOTAL_",
|
||||
"infoEmpty": "0 - 0 / 0",
|
||||
"infoFiltered": "(총 _MAX_ 개)",
|
||||
"infoThousands": ",",
|
||||
"lengthMenu": "페이지당 줄수 _MENU_",
|
||||
"loadingRecords": "읽는중...",
|
||||
"processing": "처리중...",
|
||||
"search": "검색:",
|
||||
"zeroRecords": "검색 결과가 없습니다",
|
||||
"paginate": {
|
||||
"first": "처음",
|
||||
"last": "마지막",
|
||||
"next": "다음",
|
||||
"previous": "이전"
|
||||
},
|
||||
"aria": {
|
||||
"sortAscending": ": 내림차순 정렬",
|
||||
"sortDescending": ": 오름차순 정렬"
|
||||
},
|
||||
"buttons": {
|
||||
"copyKeys": "ctrl키 나 u2318 + C키로 테이블 데이터를 시스텝 복사판에서 복사하고 취소하려면 이 메시지를 클릭하거나 ESC키를 누르면됩니다. to copy the table data to your system clipboard. To cancel, click this message or press escape.",
|
||||
"copySuccess": {
|
||||
"1": "1행을 복사판에서 복사됨",
|
||||
"_": "%d행을 복사판에서 복사됨"
|
||||
},
|
||||
"copyTitle": "복사판에서 복사",
|
||||
"csv": "CSV",
|
||||
"excel": "<i class=\"bi bi-filetype-xls\"></i> 엑셀",
|
||||
"pageLength": {
|
||||
"-1": "모든 행 보기",
|
||||
"_": "%d행 보기"
|
||||
},
|
||||
"pdf": "<i class=\"bi bi-filetype-pdf\"></i> PDF",
|
||||
"print": "인쇄",
|
||||
"collection": "모음",
|
||||
"colvis": "컬럼 보기",
|
||||
"colvisRestore": "보기 복원",
|
||||
"copy": "<i class=\"bi bi-clipboard\"></i> 복사",
|
||||
"createState" : "필터생성",
|
||||
"removeAllStates" : "전체삭제",
|
||||
"savedStates" : "저장된 필터",
|
||||
"updateState" : "변경",
|
||||
"renameState" : "이름변경",
|
||||
"removeState" : "필터삭제",
|
||||
"stateRestore" : "검색필터 %d"
|
||||
},
|
||||
"stateRestore" : {
|
||||
"renameTitle" : "이름 변경하기",
|
||||
"renameLabel" : "\"%s\" 에서 새 이름으로:",
|
||||
"renameButton" : "이름변경",
|
||||
"removeTitle" : "필터 삭제하기",
|
||||
"removeConfirm" : "%s 을(를) 정말 삭제하시겠습니까?",
|
||||
"duplicateError": "이미 존재하는 이름입니다.",
|
||||
"emptyError": "이름은 비워둘 수 없습니다.",
|
||||
"emptyStates": "저장된 필터가 없습니다.",
|
||||
"removeError": "필터 삭제에 실패하였습니다.",
|
||||
"removeJoiner": " 과(와) ",
|
||||
"removeSubmit": "삭제"
|
||||
},
|
||||
"searchBuilder": {
|
||||
"add": "조건 추가",
|
||||
"button": {
|
||||
"0": "빌더 조회",
|
||||
"_": "빌더 조회(%d)"
|
||||
},
|
||||
"clearAll": "모두 지우기",
|
||||
"condition": "조건",
|
||||
"data": "데이터",
|
||||
"deleteTitle": "필터 규칙을 삭제",
|
||||
"logicAnd": "And",
|
||||
"logicOr": "Or",
|
||||
"title": {
|
||||
"0": "빌더 조회",
|
||||
"_": "빌더 조회(%d)"
|
||||
},
|
||||
"value": "값"
|
||||
},
|
||||
"autoFill": {
|
||||
"cancel": "취소",
|
||||
"fill": "모든 셀에서 <i>%d<i>을(를) 삽입</i></i>",
|
||||
"fillHorizontal": "수평 셀에서 값을 삽입",
|
||||
"fillVertical": "수직 설에서 값을 삽입"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
//원복
|
||||
// $(function(){
|
||||
// $('.left-side .nav li button').on('click', function(){
|
||||
// $('.left-side').addClass('open');
|
||||
|
||||
// let width = window.innerWidth;
|
||||
// let open = $('.left-side');
|
||||
|
||||
// if(width<= 500 && open.hasClass('open')){
|
||||
// $('.left-side .nav li button').on('click', function(){
|
||||
// $('.left-side').toggleClass('open');
|
||||
// }
|
||||
// )}
|
||||
// });
|
||||
// });
|
||||
|
||||
|
||||
// $(function(){
|
||||
// $('.left-side .nav li button').on('click', function(){
|
||||
// //$('.left-side').toggleClass('hide');
|
||||
|
||||
// let width = window.innerWidth;
|
||||
// let open = $('.left-side');
|
||||
|
||||
|
||||
// // if(width<= 500 && open.hasClass('hide')){
|
||||
// // $('.left-side .nav li button').on('click', function(){
|
||||
// // $('.left-side').toggleClass('hide');
|
||||
// // }
|
||||
// // )}
|
||||
|
||||
// menu_class();
|
||||
// console.log(localStorage.btn,result);
|
||||
// });
|
||||
// });
|
||||
|
||||
|
||||
+2
File diff suppressed because one or more lines are too long
Vendored
+13
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+22
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,701 @@
|
||||
(function ($) {
|
||||
'use strict';
|
||||
|
||||
var serialize = function (data, accuracy) {
|
||||
accuracy = accuracy > 0 ? accuracy : 1;
|
||||
var chunkSize = 24 * accuracy;
|
||||
var res = [];
|
||||
var i = 0;
|
||||
for (i = 0; i < chunkSize * 7; i++) {
|
||||
res[i] = 0;
|
||||
}
|
||||
for (i = 0; i < 7; i++) {
|
||||
var row = data[i + 1];
|
||||
if (!row) {continue;}
|
||||
for (var j = 0, rowLen = row.length; j < rowLen; j++) {
|
||||
res[i * chunkSize + row[j]] = 1;
|
||||
}
|
||||
}
|
||||
|
||||
return res.join('');
|
||||
};
|
||||
|
||||
var parse = function (strSequence, accuracy) {
|
||||
accuracy = accuracy > 0 ? accuracy : 1;
|
||||
var chunkSize = 24 * accuracy;
|
||||
var res = {};
|
||||
for (var i = 0, row = 1, len = strSequence.length; i < len; i++) {
|
||||
var col = i % chunkSize;
|
||||
if (strSequence[i] === '1') {
|
||||
!res[row] && (res[row] = []);
|
||||
res[row].push(col);
|
||||
}
|
||||
if ((i + 1) % chunkSize === 0) {
|
||||
row++;
|
||||
}
|
||||
}
|
||||
|
||||
return res;
|
||||
};
|
||||
|
||||
var toStr = function (currentSelectRange) {
|
||||
return Object.prototype.toString.call(currentSelectRange);
|
||||
};
|
||||
// it only does '%s', and return '' when arguments are undefined
|
||||
var sprintf = function (str) {
|
||||
var args = arguments;
|
||||
var flag = true;
|
||||
var i = 1;
|
||||
|
||||
str = str.replace(/%s/g, function () {
|
||||
var arg = args[i++];
|
||||
|
||||
if (typeof arg === 'undefined') {
|
||||
flag = false;
|
||||
return '';
|
||||
}
|
||||
return arg;
|
||||
});
|
||||
return flag ? str : '';
|
||||
};
|
||||
|
||||
/**
|
||||
* Return an interger array of ascending range form 'form' to 'to'.
|
||||
* @param {Number} form
|
||||
* @param {Number} to
|
||||
* @return {Array}
|
||||
*/
|
||||
var makeRange = function (from, to) {
|
||||
// 保证 from <= to
|
||||
if (from > to) {
|
||||
from = from + to;
|
||||
to = from - to;
|
||||
from = from - to;
|
||||
}
|
||||
|
||||
var res = [];
|
||||
for (var i = from; i <= to; i++) {
|
||||
res.push(i);
|
||||
}
|
||||
return res;
|
||||
};
|
||||
|
||||
var makeMatrix = function (startCoord, endCoord) {
|
||||
var matrix = {};
|
||||
var colArr = makeRange(startCoord[1], endCoord[1]);
|
||||
var fromRow = startCoord[0] < endCoord[0] ? startCoord[0] : endCoord[0];
|
||||
var steps = Math.abs(startCoord[0] - endCoord[0]) + 1;
|
||||
for (var i = 0; i < steps; i++) {
|
||||
matrix[fromRow + i] = colArr.slice(0);
|
||||
}
|
||||
return matrix;
|
||||
};
|
||||
|
||||
/**
|
||||
* Merge to arrays, return an new array.
|
||||
* @param {Array} origin
|
||||
* @param {Array} addition
|
||||
*/
|
||||
var mergeArray = function (origin, addition) {
|
||||
var hash = {};
|
||||
var res = [];
|
||||
|
||||
origin.forEach(function (item, i) {
|
||||
hash[item] = 1;
|
||||
res[i] = item;
|
||||
});
|
||||
|
||||
addition.forEach(function (item) {
|
||||
if (!hash[item]) {
|
||||
res.push(item);
|
||||
}
|
||||
});
|
||||
|
||||
return res.sort(function (num1, num2) {
|
||||
return num1 - num2;
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 去当前数组中去除指定集合，返回新数组
|
||||
* @param {Array} origin 原数组
|
||||
* @param {Array} reject 要去除的数组
|
||||
*/
|
||||
var rejectArray = function (origin, reject) {
|
||||
var hash = {};
|
||||
var res = [];
|
||||
|
||||
reject.forEach(function (item, i) {
|
||||
hash[item] = i;
|
||||
});
|
||||
|
||||
origin.forEach(function (item) {
|
||||
if (!hash.hasOwnProperty(item)) {
|
||||
res.push(item);
|
||||
}
|
||||
});
|
||||
|
||||
return res.sort(function (num1, num2) {
|
||||
return num1 - num2;
|
||||
});
|
||||
};
|
||||
|
||||
// 选择模式
|
||||
var SelectMode = {
|
||||
JOIN: 1, // 合并模式，添加到选区
|
||||
MINUS: 2, // 减去模式，从之前的选区中减去
|
||||
REPLACE: 3, // 替换模式，弃用之前的选区，直接使用给定的选区作为最终值
|
||||
NONE: 0
|
||||
};
|
||||
|
||||
var Scheduler = function (el, options) {
|
||||
this.$el = $(el);
|
||||
if (!this.$el.is('table')) {
|
||||
this.$el = $('<table></table>').appendTo(this.$el);
|
||||
}
|
||||
|
||||
// 自定义项
|
||||
this.options = options;
|
||||
// 选择模式
|
||||
this.selectMode = SelectMode.NONE;
|
||||
this.startCoord = null;
|
||||
this.endCoord = null;
|
||||
// 控件的数据对象，所有操作不会更改 this.options.data
|
||||
this.data = $.extend(true, {}, this.options.data);
|
||||
this.init();
|
||||
};
|
||||
|
||||
// 默认项
|
||||
Scheduler.DEFAULTS = {
|
||||
locale: 'en', // i18n
|
||||
accuracy: 1, // how many cells of an hour
|
||||
data: [], // selected cells
|
||||
footer: true,
|
||||
multiple: true,
|
||||
disabled: false,
|
||||
// event callbacks
|
||||
onDragStart: $.noop,
|
||||
onDragMove: $.noop,
|
||||
onDragEnd: $.noop,
|
||||
onSelect: $.noop,
|
||||
onRender: $.noop
|
||||
};
|
||||
|
||||
// Language
|
||||
Scheduler.LOCALES = {};
|
||||
|
||||
// Simplified Chinese
|
||||
Scheduler.LOCALES['zh-cn'] = Scheduler.LOCALES.zh = {
|
||||
AM: '上午',
|
||||
PM: '下午',
|
||||
TIME_TITLE: '时间',
|
||||
WEEK_TITLE: '星期',
|
||||
WEEK_DAYS: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
|
||||
DRAG_TIP: '可拖动鼠标选择时间段',
|
||||
RESET: '清空选择'
|
||||
};
|
||||
|
||||
// English
|
||||
Scheduler.LOCALES['en-US'] = Scheduler.LOCALES.en = {
|
||||
AM: 'AM',
|
||||
PM: 'PM',
|
||||
TIME_TITLE: 'TIME',
|
||||
WEEK_TITLE: 'DAY',
|
||||
WEEK_DAYS: ['MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY', 'SUNDAY'],
|
||||
DRAG_TIP: 'Drag to select hours',
|
||||
RESET: 'Reset Selected'
|
||||
};
|
||||
|
||||
// Template
|
||||
Scheduler.TEMPLATES = {
|
||||
HALF_DAY_ROW: '<tr>' +
|
||||
'<th rowspan="2" class="slash">' +
|
||||
'<div class="scheduler-time-title">%s</div>' +
|
||||
'<div class="scheduler-week-title">%s</div>' +
|
||||
'</th>' +
|
||||
'<th class="scheduler-half-toggle" data-half-toggle="1" colspan="%s">%s</th>' +
|
||||
'<th class="scheduler-half-toggle" data-half-toggle="2" colspan="%s">%s</th>' +
|
||||
'</tr>',
|
||||
HOUR_HEAD_CELL: '<th class="scheduler-hour-toggle" data-hour-toggle="%s" colspan="%s">%s</th>',
|
||||
DAY_ROW: '<tr data-index="%s"><td class="scheduler-day-toggle" data-day-toggle="%s">%s</td>%s</tr>',
|
||||
HOUR_CELL: '<td class="scheduler-hour%s" data-row="%s" data-col="%s"></td>',
|
||||
FOOT_ROW: '<tr><td colspan="%s"><div class="scheduler-control-wrap"><span class="scheduler-tips">%s</span><a class="scheduler-reset">%s</a></div></td></tr>'
|
||||
};
|
||||
|
||||
// Util
|
||||
Scheduler.Util = {
|
||||
parse: parse,
|
||||
serialize: serialize
|
||||
};
|
||||
|
||||
var proto = Scheduler.prototype;
|
||||
|
||||
proto.init = function () {
|
||||
this.initLocale();
|
||||
this.initTable();
|
||||
this.options.onRender.call(this.$el);
|
||||
};
|
||||
|
||||
proto.initLocale = function () {
|
||||
var me = this;
|
||||
if (me.options.locale) {
|
||||
var parts = me.options.locale.toLowerCase().split(/-|_/);
|
||||
if (parts[1]) {
|
||||
parts[1] = parts[1].toUpperCase();
|
||||
}
|
||||
if ($.fn.scheduler.locales[me.options.locale]) {
|
||||
// locale as requested
|
||||
$.extend(me.options, $.fn.scheduler.locales[me.options.locale]);
|
||||
} else if ($.fn.scheduler.locales[parts.join('-')]) {
|
||||
// locale with sep set to - (in case original was specified with _)
|
||||
$.extend(me.options, $.fn.scheduler.locales[parts.join('-')]);
|
||||
} else if ($.fn.scheduler.locales[parts[0]]) {
|
||||
// short locale language code (i.e. 'en')
|
||||
$.extend(me.options, $.fn.scheduler.locales[parts[0]]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
proto.initTable = function () {
|
||||
this.$el.addClass('scheduler');
|
||||
if (this.options.disabled) {
|
||||
this.$el.addClass('scheduler-disabled');
|
||||
}
|
||||
this.initHead();
|
||||
this.initBody();
|
||||
if (this.options.footer) {
|
||||
this.initFoot();
|
||||
}
|
||||
};
|
||||
|
||||
proto.initHead = function () {
|
||||
var me = this;
|
||||
me.$head = me.$el.find('>thead');
|
||||
if (!me.$head.length) {
|
||||
me.$head = $('<thead></thead>').appendTo(me.$el);
|
||||
}
|
||||
me.$head.append(me.getHeadHtml());
|
||||
|
||||
// toggle select half day
|
||||
me.$head.on('click', '.scheduler-half-toggle', me.onToggleHalfDay.bind(me));
|
||||
// toggle select an hour
|
||||
me.$head.on('click', '.scheduler-hour-toggle', me.onToggleHour.bind(me));
|
||||
};
|
||||
|
||||
proto.initBody = function () {
|
||||
var me = this;
|
||||
|
||||
me.$body = me.$el.find('>tbody');
|
||||
if (!me.$body.length) {
|
||||
me.$body = $('<tbody></tbody>').appendTo(me.$el);
|
||||
}
|
||||
me.$body.append(me.getBodyHtml(me.options.data));
|
||||
|
||||
// toggle select day
|
||||
me.$body.on('click', '.scheduler-day-toggle', me.onToggleDay.bind(me));
|
||||
// range toggle select hour
|
||||
me.$body.on('mousedown', '.scheduler-hour', me.onMouseDown.bind(me))
|
||||
.on('mousemove', '.scheduler-hour', me.onMouseMove.bind(me))
|
||||
.on('mouseup', '.scheduler-hour', me.onMouseUp.bind(me));
|
||||
};
|
||||
|
||||
proto.initFoot = function () {
|
||||
var me = this;
|
||||
me.$foot = me.$el.find('>tfoot');
|
||||
if (!me.$foot.length) {
|
||||
me.$foot = $('<tfoot></tfoot>').appendTo(me.$el);
|
||||
}
|
||||
me.$foot.append(me.getFootHtml());
|
||||
me.$foot.on('click', '.scheduler-reset', me.onReset.bind(me));
|
||||
};
|
||||
|
||||
proto.getHeadHtml = function (data) {
|
||||
var me = this;
|
||||
var options = me.options;
|
||||
me.$head.append(sprintf($.fn.scheduler.templates.HALF_DAY_ROW,
|
||||
options.TIME_TITLE, // title: time
|
||||
options.WEEK_TITLE, // title: week
|
||||
me.options.accuracy * 12, // row span
|
||||
options.AM, // title: 上午
|
||||
me.options.accuracy * 12, // row span
|
||||
options.PM // title: 下午
|
||||
));
|
||||
|
||||
var hours = '';
|
||||
for (var i = 0; i < 24; i++) {
|
||||
hours += sprintf($.fn.scheduler.templates.HOUR_HEAD_CELL,
|
||||
i, // hour indexs
|
||||
options.accuracy, // row span
|
||||
i // hour text
|
||||
);
|
||||
}
|
||||
return sprintf('<tr>%s</tr>', hours);
|
||||
};
|
||||
|
||||
proto.getFootHtml = function () {
|
||||
var me = this;
|
||||
var options = me.options;
|
||||
return sprintf(
|
||||
$.fn.scheduler.templates.FOOT_ROW,
|
||||
options.accuracy * 24 + 1,
|
||||
options.DRAG_TIP,
|
||||
options.RESET
|
||||
);
|
||||
};
|
||||
|
||||
proto.getBodyHtml = function (data) {
|
||||
var me = this;
|
||||
var options = me.options;
|
||||
var rows = '';
|
||||
var cellOfRow = options.accuracy * 24;
|
||||
|
||||
for (var i = 1; i <= 7; i++) {
|
||||
var cells = '';
|
||||
var selectedHours = data[i];
|
||||
for (var j = 0; j < cellOfRow; j++) {
|
||||
cells += sprintf(
|
||||
$.fn.scheduler.templates.HOUR_CELL,
|
||||
selectedHours && ~selectedHours.indexOf(j) ? ' scheduler-active' : '',
|
||||
i,
|
||||
j
|
||||
);
|
||||
}
|
||||
rows += sprintf(
|
||||
$.fn.scheduler.templates.DAY_ROW,
|
||||
i,
|
||||
i,
|
||||
options.WEEK_DAYS[i - 1],
|
||||
cells
|
||||
);
|
||||
}
|
||||
|
||||
return rows;
|
||||
};
|
||||
|
||||
// toggle select one day
|
||||
proto.onToggleDay = function (e) {
|
||||
if (this.options.disabled) {
|
||||
return;
|
||||
}
|
||||
var index = $(e.target).parent().data('index');
|
||||
var startCoord = [index, 0]; // [row, col] row start form 1
|
||||
var endCoord = [index, 24 * this.options.accuracy - 1];
|
||||
var selectMode = this.getRangeSelectMode(startCoord, endCoord);
|
||||
this.updateToggle(startCoord, endCoord, selectMode);
|
||||
};
|
||||
|
||||
// toggle select half day
|
||||
proto.onToggleHalfDay = function (e) {
|
||||
if (this.options.disabled) {
|
||||
return;
|
||||
}
|
||||
var index = $(e.target).data('halfToggle'); // index = 1 | 2
|
||||
var fromIndex = (index - 1) * 12 * this.options.accuracy;
|
||||
var toIndex = fromIndex + 12 * this.options.accuracy - 1;
|
||||
var startCoord = [1, fromIndex]; // [row, col] row start form 1
|
||||
var endCoord = [7, toIndex];
|
||||
var selectMode = this.getRangeSelectMode(startCoord, endCoord);
|
||||
this.updateToggle(startCoord, endCoord, selectMode);
|
||||
};
|
||||
|
||||
// toggle select an hour
|
||||
proto.onToggleHour = function (e) {
|
||||
if (this.options.disabled) {
|
||||
return;
|
||||
}
|
||||
var index = $(e.target).data('hourToggle'); // index = 1 | 2
|
||||
var fromIndex = index * this.options.accuracy;
|
||||
var toIndex = fromIndex + this.options.accuracy - 1;
|
||||
var startCoord = [1, fromIndex]; // [row, col] row start form 1
|
||||
var endCoord = [7, toIndex];
|
||||
var selectMode = this.getRangeSelectMode(startCoord, endCoord);
|
||||
this.updateToggle(startCoord, endCoord, selectMode);
|
||||
};
|
||||
|
||||
proto.onMouseDown = function (e) {
|
||||
if (this.options.disabled) {
|
||||
return;
|
||||
}
|
||||
this.moving = true;
|
||||
var $cell = $(e.target);
|
||||
this.startCoord = [$cell.data('row'), $cell.data('col')];
|
||||
this.endCoord = this.startCoord.slice(0);
|
||||
this.selectMode = this.getCellSelectMode(this.startCoord);
|
||||
this.updateRange(this.startCoord, this.endCoord, this.selectMode);
|
||||
this.options.onDragStart.call(this.$el, this.cache);
|
||||
};
|
||||
|
||||
proto.onMouseMove = function (e) {
|
||||
if (!this.moving) {
|
||||
return false;
|
||||
}
|
||||
var $cell = $(e.target);
|
||||
var row = $cell.data('row');
|
||||
var col = $cell.data('col');
|
||||
if (!this.selectMode || !this.startCoord || (this.endCoord &&
|
||||
this.endCoord[0] === row &&
|
||||
this.endCoord[1] === col)
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
this.endCoord = [$cell.data('row'), $cell.data('col')];
|
||||
this.updateRange(this.startCoord, this.endCoord, this.selectMode);
|
||||
this.options.onDragMove.call(this.$el, this.cache);
|
||||
};
|
||||
|
||||
proto.onMouseUp = function (e) {
|
||||
if (!this.moving) {
|
||||
return false;
|
||||
}
|
||||
// 起始点都在同一个位置
|
||||
if (this.startCoord[0] === this.endCoord[0] &&
|
||||
this.startCoord[1] === this.endCoord[1]) {
|
||||
this.updateRange(this.startCoord, this.endCoord, this.selectMode);
|
||||
}
|
||||
this.options.onDragEnd.call(this.$el, this.cache);
|
||||
this.end();
|
||||
};
|
||||
|
||||
/**
|
||||
* 根据当前的选中坐标系更新视图，并更新选中数据
|
||||
* @param {Array} startCoord 起始坐标 [row, col]
|
||||
* @param {Array} endCoord 终结坐标 [row, col]
|
||||
* @param {SelectMode} selectMode 选择模式
|
||||
*/
|
||||
proto.updateToggle = function (startCoord, endCoord, selectMode) {
|
||||
this.updateRange(startCoord, endCoord, selectMode);
|
||||
this.end();
|
||||
};
|
||||
|
||||
/**
|
||||
* 根据当前的选中坐标系更新视图
|
||||
* @param {Array} startCoord 起始坐标 [row, col]
|
||||
* @param {Array} endCoord 终结坐标 [row, col]
|
||||
* @param {SelectMode} selectMode 选择模式
|
||||
*/
|
||||
proto.updateRange = function (startCoord, endCoord, selectMode) {
|
||||
var currentSelectRange = makeMatrix(startCoord, endCoord);
|
||||
this.cache = this.merge(this.data, currentSelectRange, selectMode);
|
||||
this.update(this.cache);
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新视图
|
||||
* @param {Object} data 选中的时间集合
|
||||
*/
|
||||
proto.update = function (data) {
|
||||
this.$body.html(this.getBodyHtml(data));
|
||||
};
|
||||
|
||||
// 并更新选中数据
|
||||
proto.end = function () {
|
||||
this.data = this.cache;
|
||||
this.cache = null;
|
||||
this.moving = false;
|
||||
this.startCoord = null;
|
||||
this.endCoord = null;
|
||||
this.selectMode = SelectMode.NONE;
|
||||
this.options.onSelect.call(this.$el, this.val());
|
||||
};
|
||||
|
||||
proto.onReset = function () {
|
||||
if (this.options.disabled) {
|
||||
return;
|
||||
}
|
||||
this.val({});
|
||||
this.options.onSelect.call(this.$el, this.val());
|
||||
};
|
||||
|
||||
/**
|
||||
* 根据选择模式合并合个集合
|
||||
* @param {Object} origin 上一次选中的数据
|
||||
* @param {Object} current 当前选中的数据
|
||||
* @param {Number} selectMode 选择模式 {0: none, 1: 选择（合并）模式, 2: 排除模式（从选区中减去）}
|
||||
*/
|
||||
proto.merge = function (origin, current, selectMode) {
|
||||
var res = {};
|
||||
// 替换模式下，弃用之前的选区，直接使用当前选区
|
||||
if (selectMode === SelectMode.REPLACE) {
|
||||
for (var i = 1; i <= 7; i++) {
|
||||
if (current[i] && current[i].length) {
|
||||
res[i] = current[i].slice(0);
|
||||
}
|
||||
}
|
||||
return res;
|
||||
}
|
||||
for (var i = 1; i <= 7; i++) {
|
||||
if (!current[i]) {
|
||||
if (origin[i] && origin[i].length) {
|
||||
res[i] = origin[i].slice(0);
|
||||
}
|
||||
continue;
|
||||
}
|
||||
if (origin[i] && origin[i].length) {
|
||||
var m = selectMode === SelectMode.JOIN ?
|
||||
mergeArray(origin[i], current[i]) :
|
||||
rejectArray(origin[i], current[i]);
|
||||
m.length && (res[i] = m);
|
||||
} else if (selectMode === SelectMode.JOIN) {
|
||||
res[i] = current[i].slice(0);
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
|
||||
/**
|
||||
* 根据当前选中的范围内时间格式的空闲情况，决定是全选还是全不选
|
||||
* 全空闲：总时间格目 === 空闲时间格数目
|
||||
* 部分空闲：总时间格目 !== 空闲时间格数目
|
||||
* 无空闲：空闲时间格数目 === 0
|
||||
* 状态切换：
|
||||
* 当前范围全空闲 > 采用合并模式，全选当前范围
|
||||
* 部分空闲 > 采用合并模式，全选当前范围
|
||||
* 无空闲 > 采用合并模式，全不选当前范围
|
||||
*
|
||||
* @param {Array} startCoord 起始坐标 [row, col]
|
||||
* @param {Array} endCoord 终结坐标 [row, col]
|
||||
* @return {SelectMode}
|
||||
*/
|
||||
proto.getRangeSelectMode = function (startCoord, endCoord) {
|
||||
if (!this.options.multiple) {
|
||||
return SelectMode.REPLACE;
|
||||
}
|
||||
var rowRange = this.sortCoord(startCoord[0], endCoord[0]);
|
||||
var colRange = this.sortCoord(startCoord[1], endCoord[1]);
|
||||
var startRow = rowRange[0];
|
||||
var endRow = rowRange[1];
|
||||
var startCol = colRange[0];
|
||||
var endCol = colRange[1];
|
||||
var rows = endRow - startRow + 1;
|
||||
var cols = endCol - startCol + 1;
|
||||
var total = rows * cols;
|
||||
|
||||
// 计算已使用的时间格子
|
||||
// TODO 未过滤 disabled 的格子
|
||||
var used = 0;
|
||||
for (var i = 0; i < rows; i++) {
|
||||
var day = startRow + i;
|
||||
var data = this.data[day];
|
||||
if (!data) {
|
||||
continue;
|
||||
}
|
||||
for (var j = 0; j < data.length; j++) {
|
||||
if (data[j] >= startCol && data[j] <= endCol) {
|
||||
used++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return total === used ? SelectMode.MINUS : SelectMode.JOIN;
|
||||
};
|
||||
|
||||
/**
|
||||
* 根据当前选中的时间格式的空闲情况，决定是全选还是全不选
|
||||
* 状态切换：
|
||||
* 当前为单选模式(multiple=false)，-> 替换模式
|
||||
* 当前选中时间段为空闲 -> 全选不
|
||||
* 当前选中时间段为无空闲 - > 全不选
|
||||
*
|
||||
* @param {Array} startCoord 起始坐标 [row, col]
|
||||
* @return {SelectMode}
|
||||
*/
|
||||
proto.getCellSelectMode = function (coord) {
|
||||
if (!this.options.multiple) {
|
||||
return SelectMode.REPLACE;
|
||||
}
|
||||
// TODO 未过滤 disabled 的格子
|
||||
var day = this.data[coord[0]];
|
||||
return day && ~day.indexOf(coord[1]) ? SelectMode.MINUS : SelectMode.JOIN;
|
||||
};
|
||||
|
||||
proto.sortCoord = function (num1, num2) {
|
||||
if (num1 > num2) {
|
||||
return [num2, num1];
|
||||
}
|
||||
return [num1, num2];
|
||||
};
|
||||
|
||||
proto.disable = function () {
|
||||
this.$el.toggleClass('scheduler-disabled', true);
|
||||
this.options.disabled = true;
|
||||
};
|
||||
|
||||
proto.enable = function () {
|
||||
this.$el.toggleClass('scheduler-disabled', false);
|
||||
this.options.disabled = false;
|
||||
};
|
||||
|
||||
/**
|
||||
* 如果无传参，则作为 Getter, 否则为 Setter
|
||||
* @param {Array} data optional 选中的内容
|
||||
* @return {Array} 返回当前选中的内容
|
||||
*/
|
||||
proto.val = function (data) {
|
||||
// setter
|
||||
if (toStr(data) === '[object Object]') {
|
||||
// TODO 数据结构校验
|
||||
this.data = data;
|
||||
this.update(data);
|
||||
|
||||
} else { // getter
|
||||
return this.merge(this.data, {}, SelectMode.JOIN);
|
||||
}
|
||||
};
|
||||
|
||||
proto.destroy = function () {
|
||||
this.$el.removeClass('scheduler').empty();
|
||||
};
|
||||
|
||||
$.extend(Scheduler.DEFAULTS, Scheduler.LOCALES.zh);
|
||||
|
||||
// SCHEDULER PLUGIN DEFINITION
|
||||
// ---------------------------
|
||||
|
||||
var apiMethods = [
|
||||
'val',
|
||||
'destroy',
|
||||
'disable',
|
||||
'enable'
|
||||
];
|
||||
|
||||
// Set as a jQuery plugin
|
||||
$.fn.scheduler = function (option) {
|
||||
var value;
|
||||
var args = Array.prototype.slice.call(arguments, 1);
|
||||
|
||||
this.each(function () {
|
||||
var $this = $(this);
|
||||
var data = $this.data('scheduler');
|
||||
var options = $.extend({}, Scheduler.DEFAULTS, $this.data(),
|
||||
typeof option === 'object' && option);
|
||||
|
||||
if (typeof option === 'string') {
|
||||
if ($.inArray(option, apiMethods) < 0) {
|
||||
throw new Error('Unknown method: ' + option);
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return;
|
||||
}
|
||||
|
||||
value = data[option].apply(data, args);
|
||||
|
||||
if (option === 'destroy') {
|
||||
$this.removeData('scheduler');
|
||||
}
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
$this.data('scheduler', (data = new Scheduler(this, options)));
|
||||
}
|
||||
});
|
||||
|
||||
return typeof value === 'undefined' ? this : value;
|
||||
};
|
||||
|
||||
// Exports settings
|
||||
$.fn.scheduler.defaults = Scheduler.DEFAULTS;
|
||||
$.fn.scheduler.templates = Scheduler.TEMPLATES;
|
||||
$.fn.scheduler.locales = Scheduler.LOCALES;
|
||||
$.fn.scheduler.util = Scheduler.Util;
|
||||
})(jQuery);
|
||||
Vendored
+17
@@ -0,0 +1,17 @@
|
||||
(function(b){b.widget("ui.tagit",{options:{allowDuplicates:!1,caseSensitive:!0,fieldName:"tags",placeholderText:null,readOnly:!1,removeConfirmation:!1,tagLimit:null,availableTags:[],autocomplete:{},showAutocompleteOnFocus:!1,allowSpaces:!1,singleField:!1,singleFieldDelimiter:",",singleFieldNode:null,animate:!0,tabIndex:null,beforeTagAdded:null,afterTagAdded:null,beforeTagRemoved:null,afterTagRemoved:null,onTagClicked:null,onTagLimitExceeded:null,onTagAdded:null,onTagRemoved:null,tagSource:null},_create:function(){var a=
|
||||
this;this.element.is("input")?(this.tagList=b("<ul></ul>").insertAfter(this.element),this.options.singleField=!0,this.options.singleFieldNode=this.element,this.element.addClass("tagit-hidden-field")):this.tagList=this.element.find("ul, ol").andSelf().last();this.tagInput=b('<input type="text" />').addClass("ui-widget-content");this.options.readOnly&&this.tagInput.attr("disabled","disabled");this.options.tabIndex&&this.tagInput.attr("tabindex",this.options.tabIndex);this.options.placeholderText&&this.tagInput.attr("placeholder",
|
||||
this.options.placeholderText);this.options.autocomplete.source||(this.options.autocomplete.source=function(a,e){var d=a.term.toLowerCase(),c=b.grep(this.options.availableTags,function(a){return 0===a.toLowerCase().indexOf(d)});this.options.allowDuplicates||(c=this._subtractArray(c,this.assignedTags()));e(c)});this.options.showAutocompleteOnFocus&&(this.tagInput.focus(function(b,d){a._showAutocomplete()}),"undefined"===typeof this.options.autocomplete.minLength&&(this.options.autocomplete.minLength=
|
||||
0));b.isFunction(this.options.autocomplete.source)&&(this.options.autocomplete.source=b.proxy(this.options.autocomplete.source,this));b.isFunction(this.options.tagSource)&&(this.options.tagSource=b.proxy(this.options.tagSource,this));this.tagList.addClass("tagit").addClass("ui-widget ui-widget-content ui-corner-all").append(b('<li class="tagit-new"></li>').append(this.tagInput)).click(function(d){var c=b(d.target);c.hasClass("tagit-label")?(c=c.closest(".tagit-choice"),c.hasClass("removed")||a._trigger("onTagClicked",
|
||||
d,{tag:c,tagLabel:a.tagLabel(c)})):a.tagInput.focus()});var c=!1;if(this.options.singleField)if(this.options.singleFieldNode){var d=b(this.options.singleFieldNode),f=d.val().split(this.options.singleFieldDelimiter);d.val("");b.each(f,function(b,d){a.createTag(d,null,!0);c=!0})}else this.options.singleFieldNode=b('<input type="hidden" style="display:none;" value="" name="'+this.options.fieldName+'" />'),this.tagList.after(this.options.singleFieldNode);c||this.tagList.children("li").each(function(){b(this).hasClass("tagit-new")||
|
||||
(a.createTag(b(this).text(),b(this).attr("class"),!0),b(this).remove())});this.tagInput.keydown(function(c){if(c.which==b.ui.keyCode.BACKSPACE&&""===a.tagInput.val()){var d=a._lastTag();!a.options.removeConfirmation||d.hasClass("remove")?a.removeTag(d):a.options.removeConfirmation&&d.addClass("remove ui-state-highlight")}else a.options.removeConfirmation&&a._lastTag().removeClass("remove ui-state-highlight");if(c.which===b.ui.keyCode.COMMA&&!1===c.shiftKey||c.which===b.ui.keyCode.ENTER||c.which==
|
||||
b.ui.keyCode.TAB&&""!==a.tagInput.val()||c.which==b.ui.keyCode.SPACE&&!0!==a.options.allowSpaces&&('"'!=b.trim(a.tagInput.val()).replace(/^s*/,"").charAt(0)||'"'==b.trim(a.tagInput.val()).charAt(0)&&'"'==b.trim(a.tagInput.val()).charAt(b.trim(a.tagInput.val()).length-1)&&0!==b.trim(a.tagInput.val()).length-1))c.which===b.ui.keyCode.ENTER&&""===a.tagInput.val()||c.preventDefault(),a.options.autocomplete.autoFocus&&a.tagInput.data("autocomplete-open")||(a.tagInput.autocomplete("close"),a.createTag(a._cleanedInput()))}).blur(function(b){a.tagInput.data("autocomplete-open")||
|
||||
a.createTag(a._cleanedInput())});if(this.options.availableTags||this.options.tagSource||this.options.autocomplete.source)d={select:function(b,c){a.createTag(c.item.value);return!1}},b.extend(d,this.options.autocomplete),d.source=this.options.tagSource||d.source,this.tagInput.autocomplete(d).bind("autocompleteopen.tagit",function(b,c){a.tagInput.data("autocomplete-open",!0)}).bind("autocompleteclose.tagit",function(b,c){a.tagInput.data("autocomplete-open",!1)}),this.tagInput.autocomplete("widget").addClass("tagit-autocomplete")},
|
||||
destroy:function(){b.Widget.prototype.destroy.call(this);this.element.unbind(".tagit");this.tagList.unbind(".tagit");this.tagInput.removeData("autocomplete-open");this.tagList.removeClass("tagit ui-widget ui-widget-content ui-corner-all tagit-hidden-field");this.element.is("input")?(this.element.removeClass("tagit-hidden-field"),this.tagList.remove()):(this.element.children("li").each(function(){b(this).hasClass("tagit-new")?b(this).remove():(b(this).removeClass("tagit-choice ui-widget-content ui-state-default ui-state-highlight ui-corner-all remove tagit-choice-editable tagit-choice-read-only"),
|
||||
b(this).text(b(this).children(".tagit-label").text()))}),this.singleFieldNode&&this.singleFieldNode.remove());return this},_cleanedInput:function(){return b.trim(this.tagInput.val().replace(/^"(.*)"$/,"$1"))},_lastTag:function(){return this.tagList.find(".tagit-choice:last:not(.removed)")},_tags:function(){return this.tagList.find(".tagit-choice:not(.removed)")},assignedTags:function(){var a=this,c=[];this.options.singleField?(c=b(this.options.singleFieldNode).val().split(this.options.singleFieldDelimiter),
|
||||
""===c[0]&&(c=[])):this._tags().each(function(){c.push(a.tagLabel(this))});return c},_updateSingleTagsField:function(a){b(this.options.singleFieldNode).val(a.join(this.options.singleFieldDelimiter)).trigger("change")},_subtractArray:function(a,c){for(var d=[],f=0;f<a.length;f++)-1==b.inArray(a[f],c)&&d.push(a[f]);return d},tagLabel:function(a){return this.options.singleField?b(a).find(".tagit-label:first").text():b(a).find("input:first").val()},_showAutocomplete:function(){this.tagInput.autocomplete("search",
|
||||
"")},_findTagByLabel:function(a){var c=this,d=null;this._tags().each(function(f){if(c._formatStr(a)==c._formatStr(c.tagLabel(this)))return d=b(this),!1});return d},_isNew:function(a){return!this._findTagByLabel(a)},_formatStr:function(a){return this.options.caseSensitive?a:b.trim(a.toLowerCase())},_effectExists:function(a){return Boolean(b.effects&&(b.effects[a]||b.effects.effect&&b.effects.effect[a]))},createTag:function(a,c,d){var f=this;a=b.trim(a);this.options.preprocessTag&&(a=this.options.preprocessTag(a));
|
||||
if(""===a)return!1;if(!this.options.allowDuplicates&&!this._isNew(a))return a=this._findTagByLabel(a),!1!==this._trigger("onTagExists",null,{existingTag:a,duringInitialization:d})&&this._effectExists("highlight")&&a.effect("highlight"),!1;if(this.options.tagLimit&&this._tags().length>=this.options.tagLimit)return this._trigger("onTagLimitExceeded",null,{duringInitialization:d}),!1;var g=b(this.options.onTagClicked?'<a class="tagit-label"></a>':'<span class="tagit-label"></span>').text(a),e=b("<li></li>").addClass("tagit-choice ui-widget-content ui-state-default ui-corner-all").addClass(c).append(g);
|
||||
this.options.readOnly?e.addClass("tagit-choice-read-only"):(e.addClass("tagit-choice-editable"),c=b("<span></span>").addClass("ui-icon ui-icon-close"),c=b('<a><span class="text-icon">\u00d7</span></a>').addClass("tagit-close").append(c).click(function(a){f.removeTag(e)}),e.append(c));this.options.singleField||(g=g.html(),e.append('<input type="hidden" value="'+g+'" name="'+this.options.fieldName+'" class="tagit-hidden-field" />'));!1!==this._trigger("beforeTagAdded",null,{tag:e,tagLabel:this.tagLabel(e),
|
||||
duringInitialization:d})&&(this.options.singleField&&(g=this.assignedTags(),g.push(a),this._updateSingleTagsField(g)),this._trigger("onTagAdded",null,e),this.tagInput.val(""),this.tagInput.parent().before(e),this._trigger("afterTagAdded",null,{tag:e,tagLabel:this.tagLabel(e),duringInitialization:d}),this.options.showAutocompleteOnFocus&&!d&&setTimeout(function(){f._showAutocomplete()},0))},removeTag:function(a,c){c="undefined"===typeof c?this.options.animate:c;a=b(a);this._trigger("onTagRemoved",
|
||||
null,a);if(!1!==this._trigger("beforeTagRemoved",null,{tag:a,tagLabel:this.tagLabel(a)})){if(this.options.singleField){var d=this.assignedTags(),f=this.tagLabel(a),d=b.grep(d,function(a){return a!=f});this._updateSingleTagsField(d)}if(c){a.addClass("removed");var d=this._effectExists("blind")?["blind",{direction:"horizontal"},"fast"]:["fast"],g=this;d.push(function(){a.remove();g._trigger("afterTagRemoved",null,{tag:a,tagLabel:g.tagLabel(a)})});a.fadeOut("fast").hide.apply(a,d).dequeue()}else a.remove(),
|
||||
this._trigger("afterTagRemoved",null,{tag:a,tagLabel:this.tagLabel(a)})}},removeTagByLabel:function(a,b){var d=this._findTagByLabel(a);if(!d)throw"No such tag exists with the name '"+a+"'";this.removeTag(d,b)},removeAll:function(){var a=this;this._tags().each(function(b,d){a.removeTag(d,!1)})}})})(jQuery);
|
||||
@@ -0,0 +1,140 @@
|
||||
$(function(){
|
||||
// var btn_Array = [];
|
||||
// var result = null;
|
||||
// var last = btn_Array.at(-1);
|
||||
|
||||
// 2024.05.09 메뉴클릭시
|
||||
let $leftMenu = $('.left-side .btn-menu');
|
||||
let $utilNav = $('.left-side, .util-nav');
|
||||
let $sideBtn = $('.left-side .nav > li > button');
|
||||
let $sideCollapse = $('.left-side .nav .collapse');
|
||||
$leftMenu.on('click', function() {
|
||||
toggleLeftSide();
|
||||
});
|
||||
function toggleLeftSide() {
|
||||
$sideBtn.attr('aria-expanded', false);
|
||||
$sideCollapse.removeClass('show');
|
||||
$utilNav.toggleClass('active');
|
||||
}
|
||||
//left-side 메뉴 클릭시
|
||||
$('.nav>li>button').on('click', function(){
|
||||
let allExpand = $('.nav>li>button[aria-expanded="true"]').length;
|
||||
let expand = $(this).attr('aria-expanded');
|
||||
if(expand == 'true' && allExpand == 1){
|
||||
$utilNav.addClass('active');
|
||||
}
|
||||
// if(expand == 'false' && !allExpand){
|
||||
// $utilNav.removeClass('active');
|
||||
// }
|
||||
});
|
||||
//left-side js
|
||||
//left-side 다른영역 클릭 시 클래스 해제
|
||||
function leftMenuResize() {
|
||||
// var width = $(this).width();
|
||||
// if(width <= 1024){
|
||||
// }
|
||||
$sideBtn.attr('aria-expanded', false);
|
||||
$sideCollapse.removeClass('show');
|
||||
$utilNav.removeClass('open hide active');
|
||||
}
|
||||
$('.main-contents-wrap, .sub-contents-wrap').on('click', function(e) {
|
||||
if(!$utilNav.is(e.target) && $utilNav.has(e.target).length === 0) {
|
||||
if($utilNav.hasClass('active')) {
|
||||
leftMenuResize();
|
||||
}
|
||||
}
|
||||
});
|
||||
//left-side 리사이즈 시
|
||||
$(window).one('resize', function() {
|
||||
leftMenuResize();
|
||||
});
|
||||
|
||||
|
||||
// //웹
|
||||
// $('.nav-wrap').on(function(){
|
||||
// if($('.left-side').hasClass('active') && $('.left-side').hasClass('hide')){
|
||||
// $utilNav.removeClass('hide');
|
||||
// }
|
||||
// else if($('.left-side').hasClass('active') && $('.left-side').hasClass('open')){
|
||||
// $utilNav.removeClass('open');
|
||||
// }
|
||||
// });
|
||||
// //모바일웹
|
||||
// $('.nav-wrap').on('mouseleave','touchend',function(){
|
||||
// if($('.left-side').hasClass('active') && $(window).width() > 1024){
|
||||
// $utilNav.addClass('hide');
|
||||
// }
|
||||
// else if($('.left-side').hasClass('active') && $(window).width() <= 1024) {
|
||||
// $utilNav.addClass('open');
|
||||
// }
|
||||
// });
|
||||
|
||||
// 2024.05.09 메뉴클릭시 끝
|
||||
$('.btn-top .head').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
$('html, body').animate({scrollTop:0},500)
|
||||
})
|
||||
$('.btn-top .list').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
$('html, body').animate({scrollTop:$('.dataTable').offset().top},500)
|
||||
})
|
||||
|
||||
$(document).ready(function() {
|
||||
setTimeout(function() {
|
||||
if(!$('.dataTable').is(':visible')) {
|
||||
$('.btn-top .list').fadeOut();
|
||||
}
|
||||
//top 버튼 위치 수정 2024.04
|
||||
let $btnDebug = $("#debug-icon");
|
||||
if ($btnDebug.length > 0) {
|
||||
let $btnDebugH = $btnDebug.outerHeight() + 3 ;
|
||||
let $btnTop = $(".btn-top");
|
||||
$btnTop.css("bottom", $btnDebugH + "px");
|
||||
}
|
||||
|
||||
},1000);
|
||||
|
||||
var clipboard = new ClipboardJS('.copy', {
|
||||
text: function(trigger) {
|
||||
return $(trigger).data('clipboard-text');
|
||||
}
|
||||
});
|
||||
clipboard.on('success', function(e) {
|
||||
e.clearSelection();
|
||||
showTooltip(e.trigger, '복사완료!');
|
||||
});
|
||||
clipboard.on('error', function(e) {
|
||||
showTooltip(e.trigger, fallbackMessage(e.action));
|
||||
});
|
||||
$(".modal").on("shown.bs.modal", function() {
|
||||
var modalClipboard = new ClipboardJS('.copy', {
|
||||
container: document.querySelector('.modal'),
|
||||
text: function(trigger) {
|
||||
return $(trigger).data('clipboard-text');
|
||||
}
|
||||
});
|
||||
modalClipboard.on('success', function(e) {
|
||||
e.clearSelection();
|
||||
showTooltip(e.trigger, '복사완료!');
|
||||
});
|
||||
modalClipboard.on('error', function(e) {
|
||||
showTooltip(e.trigger, fallbackMessage(e.action));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
$('.toggle').on('click', function(){
|
||||
$(this).toggleClass('folded');
|
||||
});
|
||||
|
||||
$('.dataTables_info > i').on('click',function(){
|
||||
$('.txt-info').toggle();
|
||||
});
|
||||
|
||||
$(document).ajaxComplete(function(event, jqxhr, settings) {
|
||||
// 401 응답 처리
|
||||
if (jqxhr.status === 401) {
|
||||
window.location.href = '/login';
|
||||
}
|
||||
});
|
||||
});
|
||||
Generated
+1023
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"bootstrap": "^5.*",
|
||||
"bootstrap-icons": "^1.*",
|
||||
"datatables.net-autofill-bs5": "^2.7.0",
|
||||
"datatables.net-bs5": "^1.13.11",
|
||||
"datatables.net-buttons-bs5": "^3",
|
||||
"datatables.net-colreorder-bs5": "^1.7.2",
|
||||
"datatables.net-datetime": "^1.5.2",
|
||||
"datatables.net-fixedcolumns-bs5": "^4.3.1",
|
||||
"datatables.net-fixedheader-bs5": "^3.4.1",
|
||||
"datatables.net-keytable-bs5": "^2.12.0",
|
||||
"datatables.net-plugins": "^2.0.2",
|
||||
"datatables.net-responsive-bs5": "^2.5.1",
|
||||
"datatables.net-rowgroup-bs5": "^1.5.0",
|
||||
"datatables.net-rowreorder-bs5": "^1.5.0",
|
||||
"datatables.net-scroller-bs5": "^2.4.1",
|
||||
"datatables.net-searchbuilder-bs5": "^1.7.0",
|
||||
"datatables.net-searchpanes-bs5": "^2.3.0",
|
||||
"datatables.net-select-bs5": "^1.7.1",
|
||||
"datatables.net-staterestore-bs5": "^1.4.0",
|
||||
"daterangepicker": "^3.*",
|
||||
"jquery": "^3.*",
|
||||
"jquery-datatables-checkboxes": "^1.2.13",
|
||||
"jquery-ui": "^1.13.*",
|
||||
"jszip": "^3.10.1",
|
||||
"pdfmake": "^0.2.10"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user