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

물건현황 react-select 용 퍼블 scss 머지

Browse Source
This commit is contained in:
basssy 2024-10-18 08:51:23 +09:00
parent cdf6a43cac
commit be866218fa
5 changed files with 2764 additions and 2073 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/management/StuffDetail.jsx
View File

@ -536,8 +536,11 @@ export default function StuffDetail() {
</th> </th>
<td> <td>
<div className="flx-box"> <div className="flx-box">
<div style={{ width: '567px', marginRight: '5px' }}> <div className="select-wrap mr5" style={{ width: '567px' }}>
<Select <Select
className="react-select-custom"
classNamePrefix="custom"
placeholder="Select"
options={saleStoreList} options={saleStoreList}
onChange={onSelectionChange} onChange={onSelectionChange}
getOptionLabel={(x) => x.saleStoreName} getOptionLabel={(x) => x.saleStoreName}
@ -562,8 +565,11 @@ export default function StuffDetail() {
</th> </th>
<td> <td>
<div className="flx-box"> <div className="flx-box">
<div style={{ width: '567px', marginRight: '5px' }}> <div className="select-wrap mr5" style={{ width: '567px' }}>
<Select <Select
className="react-select-custom"
classNamePrefix="custom"
placeholder="Select"
ref={ref} ref={ref}
options={otherSaleStoreList} options={otherSaleStoreList}
onChange={onSelectionChange2} onChange={onSelectionChange2}

5
src/components/management/StuffSearchCondition.jsx
View File

@ -257,8 +257,12 @@ export default function StuffSearchCondition() {
</td> </td>
<th>{getMessage('stuff.search.schSelSaleStoreId')}</th> <th>{getMessage('stuff.search.schSelSaleStoreId')}</th>
<td> <td>
<div className="select-wrap">
{schSelSaleStoreList?.length > 0 && ( {schSelSaleStoreList?.length > 0 && (
<Select <Select
className="react-select-custom"
classNamePrefix="custom"
placeholder="Select"
ref={ref} ref={ref}
options={schSelSaleStoreList} options={schSelSaleStoreList}
onChange={onSelectionChange} onChange={onSelectionChange}
@ -269,6 +273,7 @@ export default function StuffSearchCondition() {
isClearable={true} isClearable={true}
/> />
)} )}
</div>
</td> </td>
</tr> </tr>
<tr> <tr>

6
src/components/management/popup/PlanRequestPop.jsx
View File

@ -339,13 +339,15 @@ export default function PlanRequestPop(props) {
</td> </td>
<th>{getMessage('stuff.planReqPopup.search.planStatName')}</th> <th>{getMessage('stuff.planReqPopup.search.planStatName')}</th>
<td> <td>
<div className=""> <div className="select-wrap">
<Select <Select
className="react-select-custom"
classNamePrefix="custom"
ref={ref} ref={ref}
options={tempList} options={tempList}
onChange={onSelectionChange} onChange={onSelectionChange}
isSearchable={false} isSearchable={false}
placeholder="선택하세요." placeholder="Select"
isClearable={true} isClearable={true}
/> />
</div> </div>

672
src/styles/_modal.scss
View File

@ -5,12 +5,24 @@ $pop-normal-size: 12px;
$alert-color: #101010; $alert-color: #101010;
@keyframes mountpop { @keyframes mountpop {
from{opacity: 0; scale: 0.95;} from {
to{opacity: 1; scale: 1;} opacity: 0;
scale: 0.95;
}
to {
opacity: 1;
scale: 1;
}
} }
@keyframes unmountpop { @keyframes unmountpop {
from{opacity: 1; scale: 1;} from {
to{opacity: 0; scale: 0.95;} opacity: 1;
scale: 1;
}
to {
opacity: 0;
scale: 0.95;
}
} }
.normal-font { .normal-font {
@ -34,6 +46,9 @@ $alert-color: #101010;
border-radius: 4px; border-radius: 4px;
background-color: #272727; background-color: #272727;
z-index: 9999999; z-index: 9999999;
&.xsm {
width: 200px;
}
&.xxxm { &.xxxm {
width: 240px; width: 240px;
} }
@ -74,10 +89,10 @@ $alert-color: #101010;
width: 800px; width: 800px;
} }
&.mount { &.mount {
animation: mountpop .17s ease-in-out forwards; animation: mountpop 0.17s ease-in-out forwards;
} }
&.unmount { &.unmount {
animation: unmountpop .17s ease-in-out forwards; animation: unmountpop 0.17s ease-in-out forwards;
} }
&.alert { &.alert {
position: absolute; position: absolute;
@ -182,7 +197,7 @@ $alert-color: #101010;
} }
} }
.outer-line-wrap { .outer-line-wrap {
border-top: 1px solid #3C3C3C; border-top: 1px solid #3c3c3c;
margin-top: 10px; margin-top: 10px;
padding-top: 15px; padding-top: 15px;
margin-bottom: 15px; margin-bottom: 15px;
@ -204,7 +219,7 @@ $alert-color: #101010;
.adsorption-point { .adsorption-point {
display: flex; display: flex;
align-items: center; align-items: center;
background-color: #3A3A3A; background-color: #3a3a3a;
border-radius: 3px; border-radius: 3px;
padding-left: 11px; padding-left: 11px;
overflow: hidden; overflow: hidden;
@ -225,7 +240,7 @@ $alert-color: #101010;
&.act { &.act {
i { i {
color: $pop-color; color: $pop-color;
background-color: #1083E3; background-color: #1083e3;
} }
} }
} }
@ -245,7 +260,7 @@ $alert-color: #101010;
display: flex; display: flex;
align-items: center; align-items: center;
background-color: transparent; background-color: transparent;
border: 1px solid #3D3D3D; border: 1px solid #3d3d3d;
border-radius: 2px; border-radius: 2px;
padding: 15px 10px; padding: 15px 10px;
gap: 20px; gap: 20px;
@ -272,7 +287,9 @@ $alert-color: #101010;
} }
} }
.select-form { .select-form {
.sort-select{width: 100%;} .sort-select {
width: 100%;
}
} }
.grid-select { .grid-select {
flex: 1; flex: 1;
@ -317,7 +334,6 @@ $alert-color: #101010;
color: $pop-color; color: $pop-color;
font-weight: $pop-normal-weight; font-weight: $pop-normal-weight;
padding-bottom: 15px; padding-bottom: 15px;
} }
.grid-direction { .grid-direction {
display: flex; display: flex;
@ -334,11 +350,17 @@ $alert-color: #101010;
background-position: center; background-position: center;
background-size: 16px 15px; background-size: 16px 15px;
border-radius: 50%; border-radius: 50%;
transition: all .15s ease-in-out; transition: all 0.15s ease-in-out;
opacity: 0.6; opacity: 0.6;
&.down{transform: rotate(180deg);} &.down {
&.left{transform: rotate(-90deg);} transform: rotate(180deg);
&.right{transform: rotate(90deg);} }
&.left {
transform: rotate(-90deg);
}
&.right {
transform: rotate(90deg);
}
&:hover, &:hover,
&.act { &.act {
opacity: 1; opacity: 1;
@ -414,10 +436,11 @@ $alert-color: #101010;
} }
&.light { &.light {
padding: 0; padding: 0;
th,td{ th,
td {
color: $alert-color; color: $alert-color;
border-bottom: none; border-bottom: none;
border-top: 1px solid #EFEFEF; border-top: 1px solid #efefef;
} }
th { th {
padding: 14px 0; padding: 14px 0;
@ -450,7 +473,7 @@ $alert-color: #101010;
gap: 20px; gap: 20px;
} }
.select-wrap { .select-wrap {
div{ .sort-select {
width: 100%; width: 100%;
} }
} }
@ -541,7 +564,7 @@ $alert-color: #101010;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 50%; width: 50%;
background-color: #3D3D3D; background-color: #3d3d3d;
border-radius: 2px; border-radius: 2px;
} }
} }
@ -549,7 +572,7 @@ $alert-color: #101010;
// 외벽선 속성 설정 // 외벽선 속성 설정
.properties-guide { .properties-guide {
font-size: $pop-normal-size; font-size: $pop-normal-size;
color: #AAA; color: #aaa;
font-weight: $pop-normal-weight; font-weight: $pop-normal-weight;
margin-bottom: 14px; margin-bottom: 14px;
} }
@ -578,17 +601,17 @@ $alert-color: #101010;
color: #fff; color: #fff;
font-weight: 700; font-weight: 700;
border-radius: 2px; border-radius: 2px;
transition: all .15s ease-in-out; transition: all 0.15s ease-in-out;
&.green { &.green {
background-color: #305941; background-color: #305941;
border: 1px solid #45CD7D; border: 1px solid #45cd7d;
&:hover { &:hover {
background-color: #3a6b4e; background-color: #3a6b4e;
} }
} }
&.blue { &.blue {
background-color: #2E5360; background-color: #2e5360;
border: 1px solid #3FBAE6; border: 1px solid #3fbae6;
&:hover { &:hover {
background-color: #365f6e; background-color: #365f6e;
} }
@ -610,8 +633,8 @@ $alert-color: #101010;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
padding: 13px; padding: 13px;
background-color: #3D3D3D; background-color: #3d3d3d;
transition: background .15s ease-in-out; transition: background 0.15s ease-in-out;
img { img {
max-width: 100%; max-width: 100%;
} }
@ -622,13 +645,17 @@ $alert-color: #101010;
color: $pop-color; color: $pop-color;
margin-top: 10px; margin-top: 10px;
text-align: center; text-align: center;
transition: color .15s ease-in-out; transition: color 0.15s ease-in-out;
} }
.shape-menu-box { .shape-menu-box {
&.act, &.act,
&:hover { &:hover {
.shape-box{background-color: #008BFF;} .shape-box {
.shape-title{color: #008BFF;} background-color: #008bff;
}
.shape-title {
color: #008bff;
}
} }
} }
} }
@ -643,7 +670,7 @@ $alert-color: #101010;
} }
.discrimination-box { .discrimination-box {
padding: 16px 12px; padding: 16px 12px;
border: 1px solid #3D3D3D; border: 1px solid #3d3d3d;
border-radius: 2px; border-radius: 2px;
} }
@ -676,12 +703,12 @@ $alert-color: #101010;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 5px; padding: 5px;
background-color: #3D3D3D; background-color: #3d3d3d;
border: 1px solid #3D3D3D; border: 1px solid #3d3d3d;
border-radius: 2px; border-radius: 2px;
cursor: pointer; cursor: pointer;
&.act { &.act {
border: 1px solid #ED0004; border: 1px solid #ed0004;
} }
} }
&:last-child { &:last-child {
@ -780,7 +807,7 @@ $alert-color: #101010;
border: 1px solid #646464; border: 1px solid #646464;
border-radius: 2px; border-radius: 2px;
padding: 0 10px; padding: 0 10px;
transition: all .15s ease-in-out; transition: all 0.15s ease-in-out;
i { i {
height: 15px; height: 15px;
display: block; display: block;
@ -788,7 +815,7 @@ $alert-color: #101010;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
transition: all .15s ease-in-out; transition: all 0.15s ease-in-out;
&.allocation01 { &.allocation01 {
background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg); background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
width: 15px; width: 15px;
@ -830,9 +857,9 @@ $alert-color: #101010;
margin-bottom: 10px; margin-bottom: 10px;
.shape-menu-box { .shape-menu-box {
border-radius: 2px; border-radius: 2px;
background-color: #3D3D3D; background-color: #3d3d3d;
padding: 8px; padding: 8px;
transition: all .15s ease-in-out; transition: all 0.15s ease-in-out;
.shape-box { .shape-box {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -845,7 +872,7 @@ $alert-color: #101010;
} }
&.act, &.act,
&:hover { &:hover {
background-color: #008BFF; background-color: #008bff;
} }
} }
} }
@ -856,23 +883,32 @@ $alert-color: #101010;
justify-content: center; justify-content: center;
gap: 5px; gap: 5px;
padding: 5px; padding: 5px;
background-color: #3D3D3D; background-color: #3d3d3d;
margin-bottom: 24px; margin-bottom: 24px;
.library-btn { .library-btn {
width: 30px; width: 30px;
height: 30px; height: 30px;
border: 1px solid #6C6C6C; border: 1px solid #6c6c6c;
border-radius: 2px; border-radius: 2px;
background-color: transparent; background-color: transparent;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
transition: all .15s ease-in-out; transition: all 0.15s ease-in-out;
&.ico01{background-image: url(../../public/static/images/canvas/shape_labrary01.svg); background-size: 14px 14px;} &.ico01 {
&.ico02{background-image: url(../../public/static/images/canvas/shape_labrary02.svg); background-size: 13px 17px;} background-image: url(../../public/static/images/canvas/shape_labrary01.svg);
&.ico03{background-image: url(../../public/static/images/canvas/shape_labrary03.svg); background-size: 17px 13px;} background-size: 14px 14px;
}
&.ico02 {
background-image: url(../../public/static/images/canvas/shape_labrary02.svg);
background-size: 13px 17px;
}
&.ico03 {
background-image: url(../../public/static/images/canvas/shape_labrary03.svg);
background-size: 17px 13px;
}
&:hover { &:hover {
border-color: #1083E3; border-color: #1083e3;
background-color: #1083E3; background-color: #1083e3;
} }
} }
} }
@ -883,7 +919,7 @@ $alert-color: #101010;
.plane-box { .plane-box {
padding: 10px; padding: 10px;
border-radius: 2px; border-radius: 2px;
background-color: #3D3D3D; background-color: #3d3d3d;
.plane-box-tit { .plane-box-tit {
font-size: $pop-normal-size; font-size: $pop-normal-size;
font-weight: 600; font-weight: 600;
@ -955,11 +991,27 @@ $alert-color: #101010;
position: absolute; position: absolute;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
color: #B1B1B1; color: #b1b1b1;
&.top{top: 0; left: 50%; transform: translateX(-50%);} &.top {
&.right{top: 50%; right: 0; transform: translateY(-50%);} top: 0;
&.bottom{bottom: 0; left: 50%; transform: translateX(-50%);} left: 50%;
&.left{top: 50%; left: 0; transform: translateY(-50%);} transform: translateX(-50%);
}
&.right {
top: 50%;
right: 0;
transform: translateY(-50%);
}
&.bottom {
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
&.left {
top: 50%;
left: 0;
transform: translateY(-50%);
}
} }
.plane-btn { .plane-btn {
position: absolute; position: absolute;
@ -971,11 +1023,27 @@ $alert-color: #101010;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
border-radius: 50%; border-radius: 50%;
transition: all .15s ease-in-out; transition: all 0.15s ease-in-out;
&.up{top: 22px; left: 50%; transform: translateX(-50%);} &.up {
&.right{top: 50%; right: 32px; transform: translateY(-50%) rotate(90deg);} top: 22px;
&.down{bottom: 22px; left: 50%; transform: translateX(-50%) rotate(180deg);} left: 50%;
&.left{top: 50%; left: 32px; transform: translateY(-50%) rotate(270deg);} transform: translateX(-50%);
}
&.right {
top: 50%;
right: 32px;
transform: translateY(-50%) rotate(90deg);
}
&.down {
bottom: 22px;
left: 50%;
transform: translateX(-50%) rotate(180deg);
}
&.left {
top: 50%;
left: 32px;
transform: translateY(-50%) rotate(270deg);
}
&:hover, &:hover,
&.act { &.act {
background-color: #fff; background-color: #fff;
@ -1035,7 +1103,7 @@ $alert-color: #101010;
.warning { .warning {
font-size: $pop-normal-size; font-size: $pop-normal-size;
font-weight: $pop-normal-weight; font-weight: $pop-normal-weight;
color: #FFAFAF; color: #ffafaf;
} }
// 각 변 속성 변경 // 각 변 속성 변경
@ -1087,37 +1155,157 @@ $alert-color: #101010;
top: 12.5px; top: 12.5px;
left: 50%; left: 50%;
font-size: 11px; font-size: 11px;
color: #8B8B8B; color: #8b8b8b;
font-weight: 500; font-weight: 500;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-use-select: none; -ms-use-select: none;
user-select: none; user-select: none;
} }
&:nth-child(1) { transform: rotate(180deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(180deg);}} &:nth-child(1) {
&:nth-child(2) { transform: rotate(195deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(165deg);}} transform: rotate(180deg) translate(-50%, -50%);
&:nth-child(3) { transform: rotate(210deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(150deg);}} i {
&:nth-child(4) { transform: rotate(225deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(135deg);}} transform: translateX(-50%) rotate(180deg);
&:nth-child(5) { transform: rotate(240deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(120deg);}} }
&:nth-child(6) { transform: rotate(255deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(105deg);}} }
&:nth-child(7) { transform: rotate(270deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(90deg);}} &:nth-child(2) {
&:nth-child(8) { transform: rotate(285deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(75deg);}} transform: rotate(195deg) translate(-50%, -50%);
&:nth-child(9) { transform: rotate(300deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(60deg);}} i {
&:nth-child(10) { transform: rotate(315deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(45deg);}} transform: translateX(-50%) rotate(165deg);
&:nth-child(11) { transform: rotate(330deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(30deg);}} }
&:nth-child(12) { transform: rotate(345deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(15deg);}} }
&:nth-child(13) { transform: rotate(0deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(0deg);}} &:nth-child(3) {
&:nth-child(14) { transform: rotate(15deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-15deg);}} transform: rotate(210deg) translate(-50%, -50%);
&:nth-child(15) { transform: rotate(30deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-30deg);}} i {
&:nth-child(16) { transform: rotate(45deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-45deg);}} transform: translateX(-50%) rotate(150deg);
&:nth-child(17) { transform: rotate(60deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-60deg);}} }
&:nth-child(18) { transform: rotate(75deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-75deg);}} }
&:nth-child(19) { transform: rotate(90deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-90deg);}} &:nth-child(4) {
&:nth-child(20) { transform: rotate(105deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-105deg);}} transform: rotate(225deg) translate(-50%, -50%);
&:nth-child(21) { transform: rotate(120deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-120deg);}} i {
&:nth-child(22) { transform: rotate(135deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-135deg);}} transform: translateX(-50%) rotate(135deg);
&:nth-child(23) { transform: rotate(150deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-150deg);}} }
&:nth-child(24) { transform: rotate(165deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-165deg);}} }
&:nth-child(5) {
transform: rotate(240deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(120deg);
}
}
&:nth-child(6) {
transform: rotate(255deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(105deg);
}
}
&:nth-child(7) {
transform: rotate(270deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(90deg);
}
}
&:nth-child(8) {
transform: rotate(285deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(75deg);
}
}
&:nth-child(9) {
transform: rotate(300deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(60deg);
}
}
&:nth-child(10) {
transform: rotate(315deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(45deg);
}
}
&:nth-child(11) {
transform: rotate(330deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(30deg);
}
}
&:nth-child(12) {
transform: rotate(345deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(15deg);
}
}
&:nth-child(13) {
transform: rotate(0deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(0deg);
}
}
&:nth-child(14) {
transform: rotate(15deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-15deg);
}
}
&:nth-child(15) {
transform: rotate(30deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-30deg);
}
}
&:nth-child(16) {
transform: rotate(45deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-45deg);
}
}
&:nth-child(17) {
transform: rotate(60deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-60deg);
}
}
&:nth-child(18) {
transform: rotate(75deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-75deg);
}
}
&:nth-child(19) {
transform: rotate(90deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-90deg);
}
}
&:nth-child(20) {
transform: rotate(105deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-105deg);
}
}
&:nth-child(21) {
transform: rotate(120deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-120deg);
}
}
&:nth-child(22) {
transform: rotate(135deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-135deg);
}
}
&:nth-child(23) {
transform: rotate(150deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-150deg);
}
}
&:nth-child(24) {
transform: rotate(165deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-165deg);
}
}
&.act { &.act {
&::after { &::after {
content: ''; content: '';
@ -1152,7 +1340,6 @@ $alert-color: #101010;
} }
} }
// 지붕모듈선택 // 지붕모듈선택
.roof-module-tab { .roof-module-tab {
display: flex; display: flex;
@ -1167,13 +1354,13 @@ $alert-color: #101010;
border-radius: 2px; border-radius: 2px;
background-color: transparent; background-color: transparent;
font-size: 12px; font-size: 12px;
color: #AAA; color: #aaa;
text-align: center; text-align: center;
cursor: default; cursor: default;
transition: all .15s ease-in-out; transition: all 0.15s ease-in-out;
&.act { &.act {
background-color: #1083E3; background-color: #1083e3;
border: 1px solid #1083E3; border: 1px solid #1083e3;
color: #fff; color: #fff;
font-weight: 500; font-weight: 500;
} }
@ -1186,7 +1373,7 @@ $alert-color: #101010;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
background-image: url(../../public/static/images/canvas/module_tab_arr.svg); background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
transition: all .15s ease-in-out; transition: all 0.15s ease-in-out;
&.act { &.act {
background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg); background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
} }
@ -1212,14 +1399,16 @@ $alert-color: #101010;
transform: translateX(-50%); transform: translateX(-50%);
width: 1px; width: 1px;
height: 6px; height: 6px;
background-color: #8B8B8B; background-color: #8b8b8b;
} }
} }
i { i {
top: 32px; top: 32px;
} }
&.act { &.act {
i{color: #8B8B8B;} i {
color: #8b8b8b;
}
} }
} }
} }
@ -1251,7 +1440,7 @@ $alert-color: #101010;
height: 30px; height: 30px;
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
transition: all .15s ease-in-out; transition: all 0.15s ease-in-out;
&:first-child { &:first-child {
border-left: 1px solid #505050; border-left: 1px solid #505050;
} }
@ -1265,7 +1454,7 @@ $alert-color: #101010;
.module-table-box { .module-table-box {
flex: 1; flex: 1;
background-color: #3D3D3D; background-color: #3d3d3d;
border-radius: 2px; border-radius: 2px;
.module-table-inner { .module-table-inner {
padding: 10px; padding: 10px;
@ -1278,7 +1467,7 @@ $alert-color: #101010;
padding: 10px 0; padding: 10px 0;
font-size: 12px; font-size: 12px;
color: #fff; color: #fff;
border-bottom: 1px solid #4D4D4D; border-bottom: 1px solid #4d4d4d;
} }
.eaves-keraba-table { .eaves-keraba-table {
width: 100%; width: 100%;
@ -1301,7 +1490,7 @@ $alert-color: #101010;
.warning-guide { .warning-guide {
padding: 20px; padding: 20px;
.warning { .warning {
color: #FFCACA; color: #ffcaca;
max-height: 55px; max-height: 55px;
overflow-y: auto; overflow-y: auto;
padding-right: 30px; padding-right: 30px;
@ -1310,7 +1499,7 @@ $alert-color: #101010;
background-color: transparent; background-color: transparent;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: #D9D9D9; background-color: #d9d9d9;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
@ -1321,7 +1510,7 @@ $alert-color: #101010;
.module-self-table { .module-self-table {
display: table; display: table;
border-top: 1px solid #4D4D4D; border-top: 1px solid #4d4d4d;
border-collapse: collapse; border-collapse: collapse;
width: 100%; width: 100%;
.self-table-item { .self-table-item {
@ -1330,7 +1519,7 @@ $alert-color: #101010;
.self-item-th { .self-item-th {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
border-bottom: 1px solid #4D4D4D; border-bottom: 1px solid #4d4d4d;
} }
.self-item-th { .self-item-th {
width: 60px; width: 60px;
@ -1358,7 +1547,7 @@ $alert-color: #101010;
.hexagonal-wrap { .hexagonal-wrap {
.hexagonal-item { .hexagonal-item {
padding: 15px 0; padding: 15px 0;
border-bottom: 1px solid #4D4D4D; border-bottom: 1px solid #4d4d4d;
&:first-child { &:first-child {
padding-top: 0; padding-top: 0;
} }
@ -1396,7 +1585,7 @@ $alert-color: #101010;
background-color: transparent; background-color: transparent;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: #D9D9D9; background-color: #d9d9d9;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
@ -1414,7 +1603,7 @@ $alert-color: #101010;
gap: 5px; gap: 5px;
min-height: 60px; min-height: 60px;
padding: 12px; padding: 12px;
border: 1px solid rgba(255, 255, 255, 0.20); border: 1px solid rgba(255, 255, 255, 0.2);
span { span {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -1447,7 +1636,7 @@ $alert-color: #101010;
background-color: transparent; background-color: transparent;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: #D9D9D9; background-color: #d9d9d9;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background-color: transparent; background-color: transparent;
@ -1505,13 +1694,284 @@ $alert-color: #101010;
width: 16px; width: 16px;
height: 16px; height: 16px;
&.pink { &.pink {
border: 2px solid #EA10AC; border: 2px solid #ce1c9c;
background-color: #16417D; background-color: #16417d;
} }
&.white { &.white {
border: 2px solid #FFF; border: 2px solid #fff;
background-color: #001027; background-color: #001027;
} }
} }
} }
} }
// color setting
.color-setting-wrap {
padding-bottom: 15px;
border-bottom: 1px solid #424242;
.color-tit {
font-size: 13px;
font-weight: 500;
color: #ffffff;
margin-bottom: 10px;
}
.color-picker {
.react-colorful {
width: 100%;
height: auto;
gap: 20px;
.react-colorful__pointer {
width: 15px;
height: 15px;
border: 4px solid #fff;
}
.react-colorful__saturation {
border-radius: 2px;
height: 200px;
border-bottom: 5px solid #000;
}
.react-colorful__last-control {
border-radius: 2px;
height: 10px;
}
}
.hex-color-box {
display: flex;
align-items: center;
margin-top: 15px;
.color-box-tit {
font-size: 12px;
color: #fff;
font-weight: 500;
margin-right: 10px;
}
.color-hex-input {
width: 150px;
margin-right: 5px;
input {
width: 100%;
}
}
.color-box {
display: block;
width: 30px;
height: 30px;
border-radius: 4px;
}
}
.default-color-wrap {
margin-top: 25px;
.default-tit {
font-size: 12px;
font-weight: 500;
color: #fff;
margin-bottom: 10px;
}
.color-button-wrap {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 21px;
.default-color {
display: block;
width: 100%;
height: 30px;
border-radius: 4px;
}
}
}
}
}
// 글꼴 설정 팝업
.font-option-warp {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px 5px;
margin-bottom: 15px;
.font-option-item {
.option-item-tit {
font-size: 12px;
font-weight: 500;
color: #fff;
margin-bottom: 10px;
}
}
}
.font-ex-wrap {
margin-bottom: 15px;
.font-ex-tit {
font-size: 12px;
font-weight: 500;
color: #fff;
margin-bottom: 10px;
}
.font-ex-box {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 80px;
background-color: #fff;
}
}
// 치수선 설정
.font-btn-wrap {
margin-bottom: 15px;
button {
width: 100%;
height: 30px;
line-height: 28px;
}
}
.line-color-wrap {
margin-bottom: 15px;
.color-btn {
display: block;
width: 100%;
height: 30px;
border-radius: 2px;
}
}
.form-box {
width: 100%;
background-color: #fff;
padding: 10px 0 20px;
.line-form {
position: relative;
width: 102px;
height: 40px;
margin: 0 auto;
border-left: 1px dashed #101010;
border-right: 1px dashed #101010;
.line-font-box {
position: absolute;
bottom: -3px;
left: 0;
width: 100%;
text-align: center;
.font {
display: block;
padding-bottom: 6px;
color: #101010;
}
.line {
position: relative;
display: block;
width: 100%;
height: 1px;
border-radius: 30px;
&::before {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%) rotate(45deg);
left: 1px;
width: 9px;
height: 9px;
border: 1px solid;
border-color: inherit;
border-top: none;
border-right: none;
}
&::after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%) rotate(45deg);
right: 1px;
width: 9px;
height: 9px;
border: 1px solid;
border-color: inherit;
border-bottom: none;
border-left: none;
}
}
}
}
}
// 사이즈 변경
.size-inner-warp {
position: relative;
}
.size-check-wrap {
position: relative;
display: block;
width: 132px;
height: 132px;
margin: 0 auto;
.size-btn {
position: absolute;
width: 16px;
height: 16px;
border: 1px solid #fff;
border-radius: 50%;
&.act {
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
background-color: #fff;
border-radius: 50%;
}
}
&:nth-child(1) {
top: 0;
left: 0;
}
&:nth-child(2) {
top: 0;
right: 0;
}
&:nth-child(3) {
bottom: 0;
left: 0;
}
&:nth-child(4) {
bottom: 0;
right: 0;
}
}
.size-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: #fff;
}
}
.size-option-top {
margin-bottom: 15px;
}
.size-option-side {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.size-option-wrap {
width: 88px;
margin: 0 auto;
.size-option {
display: flex;
align-items: center;
input {
width: 100%;
flex: 1;
}
span {
flex: none;
}
}
}

464
src/styles/_reset.scss
View File

@ -3,29 +3,100 @@
-moz-text-size-adjust: none; -moz-text-size-adjust: none;
-ms-text-size-adjust: none; -ms-text-size-adjust: none;
text-size-adjust: none; text-size-adjust: none;
box-sizing: content-box box-sizing: content-box;
} }
*, ::after, ::before { *,
::after,
::before {
box-sizing: border-box; box-sizing: border-box;
} }
html, body{ html,
body {
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 16px; font-size: 16px;
} }
html, body, div, span, applet, object, iframe, html,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, body,
a, abbr, acronym, address, big, cite, code, div,
del, dfn, em, img, ins, kbd, q, s, samp, span,
small, strike, strong, sub, sup, tt, var, applet,
b, u, i, center, object,
dl, dt, dd, ol, ul, li, iframe,
fieldset, form, label, legend, h1,
table, caption, tbody, tfoot, thead, tr, th, td, h2,
article, aside, canvas, details, embed, h3,
figure, figcaption, footer, header, hgroup, h4,
menu, nav, output, ruby, section, summary, h5,
time, mark, audio, video { h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
@ -37,23 +108,38 @@ time, mark, audio, video {
font-smooth: never; font-smooth: never;
} }
/* HTML5 display-role reset for older browsers */ /* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, article,
footer, header, hgroup, menu, nav, section { aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block; display: block;
} }
body { body {
line-height: 1.4; line-height: 1.4;
} }
body:first-of-type caption { display:none;} body:first-of-type caption {
display: none;
}
ol, ul { ol,
ul {
list-style: none; list-style: none;
} }
blockquote, q { blockquote,
q {
quotes: none; quotes: none;
} }
blockquote:before, blockquote:after, blockquote:before,
q:before, q:after { blockquote:after,
q:before,
q:after {
content: ''; content: '';
content: none; content: none;
} }
@ -63,7 +149,9 @@ table {
border-spacing: 0; border-spacing: 0;
border: 0 none; border: 0 none;
} }
caption, th, td { caption,
th,
td {
text-align: left; text-align: left;
font-weight: normal; font-weight: normal;
border: 0; border: 0;
@ -73,26 +161,38 @@ a {
cursor: pointer; cursor: pointer;
color: #000; color: #000;
} }
a, a:hover, a:active { a,
a:hover,
a:active {
text-decoration: none; text-decoration: none;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
/*form_style*/ /*form_style*/
input, select, textarea, button, a, label { input,
select,
textarea,
button,
a,
label {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
button,input[type=text], input[type=button] { button,
input[type='text'],
input[type='button'] {
-webkit-appearance: none; -webkit-appearance: none;
-webkit-border-radius: 0; -webkit-border-radius: 0;
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
border-radius: 0 border-radius: 0;
} }
input[type=checkbox], input[type=radio] { input[type='checkbox'],
input[type='radio'] {
box-sizing: border-box; box-sizing: border-box;
padding: 0; padding: 0;
} }
input, select, button { input,
select,
button {
border: 0 none; border: 0 none;
outline: none; outline: none;
margin: 0; margin: 0;
@ -131,24 +231,53 @@ button{
} }
// margin // margin
.mt5{margin-top: 5px !important;} .mt5 {
.mt10{margin-top: 10px !important;} margin-top: 5px !important;
.mt15{margin-top: 15px !important;} }
.mb5{margin-bottom: 5px !important;} .mt10 {
.mb10{margin-bottom: 10px !important;} margin-top: 10px !important;
.mb15{margin-bottom: 15px !important;} }
.mr5{margin-right: 5px !important;} .mt15 {
.mr10{margin-right: 10px !important;} margin-top: 15px !important;
.mr15{margin-right: 15px !important;} }
.ml5{margin-left: 5px !important;} .mb5 {
.ml10{margin-left: 10px !important;} margin-bottom: 5px !important;
.ml15{margin-left: 15px !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 // align
.al-l{text-align: left !important;} .al-l {
.al-r{text-align: right !important;} text-align: left !important;
.al-c{text-align: center !important;} }
.al-r {
text-align: right !important;
}
.al-c {
text-align: center !important;
}
// button // button
.btn-frame { .btn-frame {
@ -163,7 +292,7 @@ button{
border: 1px solid #000; border: 1px solid #000;
text-align: center; text-align: center;
font-family: 'Pretendard', sans-serif; font-family: 'Pretendard', sans-serif;
transition: all .17s ease-in-out; transition: all 0.17s ease-in-out;
cursor: pointer; cursor: pointer;
&.block { &.block {
width: 100%; width: 100%;
@ -176,15 +305,15 @@ button{
} }
&.deepgray { &.deepgray {
background-color: #2C2C2C; background-color: #2c2c2c;
border: 1px solid #484848; border: 1px solid #484848;
} }
&.gray { &.gray {
background-color: #3C3C3C; background-color: #3c3c3c;
border: 1px solid #545454; border: 1px solid #545454;
} }
&.dark { &.dark {
background-color: #1C1C1C; background-color: #1c1c1c;
border: 1px solid #484848; border: 1px solid #484848;
} }
&.modal { &.modal {
@ -193,8 +322,8 @@ button{
border: 1px solid #484848; border: 1px solid #484848;
color: #aaa; color: #aaa;
&:hover { &:hover {
background-color: #1083E3; background-color: #1083e3;
border: 1px solid #1083E3; border: 1px solid #1083e3;
color: #fff; color: #fff;
font-weight: 500; font-weight: 500;
} }
@ -204,13 +333,13 @@ button{
padding: 0 10px; padding: 0 10px;
line-height: 28px; line-height: 28px;
font-family: 'Noto Sans JP', sans-serif; font-family: 'Noto Sans JP', sans-serif;
background-color: #2D2D2D; background-color: #2d2d2d;
border: 1px solid #393939; border: 1px solid #393939;
color: #aaa; color: #aaa;
&.act, &.act,
&:hover { &:hover {
background-color: #414E6C; background-color: #414e6c;
border: 1px solid #414E6C; border: 1px solid #414e6c;
color: #fff; color: #fff;
font-weight: 500; font-weight: 500;
} }
@ -224,11 +353,11 @@ button{
border: 1px solid #484848; border: 1px solid #484848;
color: #fff; color: #fff;
&.blue { &.blue {
background-color: #414E6C; background-color: #414e6c;
border: 1px solid #414E6C; border: 1px solid #414e6c;
&:hover { &:hover {
background-color: #414E6C; background-color: #414e6c;
border: 1px solid #414E6C; border: 1px solid #414e6c;
} }
} }
&.white { &.white {
@ -255,7 +384,7 @@ button{
font-family: 'Noto Sans JP', sans-serif; font-family: 'Noto Sans JP', sans-serif;
background-color: transparent; background-color: transparent;
border: 1px solid #676767; border: 1px solid #676767;
color: #AAAAAA; color: #aaaaaa;
&:hover { &:hover {
background-color: #272727; background-color: #272727;
border-color: #676767; border-color: #676767;
@ -264,8 +393,8 @@ button{
} }
&:hover, &:hover,
&.act { &.act {
background-color: #1083E3; background-color: #1083e3;
border: 1px solid #1083E3; border: 1px solid #1083e3;
color: #fff; color: #fff;
font-weight: 500; font-weight: 500;
} }
@ -295,7 +424,7 @@ button{
color: #fff; color: #fff;
font-size: 13px; font-size: 13px;
font-weight: 400; font-weight: 400;
transition: all .15s ease-in-out; transition: all 0.15s ease-in-out;
&.navy { &.navy {
background-color: #304961; background-color: #304961;
&:hover { &:hover {
@ -303,21 +432,21 @@ button{
} }
} }
&.grey { &.grey {
background-color: #94A0AD; background-color: #94a0ad;
&:hover { &:hover {
background-color: #607F9A; background-color: #607f9a;
} }
} }
&.green { &.green {
background-color: #A6BBA8; background-color: #a6bba8;
&:hover { &:hover {
background-color: #98af9b; background-color: #98af9b;
} }
} }
&.white { &.white {
border: 1px solid #94A0AD; border: 1px solid #94a0ad;
background-color: #fff; background-color: #fff;
color: #94A0AD; color: #94a0ad;
&:hover { &:hover {
background-color: #fff; background-color: #fff;
} }
@ -333,7 +462,7 @@ button{
line-height: 30px; line-height: 30px;
padding: 0 25px 0 10px; padding: 0 25px 0 10px;
background-color: #373737; background-color: #373737;
border: 1px solid #3F3F3F; border: 1px solid #3f3f3f;
border-radius: 2px; border-radius: 2px;
border-top-left-radius: 2px; border-top-left-radius: 2px;
color: #fff; color: #fff;
@ -353,7 +482,7 @@ button{
max-height: 100px; max-height: 100px;
overflow-y: auto; overflow-y: auto;
background-color: #373737; background-color: #373737;
border: 1px solid #3F3F3F; border: 1px solid #3f3f3f;
border-radius: 2px; border-radius: 2px;
transition: all 0.17s ease-in-out; transition: all 0.17s ease-in-out;
visibility: hidden; visibility: hidden;
@ -363,20 +492,19 @@ button{
align-items: center; align-items: center;
padding: 8px 20px; padding: 8px 20px;
line-height: 1.4; line-height: 1.4;
transition: all .17s ease-in-out; transition: all 0.17s ease-in-out;
button { button {
font-size: 12px; font-size: 12px;
color: #fff; color: #fff;
line-height: 1.4; line-height: 1.4;
} }
&:hover { &:hover {
background-color: #2C2C2C; background-color: #2c2c2c;
} }
} }
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 2px; width: 2px;
background-color: transparent; background-color: transparent;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: #5a5a5a; background-color: #5a5a5a;
@ -396,7 +524,7 @@ button{
height: 6px; height: 6px;
background: url(/static/images/common/select-arr.svg) no-repeat center; background: url(/static/images/common/select-arr.svg) no-repeat center;
background-size: cover; background-size: cover;
transition: all .17s ease-in-out; transition: all 0.17s ease-in-out;
} }
&.active { &.active {
.select-item-wrap { .select-item-wrap {
@ -414,17 +542,17 @@ button{
display: block; display: block;
width: 100%; width: 100%;
height: 30px; height: 30px;
background: #FFF url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat; background: #fff url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat;
background-size: 10px 6px; background-size: 10px 6px;
border: 1px solid #eee; border: 1px solid #eee;
padding: 0 30px 0 10px; padding: 0 30px 0 10px;
font-size: 13px; font-size: 13px;
color: #45576F; color: #45576f;
font-family: 'Noto Sans JP', sans-serif; font-family: 'Noto Sans JP', sans-serif;
cursor: pointer; cursor: pointer;
&:disabled { &:disabled {
opacity: 1; opacity: 1;
background-color: #FAFAFA; background-color: #fafafa;
color: #999; color: #999;
cursor: default; cursor: default;
} }
@ -440,7 +568,6 @@ button{
} }
} }
// input // input
.form-input { .form-input {
label { label {
@ -451,9 +578,9 @@ button{
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
input[type=password], input[type='password'],
input[type=number], input[type='number'],
input[type=text]{ input[type='text'] {
&.input-origin { &.input-origin {
display: inline-block; display: inline-block;
height: 30px; height: 30px;
@ -476,7 +603,7 @@ input[type=text]{
width: 100%; width: 100%;
} }
&:read-only { &:read-only {
color: #AAA; color: #aaa;
} }
&.plane { &.plane {
font-family: 'Noto Sans JP', sans-serif; font-family: 'Noto Sans JP', sans-serif;
@ -494,27 +621,25 @@ input[type=text]{
background-color: #fff; background-color: #fff;
font-family: 'Noto Sans JP', sans-serif; font-family: 'Noto Sans JP', sans-serif;
font-size: 13px; font-size: 13px;
color: #45576F; color: #45576f;
font-weight: normal; font-weight: normal;
transition: border-color .17s ease-in-out; transition: border-color 0.17s ease-in-out;
text-align: left; text-align: left;
&:read-only { &:read-only {
background-color: #FAFAFA; background-color: #fafafa;
color: #999999; color: #999999;
} }
} }
} }
// check-btn // check-btn
.check-btn { .check-btn {
display: flex; display: flex;
align-items: center; align-items: center;
height: 30px; height: 30px;
background-color: #3A3A3A; background-color: #3a3a3a;
border-radius: 3px; border-radius: 3px;
transition: all .17s ease-in-out; transition: all 0.17s ease-in-out;
.check-area { .check-area {
flex: none; flex: none;
width: 30px; width: 30px;
@ -551,10 +676,10 @@ input[type=text]{
display: block; display: block;
height: 30px; height: 30px;
border-radius: 3px; border-radius: 3px;
background-color: #3A3A3A; background-color: #3a3a3a;
padding: 0 11px; padding: 0 11px;
text-align: left; text-align: left;
transition: all .17s ease-in-out; transition: all 0.17s ease-in-out;
span { span {
position: relative; position: relative;
font-size: 12px; font-size: 12px;
@ -588,15 +713,15 @@ input[type=text]{
background-color: #272727; background-color: #272727;
border: 1px solid #484848; border: 1px solid #484848;
span { span {
color: #Fff; color: #fff;
&:after { &:after {
background: url(../../public/static/images/canvas/arr_btn_ico_white.svg) no-repeat center; background: url(../../public/static/images/canvas/arr_btn_ico_white.svg) no-repeat center;
} }
} }
&:hover, &:hover,
&.act { &.act {
background-color: #1083E3; background-color: #1083e3;
border: 1px solid #1083E3; border: 1px solid #1083e3;
} }
} }
} }
@ -606,8 +731,8 @@ input[type=text]{
.d-check-box { .d-check-box {
line-height: 1.1; line-height: 1.1;
cursor: pointer; cursor: pointer;
input[type=checkbox], input[type='checkbox'],
input[type=radio]{ input[type='radio'] {
position: static; position: static;
margin-left: 0; margin-left: 0;
cursor: pointer; cursor: pointer;
@ -630,7 +755,7 @@ input[type=text]{
} }
&.light { &.light {
label { label {
color: #45576F; color: #45576f;
} }
} }
&.no-text { &.no-text {
@ -644,7 +769,7 @@ input[type=text]{
label { label {
&::before { &::before {
cursor: pointer; cursor: pointer;
content: ""; content: '';
display: inline-block; display: inline-block;
position: absolute; position: absolute;
width: 17px; width: 17px;
@ -658,11 +783,13 @@ input[type=text]{
text-align: center; text-align: center;
font-size: 13px; font-size: 13px;
line-height: 1.4; line-height: 1.4;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out; transition:
border 0.15s ease-in-out,
color 0.15s ease-in-out;
} }
&::after { &::after {
cursor: pointer; cursor: pointer;
content: ""; content: '';
display: inline-block; display: inline-block;
position: absolute; position: absolute;
width: 9px; width: 9px;
@ -678,20 +805,22 @@ input[type=text]{
line-height: 1.4; line-height: 1.4;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out; transition:
opacity 0.15s ease-in-out,
color 0.15s ease-in-out;
} }
} }
&.light { &.light {
label { label {
&:before { &:before {
border-color: #D6D6D7; border-color: #d6d6d7;
} }
&:after { &:after {
background-color: #697C8F; background-color: #697c8f;
} }
} }
} }
input[type=radio]:checked + label::after{ input[type='radio']:checked + label::after {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
} }
@ -715,10 +844,12 @@ input[type=text]{
// check-box // check-box
.d-check-box { .d-check-box {
label { label {
&.red{color: #FFCACA;} &.red {
color: #ffcaca;
}
&::before { &::before {
cursor: pointer; cursor: pointer;
content: ""; content: '';
display: inline-block; display: inline-block;
position: absolute; position: absolute;
width: 17px; width: 17px;
@ -726,32 +857,36 @@ input[type=text]{
top: 2px; top: 2px;
left: 0; left: 0;
margin-left: -12px; margin-left: -12px;
border: 1px solid #D6D6D7; border: 1px solid #d6d6d7;
background-color: #fff; background-color: #fff;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out; transition:
border 0.15s ease-in-out,
color 0.15s ease-in-out;
} }
&:after { &:after {
cursor: pointer; cursor: pointer;
content: ""; content: '';
display: inline-block; display: inline-block;
position: absolute; position: absolute;
width: 16px; width: 16px;
height: 16px; height: 16px;
top: 0; top: 0;
left: 0; left: 0;
margin-left: -.8rem; margin-left: -0.8rem;
transition: border 0.05s ease-in-out, color 0.05s ease-in-out; transition:
border 0.05s ease-in-out,
color 0.05s ease-in-out;
} }
} }
input[type=checkbox]:checked + label::after{ input[type='checkbox']:checked + label::after {
content: ""; content: '';
display: inline-block; display: inline-block;
position: absolute; position: absolute;
top: 1px; top: 1px;
left: -1px; left: -1px;
width: 5px; width: 5px;
height: 8px; height: 8px;
border: 2px solid #697C8F; border: 2px solid #697c8f;
border-left: none; border-left: none;
border-top: none; border-top: none;
transform: translate(7.75px, 4.5px) rotate(45deg); transform: translate(7.75px, 4.5px) rotate(45deg);
@ -763,7 +898,7 @@ input[type=text]{
background-color: transparent; background-color: transparent;
} }
} }
input[type=checkbox]:checked + label::after{ input[type='checkbox']:checked + label::after {
border-color: #fff; border-color: #fff;
} }
&.no-text { &.no-text {
@ -773,23 +908,25 @@ input[type=text]{
} }
} }
&.sel { &.sel {
input[type=checkbox]:checked + label{ input[type='checkbox']:checked + label {
color: #D7C863; color: #d7c863;
} }
input[type=checkbox]:checked + label::before, input[type='checkbox']:checked + label::before,
input[type=checkbox]:checked + label::after{ input[type='checkbox']:checked + label::after {
border-color: #D7C863; border-color: #d7c863;
} }
} }
} }
// date-picker // date-picker
.date-picker { .date-picker {
svg{display: none;} svg {
display: none;
}
.react-datepicker-wrapper { .react-datepicker-wrapper {
width: 100%; width: 100%;
} }
input[type=text]{ input[type='text'] {
display: block; display: block;
width: 100%; width: 100%;
height: 30px; height: 30px;
@ -797,7 +934,7 @@ input[type=text]{
border-radius: 2px; border-radius: 2px;
border: 1px solid #eee; border: 1px solid #eee;
font-size: 13px; font-size: 13px;
color: #45576F; color: #45576f;
font-weight: normal; font-weight: normal;
font-family: 'Noto Sans JP', sans-serif; font-family: 'Noto Sans JP', sans-serif;
background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat; background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat;
@ -805,3 +942,84 @@ input[type=text]{
cursor: pointer; cursor: pointer;
} }
} }
// react select
.react-select-custom {
width: 100%;
.custom__control {
height: 30px;
min-height: unset;
border-radius: 2px;
border-color: #eee;
background-color: #fff;
&:hover {
border-color: #eee;
}
}
.custom__control--is-focused {
border-color: #eee;
box-shadow: unset;
&:hover {
border-color: #eee;
}
}
.custom__value-container {
height: 100%;
padding: 0 10px;
}
.custom__placeholder,
.custom__single-value {
margin: 0;
}
.custom__single-value {
font-size: 13px;
color: #45576f;
font-weight: 400;
}
.custom__placeholder {
font-size: 13px;
color: #bbbbbb;
font-weight: 400;
}
.custom__clear-indicator,
.custom__indicator-separator {
display: none;
}
.custom__indicator {
padding: 0;
svg {
display: none;
}
}
.custom__dropdown-indicator {
width: 30px;
height: 100%;
background: url(../../public/static/images/common/select_light_arr.svg) no-repeat center;
}
.custom__menu {
margin: 1px 0;
border-radius: 2px;
overflow: hidden;
}
.custom__menu-list {
padding: 0;
}
.custom__option {
font-size: 13px;
padding: 7px 10px;
color: #45576f;
}
.custom__option--is-selected {
color: #fff;
}
// disable
&.custom--is-disabled {
.custom__control {
background-color: #fafafa;
}
.custom__single-value {
color: #999999;
}
}
}