qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🚨chore: Sync Sass

Browse Source
This commit is contained in:
minsik 2024-10-16 17:50:52 +09:00
parent 66acf8060f
commit e6d2733a12
8 changed files with 1965 additions and 1956 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
src/styles/_contents.scss
View File

@ -627,9 +627,9 @@
justify-content: flex-end; justify-content: flex-end;
margin-top: 20px; margin-top: 20px;
} }
.pagination-wrap{ }
margin-top: 24px; .pagination-wrap{
} margin-top: 24px;
} }
.infomation-wrap{ .infomation-wrap{
@ -811,7 +811,10 @@
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
color: #45576F; color: #45576F;
margin-bottom: 5px; margin-bottom: 8px;
&:last-child{
margin-bottom: 0;
}
} }
} }
&::-webkit-scrollbar { &::-webkit-scrollbar {
@ -1091,3 +1094,110 @@
} }
} }
} }
.community-search-warp{
display: flex;
flex-direction: column;
align-items: center;
padding: 10px 0 30px 0;
border-bottom: 1px solid #E5E5E5;
margin-bottom: 24px;
.community-search-box{
position: relative;
display: flex;
align-items: center;
width: 580px;
height: 45px;
padding: 0 45px 0 20px;
margin-bottom: 20px;
border-radius: 2px;
border: 1px solid #101010;
.community-input{
width: 100%;
height: 100%;
font-size: 13px;
font-weight: 400;
color: #101010;
&::placeholder{
color: #C8C8C8;
}
}
.community-search-ico{
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
flex: none;
width: 21px;
height: 100%;
background: url(../../public/static/images/sub/community_search.svg)no-repeat center;
background-size: 21px 21px;
z-index: 3;
}
}
.community-search-keyword{
font-size: 13px;
font-weight: 400;
color: #45576F;
span{
font-weight: 600;
color: #F16A6A;
}
}
}
// 자료 다운로드
.file-down-list{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
.file-down-item{
display: flex;
align-items: center;
padding: 24px;
border-radius: 4px;
border: 1px solid #E5E5E5;
background: #FFF;
transition: all .15s ease-in-out;
cursor: pointer;
.file-item-info{
.item-num{
display: inline-block;
padding: 6px 17.5px;
border-radius: 60px;
background-color: #F4F4F7;
font-size: 13px;
font-weight: 600;
color: #101010;
margin-bottom: 15px;
}
.item-name{
font-size: 16px;
color: #101010;
font-weight: 500;
margin-bottom: 13px;
}
.item-date{
font-size: 13px;
font-weight: 400;
color: #344356;
}
}
.file-down-box{
display: flex;
align-items: center;
flex: none;
margin-left: auto;
height: 100%;
.file-down-btn{
width: 36px;
height: 36px;
background: url(../../public/static/images/sub/file_down_btn.svg)no-repeat center;
background-size: cover;
}
}
&:hover{
background-color: #F4F4F7;
}
}
}

181
src/styles/_grid-detail.scss
View File

