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

🚨chore: Sync Sass

Browse Source
This commit is contained in:
minsik 2024-10-11 15:40:24 +09:00
parent f84d3a912f
commit 1bbba2817f
22 changed files with 3623 additions and 2948 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
public/static/images/canvas/additional-edit01.svg Normal file
View File

@ -0,0 +1,115 @@
<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4200_3427)">
<mask id="mask0_4200_3427" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
</mask>
<g mask="url(#mask0_4200_3427)">
<rect x="-41" width="798" height="1" fill="#444444"/>
<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
</g>
<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
<mask id="path-40-inside-1_4200_3427" fill="white">
<path d="M31 26H102.25V78H31V26Z"/>
</mask>
<path d="M31 26H102.25V78H31V26Z" fill="#16417D"/>
<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H102.25V25H31V27ZM102.25 77H31V79H102.25V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_3427)"/>
<rect x="104.75" y="28.5" width="66.25" height="47" fill="#001027"/>
<rect x="104.75" y="28.5" width="66.25" height="47" stroke="white" stroke-width="5"/>
<rect x="176" y="28.5" width="66.25" height="47" fill="#16417D"/>
<rect x="176" y="28.5" width="66.25" height="47" stroke="#EA10AC" stroke-width="5"/>
<mask id="path-44-inside-2_4200_3427" fill="white">
<path d="M244.75 26H316V78H244.75V26Z"/>
</mask>
<path d="M244.75 26H316V78H244.75V26Z" fill="#16417D"/>
<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM244.75 27H316V25H244.75V27ZM315 26V78H317V26H315ZM316 77H244.75V79H316V77Z" fill="#00183B" mask="url(#path-44-inside-2_4200_3427)"/>
<mask id="path-46-inside-3_4200_3427" fill="white">
<path d="M31 78H102.25V130H31V78Z"/>
</mask>
<path d="M31 78H102.25V130H31V78Z" fill="#16417D"/>
<path d="M31 130H30V131H31V130ZM102.25 129H31V131H102.25V129ZM32 130V78H30V130H32Z" fill="#00183B" mask="url(#path-46-inside-3_4200_3427)"/>
<mask id="path-48-inside-4_4200_3427" fill="white">
<path d="M102.25 78H173.5V130H102.25V78Z"/>
</mask>
<path d="M102.25 78H173.5V130H102.25V78Z" fill="#001027"/>
<path d="M173.5 130V135H178.5V130H173.5ZM102.25 130H97.25V135H102.25V130ZM168.5 78V130H178.5V78H168.5ZM173.5 125H102.25V135H173.5V125ZM107.25 130V78H97.25V130H107.25Z" fill="white" mask="url(#path-48-inside-4_4200_3427)"/>
<mask id="path-50-inside-5_4200_3427" fill="white">
<path d="M173.5 78H244.75V130H173.5V78Z"/>
</mask>
<path d="M173.5 78H244.75V130H173.5V78Z" fill="#16417D"/>
<path d="M244.75 130V135H249.75V130H244.75ZM173.5 130H168.5V135H173.5V130ZM239.75 78V130H249.75V78H239.75ZM244.75 125H173.5V135H244.75V125ZM178.5 130V78H168.5V130H178.5Z" fill="#EA10AC" mask="url(#path-50-inside-5_4200_3427)"/>
<mask id="path-52-inside-6_4200_3427" fill="white">
<path d="M244.75 78H316V130H244.75V78Z"/>
</mask>
<path d="M244.75 78H316V130H244.75V78Z" fill="#16417D"/>
<path d="M316 130V131H317V130H316ZM315 78V130H317V78H315ZM316 129H244.75V131H316V129Z" fill="#00183B" mask="url(#path-52-inside-6_4200_3427)"/>
<mask id="path-54-inside-7_4200_3427" fill="white">
<path d="M31 130H102.25V182H31V130Z"/>
</mask>
<path d="M31 130H102.25V182H31V130Z" fill="#16417D"/>
<path d="M31 182H30V183H31V182ZM102.25 181H31V183H102.25V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-54-inside-7_4200_3427)"/>
<mask id="path-56-inside-8_4200_3427" fill="white">
<path d="M102.25 130H173.5V182H102.25V130Z"/>
</mask>
<path d="M102.25 130H173.5V182H102.25V130Z" fill="#001027"/>
<path d="M173.5 182V187H178.5V182H173.5ZM102.25 182H97.25V187H102.25V182ZM168.5 130V182H178.5V130H168.5ZM173.5 177H102.25V187H173.5V177ZM107.25 182V130H97.25V182H107.25Z" fill="white" mask="url(#path-56-inside-8_4200_3427)"/>
<mask id="path-58-inside-9_4200_3427" fill="white">
<path d="M173.5 130H244.75V182H173.5V130Z"/>
</mask>
<path d="M173.5 130H244.75V182H173.5V130Z" fill="#16417D"/>
<path d="M244.75 182V187H249.75V182H244.75ZM173.5 182H168.5V187H173.5V182ZM239.75 130V182H249.75V130H239.75ZM244.75 177H173.5V187H244.75V177ZM178.5 182V130H168.5V182H178.5Z" fill="#EA10AC" mask="url(#path-58-inside-9_4200_3427)"/>
<mask id="path-60-inside-10_4200_3427" fill="white">
<path d="M244.75 130H316V182H244.75V130Z"/>
</mask>
<path d="M244.75 130H316V182H244.75V130Z" fill="#16417D"/>
<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H244.75V183H316V181Z" fill="#00183B" mask="url(#path-60-inside-10_4200_3427)"/>
<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 56 166)" fill="#16417D"/>
<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 56 166)" stroke="white"/>
<path d="M59.2929 155.293C58.9024 155.683 58.9024 156.317 59.2929 156.707L65.6569 163.071C66.0474 163.462 66.6805 163.462 67.0711 163.071C67.4616 162.681 67.4616 162.047 67.0711 161.657L61.4142 156L67.0711 150.343C67.4616 149.953 67.4616 149.319 67.0711 148.929C66.6805 148.538 66.0474 148.538 65.6569 148.929L59.2929 155.293ZM74 155H60V157H74V155Z" fill="white"/>
<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 56 114)" fill="#16417D"/>
<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 56 114)" stroke="white"/>
<path d="M59.2929 103.293C58.9024 103.683 58.9024 104.317 59.2929 104.707L65.6569 111.071C66.0474 111.462 66.6805 111.462 67.0711 111.071C67.4616 110.681 67.4616 110.047 67.0711 109.657L61.4142 104L67.0711 98.3431C67.4616 97.9526 67.4616 97.3195 67.0711 96.9289C66.6805 96.5384 66.0474 96.5384 65.6569 96.9289L59.2929 103.293ZM74 103H60V105H74V103Z" fill="white"/>
<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 56 62)" fill="#16417D"/>
<rect x="0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(1 0 0 -1 56 62)" stroke="white"/>
<path d="M59.2929 51.2929C58.9024 51.6834 58.9024 52.3166 59.2929 52.7071L65.6569 59.0711C66.0474 59.4616 66.6805 59.4616 67.0711 59.0711C67.4616 58.6805 67.4616 58.0474 67.0711 57.6569L61.4142 52L67.0711 46.3431C67.4616 45.9526 67.4616 45.3195 67.0711 44.9289C66.6805 44.5384 66.0474 44.5384 65.6569 44.9289L59.2929 51.2929ZM74 51H60V53H74V51Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_4200_3427">
<rect width="352" height="209" rx="2" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

