🚨chore: Sync Sass
This commit is contained in:
minsik
parent
36077b601f
commit
8d25b6176f
@ -3,19 +3,24 @@
|
||||
height: calc(100vh - 47px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.canvas-content {
|
||||
flex: 1 1 auto;
|
||||
|
||||
.canvas-layout {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.sub-wrap {
|
||||
overflow: hidden;
|
||||
|
||||
.canvas-content {
|
||||
height: calc(100% - 47px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// CanvasMenu
|
||||
.canvas-menu-wrap {
|
||||
position: relative;
|
||||
@ -24,6 +29,7 @@
|
||||
padding-bottom: 0;
|
||||
background-color: #383838;
|
||||
transition: padding .17s ease-in-out;
|
||||
|
||||
.canvas-menu-inner {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@ -31,14 +37,17 @@
|
||||
padding: 0 40px 0 20px;
|
||||
background-color: #2C2C2C;
|
||||
z-index: 999;
|
||||
|
||||
.canvas-menu-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
.canvas-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -49,6 +58,7 @@
|
||||
padding: 15px 20px;
|
||||
opacity: 0.55;
|
||||
transition: all .17s ease-in-out;
|
||||
|
||||
.menu-icon {
|
||||
display: block;
|
||||
width: 16px;
|
||||
@ -57,38 +67,66 @@
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
margin-right: 10px;
|
||||
&.con00{background-image: url(/static/images/canvas/menu_icon00.svg);}
|
||||
&.con01{background-image: url(/static/images/canvas/menu_icon01.svg);}
|
||||
&.con02{background-image: url(/static/images/canvas/menu_icon02.svg);}
|
||||
&.con03{background-image: url(/static/images/canvas/menu_icon03.svg);}
|
||||
&.con04{background-image: url(/static/images/canvas/menu_icon04.svg);}
|
||||
&.con05{background-image: url(/static/images/canvas/menu_icon05.svg);}
|
||||
&.con06{background-image: url(/static/images/canvas/menu_icon06.svg);}
|
||||
|
||||
&.con00 {
|
||||
background-image: url(/static/images/canvas/menu_icon00.svg);
|
||||
}
|
||||
|
||||
&.con01 {
|
||||
background-image: url(/static/images/canvas/menu_icon01.svg);
|
||||
}
|
||||
|
||||
&.con02 {
|
||||
background-image: url(/static/images/canvas/menu_icon02.svg);
|
||||
}
|
||||
|
||||
&.con03 {
|
||||
background-image: url(/static/images/canvas/menu_icon03.svg);
|
||||
}
|
||||
|
||||
&.con04 {
|
||||
background-image: url(/static/images/canvas/menu_icon04.svg);
|
||||
}
|
||||
|
||||
&.con05 {
|
||||
background-image: url(/static/images/canvas/menu_icon05.svg);
|
||||
}
|
||||
|
||||
&.con06 {
|
||||
background-image: url(/static/images/canvas/menu_icon06.svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #383838;
|
||||
|
||||
button {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.canvas-side-btn-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
|
||||
.select-box {
|
||||
width: 124px;
|
||||
margin-right: 5px;
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-from {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
button {
|
||||
display: block;
|
||||
width: 30px;
|
||||
@ -99,27 +137,58 @@
|
||||
background-repeat: no-repeat;
|
||||
background-size: 15px 15px;
|
||||
transition: all .17s ease-in-out;
|
||||
&.btn01{background-image: url(../../public/static/images/canvas/side_icon03.svg);}
|
||||
&.btn02{background-image: url(../../public/static/images/canvas/side_icon02.svg);}
|
||||
&.btn03{background-image: url(../../public/static/images/canvas/side_icon01.svg);}
|
||||
&.btn04{background-image: url(../../public/static/images/canvas/side_icon04.svg);}
|
||||
&.btn05{background-image: url(../../public/static/images/canvas/side_icon05.svg);}
|
||||
&.btn06{background-image: url(../../public/static/images/canvas/side_icon06.svg);}
|
||||
&.btn07{background-image: url(../../public/static/images/canvas/side_icon07.svg);}
|
||||
&.btn08{background-image: url(../../public/static/images/canvas/side_icon08.svg);}
|
||||
&.btn09{background-image: url(../../public/static/images/canvas/side_icon09.svg);}
|
||||
|
||||
&.btn01 {
|
||||
background-image: url(../../public/static/images/canvas/side_icon03.svg);
|
||||
}
|
||||
|
||||
&.btn02 {
|
||||
background-image: url(../../public/static/images/canvas/side_icon02.svg);
|
||||
}
|
||||
|
||||
&.btn03 {
|
||||
background-image: url(../../public/static/images/canvas/side_icon01.svg);
|
||||
}
|
||||
|
||||
&.btn04 {
|
||||
background-image: url(../../public/static/images/canvas/side_icon04.svg);
|
||||
}
|
||||
|
||||
&.btn05 {
|
||||
background-image: url(../../public/static/images/canvas/side_icon05.svg);
|
||||
}
|
||||
|
||||
&.btn06 {
|
||||
background-image: url(../../public/static/images/canvas/side_icon06.svg);
|
||||
}
|
||||
|
||||
&.btn07 {
|
||||
background-image: url(../../public/static/images/canvas/side_icon07.svg);
|
||||
}
|
||||
|
||||
&.btn08 {
|
||||
background-image: url(../../public/static/images/canvas/side_icon08.svg);
|
||||
}
|
||||
|
||||
&.btn09 {
|
||||
background-image: url(../../public/static/images/canvas/side_icon09.svg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #1083E3;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #1083E3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ico-btn-from {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
button {
|
||||
.ico {
|
||||
display: block;
|
||||
@ -128,22 +197,37 @@
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
&.ico01{background-image: url(../../public/static/images/canvas/ico-flx01.svg);}
|
||||
&.ico02{background-image: url(../../public/static/images/canvas/ico-flx02.svg);}
|
||||
&.ico03{background-image: url(../../public/static/images/canvas/ico-flx03.svg);}
|
||||
&.ico04{background-image: url(../../public/static/images/canvas/ico-flx04.svg);}
|
||||
|
||||
&.ico01 {
|
||||
background-image: url(../../public/static/images/canvas/ico-flx01.svg);
|
||||
}
|
||||
|
||||
&.ico02 {
|
||||
background-image: url(../../public/static/images/canvas/ico-flx02.svg);
|
||||
}
|
||||
|
||||
&.ico03 {
|
||||
background-image: url(../../public/static/images/canvas/ico-flx03.svg);
|
||||
}
|
||||
|
||||
&.ico04 {
|
||||
background-image: url(../../public/static/images/canvas/ico-flx04.svg);
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&.form06 {
|
||||
.name {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-horizontal {
|
||||
display: flex;
|
||||
min-width: 170px;
|
||||
@ -153,11 +237,13 @@
|
||||
background: #373737;
|
||||
line-height: 28px;
|
||||
overflow: hidden;
|
||||
|
||||
span {
|
||||
padding: 0 10px;
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-left: auto;
|
||||
height: 100%;
|
||||
@ -168,12 +254,14 @@
|
||||
padding: 0 7.5px;
|
||||
transition: all .17s ease-in-out;
|
||||
}
|
||||
|
||||
&.on {
|
||||
button {
|
||||
background-color: #1083E3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.size-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -184,10 +272,12 @@
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
margin: 0 5px;
|
||||
|
||||
span {
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
display: block;
|
||||
width: 12px;
|
||||
@ -195,9 +285,11 @@
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
&.minus {
|
||||
background-image: url(../../public/static/images/canvas/minus.svg);
|
||||
}
|
||||
|
||||
&.plus {
|
||||
background-image: url(../../public/static/images/canvas/plus.svg);
|
||||
}
|
||||
@ -205,6 +297,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.canvas-depth2-wrap {
|
||||
position: absolute;
|
||||
top: -100%;
|
||||
@ -213,20 +306,24 @@
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
transition: all .17s ease-in-out;
|
||||
|
||||
.canvas-depth2-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 40px;
|
||||
height: 100%;
|
||||
|
||||
.canvas-depth2-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
.canvas-depth2-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 26px;
|
||||
height: 100%;
|
||||
|
||||
button {
|
||||
position: relative;
|
||||
opacity: 0.55;
|
||||
@ -236,10 +333,12 @@
|
||||
height: 100%;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
button {
|
||||
opacity: 1;
|
||||
font-weight: 600;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -254,17 +353,20 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.canvas-depth2-btn-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
height: 100%;
|
||||
|
||||
.depth2-btn-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 34px;
|
||||
height: 100%;
|
||||
transition: all .17s ease-in-out;
|
||||
|
||||
button {
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
@ -272,6 +374,7 @@
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
padding-right: 12px;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -283,19 +386,23 @@
|
||||
background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.mouse {
|
||||
opacity: 0.55;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
top: 47px;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
@ -308,10 +415,12 @@
|
||||
background-color: #1C1C1C;
|
||||
border-top: 1px solid #000;
|
||||
width: 100%;
|
||||
|
||||
.canvas-plane-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: calc(100% - 45px);
|
||||
|
||||
.canvas-page-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -320,6 +429,7 @@
|
||||
border-right: 1px solid #000;
|
||||
min-width: 0;
|
||||
transition: all .17s ease-in-out;
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -331,6 +441,7 @@
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.close {
|
||||
flex: none;
|
||||
display: block;
|
||||
@ -340,24 +451,30 @@
|
||||
background: url(../../public/static/images/canvas/plan_close_gray.svg) no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&.on {
|
||||
background-color: #fff;
|
||||
|
||||
span {
|
||||
font-weight: 600;
|
||||
color: #101010;
|
||||
}
|
||||
|
||||
.close {
|
||||
background: url(../../public/static/images/canvas/plan_close_black.svg) no-repeat center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plane-add {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -367,6 +484,7 @@
|
||||
background-color: #1C1C1C;
|
||||
border-right: 1px solid #000;
|
||||
transition: all .17s ease-in-out;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 9px;
|
||||
@ -374,6 +492,7 @@
|
||||
background: url(../../public/static/images/canvas/plane_add.svg) no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #000;
|
||||
}
|
||||
@ -385,6 +504,7 @@
|
||||
position: relative;
|
||||
height: calc(100% - 36.5px);
|
||||
background-color: #fff;
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -404,20 +524,25 @@
|
||||
border-bottom: 1px solid #000;
|
||||
background: #2C2C2C;
|
||||
z-index: 999;
|
||||
|
||||
.sub-header-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0 100px;
|
||||
|
||||
.sub-header-title-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.title-item {
|
||||
position: relative;
|
||||
padding: 0 24px;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
@ -425,9 +550,13 @@
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
&.drawing{background-image: url(../../public/static/images/main/drawing_icon.svg);}
|
||||
|
||||
&.drawing {
|
||||
background-image: url(../../public/static/images/main/drawing_icon.svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -438,31 +567,38 @@
|
||||
height: 16px;
|
||||
background-color: #D9D9D9;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-header-title {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sub-header-location {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.location-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
@ -470,6 +606,7 @@
|
||||
font-weight: normal;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -480,14 +617,18 @@
|
||||
height: 6px;
|
||||
background: url(../../public/static/images/main/loaction_arr.svg) no-repeat center;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
@ -500,42 +641,51 @@
|
||||
// sub content
|
||||
.sub-content {
|
||||
padding-top: 46px;
|
||||
|
||||
.sub-content-inner {
|
||||
max-width: 1720px;
|
||||
margin: 0 auto;
|
||||
padding-top: 20px;
|
||||
|
||||
.sub-content-box {
|
||||
margin-bottom: 20px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.estimate {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100% - 36.5px);
|
||||
overflow-y: auto;
|
||||
padding-top: 0;
|
||||
|
||||
.sub-content-inner {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-table-box {
|
||||
padding: 20px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #E9EAED;
|
||||
background: #FFF;
|
||||
box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
|
||||
|
||||
.table-box-title-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.title-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
h3 {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
@ -543,21 +693,26 @@
|
||||
font-weight: 600;
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
.info-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
padding: 0 6px;
|
||||
font-size: 12px;
|
||||
color: #101010;
|
||||
font-weight: normal;
|
||||
|
||||
span {
|
||||
font-weight: 600;
|
||||
|
||||
&.red {
|
||||
color: #E23D70;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -568,17 +723,29 @@
|
||||
height: 11px;
|
||||
background-color: #D9D9D9;
|
||||
}
|
||||
&:first-child{padding-left: 0;}
|
||||
&:last-child{padding-right: 0;&::after{display: none;}}
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left-unit-box {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.promise-gudie {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
@ -586,15 +753,18 @@
|
||||
color: #101010;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.important {
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
.sub-table-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.pagination-wrap {
|
||||
margin-top: 24px;
|
||||
}
|
||||
@ -604,19 +774,23 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
.sub-table-box {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.info-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #344356;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.info-inner {
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
color: #344356;
|
||||
|
||||
.copy-ico {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@ -634,14 +808,17 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.estimate-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:last-child {
|
||||
flex: none;
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
.estimate-tit {
|
||||
width: 105px;
|
||||
height: 30px;
|
||||
@ -653,6 +830,7 @@
|
||||
font-weight: 500;
|
||||
color: #344356;
|
||||
}
|
||||
|
||||
.estimate-name {
|
||||
font-size: 13px;
|
||||
color: #344356;
|
||||
@ -660,6 +838,7 @@
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -668,13 +847,16 @@
|
||||
// file drag box
|
||||
.drag-file-box {
|
||||
padding: 10px;
|
||||
|
||||
.btn-area {
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px solid #ECF0F4;
|
||||
}
|
||||
|
||||
.drag-file-area {
|
||||
position: relative;
|
||||
margin-top: 15px;
|
||||
|
||||
p {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -686,9 +868,11 @@
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.file-list {
|
||||
.file-item {
|
||||
margin-bottom: 15px;
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
@ -696,6 +880,7 @@
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
padding-right: 55px;
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -707,6 +892,7 @@
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -719,22 +905,28 @@
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
|
||||
.sub-table-box {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.chart-inner {
|
||||
flex: 1;
|
||||
|
||||
.chart-box {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-table-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: none;
|
||||
width: 650px;
|
||||
|
||||
.sub-table-box {
|
||||
flex: 1;
|
||||
|
||||
&:first-child {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@ -748,6 +940,7 @@
|
||||
border-collapse: collapse;
|
||||
border: 1px solid #ECF0F4;
|
||||
border-radius: 4px;
|
||||
|
||||
thead {
|
||||
th {
|
||||
padding: 4.5px 0;
|
||||
@ -759,6 +952,7 @@
|
||||
background-color: #F8F9FA;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
td {
|
||||
font-size: 13px;
|
||||
@ -773,9 +967,11 @@
|
||||
.simulation-guide-wrap {
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
|
||||
.simulation-tit-wrap {
|
||||
padding-right: 40px;
|
||||
border-right: 1px solid #EEEEEE;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
position: relative;
|
||||
@ -783,6 +979,7 @@
|
||||
font-size: 15px;
|
||||
color: #14324F;
|
||||
font-weight: 600;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -796,22 +993,27 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.simulation-guide-box {
|
||||
padding-left: 40px;
|
||||
|
||||
dl {
|
||||
margin-bottom: 25px;
|
||||
|
||||
dt {
|
||||
font-size: 13px;
|
||||
color: #101010;
|
||||
font-weight: 600;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
dd {
|
||||
font-size: 12px;
|
||||
color: #45576F;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -827,6 +1029,7 @@
|
||||
margin-right: 4px;
|
||||
border: 1px solid #ECF0F4;
|
||||
border-top: none;
|
||||
|
||||
.total-title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
@ -834,6 +1037,7 @@
|
||||
color: #344356;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.total-num {
|
||||
flex: none;
|
||||
width: 121px;
|
||||
@ -843,3 +1047,94 @@
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
// 패널 배치 집계
|
||||
|
||||
.penal-wrap {
|
||||
position: fixed;
|
||||
top: 200px;
|
||||
left: 50px;
|
||||
z-index: 999999;
|
||||
width: 237px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #DFDFDF;
|
||||
padding: 0 34px 0 10px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.05);
|
||||
cursor: pointer;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 12px;
|
||||
transform: translateY(-50%);
|
||||
width: 10px;
|
||||
height: 6px;
|
||||
background: url(../../public/static/images/canvas/penal_arr.svg) no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #3D3D3D;
|
||||
}
|
||||
|
||||
.penal-table-wrap {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: -1px;
|
||||
min-width: calc(100% + 2px);
|
||||
background-color: #3D3D3D;
|
||||
border: 1px solid #3D3D3D;
|
||||
padding: 20px;
|
||||
|
||||
.penal-table {
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
|
||||
thead {
|
||||
th {
|
||||
text-align: center;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
border: 1px solid #505050;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
td {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #505050;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.act {
|
||||
border: 1px solid #3D3D3D;
|
||||
background-color: #3D3D3D;
|
||||
|
||||
h2 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background: url(../../public/static/images/canvas/penal_arr_white.svg) no-repeat center;
|
||||
}
|
||||
|
||||
.penal-table-wrap {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -77,6 +77,10 @@ $alert-color: #101010;
|
||||
width: 640px;
|
||||
}
|
||||
|
||||
&.lx-2 {
|
||||
width: 740px;
|
||||
}
|
||||
|
||||
&.lx {
|
||||
width: 770px;
|
||||
}
|
||||
@ -783,6 +787,7 @@ $alert-color: #101010;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding-bottom: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.eaves-keraba-td {
|
||||
@ -1543,3 +1548,115 @@ $alert-color: #101010;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 지붕모듈선택
|
||||
.roof-module-tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 14px;
|
||||
|
||||
.module-tab-bx {
|
||||
flex: 1;
|
||||
height: 34px;
|
||||
line-height: 31px;
|
||||
border: 1px solid #484848;
|
||||
border-radius: 2px;
|
||||
background-color: transparent;
|
||||
font-size: 12px;
|
||||
color: #AAA;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
transition: all .15s ease-in-out;
|
||||
|
||||
&.act {
|
||||
background-color: #1083E3;
|
||||
border: 1px solid #1083E3;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-arr {
|
||||
display: block;
|
||||
width: 9px;
|
||||
height: 14px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
|
||||
transition: all .15s ease-in-out;
|
||||
|
||||
&.act {
|
||||
background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.roof-module-compas {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.compas-box-inner {
|
||||
width: 280px;
|
||||
height: 253px;
|
||||
|
||||
.circle {
|
||||
top: 86%;
|
||||
|
||||
&:nth-child(1),
|
||||
&:nth-child(7),
|
||||
&:nth-child(13),
|
||||
&:nth-child(19) {
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 1px;
|
||||
height: 6px;
|
||||
background-color: #8B8B8B;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
top: 32px;
|
||||
}
|
||||
|
||||
&.act {
|
||||
i {
|
||||
color: #8B8B8B;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.center-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.module-table-flex-wrap {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.module-table-box {
|
||||
flex: 1;
|
||||
background-color: #3D3D3D;
|
||||
border-radius: 2px;
|
||||
|
||||
.module-table-inneer {
|
||||
padding: 10px;
|
||||
|
||||
.outline-form {
|
||||
span {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -5,14 +5,17 @@
|
||||
text-size-adjust: none;
|
||||
box-sizing: content-box
|
||||
}
|
||||
|
||||
*, ::after, ::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
@ -36,33 +39,42 @@ time, mark, audio, video {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-smooth: never;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1.4;
|
||||
}
|
||||
body:first-of-type caption { display:none;}
|
||||
|
||||
body:first-of-type caption {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
border: 0 none;
|
||||
}
|
||||
|
||||
caption, th, td {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
@ -73,14 +85,17 @@ a {
|
||||
cursor: pointer;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
a, a:hover, a:active {
|
||||
text-decoration: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
/*form_style*/
|
||||
input, select, textarea, button, a, label {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
button, input[type=text], input[type=button] {
|
||||
-webkit-appearance: none;
|
||||
-webkit-border-radius: 0;
|
||||
@ -88,23 +103,28 @@ button,input[type=text], input[type=button] {
|
||||
appearance: none;
|
||||
border-radius: 0
|
||||
}
|
||||
|
||||
input[type=checkbox], input[type=radio] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input, select, button {
|
||||
border: 0 none;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
select {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
line-height: 1;
|
||||
font-weight: 300;
|
||||
@ -112,9 +132,11 @@ select::-ms-expand {
|
||||
letter-spacing: -0.6px;
|
||||
color: #8b8b8b;
|
||||
}
|
||||
|
||||
.log-box ::-webkit-input-placeholder {
|
||||
color: #8b8b8b;
|
||||
}
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
@ -126,23 +148,73 @@ button{
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pre {
|
||||
font-family: 'Pretendard', sans-serif !important;
|
||||
}
|
||||
|
||||
// margin
|
||||
.mt5{margin-top: 5px !important;}
|
||||
.mt10{margin-top: 10px !important;}
|
||||
.mt15{margin-top: 15px !important;}
|
||||
.mb5{margin-bottom: 5px !important;}
|
||||
.mb10{margin-bottom: 10px !important;}
|
||||
.mb15{margin-bottom: 15px !important;}
|
||||
.mr5{margin-right: 5px !important;}
|
||||
.mr10{margin-right: 10px !important;}
|
||||
.mr15{margin-right: 15px !important;}
|
||||
.ml5{margin-left: 5px !important;}
|
||||
.ml10{margin-left: 10px !important;}
|
||||
.ml15{margin-left: 15px !important;}
|
||||
.mt5 {
|
||||
margin-top: 5px !important;
|
||||
}
|
||||
|
||||
.mt10 {
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
|
||||
.mt15 {
|
||||
margin-top: 15px !important;
|
||||
}
|
||||
|
||||
.mb5 {
|
||||
margin-bottom: 5px !important;
|
||||
}
|
||||
|
||||
.mb10 {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
.mb15 {
|
||||
margin-bottom: 15px !important;
|
||||
}
|
||||
|
||||
.mr5 {
|
||||
margin-right: 5px !important;
|
||||
}
|
||||
|
||||
.mr10 {
|
||||
margin-right: 10px !important;
|
||||
}
|
||||
|
||||
.mr15 {
|
||||
margin-right: 15px !important;
|
||||
}
|
||||
|
||||
.ml5 {
|
||||
margin-left: 5px !important;
|
||||
}
|
||||
|
||||
.ml10 {
|
||||
margin-left: 10px !important;
|
||||
}
|
||||
|
||||
.ml15 {
|
||||
margin-left: 15px !important;
|
||||
}
|
||||
|
||||
// align
|
||||
.l {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.r {
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
.c {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
|
||||
// button
|
||||
.btn-frame {
|
||||
@ -159,9 +231,11 @@ button{
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
transition: all .17s ease-in-out;
|
||||
cursor: pointer;
|
||||
|
||||
&.block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.small {
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
height: 30px;
|
||||
@ -173,19 +247,23 @@ button{
|
||||
background-color: #2C2C2C;
|
||||
border: 1px solid #484848;
|
||||
}
|
||||
|
||||
&.gray {
|
||||
background-color: #3C3C3C;
|
||||
border: 1px solid #545454;
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background-color: #1C1C1C;
|
||||
border: 1px solid #484848;
|
||||
}
|
||||
|
||||
&.modal {
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
background-color: #272727;
|
||||
border: 1px solid #484848;
|
||||
color: #aaa;
|
||||
|
||||
&:hover {
|
||||
background-color: #1083E3;
|
||||
border: 1px solid #1083E3;
|
||||
@ -193,6 +271,7 @@ button{
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&.sub-tab {
|
||||
height: 30px;
|
||||
padding: 0 10px;
|
||||
@ -201,6 +280,7 @@ button{
|
||||
background-color: #2D2D2D;
|
||||
border: 1px solid #393939;
|
||||
color: #aaa;
|
||||
|
||||
&.act,
|
||||
&:hover {
|
||||
background-color: #414E6C;
|
||||
@ -209,6 +289,7 @@ button{
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.act {
|
||||
background-color: #1083E3;
|
||||
@ -216,16 +297,20 @@ button{
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.ico-flx {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.ico {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.act {
|
||||
font-weight: 400;
|
||||
@ -243,14 +328,18 @@ button{
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
transition: all .15s ease-in-out;
|
||||
|
||||
&.navy {
|
||||
background-color: #304961;
|
||||
|
||||
&:hover {
|
||||
background-color: #1083E3;
|
||||
}
|
||||
}
|
||||
|
||||
&.grey {
|
||||
background-color: #94A0AD;
|
||||
|
||||
&:hover {
|
||||
background-color: #607F9A;
|
||||
}
|
||||
@ -271,11 +360,13 @@ button{
|
||||
border-top-left-radius: 2px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
|
||||
p {
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.select-item-wrap {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
@ -291,34 +382,41 @@ button{
|
||||
transition: all 0.17s ease-in-out;
|
||||
visibility: hidden;
|
||||
z-index: 999;
|
||||
|
||||
.select-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 20px;
|
||||
line-height: 1.4;
|
||||
transition: all .17s ease-in-out;
|
||||
|
||||
button {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #2C2C2C;
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
background-color: transparent;
|
||||
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #5a5a5a;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -331,11 +429,13 @@ button{
|
||||
background-size: cover;
|
||||
transition: all .17s ease-in-out;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.select-item-wrap {
|
||||
clip-path: inset(0 0 0 0);
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&:after {
|
||||
transform: translateY(-50%) rotate(-180deg);
|
||||
}
|
||||
@ -355,15 +455,18 @@ button{
|
||||
color: #45576F;
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
cursor: pointer;
|
||||
|
||||
&:disabled {
|
||||
opacity: 1;
|
||||
background-color: #FAFAFA;
|
||||
color: #999;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.black {
|
||||
color: #101010;
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background: #323234 url(../../public/static/images/common/select_dark_arr.svg) calc(100% - 11px) center no-repeat;
|
||||
color: #898989;
|
||||
@ -384,6 +487,7 @@ button{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=number],
|
||||
input[type=text] {
|
||||
&.input-origin {
|
||||
@ -399,18 +503,28 @@ input[type=text]{
|
||||
padding: 0 10px;
|
||||
letter-spacing: 0px;
|
||||
text-align: right;
|
||||
|
||||
&::placeholder {
|
||||
opacity: 1;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0px;
|
||||
}
|
||||
|
||||
&.block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:read-only {
|
||||
color: #AAA;
|
||||
}
|
||||
|
||||
&.plane {
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
border: 1px solid #525252;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.input-light {
|
||||
display: block;
|
||||
width: 100%;
|
||||
@ -425,6 +539,7 @@ input[type=text]{
|
||||
font-weight: normal;
|
||||
transition: border-color .17s ease-in-out;
|
||||
text-align: left;
|
||||
|
||||
&:read-only {
|
||||
background-color: #FAFAFA;
|
||||
color: #999999;
|
||||
@ -433,7 +548,6 @@ input[type=text]{
|
||||
}
|
||||
|
||||
|
||||
|
||||
// check-btn
|
||||
.check-btn {
|
||||
display: flex;
|
||||
@ -442,6 +556,7 @@ input[type=text]{
|
||||
background-color: #3A3A3A;
|
||||
border-radius: 3px;
|
||||
transition: all .17s ease-in-out;
|
||||
|
||||
.check-area {
|
||||
flex: none;
|
||||
width: 30px;
|
||||
@ -450,22 +565,27 @@ input[type=text]{
|
||||
background: url(../../public/static/images/canvas/check-grey.svg) no-repeat center;
|
||||
background-size: 11px 9px;
|
||||
}
|
||||
|
||||
.title-area {
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
color: #898989;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&.block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.act {
|
||||
background-color: #fff;
|
||||
|
||||
.check-area {
|
||||
border-right: 1px solid #101010;
|
||||
background: url(../../public/static/images/canvas/check-black.svg) no-repeat center;
|
||||
}
|
||||
|
||||
.title-area {
|
||||
color: #101010;
|
||||
font-weight: 600;
|
||||
@ -482,12 +602,14 @@ input[type=text]{
|
||||
padding: 0 11px;
|
||||
text-align: left;
|
||||
transition: all .17s ease-in-out;
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
color: #898989;
|
||||
font-weight: 400;
|
||||
padding-right: 15px;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -499,27 +621,34 @@ input[type=text]{
|
||||
background: url(../../public/static/images/canvas/arr_btn_ico.svg) no-repeat center;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.act {
|
||||
background-color: #fff;
|
||||
|
||||
span {
|
||||
color: #101010;
|
||||
font-weight: 500;
|
||||
|
||||
&:after {
|
||||
background: url(../../public/static/images/canvas/arr_btn_ico_black.svg) no-repeat center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.dark {
|
||||
text-align: center;
|
||||
background-color: #272727;
|
||||
border: 1px solid #484848;
|
||||
|
||||
span {
|
||||
color: #Fff;
|
||||
|
||||
&:after {
|
||||
background: url(../../public/static/images/canvas/arr_btn_ico_white.svg) no-repeat center;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.act {
|
||||
background-color: #1083E3;
|
||||
@ -533,6 +662,7 @@ input[type=text]{
|
||||
.d-check-box {
|
||||
line-height: 1.1;
|
||||
cursor: pointer;
|
||||
|
||||
input[type=checkbox],
|
||||
input[type=radio] {
|
||||
position: static;
|
||||
@ -542,6 +672,7 @@ input[type=text]{
|
||||
z-index: 1;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
label {
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
@ -555,11 +686,13 @@ input[type=text]{
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.light {
|
||||
label {
|
||||
color: #45576F;
|
||||
}
|
||||
}
|
||||
|
||||
&.no-text {
|
||||
label {
|
||||
padding-left: 0;
|
||||
@ -587,6 +720,7 @@ input[type=text]{
|
||||
line-height: 1.4;
|
||||
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
&::after {
|
||||
cursor: pointer;
|
||||
content: "";
|
||||
@ -608,28 +742,34 @@ input[type=text]{
|
||||
transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
&.light {
|
||||
label {
|
||||
&:before {
|
||||
border-color: #D6D6D7;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background-color: #697C8F;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type=radio]:checked + label::after {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&.pop {
|
||||
label {
|
||||
font-size: 12px;
|
||||
|
||||
&:before {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
&:after {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
@ -656,6 +796,7 @@ input[type=text]{
|
||||
background-color: transparent;
|
||||
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
&:after {
|
||||
cursor: pointer;
|
||||
content: "";
|
||||
@ -669,6 +810,7 @@ input[type=text]{
|
||||
transition: border 0.05s ease-in-out, color 0.05s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=checkbox]:checked + label::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
@ -683,6 +825,7 @@ input[type=text]{
|
||||
transform: translate(7.75px, 4.5px) rotate(45deg);
|
||||
-ms-transform: translate(7.75px, 4.5px) rotate(45deg);
|
||||
}
|
||||
|
||||
&.pop {
|
||||
input[type=checkbox]:checked + label::after {
|
||||
border-color: #fff;
|
||||
@ -692,10 +835,14 @@ input[type=text]{
|
||||
|
||||
// date-picker
|
||||
.date-picker {
|
||||
svg{display: none;}
|
||||
svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.react-datepicker-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type=text] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
@ -9,6 +9,7 @@ table{
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.al-l {
|
||||
text-align: left !important;
|
||||
}
|
||||
@ -20,6 +21,7 @@ table{
|
||||
border: 1px solid #ECF0F4;
|
||||
border-radius: 3px;
|
||||
border-collapse: collapse;
|
||||
|
||||
tbody {
|
||||
th {
|
||||
font-size: 13px;
|
||||
@ -30,6 +32,7 @@ table{
|
||||
background-color: #F7F9FA;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 9px;
|
||||
border: 1px solid #ECF0F4;
|
||||
@ -37,16 +40,20 @@ table{
|
||||
font-weight: 400;
|
||||
color: #45576F;
|
||||
vertical-align: middle;
|
||||
|
||||
.radio-wrap {
|
||||
flex: none;
|
||||
@include flexbox;
|
||||
}
|
||||
|
||||
.form-flex-wrap {
|
||||
@include flexbox;
|
||||
}
|
||||
|
||||
.date-picker-wrap {
|
||||
width: 100%;
|
||||
@include flexbox;
|
||||
|
||||
span {
|
||||
margin: 0 4px;
|
||||
}
|
||||
@ -54,6 +61,7 @@ table{
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.bt-able {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
@ -64,6 +72,7 @@ table{
|
||||
border-top: 1px solid #DEE3EA;
|
||||
border-bottom: 1px solid #DEE3EA;
|
||||
border-collapse: collapse;
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
th {
|
||||
@ -72,10 +81,12 @@ table{
|
||||
font-weight: 500;
|
||||
padding: 18px 0;
|
||||
border-bottom: 1px solid #F4F4F7;
|
||||
|
||||
.title {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0 0 0 15px;
|
||||
border-bottom: 1px solid #F4F4F7;
|
||||
@ -86,21 +97,27 @@ table{
|
||||
font-weight: normal;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 13px;
|
||||
color: #697C8F;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
th,td{border-bottom: none;}
|
||||
th, td {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flx-box {
|
||||
@include flexbox;
|
||||
}
|
||||
}
|
||||
|
||||
.tooltips {
|
||||
display: block;
|
||||
width: 14px;
|
||||
@ -116,10 +133,12 @@ table{
|
||||
table {
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
|
||||
thead {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
|
||||
th {
|
||||
padding: 13px 0;
|
||||
font-size: 13px;
|
||||
@ -129,14 +148,17 @@ table{
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
display: block;
|
||||
overflow-y: auto;
|
||||
|
||||
tr {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
border: 1px solid #ECF0F4;
|
||||
|
||||
td {
|
||||
padding: 10px 0px;
|
||||
font-size: 13px;
|
||||
@ -145,20 +167,27 @@ table{
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #C1CCD7;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.small {
|
||||
tbody{height: 120px;}
|
||||
tbody {
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
&.big {
|
||||
td,
|
||||
th {
|
||||
@ -166,8 +195,10 @@ table{
|
||||
width: 121px;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
height: 160px;
|
||||
|
||||
td {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
@ -175,3 +206,10 @@ table{
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.roof-module-table {
|
||||
table {
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user