init
This commit is contained in:
550
src/styles/Components.js
Normal file
550
src/styles/Components.js
Normal file
@@ -0,0 +1,550 @@
|
||||
import styled, { css, keyframes } from 'styled-components';
|
||||
import SelectIcon from '../assets/img/icon/icon-select.png';
|
||||
import CloseUrl from '../assets/img/icon/icon-close.png';
|
||||
import SelectIcon2 from '../assets/img/icon/icon-select2.png';
|
||||
|
||||
import IconCalendar from '../assets/img/icon/icon-date.png';
|
||||
import IconArrow from '../assets/img/icon/icon-arrow.png';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
export const Container = styled.div`
|
||||
background: url(${props => props.$bgimg}) 50% 50%;
|
||||
background-size: cover;
|
||||
min-height: 100vh;
|
||||
height: 100%;
|
||||
padding: ${props => props.$padding || 0};
|
||||
display: ${props => props.type};
|
||||
${props => {
|
||||
if (props.type) {
|
||||
return `
|
||||
align-items:${props.$align || 'flex-start'};
|
||||
justify-content:${props.$justify || 'flex-start'};
|
||||
`;
|
||||
}
|
||||
}}
|
||||
`;
|
||||
|
||||
export const HeaderContainer = styled.div`
|
||||
width: 280px;
|
||||
flex: 0 0 280px;
|
||||
background: #666666;
|
||||
min-height: 100vh;
|
||||
align-self: stretch;
|
||||
`;
|
||||
|
||||
export const ContentContainer = styled.div`
|
||||
min-height: calc(100vh - 58px);
|
||||
width: 100%;
|
||||
padding: 55px 60px;
|
||||
background: #fff;
|
||||
`;
|
||||
|
||||
export const FullContainer = styled.div`
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
max-width: calc(100% - 280px);
|
||||
`;
|
||||
export const TextInput = styled.input`
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 5px;
|
||||
width: ${props => props.width || '100%'};
|
||||
padding: ${props => props.$padding || '5px 15px'};
|
||||
line-height: 18px;
|
||||
font-size: ${props => props.fontSize || '14px'};
|
||||
&::placeholder {
|
||||
color: #b8b8b8;
|
||||
}
|
||||
&:disabled {
|
||||
color: #cccccc;
|
||||
background: #f6f6f6;
|
||||
}
|
||||
&:focus {
|
||||
border: 1px solid #2c2c2c;
|
||||
}
|
||||
`;
|
||||
|
||||
export const SelectInput = styled.select`
|
||||
border: 1px solid #e4e4e4;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
height: 40px;
|
||||
padding: 5px 40px 5px 15px;
|
||||
background: url('${SelectIcon}') no-repeat right 50% #fff;
|
||||
font-size: 14px;
|
||||
width: ${props => props.width || 'auto'};
|
||||
&:disabled {
|
||||
color: ${props => props.color || '#cccccc'};
|
||||
background: url('${SelectIcon}') no-repeat right 50% ${props => props.background_color || '#f6f6f6'};
|
||||
}
|
||||
`;
|
||||
|
||||
export const Textarea = styled.textarea`
|
||||
&:focus {
|
||||
border: 1px solid #2c2c2c;
|
||||
}
|
||||
outline-color: #d9d9d9;
|
||||
padding: 10px;
|
||||
`;
|
||||
|
||||
export const FormBox = styled.div`
|
||||
background: #fff;
|
||||
width: 486px;
|
||||
padding: 75px 45px;
|
||||
text-align: center;
|
||||
border-radius: 30px;
|
||||
color: #8d8d8d;
|
||||
`;
|
||||
|
||||
export const AlertText = styled.div`
|
||||
font-size: 14px;
|
||||
padding-left: 10px;
|
||||
color: #fe565e;
|
||||
`;
|
||||
|
||||
export const AccountTitle = styled.h2`
|
||||
color: #2c2c2c;
|
||||
text-align: center;
|
||||
margin-bottom: 45px;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
`;
|
||||
|
||||
export const FormWrapper = styled.form`
|
||||
display: flex;
|
||||
flex-flow: ${props => props.$flow};
|
||||
gap: 20px;
|
||||
text-align: left;
|
||||
`;
|
||||
|
||||
export const Label = styled.div`
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
${props =>
|
||||
props.require &&
|
||||
css`
|
||||
&:after {
|
||||
content: '*';
|
||||
color: #fe565e;
|
||||
margin-left: 5px;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
export const InputLabel = styled.span`
|
||||
display: inline-block;
|
||||
min-width: fit-content;
|
||||
font-weight: 600;
|
||||
`;
|
||||
|
||||
export const InputItem = styled.div`
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 10px;
|
||||
`;
|
||||
|
||||
export const BtnWrapper = styled.div`
|
||||
width: ${props => props.width};
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-flow: ${props => props.$flow};
|
||||
justify-content: ${props => props.$justify};
|
||||
gap: ${props => props.$gap};
|
||||
margin-top: ${props => props.$marginTop};
|
||||
padding-top: ${props => props.$paddingTop};
|
||||
`;
|
||||
|
||||
export const Title = styled.h2`
|
||||
font-size: 30px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 30px;
|
||||
text-align: ${props => props.$align || 'left'};
|
||||
`;
|
||||
|
||||
// table
|
||||
|
||||
export const TableInfo = styled.div`
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 14px;
|
||||
position: relative;
|
||||
${props =>
|
||||
props.$align &&
|
||||
css`
|
||||
align-items: ${props.$align};
|
||||
`}
|
||||
${SelectInput} {
|
||||
width: 86px;
|
||||
height: 24px;
|
||||
padding: 0 20px 0 10px;
|
||||
color: #686868;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
background: url(${SelectIcon2}) right center no-repeat;
|
||||
}
|
||||
`;
|
||||
|
||||
export const ListTitle = styled.h3`
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
`;
|
||||
|
||||
export const ListCount = styled.div`
|
||||
position: absolute;
|
||||
display: flex;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
color: #686868;
|
||||
gap: 20px;
|
||||
span {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
`;
|
||||
|
||||
export const ListOption = styled.div`
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
button {
|
||||
min-width: max-content;
|
||||
padding: 0 10px;
|
||||
height: 24px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
border-radius: 3px;
|
||||
}
|
||||
`;
|
||||
export const MailTitle = styled.td``;
|
||||
export const TableContent = styled.td``;
|
||||
|
||||
export const TableStyle = styled.table`
|
||||
font-size: 13px;
|
||||
|
||||
position: relative;
|
||||
&:before {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #000;
|
||||
display: block;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
tr:last-child {
|
||||
border-bottom: 1px solid #e8eaec;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
border-top: 1px solid #e8eaec;
|
||||
border-left: 1px solid #e8eaec;
|
||||
letter-spacing: 0;
|
||||
vertical-align: middle;
|
||||
padding: 5px 10px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
th:last-child,
|
||||
td:last-child {
|
||||
border-right: 1px solid #e8eaec;
|
||||
}
|
||||
th {
|
||||
height: 40px;
|
||||
background: #f6f6f6;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
}
|
||||
td {
|
||||
text-align: center;
|
||||
height: 40px;
|
||||
word-break: break-all;
|
||||
font-weight: 400;
|
||||
}
|
||||
button {
|
||||
font-size: 13px;
|
||||
width: 52px;
|
||||
min-width: max-content;
|
||||
padding: 0 10px;
|
||||
height: 24px;
|
||||
}
|
||||
${SelectInput} {
|
||||
height: 24px;
|
||||
width: calc(100% - 30px);
|
||||
padding: 0 30px 0 10px;
|
||||
}
|
||||
tr.table-line {
|
||||
th,
|
||||
td {
|
||||
border-top: 1px solid #999;
|
||||
}
|
||||
}
|
||||
input[type='checkbox'] ~ label {
|
||||
padding-left: 0;
|
||||
&:before {
|
||||
position: relative;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
${MailTitle} {
|
||||
text-align: left;
|
||||
}
|
||||
${TableContent} {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
`;
|
||||
|
||||
export const TableWrapper = styled.div`
|
||||
min-width: 680px;
|
||||
overflow: auto;
|
||||
&::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #666666;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #d9d9d9;
|
||||
}
|
||||
${TableStyle} {
|
||||
width: 100%;
|
||||
min-width: max-content;
|
||||
}
|
||||
`;
|
||||
|
||||
export const State = styled.span`
|
||||
color: ${props => props.color || '#2c2c2c'};
|
||||
`;
|
||||
|
||||
// 지표 탭
|
||||
export const IndexTableWrap = styled.div`
|
||||
width: 100%;
|
||||
min-width: 680px;
|
||||
overflow: auto;
|
||||
&::-webkit-scrollbar {
|
||||
height: 4px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #666666;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #d9d9d9;
|
||||
}
|
||||
${TableStyle} {
|
||||
width: 100%;
|
||||
min-width: max-content;
|
||||
th {
|
||||
&.cell-nru {
|
||||
background: #f0f0f0;
|
||||
border-left: 1px solid #aaa;
|
||||
border-right: 1px solid #aaa;
|
||||
}
|
||||
}
|
||||
td {
|
||||
&.blank {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
&.cell-nru {
|
||||
background: #fafafa;
|
||||
border-left: 1px solid #aaa;
|
||||
border-right: 1px solid #aaa;
|
||||
}
|
||||
&.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*20231205 유저지표 테이블 변경으로 인한 NRU css수정*/
|
||||
tbody {
|
||||
.cell-nru-th td:nth-child(2) {
|
||||
background: #fafafa;
|
||||
border-left: 1px solid #aaa;
|
||||
border-right: 1px solid #aaa;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
//date-picker
|
||||
export const InputGroup = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
`;
|
||||
const InputGroup2 = styled.div`
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 5px;
|
||||
`;
|
||||
|
||||
export const DateGroup = styled.div`
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 5px;
|
||||
`;
|
||||
export const DatePickerWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px 0;
|
||||
align-items: center;
|
||||
.datepicker {
|
||||
width: 160px;
|
||||
border: 1px solid #e0e0e0;
|
||||
padding: 5px 40px 5px 15px;
|
||||
border-radius: 5px;
|
||||
line-height: 18px;
|
||||
font-size: 14px;
|
||||
height: 35px;
|
||||
background: url(${IconCalendar}) center right no-repeat #fff;
|
||||
&::placeholder {
|
||||
color: #b8b8b8;
|
||||
}
|
||||
&:disabled {
|
||||
background: url(${IconCalendar}) center right no-repeat #f6f6f6;
|
||||
color: #cccccc;
|
||||
}
|
||||
}
|
||||
${InputGroup} {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
${SelectInput} {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::after {
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
.calendar {
|
||||
.react-datepicker__header {
|
||||
background: #fff;
|
||||
}
|
||||
.btn-prev,
|
||||
.btn-next {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.btn-prev {
|
||||
background: url(${IconArrow}) 0 50% no-repeat;
|
||||
}
|
||||
.btn-next {
|
||||
background: url(${IconArrow}) -26px 50% no-repeat;
|
||||
}
|
||||
|
||||
.calendar-top {
|
||||
button {
|
||||
margin: 0 10px;
|
||||
}
|
||||
select {
|
||||
font-size: 16px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
.react-datepicker__day-names > div:first-child,
|
||||
.react-datepicker__week > div:first-child {
|
||||
color: #ff0000;
|
||||
}
|
||||
.react-datepicker__day-names > div:last-child,
|
||||
.react-datepicker__week > div:last-child {
|
||||
color: #256bfa;
|
||||
}
|
||||
}
|
||||
span {
|
||||
padding: 0 10px;
|
||||
}
|
||||
`;
|
||||
|
||||
// modal
|
||||
export const ModalText = styled.div`
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
text-align: ${props => props.$align};
|
||||
font-weight: 600;
|
||||
padding: 10px 0 40px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
word-wrap: break-word;
|
||||
max-width: ${props => props.$maxWidth || '500px'};
|
||||
`;
|
||||
|
||||
export const ButtonClose = styled.button`
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: url(${CloseUrl}) 50% 50% no-repeat;
|
||||
`;
|
||||
|
||||
export const SearchBarAlert = styled.div`
|
||||
width: 100%;
|
||||
color: #d60000;
|
||||
margin-top: ${props => props.$marginTop};
|
||||
padding: ${props => props.$padding};
|
||||
text-align: ${props => props.$align};
|
||||
`;
|
||||
|
||||
const loadingAnimation = keyframes`
|
||||
0% {
|
||||
background-position: -200px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: calc(200px + 100%) 0;
|
||||
}
|
||||
`;
|
||||
|
||||
export const Skeleton = styled.div`
|
||||
background: linear-gradient(90deg,
|
||||
#e0e0e0 25%,
|
||||
#f8f8f8 50%,
|
||||
#e0e0e0 75%
|
||||
);
|
||||
background-size: 400% 100%;
|
||||
animation: ${loadingAnimation} 1.5s infinite ease-in-out;
|
||||
border-radius: 4px;
|
||||
width: ${({ width }) => width || '100%'};
|
||||
height: ${({ height }) => height || '20px'};
|
||||
margin-bottom: ${({ spacing }) => spacing || '10px'};
|
||||
`;
|
||||
|
||||
// Skeleton 이미지 영역
|
||||
// export const SkeletonImg = styled.div`
|
||||
// background: linear-gradient(90deg,
|
||||
// #e0e0e0 25%,
|
||||
// #f8f8f8 50%,
|
||||
// #e0e0e0 75%
|
||||
// );
|
||||
// background-size: 400% 100%;
|
||||
// animation: ${loadingAnimation} 1.5s infinite ease-in-out;
|
||||
// border-radius: 50%;
|
||||
// margin-right: 15px;
|
||||
// position: relative;
|
||||
// width: ${({ width }) => width || '150px'};
|
||||
// height: ${({ height }) => height || '150px'};
|
||||
// margin-bottom: ${({ spacing }) => spacing || '10px'};
|
||||
// `;
|
||||
const radialLoadingAnimation = keyframes`
|
||||
0% {
|
||||
background-position: -200px 0%;
|
||||
}
|
||||
100% {
|
||||
background-position: calc(200px + 100%) 0%;
|
||||
}
|
||||
`;
|
||||
export const SkeletonImg = styled.div`
|
||||
background: radial-gradient(circle, #f8f8f8, #e0e0e0, #f8f8f8);
|
||||
background-size: 200% 200%;
|
||||
// animation: ${radialLoadingAnimation} 2s infinite ease-in-out;
|
||||
border-radius: 50%;
|
||||
width: ${({ width }) => width || '100px'};
|
||||
height: ${({ height }) => height || '100px'};
|
||||
`;
|
||||
|
||||
export const DetailMessage = styled(Link)`
|
||||
color: #61a2d0;
|
||||
text-decoration: underline;
|
||||
`;
|
||||
|
||||
export const PopupMessage = styled(Link)`
|
||||
color: #61a2d0;
|
||||
text-decoration: underline;
|
||||
`;
|
||||
140
src/styles/GlobalStyles.js
Normal file
140
src/styles/GlobalStyles.js
Normal file
@@ -0,0 +1,140 @@
|
||||
import { createGlobalStyle } from 'styled-components';
|
||||
import reset from 'styled-reset';
|
||||
|
||||
const GlobalStyles = createGlobalStyle`
|
||||
${reset}
|
||||
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
min-width:1080px;
|
||||
}
|
||||
body {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-text-size-adjust: none;
|
||||
color: #2c2c2c;
|
||||
font-weight: 400;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
}
|
||||
body,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ul,
|
||||
ol,
|
||||
li h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
form,
|
||||
fieldset,
|
||||
legend,
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
button,
|
||||
table,
|
||||
th,
|
||||
td,
|
||||
ul,
|
||||
div,
|
||||
p,
|
||||
pre,
|
||||
blockquote {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote,
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
address,
|
||||
em,
|
||||
i {
|
||||
font-style: normal;
|
||||
}
|
||||
fieldset,
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* form요소 */
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
outline: none;
|
||||
font-family: inherit;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
border-radius: 0;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
vertical-align: middle;
|
||||
}
|
||||
button,
|
||||
select {
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 링크 */
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
a:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 기타 */
|
||||
table {
|
||||
table-layout: fixed;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table caption {
|
||||
overflow: hidden;
|
||||
width: 0;
|
||||
height: 0;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
iframe {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: top;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* placeholder */
|
||||
::-webkit-input-placeholder,
|
||||
:-moz-placeholder,
|
||||
::-moz-placeholder,
|
||||
::placeholder {
|
||||
color: #818181;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
`;
|
||||
|
||||
export default GlobalStyles;
|
||||
789
src/styles/ModuleComponents.js
Normal file
789
src/styles/ModuleComponents.js
Normal file
@@ -0,0 +1,789 @@
|
||||
import { styled } from 'styled-components';
|
||||
import { BtnWrapper, InputLabel, SelectInput, Textarea, TextInput } from './Components';
|
||||
import CloseIcon from '../assets/img/icon/icon-close.png';
|
||||
import IconDelete from '../assets/img/icon/icon-delete.png';
|
||||
import { Link } from 'react-router-dom';
|
||||
import EditIcon from '../assets/img/icon/icon-edit.png';
|
||||
import { STATUS_STYLES } from '../assets/data';
|
||||
import SelectIcon from '../assets/img/icon/icon-select.png';
|
||||
|
||||
export const DetailInputItem = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
${TextInput},${SelectInput} {
|
||||
height: 35px;
|
||||
font-size: 14px;
|
||||
}
|
||||
${TextInput} {
|
||||
padding: 0 15px;
|
||||
}
|
||||
${SelectInput} {
|
||||
width: max-content;
|
||||
}
|
||||
`;
|
||||
|
||||
export const DetailModalWrapper = styled.div`
|
||||
max-height: 70vh;
|
||||
padding-bottom: 5px;
|
||||
overflow: auto;
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #666666;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #d9d9d9;
|
||||
}
|
||||
`;
|
||||
|
||||
export const DetailRegistInfo = styled.div`
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 50px;
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
`;
|
||||
|
||||
export const AreaBtnClose = styled.button`
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: url(${CloseIcon}) 50% 50% no-repeat;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
right: 20px;
|
||||
opacity: ${props => props.opacity};
|
||||
`;
|
||||
|
||||
export const LangArea = styled.div`
|
||||
background: #f9f9f9;
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
export const AppendRegistBox = styled.div`
|
||||
margin-bottom: 20px;
|
||||
border-top: 1px solid #999;
|
||||
border-bottom: 1px solid #999;
|
||||
`;
|
||||
|
||||
export const AppendRegistTable = styled.table`
|
||||
th,
|
||||
td {
|
||||
padding: 15px 0;
|
||||
}
|
||||
td {
|
||||
${TextInput} {
|
||||
max-width: 600px;
|
||||
}
|
||||
${Textarea} {
|
||||
width: 100%;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 5px;
|
||||
height: 150px;
|
||||
padding: 15px;
|
||||
&:focus {
|
||||
border: 1px solid #2c2c2c;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const DetailGroup = styled.div`
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-flow: column;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
border-top: 1px solid #000;
|
||||
border-bottom: 1px solid #000;
|
||||
font-size: 14px;
|
||||
margin-bottom: 40px;
|
||||
`;
|
||||
|
||||
export const DetailInputRow = styled.div`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px 50px;
|
||||
margin-bottom: 10px;
|
||||
`;
|
||||
|
||||
export const RegistInputRow = styled.div`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px 50px;
|
||||
`;
|
||||
|
||||
export const InputGroup = styled.div`
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
export const MailReceiver = styled.div`
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
${DetailInputItem} {
|
||||
align-items: flex-start;
|
||||
}
|
||||
${InputLabel} {
|
||||
line-height: 35px;
|
||||
}
|
||||
${TextInput} {
|
||||
margin-left: 20px;
|
||||
width: 400px;
|
||||
}
|
||||
${InputGroup} {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
`;
|
||||
|
||||
export const DetailState = styled.span`
|
||||
font-weight: 600;
|
||||
color: ${props => {
|
||||
const result = props.result ? props.result.toLowerCase() : '';
|
||||
return result === 'success' || result === 'finish' ? '#08994B' : result === 'fail' || result === 'delete' ? '#ff0000' : '#2c2c2c'}};
|
||||
`;
|
||||
|
||||
export const ItemList = styled.ul`
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 10px 20px;
|
||||
flex-wrap: wrap;
|
||||
`;
|
||||
|
||||
export const Item = styled.li`
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
export const BtnDelete = styled.button`
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: url(${IconDelete}) 50% 50% no-repeat;
|
||||
`;
|
||||
|
||||
// 등록
|
||||
export const RegistInputItem = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
${InputLabel} {
|
||||
line-height: 35px;
|
||||
}
|
||||
${TextInput},${SelectInput} {
|
||||
height: 35px;
|
||||
font-size: 14px;
|
||||
}
|
||||
${TextInput} {
|
||||
padding: 0 20px;
|
||||
}
|
||||
${SelectInput} {
|
||||
width: max-content;
|
||||
}
|
||||
`;
|
||||
|
||||
export const RegistNotice = styled.span`
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
color: ${props => props.$color || '#999'};
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
`;
|
||||
|
||||
export const RegistGroup = styled.div`
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-flow: column;
|
||||
padding: 20px;
|
||||
border-top: 1px solid #000;
|
||||
border-bottom: 1px solid #000;
|
||||
font-size: 14px;
|
||||
margin-bottom: 40px;
|
||||
|
||||
${RegistNotice} {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
|
||||
export const RegistTable = styled.table`
|
||||
th {
|
||||
vertical-align: top;
|
||||
line-height: 35px;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid #f6f6f6;
|
||||
}
|
||||
td {
|
||||
${RegistInputItem} {
|
||||
gap: 5px;
|
||||
}
|
||||
${TextInput} {
|
||||
max-width: 600px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
${Textarea} {
|
||||
width: 100%;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 5px;
|
||||
height: 255px;
|
||||
padding: 15px;
|
||||
&:focus {
|
||||
border: 1px solid #2c2c2c;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const SubText = styled.div`
|
||||
width: 100%;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
`;
|
||||
|
||||
export const ModalSubText = styled.div`
|
||||
width: 100%;
|
||||
color: ${props => props.$color || '#999'};
|
||||
font-size: 11px;
|
||||
text-align: left;
|
||||
`;
|
||||
|
||||
export const ModalInputItem = styled.div`
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 5px;
|
||||
`;
|
||||
|
||||
export const ModalItem = styled.div`
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 5px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
export const ModalItemList = styled.ul`
|
||||
display: flex;
|
||||
padding: 10px 20px;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
export const UserDefaultTable = styled.table`
|
||||
border: 1px solid #e8eaec;
|
||||
border-top: 1px solid #000;
|
||||
font-size: 14px;
|
||||
margin-bottom: 40px;
|
||||
th {
|
||||
background: #efefef;
|
||||
font-weight: 700;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
border-left: 1px solid #e8eaec;
|
||||
vertical-align: middle;
|
||||
}
|
||||
td {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #e8eaec;
|
||||
word-break: break-all;
|
||||
}
|
||||
button {
|
||||
height: 24px;
|
||||
font-size: 13px;
|
||||
}
|
||||
`;
|
||||
|
||||
export const SelectWrapper = styled.div`
|
||||
select {
|
||||
height: 30px;
|
||||
}
|
||||
margin-bottom: 10px;
|
||||
`;
|
||||
|
||||
export const RequestTab = styled(Link)`
|
||||
padding: 0 8px;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
color: ${props => (props.$state === 'active' ? '#2c2c2c' : '#999')};
|
||||
&:hover {
|
||||
color: #2c2c2c;
|
||||
}
|
||||
`;
|
||||
|
||||
export const RequestTabWrapper = styled.div`
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-left: 20px;
|
||||
${RequestTab} {
|
||||
&:first-child:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 1px;
|
||||
height: 80%;
|
||||
position: absolute;
|
||||
background: #666;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const QuestTable = styled(UserDefaultTable)`
|
||||
tbody {
|
||||
td {
|
||||
padding: 9px 12px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const UserTableWrapper = styled.div`
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
margin-bottom: 40px;
|
||||
${UserDefaultTable}, ${QuestTable} {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
height: 4px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #666666;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #d9d9d9;
|
||||
}
|
||||
`;
|
||||
|
||||
export const UserDefault = styled.div`
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 30px;
|
||||
`;
|
||||
export const ProfileWrapper = styled.div`
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 75px;
|
||||
overflow: hidden;
|
||||
display: inline-flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
export const EditButton = styled.button`
|
||||
width: 20px;
|
||||
height: 22px;
|
||||
background: url(${EditIcon}) 50% 50% no-repeat;
|
||||
margin-left: 5px;
|
||||
`;
|
||||
|
||||
export const UserInfoTable = styled.table`
|
||||
width: 100%;
|
||||
max-width: ${props => props.$maxwidth || 'auto'};
|
||||
font-size: 13px;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
tr:first-child {
|
||||
th,
|
||||
td {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
th,
|
||||
td {
|
||||
height: 36px;
|
||||
vertical-align: middle;
|
||||
border-top: 1px solid #d9d9d9;
|
||||
}
|
||||
th {
|
||||
width: 120px;
|
||||
background: #888;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
td {
|
||||
background: #fff;
|
||||
padding: 0 20px;
|
||||
}
|
||||
`;
|
||||
export const UserTabInfo = styled.div`
|
||||
padding: 50px;
|
||||
|
||||
overflow: auto;
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #666666;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #d9d9d9;
|
||||
}
|
||||
`;
|
||||
|
||||
export const InfoSubTitle = styled.div`
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
margin-top: ${({ top }) => (top ? top : '0px')};
|
||||
`;
|
||||
|
||||
export const NoticeInputItem = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center; /* 수평 중앙 정렬 */
|
||||
gap: 10px;
|
||||
${TextInput},${SelectInput} {
|
||||
height: 35px;
|
||||
font-size: 14px;
|
||||
width: 100px;
|
||||
}
|
||||
${TextInput} {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
${SelectInput} {
|
||||
width: max-content;
|
||||
}
|
||||
`;
|
||||
|
||||
export const MessageWrapper = styled.div`
|
||||
max-height: 70vh;
|
||||
overflow: auto;
|
||||
padding-bottom: 10px;
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #666666;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #d9d9d9;
|
||||
}
|
||||
`;
|
||||
|
||||
export const NoticeRegistGroup = styled.div`
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-flow: column;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
border-top: 1px solid #000;
|
||||
border-bottom: 1px solid #000;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
`;
|
||||
|
||||
export const NoticeInputRow = styled.div`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px 40px;
|
||||
`;
|
||||
|
||||
export const NoticeInputRow2 = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
export const NoticeInputGroup = styled.div`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
export const RepeatTime = styled(NoticeInputGroup)`
|
||||
width: 320px;
|
||||
`;
|
||||
export const InputGroup2 = styled.div`
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 5px;
|
||||
`;
|
||||
|
||||
export const NoticeInputItem2 = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
`;
|
||||
|
||||
export const SubTextRow = styled.div`
|
||||
margin-top: 5px;
|
||||
color: red;
|
||||
font-size: 12px;
|
||||
`;
|
||||
|
||||
export const BoxWrapper = styled.div`
|
||||
margin-top: 5px;
|
||||
margin-bottom: 20px;
|
||||
`;
|
||||
|
||||
export const TitleLang = styled.div`
|
||||
font-size: 14px;
|
||||
line-height: 17px;
|
||||
padding-left: 5px;
|
||||
font-weight: 600;
|
||||
`;
|
||||
|
||||
export const MessageBox = styled.div`
|
||||
background: #f9f9f9;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
|
||||
${Textarea} {
|
||||
border-radius: 3px;
|
||||
border: 1px solid #d9d9d9;
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
${BtnWrapper} {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
`;
|
||||
|
||||
// FORM
|
||||
|
||||
export const FormGroup = styled.div`
|
||||
margin-bottom: 24px;
|
||||
`;
|
||||
|
||||
export const FormRowGroup = styled.div`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px 40px;
|
||||
margin-bottom: 24px;
|
||||
`;
|
||||
|
||||
export const FormLabel = styled.label`
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
margin-bottom: 8px;
|
||||
min-width: fit-content;
|
||||
font-weight: 700;
|
||||
line-height: 25px;
|
||||
`;
|
||||
|
||||
export const FormInput = styled.input`
|
||||
width: ${props => props.width || '100%'};
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e2e8f0;
|
||||
font-size: 14px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #ef4444;
|
||||
}
|
||||
&:disabled {
|
||||
color: ${props => props.color || '#cccccc'};
|
||||
background: ${props => props.background_color || '#f6f6f6'};
|
||||
}
|
||||
`;
|
||||
|
||||
export const FormRowInput = styled.input`
|
||||
padding: 10px 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e2e8f0;
|
||||
font-size: 14px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #ef4444;
|
||||
}
|
||||
`;
|
||||
|
||||
export const FormTextArea = styled.textarea`
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e2e8f0;
|
||||
min-height: 120px;
|
||||
font-size: 14px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #ef4444;
|
||||
}
|
||||
&:disabled {
|
||||
color: ${props => props.color || '#cccccc'};
|
||||
background: ${props => props.background_color || '#f6f6f6'};
|
||||
}
|
||||
`;
|
||||
|
||||
export const FormHelperText = styled.div`
|
||||
color: red;
|
||||
position: relative;
|
||||
margin-top: 8px;
|
||||
text-align: right;
|
||||
font-size: 14px;
|
||||
`;
|
||||
|
||||
export const FormButtonContainer = styled.div`
|
||||
display: flex;
|
||||
gap: ${props => props.$gap};
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
`
|
||||
|
||||
export const FormStatusBar = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
`
|
||||
|
||||
export const FormStatusLabel = styled.div`
|
||||
color: #374151;
|
||||
font-weight: 500;
|
||||
font-size: 1.15rem;
|
||||
`;
|
||||
|
||||
export const FormStatusWarning = styled.div`
|
||||
font-size: 0.695rem;
|
||||
color: #dc2626;
|
||||
`
|
||||
|
||||
export const FormCharacterLimit = styled.div`
|
||||
margin-top: 32px;
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
export const FormTextAreaWrapper = styled.div`
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
export const TitleItem = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin-left: 10px;
|
||||
`;
|
||||
|
||||
export const TitleItemLabel = styled.div`
|
||||
color: ${props => props.color || 'black'};
|
||||
`;
|
||||
|
||||
export const TitleItemValue = styled.div`
|
||||
font-weight: ${props => props.fontWeight || 500};
|
||||
color: ${props => props.color || 'black'};
|
||||
`;
|
||||
|
||||
export const ChargeBtn = styled.button`
|
||||
&&{
|
||||
width: 60px;
|
||||
height: 32px;
|
||||
padding: 0.375rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.895rem;
|
||||
background-color: #D9D9D9;
|
||||
color: #495057;
|
||||
border: 1px solid #dee2e6;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const StatusLabel = styled.div`
|
||||
width: 70px;
|
||||
height: 32px;
|
||||
padding: 0.375rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.895rem;
|
||||
background-color: ${props => STATUS_STYLES[props.$status]?.background || 'white'};
|
||||
color: ${props => STATUS_STYLES[props.$status]?.color || 'black'};;
|
||||
`;
|
||||
|
||||
export const StatusWapper = styled.td`
|
||||
display: flex;
|
||||
gap: 0.35rem;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
export const ExcelDownButton = styled.button`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
&:hover {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
`;
|
||||
|
||||
//datepicker
|
||||
export const DateTimeGroup = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
`;
|
||||
|
||||
export const TimeGroup = styled.div`
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
`;
|
||||
|
||||
export const DateTimeWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
margin: 0 10px;
|
||||
flex-wrap: wrap;
|
||||
`;
|
||||
|
||||
export const DateContainer = styled.div`
|
||||
min-width: 100px;
|
||||
`;
|
||||
|
||||
export const TimeContainer = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
`;
|
||||
|
||||
export const StyledSelectInput = styled(SelectInput)`
|
||||
width: 65px;
|
||||
padding: 5px 25px 5px 8px;
|
||||
`;
|
||||
|
||||
export const TimeSeparator = styled.span`
|
||||
color: #94a3b8;
|
||||
margin: 0 2px;
|
||||
`;
|
||||
133
src/styles/reset.css
Normal file
133
src/styles/reset.css
Normal file
@@ -0,0 +1,133 @@
|
||||
@charset "utf-8";
|
||||
|
||||
/* 기본 */
|
||||
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
body {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-text-size-adjust: none;
|
||||
color: #2c2c2c;
|
||||
font-weight: 400;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
}
|
||||
body,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ul,
|
||||
ol,
|
||||
li h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
form,
|
||||
fieldset,
|
||||
legend,
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
button,
|
||||
table,
|
||||
th,
|
||||
td,
|
||||
ul,
|
||||
div,
|
||||
p,
|
||||
pre,
|
||||
blockquote {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote,
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
address,
|
||||
em,
|
||||
i {
|
||||
font-style: normal;
|
||||
}
|
||||
fieldset,
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* form요소 */
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
outline: none;
|
||||
font-family: inherit;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
border-radius: 0;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
vertical-align: middle;
|
||||
}
|
||||
button,
|
||||
select {
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 링크 */
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
a:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 기타 */
|
||||
table {
|
||||
table-layout: fixed;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table caption {
|
||||
overflow: hidden;
|
||||
width: 0;
|
||||
height: 0;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
iframe {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: top;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* placeholder */
|
||||
::-webkit-input-placeholder,
|
||||
:-moz-placeholder,
|
||||
::-moz-placeholder,
|
||||
::placeholder {
|
||||
color: #818181;
|
||||
font-weight: 300;
|
||||
}
|
||||
1
src/styles/style.js
Normal file
1
src/styles/style.js
Normal file
@@ -0,0 +1 @@
|
||||
// 공통 및 개별 css를 관리하는 폴더입니다. 이 파일은 삭제하셔도 됩니다.
|
||||
Reference in New Issue
Block a user