@ -1,63 +1,128 @@
.q-grid { .q-grid{
height: fit-content; position: relative;
.ag-theme-quartz { .ag-theme-quartz {
outline: none; outline: none;
border: none; border: none;
--ag-border-radius: 0px; --ag-border-radius: 0px;
--ag-wrapper-border-radius: 0px; --ag-wrapper-border-radius: 0px;
--ag-header-height: 40px; --ag-header-height: 40px;
--ag-header-foreground-color: white; --ag-header-foreground-color: white;
--ag-header-background-color: #5d6a76; --ag-header-background-color: #5D6A76;
// --ag-header-cell-hover-background-color: rgb(80, 40, 140); // --ag-header-cell-hover-background-color: rgb(80, 40, 140);
--ag-header-cell-moving-background-color: #5d6a76; --ag-header-cell-moving-background-color: #5D6A76;
.ag-root-wrapper { .ag-root-wrapper{
outline: none; outline: none;
border: none; border: none;
}
.ag-header{
border-bottom: none;
border-radius: 4px;
}
.ag-header-cell{
font-size: 13px;
color: #fff;
}
.ag-header-cell-label{
justify-content: center;
}
.ag-header-cell-resize{
&:after{
display: none;
}
}
.ag-row{
border-bottom: 1px solid #ECF0F4;
&:nth-child(2n){
background-color: #F7F9FA;
}
&.important_row{
background-color: #e7e7e7;
}
}
.ag-cell{
font-size: 13px;
color: #45576F;
}
.ag-icon-desc::before,
.ag-icon-asc::before,
.ag-icon-filter::before{
color: #fff;
}
} }
.ag-header { .copy-ico-wrap{
border-bottom: none; display: flex;
border-radius: 4px; align-items: center;
.copy_ico{
width: 18px;
height: 18px;
background: url(../../public/static/images/sub/copy_grid_ico.svg)no-repeat center;
background-size: cover;
margin-left: 12px;
}
} }
.ag-header-cell { &.no-cols{
font-size: 13px; .ag-row{
color: #fff; &:nth-child(2n){
background-color: #fff;
}
}
} }
.ag-header-cell-label { .form-flex-wrap{
justify-content: center; display: flex;
align-items: center;
width: 100%;
.grid-tip{
margin-left: auto;
}
} }
.ag-header-cell-resize { }
&:after {
display: none; // grid-button
} .grid-cell-btn{
} display: flex;
.ag-row { flex-direction: column;
border-bottom: 1px solid #ecf0f4; gap: 5px;
&:nth-child(2n) { width: 117px;
background-color: #f7f9fa; margin: 0 auto;
} .grid-btn{
&.important_row { display: block;
background-color: #e7e7e7; width: 100%;
} height: 30px;
} display: flex;
.ag-cell { align-items: center;
font-size: 13px; justify-content: center;
color: #45576f; background-color: #fff;
} border: 1px solid #94A0AD;
.ag-icon-desc::before, background-color: transparent;
.ag-icon-asc::before, border-radius: 2px;
.ag-icon-filter::before { font-size: 13px;
color: #fff; color: #94A0AD;
} font-weight: 400;
} text-align: center;
.copy-ico-wrap { span{
display: flex; display: block;
align-items: center; margin-right: 5px;
.copy_ico { &.file{
width: 18px; width: 13px;
height: 18px; height: 14px;
background: url(../../public/static/images/sub/copy_grid_ico.svg) no-repeat center; background: url(../../public/static/images/sub/grid-btn-file.svg)no-repeat center;
background-size: cover; background-size: cover;
margin-left: 12px; }
} &.excel{
} width: 14px;
height: 13px;
background: url(../../public/static/images/sub/grid-btn-excel.svg)no-repeat center;
background-size: cover;
}
}
}
}
.grid-tip{
display: block;
width: 15px;
height: 15px;
background: url(../../public/static/images/sub/grid_tip.svg)no-repeat center;
background-size: cover;
} }

3331
src/styles/_modal.scss
View File

File diff suppressed because it is too large Load Diff

15
src/styles/_reset.scss
View File

@ -308,6 +308,20 @@ button{
background-color: #607F9A; background-color: #607F9A;
} }
} }
&.green{
background-color: #A6BBA8;
&:hover{
background-color: #98af9b;
}
}
&.white{
border: 1px solid #94A0AD;
background-color: #fff;
color: #94A0AD;
&:hover{
background-color: #fff;
}
}
} }
// select // select
@ -437,6 +451,7 @@ button{
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
input[type=password],
input[type=number], input[type=number],
input[type=text]{ input[type=text]{
&.input-origin{ &.input-origin{

119
src/styles/_submodal.scss
View File

@ -71,8 +71,33 @@
} }
} }
} }
&.community{
.modal-dialog{
.modal-content{
.modal-header{
padding: 19px 24px;
background-color: #fff;
.modal-close{
background: url(../../public/static/images/sub/community_pop_close.svg)no-repeat center;
}
}
.modal-body{
padding: 0 30px 30px;
}
}
}
}
} }
.explane{
font-size: 13px;
font-weight: 400;
color: #101010;
margin-bottom: 20px;
}
.red{
color: #F00;
}
// modal-contents // modal-contents
// 비밀번호 변경 // 비밀번호 변경
@ -186,6 +211,19 @@
} }
// 설계의뢰 불러오기 // 설계의뢰 불러오기
.design-tit-wrap{
display: flex;
align-items: center;
margin-bottom: 10px;
h3{
font-size: 13px;
font-weight: 600;
color: #101010;
}
.design-search-wrap{
margin-left: auto;
}
}
.design-request-table{ .design-request-table{
margin-bottom: 20px; margin-bottom: 20px;
} }
@ -197,3 +235,84 @@
margin-bottom: 15px; margin-bottom: 15px;
} }
} }
// 제품 특이사항 팝업
.calculation-estimate{
&.usemodal{
margin-bottom: 0;
border: none;
padding: 0;
}
}
// 내정보 조회 팝업
.password-input{
flex: 1;
display: flex;
align-items: center;
height: 30px;
border: 1px solid #EEE;
padding: 0 10px;
border-radius: 2px;
input{
width: 100%;
height: 100%;
font-size: 13px;
color: #45576F;
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
&::placeholder{
color: #D1D7E0;
}
}
.blink{
flex: none;
width: 19px;
height: 100%;
background-image: url(../../public/static/images/main/password_hidden.svg);
background-size: 19px 13px;
background-repeat: no-repeat;
background-position: center;
&.on{
background-image: url(../../public/static/images/main/password_visible.svg);
}
}
}
// 커뮤니티
.community_detail{
.community_detail-tit{
font-size: 16px;
color: #101010;
font-weight: 600;
padding-bottom: 14px;
border-bottom: 2px solid #101010;
}
.community_detail-file-wrap{
padding: 24px 0;
border-bottom: 1px solid #E5E5E5;
dt{
font-size: 13px;
color: #101010;
font-weight: 500;
margin-bottom: 15px;
}
dd{
font-size: 12px;
font-weight: 400;
margin-bottom: 3px;
color: #344356;
&:last-child{
margin-bottom: 0;
}
}
}
.community_detail-inner{
padding-top: 20px;
padding-bottom: 20px;
font-size: 13px;
font-weight: 400;
color: #45576F;
line-height: 26px;
}
}