0
public/static/images/canvas/additional-edit02.svg Normal file
View File

0
public/static/images/canvas/additional_bundle-del01.svg Normal file
View File

106
public/static/images/canvas/additional_bundle-del02.svg Normal file
View File

@ -0,0 +1,106 @@
<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4200_4066)">
<mask id="mask0_4200_4066" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
</mask>
<g mask="url(#mask0_4200_4066)">
<rect x="-41" width="798" height="1" fill="#444444"/>
<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
</g>
<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
<mask id="path-40-inside-1_4200_4066" fill="white">
<path d="M31 26H126V78H31V26Z"/>
</mask>
<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_4066)"/>
<mask id="path-42-inside-2_4200_4066" fill="white">
<path d="M126 26H221V78H126V26Z"/>
</mask>
<path d="M126 26H221V78H126V26Z" fill="#16417D"/>
<path d="M126 26V25H125V26H126ZM221 26H222V25H221V26ZM221 78V79H222V78H221ZM126 78H125V79H126V78ZM126 27H221V25H126V27ZM220 26V78H222V26H220ZM221 77H126V79H221V77ZM127 78V26H125V78H127Z" fill="#00183B" mask="url(#path-42-inside-2_4200_4066)"/>
<mask id="path-44-inside-3_4200_4066" fill="white">
<path d="M221 26H316V78H221V26Z"/>
</mask>
<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-44-inside-3_4200_4066)"/>
<mask id="path-46-inside-4_4200_4066" fill="white">
<path d="M31 78H126V130H31V78Z"/>
</mask>
<path d="M31 78H126V130H31V78Z" fill="#16417D"/>
<path d="M31 78V73H26V78H31ZM126 78H131V73H126V78ZM126 130V135H131V130H126ZM31 130H26V135H31V130ZM31 83H126V73H31V83ZM121 78V130H131V78H121ZM126 125H31V135H126V125ZM36 130V78H26V130H36Z" fill="#EA10AC" mask="url(#path-46-inside-4_4200_4066)"/>
<mask id="path-48-inside-5_4200_4066" fill="white">
<path d="M126 78H221V130H126V78Z"/>
</mask>
<path d="M126 78H221V130H126V78Z" fill="#16417D"/>
<path d="M221 78H226V73H221V78ZM221 130V135H226V130H221ZM126 83H221V73H126V83ZM216 78V130H226V78H216ZM221 125H126V135H221V125Z" fill="#EA10AC" mask="url(#path-48-inside-5_4200_4066)"/>
<mask id="path-50-inside-6_4200_4066" fill="white">
<path d="M221 78H316V130H221V78Z"/>
</mask>
<path d="M221 78H316V130H221V78Z" fill="#16417D"/>
<path d="M316 78H321V73H316V78ZM316 130V135H321V130H316ZM221 83H316V73H221V83ZM311 78V130H321V78H311ZM316 125H221V135H316V125Z" fill="#EA10AC" mask="url(#path-50-inside-6_4200_4066)"/>
<mask id="path-52-inside-7_4200_4066" fill="white">
<path d="M31 130H126V182H31V130Z"/>
</mask>
<path d="M31 130H126V182H31V130Z" fill="#16417D"/>
<path d="M31 182H30V183H31V182ZM126 181H31V183H126V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-52-inside-7_4200_4066)"/>
<mask id="path-54-inside-8_4200_4066" fill="white">
<path d="M126 130H221V182H126V130Z"/>
</mask>
<path d="M126 130H221V182H126V130Z" fill="#16417D"/>
<path d="M221 182V183H222V182H221ZM126 182H125V183H126V182ZM220 130V182H222V130H220ZM221 181H126V183H221V181ZM127 182V130H125V182H127Z" fill="#00183B" mask="url(#path-54-inside-8_4200_4066)"/>
<mask id="path-56-inside-9_4200_4066" fill="white">
<path d="M221 130H316V182H221V130Z"/>
</mask>
<path d="M221 130H316V182H221V130Z" fill="#16417D"/>
<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H221V183H316V181Z" fill="#00183B" mask="url(#path-56-inside-9_4200_4066)"/>
<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 87 64)" fill="#16417D"/>
<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 87 64)" stroke="white"/>
<path d="M76.2929 61.7071C76.6834 62.0976 77.3166 62.0976 77.7071 61.7071L84.0711 55.3431C84.4616 54.9526 84.4616 54.3195 84.0711 53.9289C83.6805 53.5384 83.0474 53.5384 82.6569 53.9289L77 59.5858L71.3431 53.9289C70.9526 53.5384 70.3195 53.5384 69.9289 53.9289C69.5384 54.3195 69.5384 54.9526 69.9289 55.3431L76.2929 61.7071ZM76 47V61H78V47H76Z" fill="white"/>
<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 181 64)" fill="#16417D"/>
<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 181 64)" stroke="white"/>
<path d="M170.293 61.7071C170.683 62.0976 171.317 62.0976 171.707 61.7071L178.071 55.3431C178.462 54.9526 178.462 54.3195 178.071 53.9289C177.681 53.5384 177.047 53.5384 176.657 53.9289L171 59.5858L165.343 53.9289C164.953 53.5384 164.319 53.5384 163.929 53.9289C163.538 54.3195 163.538 54.9526 163.929 55.3431L170.293 61.7071ZM170 47V61H172V47H170Z" fill="white"/>
<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 277 64)" fill="#16417D"/>
<rect x="-0.5" y="-0.5" width="21" height="21" rx="10.5" transform="matrix(0 -1 -1 0 277 64)" stroke="white"/>
<path d="M266.293 61.7071C266.683 62.0976 267.317 62.0976 267.707 61.7071L274.071 55.3431C274.462 54.9526 274.462 54.3195 274.071 53.9289C273.681 53.5384 273.047 53.5384 272.657 53.9289L267 59.5858L261.343 53.9289C260.953 53.5384 260.319 53.5384 259.929 53.9289C259.538 54.3195 259.538 54.9526 259.929 55.3431L266.293 61.7071ZM266 47V61H268V47H266Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_4200_4066">
<rect width="352" height="209" rx="2" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.1 KiB

