적응형 css 반영
This commit is contained in:
parent
70068afbc7
commit
2542021758
@ -87,7 +87,7 @@ export default function CanvasPage() {
|
||||
{/* <Penal04/> */}
|
||||
|
||||
{/* 배치면 초기 설정 */}
|
||||
<PlacementSettingPop/>
|
||||
{/* <PlacementSettingPop/> */}
|
||||
|
||||
{/* 캔버스 기본 셋팅 */}
|
||||
{/* {modalOption.option && <SettingModal01/>} */}
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 46.8px;
|
||||
min-width: 1280px;
|
||||
padding-bottom: 0;
|
||||
background-color: #383838;
|
||||
transition: padding .17s ease-in-out;
|
||||
@ -34,6 +34,7 @@
|
||||
align-items: center;
|
||||
padding: 0 40px 0 20px;
|
||||
background-color: #2C2C2C;
|
||||
height: 46.8px;
|
||||
z-index: 999;
|
||||
.canvas-menu-list{
|
||||
display: flex;
|
||||
@ -55,11 +56,11 @@
|
||||
transition: all .17s ease-in-out;
|
||||
.menu-icon{
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-size: contain;
|
||||
margin-right: 10px;
|
||||
&.con00{background-image: url(/static/images/canvas/menu_icon00.svg);}
|
||||
&.con01{background-image: url(/static/images/canvas/menu_icon01.svg);}
|
||||
@ -85,6 +86,7 @@
|
||||
.select-box{
|
||||
width: 124px;
|
||||
margin-right: 5px;
|
||||
height: 30px;
|
||||
> div{
|
||||
width: 100%;
|
||||
}
|
||||
@ -329,6 +331,7 @@
|
||||
background-color: #1C1C1C;
|
||||
border-top: 1px solid #000;
|
||||
width: 100%;
|
||||
min-width: 1280px;
|
||||
transition: all .17s ease-in-out;
|
||||
z-index: 99;
|
||||
&.active{
|
||||
@ -444,6 +447,7 @@
|
||||
top: 46px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
min-width: 1280px;
|
||||
height: 46px;
|
||||
border-bottom: 1px solid #000;
|
||||
background: #2C2C2C;
|
||||
@ -1304,4 +1308,109 @@
|
||||
background: url(../../public/static/images/sub/product-del.svg)no-repeat center;
|
||||
background-size: 15px 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1800px) {
|
||||
.canvas-menu-wrap{
|
||||
.canvas-menu-inner{
|
||||
.canvas-menu-list{
|
||||
.canvas-menu-item button{
|
||||
.menu-icon{
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.canvas-menu-item{
|
||||
button{
|
||||
padding: 15px 15px;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.canvas-depth2-wrap{
|
||||
.canvas-depth2-inner{
|
||||
.canvas-depth2-list{
|
||||
.canvas-depth2-item{
|
||||
button{
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
.canvas-menu-wrap{
|
||||
.canvas-menu-inner{
|
||||
.canvas-menu-list{
|
||||
.canvas-menu-item button{
|
||||
.menu-icon{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.canvas-content{
|
||||
.canvas-frame{
|
||||
height: calc(100vh - 129.5px);
|
||||
}
|
||||
&.active{
|
||||
.canvas-frame{
|
||||
height: calc(100vh - 179.5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1500px) {
|
||||
.canvas-menu-wrap{
|
||||
.canvas-menu-inner{
|
||||
.canvas-menu-list{
|
||||
.canvas-menu-item{
|
||||
button{
|
||||
padding: 15px 10px;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.canvas-side-btn-wrap{
|
||||
.btn-from{
|
||||
gap: 3px;
|
||||
}
|
||||
.vertical-horizontal{
|
||||
margin: 0 3px;
|
||||
min-width: 150px;
|
||||
}
|
||||
.select-box{
|
||||
width: 100px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
.size-control{
|
||||
width: 90px;
|
||||
margin: 0 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sub-header{
|
||||
.sub-header-inner{
|
||||
.sub-header-title{
|
||||
font-size: 15px;
|
||||
}
|
||||
.sub-header-title-wrap{
|
||||
.title-item{
|
||||
a{
|
||||
.icon{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -29,7 +29,7 @@ header{
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
min-width: 1600px;
|
||||
min-width: 1280px;
|
||||
height: 46px;
|
||||
background-color: #1C1C1C;
|
||||
border-bottom: 1px solid #000;
|
||||
@ -230,4 +230,22 @@ footer{
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1500px) {
|
||||
header{
|
||||
.header-inner{
|
||||
.header-right{
|
||||
nav{
|
||||
.nav-list{
|
||||
.nav-item{
|
||||
button{
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -595,8 +595,9 @@
|
||||
overflow-x: hidden;
|
||||
.center-page-inner{
|
||||
width: 100%;
|
||||
max-width: 1720px;
|
||||
max-width: 1760px;
|
||||
margin: 0 auto;
|
||||
padding: 10px 20px;
|
||||
.center-page-tit{
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
|
||||
@ -488,6 +488,7 @@ $alert-color: #101010;
|
||||
color: #101010;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
transition: all .15s ease-in-out;
|
||||
.img-edit{
|
||||
width: 16px;
|
||||
|
||||
@ -346,6 +346,11 @@ button{
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.select-item-wrap{
|
||||
position: absolute;
|
||||
|
||||
@ -4,7 +4,7 @@ ul, li {padding: 0; margin: 0; list-style: none; }
|
||||
body, td { line-height: normal;font-style: normal; font-variant: normal; font-size: 12px; color: #6b6b6b; }
|
||||
table { margin-bottom: 150px; border-collapse: collapse; border-spacing: 0; }
|
||||
#g_header h1 { height: 60px; line-height: 60px; padding-left: 28px; margin-top: 0; color: #fff; background: #424242;font-size: 24px; font-family:'Pretendard', 돋움, Sans-Serif;}
|
||||
#g_body { padding: 0 30px; }
|
||||
#g_body { padding: 0 30px 1px; }
|
||||
.guide_table { width: 100%;border-top:1px solid #424242;table-layout: auto;}
|
||||
.guide_table thead th { background: #f1f1f1; text-align: center; padding:20px 3px;border:1px solid #dadada;border-top:1px solid #424242;font-size:15px;font-weight: 600; font-family:'Pretendard', 돋움, Sans-Serif;}
|
||||
.guide_table tbody td { padding:12px 3px; vertical-align: middle; border: solid 1px #dadada;text-align:left;font-size:13px; font-family:'Pretendard', 돋움, Sans-Serif;}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user