151
src/styles/_table.scss
View File

@ -115,7 +115,40 @@ table{
cursor: pointer; cursor: pointer;
span{ span{
position: absolute; position: absolute;
top: 50%;
transform: translateY(-50%);
left: 25px;
padding: 11px 7px;
font-size: 12px;
font-weight: 400;
color: #45576F;
background-color: #fff;
border: 2px solid #45576F;
border-radius: 2px;
white-space: nowrap; white-space: nowrap;
opacity: 0;
visibility: hidden;
z-index: 99;
transition: all .15s ease-in-out;
&::before{
content: '';
position: absolute;
top: 50%;
left: -6px;
transform: translateY(-50%) rotate(45deg);
width: 9px;
height: 9px;
border: 2px solid #45576F;
background-color: #fff;
border-top: none;
border-right: none;
}
}
&:hover{
span{
opacity: 1;
visibility: visible;
}
} }
} }
} }
@ -280,3 +313,121 @@ table{
} }
} }
} }
// 커뮤니티 테이블
.community-table{
margin-bottom: 24px;
table{
table-layout: fixed;
border-collapse: collapse;
border-top: 2px solid #101010;
tbody{
td{
font-size: 13px;
font-weight: 400;
color: #45576F;
padding: 10.5px 10px;
border-bottom: 1px solid #ECF0F4;
vertical-align: middle;
.text-frame{
display: flex;
align-items: center;
.text-overflow{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
text-overflow: ellipsis;
overflow: hidden;
}
.clip{
flex: none;
display: block;
margin-left: 10px;
width: 14px;
height: 14px;
background: url(../../public/static/images/sub/community_clip.svg)no-repeat center;
background-size: cover;
}
}
}
tr{
background-color: transparent;
transition: all .15s ease-in-out;
cursor: pointer;
&:hover{
background: #F7F9FA;
}
}
}
}
}
// 풍속 선택 테이블
.wind-table{
margin-top: 20px;
table{
width: 100%;
table-layout: fixed;
border-collapse: separate;
thead{
display: table;
table-layout: fixed;
width: 100%;
tr{
th{
text-align: center;
font-size: 13px;
font-weight: 600;
color: #344356;
background-color: #F7F9FA;
padding: 10.5px 10px;
vertical-align: middle;
border-bottom: 1px solid #ECF0F4;
border-top: 1px solid #ECF0F4;
&:first-child{
border-left: 1px solid #ECF0F4;
border-radius: 4px 0 0 4px;
}
&:last-child{
border-right: 1px solid #ECF0F4;
border-radius: 0 4px 4px 0;
}
}
}
}
tbody{
display: block;
max-height: 200px;
overflow-y: auto;
tr{
display: table;
table-layout: fixed;
width: 100%;
td{
padding: 13.5px 10px;
font-size: 13px;
font-weight: 400;
color: #45576F;
vertical-align: middle;
border-bottom: 1px solid #ECF0F4;
&:nth-child(2){
width: 110px;
}
&:nth-child(1){
width: 50px;
}
}
}
&::-webkit-scrollbar {
width: 4px;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: #ECF0F4;
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
}
}
}

1
src/styles/contents.scss
View File

@ -3,3 +3,4 @@
@import '_submodal.scss'; @import '_submodal.scss';
@import '_table.scss'; @import '_table.scss';
@import '_canvasside.scss'; @import '_canvasside.scss';
@import '_pagination.scss';

1
src/styles/grid.scss
View File

@ -1,2 +1 @@
@import '_grid-detail.scss'; @import '_grid-detail.scss';
@import '_pagination.scss';