0
public/static/images/canvas/additional_bundle-del03.svg Normal file
View File

97
public/static/images/canvas/additional_bundle-del04.svg Normal file
View File

@ -0,0 +1,97 @@
<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4200_3677)">
<mask id="mask0_4200_3677" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
</mask>
<g mask="url(#mask0_4200_3677)">
<rect x="-41" width="798" height="1" fill="#444444"/>
<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
</g>
<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
<mask id="path-40-inside-1_4200_3677" fill="white">
<path d="M31 26H126V78H31V26Z"/>
</mask>
<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_3677)"/>
<mask id="path-42-inside-2_4200_3677" fill="white">
<path d="M126 26H221V78H126V26Z"/>
</mask>
<path d="M126 26H221V78H126V26Z" fill="#16417D"/>
<path d="M126 26V25H125V26H126ZM221 26H222V25H221V26ZM221 78V79H222V78H221ZM126 78H125V79H126V78ZM126 27H221V25H126V27ZM220 26V78H222V26H220ZM221 77H126V79H221V77ZM127 78V26H125V78H127Z" fill="#00183B" mask="url(#path-42-inside-2_4200_3677)"/>
<mask id="path-44-inside-3_4200_3677" fill="white">
<path d="M221 26H316V78H221V26Z"/>
</mask>
<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-44-inside-3_4200_3677)"/>
<mask id="path-46-inside-4_4200_3677" fill="white">
<path d="M31 78H126V130H31V78Z"/>
</mask>
<path d="M31 78H126V130H31V78Z" fill="#16417D"/>
<path d="M31 78V73H26V78H31ZM126 78H131V73H126V78ZM126 130V135H131V130H126ZM31 130H26V135H31V130ZM31 83H126V73H31V83ZM121 78V130H131V78H121ZM126 125H31V135H126V125ZM36 130V78H26V130H36Z" fill="#EA10AC" mask="url(#path-46-inside-4_4200_3677)"/>
<mask id="path-48-inside-5_4200_3677" fill="white">
<path d="M126 78H221V130H126V78Z"/>
</mask>
<path d="M126 78H221V130H126V78Z" fill="#16417D"/>
<path d="M221 78H226V73H221V78ZM221 130V135H226V130H221ZM126 83H221V73H126V83ZM216 78V130H226V78H216ZM221 125H126V135H221V125Z" fill="#EA10AC" mask="url(#path-48-inside-5_4200_3677)"/>
<mask id="path-50-inside-6_4200_3677" fill="white">
<path d="M221 78H316V130H221V78Z"/>
</mask>
<path d="M221 78H316V130H221V78Z" fill="#16417D"/>
<path d="M316 78H321V73H316V78ZM316 130V135H321V130H316ZM221 83H316V73H221V83ZM311 78V130H321V78H311ZM316 125H221V135H316V125Z" fill="#EA10AC" mask="url(#path-50-inside-6_4200_3677)"/>
<mask id="path-52-inside-7_4200_3677" fill="white">
<path d="M31 130H126V182H31V130Z"/>
</mask>
<path d="M31 130H126V182H31V130Z" fill="#16417D"/>
<path d="M31 182H30V183H31V182ZM126 181H31V183H126V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-52-inside-7_4200_3677)"/>
<mask id="path-54-inside-8_4200_3677" fill="white">
<path d="M126 130H221V182H126V130Z"/>
</mask>
<path d="M126 130H221V182H126V130Z" fill="#16417D"/>
<path d="M221 182V183H222V182H221ZM126 182H125V183H126V182ZM220 130V182H222V130H220ZM221 181H126V183H221V181ZM127 182V130H125V182H127Z" fill="#00183B" mask="url(#path-54-inside-8_4200_3677)"/>
<mask id="path-56-inside-9_4200_3677" fill="white">
<path d="M221 130H316V182H221V130Z"/>
</mask>
<path d="M221 130H316V182H221V130Z" fill="#16417D"/>
<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H221V183H316V181Z" fill="#00183B" mask="url(#path-56-inside-9_4200_3677)"/>
</g>
<defs>
<clipPath id="clip0_4200_3677">
<rect width="352" height="209" rx="2" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

