@nine-lab/nine-ux 0.1.105 → 0.1.107
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/nine-code-block.css +59 -0
- package/dist/nine-ux.js +216 -216
- package/dist/nine-ux.umd.js +37 -37
- package/package.json +1 -1
|
@@ -93,6 +93,52 @@
|
|
|
93
93
|
}
|
|
94
94
|
}
|
|
95
95
|
}
|
|
96
|
+
|
|
97
|
+
/* @nine-lab/nine-ux/dist/css/nine-code-block.css */
|
|
98
|
+
|
|
99
|
+
.copy-btn {
|
|
100
|
+
margin-left: auto;
|
|
101
|
+
width: 32px; /* 아이콘 전용 버튼으로 가로세로 고정 */
|
|
102
|
+
height: 32px;
|
|
103
|
+
border-radius: 6px;
|
|
104
|
+
border: 1px solid var(--ncb-border);
|
|
105
|
+
background: var(--ncb-btn-bg);
|
|
106
|
+
cursor: pointer;
|
|
107
|
+
display: flex;
|
|
108
|
+
align-items: center;
|
|
109
|
+
justify-content: center;
|
|
110
|
+
transition: all 0.2s;
|
|
111
|
+
position: relative;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/* [핵심] 복사 아이콘 클래스 */
|
|
115
|
+
.copy-btn::before {
|
|
116
|
+
content: "";
|
|
117
|
+
display: block;
|
|
118
|
+
width: 16px;
|
|
119
|
+
height: 16px;
|
|
120
|
+
background-color: var(--ncb-text); /* 아이콘 색상을 텍스트 색상과 동기화 */
|
|
121
|
+
|
|
122
|
+
/* Lucide Copy 아이콘 SVG */
|
|
123
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='16' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E");
|
|
124
|
+
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='16' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E");
|
|
125
|
+
-webkit-mask-repeat: no-repeat;
|
|
126
|
+
mask-repeat: no-repeat;
|
|
127
|
+
mask-size: contain;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
/* [방법] 복사 완료 시 아이콘 교체 */
|
|
131
|
+
.copy-btn.copied {
|
|
132
|
+
background: #238636;
|
|
133
|
+
border-color: #238636;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.copy-btn.copied::before {
|
|
137
|
+
background-color: #ffffff; /* 체크 아이콘은 흰색으로 */
|
|
138
|
+
/* Lucide Check 아이콘 SVG */
|
|
139
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
|
|
140
|
+
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
|
|
141
|
+
}
|
|
96
142
|
}
|
|
97
143
|
|
|
98
144
|
/* [시스템 테마 - Dark] */
|
|
@@ -107,4 +153,17 @@
|
|
|
107
153
|
--ncb-btn-bg: rgba(240, 246, 252, 0.1);
|
|
108
154
|
--ncb-btn-hover: rgba(240, 246, 252, 0.2);
|
|
109
155
|
}
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
/* 수동 클래스 제어를 추가하고 싶을 때 */
|
|
159
|
+
/* [방법 A] 컴포넌트에 직접 theme="dark" 속성이 있을 때 */
|
|
160
|
+
:host(nine-code-block[theme="dark"]) {
|
|
161
|
+
--ncb-bg: #0d1117;
|
|
162
|
+
--ncb-header-bg: #161b22;
|
|
163
|
+
--ncb-border: #30363d;
|
|
164
|
+
--ncb-text: #c9d1d9;
|
|
165
|
+
--ncb-lang: #8b949e;
|
|
166
|
+
--ncb-code-bg: #0d1117;
|
|
167
|
+
--ncb-btn-bg: rgba(240, 246, 252, 0.1);
|
|
168
|
+
--ncb-btn-hover: rgba(240, 246, 252, 0.2);
|
|
110
169
|
}
|