Code - jhpark/cms

.btn { //default : primary color height lg $size: lg; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-width: 100px; width: auto; height: var(--#{$prefix}btn-h-#{$size}); padding: 0 var(--#{$prefix}btn-px-#{$size}); background-color: var(--#{$prefix}primary); border: 1px solid var(--#{$prefix}primary); border-radius: var(--#{$prefix}btn-rd-#{$size}); font-size: var(--#{$prefix}fz-body-#{$size}); color: var(--#{$prefix}white); font-weight: map-get($fws, normal); line-height: 1; cursor: pointer; white-space: nowrap; transition: $transition-base; &:hover { background-color: var(--#{$prefix}primary-60); border-color: var(--#{$prefix}primary-60); } &:active { background-color: var(--#{$prefix}primary-70); border-color: var(--#{$prefix}primary-70); } &:focus { @include focus($color: $white, $alpha: 0.9); transition: none; } &[disabled] { background-color: var(--#{$prefix}gray-30); border-color: var(--#{$prefix}gray-30); color: var(--#{$prefix}gray-60); cursor: default; } //color &.primary { background-color: var(--#{$prefix}primary); border: 1px solid var(--#{$prefix}primary); color: var(--#{$prefix}white); &:hover { background-color: var(--#{$prefix}primary-60); border-color: var(--#{$prefix}primary-60); } &:active { background-color: var(--#{$prefix}primary-70); border-color: var(--#{$prefix}primary-70); } &[disabled] { background-color: var(--#{$prefix}gray-30); border-color: var(--#{$prefix}gray-30); color: var(--#{$prefix}gray-60); } } &.secondary { background-color: var(--#{$prefix}primary-5); border: 1px solid var(--#{$prefix}primary); color: $primary-60; &:hover { background-color: var(--#{$prefix}primary-10); } &:active { background-color: var(--#{$prefix}primary-20); } &:focus { @include focus($color: $primary); } &[disabled] { background-color: var(--#{$prefix}gray-30); border-color: var(--#{$prefix}gray-40); color: var(--#{$prefix}gray-60); } &.ico-arr-down { &::after { background-image: url(#{$url}/component/common/ico_arr_20_down_blue.svg); background-size: contain; background-position: center; } } &.active { &.ico-arr-down { &::after { transform: rotate(180deg); } } } } &.tertiary { background-color: var(--#{$prefix}white); border: 1px solid var(--#{$prefix}gray-90); color: var(--#{$prefix}secondary-90); &:hover { background-color: var(--#{$prefix}gray-5); } &:active { background-color: var(--#{$prefix}gray-10); } &:focus { @include focus($color: $primary); } &[disabled] { background-color: var(--#{$prefix}gray-30); border-color: var(--#{$prefix}gray-40); color: var(--#{$prefix}gray-60); } } &.red { background-color: var(--#{$prefix}point); border: 1px solid var(--#{$prefix}point); color: var(--#{$prefix}white); &:hover { background-color: var(--#{$prefix}point-60); border-color: var(--#{$prefix}point-60); } &:active { background-color: var(--#{$prefix}point-70); border-color: var(--#{$prefix}point-70); } &[disabled] { background-color: var(--#{$prefix}gray-30); border-color: var(--#{$prefix}gray-30); color: var(--#{$prefix}gray-60); } } //txt + ico &[class*='ico-'] { &::after { display: inline-flex; content: ''; width: 2.4rem; height: 2.4rem; background-repeat: no-repeat; background-size: contain; } &.ico-before { &::before { display: inline-flex; content: ''; width: 2.4rem; height: 2.4rem; background-repeat: no-repeat; background-size: contain; background-position: center; } &::after { display: none; } } } &.ico-sch { &::before, &::after { background-image: url(#{$url}/component/common/ico_sch_20_wh.svg); } } &.ico-arr { &::before, &::after { background-image: url(#{$url}/component/common/ico_arr_20_right.svg); } } &.ico-upload { &::before, &::after { background-image: url(#{$url}/component/common/ico_upload_20_wh.svg); } } &.ico-view { &::before, &::after { background-image: url(#{$url}/component/common/ico_pw_visible_on.svg); } } &.xsm { &[class*='ico-'] { &::after { width: 1.6rem; height: 1.6rem; } } } &.sm &[class*='ico-'] { &::after { width: 2rem; height: 2rem; } } } /* **** button : only icon **** */ .btn-ico { @include btn-reset; padding: 0 !important; &:focus { @include focus($offset: 0.4rem); } &[class*='ico-'] { width: 4rem; height: 4rem; background-repeat: no-repeat; background-size: contain; background-position: center; &::after { display: none; } &.md { width: 2.4rem; height: 2.4rem; } &.sm { width: 2rem; height: 2rem; } &.sm-m { width: 2.4rem; height: 2.4rem; } &.sm-l { width: 3.2rem; height: 3.2rem; } &.xsm { width: 1.6rem; height: 1.6rem; } } &.ico-sch { background-image: url(#{$url}/component/common/ico_sch_40.svg); } &.ico-info { background-image: url(#{$url}/component/common/ico_info.svg); &.sm { background-position: center; background-size: 1.6rem; } } &.ico-refresh { border-radius: 10rem; border: 0.1rem solid var(--#{$prefix}gray-40); background-color: var(--#{$prefix}white); background-image: url(#{$url}/component/common/ico_refresh_16.svg); background-size: 1.6rem; } &.ico-toggle-r { border-radius: 10rem; border: 0.1rem solid var(--#{$prefix}gray-40); background-color: var(--#{$prefix}white); background-image: url(#{$url}/component/common/ico_arr_16_down.svg); background-size: 1.6rem; } &.ico-pw-visible { background-image: url(#{$url}/component/common/ico_pw_visible.svg); } &.ico-help { background-image: url(#{$url}/component/common/ico_help_24.svg); } &.ico-logout { background-image: url(#{$url}/component/common/ico_logout_16.svg); } &.ico-go { background-image: url(#{$url}/component/common/ico_go_20.svg); } &.ico-view { background-image: url(#{$url}/component/common/ico_pw_visible_on.svg); } &.ico-reset { background-image: url(#{$url}/component/common/ico_refresh_16.svg); } &.ico-del { background-image: url(#{$url}/component/common/ico_trashcan.svg); } &.ico-page-prev { border-radius: 10rem; border: 0.1rem solid var(--#{$prefix}gray-40); background-color: var(--#{$prefix}white); background-image: url(#{$url}/component/common/ico_swiper_prev.svg); background-size: 2.4rem; &.disabled { background-color: var(--#{$prefix}secondary-5); } } &.ico-page-next { border-radius: 10rem; border: 0.1rem solid var(--#{$prefix}gray-40); background-color: var(--#{$prefix}white); background-image: url(#{$url}/component/common/ico_swiper_next.svg); background-size: 2.4rem; &.disabled { background-color: var(--#{$prefix}secondary-5); } } } /* **** button : text button **** */ .btn-txt { @include btn-reset; padding: 0 var(--#{$prefix}spacer-default2) !important; &:hover { background-color: var(--#{$prefix}secondary-5); } &:active { background-color: var(--#{$prefix}secondary-10); } &:focus { @include focus($offset: 0.4rem); } &[disabled] { color: var(--#{$prefix}gray-50); } &[class*='ico-'] { &::after { background-repeat: no-repeat; background-size: contain; background-position: center; } &.ico-before { &::before { display: inline-flex; content: ''; background-repeat: no-repeat; background-size: contain; background-position: center; } &::after { display: none; } } &.ico-call { &::before { background-image: url(#{$url}/component/common/ico_call.svg); } &::after { background-image: url(#{$url}/component/common/ico_call.svg); } } &.ico-faq { &::before { background-image: url(#{$url}/component/common/ico_faq.svg); } &::after { background-image: url(#{$url}/component/common/ico_faq.svg); } } } &.underline { text-decoration: underline; } &.link { //링크이면서 텍스트사이에 있는경우 높이값 초기화 height: auto; text-decoration: underline !important; } &.ico-like { &::before, &::after { background-image: url(#{$url}/component/common/ico_like_20.svg); } } &.ico-share { &::before, &::after { background-image: url(#{$url}/component/common/ico_share_20.svg); } } &.ico-arr { &::after { background-image: url(#{$url}/component/common/ico_arr_20_right.svg); } } &.ico-arr-down { &::after { background-image: url(#{$url}/component/common/ico_arr_16_down.svg); } } &.ico-more { &::after { background-image: url(#{$url}/component/common/ico_arr1_20_right.svg); } } &.ico-sch { &::before, &::after { background-image: url(#{$url}/component/common/ico_sch_40.svg); } } &.ico-sch1 { &::before, &::after { background-image: url(#{$url}/component/common/ico_sch1_20.svg); } } &.ico-go { &::before, &::after { background-image: url(#{$url}/component/common/ico_go_20.svg); } } &.ico-down { &::before, &::after { background-image: url(#{$url}/component/common/ico_file_20.svg); } } &.ico-filter { position: relative; &::before, &::after { background-image: url(#{$url}/component/common/ico_filter_20.svg); } .num { display: inline-flex; position: absolute; right: 0.1rem; z-index: 1; height: 2rem; font-size: var(--#{$prefix}fz-label-sm); color: var(--#{$prefix}white); padding: 0 var(--#{$prefix}spacer-2); margin-top: -3rem; border-radius: 2rem; background-color: var(--#{$prefix}primary); } } &.ico-reset { &::before, &::after { background-image: url(#{$url}/component/common/ico_refresh_16.svg); } } &.ico-log { &::before, &::after { background-image: url(#{$url}/component/common/ico_login_20.svg); } } &.ico-func { gap: var(--#{$prefix}spacer-2); &::before, &::after { background-image: url(#{$url}/component/common/ico_arr_func_20.svg); } } &.ico-logout { gap: var(--#{$prefix}spacer-2); &::before, &::after { background-image: url(#{$url}/component/common/ico_logout_16.svg); } } &.ico-email { gap: var(--#{$prefix}spacer-2); &::before, &::after { background-image: url(#{$url}/component/common/ico_email_20.svg); } } &.ico-print { gap: var(--#{$prefix}spacer-2); &::before, &::after { background-image: url(#{$url}/component/common/ico_print_20.svg); } } &.ico-scrap { gap: var(--#{$prefix}spacer-2); &::before, &::after { background-image: url(#{$url}/component/common/ico_scrap_20.svg); } } &.ico-del { gap: var(--#{$prefix}spacer-2); &::before, &::after { background-image: url(#{$url}/component/common/ico_del1_20.svg); } } &.ico-plus { gap: var(--#{$prefix}spacer-2); &::before, &::after { background-image: url(#{$url}/component/common/ico_plus_24.svg); } } &.ico-setting { gap: var(--#{$prefix}spacer-2); &::before, &::after { background-image: url(#{$url}/component/common/ico_setting_20.svg); } } &.ico-link { gap: var(--#{$prefix}spacer-2); &::before, &::after { background-image: url(#{$url}/component/common/ico_link_16.svg); } } &.ico-comment { gap: var(--#{$prefix}spacer-2); &::before, &::after { background-image: url(#{$url}/component/common/ico_comment_16.svg); } } &.ico-prev { gap: var(--#{$prefix}spacer-2); &::before, &::after { background-image: url(#{$url}/component/common/ico-prev_24.svg); } } &.sm { &[class*='ico-'] { &::before, &::after { width: 2rem; height: 2rem; } } } &.xsm { &[class*='ico-'] { gap: var(--#{$prefix}spacer-default2); &::before, &::after { width: 1.6rem; height: 1.6rem; } } } &.h-auto { height: auto; padding: var(--#{$prefix}spacer-default2) !important; } } //텍스트 사이에 링크만 삽입되는 경우 .link-txt { text-decoration: underline; } /* **** button : chips **** */ // 배경색이 있는 타입 .btn-chip-fill { display: inline-flex; align-items: center; justify-content: center; background-color: var(--#{$prefix}gray-10); &:hover { background-color: var(--#{$prefix}secondary-5); } &:active { background-color: var(--#{$prefix}secondary-10); } &[disabled], &.disabled { background-color: var(--#{$prefix}gray-30); } } //외곽 라인이 있는 타입 .btn-chip-outline { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; gap: 0.2rem; background-color: var(--#{$prefix}white); border: 0.1rem solid var(--#{$prefix}gray-40); &:hover { background-color: var(--#{$prefix}secondary-5); } &:active { background-color: var(--#{$prefix}secondary-10); } &:disabled, &.disabled { background-color: var(--#{$prefix}gray-30); } &.primary{ background-color: var(--#{$prefix}white); color: var(--#{$prefix}primary); border: 0.1rem solid var(--#{$prefix}primary); &:hover { background-color: var(--#{$prefix}secondary-10); } } } /* **** button area **** */ .btn-wrap { width: 100%; } //responsive mobile @include mobile { .btn-ico { &[class*='ico-'] { width: 2.4rem; height: 2.4rem; } } }