0
public/static/images/canvas/additional_bundle-edit01.svg Normal file
View File

0
public/static/images/canvas/additional_bundle-edit02.svg Normal file
View File

103
public/static/images/canvas/additional_del01.svg Normal file
View File

@ -0,0 +1,103 @@
<svg width="352" height="209" viewBox="0 0 352 209" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4200_2642)">
<mask id="mask0_4200_2642" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-41" y="-79" width="798" height="623">
<path d="M-41 -79H757V304H-41V-79Z" fill="#F90808"/>
<path d="M-41 304H421V544H-41V304Z" fill="#F90808"/>
</mask>
<g mask="url(#mask0_4200_2642)">
<rect x="-41" width="798" height="1" fill="#444444"/>
<rect x="-41" y="16" width="798" height="1" fill="#444444"/>
<rect x="-41" y="32" width="798" height="1" fill="#444444"/>
<rect x="-41" y="48" width="798" height="1" fill="#444444"/>
<rect x="-41" y="64" width="798" height="1" fill="#444444"/>
<rect x="-41" y="80" width="798" height="1" fill="#444444"/>
<rect x="-41" y="96" width="798" height="1" fill="#444444"/>
<rect x="-41" y="112" width="798" height="1" fill="#444444"/>
<rect x="-41" y="128" width="798" height="1" fill="#444444"/>
<rect x="-41" y="144" width="798" height="1" fill="#444444"/>
<rect x="-41" y="160" width="798" height="1" fill="#444444"/>
<rect x="-41" y="176" width="798" height="1" fill="#444444"/>
<rect x="-41" y="192" width="798" height="1" fill="#444444"/>
<rect x="-41" y="208" width="798" height="1" fill="#444444"/>
<rect x="5" y="719" width="798" height="1" transform="rotate(-90 5 719)" fill="#444444"/>
<rect x="21" y="719" width="798" height="1" transform="rotate(-90 21 719)" fill="#444444"/>
<rect x="37" y="719" width="798" height="1" transform="rotate(-90 37 719)" fill="#444444"/>
<rect x="53" y="719" width="798" height="1" transform="rotate(-90 53 719)" fill="#444444"/>
<rect x="69" y="719" width="798" height="1" transform="rotate(-90 69 719)" fill="#444444"/>
<rect x="85" y="719" width="798" height="1" transform="rotate(-90 85 719)" fill="#444444"/>
<rect x="101" y="719" width="798" height="1" transform="rotate(-90 101 719)" fill="#444444"/>
<rect x="117" y="719" width="798" height="1" transform="rotate(-90 117 719)" fill="#444444"/>
<rect x="133" y="719" width="798" height="1" transform="rotate(-90 133 719)" fill="#444444"/>
<rect x="149" y="719" width="798" height="1" transform="rotate(-90 149 719)" fill="#444444"/>
<rect x="165" y="719" width="798" height="1" transform="rotate(-90 165 719)" fill="#444444"/>
<rect x="181" y="719" width="798" height="1" transform="rotate(-90 181 719)" fill="#444444"/>
<rect x="197" y="719" width="798" height="1" transform="rotate(-90 197 719)" fill="#444444"/>
<rect x="213" y="719" width="798" height="1" transform="rotate(-90 213 719)" fill="#444444"/>
<rect x="229" y="719" width="798" height="1" transform="rotate(-90 229 719)" fill="#444444"/>
<rect x="245" y="719" width="798" height="1" transform="rotate(-90 245 719)" fill="#444444"/>
<rect x="261" y="719" width="798" height="1" transform="rotate(-90 261 719)" fill="#444444"/>
<rect x="277" y="719" width="798" height="1" transform="rotate(-90 277 719)" fill="#444444"/>
<rect x="293" y="719" width="798" height="1" transform="rotate(-90 293 719)" fill="#444444"/>
<rect x="309" y="719" width="798" height="1" transform="rotate(-90 309 719)" fill="#444444"/>
<rect x="325" y="719" width="798" height="1" transform="rotate(-90 325 719)" fill="#444444"/>
<rect x="341" y="719" width="798" height="1" transform="rotate(-90 341 719)" fill="#444444"/>
</g>
<rect x="13" y="9" width="323" height="191" stroke="#EA10AC" stroke-width="2" stroke-dasharray="4 4"/>
<mask id="path-40-inside-1_4200_2642" fill="white">
<path d="M31 26H126V78H31V26Z"/>
</mask>
<path d="M31 26H126V78H31V26Z" fill="#16417D"/>
<path d="M31 26V25H30V26H31ZM31 78H30V79H31V78ZM31 27H126V25H31V27ZM126 77H31V79H126V77ZM32 78V26H30V78H32Z" fill="#00183B" mask="url(#path-40-inside-1_4200_2642)"/>
<rect x="128.5" y="28.5" width="90" height="47" fill="#16417D"/>
<rect x="128.5" y="28.5" width="90" height="47" stroke="#EA10AC" stroke-width="5"/>
<mask id="path-43-inside-2_4200_2642" fill="white">
<path d="M221 26H316V78H221V26Z"/>
</mask>
<path d="M221 26H316V78H221V26Z" fill="#16417D"/>
<path d="M316 26H317V25H316V26ZM316 78V79H317V78H316ZM221 27H316V25H221V27ZM315 26V78H317V26H315ZM316 77H221V79H316V77Z" fill="#00183B" mask="url(#path-43-inside-2_4200_2642)"/>
<mask id="path-45-inside-3_4200_2642" fill="white">
<path d="M31 78H126V130H31V78Z"/>
</mask>
<path d="M31 78H126V130H31V78Z" fill="#16417D"/>
<path d="M31 130H30V131H31V130ZM126 129H31V131H126V129ZM32 130V78H30V130H32Z" fill="#00183B" mask="url(#path-45-inside-3_4200_2642)"/>
<mask id="path-47-inside-4_4200_2642" fill="white">
<path d="M126 78H221V130H126V78Z"/>
</mask>
<path d="M126 78H221V130H126V78Z" fill="#16417D"/>
<path d="M221 130V135H226V130H221ZM126 130H121V135H126V130ZM216 78V130H226V78H216ZM221 125H126V135H221V125ZM131 130V78H121V130H131Z" fill="#EA10AC" mask="url(#path-47-inside-4_4200_2642)"/>
<mask id="path-49-inside-5_4200_2642" fill="white">
<path d="M221 78H316V130H221V78Z"/>
</mask>
<path d="M221 78H316V130H221V78Z" fill="#16417D"/>
<path d="M316 130V131H317V130H316ZM315 78V130H317V78H315ZM316 129H221V131H316V129Z" fill="#00183B" mask="url(#path-49-inside-5_4200_2642)"/>
<mask id="path-51-inside-6_4200_2642" fill="white">
<path d="M31 130H126V182H31V130Z"/>
</mask>
<path d="M31 130H126V182H31V130Z" fill="#16417D"/>
<path d="M31 182H30V183H31V182ZM126 181H31V183H126V181ZM32 182V130H30V182H32Z" fill="#00183B" mask="url(#path-51-inside-6_4200_2642)"/>
<mask id="path-53-inside-7_4200_2642" fill="white">
<path d="M126 130H221V182H126V130Z"/>
</mask>
<path d="M126 130H221V182H126V130Z" fill="#16417D"/>
<path d="M221 182V187H226V182H221ZM126 182H121V187H126V182ZM216 130V182H226V130H216ZM221 177H126V187H221V177ZM131 182V130H121V182H131Z" fill="#EA10AC" mask="url(#path-53-inside-7_4200_2642)"/>
<mask id="path-55-inside-8_4200_2642" fill="white">
<path d="M221 130H316V182H221V130Z"/>
</mask>
<path d="M221 130H316V182H221V130Z" fill="#16417D"/>
<path d="M316 182V183H317V182H316ZM315 130V182H317V130H315ZM316 181H221V183H316V181Z" fill="#00183B" mask="url(#path-55-inside-8_4200_2642)"/>
<rect x="258.5" y="41.5" width="21" height="21" rx="10.5" fill="#16417D"/>
<rect x="258.5" y="41.5" width="21" height="21" rx="10.5" stroke="white"/>
<path d="M261.293 52.7071C260.902 52.3166 260.902 51.6834 261.293 51.2929L267.657 44.9289C268.047 44.5384 268.681 44.5384 269.071 44.9289C269.462 45.3195 269.462 45.9526 269.071 46.3431L263.414 52L269.071 57.6569C269.462 58.0474 269.462 58.6805 269.071 59.0711C268.681 59.4616 268.047 59.4616 267.657 59.0711L261.293 52.7071ZM276 53H262V51H276V53Z" fill="white"/>
<rect x="258.5" y="93.5" width="21" height="21" rx="10.5" fill="#16417D"/>
<rect x="258.5" y="93.5" width="21" height="21" rx="10.5" stroke="white"/>
<path d="M261.293 104.707C260.902 104.317 260.902 103.683 261.293 103.293L267.657 96.9289C268.047 96.5384 268.681 96.5384 269.071 96.9289C269.462 97.3195 269.462 97.9526 269.071 98.3431L263.414 104L269.071 109.657C269.462 110.047 269.462 110.681 269.071 111.071C268.681 111.462 268.047 111.462 267.657 111.071L261.293 104.707ZM276 105H262V103H276V105Z" fill="white"/>
<rect x="258.5" y="145.5" width="21" height="21" rx="10.5" fill="#16417D"/>
<rect x="258.5" y="145.5" width="21" height="21" rx="10.5" stroke="white"/>
<path d="M261.293 156.707C260.902 156.317 260.902 155.683 261.293 155.293L267.657 148.929C268.047 148.538 268.681 148.538 269.071 148.929C269.462 149.319 269.462 149.953 269.071 150.343L263.414 156L269.071 161.657C269.462 162.047 269.462 162.681 269.071 163.071C268.681 163.462 268.047 163.462 267.657 163.071L261.293 156.707ZM276 157H262V155H276V157Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_4200_2642">
<rect width="352" height="209" rx="2" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB

