File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
.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-comment {
background-image: url(#{$url}/component/common/ico_comment_16.svg);
}
&.ico-update {
background-image: url(#{$url}/component/common/ico_pencil.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-plus {
background-image: url(#{$url}/component/common/ico_plus_24.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;
}
}
}