@nine-lab/nine-ux 0.1.220 → 0.1.222
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/css/nineNav.css
CHANGED
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
border-bottom-left-radius: 8px;
|
|
24
24
|
--box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
|
|
25
25
|
gap: 4px;
|
|
26
|
+
|
|
26
27
|
.title-icon {
|
|
27
28
|
display: none;
|
|
28
29
|
--width: 16px;
|
|
@@ -32,6 +33,61 @@
|
|
|
32
33
|
background-size: auto;
|
|
33
34
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="rgb(200,200,200)" class="bi bi-grid" viewBox="0 0 16 16"><path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5z"/></svg>');
|
|
34
35
|
}
|
|
36
|
+
|
|
37
|
+
/* ==========================================================================
|
|
38
|
+
[변경 및 추가] TOUCH DOWN 3등분 빈틈 사선 타이포그래피 (화면 타이틀용)
|
|
39
|
+
========================================================================== */
|
|
40
|
+
span.touchdown-3color {
|
|
41
|
+
position: relative;
|
|
42
|
+
padding-left: 8px;
|
|
43
|
+
padding-right: 8px;
|
|
44
|
+
font-family: 'Arial Black', Impact, sans-serif;
|
|
45
|
+
font-size: 20px; /* 기존 18px에서 상단 띠 밸런스에 맞춰 살짝 확장 */
|
|
46
|
+
font-weight: 900;
|
|
47
|
+
line-height: 1;
|
|
48
|
+
display: inline-block;
|
|
49
|
+
letter-spacing: -0.03em;
|
|
50
|
+
color: transparent; /* 빈틈 연출을 위해 원본 텍스트는 투명화 */
|
|
51
|
+
|
|
52
|
+
/* [1번째 레이어] 맨 왼쪽 연그레이 */
|
|
53
|
+
&::before {
|
|
54
|
+
content: attr(data-text);
|
|
55
|
+
position: absolute;
|
|
56
|
+
top: 0; left: 0; width: 100%; height: 100%;
|
|
57
|
+
padding: inherit; /* 부모 span의 padding값 상속 */
|
|
58
|
+
box-sizing: border-box;
|
|
59
|
+
color: #e2e8f0;
|
|
60
|
+
/* 과감하게 눕힌 기울기 (상단 10% / 하단 65%) */
|
|
61
|
+
clip-path: polygon(0% 0, 10% 0, 65% 100%, 0% 100%);
|
|
62
|
+
z-index: 1;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/* [2번째 레이어] 가운데 오렌지 */
|
|
66
|
+
span::before {
|
|
67
|
+
content: attr(data-text);
|
|
68
|
+
position: absolute;
|
|
69
|
+
top: 0; left: 0; width: 100%; height: 100%;
|
|
70
|
+
color: #E28739;
|
|
71
|
+
box-sizing: border-box;
|
|
72
|
+
/* 빈틈 간격 2.5% 및 가운데 오렌지 폭을 시원하게 확보 */
|
|
73
|
+
clip-path: polygon(12.5% 0, 42.5% 0, 97.5% 100%, 67.5% 100%);
|
|
74
|
+
z-index: 2;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* [3번째 레이어] 맨 오른쪽 네이비 */
|
|
78
|
+
&::after {
|
|
79
|
+
content: attr(data-text);
|
|
80
|
+
position: absolute;
|
|
81
|
+
top: 0; left: 0; width: 100%; height: 100%;
|
|
82
|
+
padding: inherit;
|
|
83
|
+
box-sizing: border-box;
|
|
84
|
+
color: #111B3D;
|
|
85
|
+
/* 마지막 빈틈 간격 2.5% 띄우고 우측 끝까지 지정 */
|
|
86
|
+
clip-path: polygon(45% 0, 100% 0, 100% 100%, 100% 100%);
|
|
87
|
+
z-index: 3;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
35
91
|
span {
|
|
36
92
|
padding-left: 8px;
|
|
37
93
|
padding-right: 8px;
|
package/dist/css/ninePanel.css
CHANGED
|
@@ -54,11 +54,23 @@
|
|
|
54
54
|
width: 100%;
|
|
55
55
|
height: 100%;
|
|
56
56
|
padding: 8px;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
select {
|
|
60
|
+
appearance: none;
|
|
61
|
+
-webkit-appearance: none; /* 크롬, 사파리 최적화 */
|
|
62
|
+
-moz-appearance: none; /* 파이어폭스 최적화 */
|
|
57
63
|
|
|
64
|
+
/* 안전하게 특수문자가 인코딩된 SVG 코드입니다 */
|
|
65
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23999999' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
|
|
66
|
+
background-repeat: no-repeat;
|
|
67
|
+
background-position: right 4px center;
|
|
58
68
|
|
|
69
|
+
/* 내부 텍스트가 화살표와 겹치지 않도록 충분한 여백 확보 */
|
|
70
|
+
padding-right: 36px;
|
|
59
71
|
}
|
|
60
72
|
|
|
61
|
-
input {
|
|
73
|
+
input,select {
|
|
62
74
|
color: var(--input-color);
|
|
63
75
|
background-color: 1px solid var(--input-background-color);
|
|
64
76
|
border: 1px solid var(--input-border-color);
|