0
public/static/images/canvas/additional_del02.svg Normal file
View File

0
public/static/images/canvas/additional_del03.svg Normal file
View File

0
public/static/images/canvas/additional_del04.svg Normal file
View File

196
src/styles/_canvasside.scss
View File

@ -1,106 +1,106 @@
// 패널 배치 집계
.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;
.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;
}
}
}
}
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;
}
}
}
}
&.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;
}
}
}
// context menu
.context-menu-wrap {
min-width: 238px;
border-radius: 4px;
border: 1px solid #e9e9e9;
background: #fff;
box-shadow: 0px 6px 14px 0px rgba(0, 0, 0, 0.05);
ul {
padding: 17px 0;
border-bottom: 1px solid #e9e9e9;
&:last-child {
border: none;
.context-menu-wrap{
min-width: 238px;
border-radius: 4px;
border: 1px solid #E9E9E9;
background: #FFF;
box-shadow: 0px 6px 14px 0px rgba(0, 0, 0, 0.05);
ul{
padding: 17px 0;
border-bottom: 1px solid #E9E9E9;
&:last-child{
border: none;
}
li{
padding: 4px 30px;
cursor: pointer;
font-size: 12px;
font-weight: 400;
color: #101010;
&:hover{
color: #fff;
background-color: #0D99FF;
}
}
}
li {
padding: 4px 30px;
cursor: pointer;
font-size: 12px;
font-weight: 400;
color: #101010;
&:hover {
color: #fff;
background-color: #0d99ff;
}
}
}
}
}

1874
src/styles/_contents.scss
View File

File diff suppressed because it is too large Load Diff

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

@ -36,6 +36,9 @@
&:nth-child(2n){
background-color: #F7F9FA;
}
&.important_row{
background-color: #e7e7e7;
}
}
.ag-cell{
font-size: 13px;

1277
src/styles/_main.scss
View File

File diff suppressed because it is too large Load Diff

401
src/styles/_modal.scss
View File

File diff suppressed because it is too large Load Diff

1504
src/styles/_reset.scss
View File

File diff suppressed because it is too large Load Diff

343
src/styles/_submodal.scss
View File

@ -1,198 +1,199 @@
.modal-popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
background: rgba(0, 0, 0, 0.75);
z-index: 110000;
.modal-dialog {
position: relative;
display: flex;
align-items: center;
min-height: calc(100% - (1.5rem * 2));
width: 680px;
z-index: 200000;
margin: 1.5rem auto;
pointer-events: none;
&.middle {
width: 800px;
}
&.big {
width: 1000px;
}
.modal-content {
flex: 1;
position: relative;
background-clip: padding-box;
background-color: transparent;
outline: 0 none;
pointer-events: auto;
border-radius: 4px;
.modal-header {
.modal-popup{
position: fixed;
top: 0;
left: 0;
width:100%;
height:100%;
overflow-x: hidden;
overflow-y: auto;
background:rgba(0,0,0,.75);
z-index:110000;
.modal-dialog {
position: relative;
display: flex;
align-items: center;
padding: 10px 24px;
background-color: #7992ba;
border-radius: 4px 4px 0px 0px;
// overflow: hidden;
h1.title {
font-size: 13px;
color: $pop-color;
font-weight: 700;
min-height: calc(100% - (1.5rem * 2));
width: 680px;
z-index:200000;
margin: 1.5rem auto;
pointer-events: none;
&.middle{
width: 800px;
}
.modal-close {
margin-left: auto;
color: transparent;
font-size: 0;
width: 10px;
height: 10px;
background: url(../../public/static/images/canvas/modal_close.svg) no-repeat center;
&.big{
width: 1000px;
}
}
.modal-body {
padding: 30px;
background-color: #fff;
border-radius: 0px 0px 4px 4px;
.modal-body-inner {
margin-bottom: 20px;
&.border {
padding-bottom: 20px;
border-bottom: 1px solid #ecf0f4;
}
.modal-content{
flex:1;
position: relative;
background-clip: padding-box;
background-color: transparent;
outline: 0 none;
pointer-events: auto;
border-radius: 4px;
.modal-header{
display: flex;
align-items: center;
padding: 10px 24px;
background-color: #7992ba;
border-radius: 4px 4px 0px 0px;
// overflow: hidden;
h1.title{
font-size: 13px;
color: $pop-color;
font-weight: 700;
}
.modal-close{
margin-left: auto;
color: transparent;
font-size: 0;
width: 10px;
height: 10px;
background: url(../../public/static/images/canvas/modal_close.svg)no-repeat center;
}
}
.modal-body{
padding: 30px;
background-color: #fff;
border-radius: 0px 0px 4px 4px;
.modal-body-inner{
margin-bottom: 20px;
&.border{
padding-bottom: 20px;
border-bottom: 1px solid #ECF0F4;
}
}
.footer-btn-wrap{
display: flex;
align-items: center;
justify-content: flex-end;
}
}
}
.footer-btn-wrap {
display: flex;
align-items: center;
justify-content: flex-end;
}
}
}
}
}
// modal-contents
// 비밀번호 변경
.change-password-guide {
span {
display: block;
margin-bottom: 5px;
font-size: 13px;
font-weight: 400;
color: #101010;
&:last-child {
margin-bottom: 0;
.change-password-guide{
span{
display: block;
margin-bottom: 5px;
font-size: 13px;
font-weight: 400;
color: #101010;
&:last-child{
margin-bottom: 0;
}
}
}
}
.change-password-box {
padding: 30px;
border-radius: 4px;
background: #f4f4f7;
margin-bottom: 20px;
.change-password-tit {
.tit-b {
font-size: 13px;
font-weight: 500;
color: #344356;
.change-password-box{
padding: 30px;
border-radius: 4px;
background: #F4F4F7;
margin-bottom: 20px;
.change-password-tit{
.tit-b{
font-size: 13px;
font-weight: 500;
color: #344356;
}
.tit-s{
font-size: 12px;
font-weight: 400;
color: #898989;
}
}
.tit-s {
font-size: 12px;
font-weight: 400;
color: #898989;
.change-password-input{
width: 100%;
.change-password{
width: 100%;
height: 45px;
border-radius: 4px;
border: 1px solid #E9E9E9;
background-color: #fff;
padding: 0 10px;
font-size: 12px;
color: #364864;
font-family: 'Noto Sans JP', sans-serif;
&::placeholder{
font-size: 12px;
}
}
}
}
.change-password-input {
width: 100%;
.change-password {
width: 100%;
height: 45px;
border-radius: 4px;
border: 1px solid #e9e9e9;
background-color: #fff;
padding: 0 10px;
font-size: 12px;
color: #364864;
font-family: 'Noto Sans JP', sans-serif;
&::placeholder {
font-size: 12px;
}
.table-item-th{
width: 145px;
}
}
.table-item-th {
width: 145px;
}
}
.form-table {
display: table;
table-layout: auto;
width: 100%;
.table-item {
display: table-row;
.table-item-th,
.table-item-td {
display: table-cell;
vertical-align: middle;
padding-bottom: 10px;
.form-table{
display: table;
table-layout: auto;
width: 100%;
.table-item{
display: table-row;
.table-item-th,
.table-item-td{
display: table-cell;
vertical-align: middle;
padding-bottom: 10px;
}
&:last-child{
.table-item-th,
.table-item-td{
padding-bottom: 0;
}
}
.table-item-td{
padding-left: 10px;
}
}
&:last-child {
.table-item-th,
.table-item-td {
padding-bottom: 0;
}
}
.table-item-td {
padding-left: 10px;
}
}
}
// 주소찾기 팝업
.address-input-wrap {
position: relative;
height: 45px;
padding: 0 40px 0 15px;
border-radius: 4px;
border: 1px solid #e9e9e9;
background: #fff;
margin-bottom: 20px;
input {
width: 100%;
height: 100%;
font-size: 13px;
font-weight: 400;
font-family: 'Noto Sans JP' sans-serif;
color: #868686;
&::placeholder {
color: #aeaeae;
font-size: 13px;
font-weight: 400;
.address-input-wrap{
position: relative;
height: 45px;
padding: 0 40px 0 15px;
border-radius: 4px;
border: 1px solid #E9E9E9;
background: #FFF;
margin-bottom: 20px;
input{
width: 100%;
height: 100%;
font-size: 13px;
font-weight: 400;
font-family: "Noto Sans JP" sans-serif;
color: #868686;
&::placeholder{
color: #AEAEAE;
font-size: 13px;
font-weight: 400;
}
}
.search-btn{
position: absolute;
top: 0;
right: 15px;
width: 21px;
height: 100%;
background: url(../../public/static/images/sub/address_search.svg)no-repeat center;
background-size: 21px 21px;
}
}
.search-btn {
position: absolute;
top: 0;
right: 15px;
width: 21px;
height: 100%;
background: url(../../public/static/images/sub/address_search.svg) no-repeat center;
background-size: 21px 21px;
}
}
// 설계의뢰 불러오기
.design-request-table {
margin-bottom: 20px;
}
.design-request-grid {
.design-request-grid-tit {
font-size: 13px;
font-weight: 600;
color: #101010;
margin-bottom: 15px;
}
.design-request-table{
margin-bottom: 20px;
}
.design-request-grid{
.design-request-grid-tit{
font-size: 13px;
font-weight: 600;
color: #101010;
margin-bottom: 15px;
}
}

547
src/styles/_table.scss
View File

@ -1,281 +1,282 @@
@mixin flexbox() {
display: flex;
align-items: center;
@mixin flexbox(){
display: flex;
align-items: center;
}
table {
.overflow-lab {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.al-l {
text-align: left !important;
}
}
.flx-box {
@include flexbox;
}
.common-table {
table {
table-layout: fixed;
border: 1px solid #ecf0f4;
border-radius: 3px;
border-collapse: collapse;
tbody {
th {
font-size: 13px;
font-weight: 500;
color: #344356;
padding: 14px 12px;
border: 1px solid #ecf0f4;
background-color: #f7f9fa;
vertical-align: middle;
}
td {
padding: 9px;
border: 1px solid #ecf0f4;
font-size: 13px;
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;
}
}
}
}
}
&.bt-able {
margin-bottom: 30px;
}
}
.infomation-table {
table {
border-top: 1px solid #dee3ea;
border-bottom: 1px solid #dee3ea;
border-collapse: collapse;
tbody {
tr {
th {
font-size: 13px;
color: #344356;
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;
.guide {
font-size: 13px;
color: #697c8f;
font-weight: normal;
margin-left: 15px;
margin-bottom: 0;
}
span {
font-size: 13px;
color: #697c8f;
font-weight: normal;
}
}
&:last-child {
th,
td {
border-bottom: none;
}
}
}
}
}
.tooltips {
display: block;
width: 14px;
height: 14px;
display: inline-block;
background: url(../../public/static/images/sub/tooltips.svg) no-repeat center;
background-size: cover;
cursor: pointer;
}
}
.module-table {
table {
table-layout: fixed;
border-collapse: collapse;
thead {
display: table;
table-layout: fixed;
width: 100%;
th {
padding: 13px 0;
font-size: 13px;
color: #344356;
font-weight: 500;
border-bottom: 2px solid #e0e5eb;
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;
color: #45576f;
font-weight: 400;
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;
}
}
&.big {
td,
th {
&:nth-child(2) {
width: 121px;
}
}
tbody {
height: 160px;
td {
padding: 10px 20px;
}
}
}
}
}
.roof-module-table {
table {
border-collapse: collapse;
thead {
th {
height: 40px;
padding: 0px 10px;
font-size: 12px;
line-height: 1.1;
color: #fff;
font-weight: 500;
border: 1px solid #505050;
vertical-align: middle;
background-color: rgba(255, 255, 255, 0.05);
text-align: center;
word-break: keep-all;
.d-check-box {
opacity: 0.5;
}
}
}
tbody {
tr {
cursor: pointer;
&.on {
background-color: #272727;
}
}
td {
height: 40px;
vertical-align: middle;
font-size: 12px;
color: #fff;
font-weight: 400;
border: 1px solid #505050;
padding: 0 10px;
table{
.overflow-lab{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
.warning {
color: PCSオプションマスター;
}
.color-wrap {
display: flex;
align-items: center;
.color-box {
width: 14px;
height: 14px;
margin-right: 8px;
}
.name {
width: 0;
flex: 1;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
}
}
}
&.overflow-y {
table {
table-layout: fixed;
border-collapse: collapse;
thead {
display: table;
table-layout: fixed;
width: 100%;
border-collapse: collapse;
}
tbody {
display: block;
max-height: 81px;
overflow-y: auto;
tr {
display: table;
table-layout: fixed;
width: 100%;
border-collapse: collapse;
margin-top: -1px;
}
&::-webkit-scrollbar {
width: 2px;
background-color: rgba(255, 255, 255, 0.05);
}
&::-webkit-scrollbar-thumb {
background-color: #c1ccd7;
}
&::-webkit-scrollbar-track {
background-color: rgba(255, 255, 255, 0.05);
}
}
.al-l{
text-align: left !important;
}
}
}
.flx-box{
@include flexbox;
}
.common-table{
table{
table-layout: fixed;
border: 1px solid #ECF0F4;
border-radius: 3px;
border-collapse:collapse;
tbody{
th{
font-size: 13px;
font-weight: 500;
color: #344356;
padding: 14px 12px;
border: 1px solid #ECF0F4 ;
background-color: #F7F9FA;
vertical-align: middle;
}
td{
padding: 9px;
border: 1px solid #ECF0F4 ;
font-size: 13px;
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;
}
}
}
}
}
&.bt-able{
margin-bottom: 30px;
}
}
.infomation-table{
table{
border-top: 1px solid #DEE3EA;
border-bottom: 1px solid #DEE3EA;
border-collapse:collapse;
tbody{
tr{
th{
font-size: 13px;
color: #344356;
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;
.guide{
font-size: 13px;
color: #697C8F;
font-weight: normal;
margin-left: 15px;
margin-bottom: 0;
}
span{
font-size: 13px;
color: #697C8F;
font-weight: normal;
}
}
&:last-child{
th,td{border-bottom: none;}
}
}
}
}
.tooltips{
position: relative;
display: block;
width: 14px;
height: 14px;
display: inline-block;
background: url(../../public/static/images/sub/tooltips.svg)no-repeat center;
background-size: cover;
cursor: pointer;
span{
position: absolute;
white-space: nowrap;
}
}
}
.module-table{
table{
table-layout: fixed;
border-collapse: collapse;
thead{
display: table;
table-layout: fixed;
width: 100%;
th{
padding: 13px 0;
font-size: 13px;
color: #344356;
font-weight: 500;
border-bottom: 2px solid #E0E5EB;
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;
color: #45576F;
font-weight: 400;
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;}
}
&.big{
td,
th{
&:nth-child(2){
width: 121px;
}
}
tbody{
height: 160px;
td{
padding: 10px 20px;
}
}
}
}
}
.roof-module-table{
table{
border-collapse: collapse;
thead{
th{
height: 40px;
padding: 0px 10px;
font-size: 12px;
line-height: 1.1;
color: #fff;
font-weight: 500;
border: 1px solid #505050;
vertical-align: middle;
background-color: rgba(255, 255, 255, 0.05);
text-align: center;
word-break: keep-all;
.d-check-box{
opacity: 0.5;
}
}
}
tbody{
tr{
cursor: pointer;
&.on{
background-color: #272727;
}
}
td{
height: 40px;
vertical-align: middle;
font-size: 12px;
color: #fff;
font-weight: 400;
border: 1px solid #505050;
padding: 0 10px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
.warning{
color: PCSオプションマスター;
}
.color-wrap{
display: flex;
align-items: center;
.color-box{
width: 14px;
height: 14px;
margin-right: 8px;
}
.name{
width: 0;
flex: 1;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
}
}
}
&.overflow-y{
table{
table-layout: fixed;
border-collapse: collapse;
thead{
display: table;
table-layout: fixed;
width: 100%;
border-collapse: collapse;
}
tbody{
display: block;
max-height: 81px;
overflow-y: auto;
tr{
display: table;
table-layout: fixed;
width: 100%;
border-collapse: collapse;
margin-top: -1px;
}
&::-webkit-scrollbar {
width: 2px;
background-color: rgba(255, 255, 255, 0.05);
}
&::-webkit-scrollbar-thumb {
background-color: #C1CCD7;
}
&::-webkit-scrollbar-track {
background-color: rgba(255, 255, 255, 0.05);
}
}
}
}
}

2
src/styles/contents.scss
View File

@ -2,4 +2,4 @@
@import '_modal.scss';
@import '_submodal.scss';
@import '_table.scss';
@import '_canvasside.scss';
@import '_canvasside.scss';

3
src/styles/style.scss
View File

@ -1,2 +1 @@
@import '_main.scss';
@import '_contents';
@import '_main.scss';