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
// 포커스 효과를 위한 믹스인
@mixin focus($offset: -.4rem, $color: $primary, $alpha: .8) {
// 포커스 아웃라인 색상 및 투명도 설정
outline-offset: $offset;
$transparent: 1 - $alpha;
$focus-color: transparentize($color, $transparent);
outline: 2px solid $focus-color;
}
// Flexbox 요소의 확대 및 축소 비율 설정
@mixin flex-size($shrink, $grow) {
flex-shrink: $shrink;
flex-grow: $grow;
}
// 버튼 스타일 초기화 믹스인
@mixin btn-reset {
color: inherit;
border: 0;
background-color: inherit;
&:hover,
&:active {
background-color: inherit;
}
}
/* **** 영역 관련 믹스인 **** */
// 컬럼 설정 믹스인 (현재 비어 있음)
@mixin columns($total, $num, $gutter) {}
// 간격(Spacing) 설정 믹스인
@mixin spacer($num) {
@for $i from 1 through $num {
$key: $i;
$value: (
$i * 4 * 0.1) + rem;
// 기본 spacer 값 설정
$spacers: map-merge(($key: $value,
),
$spacers) !global;
}
}
// 테두리 둥근 정도(border-radius) 설정 믹스인
@mixin radius($num) {
$border-radius: map-merge($num : ($num * 0.1) + rem,
),
$border-radius
}
// 위치(position) 설정 믹스인
@mixin position($p: absolute,
$t: null,
$b: null,
$l: null,
$r: null) {
position: $p;
top: $t;
bottom: $b;
left: $l;
right: $r;
}
// 가로와 세로 크기를 동일하게 설정하는 믹스인
@mixin foursquare($size) {
width: $size;
height: $size;
}
// 가상 요소(pseudo-element) 생성 시 사용
@mixin pseudo($c: null) {
content: "#{$c}";
}
// Flexbox 레이아웃 설정 믹스인
@mixin flex-layout($d: flex, $ai: flex-start, $jc: flex-start, $fd: row) {
display: $d;
align-items: $ai;
justify-content: $jc;
flex-direction: $fd;
}
// 그룹 요소를 감싸는 컨테이너 믹스인
@mixin group-wrap() {
display: flex;
flex-wrap: wrap;
align-items: stretch;
position: relative;
width: 100%;
}
// 그룹 내 개별 요소 설정 믹스인
@mixin group() {
flex: 1 1 auto;
position: relative;
width: 1%;
min-width: 0;
}
// Flexbox 아이템이 동일한 너비를 갖도록 설정하는 믹스인
@mixin equal-width() {
flex: 1 1 0px;
min-width: 0;
}
// 요소를 중앙 정렬하는 믹스인
@mixin position-center($type) {
@each $type in $position-type {
// 좌우 중앙 정렬
@if ($type =='x') {
left: 50%;
transform: translateX(-50%)
}
// 상하 중앙 정렬
@else if ($type =='y') {
top: 50%;
transform: translateY(-50%
);
}
// 상하좌우 중앙 정렬
@else if ($type =='both') {
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
}
}
// transform 기준점을 중앙으로 설정하는 믹스인
@mixin transform-origin($x: 50%, $y: 50%) {
transform-origin: $x $y;
}
/* **** 텍스트 속성 ****/
// 텍스트 말줄임표 설정 (지정된 줄 수 만큼 텍스트를 줄여 표시)
@mixin ellipsis($line) {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: $line;
}
// 스크린 리더 전용 스타일 (화면에서 숨기고 접근성 유지)
@mixin sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
// 팝오버/툴팁 등의 텍스트 스타일 초기화
@mixin reset-text {
font-family: var(--#{$prefix}-fz-body-md);
font-style: normal;
font-weight: map-get($fws, normal);
line-height: $line-height-base;
text-align: left;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
white-space: normal;
word-spacing: normal;
line-break: auto;
}
// CSS 애니메이션 가시성 설정 (hidden 또는 visible 값 사용)
@mixin visibility($v) {
@if ($v ==hidden) {
visibility: hidden;
z-index: -1;
opacity: 0;
}
@else if ($v ==visible) {
visibility: visible;
z-index: auto;
opacity: 1;
}
}
/* **** 스크롤바 스타일 ****/
// 스크롤바 커스텀 스타일
@mixin scrollbar {
&::-webkit-scrollbar {
width: .8rem;
}
&::-webkit-scrollbar-thumb {
background-color: var(--#{$prefix}gray-40);
border-radius: .8rem;
}
&::-webkit-scrollbar-track {
background-color: var(--#{$prefix}gray-30);
}
}
/* **** 폰트 크기 설정 ****/
// 전역 폰트 크기 설정 (CSS 변수로 지정)
@mixin fz() {
@each $type, $size in map-get($font-size, 'sizes') {
@each $key, $value in $size {
--#{$prefix}fz-#{$type}-#{$key}: #{$value};
}
}
}
/* **** 버튼 스타일 ****/
// 버튼 크기 및 스타일 설정
@mixin btn() {
@each $type, $size in map-get($btns, 'setting') {
@each $key, $value in $size {
--#{$prefix}btn-#{$type}-#{$key}: #{$value};
// 높이별 버튼 클래스 추가
@if ($type =='h') {
@at-root .btn.#{$key} {
height: #{$value};
padding: 0 var(--#{$prefix}btn-px-#{$key});
border-radius: var(--#{$prefix}btn-rd-#{$key});
font-size: var(--#{$prefix}btn-fz-#{$key});
}
}
}
}
}
/* **** 칩 버튼 스타일 ****/
// 칩 버튼 (outline 또는 fill 스타일 선택)
@mixin btn-chip($name, $default) {
// 아웃라인 스타일 칩 버튼 설정
@if ($name =='outline') {
@each $type, $size in map-get($btnChipOutline, 'setting') {
@each $key, $value in $size {
--#{$prefix}btnChipOutline-#{$type}-#{$key}: #{$value};
// 높이별 칩 버튼 스타일 적용
@if ($type =='h') {
@at-root .btn-chip-outline.#{$key} {
height: var(--#{$prefix}btnChipOutline-h-#{$key});
padding: var(--#{$prefix}btnChipOutline-pd-#{$key});
border-radius: var(--#{$prefix}btnChipOutline-rd-#{$key});
font-size: var(--#{$prefix}btnChipOutline-fz-#{$key});
.btn-del {
width: var(--#{$prefix}btnChipOutline-size-#{$key});
height: var(--#{$prefix}btnChipOutline-size-#{$key});
background: url(#{$url}/component/common/ico_chip_del.svg) no-repeat 0 0;
background-size: contain;
}
}
}
// 기본 크기 설정
@if ($default) {
@at-root .btn-chip-outline {
height: var(--#{$prefix}btnChipOutline-h-#{$default});
padding: var(--#{$prefix}btnChipOutline-pd-#{$default});
border-radius: var(--#{$prefix}btnChipOutline-rd-#{$default});
font-size: var(--#{$prefix}btnChipOutline-fz-#{$default});
.btn-del {
width: var(--#{$prefix}btnChipOutline-size-#{$default});
height: var(--#{$prefix}btnChipOutline-size-#{$default});
background: url(#{$url}/component/common/ico_chip_del.svg) no-repeat 0 0;
background-size: contain;
// 포커스 스타일 추가
&:focus {
@include focus($offset: .4rem);
}
}
}
}
}
}
}
// 채워진 스타일 칩 버튼 설정
@else if ($name =='fill') {
@each $type, $size in map-get($btnChipFill, 'setting') {
@each $key, $value in $size {
--#{$prefix}btnChipFill-#{$type}-#{$key}: #{$value};
// 높이별 칩 버튼 스타일 적용
@if ($type =='h') {
@at-root .btn-chip-fill.#{$key} {
height: var(--#{$prefix}btnChipFill-h-#{$key});
padding: var(--#{$prefix}btnChipFill-pd-#{$key});
border-radius: var(--#{$prefix}btnChipFill-rd-#{$key});
font-size: var(--#{$prefix}btnChipFill-fz-#{$key});
}
}
// 기본 크기 설정
@if ($default) {
@at-root .btn-chip-fill {
height: var(--#{$prefix}btnChipFill-h-#{$default});
padding: var(--#{$prefix}btnChipFill-pd-#{$default});
border-radius: var(--#{$prefix}btnChipFill-rd-#{$default});
font-size: var(--#{$prefix}btnChipFill-fz-#{$default});
// 포커스 스타일 추가
&:focus {
@include focus($offset: .4rem);
}
}
}
}
}
}
}
/* **** form mixin ****/
// input 믹스인: 폼의 텍스트 입력 필드 스타일을 설정
@mixin input() {
@each $type, $size in map-get($inputs, 'setting') {
@each $key, $value in $size {
--#{$prefix}input-#{$type}-#{$key}: #{$value};
@if ($type =='h') {
//높이별 class값 추가
@at-root .form-control.#{$key} {
height: #{$value};
padding: 0 var(--#{$prefix}input-px-#{$key});
border-radius: var(--#{$prefix}input-rd-#{$key});
font-size: var(--#{$prefix}input-fz-#{$key});
}
}
}
}
}
// radio 믹스인: 라디오 버튼 스타일 설정
@mixin radio() {
@each $type, $size in map-get($radios, 'setting') {
@each $key, $value in $size {
--#{$prefix}rdo-#{$type}-#{$key}: #{$value};
@if ($type =='size') {
@at-root .form-check.#{$key} {
>[type=radio] {
~label {
font-size: var(--krds-rdo-fz-#{$key});
line-height: var(--krds-rdo-#{$type}-#{$key});
min-height: var(--krds-rdo-#{$type}-#{$key});
padding-left: calc(var(--krds-rdo-#{$type}-#{$key}) + var(--krds-spacer-2));
&::before {
width: var(--#{$prefix}rdo-#{$type}-#{$key});
height: var(--#{$prefix}rdo-#{$type}-#{$key});
}
&::after {
top: calc((var(--#{$prefix}rdo-size-#{$key}) - var(--#{$prefix}rdo-chk-#{$key})) / 2);
left: calc((var(--#{$prefix}rdo-size-#{$key}) - var(--#{$prefix}rdo-chk-#{$key})) / 2);
width: var(--#{$prefix}rdo-chk-#{$key});
height: var(--#{$prefix}rdo-chk-#{$key});
}
}
}
}
}
}
}
}
// checkbox 믹스인: 체크박스 스타일 설정
@mixin chk() {
@each $type, $size in map-get($checkboxes, 'setting') {
@each $key, $value in $size {
--#{$prefix}chk-#{$type}-#{$key}: #{$value};
@if ($type =='size') {
@at-root .form-check.#{$key} {
>[type=checkbox] {
~label {
font-size: var(--krds-chk-fz-#{$key});
line-height: var(--krds-chk-#{$type}-#{$key});
min-height: var(--krds-chk-#{$type}-#{$key});
padding-left: calc(var(--krds-chk-#{$type}-#{$key}) + var(--krds-spacer-2));
&::before {
width: var(--#{$prefix}chk-#{$type}-#{$key});
height: var(--#{$prefix}chk-#{$type}-#{$key});
}
&::after {
width: var(--#{$prefix}chk-primary-chk-#{$key});
height: var(--#{$prefix}chk-primary-chk-#{$key});
}
}
}
&.ico-only {
>[type=checkbox] {
~label {
padding-left: var(--krds-chk-#{$type}-#{$key});
}
}
}
}
}
}
}
}
// select 믹스인: 셀렉트 박스 스타일 설정
@mixin select() {
@each $type, $size in map-get($select, 'setting') {
@each $key, $value in $size {
--#{$prefix}select-#{$type}-#{$key}: #{$value};
@if ($type =='h') {
//높이별 class값 추가
@at-root .form-select.#{$key} {
height: #{$value};
padding: var(--#{$prefix}select-pd-#{$key});
border-radius: var(--#{$prefix}select-rd-#{$key});
font-size: var(--#{$prefix}select-fz-#{$key});
background-size: var(--#{$prefix}select-bgs-#{$key});
}
}
}
}
}
// switch 믹스인: 스위치 컴포넌트 스타일 설정
@mixin switch() {
@each $type, $size in map-get($switch, 'setting') {
@each $key, $value in $size {
--#{$prefix}switch-#{$type}-#{$key}: #{$value};
@if ($type =='w') {
@at-root .form-switch.#{$key} {
[type=checkbox] {
~i {
&::before {
width: var(--#{$prefix}switch-b-#{$key});
height: var(--#{$prefix}switch-b-#{$key});
border-radius: var(--#{$prefix}switch-rd-#{$key});
}
&::after {
width: var(--#{$prefix}switch-w-#{$key});
height: var(--#{$prefix}switch-h-#{$key});
}
}
~label {
$labelValue : var(--#{$prefix}switch-w-#{$key});
$pdValue : var(--#{$prefix}switch-pd-#{$key});
padding-left: calc($labelValue + $pdValue);
margin-left: calc($labelValue * -1);
font-size: var(--#{$prefix}switch-fz-#{$key});
}
&:checked {
~i {
&::before {
$posL : calc(var(--#{$prefix}switch-w-#{$key}) - var(--#{$prefix}switch-b-#{$key}) - var(--#{$prefix}switch-br-#{$key}));
@include position($l: $posL);
}
}
}
}
}
}
}
}
}
// form-chip 믹스인: 칩 형태의 선택 가능한 컴포넌트 스타일 설정
@mixin form-chip($name, $default) {
@if ($name =='radio') {
@each $type, $size in map-get($rdoChipOutline, 'setting') {
@each $key, $value in $size {
--#{$prefix}rdoChipOutline-#{$type}-#{$key}: #{$value};
@if ($type =='h') {
@at-root .form-chip.#{$key} {
.radio {
~.form-chip-outline {
gap:var(--#{$prefix}chkChipOutline-gap-#{$key});
height: var(--#{$prefix}rdoChipOutline-h-#{$key});
padding: var(--#{$prefix}rdoChipOutline-pd-#{$key});
border-radius: var(--#{$prefix}rdoChipOutline-rd-#{$key});
font-size: var(--#{$prefix}rdoChipOutline-fz-#{$key});
&::before {
width:var(--#{$prefix}chkChipOutline-ico-#{$key});
height:var(--#{$prefix}chkChipOutline-ico-#{$key});
background: url(#{$url}/component/common/ico_check_chip.svg) no-repeat 0 0;
background-size: contain;
}
}
&:checked {
~.form-chip-outline {
&::before {
background-image: url(#{$url}/component/common/ico_check_chip_checked.svg);
}
}
}
&:disabled {
~.form-chip-outline {
&::before {
background-image: url(#{$url}/component/common/ico_check_chip_disabled.svg);
}
}
}
}
}
}
@if ($default) {
@at-root .form-chip {
.radio {
~.form-chip-outline {
gap:var(--#{$prefix}chkChipOutline-gap-#{$key});
height: var(--#{$prefix}rdoChipOutline-h-#{$key});
padding: var(--#{$prefix}rdoChipOutline-pd-#{$key});
border-radius: var(--#{$prefix}rdoChipOutline-rd-#{$key});
font-size: var(--#{$prefix}rdoChipOutline-fz-#{$key});
&::before {
width:var(--#{$prefix}chkChipOutline-ico-#{$key});
height:var(--#{$prefix}chkChipOutline-ico-#{$key});
background: url(#{$url}/component/common/ico_check_chip.svg) no-repeat 0 0;
background-size: contain;
}
}
&:checked {
~.form-chip-outline {
&::before {
background-image: url(#{$url}/component/common/ico_check_chip_checked.svg);
}
}
}
&:disabled {
~.form-chip-outline {
&::before {
background-image: url(#{$url}/component/common/ico_check_chip_disabled.svg);
}
}
}
}
}
}
}
}
}
@else if ($name =='checkbox') {
@each $type, $size in map-get($chkChipOutline, 'setting') {
@each $key, $value in $size {
--#{$prefix}chkChipOutline-#{$type}-#{$key}: #{$value};
@if ($type =='h') {
@at-root .form-chip.#{$key} {
.checkbox {
~.form-chip-outline {
gap:var(--#{$prefix}chkChipOutline-gap-#{$key});
height: var(--#{$prefix}chkChipOutline-h-#{$key});
padding: var(--#{$prefix}chkChipOutline-pd-#{$key});
border-radius: var(--#{$prefix}chkChipOutline-rd-#{$key});
font-size: var(--#{$prefix}chkChipOutline-fz-#{$key});
&::before {
width:var(--#{$prefix}chkChipOutline-ico-#{$key});
height:var(--#{$prefix}chkChipOutline-ico-#{$key});
background: url(#{$url}/component/common/ico_check_chip.svg) no-repeat 0 0;
background-size: contain;
}
}
&:checked {
~.form-chip-outline {
&::before {
background-image: url(#{$url}/component/common/ico_check_chip_checked.svg);
}
}
}
&:disabled {
~.form-chip-outline {
&::before {
background-image: url(#{$url}/component/common/ico_check_chip_disabled.svg);
}
}
}
}
}
}
@if ($default) {
@at-root .form-chip {
.checkbox {
~.form-chip-outline {
gap:var(--#{$prefix}chkChipOutline-gap-#{$key});
height: var(--#{$prefix}chkChipOutline-h-#{$key});
padding: var(--#{$prefix}chkChipOutline-pd-#{$key});
border-radius: var(--#{$prefix}chkChipOutline-rd-#{$key});
font-size: var(--#{$prefix}chkChipOutline-fz-#{$key});
&::before {
width:var(--#{$prefix}chkChipOutline-ico-#{$key});
height:var(--#{$prefix}chkChipOutline-ico-#{$key});
background: url(#{$url}/component/common/ico_check_chip.svg) no-repeat 0 0;
background-size: contain;
}
}
&:checked {
~.form-chip-outline {
&::before {
background-image: url(#{$url}/component/common/ico_check_chip_checked.svg);
}
}
}
&:disabled {
~.form-chip-outline {
&::before {
background-image: url(#{$url}/component/common/ico_check_chip_disabled.svg);
}
}
}
}
}
}
}
}
}
}
//tab setting
@mixin tabs() {
@each $type, $size in map-get($tabs, 'setting') {
@each $key, $value in $size {
--#{$prefix}tab-#{$type}-#{$key}: #{$value};
}
}
}