-
Notifications
You must be signed in to change notification settings - Fork 1
/
_config.scss
80 lines (69 loc) · 2.72 KB
/
_config.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
//* ---------------------------------------------------------------------------
//* 사용법: 아래 설정 변수 값을 복사/붙여넣은 후 사용자 정의 값 설정합니다.
//* ---------------------------------------------------------------------------
//* --------------------------------------------------------------------------
// em, rem 단위 기본 값 설정
$base-em-size: 16px;
$base-rem-size: 16px;
//* --------------------------------------------------------------------------
// 컬러 스킴 설정 (`컬러-이름: 값`을 임의로 추가해 사용)
$colors: (
black: #010101,
white: #fefefe,
gray: #787878,
state-normal: #707070,
state-hover: #35a1af,
state-focus: #1870d4,
state-active: #185158,
state-disabled: #dedede,
state-valid: #219c5e,
state-invalid: #e72e6c,
);
//* --------------------------------------------------------------------------
// 박스 정렬 설정
// justify-*, align-* 대신 place-* 속성 사용하고자 할 경우 true 설정
$using-place-layout: false;
//* --------------------------------------------------------------------------
// 이징 함수 설정
// 커스텀 이징 함수 설정 (확장)
$easings: ease-merge(
(
in-euid: cubic-bezier(0.43, 0.16, 0.7, 0.52),
out-euid: cubic-bezier(0.31, 0.16, 0.56, 0.99),
inout-euid: cubic-bezier(0.94, 0.01, 0.47, 1.13),
)
);
//* --------------------------------------------------------------------------
// 미디어 쿼리 설정
// 라이브러리: https://eduardoboucas.github.io/include-media/
// 중단점 설계 (import-media 라이브러리 활용) → 임의의 키워드 사용 가능
// 참고: https://bit.ly/2J9wKYe / https://bit.ly/34ZeI2q
$breakpoints: (
'sm': em(640),
'md': em(768),
'lg': em(1024),
'xl': em(1280),
'2xl': em(1440),
'3xl': em(1920),
);
// 미디어 표현식 설계 (import-media 라이브러리 활용) → 임의의 키워드 사용 가능
// 참고: https://mzl.la/2KMpm5o
$media-expressions: (
'landscape': '(orientation: landscape)',
'portrait': '(orientation: portrait)',
'2x':
'(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)',
'3x':
'(-webkit-min-device-pixel-ratio: 3), (min-resolution: 350dpi), (min-resolution: 3dppx)',
'dark-mode': '(prefers-color-scheme: dark)',
'no-motion': '(prefers-reduced-motion: reduce)',
);
// 미디워 퀴리 설정 여부 (기본 값: true)
$im-media-support: true;
// $im-media-support 값이 false일 경우,
// 설정된 미디어 쿼리 키워드 이상 스크린 너비는 무시 처리
$im-no-media-breakpoint: 'xl';
// $im-media-support 값이 false일 경우에도
// 허용할 미디어 식 값을 설정
// 참고: https://bit.ly/3h75qGw
$im-no-media-expressions: ('screen');