105 lines
2.1 KiB
SCSS
105 lines
2.1 KiB
SCSS
@mixin button-styles(
|
|
$background-color,
|
|
$color,
|
|
$border-radius: 4px,
|
|
$border-color: transparent,
|
|
$apply-hover: true,
|
|
$hover-background: null,
|
|
$hover-color: $color
|
|
) {
|
|
background-color: $background-color;
|
|
color: $color;
|
|
border-radius: $border-radius;
|
|
border: 1px solid $border-color;
|
|
|
|
@if $apply-hover {
|
|
&:hover {
|
|
background-color: $hover-background;
|
|
color: $hover-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.button {
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-family: pretendard;
|
|
line-height: 1px;
|
|
transition:
|
|
background-color 0.2s ease,
|
|
color 0.2s ease;
|
|
|
|
// [action] 공통 스타일
|
|
@mixin base-action {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 2px;
|
|
height: 36px;
|
|
}
|
|
|
|
// ------------------------------------- SIZE --------------------------------------
|
|
|
|
// Delete(icon)
|
|
&--xs {
|
|
@include base-action;
|
|
}
|
|
|
|
// Details, Edit
|
|
&--sm {
|
|
height: 30px;
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
|
|
// Close, Confirm, Process, Cancel
|
|
&--md {
|
|
height: 33px;
|
|
min-width: 100px;
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
|
|
// Add, Delete, Change, Reset
|
|
&--lg {
|
|
@include base-action;
|
|
min-width: 74px;
|
|
}
|
|
|
|
// ------------------------------------- SIZE --------------------------------------
|
|
|
|
// ------------------------------------- STYLE -------------------------------------
|
|
|
|
// Details, Edit
|
|
&--rounded {
|
|
@include button-styles(#fff, #7e84a3, 4px, #a1a7c4, #fff, #6c757d, #fff);
|
|
}
|
|
|
|
// Confirm
|
|
&--confirm {
|
|
@include button-styles(#fec702, #fff, 50px, null, true, #fdde6d, #fff);
|
|
}
|
|
|
|
// Process
|
|
&--process {
|
|
@include button-styles(#fec702, #fff, 4px, null, true, #fdde6d, #fff);
|
|
}
|
|
|
|
// Close, Cancel
|
|
&--close {
|
|
@include button-styles(#fff, #858c97, 50px, #c2cad4, false);
|
|
}
|
|
|
|
// Add, Reset, Change, Delete
|
|
&--action {
|
|
@include button-styles(#fff, #7e84a3, 4px, #d5d7e3, false);
|
|
}
|
|
|
|
&[disabled] {
|
|
opacity: 0.3;
|
|
pointer-events: none;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
// ------------------------------------- STYLE -------------------------------------
|