91 lines
5.5 KiB
CSS
91 lines
5.5 KiB
CSS
/* 버튼 */
|
|
/* -> 버튼은 readonly 없음 */
|
|
/* -> disabled는 스타일만 만들고 사용X(웹접근성 인증 시 안됨. 클래스로 대체) */
|
|
|
|
/* 버튼 레이아웃 */
|
|
.btn_wrap{display:flex;justify-content:space-between;gap:8px;}
|
|
.btn_wrap.column{flex-direction:column;gap:4px;}
|
|
|
|
.btn_wrap>div{display:flex;width:calc(100%/3);gap:8px}
|
|
.btn_wrap.left, .btn_wrap .left{justify-content:flex-start;}
|
|
.btn_wrap.center,.btn_wrap .center{justify-content:center;}
|
|
.btn_wrap.right,.btn_wrap .right{justify-content:flex-end;}
|
|
|
|
|
|
/* 버튼 스타일 */
|
|
.btn{border-radius:5px;box-sizing:border-box;}
|
|
.btn:hover{box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.08);transition: all 0.3s ease;}
|
|
|
|
.btn.only_text{padding:0 !important;}
|
|
.btn.only_icon{padding:0 !important;}
|
|
.btn.mix{display:flex;align-items:center;}
|
|
.btn.mix .icon{height:100%;background-size:contain;}
|
|
|
|
.btn.xssmall{height:28px;font-size:14px;padding:0 4px;}
|
|
.btn.ssmall{height:30px;font-size:14px;padding:0 6px;}
|
|
.btn.small{height:32px;font-size:16px;padding:0 6px;}
|
|
.btn.medium{height:34px;font-size:16px;padding:0 8px;}
|
|
.btn.large{height:38px;font-size:18px;padding:0 12px;font-weight:600;}
|
|
.btn.xlarge{height:50px;font-size:18px;padding:0 24px;font-weight:600;}
|
|
|
|
.btn.fill.primary{background-color: var(--primary-color);color: #fff;}
|
|
.btn.fill.primary:hover{background-color: var(--primary-color-hover);color: #fff;}
|
|
.btn.fill.primary_light{background-color: var(--primary-light-color);border: 1px solid var(--primary-light-border);color:var(--primary-color);}
|
|
.btn.fill.primary_light:hover{background-color: var(--primary-light-color-hover);}
|
|
.btn.fill.secondary{background-color: var(--secondary-color);color: #fff;}
|
|
.btn.fill.secondary:hover{background-color: var(--secondary-color-hover);}
|
|
.btn.fill.accent{background-color: var(--accent-color);color: #fff;}
|
|
.btn.fill.accent:hover{background-color: var(--accent-color-hover);}
|
|
.btn.fill.accent_light{background-color: var(--accent-light-color);color: var(--accent-dark-color);}
|
|
.btn.fill.accent_light:hover{background-color: var(--accent-light-color-hover);}
|
|
.btn.fill.red{background-color: var(--red-color);color: #fff;}
|
|
.btn.fill.red:hover{background-color: var(--red-color-hover);}
|
|
.btn.fill.green{background-color: var(--green-color);color: #fff;}
|
|
.btn.fill.green:hover{background-color: var(--green-color-hover);}
|
|
.btn.fill.gray{background-color: var(--gray-color);color: #fff;}
|
|
.btn.fill.gray:hover{background-color: var(--gray-color-hover);}
|
|
.btn.fill.lightgray{background-color: var(--lightgray-color);color: #5b606c;}
|
|
.btn.fill.lightgray:hover{background-color: var(--lightgray-color-hover);}
|
|
|
|
.btn.line.primary{border: 1px solid var(--primary-color);color: var(--primary-color);}
|
|
.btn.line.primary:hover{border: 1px solid var(--primary-color-hover);color: var(--primary-color-hover);}
|
|
.btn.line.secondary{border: 1px solid var(--secondary-color);color:var(--secondary-color);}
|
|
.btn.line.secondary:hover{background:var(--secondary-light-color);border: 1px solid var(--secondary-color-hover);}
|
|
.btn.line.accent{border: 1px solid var(--accent-color);color: var(--accent-color);}
|
|
.btn.line.accent:hover{border: 1px solid var(--accent-color-hover);}
|
|
.btn.line.red{border: 1px solid var(--red-color);color: var(--red-color);}
|
|
.btn.line.red:hover{background:var(--red-light-color);color: var(--red-color-hover);}
|
|
.btn.line.green{border: 1px solid var(--green-color);color: var(--green-color);}
|
|
.btn.line.green:hover{background-color: var(--green-color-hover);}
|
|
.btn.line.gray{border: 1px solid var(--gray-color);color: var(--gray-color);}
|
|
.btn.line.gray:hover{background-color: var(--disable-line-bg-color);}
|
|
.btn.line.lightgray{border: 1px solid var(--lightgray-color);color: #5B606C;}
|
|
.btn.line.lightgray:hover{background-color: var(--disable-line-bg-color);}
|
|
|
|
|
|
.btn.fill.disabled,.btn.fill.readonly,.btn.fill:disabled{background:var(--disable-fill-bg-color) !important; color:var(--disable-fill-text-color) !important; pointer-events:none;}
|
|
.btn.line.disabled,.btn.line.readonly,.btn.line:disabled{background:var(--disable-line-bg-color) !important;border:1px solid var(--disable-line-border-color);color:var(--disable-line-text-color) !important;pointer-events:none;}
|
|
|
|
.btn_delete i.icon.delete{background-size:auto;margin:0;}
|
|
.btn.excel{background:#fff;border:1px solid #0e8945;color:#0e8945;}
|
|
.btn.excel i{width:32px;}
|
|
.btn.excel i.download,.btn.excel i.upload{margin:2px 0 0 0;}
|
|
|
|
.sortBtn{font-size:11px;margin:0 0 0 4px;}
|
|
|
|
|
|
/* 페이지 */
|
|
.page{display:flex;gap:6px;margin:30px auto 0 auto;justify-content:center;align-items:center;}
|
|
.page a{display:flex;width:36px;height:36px;border:1px solid transparent;border-radius:5px;font-size:16px;color:#878B96;justify-content:center;align-items:center;transition:all .3s;}
|
|
.page a:hover{background:#F5F6F7;color:#3a3c41;}
|
|
.page .active{border:1px solid #E2E7EF;background:#e2e7ef;font-weight:600;color:#3a3c41;}
|
|
.page .btn_page{border:1px solid #d2d7df;border-radius:5px;overflow:hidden;}
|
|
.page .btn_page:hover{background-color:#F5F6F7;}
|
|
.page .btn_page i{display:inline-block;width:100%;height:100%;transition:all .3s;}
|
|
.btn_first i{background:url(/publish/adm/images/component/icon_double_arrow_left_page.png) no-repeat center;}
|
|
.btn_prev i{background:url(/publish/adm/images/component/icon_arrow_left_page.png) no-repeat center;}
|
|
.btn_next i{background:url(/publish/adm/images/component/icon_arrow_right_page.png) no-repeat center;}
|
|
.btn_last i{background:url(/publish/adm/images/component/icon_double_arrow_right_page.png) no-repeat center;}
|
|
|
|
|