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

Merge branch 'dev' of ssh://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into qcast-pub

Browse Source
This commit is contained in:
김민식 2025-03-13 17:58:55 +09:00
commit 9104771a46
10 changed files with 2571 additions and 2107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/common/spinner/PopSpinner.jsx Normal file
View File

@ -0,0 +1,7 @@
export default function PopSpinner() {
return (
<div className="pop-spinner">
<span className="loader"></span>
</div>
)
}

85
src/components/estimate/Estimate.jsx
View File

@ -58,6 +58,9 @@ export default function Estimate({}) {
const [storePriceList, setStorePriceList] = useState([]) //가격표시 option
const [cableItemList, setCableItemList] = useState([]) //케이블 리스트
const [cableItem, setCableItem] = useState('') //케이블 선택값
const [startDate, setStartDate] = useState(new Date())
const singleDatePickerProps = {
startDate,
@ -96,6 +99,7 @@ export default function Estimate({}) {
const initEstimate = (currPid = currentPid) => {
console.log('🚀 ~ initEstimate ~ currPid:', currPid)
setCableItem('')
closeAll()
setObjectNo(objectRecoil.floorPlanObjectNo)
@ -107,6 +111,16 @@ export default function Estimate({}) {
setHonorificCodeList(code1)
}
// 케이블제품 공통코드
const code2 = findCommonCode(117900)
if (code2 != null) {
code2.map((item) => {
item.value = item.clRefChr1
item.label = item.clRefChr2
})
setCableItemList(code2)
}
//아이템 자동완성 목록 가져오기
const param = {
saleStoreId: session.storeId,
@ -551,7 +565,7 @@ export default function Estimate({}) {
}
const getAbledItems = (items) => {
return items.filter((items) => items.paDispOrder === null)
return items.filter((items) => items.dispCableFlg !== '1' && items.paDispOrder === null)
}
const onChangeSelectAll = (e) => {
@ -684,6 +698,22 @@ export default function Estimate({}) {
setItemChangeYn(true)
}
/* 케이블 select 변경시 */
const onChangeDisplayCableItem = (value, itemList) => {
//todo: 추후 YJSS가 다시 나타날 경우 아래 swalFire 제거 필요
if (estimateContextState.estimateType === 'YJSS') {
return swalFire({ text: getMessage('estimate.detail.save.requiredEstimateType'), type: 'alert', icon: 'warning' })
}
itemList.map((item, index) => {
if (item.dispCableFlg === '1') {
if (value !== '') {
onChangeDisplayItem(value, item.dispOrder, index)
}
}
})
setCableItem(value)
}
// 아이템 자동완성 검색시 아이템 추가/변경시
const onChangeDisplayItem = (itemId, dispOrder, index) => {
//todo: 추후 YJSS가 다시 나타날 경우 아래 swalFire 제거 필요
@ -782,6 +812,7 @@ export default function Estimate({}) {
bomItem.objectNo = objectNo
bomItem.planNo = planNo
bomItem.addFlg = true //봄 추가시도 addFlg
bomItem.openFlg = '0' //봄 컴포넌트는 무조건 0으로
})
updateList = updateList.filter((item) => item.delFlg === '0')
@ -1678,6 +1709,25 @@ export default function Estimate({}) {
{getMessage('estimate.detail.showPrice.pricingBtn')}
</button>
</div>
<div className="product-price-wrap ml10">
<div className="select-wrap">
<select
className="select-light"
onChange={(e) => {
onChangeDisplayCableItem(e.target.value, estimateContextState.itemList)
}}
value={cableItem}
>
{/* <option value={''}>selected</option> */}
{cableItemList.length > 0 &&
cableItemList.map((row) => (
<option key={row.clRefChr1} value={row.clRefChr1}>
{row.clRefChr2}
</option>
))}
</select>
</div>
</div>
<div className="product-edit-wrap">
<ul className="product-edit-explane">
<li className="explane-item item01">
@ -1757,7 +1807,7 @@ export default function Estimate({}) {
<input
type="checkbox"
id={item?.dispOrder}
disabled={!!item?.paDispOrder}
disabled={!!item?.paDispOrder || item.dispCableFlg === '1'}
onChange={() => onChangeSelect(item.dispOrder)}
checked={!!selection.has(item.dispOrder)}
/>
@ -1768,6 +1818,7 @@ export default function Estimate({}) {
<td>
<div className="form-flex-wrap">
<div className="select-wrap mr5">
{item.dispCableFlg !== '1' ? (
<Select
name="long-value-select1"
instanceId="long-value-select1"
@ -1780,15 +1831,41 @@ export default function Estimate({}) {
onChangeDisplayItem(e.itemId, item.dispOrder, index)
}
}}
// defaultInputValue={item.itemName}
menuPlacement={'auto'}
getOptionLabel={(x) => x.itemName}
getOptionValue={(x) => x.itemId}
getOptionValue={(x) => x.itemNo}
isClearable={false}
isDisabled={!!item?.paDispOrder}
value={displayItemList.filter(function (option) {
if (item.itemNo === '') {
return false
} else {
return option.itemId === item.itemId
}
})}
/>
) : (
<Select
name="long-value-select11"
instanceId="long-value-select11"
className="react-select-custom"
classNamePrefix="custom"
placeholder="Select"
options={cableItemList}
onChange={(e) => {
if (isObjectNotEmpty(e)) {
onChangeDisplayItem(e.clRefChr1, item.dispOrder, index)
}
}}
menuPlacement={'auto'}
getOptionLabel={(x) => x.clRefChr2}
getOptionValue={(x) => x.clRefChr1}
isClearable={false}
value={cableItemList.filter(function (option) {
return option.clRefChr1 === item.itemId
})}
/>
)}
</div>
{item?.itemChangeFlg === '1' && (
<div className="btn-area">

2
src/components/floor-plan/CanvasMenu.jsx
View File

@ -111,7 +111,7 @@ export default function CanvasMenu(props) {
//임시
const { selectedPlan } = usePlan()
const handleExcelPdfFileDown = async (donwloadType, drawingFlg) => {
const url = '/api/estimate/excel-download'
const url = '/api/pwrGnrSimulation/excel-download'
const params = {
objectNo: objectNo,

2
src/components/main/MainContents.jsx
View File

@ -199,7 +199,7 @@ export default function MainContents({ setFaqOpen, setFaqModalNoticeNo }) {
</div>
)}
</ProductItem>
<ProductItem num={4} name={'Data Download'}>
<ProductItem num={4} name={getMessage('main.archive')}>
{fileList.length > 0 ? (
<div className="data-download-wrap">
{fileList?.map((file) => (

2
src/hooks/common/useCommonCode.js
View File

@ -33,6 +33,8 @@ export const useCommonCode = () => {
clCode: code.clCode,
clCodeNm: globalLocale === 'ko' ? code.clCodeNm : code.clCodeJp,
clPriority: code.clPriority,
clRefChr1: code.clRefChr1,
clRefChr2: code.clRefChr2,
}
return result
})

4
src/hooks/floorPlan/estimate/useEstimateController.js
View File

@ -129,6 +129,7 @@ export const useEstimateController = (planNo, flag) => {
delFlg: '0', //삭제 플래그 0 삭제하면 1
addFlg: true,
paDispOrder: null,
dispCableFlg: '0',
},
],
})
@ -298,6 +299,9 @@ export const useEstimateController = (planNo, flag) => {
}
}
}
} else {
//봄 컴포넌트 제품은 0으로
item.openFlg = '0'
}
}
})

87
src/hooks/module/useTrestle.js
View File

@ -619,6 +619,9 @@ export const useTrestle = () => {
//module Rack 정보를 얻기위한 데이터 가공
function moduleTransformData(arr) {
//arr의 moduleTpCd를 이용하여 정렬
arr = arr.sort((a, b) => a.moduleTpCd.localeCompare(b.moduleTpCd))
let counts = {}
arr.forEach((item) => {
@ -1649,10 +1652,29 @@ export const useTrestle = () => {
}
}
switch (direction) {
case 'south': {
startPointY -= 5
break
}
case 'east': {
startPointX -= 5
break
}
case 'west': {
startPointX -= 5
break
}
case 'north': {
startPointY -= 5
break
}
}
for (let i = 0; i < count; i++) {
const bracket = new fabric.Rect({
left: startPointX - 5,
top: startPointY - 5,
left: startPointX,
top: startPointY,
fill: 'green',
name: TRESTLE_MATERIAL.BRACKET,
parentId: module.id,
@ -1664,14 +1686,15 @@ export const useTrestle = () => {
})
canvas.add(bracket)
canvas.renderAll()
const maxIntvl = Math.max(moduleIntvlHor, moduleIntvlVer)
if (direction === 'south') {
startPointY -= height - moduleIntvlVer / 10
startPointY -= height + maxIntvl / 10
} else if (direction === 'north') {
startPointY += height + moduleIntvlVer / 10
startPointY += height + maxIntvl / 10
} else if (direction === 'east') {
startPointX -= width - moduleIntvlHor / 10
startPointX -= width + maxIntvl / 10
} else if (direction === 'west') {
startPointX += width + moduleIntvlHor / 10
startPointX += width + maxIntvl / 10
}
}
}
@ -1730,7 +1753,7 @@ export const useTrestle = () => {
const { width, height } = { ...module }
widthArr.push(width)
heightArr.push(height)
centerPoints.push({ x, y, width: Math.floor(width), height: Math.floor(height), index, moduleInfo: module.moduleInfo })
centerPoints.push({ x, y, width: Math.floor(width), height: Math.floor(height), index, moduleInfo: module.moduleInfo, module })
})
//widthArr 중복 제거 1이상 차이가 나지 않으면 같은 너비로 간주
@ -1804,7 +1827,13 @@ export const useTrestle = () => {
let rightExposedHalfTopPoints = []
centerPoints.forEach((centerPoint, index) => {
let { x, y, width, height, widthArr, heightArr } = { ...centerPoint }
let { x, y, width, height, widthArr, heightArr, module } = { ...centerPoint }
/* 디버깅용
const originFill = module.fill
module.set('fill', 'red')
canvas.renderAll()*/
// centerPoints중에 현재 centerPoint와 x값이 같고, y값이 y-height값과 같은 centerPoint가 있는지 확인
let bottomCell
let bottomLeftPoint
@ -1894,7 +1923,12 @@ export const useTrestle = () => {
break
}
/**
* 디버깅용
module.set('fill', originFill)
canvas.renderAll()
*/
if (bottomCell) {
return
}
@ -1911,13 +1945,18 @@ export const useTrestle = () => {
}
} else if (leftBottomCnt + rightBottomCnt === 0) {
exposedBottomPoints.push(centerPoint)
} else if (leftBottomCnt + rightBottomCnt === 2) {
touchDimension++
}
})
// 노출상면 및 접면 체크
centerPoints.forEach((centerPoint, index) => {
let { x, y, width, height, widthArr, heightArr } = { ...centerPoint }
let { x, y, width, height, widthArr, heightArr, module } = { ...centerPoint }
const originFill = module.fill
/* 디버깅용
module.set('fill', 'blue')
canvas.renderAll()*/
let topCell
let topLeftPoint
let topRightPoint
@ -1930,7 +1969,8 @@ export const useTrestle = () => {
height = height + vertical
heightArr.forEach((h) => {
if (topCell) return
topCell = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - x) < maxX && Math.abs(centerPoint.y - (y + h)) < maxY)
topCell = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - x) < maxX && Math.abs(centerPoint.y - (y - h)) < maxY)
if (leftTopCnt === 0) {
topLeftPoint = { x: x - width / 2, y: y - h }
leftTopCnt = centerPoints.filter(
@ -1949,7 +1989,7 @@ export const useTrestle = () => {
height = height + vertical
heightArr.forEach((h) => {
if (topCell) return
topCell = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - x) < maxX && Math.abs(centerPoint.y - (y - h)) < maxY)
topCell = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - x) < maxX && Math.abs(centerPoint.y - (y + h)) < maxY)
if (leftTopCnt === 0) {
topLeftPoint = { x: x + width / 2, y: y + h }
leftTopCnt = centerPoints.filter(
@ -1968,7 +2008,7 @@ export const useTrestle = () => {
width = width + horizontal
widthArr.forEach((w) => {
if (topCell) return
topCell = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - (x + w)) < maxX && Math.abs(centerPoint.y - y) < maxY)
topCell = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - (x - w)) < maxX && Math.abs(centerPoint.y - y) < maxY)
if (leftTopCnt === 0) {
topLeftPoint = { x: x - w, y: y + height / 2 }
leftTopCnt = centerPoints.filter(
@ -1988,7 +2028,7 @@ export const useTrestle = () => {
width = width + horizontal
widthArr.forEach((w) => {
if (topCell) return
topCell = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - (x - w)) < maxX && Math.abs(centerPoint.y - y) < maxY)
topCell = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - (x + w)) < maxX && Math.abs(centerPoint.y - y) < maxY)
if (leftTopCnt === 0) {
topLeftPoint = { x: x + w, y: y - height / 2 }
leftTopCnt = centerPoints.filter(
@ -2010,6 +2050,13 @@ export const useTrestle = () => {
return
}
/**
* 디버깅 용
module.set('fill', originFill)
canvas.renderAll()
*/
if (leftTopCnt + rightTopCnt === 2) {
touchDimension++
return
@ -2157,6 +2204,18 @@ export const useTrestle = () => {
rackRows: rack.rackRowsCd,
}
})
let smartRackParams = Object.values(smartRackGroup).map((smartRack, index) => {
return {
seq: index,
itemId: smartRack[0].rackId,
rackFittingCnt: smartRack[0].supFitQty,
rackRows: smartRack[0].rackRowsCd,
}
})
rackParams = [...rackParams, ...smartRackParams]
const parent = canvas.getObjects().find((obj) => obj.id === surface.parentId)
const roofMaterialIndex = parent.roofMaterial.index
const moduleSelection = moduleSelectionData?.roofConstructions?.find((construction) => construction.roofIndex === roofMaterialIndex)

15
src/locales/ja.json
View File

@ -9,7 +9,7 @@
"header.menus.community": "コミュニティ",
"header.menus.community.notice": "お知らせ",
"header.menus.community.faq": "FAQ",
"header.menus.community.archive": "見積書出力",
"header.menus.community.archive": "各種資料ダウンロード",
"header.logout": "ログアウト",
"header.go": "移動",
"header.online.warranty.system": "オンライン保証システム",
@ -178,7 +178,7 @@
"modal.roof.alloc.select.parallel": "筋配置",
"modal.roof.alloc.select.stairs": "千鳥配置",
"modal.roof.alloc.apply": "選択した屋根材として割り当て",
"plan.menu.estimate.docDown": "見積書出力",
"plan.menu.estimate.docDown": "各種資料ダウンロード",
"plan.menu.estimate.save": "保存",
"plan.menu.estimate.reset": "初期化",
"plan.menu.estimate.copy": "見積書のコピー",
@ -229,7 +229,7 @@
"modal.dormer.offset.info": "移動する距離と方向を入力してください。",
"modal.common.save": "保存",
"modal.common.add": "追加",
"modal.common.prev": "以前",
"modal.common.prev": "前に戻る",
"modal.common.next": "次",
"modal.canvas.setting.font.plan.edit": "フォントとサイズの変更",
"modal.canvas.setting.font.plan.edit.word": "文字フォントの変更",
@ -557,7 +557,7 @@
"board.notice.sub.title": "お知らせ一覧",
"board.faq.title": "FAQ",
"board.faq.sub.title": "FAQリスト",
"board.archive.title": "資料のダウンロード",
"board.archive.title": "各種資料ダウンロード",
"board.archive.sub.title": "見積書一覧",
"board.list.header.rownum": "番号",
"board.list.header.title": "タイトル",
@ -849,9 +849,10 @@
"main.storeName": "販売店名",
"main.objectNo": "物件番号",
"main.faq": "FAQ",
"main.archive": "各種資料ダウンロード",
"main.content.objectList.noData1": "登録された商品情報はありません。",
"main.content.objectList.noData2": "下のボタンをクリックして商品情報を登録してください。",
"main.content.objectList": "最近の更新物件一覧",
"main.content.objectList": "直近の見積書一覧",
"main.content.notice": "お知らせ",
"main.content.download1": "操作マニュアル",
"main.content.download2": "屋根の説明書",
@ -907,7 +908,7 @@
"estimate.detail.header.specialEstimateProductInfo": "製品情報",
"estimate.detail.sepcialEstimateProductInfo.totAmount": "数量（PCS）",
"estimate.detail.sepcialEstimateProductInfo.totVolKw": "容量(kW)",
"estimate.detail.sepcialEstimateProductInfo.supplyPrice": "供給価格",
"estimate.detail.sepcialEstimateProductInfo.supplyPrice": "見積価格",
"estimate.detail.sepcialEstimateProductInfo.vatPrice": "税（10％）",
"estimate.detail.sepcialEstimateProductInfo.totPrice": "総額",
"estimate.detail.sepcialEstimateProductInfo.pkgUnitPrice": "住宅PKG単価（W）",
@ -920,7 +921,7 @@
"estimate.detail.showPrice.description1": "製品価格OPEN",
"estimate.detail.showPrice.description2": "追加の変更品目",
"estimate.detail.showPrice.description3": "添付必須",
"estimate.detail.showPrice.description4": "クリックして製品の特異性を確認する",
"estimate.detail.showPrice.description4": "クリックで製品特記事項を確認できます",
"estimate.detail.showPrice.addItem": "製品追加",
"estimate.detail.showPrice.delItem": "製品の削除",
"estimate.detail.itemTableHeader.dispOrder": "アイテム",

5
src/locales/ko.json
View File

@ -9,7 +9,7 @@
"header.menus.community": "커뮤니티",
"header.menus.community.notice": "공지사항",
"header.menus.community.faq": "FAQ",
"header.menus.community.archive": "문서다운로드",
"header.menus.community.archive": "각종 자료 다운로드",
"header.logout": "로그아웃",
"header.go": "이동",
"header.online.warranty.system": "온라인보증시스템",
@ -557,7 +557,7 @@
"board.notice.sub.title": "공지사항 목록",
"board.faq.title": "FAQ",
"board.faq.sub.title": "FAQ 목록",
"board.archive.title": "자료 다운로드",
"board.archive.title": "각종 자료 다운로드",
"board.archive.sub.title": "문서 목록",
"board.list.header.rownum": "번호",
"board.list.header.title": "제목",
@ -849,6 +849,7 @@
"main.storeName": "판매점명",
"main.objectNo": "물건번호",
"main.faq": "FAQ",
"main.archive": "각종 자료 다운로드",
"main.content.objectList.noData1": "등록된 물건정보가 없습니다.",
"main.content.objectList.noData2": "아래 버튼을 클릭하여 물건정보를 등록하십시오.",
"main.content.objectList": "최근 갱신 물건목록",

561
src/styles/_modal.scss
View File

@ -5,12 +5,24 @@ $pop-normal-size: 12px;
$alert-color: #101010;
@keyframes mountpop {
from{opacity: 0; scale: 0.95;}
to{opacity: 1; scale: 1;}
from {
opacity: 0;
scale: 0.95;
}
to {
opacity: 1;
scale: 1;
}
}
@keyframes unmountpop {
from{opacity: 1; scale: 1;}
to{opacity: 0; scale: 0.95;}
from {
opacity: 1;
scale: 1;
}
to {
opacity: 0;
scale: 0.95;
}
}
.normal-font {
@ -85,10 +97,10 @@ $alert-color: #101010;
width: 900px;
}
&.mount {
animation: mountpop .17s ease-in-out forwards;
animation: mountpop 0.17s ease-in-out forwards;
}
&.unmount {
animation: unmountpop .17s ease-in-out forwards;
animation: unmountpop 0.17s ease-in-out forwards;
}
&.alert {
position: absolute;
@ -214,7 +226,7 @@ $alert-color: #101010;
}
}
.outer-line-wrap {
border-top: 1px solid #3C3C3C;
border-top: 1px solid #3c3c3c;
margin-top: 10px;
padding-top: 15px;
margin-bottom: 15px;
@ -243,7 +255,7 @@ $alert-color: #101010;
.adsorption-point {
display: flex;
align-items: center;
background-color: #3A3A3A;
background-color: #3a3a3a;
border-radius: 3px;
padding-left: 11px;
overflow: hidden;
@ -264,7 +276,7 @@ $alert-color: #101010;
&.act {
i {
color: $pop-color;
background-color: #1083E3;
background-color: #1083e3;
}
}
}
@ -293,7 +305,7 @@ $alert-color: #101010;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: #D9D9D9;
background-color: #d9d9d9;
}
&::-webkit-scrollbar-track {
background-color: transparent;
@ -304,7 +316,7 @@ $alert-color: #101010;
display: flex;
align-items: center;
background-color: transparent;
border: 1px solid #3D3D3D;
border: 1px solid #3d3d3d;
border-radius: 2px;
padding: 15px 10px;
gap: 20px;
@ -343,7 +355,6 @@ $alert-color: #101010;
top: 50%;
right: 0;
transform: translateY(-50%);
}
}
.input-grid {
@ -353,7 +364,9 @@ $alert-color: #101010;
}
}
.select-form {
.sort-select{width: 100%;}
.sort-select {
width: 100%;
}
}
.grid-select {
flex: 1;
@ -399,7 +412,6 @@ $alert-color: #101010;
color: $pop-color;
font-weight: $pop-normal-weight;
padding-bottom: 15px;
}
.grid-direction {
display: flex;
@ -416,11 +428,17 @@ $alert-color: #101010;
background-position: center;
background-size: 16px 15px;
border-radius: 50%;
transition: all .15s ease-in-out;
transition: all 0.15s ease-in-out;
opacity: 0.6;
&.down{transform: rotate(180deg);}
&.left{transform: rotate(-90deg);}
&.right{transform: rotate(90deg);}
&.down {
transform: rotate(180deg);
}
&.left {
transform: rotate(-90deg);
}
&.right {
transform: rotate(90deg);
}
&:hover,
&.act {
opacity: 1;
@ -506,10 +524,11 @@ $alert-color: #101010;
}
&.light {
padding: 0;
th,td{
th,
td {
color: $alert-color;
border-bottom: none;
border-top: 1px solid #EFEFEF;
border-top: 1px solid #efefef;
}
th {
padding: 14px 0;
@ -574,7 +593,6 @@ $alert-color: #101010;
color: $pop-color;
font-weight: $pop-normal-weight;
}
}
.img-edit-wrap {
@ -590,7 +608,7 @@ $alert-color: #101010;
background-color: #fff;
border-radius: 2px;
cursor: pointer;
transition: all .15s ease-in-out;
transition: all 0.15s ease-in-out;
.img-edit {
width: 16px;
height: 16px;
@ -610,7 +628,6 @@ $alert-color: #101010;
margin-left: 10px;
input {
flex: 1;
}
.img-check {
flex: none;
@ -636,8 +653,12 @@ $alert-color: #101010;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
&.fail{background-image: url(../../public/static/images/canvas/img_check_fail.svg);}
&.success{background-image: url(../../public/static/images/canvas/img_check_success.svg);}
&.fail {
background-image: url(../../public/static/images/canvas/img_check_fail.svg);
}
&.success {
background-image: url(../../public/static/images/canvas/img_check_success.svg);
}
}
}
@ -717,7 +738,7 @@ $alert-color: #101010;
align-items: center;
justify-content: center;
width: 50%;
background-color: #3D3D3D;
background-color: #3d3d3d;
border-radius: 2px;
}
}
@ -725,7 +746,7 @@ $alert-color: #101010;
// 외벽선 속성 설정
.properties-guide {
font-size: $pop-normal-size;
color: #AAA;
color: #aaa;
font-weight: $pop-normal-weight;
margin-bottom: 14px;
}
@ -754,17 +775,17 @@ $alert-color: #101010;
color: #fff;
font-weight: 700;
border-radius: 2px;
transition: all .15s ease-in-out;
transition: all 0.15s ease-in-out;
&.green {
background-color: #305941;
border: 1px solid #45CD7D;
border: 1px solid #45cd7d;
&:hover {
background-color: #3a6b4e;
}
}
&.blue {
background-color: #2E5360;
border: 1px solid #3FBAE6;
background-color: #2e5360;
border: 1px solid #3fbae6;
&:hover {
background-color: #365f6e;
}
@ -793,8 +814,8 @@ $alert-color: #101010;
justify-content: center;
width: 100%;
padding: 13px;
background-color: #3D3D3D;
transition: background .15s ease-in-out;
background-color: #3d3d3d;
transition: background 0.15s ease-in-out;
img {
max-width: 100%;
}
@ -805,13 +826,17 @@ $alert-color: #101010;
color: $pop-color;
margin-top: 10px;
text-align: center;
transition: color .15s ease-in-out;
transition: color 0.15s ease-in-out;
}
.shape-menu-box {
&.act,
&:hover {
.shape-box{background-color: #008BFF;}
.shape-title{color: #008BFF;}
.shape-box {
background-color: #008bff;
}
.shape-title {
color: #008bff;
}
}
}
}
@ -826,7 +851,7 @@ $alert-color: #101010;
}
.discrimination-box {
padding: 16px 12px;
border: 1px solid #3D3D3D;
border: 1px solid #3d3d3d;
border-radius: 2px;
}
@ -859,12 +884,12 @@ $alert-color: #101010;
align-items: center;
justify-content: center;
padding: 5px;
background-color: #3D3D3D;
border: 1px solid #3D3D3D;
background-color: #3d3d3d;
border: 1px solid #3d3d3d;
border-radius: 2px;
cursor: pointer;
&.act {
border: 1px solid #ED0004;
border: 1px solid #ed0004;
}
}
&:last-child {
@ -914,7 +939,7 @@ $alert-color: #101010;
font-weight: $pop-normal-weight;
border: 1px solid #484848;
background-color: #323234;
transition: background-color .13s ease-in-out;
transition: background-color 0.13s ease-in-out;
i {
display: block;
width: 12px;
@ -969,7 +994,7 @@ $alert-color: #101010;
border: 1px solid #646464;
border-radius: 2px;
padding: 0 10px;
transition: all .15s ease-in-out;
transition: all 0.15s ease-in-out;
i {
height: 15px;
display: block;
@ -977,7 +1002,7 @@ $alert-color: #101010;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transition: all .15s ease-in-out;
transition: all 0.15s ease-in-out;
&.allocation01 {
background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
width: 15px;
@ -1050,7 +1075,9 @@ $alert-color: #101010;
height: 34px;
background-color: #373737;
border: 1px solid #676767;
transition: background .15s ease-in-out, border .15s ease-in-out;
transition:
background 0.15s ease-in-out,
border 0.15s ease-in-out;
.shape-box {
display: flex;
justify-content: center;
@ -1062,8 +1089,8 @@ $alert-color: #101010;
}
&.act,
&:hover {
border-color: #008BFF;
background-color: #008BFF;
border-color: #008bff;
background-color: #008bff;
}
}
}
@ -1078,18 +1105,27 @@ $alert-color: #101010;
.library-btn {
width: 100%;
height: 34px;
border: 1px solid #6C6C6C;
border: 1px solid #6c6c6c;
border-radius: 2px;
background-color: #373737;
background-repeat: no-repeat;
background-position: center;
transition: all .15s ease-in-out;
&.ico01{background-image: url(../../public/static/images/canvas/shape_labrary01.svg); background-size: 19px 18px;}
&.ico02{background-image: url(../../public/static/images/canvas/shape_labrary02.svg); background-size: 15px 20px;}
&.ico03{background-image: url(../../public/static/images/canvas/shape_labrary03.svg); background-size: 19px 16px;}
transition: all 0.15s ease-in-out;
&.ico01 {
background-image: url(../../public/static/images/canvas/shape_labrary01.svg);
background-size: 19px 18px;
}
&.ico02 {
background-image: url(../../public/static/images/canvas/shape_labrary02.svg);
background-size: 15px 20px;
}
&.ico03 {
background-image: url(../../public/static/images/canvas/shape_labrary03.svg);
background-size: 19px 16px;
}
&:hover {
border-color: #1083E3;
background-color: #1083E3;
border-color: #1083e3;
background-color: #1083e3;
}
}
}
@ -1175,11 +1211,27 @@ $alert-color: #101010;
position: absolute;
font-size: 12px;
font-weight: 500;
color: #B1B1B1;
&.top{top: 0; left: 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%);}
color: #b1b1b1;
&.top {
top: 0;
left: 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 {
position: absolute;
@ -1191,11 +1243,27 @@ $alert-color: #101010;
background-repeat: no-repeat;
background-position: center;
border-radius: 50%;
transition: all .15s ease-in-out;
&.up{top: 22px; left: 50%; 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);}
transition: all 0.15s ease-in-out;
&.up {
top: 22px;
left: 50%;
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,
&.act {
background-color: #fff;
@ -1272,7 +1340,7 @@ $alert-color: #101010;
.warning {
font-size: $pop-normal-size;
font-weight: $pop-normal-weight;
color: #FFAFAF;
color: #ffafaf;
}
// 각 변 속성 변경
@ -1328,37 +1396,157 @@ $alert-color: #101010;
top: 12.5px;
left: 50%;
font-size: 11px;
color: #8B8B8B;
color: #8b8b8b;
font-weight: 500;
-webkit-user-select: none;
-moz-user-select: none;
-ms-use-select: none;
user-select: none;
}
&:nth-child(1) { transform: rotate(180deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(180deg);}}
&:nth-child(2) { transform: rotate(195deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(165deg);}}
&:nth-child(3) { transform: rotate(210deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(150deg);}}
&:nth-child(4) { transform: rotate(225deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(135deg);}}
&: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);}}
&:nth-child(1) {
transform: rotate(180deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(180deg);
}
}
&:nth-child(2) {
transform: rotate(195deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(165deg);
}
}
&:nth-child(3) {
transform: rotate(210deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(150deg);
}
}
&:nth-child(4) {
transform: rotate(225deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(135deg);
}
}
&: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 {
&::after {
content: '';
@ -1412,13 +1600,13 @@ $alert-color: #101010;
border-radius: 2px;
background-color: transparent;
font-size: 12px;
color: #AAA;
color: #aaa;
text-align: center;
cursor: default;
transition: all .15s ease-in-out;
transition: all 0.15s ease-in-out;
&.act {
background-color: #1083E3;
border: 1px solid #1083E3;
background-color: #1083e3;
border: 1px solid #1083e3;
color: #fff;
font-weight: 500;
}
@ -1431,7 +1619,7 @@ $alert-color: #101010;
background-position: center;
background-size: cover;
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 {
background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
}
@ -1464,7 +1652,9 @@ $alert-color: #101010;
top: 22px;
}
&.act {
i{color: #8B8B8B;}
i {
color: #8b8b8b;
}
}
}
}
@ -1496,7 +1686,7 @@ $alert-color: #101010;
height: 30px;
font-size: 12px;
font-weight: 400;
transition: all .15s ease-in-out;
transition: all 0.15s ease-in-out;
&:first-child {
border-left: 1px solid #505050;
}
@ -1510,7 +1700,7 @@ $alert-color: #101010;
.module-table-box {
flex: 1;
background-color: #3D3D3D;
background-color: #3d3d3d;
border-radius: 2px;
.module-table-inner {
padding: 10px;
@ -1523,7 +1713,7 @@ $alert-color: #101010;
padding: 10px 0;
font-size: 12px;
color: #fff;
border-bottom: 1px solid #4D4D4D;
border-bottom: 1px solid #4d4d4d;
}
.eaves-keraba-table {
width: 100%;
@ -1546,7 +1736,7 @@ $alert-color: #101010;
.warning-guide {
padding: 20px;
.warning {
color: #FFCACA;
color: #ffcaca;
max-height: 55px;
overflow-y: auto;
padding-right: 30px;
@ -1555,7 +1745,7 @@ $alert-color: #101010;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: #D9D9D9;
background-color: #d9d9d9;
}
&::-webkit-scrollbar-track {
background-color: transparent;
@ -1566,7 +1756,7 @@ $alert-color: #101010;
.module-self-table {
display: table;
border-top: 1px solid #4D4D4D;
border-top: 1px solid #4d4d4d;
border-collapse: collapse;
width: 100%;
.self-table-item {
@ -1575,7 +1765,7 @@ $alert-color: #101010;
.self-item-th {
display: table-cell;
vertical-align: middle;
border-bottom: 1px solid #4D4D4D;
border-bottom: 1px solid #4d4d4d;
}
.self-item-th {
width: 60px;
@ -1603,7 +1793,7 @@ $alert-color: #101010;
.hexagonal-wrap {
.hexagonal-item {
padding: 15px 0;
border-bottom: 1px solid #4D4D4D;
border-bottom: 1px solid #4d4d4d;
&:first-child {
padding-top: 0;
}
@ -1637,7 +1827,7 @@ $alert-color: #101010;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: #D9D9D9;
background-color: #d9d9d9;
}
&::-webkit-scrollbar-track {
background-color: transparent;
@ -1686,7 +1876,7 @@ $alert-color: #101010;
gap: 5px;
min-height: 60px;
padding: 12px;
border: 1px solid rgba(255, 255, 255, 0.20);
border: 1px solid rgba(255, 255, 255, 0.2);
span {
display: inline-flex;
align-items: center;
@ -1717,7 +1907,7 @@ $alert-color: #101010;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: #D9D9D9;
background-color: #d9d9d9;
}
&::-webkit-scrollbar-track {
background-color: transparent;
@ -1733,25 +1923,24 @@ $alert-color: #101010;
padding-bottom: 14px;
.outline-form {
span {
color: #62C207;
color: #62c207;
}
.grid-select {
.sort-select {
border: 1px solid #4E9E04;
background-color: #1A3104;
border: 1px solid #4e9e04;
background-color: #1a3104;
p {
line-height: 27px;
}
.select-item-wrap {
background-color: #1A3104;
border: 1px solid #4E9E04;
background-color: #1a3104;
border: 1px solid #4e9e04;
.select-item:hover {
background-color: #294e07;
}
&::-webkit-scrollbar {
width: 2px;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: #fff;
@ -1818,10 +2007,10 @@ $alert-color: #101010;
height: 16px;
&.pink {
border: 2px solid #ce1c9c;
background-color: #16417D;
background-color: #16417d;
}
&.white {
border: 2px solid #FFF;
border: 2px solid #fff;
background-color: #001027;
}
}
@ -1846,7 +2035,7 @@ $alert-color: #101010;
.react-colorful__pointer {
width: 15px;
height: 15px;
border: 4px solid #Fff;
border: 4px solid #fff;
}
.react-colorful__saturation {
border-radius: 2px;
@ -1936,7 +2125,6 @@ $alert-color: #101010;
min-height: 80px;
background-color: #fff;
}
}
// 치수선 설정
@ -2056,10 +2244,22 @@ $alert-color: #101010;
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; }
&: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;
@ -2152,13 +2352,13 @@ $alert-color: #101010;
max-height: 650px;
overflow-y: auto;
padding-bottom: 15px;
border-bottom: 1px solid #4D4D4D;
border-bottom: 1px solid #4d4d4d;
&::-webkit-scrollbar {
width: 4px;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: #D9D9D9;
background-color: #d9d9d9;
}
&::-webkit-scrollbar-track {
background-color: transparent;
@ -2168,7 +2368,6 @@ $alert-color: #101010;
&.tab2 {
margin-top: 10px;
gap: 15px;
}
.module-flex-item {
flex: 1;
@ -2177,7 +2376,7 @@ $alert-color: #101010;
font-weight: 500;
color: #fff;
padding-bottom: 10px;
border-bottom: 1px solid #4D4D4D;
border-bottom: 1px solid #4d4d4d;
}
.flex-item-btn-wrap {
display: grid;
@ -2225,6 +2424,120 @@ $alert-color: #101010;
}
}
.pop-spinner {
position: absolute;
bottom: 10px;
left: 5px;
width: calc(100% - 10px);
height: calc(100% - 49px);
display: flex;
align-items: center;
justify-content: center;
background-color: rgba($color: #101010, $alpha: 0.5);
z-index: 2000000;
.loader {
font-size: 10px;
width: 1.2em;
height: 1.2em;
border-radius: 50%;
position: relative;
text-indent: -9999em;
animation: mulShdSpin 1.1s infinite ease;
transform: translateZ(0);
}
@keyframes mulShdSpin {
0%,
100% {
box-shadow:
0em -2.6em 0em 0em #fff,
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0em rgba(0, 0, 0, 0.2),
-2.6em 0em 0 0em rgba(255, 255, 255, 0.5),
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
}
12.5% {
box-shadow:
0em -2.6em 0em 0em rgba(255, 255, 255, 0.7),
1.8em -1.8em 0 0em #fff,
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
}
25% {
box-shadow:
0em -2.6em 0em 0em rgba(255, 255, 255, 0.5),
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7),
2.5em 0em 0 0em #fff,
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
37.5% {
box-shadow:
0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5),
2.5em 0em 0 0em rgba(255, 255, 255, 0.7),
1.75em 1.75em 0 0em #fff,
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
50% {
box-shadow:
0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
2.5em 0em 0 0em rgba(255, 255, 255, 0.5),
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7),
0em 2.5em 0 0em #fff,
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2),
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
62.5% {
box-shadow:
0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5),
0em 2.5em 0 0em rgba(255, 255, 255, 0.7),
-1.8em 1.8em 0 0em #fff,
-2.6em 0em 0 0em rgba(255, 255, 255, 0.2),
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
75% {
box-shadow:
0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
0em 2.5em 0 0em rgba(255, 255, 255, 0.5),
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7),
-2.6em 0em 0 0em #fff,
-1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
}
87.5% {
box-shadow:
0em -2.6em 0em 0em rgba(255, 255, 255, 0.2),
1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2),
2.5em 0em 0 0em rgba(255, 255, 255, 0.2),
1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2),
0em 2.5em 0 0em rgba(255, 255, 255, 0.2),
-1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5),
-2.6em 0em 0 0em rgba(255, 255, 255, 0.7),
-1.8em -1.8em 0 0em #fff;
}
}
}
.pop-spinner{
position: absolute;
bottom: 10px;